Question

使用MapBox，你如何设置＆＃34; clickable＆＃34;与GeoJSON一样假，如下所示。我已经尝试将clickable添加到属性对象，但没有运气。我也尝试在layeradd事件中添加它，但它可能不会更新回DOM：

    function setCustomIcon() {

        var myLayer = L.mapbox.featureLayer().addTo(moMap);

        var geoJson = [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-113.5, 53.5]
            },
            "properties": {
                "title": "Current Location",
                "icon": {
                    "iconUrl": "current-location.png",
                    "iconSize": [32, 32], // size of the icon
                    "iconAnchor": [16, 16] // point of the icon which will correspond to marker's location
                }
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-113, 53.5]
            },
            "properties": {
                "title": "Vehicle",
                "icon": {
                    "iconUrl": "Images/VehicleRing.svg",
                    "iconSize": [23, 23],
                    "iconAnchor": [12, 12]
                }
            }
        }];

        // Set a custom icon on each marker based on feature properties.
        myLayer.on('layeradd', function (e) {
            var marker = e.layer,  // this is a marker - Leaflet calls it a layer...
                feature = marker.feature;

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

        // Add features to the map.
        myLayer.setGeoJSON(geoJson);
    }

Answer 1

有两件事要做，第一件事是将标记选项设置为clickable为假，第二件是覆盖光标样式，因此看起来没有什么可点击的。

首先，您可以通过不让L.mapbox.featureLayer自动将点要素转换为标记来实现。您可以使用pointToLayer选项中的L.mapbox.featureLayer方法执行此操作。将为您的GeoJSON集合中的每个点要素调用该方法，并允许您返回自己的layertype。在您的情况下L.Marker将clickable选项设置为false：

var layer = L.mapbox.featureLayer(null, {
    pointToLayer: function (feature, latLng) {
        return new L.Marker(latLng, {
            clickable: false
        });
    }
}).addTo(map);

接下来，第二件事，将光标样式设置为.leaflet-marker-icon。它设置为pointer所以看起来有些东西需要点击，您需要将其设置为抓取，就像在mapcontainer上使用的那样：

.leaflet-marker-icon {
    cursor:-webkit-grab;
    cursor:-moz-grab
}

那就是它。这是关于Plunker的一个例子：http://plnkr.co/edit/5GvS81?p=preview

PS。在您的情况下，最好已经使用pointToLayer函数。它可以防止您以后必须遍历图层中的要素来设置L.Icon：

var layer = L.mapbox.featureLayer(null, {
    pointToLayer: function (feature, latLng) {
        return new L.Marker(latLng, {
            icon: new L.Icon(feature.properties.icon)
        });
    }
}).addTo(map);

mapbox set在geoJSON中可单击为false

1 个答案: