的OpenLayers 3重新投影EPSG：4326載體EPSG：3857

Question

我需要從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 

        } 

我嘗試讀取功能集成在一個開放的層矢量對象，並提供投影參數...

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

然後，我使用上面的「矢量源」在一個新的矢量層...

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做到這一點......任何幫助非常感謝！

Answer 1

如果使用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 coords預計在EPSG：4326中。