GeoJson и Leaflet - PullRequest
Новая
       29

GeoJson и Leaflet

0 голосов
/ 27 февраля 2019

Я долго искал решение этой проблемы и задавался вопросом, может ли кто-нибудь помочь мне здесь.

Я картирую детекторы трафика на автостраде с листовкой, используя флешку / 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),

1 Ответ

0 голосов
/ 27 февраля 2019

Вы можете попробовать следующее:

  1. вставьте свой геойсон на http://geojson.io, чтобы убедиться, что он правильный

  2. поместите данные в отдельный jsфайл и определите переменную следующим образом:

    var myGeojsonData = {ваш геойсон идет сюда};

  3. Включите файл js в ваш html-файл, как обычный файл js.Теперь ваши данные доступны с использованием выбранного вами имени переменной.

  4. Обратите внимание на метод листовка geoJson , который позволит вам отображать ваши данные без необходимостицикл через это.Вы напишите что-то вроде:

    L.geoJSON (myGeojsonData) .addTo (map);

...