时间戳

首页 > 解决方案 > 我正在尝试使用传单 javascript 库在地图上可视化一些数据点。你能告诉我我的代码有什么问题吗？

javascript - 我正在尝试使用传单 javascript 库在地图上可视化一些数据点。你能告诉我我的代码有什么问题吗？

问题描述

我正在尝试将 geojson 数据从 URL 可视化到我的前端。我正在使用传单库和一个我找到的项目作为我更改数据库的模板。变量 AvgMonthlyKL 和 Suburb 不存在，我不关心半径只是为了显示数据点。

数据库和显示geojson的url一切都很好。我已经和平删除了代码的所有部分，并尝试用数据库中存在的其他变量替换这些变量，但我无法显示数据点。请帮忙。

function main_map_init(map, options) {
    var dataset = new L.GeoJSON.AJAX("{% url 'waterconsumption' %}", {
      pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, {
          fillColor: 'teal',
          color: '#537898',
          weight: 1,
          fillOpacity: 0.5
        }).on({
          mouseover: function(e) {
            this.setStyle({color: 'yellow'});
          },

          mouseout: function(e) {
            this.setStyle({color: '#537898'});
          }
        });
      },

      onEachFeature: function(feature, layer) {
        var radius = calcPropRadius(feature.properties.AvgMonthlyKL);

        var popupText = "<strong>" + feature.properties.Suburb + "</strong>";

        layer.setRadius(radius);

        layer.bindPopup(popupText, { offset: new L.Point(0, -radius) });
      }
    }).addTo(map);

Geojson 示例：

{  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "properties":{  
            "device_identifier":"f5ea3f85ed562fcde4e2110d14c5ff1f",
            "battery":"",
            "enqueued":"2019-08-06T10:46:57Z",
            "DateTime":"2019-08-07T13:27:54.198Z",
            "model":"waterwatchapp.waterconsumption"
         },
         "id":13,
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               12.540556907653999,
               55.748844146729
            ]
         }
      }
   ]
}

标签： javascriptdictionaryleafletgeojson

解决方案

如果您将 geojson 存储在本地，这就是您的做法。通过使用 Leaflet.AJAX，步骤几乎相同。与pointToLayer类似地使用L.geoJSON。

<!DOCTYPE html>
<html>

  <head>

    <title>Quick Start - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>



  </head>

  <body>
    <div id="mapid" style="width: 100%; height: 100vh;"></div>
    <script>
      var mymap = L.map('mapid').setView([12.5,
        55.748844146729
      ], 1);

      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);

      var geojsonFeature = {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "properties": {
            "device_identifier": "f5ea3f85ed562fcde4e2110d14c5ff1f",
            "battery": "",
            "enqueued": "2019-08-06T10:46:57Z",
            "DateTime": "2019-08-07T13:27:54.198Z",
            "model": "waterwatchapp.waterconsumption"
          },
          "id": 13,
          "geometry": {
            "type": "Point",
            "coordinates": [
              12.540556907653999,
              55.748844146729
            ]
          }
        }]
      };

      L.geoJSON(geojsonFeature, {
        pointToLayer: function(feature, latlng) {
          return L.circleMarker(latlng, {
            fillColor: 'teal',
            color: '#537898',
            weight: 1,
            fillOpacity: 0.5
          }).on({
            mouseover: function(e) {
              this.setStyle({
                color: 'yellow'
              });
            },

            mouseout: function(e) {
              this.setStyle({
                color: '#537898'
              });
            }
          });
        },
      }).addTo(mymap);
    </script>



  </body>

</html>

推荐阅读