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 в проектируемой системе координат, а не долготы и широты. Есть два способа исправить это. Во-первых, если вы экспортировали этот набор данных из программы ГИС, вы можете преобразовать проекцию в географическую систему координат с привязкой WGS84, а затем снова экспортировать в GeoJSON. Затем он должен корректно отображаться.

Во-вторых, вы можете использовать Proj4Leaflet, который позволит отображать прогнозируемые данные в листовке. Одна из сложностей в этом случае является то, что 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-файл не загружается с листовка

ответ

Смежные вопросы