单击时传单设置标记图标

Question

我正在尝试按照网络上找到的各种示例单击更改geojson标记图标，但我无法使其工作，它引发了以下错误消息：

TypeError: e.target.setIcon is not a function

波纹管片段

var map = L.map('map',{ center: [44.1, 3.5], zoom: 10});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: 'OpenStreetMap'}).addTo(map);
var icon = L.icon({
iconUrl: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Marker-Outside-Azure.png',
iconSize: [ 48, 48 ],
});
var data = {
"type": "FeatureCollection",
"name": "test",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "NUM": 1 }, "geometry": { "type": "MultiPoint", "coordinates": [ [ 3.75, 44.25 ] ] } },
{ "type": "Feature", "properties": { "NUM": 2 }, "geometry": { "type": "MultiPoint", "coordinates": [ [ 3.25, 44.0 ] ] } }
]}
L.geoJson(data,{
pointToLayer: function (feature, latlng) {
return L.marker(latlng);//, {icon: icon});
},
onEachFeature: function (feature, layer) {
layer.on('click', function (e){
e.target.setIcon(icon);
})
}
}).addTo(map);

怎么了？

Answer 1

该问题源自GeoJSON。它似乎确实是一个有效的GeoJSON，因为它在地图上绘制，但它一定以某种方式绊倒了传单。我认为它是多点功能的事实就是原因。

将地理 JSON 更改为：

var data = {
"type": "FeatureCollection",
"name": "test",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "NUM": 1 }, "geometry": { "type": "Point", "coordinates": [ 3.75, 44.25 ] } },
{ "type": "Feature", "properties": { "NUM": 2 }, "geometry": { "type": "Point", "coordinates": [ 3.25, 44.0 ] } }
]}

让它工作。(注意：我只是将"type"从MultiPoint更改为Point并删除了双括号，即[ [ 3.25, 44.0 ] ]变成了[ 3.25, 44.0 ]。

我不确定是否可以将多点几何图形与onEachFeature功能一起使用，但它似乎适用于单点几何。