castgroup_bigscreen/src/components/tmap.vue

<!--
 * @LastEditors: gcz
-->
<!--
 * @LastEditors: gcz
-->
<template>
  <div class="map-wrap">
    <div id="map"></div>
    <div id="mask"></div>
    <div class="yun-wrap">
      <img class="yun yun1" src="../assets/img/云1.png" alt="" />
    </div>
    <div class="yun-wrap">
      <img class="yun yun2" src="../assets/img/云2.png" alt="" />
    </div>
    <div class="yun-wrap">
      <img class="yun yun3" src="../assets/img/云3.png" alt="" />
    </div>
    
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      lngLat:[116.40769,39.89945],
      zoom:9
    };
  },
  created() {},
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const init = new Promise((resolve, reject) => {
        if (window.T) {
          // console.log("地图初始化成功");
          resolve(window.T);
          reject("error");
        } else {
          console.log("地图初始化失败");
        }
      });
      init
        .then((T) => {
          // 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=7e5149a4e4bc98ccf53b9941d5f8ea62";
          // //创建自定义图层对象
          // let lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
          // let config = { layers: [lay] };
          // this.map = new T.Map('map',config);

          this.map = new T.Map("map");
          //清理地图上的覆盖物
          // this.map.clearOverLays();
          //   console.log('options',this.options);
          // console.log('optionsData',this.optionsData);
          this.map.centerAndZoom(
            new T.LngLat(this.lngLat[0], this.lngLat[1]),
            this.zoom
          );
          //    this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);
          this.map.setMapType(window.TMAP_HYBRID_MAP);
          // this.addWmsLayer('demo_city,demo_road,demo_anno','http://gisserver.tianditu.com/tiandituService/wms')
          // this.map.setStyle('indigo')//设置地图样式
          // 允许鼠标滑轮滚动缩放地图大小
          // this.map.enableScrollWheelZoom()
          //获取行政区信息
          this.getMap();
        })
        .catch((err) => {
          console.log("map init err", err);
        });
    },
    getMap() {
      let that = this;
      //创建对象
      let administrative = new T.AdministrativeDivision(); //创建一个获取行政区划的实例
      let config = {
        needSubInfo: false, //是否需要下一级信息
        needAll: false, //是否需要所有子节点。
        needPolygon: true, //是否需要行政区划范围。
        needPre: false, //是否需要上一级所有信息。
        searchType: 1, //查询类型。0表示根据code查询，1表示根据名称查询。
        searchWord: '安顺' //查询行政区划的名称。
      };
      administrative.search(config, searchResult); //方法：根据检索词发起检索，searchResult：回调参数
      function searchResult(result) {
        // console.log('getMap',result);
        if (result.getStatus() == 100) {
          let data = result.getData();
          // console.log('AdministrativeDivision data',data);
          data[0].points = [{
"region":"116.236 40.117,116.234 40.107,116.236 40.106,116.238 40.105,116.238 40.104,116.239 40.104,116.239 40.104,116.24 40.104,116.25 40.103,116.25 40.103,116.251 40.103,116.252 40.104,116.253 40.104,116.253 40.104,116.253 40.105,116.253 40.105,116.253 40.106"
}];
          that.showMsg(data);
        } else {
          result.getMsg();
        }
      }
      //具体内容详见AdministrativeDivisionResult类。
    },
    showMsg(data) {
      for (let i = 0; i < data.length; i++) {
        //解释上级行政区划
        if (data[i].parents) {
          let upLevel = "";
          if (data[i].parents.country) {
            upLevel += data[i].parents.country.name;
          }
          if (data[i].parents.province) {
            upLevel += data[i].parents.province.name;
          }
        }

        if (data[i].points) {
          // console.log('data[i].points',data[i].points);
          //绘制行政区划
          this.polygon(data[i].points);
        }

        //解释下级行政区划
        if (data[i].child) {
          this.showMsg(data[i].child);
          console.log(data[i].child.points);
          if (data[i].child.points) {
            //绘制行政区划
            this.polygon(data[i].child.points);
          }
        }
      }
    },
    polygon(points) {
      let that = this;
      let pointsArr = [];
      for (let i = 0; i < points.length; i++) {
        let regionLngLats = [];
        let regionArr = points[i].region.split(",");
        for (let m = 0; m < regionArr.length; m++) {
          let lnglatArr = regionArr[m].split(" ");
          let lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
          regionLngLats.push(lnglat);
          pointsArr.push(lnglat);
        }
        //创建面对象,样式
        this.polygonData = new T.Polygon(regionLngLats, {
          color: "#fd737a",
          weight: 3,
          opacity: 1,
          fillColor: "#FFFFFF", //填充颜色。
          fillOpacity: 0.3 //填充透明度
        });
        //向地图上添加行政区划面
        that.map.addOverLay(this.polygonData);
      }
      // this.map.centerAndZoom(new T.LngLat('116.236','40.117'), 12);
      //显示最佳比例尺
      that.map.setViewport(pointsArr);
      this.addPolygonClick()
      // alert(
      //   "当前地图中心点：" +
      //     that.map.getCenter().getLng() +
      //     "," +
      //     that.map.getCenter().getLat()
      // );
    },
    removePolygonClick() {
        //移除面的点击事件
        this.polygonData.removeEventListener("click", this.PolygonClick);
    },
    addPolygonClick() {
        //移除面的点击事件，防止多次注册
        this.removePolygonClick();
        //注册面的点击事件
        this.polygonData.addEventListener("click", this.PolygonClick);
    },
    PolygonClick(e) {
      console.log('PolygonClick',e.target);
        alert("您点击了面中的："+e.lnglat.lng+','+e.lnglat.lat);
    }
  },
};
</script>

<style lang='scss' scoped>
#map{
  width: 100%;
  height: 100vh;
  /deep/ .tdt-pane{
    z-index: auto;
  }
}
#mask{
  width: 100%;
  height: 100vh;
  box-shadow:inset 0px 0px 10vw 8vw rgba(38,80,179,0.54);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
@keyframes imageAnimation_32630606 {
  0% {
    // opacity: 0;
    transform: none;
  }
  34% {
    // opacity: 1;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(34vw,0px, 0px);
  }
  67% {
      // opacity: 1;
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(67vw,0px, 0px);
  }
  100% {
      // opacity: 0;
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(160vw,0px, 0px);
  }
}

.yun-wrap{
  position: fixed;
  left: 0;
  top: 350px;
  width: 100vw;
  pointer-events: none;
}
.yun{
  position: fixed;
  left: -500px;
  animation-name: imageAnimation_32630606;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 110s;
  animation-delay: 0s;
  -webkit-user-drag: none;
  filter: none;
  pointer-events: none;
}
.yun2{
  bottom: 20px;
  animation-duration: 90s;
  animation-delay: 10s;
}
.yun3{
  top: 100px;
  animation-duration: 120s;
  animation-delay: 15s;
}
</style>