<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<script src="usStates.geojson" type="text/javascript"></script>
<style>
html, body, #map {
height: 100%;
}
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map" style="height: 100%"</div>
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([38.57, -94.71], 4);
L.tileLayer('http://{s}.tile.cloudmade.com/9067860284bc491e92d2342cc51d47d9/998/256/{z}/{x}/{y}.png', {attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> Imagery © <a href="http://cloudmade.com">CloudMade</a>'}).addTo(map);
var featureStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.2
};
L.geoJson(usStates).addTo(map);
</script>
</body>
#1 楼
查看Leaflet-Ajax。它简化了所有事情。将放弃对Neogeomat的投票。
在此处获取脚本(github回购)并将其添加到标头中:
<script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
然后是使用文件名上传的问题。
var geojsonLayer = new L.GeoJSON.AJAX("foo.geojson");
geojsonLayer.addTo(map);
真的很简单,它可以正常工作。好吧。
#2 楼
您可以使用jquery Ajax加载数据然后添加它。var district_boundary = new L.geoJson();
district_boundary.addTo(map);
$.ajax({
dataType: "json",
url: "data/district.geojson",
success: function(data) {
$(data.features).each(function(key, data) {
district_boundary.addData(data);
});
}
}).error(function() {});
或者您可以使用leaflet-ajax插件
#3 楼
这是我的最小香草js解决方案。看起来不错,不需要jquery即可对文件进行快速ajax调用。let xhr = new XMLHttpRequest();
xhr.open('GET', 'uk_outline.geojson');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status !== 200) return
L.geoJSON(xhr.response).addTo(map);
};
xhr.send();
评论
感谢您的示例-我为geoJSON工厂函数删除了new关键字,但是其中的setRequestHeader行出现了CORS错误,因此将其删除并且可以正常工作(必须在服务器中进行一些设置)。
–布莱恩·伯恩斯(Brian Burns)
17年12月3日,14:36
给我一个XML解析错误:第1行第1列的格式错误。好吧,由于数据是geojson,为什么要尝试将其解析为XML?我不明白问题所在,但我想在没有Ajax的情况下导入数据。
–亚伦·布拉姆森
18/12/7在8:32
@AaronBramson再尝试一次。这是我做的相当老的代码。我应该设置responseType并使用响应不解析responseText。刚刚更新了代码段。
–丹尼斯·鲍祖斯(Dennis Bauszus)
18/12/7在9:53
是的,太好了!它开箱即用,不需要任何额外的外部软件包,也不需要编辑数据文件。这显然是最好的答案。
–亚伦·布拉姆森
18/12/7在10:49
#4 楼
在head元素中,引用文件: <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="css/leaflet.ie.css" />
<![endif]-->
<script src="leaflet/leaflet.js"></script>
<script src="hydro_s.geojson" type="text/javascript"></script>
<script src="hydro_l.geojson" type="text/javascript"></script>
<style>
html, body, #map {
height: 100%;
}
body {
padding: 0;
margin: 0;
}
</style>
<title>Leaflet Map with GeoJson</title>
</head>
,然后在正文中:
<body>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map', {
center: [45.57, -73.5648],
zoom: 10
});
/* Hydro */
var hydro = new L.LayerGroup();
L.geoJson(hydro_s, {style: hydrosStyle}).addTo(hydro);
L.geoJson(hydro_l, {style: hydrolStyle}).addTo(hydro);
</script>
</body>
您不必将它们“放入”图层组...
评论
完善!这就是我想要的!
– Bailey
13年8月12日在20:16
使用Firebug Web开发人员进行Firefox浏览,我得到“ ReferenceError:未定义usStates”“(L.geoJson(usStates).addTo(map);”我引用了文件,就像您显示
评论
将geojson拖放到geojson.ioOP并未@Mapperz询问如何将其geojson内容粘贴到脚本中。