Google Maps 和 Openlayers 3 集成示例答案

【问题标题】：Google Maps and Openlayers 3 integration exampleGoogle Maps 和 Openlayers 3 集成示例
【发布时间】：2017-06-28 18:45:46
【问题描述】：

我正在使用位于...的 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 maps 卫星图像作为 OpenLayers 3 控件的基础层。
MapServer and Vector layers are projected mapserver 软件可以提供矢量数据和图像，所以您可能不是指 UMN Mapserver（根据标签 ~stackoverflow.com/tags/mapserver/info）

标签： google-maps openlayers-3 mapserver

【解决方案1】：

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

这不是一个完美的解决方案，所以请务必阅读图书馆的Limitations。

【讨论】：

【解决方案2】：

我已经实现的实际答案在这里...... 如果这对您有帮助，请赞成它以抵消收到的反对票。

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

如果您需要在 OpenLayers 地图中使用谷歌图像，这就是这样做的方法。

如果您使用的是 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 的可见性...

【讨论】：