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

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

转载作者：行者123 更新时间：2023-12-02 23:10:24

30

4

我正在尝试将 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
            ]
         }
      }
   ]
}

最佳答案

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

<!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>

关于javascript - 我正在尝试使用传单 javascript 库可视化 map 上的一些数据点。你能告诉我我的代码有什么问题吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57395131/

30

4

0

文章推荐： javascript - 如何使用弹出框描述显示数字而不是点

文章推荐：在终端中使用 wkhtmltopdf 测试时，Javascript 不工作

文章推荐： javascript - 我如何将数据从 ReactJS 提交表单传递到 AdonisJS

c# - 告诉，不要问原则和密码过期
为了遵循务实的编程原则，我试图根据“告诉，不要询问”原则来决定如何处理用户密码更改。我有一个用户对象，其密码每 30 天过期一次。如果密码过期，我需要能够显示密码过期/更改密码 View 。询问对象
python - 告诉 Flask 只将上传的内容存储在内存中而不使用临时文件
我试图在接收文件时绕过任何本地存储。根据documentation ，如果“合理”，Flask 会将文件保存在内存中，否则会将它们存储在临时位置。我只找到了一种通常使用 MAX_CONTENT_LE
sas - 告诉 SAS 不要产生科学记数法
SAS 在 proc 中返回 sci-notation 意味着总和输出，我不能将其用于进一步的速率计算过程。如何抑制 SAS 产生 sci-notation，有什么想法吗？提前致谢。 “解决了一个类似
bash - 告诉 nohup 实时写入输出
当使用 nohup 时，脚本的输出会被缓冲，只有在脚本执行完毕后才会转储到日志文件 (nohup.out) 中。以接近实时的方式查看脚本输出以了解其进展情况将非常有用。有没有办法让 nohup 在脚本
angular - 告诉 Scully 忽略路由的静态页面生成？
假设我们定义了以下路由: const routes: Routes = [ { path: '', component: WelcomeComponent }, {
r - 告诉 R 使用存储在对象中的字符串作为列名
我正在尝试以下操作: a a > 1 1 > 2 2 > 3 3 我想要的是: a b > 1 1 > 2 2 > 3 3 有没有办法告诉 R 使用存储在对象( "b" )中的字符串( a
automake - 告诉 automake 在安装之前或链接之后在程序上运行一些命令
我想在安装二进制文件之前使用 automake 处理/修改它们。例如，我想将二进制文件中的符号提取到单独的文件和位置(如 this )。另一个示例是收集关键 Assets 的 md5sum 以发布报告
qt - 告诉 qmake 编译依赖库
我的应用程序有一个主要的 pro 文件，我想告诉 qmake 在与应用程序同时编译一个单独的库。该库的目录中还有一个 pro 文件。这可能吗？最佳答案将 lib 和应用程序放在单独的子目录中，并使
vim - 告诉 screen 窗口运行上一个命令
我的 vimrc 中有以下内容: nnoremap :!screen -S foo -p run -X stuff '!!^M' 但是，当单击 F1 时，出现错误:没有上一个命令。我想要的
scala - 告诉 Swagger 请求正文可以是单个对象或对象列表
我正在使用 Swagger 和 Scala 来记录我的 REST API。我想为 POST、PUT 和 DELETE 启用批量操作，并希望相同的路由接受单个对象或对象集合作为正文内容。有没有办法告诉
sas - 告诉 SAS 不要在过程流中添加新生成的表
我有一个 SAS 代码，它为我的计算创建了很多中间表。事情是，我在工作完成后并不真正关心这张 table ，我只关心决赛的结果。但是，每次我运行这段代码时，SAS 都会添加所有生成的表来做我的流程，
minify - 告诉 UglifyJS 跳过特定的代码区域
有没有办法告诉 UglifyJS 跳过特定的代码部分，也许使用这样的注释: // uglifyjs:skipStart filter = function(item){ /* some crazy f
macos - 告诉 Homebrew 软件永远不要从源代码构建
在 macOS 上通过 homebrew 安装包时，如果我的网络不稳定并且一次下载失败，homebrew 将下载源并从源开始构建。这将需要很长时间和高 CPU 使用率，这是不需要的。如何在下载失败时告
grails - 告诉 GORM 不要保留属性
有没有办法告诉 GORM 不要保留属性？我计划在我的 User 类上定义一个确认密码属性，用于验证，但不应保留。最佳答案使用 transient 关键字 GORM 可以指示不持久化特定属性。以下
jquery - 告诉 jQuery 在动画序列期间忽略点击
我正在为 jQuery 编写一个幻灯片放映应用程序(单击按钮，然后滑动浏览图像列表)，但我遇到了一个小错误，它将响应即使在动画发生时也会发出 click() 请求。我已经在使用 animate()
xcode - 告诉 Xcode 不要在项目上使用自动布局
我可以告诉 Xcode 4 我不在项目中使用自动布局吗？目前，每个新创建的 xib 都会启用自动布局，这意味着我必须在创建 xib 后手动将其关闭，而我不希望这样。最佳答案这是自动布局的问题。您
azure - 告诉 AzCopy 批处理覆盖文件？
因此，我正在使用目前手动运行的 AzCopy，但我要通过我们的一台服务器上的任务计划程序来运行它。如果我手动执行批处理文件，这会将文件从一个容器复制到另一个容器，并且可以完美运行。然而，它问我: Ov
macos - 告诉 NSDocument 该文档已被修改
我正在 OSX 中编写一个基于文档的应用程序。我发现当我更改文档的内容时，应用程序不知道文档已更改。我可以在没有警告的情况下关闭文档，这会导致我未保存的内容丢失。如何告诉 NSDocument 文档
cocoa -- 告诉 NSWindow 重新显示其内容的正确方法是什么？
根据NSWindow Class Reference ，您应该“很少需要调用”NSWindow 方法“display”或“setViewsNeedDisplay”。那么重新显示窗口内容的常用方法是什么
cocoa - 告诉 IKImageBrowserView 不要安排预加载
为了重写开源 iMedia 框架项目(目前有数十名开发人员正在使用)，我们正在切换到 IKImageBrowserView，并且在缓存方面遇到了麻烦。看来 IKImageBrowserView 喜欢

首页

博学

6Ren·AI

商城

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