Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）

107 阅读 0 评论 71 点赞

我是靠谱客的博主飘逸小伙，这篇文章主要介绍Vue项目使用天地图的方法（Vue引入天地图，创建地图实例），现在分享给大家，希望可以做个参考。

最近项目需要用到天地图，要引入到Vue项目中，鉴于官网没有相关的说明文档，在这里我记录一下我所使用的引入方法，可能不是很好，希望有更好的方法大佬能教一下我。

第一步，在Vue项目文件夹public下的index.html入口文件中加入天地图API JS文件。
引入天地图JavaScript API文件

复制代码

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

第二步，先创建一个Vue中初始化的天地图的JS文件，用于指向天地图类。
文件命名为 MapInit.js
写入初始化代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 初始化地图
export default {
  init() {
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (window.T) {
        console.log('地图脚本初始化成功...')
        resolve(window.T)
        reject('error')
      }
    })
  }
}

第三步，在单页文件中引入地图初始化封装好的文件

复制代码

1
2
import MapInit from '../../components/show/MapInit.js';

引入之后可在methods中的方法函数直接调用，封装方法函数代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 roadMap() {
      MapInit.init().then(
        T => {
          this.T = T;
          const imageURL = "http://t0.tianditu.gov.cn/img_c/wmts?tk=您的密钥";
          const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
          const config = { layers: [lay], name: 'TMAP_SATELLITE_MAP' };
          this.map = new T.Map('yzMap', config);
          const ctrl = new T.Control.MapType();
          this.map.addControl(ctrl);
          this.map.centerAndZoom(new T.LngLat(116.401003, 39.903117), 12);
        }).catch()
    }

记得在视图层写入div盒子哦，<div id="yzMap"></div>

复制代码

1
2
3
4
5
6
 #yzMap {
  width: 100vw;
  height: 100%;
  position: absolute;
}

还可以使用这样引入，定义T

复制代码

1
2
const T = require("T");

当然你也可以直接在每次新建实例T的时候在前面加上window，让new 指向的是window层的天地图，这样做就不需要封装了。代码如下：

复制代码

1
2
3
4
5
  this.map = new window.T.Map('mapDiv', {
                projection: 'EPSG:4326'
            });
            this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);