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的函数应返回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）会返回L.LayerGroup的扩展类型，因此您无需将它们导入新的图层组能够在图层控件中使用它们。

因此你可以直接做：

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

用ajax调用多层的传单图标

1 个答案: