gpt4 book ai didi

javascript - Mapbox 不与另一个 .geojson 文件一起使用的示例

转载 作者:行者123 更新时间:2023-11-28 19:05:14 25 4
gpt4 key购买 nike

我正在尝试测试 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 的示例(显示美国)有效 ( https://www.mapbox.com/mapbox.js/assets/data/us-states.geojson )。

<小时/>

我已经三重检查了 geojson,它似乎根本没有错误,但不知何故它没有在 map 上显示多边形。

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

测试:打开/关闭您看到 ajax 调用的 url: 的注释。

最佳答案

来自您的 GeoJSON 文件:

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

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

关于javascript - Mapbox 不与另一个 .geojson 文件一起使用的示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31810210/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com