Openlayers 3 Reproject EPSG:4326向量到EPSG:3857

时间:2017-07-06 19:33:24

标签: vector openlayers openlayers-3

我需要将EPSG中的GeoJSON矢量数据转换为:4326到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
            });

和视图......

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做到这一点......非常感谢任何帮助!!

1 个答案:

答案 0 :(得分:4)

如果您在视图中使用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的原始坐标应该被改造。

因此,请尝试记住此规则:featureProjectionol.View投影声明应相等。

请注意,我假设你的geojson坐标是在EPSG中预测的:4326。