Слой группировки листовок не отображается на карте

Я работаю в 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)

Заранее спасибо :)

django leaflet geodjango

09.09.2018 19:10

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

753

Ответы 1

Я нашел ошибку. Я знал, что это глупо, но я потерял так много времени и разместил вопрос ..

Во всяком случае, строчка:

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

следует заменить на эту строку:

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

09.09.2018 22:20

Другие вопросы по теме

Как выбрать все и сбросить все выбранные маркеры в буклете

Используете только OpenStreetMap в этой листовке?

Навигационная панель исправлена слева - Bootstrap

Персонализированный маркер с персонализированным значком и HTML на листовке

Добавление значений в диаграммы в R Leaflet.minicharts

Статический SVG на базовой карте листовки. Проекция d3 js json

CSS с LeafLet

Параметр STRING типа GeoJsonObject

Карта-листовка в R в виде глобуса

Leaflet.js сетка из белых линий

Слой группировки листовок не отображается на карте

Ответы 1

Другие вопросы по теме

Похожие вопросы