将平铺 Google 地图与 OpenLayers 3 结合使用

2023-12-27

如何将 google 地图与 OpenLayers 3 一起使用?
我想从 OpenLayers 2 迁移到 3。 这是一个例子:谷歌地图与 OpenLayers 集成示例 http://openlayers.org/en/v3.0.0/examples/google-map.html
但使用此方法需要更改旧的 HTML 代码(需要两个元素,示例中提到的“gmap”和“olmap”)。
ol3 官方不支持 Google 地图,但我的问题是:
“如何在我的项目中像 MapServer 一样使用 Google Maps Tile Service,而不需要添加谷歌API参考 https://maps.google.com/maps/api/js(出于优化目的)到脚本标签?”

这是我的旧代码,可以与 OpenLayers 2 一起正常工作:

var map = new OpenLayers.Map("map_canvas", {
    controls: [
        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.ScaleLine(),
        new OpenLayers.Control.MousePosition(),
        new OpenLayers.Control.OverviewMap()
    ],
    units: "m",
    numZoomLevels: 21
});
var gmap = new OpenLayers.Layer.Google(
    { type: google.maps.MapTypeId.ROADMAP, numZoomLevels: 21}
);
map.addLayers([gmap]);

和html代码:

<div id="map_canvas">
</div>

感谢任何帮助。


我找到了解决方案:

JsFiddle http://jsfiddle.net/j2cP4/150/

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM({
            url: 'http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
            attributions: [
                new ol.Attribution({ html: '© Google' }),
                new ol.Attribution({ html: '<a href="https://developers.google.com/maps/terms">Terms of Use.</a>' })
            ]
        })
    })
  ],
  view: new ol.View({
    center: ol.proj.transform(
        [-110, 45], 'EPSG:4326', 'EPSG:3857'),
    zoom: 3
  })
});
html, body, #map {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
<link href="http://openlayers.org/en/master/css/ol.css" rel="stylesheet"/>
<script src="http://openlayers.org/en/master/build/ol.js"></script>
<div id="map"></div>

但我不确定此代码是否与 Google 使用条款相反。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将平铺 Google 地图与 OpenLayers 3 结合使用 的相关文章

随机推荐