javascript - 使用传单和图层控件显示 Shapefile

Question

你好我尝试实现传单插入，以显示本地托管的 shapefile。 shapefile 的显示有效，但我想添加一个图层控件(用于切换 shapefile 图层)。插件链接:https://github.com/calvinmetcalf/shapefile-js

演示链接:http://leaflet.calvinmetcalf.com/#3/32.69/10.55

我想在演示页面上实现图层控制

<script>
var m = L.map('map').setView([0, 0 ], 10);
var watercolor = 
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen 
Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 
3.0</a> &mdash; Map data &copy; <a 
href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a 
href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    }).addTo(m);

    var shpfile = new L.Shapefile('Fr_adm.zip', {
        onEachFeature: function(feature, layer) {
            if (feature.properties) {
                layer.bindPopup(Object.keys(feature.properties).map(function(k) {
                    return k + ": " + feature.properties[k];
                }).join("<br />"), {
                    maxHeight: 200
                });
            }
        }
    });
    shpfile.addTo(m);
    shpfile.once("data:loaded", function() {
        console.log("finished loaded shapefile");
    });
     // initialize stylable leaflet control widget
var control = L.control.UniForm(null, overlayMaps, {
        collapsed: false,
        position: 'topright'
    }
);
// add control widget to map and html dom.
control.addTo(m);


</script>

显示 shapefile Fr_adm.zip，但没有图层控件。感谢您的帮助。

Answer 1

您的问题是 overlayMaps 未定义。打开您的控制台，您应该会看到一条错误消息。

查看 L.control.UniForm map 的文档(传单的 an extension)，我们可以看到:

/ **
* standard leaflet code.
** /
// initialize stylable leaflet control widget
var control = L.control.UniForm(null, overlayMaps, {
        collapsed: false,
        position: 'topright'
    }
);

这里面的overlayMaps是什么？要回答我们需要看一下 documentation用于标准传单代码。 overlayMaps 是键、对象对的列表:

... we’ll create two objects. One will contain our base layers and one will contain our overlays. These are just simple objects with key/value pairs. The key sets the text for the layer in the control (e.g. “Streets”), while the corresponding value is a reference to the layer (e.g. streets).

var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets
};

var overlayMaps = {
    "Cities": cities
};

因此，您示例中的 overlayMaps 应如下所示:

var overlayMaps = {"Name To Display":shpfile }

定义后，您应该能够正常创建图层控件。