使用 Leaflet 中的属性可视化线串答案

【问题标题】：Visualizing Linestrings with properties in Leaflet使用 Leaflet 中的属性可视化线串
【发布时间】：2018-01-27 07:08:29
【问题描述】：

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

{"features":[{"type":"Feature","properties":{"name":"0"},"geometry":{"type":"LineString","coordinates":[ [10.941445541381836,52.438697814941406]，[10.941454124450684,52.4387092590332]，[10.941451263427734,52.43870544433594]，[10.941445541381836,52.438697814941406]，[10.941254806518555,52.440738677978516]]}}，{ “类型”： “功能”， “属性”：{ “名称” ： “0”}， “几何”：{ “类型”： “线段形式”， “坐标”：[[10.941445541381836,52.438697814941406]，[10.941454124450684,52.4387092590332]，[10.941451263427734,52.43870544433594]，[10.941445541381836,52.438697814941406]，[10.941254806518555 ,52.440738677978516]]}}}

任何帮助都会很棒！

谢谢

【问题讨论】：

标签： javascript leaflet geojson

【解决方案1】：

您没有正确使用 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);

【讨论】：