ol.css和ol.js下载链接: ol.css ol.js
天地图和谷歌地图都是切片地图,对于openlayer,对应图层ol.layer.Tile。数据源source可以是ol.source.WMTS 和 ol.source.XYZ。一般来讲,使用XYZ比较简便,WMTS比较繁琐。下面以谷歌-XYX和天地图-WMTS为例:
1. 谷歌地图-XYZ
XYZ方式只需根据规定组装简单的url即可
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!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0',
})
});
2. 天地图-WMTS
天地图使用需要申请密钥
http://lbs.tianditu.gov.cn/authorization/authorization.html#example
各类天地图服务
WMTS方式遵从标准的OGC规范,需要计算、指定分辨率、显示级别等,根据WMTS服务加载的标准规范加载天地图
var projection = ol.proj.get("EPSG:4326"); //坐标系
var projectionExtent = projection.getExtent(); //范围
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = [];
for (var z = 2; z < 19; ++z) {//计算比例尺
resolutions[z] = size / Math.pow(2, z);
}
//天地图
var tiandiMap = new ol.layer.Tile({
source: new ol.source.WMTS({
url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=1d4cad2d766f32584af50ba5942d7637",
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
})
})
})
//天地图标注
var tiandiMapapi = new ol.layer.Tile({
source: new ol.source.WMTS({
url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=1d4cad2d766f32584af50ba5942d7637",
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
})
})
})
使用openlayer需要引入ol.css和ol.js
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="css/ol.css" type="text/css">
<script type="text/javascript" src="js/ol.js"></script>
<style>
.ol-overlaycontainer-stopevent {
display: none;
}
</style>
</head>
<body>
<div>
<input type="radio" name="radio" onclick="mapChange('天地图')" value="天地图" checked> 天地图
<input type="radio" name="radio" onclick="mapChange('谷歌地图')" value="谷歌地图" > 谷歌地图
</div>
<div id="map" style="width: 100%"></div>
<script>
var mapChange;
var projection = ol.proj.get("EPSG:4326"); //坐标系
var projectionExtent = projection.getExtent(); //范围
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = [];
for (var z = 2; z < 19; ++z) {//计算比例尺
resolutions[z] = size / Math.pow(2, z);
}
//谷歌地图
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!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
})
});
//天地图
var tiandiMap = new ol.layer.Tile({//矢量地图
source: new ol.source.WMTS({
url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=1d4cad2d766f32584af50ba5942d7637",//链接需要添加自己申请的密钥
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
})
})
})
//天地图标注
var tiandiMapapi = new ol.layer.Tile({//矢量标注
source: new ol.source.WMTS({
url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=1d4cad2d766f32584af50ba5942d7637",//链接需要添加自己申请的密钥
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
})
})
})
var map = new ol.Map({
target: "map",
view: new ol.View({
center: [110.316161,20.023143],//中心点
projection: projection,
zoom: 8,
maxZoom: 18,
minZoom: 1
})
});
map.addLayer(googleMapLayer)
map.addLayer(tiandiMap)
map.addLayer(tiandiMapapi)
//地图切换方法
mapChange = function(value){
if (value == '谷歌地图') {
googleMapLayer.setVisible(true)
tiandiMap.setVisible(false)
tiandiMapapi.setVisible(false)
} else {
googleMapLayer.setVisible(false)
tiandiMap.setVisible(true)
tiandiMapapi.setVisible(true)
}
}
</script>
</body>
</html>