天地图接入vue(包括天地图的注册，申请Key和地图渲染)

项目需求

之前写过几篇国外地图mapbox的博客，发现mapbox存在一些问题，甲方爸爸表示不满意，所以本人不得不紧急将maobox替换成天地图，现在介绍一下天地图如何接入vue中

前期准备天地图官网

首先去天地图官网注册账号，申请成为开发者，天地图目前支持三种开发者身份，个人，企业，政府机构；一般情况下申请成为企业开发者就可以满足项目需求了,当前申请企业开发者比较费时（3-5天），如果项目比较急，建议先申请个人

成功申请成为开发者过后，点击控制台，然后点击左侧的应用管理，然后创建新应用，选择项目名称和行业类型，生成新的key,到这步就满足了前期的需要了

实际开发

我介绍的是我自己在参考了几篇博客后得出的方法，如果大家有其他更好的方法，欢迎指正！！！

在自己的vue项目下找到public目录，进入index.html,将以下代码插入，这段就和我们平时使用原生js开发一样，直接引入外部js,当然这里面需要你携带你申请的密钥，就是前期准备中申请的Key

  <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥" type="text/javascript"></script>

创建一个组件，首先定义一个id为map的div容器，记住要用id，然后在初始化组件的时候请求实例化地图，里面需要用到你申请到的key，具体的大家可以参考我的代码

<template>
  <div style="width: 100%">
    <div id="map"></div>
  </div>
</template>
 
<script type="text/ecmascript-6">
let T;
export default {
  name: "map",
  data() {
    return {
    	map:'';
	};
  },
  mounted() {
    var that = this;
    T = window.T;
    var 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 imageURL2 =
      "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=你的密钥";//路名标记层
    var lay = new T.TileLayer(imageURL, { minZoom: 0, maxZoom: 16 });
    var lay2 = new T.TileLayer(imageURL2, { minZoom: 0, maxZoom: 16 });
    var config = { layers: [lay, lay2] };
    that.map = new T.Map("map", config); // 地图实例
    that.map.centerAndZoom(
      new T.LngLat(81.93406310742923, 43.89852343165151),
      11
    );//设置中心点和缩放比例
    that.map.disableDoubleClickZoom(); //允许鼠标双击放大地图
  },
};
</script>

<style>
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: 4rem;
  width: 48%;
  left: 26%;
  height: 94%;
}
</style>

结果展示

相比于mapbox，天地图要稍微模糊一些，但它的优点在于它的准确性，它的地名都是严格标记的，地名精确到村庄，这对于很多偏僻的地方制作地图开发是非常友好的，同时它在中国的精度不会比mapbox差

如果上述内容存在问题，欢迎大家批评指正！！！