天地图（卫星地图）可指定某一区域，进行图片覆盖物，另做多点覆盖物定位，点击触发弹框事件

                 <div class="bg" v-if="panelShow">   弹框，切记隐藏显示div  v-if要比v-show好控制，特别是你弹框内想放echarts的时候，就会发现v-show会不能让echarts自适应div大小。

                <div class="point">

                  <div class="pop" v-if="panelShow">

                    <span class="closee" @click="close()">

                      <img src="../../assets/close.png" alt />

                    </span>

                    <video id="myVideo" class="video-js" controls>

                      <source :src="shipin" />

                    </video>

                  </div>

                </div>

              </div>

 

 onLoad() {
      let map;
      let zoom = 14;
      let lay;
      let onlyMapLay;
      //  定义卫星地图样式
      let 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=e29741f83fa69334779d3d1dfd33be16";
      //创建自定义图层对象
      lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
      let config = { layers: [lay] };
      const _this = this;
      //初始化地图对象
      map = new T.Map("mapDiv", config);
      //定义点的位置
      let json_data = [
        [112.5724, 29.8802, require("@/assets/dw1.png"), "1"],
        [112.5884, 29.8792, require("@/assets/dw2.png"), "2"],
        [112.5984, 29.8742, require("@/assets/dw3.png"), "3"],
        [112.5744, 29.8735, require("@/assets/dw4.png"), "4"],
        [112.5854, 29.8702, require("@/assets/dw5.png"), "5"],
        [112.5954, 29.8669, require("@/assets/dw6.png"), "6"]
      ];
      let pointArray = new Array();
      for (let i = 0; i < json_data.length; i++) {
        let icon = new T.Icon({
          iconUrl: json_data[i][2],
          iconSize: new T.Point(19, 27),
          iconAnchor: new T.Point(10, 25)
        });
        let marker = new T.Marker(
          new T.LngLat(json_data[i][0], json_data[i][1]),
          { icon: icon }
        ); // 创建点
        marker.dataId = json_data[i][3];
        map.addOverLay(marker); //增加点
        pointArray[i] = new T.LngLat(json_data[i][0], json_data[i][1]);
        marker.addEventListener("click", attribute);
      }
      function attribute(e) {  // 获取点的标识，进行事件处理
        console.log(e.target.dataId);
        if (e.target.dataId == 1) {
          _this.$refs.modelDiv.visible = true;
        } else if (e.target.dataId == 2) {
          _this.$refs.modelDivs.visible = true;
        }
      }
      //让所有点在视野范围内
      map.setViewport(pointArray);
      //设置显示地图的中心点和级别
      map.centerAndZoom(new T.LngLat(112.5854, 29.8742), zoom);
      let bd = new T.LngLatBounds(
        new T.LngLat(112.5654, 29.8848),
        new T.LngLat(112.6034, 29.8642)
      );
      let img = new T.ImageOverlay(require("@/assets/ma.png"), bd, {
        opacity: 1,
        alt: ""
      });
      map.addOverLay(img);
      //让所有点在视野范围内
      map.setViewport(pointArray);
      //允许鼠标滚轮缩放地图
      map.enableScrollWheelZoom();
    }