2015-08-04 1 views
0

Я пытаюсь проверить mapbox, но я застрял в попытке визуализировать несколько полигонов, исходящих из файла .geojson.пример mapbox не работает с другим файлом .geojson

Вот мой код:

(потребности Allow-Control-Allow-Origin Chrome плагин работать должным образом).

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset=utf-8 /> 
 
<title>Point in polygon</title> 
 
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
 
<script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script> 
 
<link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' /> 
 
<style> 
 
    body { margin:0; padding:0; } 
 
    #map { position:absolute; top:0; bottom:0; width:100%; } 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<style> 
 
.state { 
 
    position:absolute; 
 
    top:10px; 
 
    right:10px; 
 
    z-index:1000; 
 
    } 
 
    .state strong { 
 
    background:#404040; 
 
    color:#fff; 
 
    display:block; 
 
    padding:10px; 
 
    border-radius:3px; 
 
    } 
 
</style> 
 

 
<!-- 
 
    This example requires jQuery to load the file with AJAX. 
 
    You can use another tool for AJAX. 
 

 
    This pulls the file airports.csv, converts into into GeoJSON by autodetecting 
 
    the latitude and longitude columns, and adds it to the map. 
 

 
    Another CSV that you use will also need to contain latitude and longitude 
 
    columns, and they must be similarly named. 
 
--> 
 

 
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> 
 
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script> 
 
<div id='map'></div> 
 
<div id='state' class='state'></div> 
 
<script> 
 
L.mapbox.accessToken = 'pk.eyJ1IjoicmljcmljdWNpdCIsImEiOiIyODdkMTk4YmY5YTllYWQ1ZTk5MWQ5NTEwYmIwMjQ3OSJ9.a2bQbD9hl6dOCI7Om1BcwQ'; 
 
var state = document.getElementById('state'); 
 
var map = L.mapbox.map('map', 'mapbox.emerald') 
 
    .setView([38, -95], 4); 
 

 
$.ajax({ 
 
    //url: 'https://www.mapbox.com/mapbox.js/assets/data/us-states.geojson',   // correctly show U.S.A 
 
    url: 'http://playground.nothingisclear.net/simplified_LW_2015.geojson',   // should show some areas in south-west Germany (Baden-Wuttemberg) 
 
    dataType: 'json', 
 
    success: function load(d) { 
 
     console.log(d); 
 
     var states = L.geoJson(d).addTo(map); 
 
    } 
 
}); 
 
</script> 
 

 

 
</body> 
 
</html>

Моя проблема заключается в том, что мой GeoJSON -showing многоугольники в юго-западном регионе Германия- не работает (http://playground.nothingisclear.net/simplified_LW_2015.geojson)

в то время как пример MapBox в -showing США- работает (https://www.mapbox.com/mapbox.js/assets/data/us-states.geojson).


Я тройной проверил в формате GeoJSON и, кажется, не имеют никаких ошибок на всех, но почему-то не показывает полигонов на карте.

Любые идеи о том, как это решить? Спасибо.

Чтобы проверить: включить/выключить комментарии, в которых вы видите url: вызова ajax.

ответ

3

Из файла GeoJSON:

"geometry":{"type":"Polygon","coordinates":[[[3519139.557897714,5400906.9684712365] 

Этот файл GeoJSON в другой проекции, чем EPSG: 4326, поэтому координаты очень далеко от действительно: долгота должна быть> -180 и < 180, широта> -90 и < 90. Перепроектируйте свои данные в EPSG: 4326, и ваш пример будет работать.

+0

спасибо за это, но так как я новичок geojson ... можете ли вы также рассказать мне, как я могу перепрограммировать свои данные в EPSG: 4326? – ricricucit

+1

Какова проекция ваших данных в настоящее время? Как вы его генерируете? Каков источник этих данных? – tmcw

+0

Я узнал, что у меня была EPSG: проекция 31467 и ее изменение с помощью онлайн-инструмента http://ogre.adc4gis.com решили мою проблему, спасибо! – ricricucit

Смежные вопросы