GeoJson和Leaflet

问题描述 投票：0回答：1

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

我用高速公路将交通检测器映射到传单，使用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/[email protected]/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/[email protected]/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非常感谢你），

python leaflet gis geojson
1个回答
2
投票

您可以尝试以下方法：

  1. 将你的geojson粘贴在http://geojson.io上以确保它是正确的
  2. 将数据放在一个单独的js文件中并定义一个如下变量： var myGeojsonData = {your geojson goes here};
  3. 将js文件包含在html文件中，就像常规的js文件一样。现在，您可以使用您选择的变量名访问您的数据。
  4. 看看leaflet geoJson方法，它将允许您显示您的数据，而无需循环它。你会写如下： L.geoJSON（myGeojsonData）.addTo（地图）;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.