我正在尝试使用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 | © <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 © Esri — 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。
有人可以帮我指出正确的方向吗?我真的很感激!!
提前感谢您的时间和指导,
亚伦
答案 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
。