GoogleマップとOpenLayersを3統合例

Question

私は... http://openlayers.org/en/v3.0.0/examples/google-map.html

をオープンに位置レイヤー3の例を使用しています...と私はいくつかの成功を収めています。

私が実行している問題は、Web-Mercator Googleマップ上にOL3ベクターとMapServerレイヤーが正しく投影されることです。

私はこの例をテンプレートとして使用しましたが、機能しませんでした。
現在、すべてのMapServerレイヤーとVectorレイヤーはESPG：4326として投影されていますが、Web-Mercatorの下に横たわっているGoogleマップと並んでいる必要があります。

何か助けていただければ幸いです。

Answer 1

私が実装した実際の答えはここにある... このことができます場合は、アップ投票喜ばそれがダウン票は、これを受信しました。

http://openlayers.org/en/v3.0.0/examples/google-map.html

あなたはあなたの中にGoogleの画像を使用する必要がある場合、これはそれを行う方法であるマップOpenLayersを。

SPA MVC AngularJSアーキテクチャを使用している場合は、ページのGoogle APIへの呼び出しを早めに行ってください。この例では、Google divとOpenLayers divの両方がロードされ、読み込みの最後にそれらを組み合わせます...初期化後に何らかのエラーが発生したり読み込みプロセスが停止したりすると、最初に2つのdivが表示され、その下にOpenLayers divが表示されます...

olMapDiv.parentNode.removeChild(olMapDiv); 
gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv); 

地図を組み合わせて表示されます。

あなたはEPSGからのデータを変換している場合：EPSGに4326：あなたがあなたのビュー投影を変更することになるでしょう3857 ...

var view = new ol.View({ 
projection: 'EPSG:3857', 
// make sure the view doesn't go beyond the 22 zoom levels of Google Maps 
maxZoom: 21 
}); 

、あなたはまた、変換すると、データポイントは、あなたが来ているでしょう私はこのようにしました...

*shape = data points from data base 
var geoJsonObj = { 
         'type': 'Feature', 
         'geometry': JSON.parse(shape), 
         'name': 'YourName', 
         'id': YourName.YourID 

        } 

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


        YourLayer = new ol.layer.Vector({ 
         title: YourName.YourID, 
         source: vectorSource, 
         id: YourName.YourID, 
         name: 'YourName', 
         label: response.DataList[key].Label, 
         fill: response.DataList[key].Color, 
         stroke: defaultStrokeHex, 
         style: function (feature, resolution) { 
          var text = resolution * 100000 < 10 ? response.DataList[key].Label: ''; 

          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: Utility.convertHex(response.DataList[key].Shade, '0.5') 
            }) 
           })]; 
          } 
          else if (text == "") { 
           styleCache[text] = [new ol.style.Style({ 
            fill: new ol.style.Fill({ 
             color: Utility.convertHex(response.DataList[key].Shade, '0.5') 
            }) 
           }) 
           ] 
          } return styleCache[text]; 
         } 


        }); 

上記のベクトルレイヤの例では、明らかに必要以上に多くのことがあります。

...あなたがデータをベクトルやマップサーバレイヤを使用すると、「olmap」と「GMAP」を組み合わせることはできません下にあなたが衛星画像レイヤオフターンに能力が必要な場合
上記のコードへの補遺は、ので、それらをコメントDIVアウトラインとあなたは「GMAP」の両方にこのスタイルを追加し、唯一の違いは、「Zインデックス」であるdiv要素の

<div id="gmap" style="padding: 0px; width: 100vw; height: 90vh;z-index: 0; position:absolute"></div> 
<div id="olmap" style="padding: 0px; width: 100vw; height: 90vh;z-index: 1; position:absolute"></div> 

を「olmap」と今あなたが「GMAP」のdivに可視性を設定するコントロールを持っています動的に...

Answer 2

あなたはOL3-Google-Mapsライブラリー、一緒にGoogle MapsのAPIとOpenLayersをの使用を組み合わせを試してみてください、そして、それはあなたのニーズに合うかどうかを確認できます。

これは完璧な解決策ではありませんので、ライブラリのLimitationsを必ずお読みください。設定オフに