vector - Openlayers 3重新投影EPSG :4326 vector to EPSG:3857

我需要将GeoJSON矢量数据从EPSG:4326转换为EPSG:3857 ...

我有一张 map ...

var olMapDiv = document.getElementById('olmap');
            control.map = new ol.Map({
                target: olMapDiv,
                renderer: 'canvas',
                layers: layers,
                interactions: ol.interaction.defaults({
                    altShiftDragRotate: false,
                    dragPan: false,
                    rotate: false
                }).extend([new ol.interaction.DragPan({ kinetic: null })]),
                pixelRatio: 1,
                loadTilesWhileAnimating: true,
                loadTilesWhileInteracting: true,
                view: view
            });

和一个 View ...

var view = new ol.View({
                // make sure the view doesn't go beyond the 22 zoom levels of Google Maps
                maxZoom: 21,
                projection: 'EPSG:3857',
                center: [0, 0],
                zoom: 0
            });

我定义我的geoJson对象...

var geoJsonObj = {
                        'type': 'Feature',
                        'geometry': JSON.parse(shape),
                        'name': 'V',
                        'id': V.vID

                    }

我尝试将要素读取到开放层的Vector对象中，并提供投影参数...

var vectorSource = new ol.source.Vector({
                        features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj, {defaultDataProjection:"EPSG:4326",featureProjection:"EPSG:3857"})
                    });

然后我在新的Vector层中使用上面的“vectorSource” ...

vectors = new ol.layer.Vector({
                        title: V.vID,
                        source: vectorSource,
                        id: V.vID,
                        name: 'V',
                        label: response.VList[key].Acres,
                        fill: response.VList[key].Shade,
                        stroke: defaultStrokeHex,
                        style: function (feature, resolution) {
                            var text = resolution * 100000 < 10 ? response.VList[key].Acres : '';

                            if (text != "") {
                                styleCache[text] = [new ol.style.Style({
                                    stroke: new ol.style.Stroke({
                                        color: '#319FD3',
                                        width: 1
                                    }),
                                    text: new ol.style.Text({
                                        font: '12px Calibri,sans-serif',
                                        text: text,
                                        fill: new ol.style.Fill({
                                            color: '#000'
                                        }),
                                        stroke: new ol.style.Stroke({
                                            color: '#fff',
                                            width: 3
                                        })
                                    }),
                                    fill: new ol.style.Fill({
                                        color: rcisWebMapUtilities.convertHex(response.VList[key].Shade, '0.5')
                                    })
                                })];
                            }
                            else if (text == "") {
                                styleCache[text] = [new ol.style.Style({
                                    fill: new ol.style.Fill({
                                        color: rcisWebMapUtilities.convertHex(response.VList[key].Shade, '0.5')
                                    })
                                })
                                ]
                            } return styleCache[text];
                        }


                    });

无论我做什么我都可以看到绘制的矢量...但是在EPSG:4326中还是什么也没有加载...

我花了太多时间试图弄清楚如何让OpenLayers3做到这一点...非常感谢您的帮助!!

最佳答案

如果您在 View 中使用EPSG:4326，则您的geojson矢量声明应为

var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject, {
dataProjection: 'EPSG:4326',
featureProjection:'EPSG:4326' })
});

如果您在 View 中使用EPSG:3857，请使用以下命令:

var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject, {
dataProjection: 'EPSG:4326',
featureProjection:'EPSG:3857' })
});

只是为了解释dataProjection是源代码。表示geojson文件中坐标的epsg。 featureProjection是 View 的EPSG，因此也是 map 的EPSG。意思是EPSG的原始坐标应该被转换。

因此，请记住以下规则:featureProjection和ol.View投影声明应相等。

请注意，我假设您的geojson坐标投影在EPSG:4326中。