openlayers之加载谷歌地图(转)

之前项目中一直使用高德地图作为底图,但高德地图影像图只限于城市地区并且有坐标偏移,所以决定替换为谷歌地图。其实一直以为谷歌地图不能访问,不知道有没有像我一样懒的小伙伴……

加载谷歌地图的地址总结如下:

谷歌交通地图地址:http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0,

平面图地址2:http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z},

影像图地址:http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z},

影像注记层地址:http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z},

地形图层:http://www.google.cn/maps/vt?lyrs=t@189&gl=cn&x={x}&y={y}&z={z}

第二个平面图会出现注记有英文的情况,如下图所示,所以使用谷歌交通图比较好。

查询谷歌地图的加载,参考了以下博客:

http://blog.csdn.net/smilecoffin/article/details/72863967,谷歌交通地图地址来源于此,特地打开谷歌地图对比,却找不到这样的地址;影像图的地址可以找到。

另外参考leaflet.ChineseTmsProviders插件(详见博客http://blog.csdn.net/GISuuser/article/details/77600052)和http://www.360doc.com/content/14/0917/16/7931690_410213814.shtml 得知lyrs=后面的参数,h代表注记层,s代表影像层,m代表平面图层,t代表地形图层。

测试代码如下:

复制代码
DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>title>  <script src="js/lib/ol.js">script>  <link rel="stylesheet" href="css/ol.css" type="text/css"><script type="text/javascript">  window.onload = function () {  var googleMapLayer = new ol.layer.Tile({  source: new ol.source.XYZ({  url:'http://www.google.cn/maps/vt?lyrs=t@189&gl=cn&x={x}&y={y}&z={z}'
//                  url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
//                  url:'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&x={x}&y={y}&z={z}'
//                    url:'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
//                    url:'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}'
//                    url:'http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}'
})});  var map = new ol.Map({  layers: [googleMapLayer],  view: new ol.View({  center: [106.51, 29.55],  projection: 'EPSG:4326',  zoom: 10  }),  target: 'map'  });  };  script>  
head>  
<body>  <div id="map">div>  
body>  
html> 


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部