这篇文章主要是使用openlayer加载各类地图,在这不会赘述其原理(因为我也不会),只是几个简单的实例。如果你想了解其原理,可以看这篇openlayer3 教程及介绍,写的真的不错,博主入门也是看的这篇文章。
加载百度地图
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({ //22293.877345016692
origin: [-147.3821707237512, 22380.929812282324],
resolutions: resolutions
});
/**
* 百度影像图
* */
var baidu_img_layer = new ol.layer.Tile({
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 "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=20180125";
}
}),
zIndex: 0,
});
//初始化地图
baseMap = new ol.Map({
// 设置地图控件比如:比例尺
controls: ol.control.defaults({
attribution: false,
rotate: false,
zoom: true
}),
// 设置地图图层 图层的顺序有各图层的zIndex决定,同一个zIndex的由layers中的排序决定
layers: [
baidu_img_layer
],
view: new ol.View({
projection: projection,
//extent: extent, 地图可拖动的范围
resolutions: resolutions,
center: [13524479.998674557, 3669507.64428644], //地图初始中心点
zoom: 1,
minZoom: 0,
maxZoom: 19
}),
target: 'map',//html中展示地图的div的id
loadTilesWhileAnimating: true //开启动画,设置是否显示
});
1.百度地图地址:
影像图:https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/starpic/
矢量图:https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/onlinelabel/
自定义颜色图:http://api1.map.bdimg.com/customimage/tile?&x="+x+"&y="+y+"&z="+z+"&udt="(udt后面是自己配置的属性,可以在浏览器中查看)
2. 加载天地图:
//wmts服务参数
var projection = ol.proj.get('EPSG:4326');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(18);
var matrixIds = new Array(18);
for(var z = 1; z <= 18; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
//天地图影像图,右下角地图切换
var temporal_image_layer = new ol.layer.Tile();
//天地图矢量底图 2
var tdt_road_layer = new ol.layer.Tile({
name: '矢量底图',
source: new ol.source.WMTS({
url: 'http://t1.tianditu.com/vec_c/wmts',
layer: 'vec',
matrixSet: 'c',
format: 'tiles',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
style: 'default'
}),
visible: true,
zIndex: 2
});
其中的地址可以去:http://service.tianditu.gov.cn下面找。其中的layer是各个图层服务中的
3.加载高德地图
其projection: 'EPSG:4326'
var gaodeMapLayer = 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}'
})
});
写的比较简单,没有详细介绍各个步骤的作用,但亲测可用。有什么问题可以联系我,我会尽可能的回答。
此博客仅供学习参考,数据所属归各地图提供者所属,如有需要请自行联系