使用 geoJson 的传单标记答案

【问题标题】：leaflet markers using geoJson使用 geoJson 的传单标记
【发布时间】：2018-08-15 20:00:23
【问题描述】：

我正在尝试让标记显示在每个州的地图上。我没有显示任何标记。
这是我的geoJson：

{"type":"Feature","id":"01","properties":{"name":"Alabama","availability":0},"geometry":{"type":"Polygon","coordinates":[[[-87.359296,35.00118],[-85.606675,34.984749],[-85.431413,34.124869],[-85.184951,32.859696],[-85.069935,32.580372],[-84.960397,32.421541],[-85.004212,32.322956],[-84.889196,32.262709],[-85.058981,32.13674],[-85.053504,32.01077],[-85.141136,31.840985],[-85.042551,31.539753],[-85.113751,31.27686],[-85.004212,31.003013],[-85.497137,30.997536],[-87.600282,30.997536],[-87.633143,30.86609],[-87.408589,30.674397],[-87.446927,30.510088],[-87.37025,30.427934],[-87.518128,30.280057],[-87.655051,30.247195],[-87.90699,30.411504],[-87.934375,30.657966],[-88.011052,30.685351],[-88.10416,30.499135],[-88.137022,30.318396],[-88.394438,30.367688],[-88.471115,31.895754],[-88.241084,33.796253],[-88.098683,34.891641],[-88.202745,34.995703],[-87.359296,35.00118]]]}},

我正在使用它来获取标记：

geojson = L.geoJson(statesData, {
    style: style,
    pointToLayer: function (feature, latlng) {
                    return L.marker(latlng, {icon: myIcon});
    },
    onEachFeature: onEachFeature
}).addTo(map);
var myIcon = L.icon({
iconUrl: 'https://www.thekeithcorp.com/wp-content/themes/JointsWP-CSS- master/assets/images/4096-200.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});

我进行了测试以确保可以使用以下方式添加图标：

var marker = L.marker([37.8, -96]).addTo(map).on('click', function () {
        sidebar.toggle();
    });

这行得通。但是我无法在地图上显示任何图标，关于我做错了什么有什么想法吗？

我想要实现的是，当单击图标时，它会打开侧边栏，列出该状态下的所有可用属性。如果您单击我添加的图标，您将看到：

var marker = L.marker([37.8, -96]).addTo(map).on('click', function () {
        sidebar.toggle();
    });

这是指向地图的链接：https://www.thekeithcorp.com/interactive-map-1/

任何帮助将不胜感激！

【问题讨论】：

Map color change php to .js的可能重复
@MartinZeitler 虽然您提到的问题确实来自同一个用户并且看起来与同一个项目有关，但 OP 清楚地描述了一个不同的目标：在这里显示一个标记，在那里改变一个颜色。跨度>

标签： javascript php leaflet

【解决方案1】：

Leaflet GeoJSON Layer Group factory 的pointToLayer 选项仅用于"Point" 类型的几何，而在您的GeoJSON 数据示例中，您只有"Polygon" 类型的几何。

如果要将多边形（状态）转换为点，则应重构 GeoJSON 数据，或使用运行时库来计算多边形的“中心”（例如质心等）。

【讨论】：

计算多边形的中心似乎需要相当多的处理开销：blog.mapbox.com/… 在视觉中心手动定义中心标记可能已经足够了，因为这些状态不会有太大变化。
如何确定这些中心完全取决于您。

【解决方案2】：

我通过添加一个新层并将标记放在这个新层上来实现这一点，必须手动添加无法从 json 文件中读取的纬度和滞后坐标：

 var shelter1 = L.marker([34.1,-81.4],{icon: myIcon}).on('click', function () {
        sidebar.toggle();
    });
var shelter2 = L.marker([35.4,-79.3],{icon: myIcon}).on('click', function () {
        sidebar1.toggle(sidebar1);
    });
var shelterMarkers = new L.FeatureGroup();

shelterMarkers.addLayer(shelter1);
shelterMarkers.addLayer(shelter2);

【讨论】：

【解决方案3】：

您可以使用 SheltersMarkers 来包含所有传单标记，也可以简单地使用运行时库来计算地图的中心以及放置标记的位置。

【讨论】：