django - 传单分组图层未显示在地图上
问题描述
我在 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)
先感谢您 :)
解决方案
我发现了一个错误。我知道这很愚蠢,但是我为此浪费了很多时间,然后发布了一个问题..
无论如何,这条线:
var osm = 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
应替换为以下行:
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}{y}{x}.png');
推荐阅读
- r - 当R中的列中的值相似时迭代一个值
- c - 在c中反转字符串,使用strlen函数的问题
- routing - 有没有办法让凤凰插头只用于一条路线?
- c++ - 创建一个以整数为元素计数的字符串数组,如何避免 case 0?
- assembly - 为什么 MIT 的 JOS Bootloader 中的代码和数据段选择器是 0x8 和 0x10?
- r - 对 lavaan 潜在增长曲线模型进行功效分析
- xml - 您必须在 XSD 中指定命名空间才能使其有效吗?
- matlab - 循环遍历 if 语句,其中 3 个单独的索引全部更改 | 所有可能的陈述
- python - 在 Python 中抓取动态页面
- python - 用于语义相似性的 BERT 嵌入