Django 传单分组层不'；在地图上看不到_Django_Leaflet_Geodjango

Django 传单分组层不'；在地图上看不到

django leaflet

Django 传单分组层不'；在地图上看不到,django,leaflet,geodjango,Django,Leaflet,Geodjango,我在詹戈工作。我正在尝试添加来自的传单组。我将文件从dist文件夹复制到带有静态文件的我的文件夹中，并将它们导入HTML文件。无论如何，我对这部分代码有一些问题： //GROUP LAYER var osm = 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png'; var baseLayers = { "OSM":osm } var groupedOverl

我在詹戈工作。我正在尝试添加来自的传单组。我将文件从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>

提前谢谢：）

我发现了一个错误。我知道这很愚蠢，但我在这件事上浪费了太多时间，所以我贴了一个问题

无论如何，这句话：

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

应替换为以下行：

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

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