Leaflet 用传单展示geojson featureCollection

Leaflet 用传单展示geojson featureCollection,leaflet,geojson,map-projections,Leaflet,Geojson,Map Projections,使用QGIS,我导出了一个多边形层作为geojson,我想将其与传单一起发布。这就是geojson的外观[由于字符限制而被排除]: 这就是我尝试过的: 将geojson包装为var: var states = [{ "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::31468" } }, "features": [

使用QGIS,我导出了一个多边形层作为geojson,我想将其与传单一起发布。这就是geojson的外观[由于字符限制而被排除]:

这就是我尝试过的:

将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添加到我的地图?

问题在于您的数据是投影的-传单希望您的数据是未投影的(由长/lat对组成,或WGS84/EPSG 4326中的“投影”)。有几种解决方案,这里想到两种:

  • 在QGIS中,导出数据,使其由长/纬度坐标对组成

  • 显示geojson时,使用proj4.js重新投影坐标

第二,在将geojson添加为层时,需要设置coordsToLatLng选项:

var geojson = L.geoJSON(states, {
    coordsToLatLng: function (p) {  
        // return get lat/lng point here.
})
此函数体将获取geojson坐标参考系(CRS)中的坐标,并使用proj4将其返回到WGS84中

此外,coordsToLatLng函数希望您返回lat/long对。由于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本身中指定),并使用提供的CRS说明和EPSG4326(WGS84)设置我的fromProjection和TopoProjection:

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中导出它们花费更长的时间。

非常感谢!