首页 > 解决方案 > 传单分组图层未显示在地图上

问题描述

我在 GeoDjango 工作。我正在尝试从这里添加传单组。我将文件从 dist 文件夹复制到包含静态文件的文件夹中,并将它们导入 HTML 文件。无论如何,我对这部分代码有一些问题:

//GROUP LAYER
        var osm = 
'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
        var baseLayers = {
            "OSM":osm
        }

        var groupedOverlays = {
            "layers": {
            "layer1": datasets_buildings,
            "layer2": datasets_roads,
            "layer3": datasets_railways,
            "layer4": datasets_natural

            }
        };
        L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);

当我输入这个时,我什至没有在地图上找到我的图层,我只得到空的传单地图,没有这部分代码,我得到了。另外,我想为这个图层组提供功能,它只允许一个图层处于活动状态。

这是我的所有代码:

<html lang="en">

{% load static %}
{% load leaflet_tags %}

<head>
    {% leaflet_js %}
    {% leaflet_css %}
    <style type="text/css">
      #gis {
        width: 100%;
        height: 870px;
    }
</style>
<link rel="stylesheet" type = 'text/css' href="{%  static 'maps/dist/leaflet.groupedlayercontrol.css' %}">
<script type="text/javascript" src="{%  static 'maps/dist/leaflet.ajax.js'%}"></script>
<script type="text/javascript" src="{%  static 'maps/dist/leaflet.groupedlayercontrol.js' %}"></script>

</head>

<body>
    <script type="text/javascript">

  function our_layers(map,options){
        //buildings
        var datasets_buildings = new L.GeoJSON.AJAX(" 
  {% url 'buildings_json_data' %}",{
            onEachFeature : function (feature, layer) {
                layer.bindPopup(feature.properties.name.toString())
            }
        });

        //roads
        var datasets_roads = new L.GeoJSON.AJAX("{% url 'roads_json_data' %}",{
            onEachFeature : function (feature, layer) {
                layer.bindPopup(feature.properties.name.toString())
            }
        });

        //railways
        var datasets_railways = new L.GeoJSON.AJAX("{% url 'railways_json_data' %}",{
            onEachFeature : function (feature, layer) {
                layer.bindPopup(feature.properties.name.toString())
            }
        });

        //natural
        var datasets_natural = new L.GeoJSON.AJAX("{% url 'natural_json_data' %}",{
            onEachFeature : function (feature, layer) {
                layer.bindPopup(feature.properties.name.toString())
            }
        });
        datasets_natural.addTo(map);
        datasets_railways.addTo(map);
        datasets_roads.addTo(map);
        datasets_buildings.addTo(map);




        //GROUP LAYER
        var osm = 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
        var baseLayers = {
            "OSM":osm
        }

        var groupedOverlays = {
            "layers": {
            "layer1": datasets_buildings,
            "layer2": datasets_roads,
            "layer3": datasets_railways,
            "layer4enter code here": datasets_natural

            }
        };
        L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
    }


</script>

    {%  leaflet_map "gis" callback="window.our_layers" %}


</body>






</html>

当我继续检查时进入控制台时的错误是:

 leaflet.js:5 Uncaught TypeError: Cannot create property '_leaflet_id' on string 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png'
at Object.n [as stamp] (leaflet.js:5)
at e._addLayer (leaflet.groupedlayercontrol.js:131)
at e.initialize (leaflet.groupedlayercontrol.js:26)
at new e (leaflet.js:5)
at Function.L.control.groupedLayers (leaflet.groupedlayercontrol.js:373)
at Object.our_layers [as callback] ((index):96)
at Function.L.Map.djangoMap (leaflet.extras.js:234)
at loadmap ((index):112)

先感谢您 :)

标签: djangoleafletgeodjango

解决方案


我发现了一个错误。我知道这很愚蠢,但是我为此浪费了很多时间,然后发布了一个问题..

无论如何,这条线:

var osm = 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';

应替换为以下行:

var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}{y}{x}.png');

推荐阅读