在mapbox中更改Maki图标颜色？

Question

在我的生活中，我不知道如何在普通的Javascript中为Mapbox的maki图标添加颜色。这里有使用废弃的tilemill工具的文档，还有一种使用CSS对它们进行着色的方法。但是，我的图标是从具有Lat/Lon坐标的对象数组中动态生成的，我希望根据所述对象中的其他数据对它们进行动态着色(我正在尝试根据每天接收的流量大小和颜色设置一个中转站图标大小和颜色)。不幸的是，默认的mapbox图标有颜色控制，但对大小的支持很弱，只有三个字符串(大、中、小)来确定大小。

我的密码在这里：

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图标有颜色控制，但对大小的支持很弱，只有三个字符串(大、中、小)来确定大小。

您需要使用Mapbox.js和L.mapbox.markerLayer或L.mapbox.marker.icon。超出大、中、小(和视网膜版本的这些版本)的大小将在浏览器中缩放和模糊，使用maki下载将不会重新着色，因为我们的标记API重新颜色图标在动态使用服务器端代码与节点-混合。