Показать коллекцию geojson с помощью Leaflet

с помощью QGIS я экспортировал полигональный слой как geojson, который я хотел бы опубликовать с листовкой. Вот как выглядит geojson [исключено из-за ограничений на символы SO]: https://gist.github.com/t-book/88806d12d7f05024b147715be82e6844

Вот что я пробовал:

Обернул geojson как var:

var states = [{
    "type": "FeatureCollection",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::31468" } },
    "features": [
       { "type": "Feature", "properties": ...
}];

Добавлен как новый слой:

L.geoJSON(states, {
    style: function(feature) {
        switch (feature.properties.party) {
            case 'Euerbach': return {color: "#ff0000"};
            case 'Werneck':   return {color: "#0000ff"};
        }
    }
}).addTo(map);

К сожалению, ничего не отображается. Как мне правильно добавить эту коллекцию geojson featureCollection на мою карту?


leaflet geojson map-projections
person Anatol    schedule 02.12.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Проблема в том, что ваши данные спроецированы - Leaflet ожидает, что ваши данные не будут спроецированы (состоят из пар долгая / широта или «спроецированы» в WGS84 / EPSG 4326). Есть несколько решений, здесь на ум приходят два:

  • В QGIS экспортируйте данные, чтобы они состояли из пар координат долгая / широта.

  • Используйте proj4.js для перепроецирования ваших координат при отображении geojson.

Для номера два вам нужно будет установить опцию coordsToLatLng при добавлении geojson в качестве слоя:

var geojson = L.geoJSON(states, {
    coordsToLatLng: function (p) {  
        // return get lat/lng point here.
})

Тело этой функции примет координату в системе координат (CRS) geojson и вернет ее в WGS84 с помощью proj4.

Кроме того, функция coordsToLatLng ожидает, что вы вернете пары широта / долгота. Поскольку ваши geojson и proj4 представляют данные [x, y], нам нужно поменять местами наши значения перед возвратом новой точки.

Это могло выглядеть так:

var geojson = L.geoJSON(states, {
    coordsToLatLng: function (p) {
        p = proj4(fromProjection,toProjection,p);  // reproject each point
        p = [p[1],p[0]]    // swap the values
        return p;          // return the lat/lng pair
    }
}).addTo(map);

Конечно, нам нужно определить наши CRS. Я просмотрел вашу CRS (она указана в самом geojson) на spacereference.org и использовал предоставленное описание для этого CRS и EPSG4326 (WGS84), чтобы установить мои fromProjection и toPojection:

var fromProjection = '+proj=tmerc +lat_0=0 +lon_0=12 +k=1 +x_0=4500000 +y_0=0 +ellps=bessel +datum=potsdam +units=m +no_defs ';
var toProjection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ";

В целом это дает нам что-то вроде этого. Имейте в виду, что если у вас есть большие файлы, перепроецирование их в javascript займет больше времени, чем при их экспорте в надлежащую CRS.

person Andrew Reid    schedule 02.12.2017
comment
Большое спасибо! - person Anatol; 03.12.2017