代码之家 › 专栏 › 技术社区 › aaron.kyle

如何在传单中引用.json文件?

leaflet json javascript

aaron.kyle · 技术社区 · 6 年前

.json 矢量层到传单.js地图, viewable here via GitHub page 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> [与 .json文件 hosted on GitHub ]

我试过的代码是:

    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 回复 | 直到 6 年前

aaron.kyle 6 年前

感谢@CodeMonkey提供了这个答案的线索:

.json 其他论坛帖子的文件不错,代码不错

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

适合于调用JSON数据。正如@CodeMonkey所说,我的错误是 map 作为函数的id/名称,但示例是将数据添加到 newMap ,这在我的例子中并不存在。

<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

令人惊叹的。

CodeMonkey 6 年前

因此,我注意到的第一件事是,对于原始的 .json 文件不工作。可能是github的问题。

我提到这一点是因为你想利用它。在jQuery中,在远程主机上使用URL时,必须在末尾添加 ?callback=? 让它改用JSONP。 stackoverflow answer

继续,参考文件,则需要使用相对格式的路径。如果文件与 .html /down/test.json

我可以把你的部分代码复制到 plunker

我想问题是你试图设定 .json文件 newMap 它不存在。