👨⚕️ 主页： gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏：mapbox 从入门到精通
文章目录
- 一、🍀前言
- 1.1 ☘️mapboxgl.Map 地图对象
- 1.1 ☘️mapboxgl.Map style属性
- 二、🍀加载天地图矢量底图
- 1. ☘️实现思路
- 2. ☘️代码样例
一、🍀前言
本文详细介绍如何基于mapbox-gl v3.8.0版本中加载天地图矢量底图，亲测可用。希望能帮助到您。一起学习，加油！加油！
1.1 ☘️mapboxgl.Map 地图对象
HREE.PlaneGeometry 用于生成平面几何体的类。
构造函数：
new Map class(options: Object)
本例使用属性：
1.1 ☘️mapboxgl.Map style属性
本例使用属性：
- version：版本号，当前固定值为8。
- sources：数据源集合（必填，用于包含一系列数据源
source，这些数据源提供了在地图上显示的数据）。值为{}对象。{}中的属性名是数据源的名称。
每个数据源 source 有的属性：
type：数据源类型
tiles：数据源地址
tileSize：数据源切片大小 - layers：图层集合（必填，包含了一系列图层 layer，这些图层指定了如何渲染数据源提供的数据）
每个layer的属性（当前示例用到的）：
id：图层id
type：图层类型
source：数据源名称
二、🍀加载天地图矢量底图
1. ☘️实现思路
- 1、创建html文件，引入mapbox-gl v3.8.0的样式和js库文件。
- 2、添加’id=map’的div要素，作为mapboxgl.Map的地图容器。
- 3、在<script>标签内，实现加载天地图矢量底图的方法。
具体方法：设置mapboxgl.baseApiUrl为null，防止官方token校验，导致地图无法加载。创建mapboxgl.Map地图对象map，构造函数中，传入container的值为‘map’作为渲染的容器（此处为2步骤div标签的id）。zoom设置为12，表示初始化地图缩放级别。minZoom设置为0，表示最小缩放级别。center为北京经纬度坐标[116.4, 39.9]，表示初始化坐标位置。style设置为天地图数据源，并使用该数据源加载矢量底图以及对象底图注记。具体代码参考代码样例。
2. ☘️代码样例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>加载天地图矢量底图</title><script src="lib/jquery-3.4.1.js"></script><link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
</head>
<style>html, body {height: 100%;margin: 0px;}#map {width: 100%;height: 100%;}
</style>
<body>
<div id="map">
</div>
</body>
<script type="text/javascript">mapboxgl.baseApiUrl = nulllet tdtToken = '天地图官网注册申请'let map = new mapboxgl.Map({container: 'map',zoom: 12,minZoom: 0,center: [116.4, 39.9],style: {version: 8,sources: {tdt_vec_source: {'type': 'raster','tiles': ['https://t0.tianditu.gov.cn/vec_w/wmts?tk=' + tdtToken + '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'],'tileSize': 256},tdt_vecbz_source: {'type': 'raster','tiles': ['https://t0.tianditu.gov.cn/cva_w/wmts?tk=' + tdtToken + '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'],'tileSize': 256}},layers: [{'id': 'tdt_vec_source','type': 'raster','source': 'tdt_vec_source'},{'id': 'tdt_vecbz_source','type': 'raster','source': 'tdt_vecbz_source'}]}})map.on('load', () => {})
</script></html>
效果如下：
