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

Posted 2021-04-13

您好我尝试实现一个传单插件，用于显示本地托管的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，但不显示图层控件。谢谢您帮忙。

答案

你的问题是没有定义overlayMaps。打开你的控制台，你应该看到一个错误说明这一点。

看一下L.control.UniForm地图（传单的an extension）的文档，我们可以看到：

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

什么是overlayMaps？要回答我们需要看看documentation的标准传单代码。 overlayMaps是关键对象列表：

......我们将创建两个对象。一个将包含我们的基础层，一个将包含我们的叠加层。这些只是具有键/值对的简单对象。该键设置控件中图层的文本（例如“Streets”），而相应的值是对图层（例如街道）的引用。

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

var overlayMaps = {
    "Cities": cities
};

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

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

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

另一答案

我看到代码中的错误，没有覆盖层值。所以我试试这个：

    <script type="text/javascript" charset="UTF-8">

//----------------
 var watercolor = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

        });
     var geo = L.geoJson({features:[]},{onEachFeature:function popUp(f,l){
            var out = [];
            if (f.properties){
                for(var key in f.properties){
                out.push(key+": "+f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));
    }
    }});
     var m = L.map('map', {
    center: [10, -1],
    zoom: 6,
   layers: [watercolor, geo ]
});

//}}).addTo(m);
      var base = 'Fr_admin.zip';
        shp(base).then(function(data){
        geo.addData(data);
        });

    var baseMaps = {
    "BaseLayer": watercolor
};
var overlays = {
        "shapefile": geo
    };
L.control.layers(baseMaps,overlays).addTo(m);




        </script>

这是工作，我可以选择显示shapefile与否。但是不要像这里那样返回所有分段：http://leaflet.calvinmetcalf.com/#3/32.69/10.55

谢谢