Google Maps 和 Openlayers 3 集成示例

Question

我正在使用位于...的 Open Layers 3 示例 http://openlayers.org/en/v3.0.0/examples/google-map.html

...我已经取得了一些成功。

我运行遇到的问题是让我的 OL3 矢量和 MapServer 层正确投影到 web-Mercator Google 地图上。

我已经使用该示例作为模板，但它没有用。
目前所有 MapServer 和 Vector 图层都投影为 ESPG:4326，但需要在 Web-Mercator 中与下面的 google 地图对齐。

非常感谢任何帮助！！

Answer 1

您可以尝试 OL3-Google-Maps 库，它结合了 Google 地图 API 和 OpenLayers 的使用，看看它是否符合您的需要。

这不是一个完美的解决方案，因此请务必阅读库的 Limitations。

Answer 2

我实现的实际答案在这里... 如果这对您有帮助，请投上一票以抵消收到的反对票。

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

如果您需要在 OpenLayers 地图中使用 google 图像，这就是实现它的方法。

如果您使用的是 SPA MVC AngularJS 架构，请确保您足够早地调用页面中的 google API 并注意此示例同时加载 google div 和 OpenLayers div 然后在加载结束时将它们组合起来...所以如果在初始化后出现任何错误或停止加载过程，您将看到两个 div google div 首先是它下面的 OpenLayers div ...一旦所有错误都得到解决并且您的进程能够执行 ...

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

您将看到合并的地图。

如果您要将数据从 EPSG:4326 转换为 EPSG: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" 和 "olmap" 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>

唯一的区别是 "z-index"，现在您可以控制动态设置 "gmap" div 的可见性...

Google Maps 和 Openlayers 3 集成示例

Google Maps and Openlayers 3 integration example

google-maps

mapserver

openlayers-3