openlayers加载谷歌地图（在线demo）

最近发现可以直接访问谷歌地图了（不用梯子，不用翻墙，直接访问谷歌地图，关键是使用了gac-geo.googlecnapps.cn ），用openlayers随手写了一个，方便自己使用，感兴趣的可以访问我写的例子，需要注意的是，打开地图后，没有任何图层，需要在下面选择图层。
例子：谷歌地图demo

地图和图层

     //先定义需要的变量//图层的参数var layerConfig = {};//openlayers图层var layers = {};//使用4326的坐标系var map = new ol.Map({layers: [],target: 'map',view: new ol.View({center: [109, 32],zoom: 5,projection: "EPSG:4326"})});

加载图层

function load() {//lyrs和图层名称的对应关系layerConfig["m"] = "路线图";layerConfig["t"] = "地形图";layerConfig["p"] = "带标签的地形图";layerConfig["s"] = "卫星图";layerConfig["y"] = "带标签的卫星图";layerConfig["h"] = "标签层（路名、地名等）";//osm地图layerConfig["osm"] = "osm";for (var key in layerConfig) {var name = layerConfig[key];if (name == "osm") {var osml = new ol.layer.Tile({source: new ol.source.OSM()});osml.name = "osm";layers[key] = osml;} else {layers[key] = getGLayer(key, layerConfig[key]);}//添加到页面var input = document.createElement("input");input.setAttribute("type", "checkbox");input.setAttribute("id", key);input.setAttribute("name", name);input.setAttribute("value", name);input.setAttribute("onclick", "setLayerVisible(this)");document.getElementById("layers").appendChild(input);document.getElementById("layers").appendChild(document.createTextNode(name));}}

图层的操作

这里使用gac-geo.googlecnapps.cn加载谷歌的地图，lyrs参数对应的图层名称在上面的代码里面

    // 设置图层的显示function setLayerVisible(obj) {var layerName = obj.value;var layer = getLayerByName(layerName);if (layer != null) {layer.setVisible(obj.checked);} else {map.addLayer(layers[obj.id]);}}//根据图层名称获取图层function getLayerByName(name) {var layers = map.getLayers();var l = layers.getLength();for (var i = 0; i < l; i++) {if (layers.item(i).name == name) {return layers.item(i);}}return null;}//构建谷歌地图的图层function getGLayer(l, name) {var gl = new ol.layer.Tile({source: new ol.source.XYZ({url: 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=' + l + ',m&gl=&x={x}&y={y}&z={z}'})});gl.name = name;return gl;}

希望谷歌地图的这个域名能多用几年

openlayers加载谷歌地图（在线demo）相关推荐

ArcGIS API for JavaScript 4.4 版本加载谷歌地图
ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
在线加载谷歌地图—lyrs类型解析
在线加载谷歌地图-lyrs类型解析最近在用openlayers加载在线谷歌地图的时候总结了一下lyrs之后地图类型解析 m 标准路线图 r 某种改变的路线图(路线不明显) s 影像层(卫星图) y ...
Openlayers之加载谷歌地图
1.谷歌地图瓦片构成我们用浏览器打开谷歌地图,然后按下F12键,查看网络资源中的地图瓦片,可以发现瓦片URL中变化的部分为1i.2i和3i后面的数字,经过分析可以知道1i后面的应该是瓦片的级别,2i ...
vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...
python下载谷歌地图瓦片_openLayers TMS加载谷歌地图瓦片
openLayers TMS中加载谷歌瓦片经纬坐标(LonLat) 和投影坐标系的转换 /** openLayer根据TMS加载谷歌地图瓦片 (1)先去下载加载谷歌地图瓦片,这样的软件有(水经注 ...
openlayers加载离线地图并实现深色地图
问题背景我们自己一直使用的openlayer+geoserver自己发布的地图,使用的是矢量地图.但是由于政府地图大都使用为天地图,所以需要将geoserver的矢量地图更改为天地图,并 ...
使用Python加载谷歌地图并可视化
使用Python加载谷歌地图并可视化 1.库 - pyqt5- pandas- gmplot 首先放个结果图(本文使用的是gmplot,该库使用的是谷歌地图,地图仅供小型开发玩一下而已,大家可以使用百 ...
OpenLayers加载QQ地图(转)
OpenLayers加载QQ地图 http://www.openlayers.cn/portal.php?mod=view&aid=4 2012-10-21 17:22| 发布者: admin ...
openlayers加载bing地图
openlayers加载bing地图注:需要bingmap网站提供的许可key,注册微软账号就有了,https://www.bingmapsportal.com/Application# 查看文章

openlayers加载谷歌地图（在线demo）

地图和图层

加载图层

图层的操作

openlayers加载谷歌地图（在线demo）相关推荐

最新文章

热门文章