问在geoJSON中可单击为false的mapbox集
EN

Stack Overflow用户

提问于 2015-09-17 19:54:23

回答 1查看 276关注 0票数 0

对于MapBox，如何在GeoJSON中将"clickable“设置为false，如下所示。我尝试将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);
    }

leaflet

mapbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-18 02:03:13

有两件事要做，第一是将标记选项设置为clickable为false，第二是推翻游标样式，使其看起来不需要单击。

首先，您可以通过不让L.mapbox.featureLayer自动地将您的点特性转换为标记来完成。您可以通过在pointToLayer选项中使用L.mapbox.featureLayer方法来做到这一点。该方法将对GeoJSON集合中的每个点特性进行调用，并允许您返回自己的分层类型。在您的示例中，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，因此看起来有一些东西需要单击，您需要将其设置为抓取，就像在映射容器上使用的那样：

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

就这样。下面是柱塞的一个例子：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);