更改 mapbox 中的 Maki 图标颜色？

Question

我这辈子都搞不懂如何给 Mapbox 的 maki 图标添加颜色 Javascript。有使用已弃用的 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

Unfortunately, the default mapbox icons have color control but pretty weak sizing support, with only three strings (large, medium, small) to determine size.

您需要使用 Mapbox.js 和 L.mapbox.markerLayer 或 L.mapbox.marker.icon. Sizes beyond large, medium, small (and the retina versions of those) would be scaled in-browser and blurry, and using the maki download won't be re-colorable, since our markers API re-colors icons on the fly using server-side code with node-blend。

更改 mapbox 中的 Maki 图标颜色？

Changing Maki icon color in mapbox?

javascript

leaflet

mapbox