新建文件并初始化
- 删掉 mapboxgl.Map对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://api.mapbox.***/mapbox-gl-js/v3.1.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.***/mapbox-gl-js/v3.1.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div> <!-- 地图容器 -->
<script>
mapboxgl.a***essToken = "your token";
</script>
</body>
</html>
实现思路
- 先构造了一个空的style，这样map对象里就不含任何数据源和图层，也就是一张空白的地图。
- 然后定义了一个
addRasterTileLayer函数，用以构建栅格瓦片数据源和图层并添加到地图中。 - 最后再用天地图的瓦片url构造了一个背景图层和一个背景标注图层。
构造空style
- 声明mapboxgl.Map对象时，构造了一个空的style，这样map对象里就不含任何数据源和图层
const map = new mapboxgl.Map({
container: 'map',
style: {//为map构造一个空的style
"version": 8,
"sources": {},
"layers": [],
},
center: [116.405419, 39.923568],
projection: "globe", // 显示地球
zoom: 11
});
设置天地图地图瓦片url
- 填写天地图token
- 填写天地图地图服务url
//天地图的token
const tiandituToken = 'd12deb9576426df9aff82075b754790a';
/*
* 天地图提供了多种背景地图和标注供选择，
* 只要从http://lbs.tianditu.gov.***/server/MapService.html找到对应的url即可
* 这里使用了了矢量地图和注记
* */
//矢量底图
const vecwUrl = 'https://t0.tianditu.gov.***/vec_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&' +'TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=' + tiandituToken;
//矢量注记
const cvawUrl = 'https://t3.tianditu.gov.***/cva_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&' +'TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=' + tiandituToken;
声明addRasterTileLayer函数
- 向地图中添加一个栅格瓦片图层
/**
* 向地图中添加一个栅格瓦片图层
* @param map
* @param url 瓦片url
* @param sourceId 数据源id，保证唯一性即可
* @param layerId 图层id，保证唯一性即可
*/
function addRasterTileLayer(map, url, sourceId, layerId) { //添加栅格瓦片图层
map.addSource(sourceId, { //添加数据源
type: 'raster', //数据源类型
tiles: [url],//瓦片url
tileSize: 256
});
map.addLayer({
id: layerId,
type: 'raster', //图层类型
source: sourceId
});
}
加载地图
- map对象加载完成后触发
map.on('load', function () { //地图加载完成后触发
//选择加载矢量底图及其标注
addRasterTileLayer(map, vecwUrl, 'vecw', 'vecw') //添加矢量底图
addRasterTileLayer(map, cvawUrl, 'cvaw', 'cvaw') //添加矢量注记
})
效果
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://api.mapbox.***/mapbox-gl-js/v3.1.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.***/mapbox-gl-js/v3.1.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div> <!-- 地图容器 -->
<script>
mapboxgl.a***essToken = "token";
const map = new mapboxgl.Map({
container: 'map',
style: {//为map构造一个空的style
"version": 8,
"sources": {},
"layers": [],
},
center: [116.405419, 39.923568],
projection: "globe", // 显示地球
zoom: 11
});
//天地图的token
const tiandituToken = 'd12deb9576426df9aff82075b754790a';
/*
* 天地图提供了多种背景地图和标注供选择，
* 只要从http://lbs.tianditu.gov.***/server/MapService.html找到对应的url即可
* 这里使用了了矢量地图和注记
* */
//矢量底图
const vecwUrl = 'https://t0.tianditu.gov.***/vec_w/wmts?' +
'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&' +
'TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=' + tiandituToken;
//矢量注记
const cvawUrl = 'https://t3.tianditu.gov.***/cva_w/wmts?' +
'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&' +
'TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=' + tiandituToken;
/**
* 向地图中添加一个栅格瓦片图层
* @param map
* @param url 瓦片url
* @param sourceId 数据源id，保证唯一性即可
* @param layerId 图层id，保证唯一性即可
*/
function addRasterTileLayer(map, url, sourceId, layerId) { //添加栅格瓦片图层
map.addSource(sourceId, { //添加数据源
type: 'raster', //数据源类型
tiles: [url],//瓦片url
tileSize: 256
});
map.addLayer({
id: layerId,
type: 'raster', //图层类型
source: sourceId
});
}
map.on('load', function () { //map对象加载完成后触发
//选择加载矢量底图及其标注
addRasterTileLayer(map, vecwUrl, 'vecw', 'vecw') //添加矢量底图
addRasterTileLayer(map, cvawUrl, 'cvaw', 'cvaw') //添加矢量注记
})
</script>
</body>
</html>
B站：【Mapbox加载天地图】 https://www.bilibili.***/video/BV1VT421e7WD/?share_source=copy_web&vd_source=24206258d49211ba255fbcea1f9b4d1e
公众号： OctS
