传单 GeoJASON 图层控件在此脚本中不起作用

Leaflet GeoJASON layer control not work in this script?

本文关键字：脚本 不起作用 GeoJASON 图层 控件 传单      更新时间：2023-09-26

我最近在使用传单库，我发现它非常容易工作和学习，这些教程在GeoJSON和控制层方面非常好，但我找不到一个关于将控制层与GeoJASON文件一起使用的教程，我写了这个脚本：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="leaflet.css"/>
  <script src="leaflet-src.js"></script>

<script src="GeoJason/mpios.geojson"type="text/javascript"></script>
<script src="GeoJason/roads.geojson"type="text/javascript"></script>
<script src="GeoJason/city.geojson"type="text/javascript"></script>
<script src="GeoJason/towns.geojson"type="text/javascript"></script> 

<style>
        html, body, #map {
            height: 100%;
        }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
  var map = L.map('map').setView([20.990584, -98.65644], 12);
    L.geoJson(mpios).addTo(map);
    L.geoJson(roads).addTo(map);
    L.geoJson(city).addTo(map);
    L.geoJson(towns).addTo(map);

var baseLayers = {
    "roads": roads,
        "mpios": mpios
};

var overlays = {
       "city": city,
        "towns": towns
};
L.control.layers(baseLayers, overlays).addTo(map);
    </script>
</body>
</html>

但它显示图层和控制按钮不起作用，谢谢。

您在 baseLayers 和叠加层中设置的图层值是 geoJSON 要素集，但它们应该是传单图层或对地图上存在的图层的引用。

您可以通过将 L.geoJson 的返回值设置为如下所示的变量来存储每个 geoJSON 图层的图层引用：

var mpios_l = L.geoJson(mpios).addTo(map);
var roads_l = L.geoJson(roads).addTo(map);
var city_l = L.geoJson(city).addTo(map);
var towns_l = L.geoJson(towns).addTo(map);

然后将这些项添加到控件中。 

var baseLayers = {
    "roads": roads_l,
        "mpios": mpios_l
};

var overlays = {
       "city": city_l,
        "towns": towns_l
};
L.control.layers(baseLayers, overlays).addTo(map);
相关文章：