JSON文件不加載小冊子

我想弄清楚爲什麼這個JSON文件不會加載小冊子。 JSON文件包含一個名爲「海底」的對象，我用它在下面的代碼中創建地圖圖層。 JSON文件是located here. html文件是located here和下面複製的代碼。JSON文件不加載小冊子

<!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>

任何幫助將不勝感激。

謝謝。

來源

2016-04-21 Scott

您的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只包括一些默認的座標系，你需要指定投影參數，你可以從Proj4js format鏈接獲得spatialreference.org頁上的投影：

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/

來源

2016-04-21 17:49:00 nathansnider

內森，謝謝！我感謝你的周到和徹底的迴應。我會馬上嘗試你的建議。 – Scott

JSON文件不加載小冊子

回答

相關問題