如何在传单地图中显示geojson FeatureCollection

在尝试在传单地图中发布之前，我已经用Qgis将shapefile数据导出到geoJson，但它不起作用。

我使用的代码如下，其中geojson文件为"gj2.geojson".

哪里出了问题？

GEOJSON类似于：

{
"type": "FeatureCollection",
"name": "gj2",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "DN": 976 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.647916182333311, -8.742916206999967 ], [ -36.647082848999979, -8.742916206999967 ], [ -36.647082848999979, -8.743749540333299 ], [ -36.647916182333311, -8.743749540333299 ], [ -36.647916182333311, -8.742916206999967 ] ] ] } },
{ "type": "Feature", "properties": { "DN": 971 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.647082848999979, -8.742916206999967 ], [ -36.646249515666646, -8.742916206999967 ], [ -36.646249515666646, -8.745416206999966 ], [ -36.647082848999979, -8.745416206999966 ], [ -36.647082848999979, -8.742916206999967 ] ] ] } },
{ "type": "Feature", "properties": { "DN": 966 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.646249515666646, -8.742916206999967 ], [ -36.645416182333307, -8.742916206999967 ], [ -36.645416182333307, -8.743749540333299 ], [ -36.646249515666646, -8.743749540333299 ], [ -36.646249515666646, -8.742916206999967 ] ] ] } },
{ "type": "Feature", "properties": { "DN": 975 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.647916182333311, -8.743749540333299 ], [ -36.647082848999979, -8.743749540333299 ], [ -36.647082848999979, -8.744582873666634 ], [ -36.647916182333311, -8.744582873666634 ], [ -36.647916182333311, -8.743749540333299 ] ] ] } },
{ "type": "Feature", "properties": { "DN": 965 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -36.646249515666646, -8.743749540333299 ], [ -36.645416182333307, -8.743749540333299 ], [ -36.645416182333307, -8.744582873666634 ], [ -36.646249515666646, -8.744582873666634 ], [ -36.646249515666646, -8.743749540333299 ] ] ] } },
{ "type": "Feature"....

我尝试过的代码：

<!DOCTYPE html>
<html>
<head>
	
	<title>GeoJSON tutorial - Leaflet</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 100%;
			height: 100%;
		}
	</style>
	
</head>
<body>
<div id='map'></div>
<script src="geojson.js" type="text/javascript"></script>
<script>
	var map = L.map('map').setView([-9,-36], 13);
	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="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'mapbox.light'
	}).addTo(map);
var geojson = L.geoJSON('gj2.geojson').addTo(map);
	
	
</script>
</body>
</html>

问题是您试图将文件名指定为L.geoJSON(..)的参数，但它需要一个包含geoJSON定义的Javascript对象。将以下内容添加到geoJson文件(geoJson.js)的开头：

var myGeoJson =

这样文件就这样开始了：

var myGeoJson = {
"type": "FeatureCollection",
"name": "gj2",
...
...

然后在文件末尾添加一个分号。这样，您就有了一个表示geoJson定义的变量"myGeoJson"。

然后更改这一行：

var geojson = L.geoJSON('gj2.geojson').addTo(map);

到此：

var geojson = L.geoJSON(myGeoJson).addTo(map);

传单GeoJSON示例页面顶部有一个类似的示例：将GeoJSON与传单一起使用

相关内容

最新更新

热门标签：