将传单中的自定义图标添加到 geojson 文件

Question

我得到了以下代码

var Iconcm = L.icon({
iconUrl: 'customicon.png',
iconSize: [25, 25],
iconAnchor: [22, 94],
popupAnchor: [-10, -95]
});



$.ajax({
        dataType: "json",
        url: "pc.geojson",
        success: function(data) {
                L.geoJson(data, {
                    onEachFeature: onEachFeature
                }).addTo(map);
        }
     }).error(function() {});


        function onEachFeature(feature, layer) {
      var lines = ('Field1: ' + feature.properties.f1 + '<br>' + 'Field2: ' + feature.properties.f2)

            layer.bindPopup(lines);
        };

我希望能够使用 Iconcm 而不是默认的蓝色标记。我已经尝试了几乎所有在互联网上找到的方法都无济于事。我是 javascript 的新人，甚至是 AJAX 的新人。上面的代码是我的 geojson 文件实际工作的唯一方式，所以我宁愿保持这种方式。此外，将来我希望能够根据一个字段中的特征属性使用不同的图标。例如，如果 feature.properties.f3 是 Type1，则 customicon1，Type2 是 customicon2，依此类推。有没有办法做到这一点？谢谢！

Answer 1

有一种方法setIcon你可以使用。

你想测试你只在图层实际上是 L.Marker

时才调用它

function onEachFeature(feature, layer) {
  if (layer instanceof L.Marker) {
    layer.setIcon(Iconcm)
  }
// ...

Answer 2

L.geoJSON 提供 pointToLayer 来创建自定义标记，请参阅示例 https://leafletjs.com/SlavaUkraini/examples/geojson/

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

L.geoJSON(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
}).addTo(map);

除了使用圆形标记，您还可以创建带有自定义图标的标记。

将传单中的自定义图标添加到 geojson 文件

Adding custom icons in leaflet to geojson file

javascript

geojson

leaflet