Openlayers 3将EPSG:4326矢量投影到EPSG:3857 [英] Openlayers 3 Reproject EPSG:4326 vector to EPSG:3857

问题描述

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

I am needing to transform GeoJSON vector data from EPSG:4326 to EPSG:3857...

我有一张地图...

I have a 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
            });

和一个视图...

and a 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对象...

I define my geoJson Object...

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

                    }

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

I try to read the features into a open layers Vector object and provide projection parameters...

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

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

Then I use the "vectorSource" above in a new Vector layer...

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中还是什么也没有加载...

No matter what I do I either see the vector drawn...but in EPSG:4326 or nothing loads...

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

I've spent way too much time trying to figure out how to get OpenLayers3 to do this...Any help is greatly appreciated!!

推荐答案

如果在视图中使用EPSG:4326，则geojson矢量声明应为

If you use EPSG:4326 in your view then your geojson vector declaration should be

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

如果您在视图中使用EPSG:3857，请使用以下代码:

If you use EPSG:3857 in your view use this:

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的原始坐标应该被转换.

Just to explain dataProjection is the source coords. Means the epsg of your coordinates within the geojson file. While featureProjection is the EPSG of your view and thus the EPSG of your map. Means is the EPSG original coords should be trasformed.

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

So try to remember this rule: featureProjection and ol.View projection declaration should be equal.

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

这篇关于Openlayers 3将EPSG:4326矢量投影到EPSG:3857的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！