注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请替换为自己的key
前言
随着
GIS应用的不断发展，Web地图也越来越丰富，除了像ESRI、超图、中地数码这样GIS厂商有各自的数据源格式，也有GIS资源，在国家层面还有天地图资源。如何加载各种
GIS数据源，是WebGIS开发要解决的一个关键问题。
本节主要介绍OpenLayers加载天地图
1. 天地图服务介绍
加载天地图服务需要注意两个问题，一个是服务类型，一个是图层坐标系。
天地图服务具有矢量、影像、注记等图层。在其服务参数中有所区分，其中vec表示矢量图层，img表示影像图层，cva表示矢量注记图层，cia则表示矢量注记图层。
对于地图坐标来说，在天地图中用参数_c表示经纬度投影，用参数_w表示球面墨卡托投影
//==============================================================================//
//============================天地图服务参数简单介绍==============================//
//================================vec：矢量图层==================================//
//================================img：影像图层==================================//
//================================cva：注记图层==================================//
//======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================//
//==============================================================================//
注：加载天地图需要申请天地图TOKEN，若没有TOKEN，请先去官网申请
2. 切片数据源
天地图服务可以作为且切片服务加载，在OpenLayers中Tile类是专门用于加载影像切片图层，需要创建且排列数据源，通过XYZ类来实现。
new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=替换为你自己的token",
crossOrigin: "anoymous",
wrapX:false
})
})3. 加载天地图
在创建好切片数据源和且排列图层后，可以有两种方式将天地图服务添加到OpenLayers地图上。
第一种方法是在创建地图对象的过程中，直接在Map对象属性layers上赋值，layers属性是一个数组类型，可以装载各个图层对象。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>OepnLayers加载天地图</title>
<meta charset="utf-8" />
<script src="./js/ol.js"></script>
<link rel="stylesheet" href="./css//ol.css">
<style>
* {
padding:0;
margin:0;
}
#map{
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
// 实例化地图对象
const map = new ol.Map({
target: "map", # 地图容器ID
loadTilesWhileInteracting: true,
layers: [
new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=替换为你自己的token",
crossOrigin: "anoymous",
wrapX:false
})
}),
new ol.layer.Tile({
title: "天地图注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=替换为你自己的token",
attibutions:"天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
],
view: new ol.View({
center: [0, 0],
// center: [11444274, 12707441],
zoom:3
})
})
</script>
第二种方式是通过 Map 对象方法 addLayers 加载，在创建完成地图对象和天地图切片图层后，使用addLayers 方法将切片图层添加到地图对象中。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>加载显示天地图</title>
<meta charset="utf-8" />
<script src="./js/ol.js"></script>
<link rel="stylesheet" href="./css//ol.css">
<style>
* {
padding:0;
margin:0;
}
#map{
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script>
const map = new ol.Map({
target: "map",
loadTilesWhileInteracting: true,
view: new ol.View({
center: [0, 0],
// center: [11444274, 12707441],
zoom:3
})
})
const tdtLayer = new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=替换为你自己的token",
crossOrigin: "anoymous",
wrapX:false
})
})
const tdtzjLayer = new ol.layer.Tile({
title: "天地图注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=替换为你自己的token",
attibutions:"天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
map.addLayer(tdtLayer)
map.addLayer(tdtzjLayer)
</script>