javascript - 地图控制在 JSFiddle 中有效，但在网络服务器上无效

问题描述

我在这个线程的 GIS Stackexchange 上找到了我最初的问题的解决方案：

https://gis.stackexchange.com/questions/169011/leaflet-how-to-create-toggleable-overlays-from-a-single-geojson-featurecollecti#new-answer?newreg=174df62bf93b4305afbf9f79db57717a

在这篇文章中，有一个 JSFiddle 链接，这正是我需要的，我想将其用作基础，然后我可以对其进行修改。

https://jsfiddle.net/qkvo7hav/7/

var map = L.mapbox.map('mapbox', 'mapbox.light').setView([60.37, 95.27], 4);

var collection = [{
  "type": "FeatureCollection",
  "features": [
    {"type":"Feature","properties":{"category":"Aviation","Name":"Plant No 1"},"geometry":{"type":"Point","coordinates":[81.73828125,62.59334083012024]}},
    {"type":"Feature","properties":{"category":"Electrical","Name":"Plant No 2"},"geometry":{"type":"Point","coordinates":[94.5703125,58.722598828043374]}},
    {"type":"Feature","properties":{"category":"Military","Name":"Base 1"},"geometry":{"type":"Point","coordinates":[104.4140625,62.91523303947614]}}
  ]
}];

var myStyle = { radius: 10, fillOpacity: 1, stroke: false, weight: 1, opacity: 1, fill: true, clickable: true };

var categories = {},
    category;

var allPoints = L.geoJson(collection, {
    pointToLayer: function(feature, latlng){
        return L.circleMarker(latlng, myStyle);
    },
    style: function(feature){
        switch(feature.properties.category){
            case 'Aviation' : return { color: "black" };
            case 'Elecrtical' : return { color: "blue" };
            case 'Military' : return { color: "red" };
        }
    },
    onEachFeature: function(feature, layer){
        layer.bindPopup(feature.properties.Name);
        category = feature.properties.category;
        // Initialize the category array if not already set.
        if (typeof categories[category] === "undefined") {
            categories[category] = [];
        }
        categories[category].push(layer);
    }
});

var basemapsObj = { 'basic': L.mapbox.tileLayer('mapbox.light'), 'satellite': L.mapbox.tileLayer('mapbox.satellite-afternoon') };

var overlaysObj = {},
    categoryName,
    categoryArray,
    categoryLG;

for (categoryName in categories) {
    categoryArray = categories[categoryName];
    categoryLG = L.layerGroup(categoryArray);
    categoryLG.categoryName = categoryName;
    overlaysObj[categoryName] = categoryLG;
}

// Create an empty LayerGroup that will be used to emulate adding / removing all categories.
var allPointsLG = L.layerGroup();
overlaysObj["All Points"] = allPointsLG;

var control = L.control.layers(basemapsObj, overlaysObj, { collapsed: false }).addTo(map);

// Make sure the Layers Control checkboxes are kept in sync with what is on map.
// For some reason this control does not sync its checkboxes with the map state by itself, whereas it does with Leaflet 0.7.x?
map.on("overlayadd overlayremove", function (event) {
    var layer = event.layer,
        layerCategory;

    if (layer === allPointsLG) {
        if (layer.notUserAction) {
            // allPointsLG has been removed just to sync its state with the fact that at least one
            // category is not shown. This event does not come from a user un-ticking the "All points" checkbox.
            layer.notUserAction = false;
            return;
        }
        // Emulate addition / removal of all category LayerGroups when allPointsLG is added / removed.
        for (var categoryName in overlaysObj) {
            if (categoryName !== "All Points") {
                if (event.type === "overlayadd") {
                    overlaysObj[categoryName].addTo(map);
                } else {
                    map.removeLayer(overlaysObj[categoryName]);
                }
            }
        }
        control._update();
    } else if (layer.categoryName && layer.categoryName in overlaysObj) {
        if (event.type === "overlayadd") {
            // Check if all categories are shown.
            for (var categoryName in overlaysObj) {
                layerCategory = overlaysObj[categoryName];
                if (categoryName !== "All Points" && !layerCategory._map) {
                    // At least one category is not shown, do nothing.
                    return;
                }
            }
            allPointsLG.addTo(map);
            control._update();
        } else if (event.type === "overlayremove" && allPointsLG._map) {
            // Remove allPointsLG as at least one category is not shown.
            // But register the fact that this is purely for updating the checkbox, not a user action.
            allPointsLG.notUserAction = true;
            map.removeLayer(allPointsLG);
            control._update();
        }
    }
});

我已将代码复制到我的网站https://www.kaipai.de/map.html但它不像在 JSFiddle 中那样工作

问题是，当我在 JSFiddle 中选择所有类别时，“所有点”会被选中，如果我取消选中一个复选框，“所有点”会被取消选中，但在我的网站上，当“所有点”被选中时，我无法删除任何复选框。

有没有人暗示那里有什么问题？

标签： javascriptmapbox

javascript - 地图控制在 JSFiddle 中有效，但在网络服务器上无效

问题描述

解决方案

推荐阅读