Как я показываю Geojson FeatureCollection в листовке Карта? - PullRequest
Новая
       4

Как я показываю Geojson FeatureCollection в листовке Карта?

0 голосов
/ 30 января 2019

Я экспортировал данные шейп-файла в geoJson с помощью Qgis, прежде чем пытаться опубликовать их в листовой карте, но она не работает.

Код, который я использовал ниже, где файл 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>

1 Ответ

0 голосов
/ 30 января 2019

Проблема в том, что вы пытаетесь указать имя файла в качестве параметра для L.geoJSON (..), но ему нужен объект Javascript, содержащий определение geoJson.Добавьте следующее в начало вашего файла geoJson (geojson.js): 

var myGeoJson =

, чтобы файл начинался так: 

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

А затем добавьте точку с запятой в концефайла.Таким образом, у вас есть переменная 'myGeoJson', представляющая определение geoJson.

Затем измените эту строку: 

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

на эту: 

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

Пример Leaflet GeoJSONстраница имеет аналогичный пример в верхней части страницы здесь: Использование GeoJSON с Leaflet

...