Question

对于我的生活，我无法弄清楚如何在普通的Javascript中为Mapbox的maki图标添加颜色。有关于使用已弃用的tilemill工具的文档，并且有一种使用CSS为它们着色的方法。但是，我的图标是从具有Lat / Lon坐标的对象数组动态生成的，我想让它们根据所述对象内部的其他数据动态着色（我正在尝试使用大小和颜色的中转站图标）根据它收到的每日交通量）。不幸的是，默认的地图框图标具有颜色控制但是相当弱的尺寸支持，只有三个字符串（大，中，小）来确定尺寸。

我的代码在这里：

featureArray = []

// stationData is an array of objects
stationData.forEach(function(station) {

            var markerObj = {
                type: 'Feature',
                properties: {
                    title: station.StationName,
                    "icon": {
                        "iconUrl": "public/maki/renders/marker-24@2x.png",
                        "iconSize": [40, 40],
                        "icon-fill": "#DF0101",
                        "popupAnchor": [0, -15],
                        "className": "dot",
                        "iconColor": '#fa0' // does not work
                    }
                },

                geometry: {
                    type: 'Point',
                    coordinates: [parseFloat(station.Lng), parseFloat(station.Lat)]
                }
            }

            featureArray.push(markerObj);
        });

        var geojson = {
            type: 'FeatureCollection',
            features: featureArray
        };

        stationLayer.on('layeradd', function(e) {
            var marker = e.layer,
            feature = marker.feature;

            marker.setIcon(L.icon(feature.properties.icon));
        });

        stationLayer.setGeoJSON(geojson);

        stationLayer.on('mouseover', function(e) {
            e.layer.openPopup();
        });

        stationLayer.on('mouseout', function(e) {
            e.layer.closePopup();
        });

我一直在谷歌上搜索几个小时并尝试不同的方法而没有运气。

谢谢，

威廉

Answer 1

不幸的是，默认的地图框图标具有颜色控制但是尺寸支持非常弱，只有三个字符串（大，中，小）来确定尺寸。

您需要使用Mapbox.js和L.mapbox.markerLayer或L.mapbox.marker.icon。超大，中，小（以及那些视网膜版本）的尺寸将在浏览器中缩放并且模糊，并且使用maki下载将不可重新着色，因为我们的标记API使用服务器动态地重新着色图标带有node-blend的代码。

在地图框中更改Maki图标颜色？

1 个答案: