OpenLayers 3 重投影矢量图层 (v4.3.2)

Question

向 GIS 爱好者和 WEB 制作者致敬。我有一个关于投影的问题，更准确地说，在 Openlayers 4 中从 EPSG:3765 重新投影到 EPSG:3857。

在下面的代码中，我试图从 EPSG:3765 重新投影到 EPSG:3857 :

    proj4.defs(
        'EPSG:3765',
        '+proj=tmerc +lat_0=0 +lon_0=16.5 +k=0.9999 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
    );

var map = new ol.Map({
    view: new ol.View({
        zoom: 6,
        center: ol.proj.transform([461152.65, 5108327.47], 'EPSG:3765', 'EPSG:3857')
    }),
    target: 'js-map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
            source: new ol.source.Vector({
                url: 'test_1.geojson',
                format: new ol.format.GeoJSON({
                    dataProjection: 'EPSG:3765',
                    featureProjection: 'EPSG:3857'
                })
            })

        })
    ]
});

geojson 文件中的坐标以米为单位，如下所示：

"coordinates": [ [ [ 461117.98, 5108379.85 ], [ 461124.53, 5108368.39 ], [ 461132.37, 5108354.26 ], [ 461141.13, 5108341.08 ...

我成功渲染了 geojson 但位置错误，如下所示：

我希望它在这里，像这样：

我做错了什么？ geojson 坐标格式有问题还是我需要以某种方式重新投影 geojson 以使其与第二张图片中的一样？

更新

从这里你可以下载 geojson 并测试你是否喜欢 https://www.dropbox.com/s/ih1bh8bj4zzgutc/test_1.geojson?dl=0

使用 pavlos 的例子我编辑了几行，或者更准确地说；我正在尝试使用这段代码

加载本地 geojson

var geojsonObject = $.ajax({
  dataType: "json",
  url: "test_1.geojson"
});

但我不断收到此类错误:

Uncaught TypeError: (0 , Tm[a.type]) is not a function

代码如下：

proj4.defs(
    'EPSG:3765',
    '+proj=tmerc +lat_0=0 +lon_0=16.5 +k=0.9999 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
);

var geojsonObject = $.ajax({
    dataType: "json",
    url: "test_1.geojson"
  });
console.log(geojsonObject);

var styles = {
    'Polygon': new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 5
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255, 0, 0, 1)'
        })
    })
};

var styleFunction = function(feature) {
    return styles[feature.getGeometry().getType()];
};



var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojsonObject, {
        defaultDataProjection: ol.proj.get('EPSG:3765'),
        featureProjection: 'EPSG:3857'
    })
});
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: styleFunction
});
var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vectorLayer
    ],
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
        })
    }),
    view: new ol.View({
        center: ol.proj.transform([461117.98, 5108379.85], 'EPSG:3765', 'EPSG:3857'),
        zoom: 12
    })
});

更新 3

我相信我更近了一步，但仍然没有运气

我用 jQuery 和 AJAX 请求编辑了一些代码，并在加载器属性中设置了函数。现在代码看起来像这样：

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        loader: function() {
            $.ajax({
                type: 'GET',
                url:'test_1.geojson',
                context: this
            }).done(function(data){
                var format = new ol.format.GeoJSON();
                this.addFeatures(format.readFeatures(data, {
                    defaultDataProjection: ol.proj.get('EPSG:3765'),
                    featureProjection: 'EPSG:3857'
                }));

            });
        }
    })
});
map.addLayer(vectorLayer);

但现在我看不到我的 GeoJSON 功能，它似乎加载但未在地图上呈现。

我必须指出，如果我从 readFeatures 方法评论这两行

defaultDataProjection: ol.proj.get('EPSG:3765'),
featureProjection: 'EPSG:3857'

geojson 确实呈现但在错误的位置，就像在第一张图片中一样。求救啊。。。我真的眼泪都没有了。。。

Answer 1

我认为您的问题出在坐标或源 EPSG 上。

看看 https://epsg.io/3765 ，该投影的边界在意大利东部，而您希望您的几何图形在意大利西部。

使用该投影，x 坐标应为负值。

我猜你的 geojson 文件没有使用 EPSG:3765

Answer 2

我不确定你的问题是什么，但也许你的 geojson 文件不包含 crs 定义。也许 proj4js 版本不正确。

检查此 fiddle --> https://jsfiddle.net/p_tsagkis/s9vtoaak/。我正在使用你的投影并且似乎在正确的位置。

更新：您还需要稍微更改您的 geojson 文件。 projection的定义，应该是这样的：

{"type":"FeatureCollection",
"crs": {
          "type": "name",
          "properties": {
            "name": "EPSG:3765"
          }
        },
        "features":[..........

如果您无法编辑 geojson 文件，另一种选择是将 geojson 中存在的名称注册到 ol3 js 部分。像这样：

proj4.defs('urn:ogc:def:crs:EPSG::3765', proj4.defs('EPSG:3765'));

或者将投影定义js行替换为：

proj4.defs("urn:ogc:def:crs:EPSG::3765","+proj=tmerc +lat_0=0 +lon_0=16.5 +k=0.9999 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");

我还没有测试过，但应该可以。

ol3 不知道 urn:ogc:def:crs:EPSG::3765 你只要给 proj4.defs("EPSG:3765","+proj=tmerc +lat_0=0 +lon_0=16.5 +k=0.9999 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"); 所以你需要以某种方式让它知道文件中存在投影名称。

OpenLayers 3 重投影矢量图层 (v4.3.2)

OpenLayers 3 reproject vector layer (v4.3.2)

jquery

openlayers

proj

geojson

openlayers-3