首页 文章

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

提问于
浏览 次
2

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

I define my geoJson Object...

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

                    }

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

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或没有任何负载......

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

vector openlayers openlayers-3

1 回答

  • 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，因此是您 Map 的EPSG . 手段是EPSG原始的coords应该被改造 .

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

    Note that I am assuming your geojson coords are projected in EPSG:4326.

    回复于

相关问题