GeoJson 和传单

Question

我一直在寻找这个问题的解决方案，想知道是否有人可以帮助我。

我正在使用传单绘制高速公路上的交通检测器，使用 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 &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 非常感谢），

Answer 1

您可以尝试以下方法：

将您的 geojson 粘贴到 http://geojson.io 以确保它是正确的
将数据放在一个单独的js文件中，然后定义一个这样的变量：

var myGeojsonData = {这里是你的 geojson};
像普通 js 文件一样在 html 文件中包含 js 文件。现在可以使用您选择的变量名访问您的数据。
看看 leaflet geoJson 方法，它可以让您显示数据而无需遍历它。你会写这样的东西：

L.geoJSON(myGeojsonData).addTo(地图);

GeoJson 和传单

GeoJson and Leaflet

python

gis

geojson

leaflet