首页 > 代码库 > openlayers 3加载百度、高德、google瓦片地图
openlayers 3加载百度、高德、google瓦片地图
1、加载高德地图
//高德地图 var AMapLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: ‘http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}‘ }) });
2、google地图
//google地图 var googleMapLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ 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‘ }) });
3、百度地图
//百度地图 var projection = ol.proj.get("EPSG:3857"); var resolutions = []; for (var i = 0; i < 19; i++) { resolutions[i] = Math.pow(2, 18 - i); } var tilegrid = new ol.tilegrid.TileGrid({ origin: [0, 0], resolutions: resolutions }); var baidu_source = new ol.source.TileImage({ projection: projection, tileGrid: tilegrid, tileUrlFunction: function (tileCoord, pixelRatio, proj) { if (!tileCoord) { return ""; } var z = tileCoord[0]; var x = tileCoord[1]; var y = tileCoord[2]; if (x < 0) { x = "M" + (-x); } if (y < 0) { y = "M" + (-y); } return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20170809&scaler=1&p=1"; } }); var baiduMapLayer = new ol.layer.Tile({ source: baidu_source });
4、map中调用
var map = new ol.Map({ layers: [googleMapLayer],//AMapLayer, baiduMapLayer target: ‘map‘, view: new ol.View({ center: [10997148, 4569099], zoom: 4 }) });
openlayers 3加载百度、高德、google瓦片地图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。