Vue中天地图的基本引入

注：如不需要左下角 天地图 文字，找到对应的样式，隐藏即可

index.html

<script type="text/javascript"
            src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
    <script type="text/javascript"
            src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.js"></script>

<template>
  <div style="width: 100%;height: 100%;">
    <div
      id="centerMap"
      class="centerMap"
      style="width: 100%;height: 100%"
    ></div>
    <!--    <projectBasicInfoDialog ref="projectBasicInfoDialog"/>-->
  </div>
</template>

 // 初始化天地图2
    initTdtMap() {
      this.zoom = 4;
      var line;
      var points = [];
      var lay;
      var lay2;
      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=你的密钥";

      var 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=你的密钥";

      var lay3;
      var imageURL3 =
        "http://t0.tianditu.gov.cn/ibo_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
        "&tk=你的密钥";

      //创建自定义图层对象
      lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
      lay2 = new T.TileLayer(imageURLT, { minZoom: 1, maxZoom: 18 });
      lay3 = new T.TileLayer(imageURL3, { minZoom: 1, maxZoom: 18 });

      var config = { layers: [lay, lay2, lay3] };

      //初始化地图对象
      map = new T.Map("centerMap", config);
      //设置显示地图的中心点和级别
      map.centerAndZoom(
        new T.LngLat(109.67291896206848, 32.855915983379035),
        5
      );
      // var bounds = "116.27648,39.84042,116.4605,39.9721".split(",");
      // var bounds = "74.21,3.05,137.25,53.88".split(",");
      // map.setMaxBounds(new T.LngLatBounds(new T.LngLat(this.bounds[0], this.bounds[1]), new T.LngLat(this.bounds[2], this.bounds[3])));
      //允许鼠标滚轮缩放地图
      map.enableScrollWheelZoom();
      //创建缩放平移控件对象
      var control = new T.Control.Zoom();
      //添加缩放平移控件
      map.addControl(control);
      map.enableInertia();
      map.enableDoubleClickZoom();
      //创建比例尺控件对象
      var scale = new T.Control.Scale();
      //添加比例尺控件
      map.addControl(scale);
    }

mounted:{
    this.initTdtMap();
}