JSON 文件未使用 Leaflet 加载

Question

我想弄清楚为什么这个 JSON 文件不能用 Leaflet 加载。 JSON 文件包含一个名为 "seabeds" 的对象，我用它在下面的代码中创建地图层。 JSON 文件是 located here. The html file is located here 和下面复制的代码。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
</head>
<body>
    <div id="map" style="position: absolute; width: 100%; height: 100%;"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
    <script src="seabeds.json"></script>
    <script>

        var map = L.map('map').setView([41.55437, -72.61202], 9); 

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
            maxZoom: 18,
            id: 'mapbox.streets'
        }).addTo(map);

        function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7
            };
        }

        var seabeds_layer = L.geoJson(seabeds, {
            style: style 
        }).addTo(map);
    </script>

</body>
</html>

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

您的 GeoJSON 中的要素位于投影坐标系中，而不是经度和纬度。基本上有两种方法可以解决这个问题。首先，如果您已从 GIS 程序导出此数据集，则可以将投影转换为具有 WGS84 基准的地理坐标系，然后再次导出为 GeoJSON。然后它应该会正确显示。

其次，您可以使用 Proj4Leaflet, which will allow you to display projected data in Leaflet. One complication in this case is that the GeoJSON does not have a named coordinate reference system object, which is necessary for L.Proj.GeoJson to work. Looking at your feature properties, I guessed that this might be using a state/regional projection, so I did a quick search for Connecticut on spatialreference.org 并选择 NAD 1983 StatePlane Connecticut FIPS 0600 Feet，这是一个幸运的猜测或非常接近实际使用的坐标系，因为它似乎有效。

由于Proj4Leaflet默认只包含几个坐标系，需要指定投影参数，可以在spatialreference.org页面的Proj4js format link获取投影：

proj4.defs("EPSG:102656", "+proj=lcc +lat_1=41.2 +lat_2=41.86666666666667 +lat_0=40.83333333333334 +lon_0=-72.75 +x_0=304800.6096 +y_0=152400.3048 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048006096012192 +no_defs");

然后，使用投影名称创建一个 CRS 对象并将其添加到您的海床 GeoJSON 对象中：

var crs = {
  "type": "name",
  "properties": {
    "name": "urn:ogc:def:crs:EPSG::102656"
  }
};

seabeds.crs = crs;

然后使用 L.Proj.geoJson 创建图层：

var seabeds_layer = L.Proj.geoJson(seabeds, {
  style: style
}).addTo(map);

然后就可以了！这是一个例子 fiddle:

http://fiddle.jshell.net/nathansnider/cjjrpyhx/

JSON 文件未使用 Leaflet 加载

JSON file not loading with Leaflet

json

geojson

leaflet