使用 ajax 调用的多层传单图标

Question

我在使用传单调用新图标时遇到了一点问题。

这是我的代码，我正在使用 ajax lib leaflet-ajax.

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var Icon1 = L.icon({
            iconUrl: '/img/pin.svg',
            iconSize: [38, 40] 
          });
var Icon2 = L.icon({
            iconUrl: '/img/pin2.svg',
            iconSize: [38, 40] 
          });
var Icon3 = L.icon({
            iconUrl: '/img/pin3.svg',
            iconSize: [38, 40] 
          });

function popUp(feature, layer) {layer.bindPopup('<p><b>' + feature.properties.name + '</b></p>' + '<p>' + feature.properties.description + '</p>');}
function popUp2(feature, layer) {layer.bindPopup('<p><b>' + feature.properties.name + '</b></p>' + '<p>' + feature.properties.special + '</p>');}

我认为我对图标的调用方法有疑问

// call json 
var geojsonLayer1 = new L.GeoJSON.AJAX("/json/jsonlayer1.json", {onEachFeature:popUp}, {icon:Icon1});
var geojsonLayer2 = new L.GeoJSON.AJAX("/json/jsonlayer2.json", {onEachFeature:popUp}, {icon:Icon2});
var geojsonLayer3 = new L.GeoJSON.AJAX("/json/jsonlayer3.json", {onEachFeature:popUp2}, {icon:Icon3});

// create group layer
var group1 = L.layerGroup([geojsonLayer1]);
var group2 = L.layerGroup([geojsonLayer2]); 
var group3 = L.layerGroup([geojsonLayer3]);  

// call group layer on dialog box
var checkboxesJson = {
 "layer1": group1,
 "layer2": group2,
 "layer3": group3
 };
 L.control.layers(null,checkboxesJson).addTo(map);

感谢您的帮助！

Answer 1

如果我的理解是正确的，您正在尝试通过使用 leaflet-ajax 插件创建自定义 GeoJSON 图层组。但是您不知道如何指定应用于 GeoJSON 数据点标记的图标？

看起来这个插件将简单地使用构造函数/工厂的 第二个参数 中指定的所有标准 L.GeoJSON 选项，就像您为 onEachFeature选项。请注意，您可以在一个对象中有多个选项。

但是，您应该使用 option pointToLayer 而不是仅 icon，这是标记的一个选项。您传递给 pointToLayer 的函数应该 return 一个 L.Marker，您确实会在其中使用 icon 选项。

例如你可以这样做：

var geojsonLayer1 = L.geoJson.ajax(
    "/json/jsonlayer1.json",
    {
        onEachFeature: popUp,
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, { icon: Icon1 })
        }
    });

请注意，通常建议为每个标记实例化一个图标，即使它应该适用于您的简单情况。

顺便说一下，请注意 L.geoJson（以及 ajax 插件，L.geoJson.ajax）return L.LayerGroup 的扩展类型，所以你不必将它们导入新的图层组即可在图层控件中使用它们。

因此你可以直接做：

// call group layer on dialog box
var checkboxesJson = {
    "layer1": geojsonLayer1,
    "layer2": geojsonLayer2,
    "layer3": geojsonLayer3
};
L.control.layers(null,checkboxesJson).addTo(map);

使用 ajax 调用的多层传单图标

Leaflet Icon on multiple layer calling with ajax

ajax

icons

leaflet