使用geoJson的小叶标记

Posted 2021-04-13

我想让每个州的地图上显示标记。我没有显示任何标记。 这是我的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/

任何帮助，将不胜感激！

答案

Leaflet GeoJSON Layer Group工厂的pointToLayer选项仅用于"Point"类型的Geometries，而在GeoJSON数据样本中，您只有"Polygon"类型Geometry。

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

另一答案

我通过添加一个新图层并将标记放在这个新图层上来实现这一点，不得不手动添加lat和lag坐标无法从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);