mapbox 不使用另一个 .geojson 文件的示例

Question

我正在尝试测试 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——显示德国西南地区的多边形——不起作用 (http://playground.nothingisclear.net/simplified_LW_2015.geojson)

而 mapbox 的示例 – 显示 U.S.A.– 有效 (https://www.mapbox.com/mapbox.js/assets/data/us-states.geojson).

我已经对 geojson 进行了三次检查，它似乎完全没有错误，但不知何故它没有在地图上显示多边形。

关于如何解决这个问题有什么想法吗？谢谢。

测试： 切换 on/off 您看到 ajax 调用的 url: 的注释。

Answer 1

来自您的 GeoJSON 文件：

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

此 GeoJSON 文件与 EPSG:4326 的投影不同，因此坐标远非有效：经度应 >-180 且 <180，纬度 >-90 且 <90。将您的数据重新投影到 EPSG:4326，您的示例将起作用。

mapbox 不使用另一个 .geojson 文件的示例

example of mapbox not working with another .geojson file

javascript

maps

json

geojson

mapbox