使用来自外部 geoJSON 文件的数据更改传单标记图标

Question

我在更改 Leaflet 地图上的 geoJSON 数据图标时遇到问题。

我正在从外部 geoJSON 文件加载我的数据。因此，我使用 XMLHttpRequest() 打开文件（文件名存储在数组 orteDB 中），然后将它们添加到我的图层 orte 中，然后将其添加到地图中：

for (var i = 0; i < orteDB.length; i++) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'files/geoJSONfiles/orte/' + orteDB[i]);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.responseType = 'json';
    xhr.onload = function () {
        if (xhr.status !== 200) return
        L.geoJSON(xhr.response).addTo(orte).on('click', onClick);
    };
    xhr.send();
}

orte = L.geoJson(orte).addTo(map);

我已经在这个示例的帮助下更改了默认图标 https://gist.github.com/geog4046instructor/80ee78db60862ede74eacba220809b64。但我真正想要的是单击按钮或标记本身后动态更改的图标 redIcon:

var redIcon = L.Icon.extend({
        iconUrl: 'files/marker-icon_red.png',
        iconSize:     [25, 41],
        iconAnchor:   [12, 40],
    });

我也尝试使用 pointToLayer() 函数，但它对我不起作用。

每个 geoJSON 点都有一个唯一的 ID，我可以通过 e.layer.feature.properties.id 调用它。所以最后我想通过使用它的唯一 ID 单独更改标记图标。

我的 geoGSON 文件如下所示：

{
 "type": "FeatureCollection",
 "name": "02_Roncesvalles",
 "features": [
  { 
   "type": "Feature", 
   "properties": 
     { 
      "id": 2 }, 
   "geometry": 
     { 
      "type":"Point", 
      "coordinates": [ 
        -1.320700314538876, 
        43.009378247303687 ] 
     } 
   }
  ]
}

非常感谢您的帮助！

Answer 1

您可以使用 marker.setIcon(icon) 更改标记的图标，您需要遍历所有图层并在 id 上找到正确的图层。

我使用 map.eachLayer 而不是 orte.eachLayer() 因为 GeoJSON 组也可以包含图层组。

var wantedId = 1;
map.eachLayer((layer)=>{
   if(layer instanceof L.Marker && layer.feature && layer.feature.properties && layer.feature.properties.id == wantedId){
      layer.setIcon(new redIcon());
   }
});

更新

谢谢@ghybs，我没认出图标的 extend。

如果你想扩展图标 class 你需要把选项放在 options 属性.

var redIcon = L.Icon.extend({
   options: {
        iconUrl: 'files/marker-icon_red.png',
        iconSize:     [25, 41],
        iconAnchor:   [12, 40],
   }
});

然后你可以用marker.setIcon(new redIcon())

改变图标

但我建议您简单地创建一个 Icon 变量，而不是创建一个新的 class。

var redIcon = L.icon({
        iconUrl: 'files/marker-icon_red.png',
        iconSize:     [25, 41],
        iconAnchor:   [12, 40],
    });

然后调用marker.setIcon(redIcon)

使用来自外部 geoJSON 文件的数据更改传单标记图标

Change Leaflet marker icon with data from external geoJSON file

javascript

icons

geojson

marker

leaflet