天地图项目集成分成三部分：
一、天地图的集成
二、天地图打点marker
三、聚合打点与聚合点点击
天地图集成：
1.天地图官网获取key
2. index.html 中引入 天地图（使用 vue-cli创建项目的 index文件在public文件夹下）
引入方式有2种（强烈推荐第2种）：
2.1. 引入在线地图 地图
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>
2.2 将天地图下载到本地 直接本地引入 这样能大大加快渲染的速度
获取js 方法 （http://api.tianditu.gov.cn/api?v=4.0 将数据复制到js文件里 记得 window.TMAP_AUTHKEY="null" 修改为你的密钥）
3.创建地图
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
zoom: 15
},
mounted() { this.loadMap(); },
methods: {
// loadMap 就把地图加载出来了 很简单~~~
loadMap() {
const imageURL =
"http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥";
const imageURLT =
"http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥";
const lay = new T.TileLayer(imageURL, { minZoom: 6, maxZoom: 18 });
const lay2 = new T.TileLayer(imageURLT, { minZoom: 6, maxZoom: 18 });
const config = { layers: [lay, lay2] };
this.map = new T.Map("map", config);
//中心点根据实际需要进行修改
this.map.centerAndZoom(new T.LngLat(121.0553374, 29.9768162), this.zoom);
},
}
</script>
下一篇介绍点位聚合、 边界绘制 希望对大家有帮助！
下一篇https://www.jianshu.com/p/e3ae3d294809?v=1670296746921
