Javascript 显示带有传单和图层控件的Shapefile

你好 我尝试实现一个传单插件，用于显示本地托管的shapefile。shapefile的显示起作用，但我想添加一个层控件（用于TogleShapeFile层）。 插件链接：

演示链接：

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

<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>

var m=L.map（'map'）.setView（[0,0]，10）；
var水彩=
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：'Map tiles by，&mdash；Map data©；contributors，'
}).addTo（m）；
var shpfile=new L.Shapefile（'Fr_adm.zip'{
onEachFeature：功能（功能，图层）{
if（feature.properties）{
layer.bindPopup（对象.键（特征.属性）.映射（函数（k））{
返回k+“：“+feature.properties[k]；
}).join（“
”）{
最大高度：200
});
}
}
});
shpfile.addTo（m）；
shpfile.once（“数据：已加载”，函数（）{
log（“完成加载的形状文件”）；
});
//初始化可设置样式的传单控件小部件
var control=L.control.UniForm（空，重叠映射{
错误:，
位置：“右上角”
}
);
//将控件小部件添加到映射和HTMLDOM。
控制。添加到（m）；

将显示shapefile Fr_adm.zip，但不显示图层控件。 谢谢你的帮助。

---

您的问题是未定义

覆盖映射。打开控制台，您应该会看到一个错误

查看L.control.统一地图（传单）的文件，我们可以看到：

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

这里面的重叠贴图是什么？要回答这个问题，我们需要看一看标准传单代码
OverlyMaps
是键、对象对的列表：

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

因此，在您的示例中，
overlyMaps
应该如下所示：

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>


//----------------
var watercolor=L.tillelayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
});
var geo=L.geoJson（{features:[]}，{onEachFeature:function popUp（f，L）{
var out=[]；
如果（f.properties）{
for（f.properties中的var键）{
out.push（key+”：“+f.properties[key]）；
}
l、 bindPopup（out.join（“
”）；
}
}});
var m=L.map（'map'{
中间：[10，-1]，
缩放：6，
图层：[水彩，地理]
});
//}}).addTo（m）；
var base='Fr_admin.zip'；
shp（基础）。然后（功能（数据）{
geo.addData（数据）；
});
变量基本映射={
“底层”：水彩画
};
变量覆盖={
“形状文件”：geo
};
L.控制层（底图、覆盖图）。添加到（m）；

这是工作，我可以选择是否显示shapefile。
但不要像下面这样返回所有分段：

多谢各位

    <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>