代码之家 › 专栏 › 技术社区 › LeCoda

GeoJSON和传单

geojson gis leaflet python

LeCoda · 技术社区 · 6 年前

我花了很长时间寻找解决这个问题的办法,想知道是否有人能帮助我。

我正在用小册子绘制高速公路上的交通检测器,使用flask/python作为后端。

这是我更新的代码-geojson现在在一个javascript文件中,变量名为mygeojsondata。我现在收到这个错误:

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 &copy; <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非常感谢你)。

0 回复 | 直到 6 年前

Istopopoki 6 年前

你可以尝试如下:

将geojson粘贴到 http://geojson.io 以确保它是正确的
将数据放在单独的js文件中,并定义如下变量:

var mygeojsondata={您的geojson在这里};
将js文件像常规js文件一样包含在html文件中。现在可以使用您选择的变量名访问您的数据。
看一看 leaflet geoJson 方法,它将允许您显示数据,而不必遍历它。你会写一些类似的东西:

l.geojson(mygeojsondata).addto(地图);