OpenLayers3加载百度地图

BaiduMapSource.js

/*** 加载百度地图* @returns {ol.layer.Tile}*/
function loadBaiduMap() {//数据源信息var attribution = new ol.Attribution({html: 'Copyright:&copy; 2015 Baidu, i-cubed, GeoEye'});//地图范围var extent = [-20037508.34, -20037508.34, 20037508.34, 20037508.34];//瓦片大小var tileSize = 256;//瓦片参数原点var origin = [0, 0];//百度地图在线服务地址var urlTemplate = "http://online2.map.bdimg.com/tile/?qt=tile&x=" + '{x}' + "&y=" + '{y}' + "&z=" + '{z}' + "&styles=pl&udt=20141219&scaler=1";//通过范围计算得到地图分辨率数组resolutionsvar resolutions = getResolutions(extent, tileSize);//实例化百度地图数据源var baiduSource = new ol.source.TileImage({attributions: [attribution],tileUrlFunction: function (tileCoord, pixelRatio, projection) {//判断返回的当前级数的行号和列号是否包含在整个地图范围内if (this.tileGrid != null) {var tileRange = this.tileGrid.getTileRangeForExtentAndZ(extent, tileCoord[0], tileRange);if (!tileRange.contains(tileCoord)) {return;}}var z = tileCoord[0];var x = tileCoord[1];var y = tileCoord[2];return urlTemplate.replace('{z}', z.toString()).replace('{y}', y.toString()).replace('{x}', x.toString());},projection: ol.proj.get('EPSG:3857'), //投影坐标系tileGrid: new ol.tilegrid.TileGrid({origin: origin, //原点，数组类型，如[0,0],resolutions: resolutions, //分辨率数组tileSize: tileSize //瓦片图片大小})});//实例化百度地图瓦片图层var baiduLayer = new ol.layer.Tile({source: baiduSource});//map.addLayer(baiduLayer); //添加Baidu地图图层return baiduLayer;
}/*** 加载百度卫星地图* @returns {ol.layer.Tile}*/
function loadBaiduMapSate() {//数据源信息var attribution = new ol.Attribution({html: 'Copyright:&copy; 2015 Baidu, i-cubed, GeoEye'});//地图范围var extent = [-20037508.34, -20037508.34, 20037508.34, 20037508.34];//瓦片大小var tileSize = 256;//瓦片参数原点var origin = [0, 0];//百度地图在线服务地址var urlTemplate = "https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/starpic/?qt=satepc&u=x="+ '{x}' +";y="+ '{y}' +";z="+'{z}'+";v=009;type=sate&fm=46&app=webearth2&v=009&udt=20190425";//通过范围计算得到地图分辨率数组resolutionsvar resolutions = getResolutions(extent, tileSize);//实例化百度地图数据源var baiduSource = new ol.source.TileImage({attributions: [attribution],tileUrlFunction: function (tileCoord, pixelRatio, projection) {//判断返回的当前级数的行号和列号是否包含在整个地图范围内if (this.tileGrid != null) {var tileRange = this.tileGrid.getTileRangeForExtentAndZ(extent, tileCoord[0], tileRange);if (!tileRange.contains(tileCoord)) {return;}}var z = tileCoord[0];var x = tileCoord[1];var y = tileCoord[2];return urlTemplate.replace('{z}', z.toString()).replace('{y}', y.toString()).replace('{x}', x.toString());},projection: ol.proj.get('EPSG:3857'), //投影坐标系tileGrid: new ol.tilegrid.TileGrid({origin: origin, //原点，数组类型，如[0,0],resolutions: resolutions, //分辨率数组tileSize: tileSize //瓦片图片大小})});//实例化百度地图瓦片图层var baiduLayer = new ol.layer.Tile({source: baiduSource});//map.addLayer(baiduLayer); //添加Baidu地图图层return baiduLayer;
}/*** 通过范围计算得到地图分辨率数组resolutions* @param extent* @param tileSize* @returns {any[]}*/
function getResolutions(extent, tileSize) {var width = ol.extent.getWidth(extent);var height = ol.extent.getHeight(extent);var maxResolution = (width <= height ? height : width) / (tileSize);//最大分辨率var resolutions = new Array(16);var z;for (var z = 0; z < 16; ++z) {resolutions[z] = maxResolution / Math.pow(2, z);}return resolutions; //返回分辩率数组resolutions
}/*** 重新设置地图视图* @param {ol.Coordinate} center 中心点* @param {number} zoom 缩放级数*/
function setMapView(center, zoom) {var view = map.getView(); //获取地图视图view.setCenter(center); //平移地图view.setZoom(zoom); //地图缩放
}

实现效果：

OpenLayers3加载百度地图相关推荐

Openlayers3 加载百度地图，天地图
2019独角兽企业重金招聘Python工程师标准>>> openlayers3 加载百度地图: var projection = ol.proj.get("EPSG:385 ...
ol xyz 加载天地图_Openlayers3 加载百度地图，天地图
2019独角兽企业重金招聘Python工程师标准>>> openlayers3 加载百度地图: var projection = ol.proj.get("EPSG:385 ...
angular使用openlayers6以及加载百度地图
angular中使用openlayers本来是没什么难度的,但是如果要加载百度地图还是有些问题的,在openlayers3中坐标是从原点右上递增,而openlayers6中是右下递增,这就导致使用百度 ...
FGMap学习之--加载百度地图
今天我们用FGMap来加载百度地图数据. 从目前国内的地图服务商提供的地图来看,地图瓦片切图规则只少分为三种.其中Google Map.Bing地图.MapABC.QQ地图是一类,而百度地图.搜狗地图 ...
（转） Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
【百度地图】——利用三级联动加载百度地图
[百度地图]--利用三级联动加载百度地图 HTML+CSS代码如下: <!DOCTYPE html> <html lang="en"><head> ...
leaflet、cesium加载百度地图，加载自定义样式百度地图
1 leaflet.cesium加载百度地图(官方预设样式) 预留,待补充 2 leaflet.cesium加载百度自定义样式地图样式编辑器新版地址:http://lbsyun.baidu.com/ ...
Leaflet加载百度地图
为了验证一下百度地图的影像.矢量.注记等瓦片数据是否是坐标统一的,写了一个简单的leaflet加载百度影像瓦片.矢量瓦片.注记瓦片的页面,叠加在一起,看了一下,果然坐标系是统一的. <!DOCT ...
openlayers加载百度地图作为底图坐标偏移的解决办法
openlayers加载天地图作为底图,在网上找了公开的服务资源,要做到百度地图与天地图之间切换,同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差,最初的代码是这样的: var proje ...

OpenLayers3加载百度地图

OpenLayers3加载百度地图相关推荐

最新文章

热门文章