python - GeoJson 和传单
问题描述
我一直在寻找这个问题的解决方案,并且想知道是否有人可以在这里帮助我。
我正在使用flask/python作为后端,使用传单在高速公路上绘制交通检测器。
这是我更新的代码 - GeoJson 现在位于变量名为 myGeojsonData 的 javascript 文件中。我现在收到此错误:
Uncaught TypeError: this.callInitHooks is not a function
at Object.e [as GeoJSON] (leaflet.js:5)
at analytics:59
所以现在试图找出我在这里做错了什么。当我将数据加载到http://geojson.io/时它可以工作
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="author" content="SemiColonWeb"/>
<!-- Leaflet Page -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
<script type="text/javascript" src="{{ url_for('static',filename='geojson/GeoJsonData.js') }}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Document Title
============================================= -->
<title>Journey Analytics Group</title>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px; position: relative; outline: none;"></div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</body>
<script>
var mymap = L.map('mapid').setView([-37.735018, 144.894947], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.GeoJSON(myGeojsonData).addTo(map).add;
var circle = L.circle([-37.735018, 144.894947], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 50
}).addTo(mymap);
</script>
我现在将 GEOJson 数据与检测器位置合并(出于隐私原因,数据已稍作更改)。这是数据。
{
"features": [
{
"geometry": {
"coordinates": [
144.829434,
-37.825233
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
"IDnumber": "2541EL_P0"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
144.829502,
-37.825234
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
"IDnumber": "2541EL_P1"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
144.881846,
-37.732708
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Keilor Rd WB between Keilor Rd And Coinston Ave & Mcnamara Ave Calder Fwy Nort",
"IDnumber": "1917EL_P0"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
144.881781,
-37.732701
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Keilor Rd WB between Keilor Rd And Coinston Ave & Mcnamara Ave Calder Fwy Nort",
"IDnumber": "1917EL_P1"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
144.881337,
-37.732571
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Keilor Rd WB between Keilor Rd And Coinston Ave & Mcnamara Ave Calder Fwy Nort",
"IDnumber": "1917M0_P0"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
144.88129,
-37.732541
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Keilor Rd WB between Keilor Rd And Coinston Ave & Mcnamara Ave Calder Fwy Nort",
"IDnumber": "1917M0_P1"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
144.880801,
-37.73238
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Keilor Rd WB between Keilor Rd And Coinston Ave & Mcnamara Ave Calder Fwy Nort",
"IDnumber": "1917M1_P0"
},
"type": "Feature"
}
],
"type": "FeatureCollection"
}
我的问题是 - 我不确定如何让传单以当前形式获取这些数据。
我曾尝试将其添加为图层等,但它似乎是错误代码。
有人有某种解决方案吗?
对于如何从文件夹中获取数据而不是直接将 JSON 数据粘贴到 html 中的脚本中,我也有点迷失了。
在此先感谢(尤其是@Istopopoki,非常感谢),
解决方案
您可以尝试以下方法:
- 将您的 geojson 粘贴到http://geojson.io以确保它是正确的
将数据放在一个单独的 js 文件中并定义一个像这样的变量:
var myGeojsonData = {你的 geojson 放在这里};
将 js 文件包含在您的 html 文件中,就像普通的 js 文件一样。现在可以使用您选择的变量名称访问您的数据。
看一下传单 geoJson方法,它允许您显示数据而无需遍历它。您将编写如下内容:
L.geoJSON(myGeojsonData).addTo(map);
推荐阅读
- html - 如何在边框角材料上修复 Mat-label
- python - Python TypeError:无法解压不可迭代的布尔对象
- discord - 使用画布 discord.js 创建个人资料图像时出错
- python - Pytorch 的 add_module() 是什么?
- javascript - 如何根据第一个选定值删除 select2 选项
- python - Django:使用 django-tables2 和 django-filter 搜索结果
- python - 在导入模块中的函数之间共享 python 字典的最佳实践
- html - 如何将搜索栏移到顶部?
- javascript - 来自客户端的信号 node.js express 服务器
- python - subprocess.Popen 在 Windows 中工作但在 Ubuntu 中不工作