使用Leaflet中的属性可视化Linestrings

时间:2017-08-18 14:39:53

标签: javascript leaflet geojson

我想要可视化发送到我的Leaflet / JavaScript应用程序的以下GeoJSON-Object。如何可视化所有线串,显示每个线串的properties.name参数(例如,通过ToolTip)。

{"特征":[{"类型":"特征""属性" {"名称&#34 ;:" 0"}"几何" {"类型":"线段形式""坐标":[ [10.941445541381836,52.438697814941406],[10.941454124450684,52.4387092590332],[10.941451263427734,52.43870544433594],[10.941445541381836,52.438697814941406],[10.941254806518555,52.440738677978516]]}},{"类型":"特征&#34 ;,"属性" {"名称":" 0"}"几何" {"类型&#34 ;: "线段形式""坐标":[[10.941445541381836,52.438697814941406],[10.941454124450684,52.4387092590332],[10.941451263427734,52.43870544433594],[10.941445541381836,52.438697814941406],[10.941254806518555,52.440738677978516]]} }}

任何帮助都会很棒!

由于

1 个答案:

答案 0 :(得分:0)

您没有正确使用GeoJSON。如果您有多个功能,则应使用功能集:https://geojson.org/geojson-spec.html

然后使用此网站获得正确的格式:https://jsonformatter.curiousconcept.com/

然后,如果您想添加工具提示,请参阅本教程:http://leafletjs.com/examples/geojson/

var geojsonFeature = {
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "geometry":{
            "type":"LineString",
            "coordinates":[
               [
                  10.941445541381836,
                  52.438697814941406
               ],
               [
                  10.941454124450684,
                  52.4387092590332
               ],
               [
                  10.941451263427734,
                  52.43870544433594
               ],
               [
                  10.941445541381836,
                  52.438697814941406
               ],
               [
                  10.941254806518555,
                  52.440738677978516
               ]
            ]
         },
         "properties":{
            "name":"0"
         }
      },
      {
         "type":"Feature",
         "geometry":{
            "type":"LineString",
            "coordinates":[
               [
                  10.941445541381836,
                  52.438697814941406
               ],
               [
                  10.941454124450684,
                  52.4387092590332
               ],
               [
                  10.941451263427734,
                  52.43870544433594
               ],
               [
                  10.941445541381836,
                  52.438697814941406
               ],
               [
                  10.941254806518555,
                  52.440738677978516
               ]
            ]
        },
        "properties":{
           "name":"0"
        }
      }
   ]
};

function onEachFeature(feature, layer) {
    // This is where it loop through your features
    if (feature.properties) {
        // If there is a properties document we bind a tooltip with your property : name
        layer.bindTooltip(feature.properties.name);
    }
}

L.geoJSON(geojsonFeature, {
    onEachFeature: onEachFeature
}).addTo(map);