Слой группировки листовок не отображается на карте - PullRequest
0 голосов
/ 09 сентября 2018

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

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

1 Ответ

0 голосов
/ 09 сентября 2018

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

В любом случае, строка:

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

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

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