javascript - 将geojson标记加载到mapbox中设置自定义图标图像

标签 javascript leaflet mapbox

我是mapbox/leaflet的新手,我认为这是一个非常基本的问题,我在过去的两天里一直在努力解决这个问题,尽管我尝试了几种方法,但我无法解决这个问题。

我正在通过 geojson 加载标记:

var ma_3 = L.mapbox.featureLayer().loadURL('./data/marathon/marker3x.geojson');

然后尝试根据 geojson 数据中使用的标题更改大小或颜色等属性:

ma_3.on('ready', function(layer) {
                this.eachLayer(function(marker) {
            if (marker.toGeoJSON().properties.title === 'Verpflegung') {

                marker.setIcon(L.mapbox.marker.icon({                   
                    "marker-size": 'large'
                }));
            } else {
                marker.setIcon(L.mapbox.marker.icon({}));
            }

            marker.bindPopup(marker.toGeoJSON().properties.id + ', ' +
                marker.toGeoJSON().properties.title);
        });
    })
    .addTo(baseMap);

geojson 看起来像这样:

{
      "type": "Feature",
      "properties": {
        "id": "marker-ie2tbbh05",
        "title": "Verpflegung",
        "description": "",
        "marker-size": "medium",
        "marker-color": "#b7ddf3",
        "marker-symbol": "marker-stroked"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          6.431395,
          51.19433
        ]
      },

我是否遗漏了一些东西,因为我也尝试使用

为标记提供新面孔
var icon_live = L.icon({ iconUrl: './img/icon-live.png', iconSize: [35,35] });

在 setIcon 函数中的某个地方,但似乎没有任何作用。 如果有人可以请指出我正确的方向。真的很受好评。

最佳答案

我想这是一个典型的初学者错误,也许这只是我的问题,但我发现在哪种情况下使用 setIcon 的几个选项非常令人困惑。 最后我使用.on(layeradd)和marker.setIcon(pathToYourIcon)让它工作。

ma_3.on('layeradd', function(layer) {
            this.eachLayer(function(marker) {
        if (marker.toGeoJSON().properties.title === 'Verpflegung') {
            marker.setIcon(icon_live);
        } 

        marker.bindPopup(marker.toGeoJSON().properties.id + ', ' +
            marker.toGeoJSON().properties.title);
    });
});

关于javascript - 将geojson标记加载到mapbox中设置自定义图标图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32499631/

相关文章:

javascript - 选择一个选项后显示一个 div。 onchange ="submit()"使其无法正常工作

javascript - 带有 babel 的装饰器,意想不到的 token

javascript - 如何使用 node.js 或 socket.io 获取内存利用率

javascript - 减小 Leaflet 多边形的边框宽度

leaflet - 将 Leaflet.Label 与 GeoJSON 点结合使用

android - flutter : can't build android in debug or release

javascript - Jquery 删除输出中的 head 和 body 标签

pandas - Folium Choropleth + GeoJSON 引发 AttributeError : 'NoneType'

android - MBTiles 性能

java - Android Studio 中的 Mapbox 黑屏