如何在Leaflet中引用.json文件?

时间:2018-09-05 20:33:30

标签: javascript json leaflet

我正在尝试使用viewable here via GitHub page.json矢量层添加到Leaflet.js映射source code here

这是该文件的缩略版本,以供参考(上面链接的GitHub页面显示了该文件在上下文中运行)。

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">


  <!-- LEAFLET-->

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }

    #map {
      width: 600px;
      height: 600px;
    }
  </style>

</head>

<body>

  <div id='map'></div>

  <script>
    var map = L.map('map').setView([-7.08, -78.5565467], 12);
    let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {
      attribution: 'Wikimedia maps beta | &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    let marker = L.marker([-7.2861634, -78.579712])
      .addTo(map);
    let marker2 = L.marker([-7.1605494, -78.5392218])
      .addTo(map);
    ///let test_L = L.geoJSON("test.json", {
    ///weight: 2,
    /// color: '#100'
    ///}).addTo(map);
    //let layerGroup = L.geoJSON(watersheds, {
    // onEachFeature: function (feature, layer) {
    //layer.bindPopup('</h1><p>name: '+feature.properties.WTSHNAME+'</p>');
    //  }
    // }).addTo(map);
    //street layer using mapbox basic
    // Changed to OSM just to avoid the token requirement, for the purpose of demo.
    var mapboxbasic = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
      maxZoom: 18,
      zIndex: 1
    });
    //aerial layer using mapbox satellite
    // Changed to OSM just to avoid the token requirement, for the purpose of demo.
    var mapboxsat = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      zIndex: 2
    });
    var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
    });
    var basemap = {
      'Streets': mapboxbasic,
      'Aerials': mapboxsat,
      'ESRI Imagery': Esri_WorldImagery
    } // Refer to the individual Tile Layers only. They will go into the tilePane.
    ;
    L.control.layers(basemap).addTo(map); // Layers Control just to switch between the 2 basemaps.
  </script>


</body>

</html>

该代码(带有错误部分的注释已被删除)成功地使用经纬度坐标添加了标记,但是当我尝试引用.json文件时,我的代码中断了。 [通过“中断”,我的意思是右上角的基本层选择面板消失了,没有添加矢量层。]

使用.json<script src="test.json" type="text/javascript"></script>文件hosted on GitHub]调用.json文件

我尝试过的代码是:

    let test_L = L.geoJSON(test, {
        weight: 2,
        color: '#100'
      }).addTo(map);

以下是官方示例,网址为:https://leafletjs.com/examples/geojson/

然后:

   $.getJSON("test.json",function(data){
   L.geoJson(data).addTo(newMap);
   });

here on StackOverflow上并按照this forum进行建模之后,讨论with this gist都无济于事。

我显然缺少一些东西,但是我不明白什么。

为了进行比较,我设法获得了this example working on Observable

有人可以帮我指出正确的方向吗?我真的很感激!!

提前感谢您的时间和指导,

亚伦

2 个答案:

答案 0 :(得分:2)

感谢@CodeMonkey提供此答案的线索:

代码从其他论坛帖子中加载.json文件的指南很好,

   $.getJSON("test.json",function(data){
   L.geoJson(data).addTo(newMap);
   });

适合于调用JSON数据。正如@CodeMonkey所指出的那样,我的错误是我使用map作为函数的ID /名称,但是示例向newMap添加数据,但在我的示例中不存在。

此外,要使其正常工作,我需要将JQuery添加到我的HTML文件中,因此添加:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

进入<head>部分。

代码现在可以正常工作

https://aaronkyle.github.io/concept/web-gis/sandbox/leaflet-test.html

太棒了

感谢大家通过这个问题帮助我工作!!

答案 1 :(得分:0)

所以我注意到的第一件事是,您拥有.json文件原始文件的github链接不起作用。可能是github问题。

我之所以这样说是因为您正试图使用​​它。在jQuery中,当在远程主机上使用URL时,必须在末尾?callback=?处添加使其使用JSONP。 https://github.com/olsh/teamcity-jira-release-notes/blob/master/GenerateJiraReleaseNotes.xml

继续进行操作,以引用.json文件,您需要使用相对格式的路径。如果.json文件与.html文件位于同一目录中,则它应该可以工作。如果它位于某个级别,那么您将/down/test.json作为路径。

我能够将您的部分代码复制到stackoverflow answer

我认为问题是您试图将.json的点设置为不存在的newMap