将Openlayers 3中的EPSG：4326矢量投影转换为EPSG：3857

Question

将Openlayers 3中的EPSG：4326矢量投影转换为EPSG：3857

6

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

我有一张地图...

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
            });

和视图一起使用的MVC控制器：

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

                    }

我尝试将特征读入到开放图层矢量对象中，并提供投影参数...

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

然后我在一个新的矢量图层中使用上述的“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实现这一点...非常感谢任何帮助!!

- Funn_Bobby

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pavlos · Accepted Answer

如果您在视图中使用EPSG:4326，则您的geojson向量声明应该是

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

如果您的视图中使用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 则是视图的 EPSG，因此也是地图的 EPSG。这意味着原始坐标的 EPSG 应该被转换。

所以，请记住这个规则：featureProjection 和 ol.View 投影声明应该相等。

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