Question

我正在试图弄清楚为什么这个JSON文件不会加载Leaflet。 JSON文件包含一个名为“seabeds”的对象，我用它在下面的代码中创建一个地图图层。 JSON文件为located here. html文件为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，这样您就可以在Leaflet中显示投影数据。在这种情况下的一个复杂因素是GeoJSON没有名为coordinate reference system object，这是L.Proj.GeoJson工作所必需的。查看您的要素属性，我猜测这可能是使用州/区域投影，所以我快速搜索Connecticut on spatialreference.org并选择了NAD 1983 StatePlane Connecticut FIPS 0600 Feet，这是一个幸运的猜测或非常接近的使用的实际坐标系，因为它似乎有效。

由于Proj4Leaflet默认只包含一些坐标系，因此您需要指定投影参数，您可以从spatialreference.org页面上的Proj4js format链接获取投影参数：

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);

然后它就会起作用！这是一个小例子：

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

JSON文件未加载Leaflet

1 个答案: