天地图使用（一）：

天地图项目集成分成三部分：

一、天地图的集成

二、天地图打点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