vue 天地图定位坐标，添加多个图层

vue-cli3 vue2

<template>
  <div id="app">
    <div id="map">div>
    
    <button v-on:click="maxZooms">放大button>
    <button v-on:click="minZooms">缩小button>
    <button
      style="
        position: absolute;
        z-index: 500;
        border: 1px solid;
        right: 7%;
        bottom: 10%;
        color: red;
        background: green;
        padding: 10px;
      "
      @click="positionBtn"
    >
      定位坐标
    button>
  div>
template>
<script>
export default {
  data() {
    return {
      cityName: "" //暂存城市名称
    };
  },
  mounted() {
    let that = this;
    // 挂载完成后渲染地图
    this.$nextTick(function() {
      that.onLoad();
    });
  },
  methods: {
    onLoad() {
      /* 同一页面创建多个图层时必须为同一投影 */
      /*
      var map = new T.Map('map')
      map.centerAndZoom(new T.LngLat(116.40769,39.89945),10)

      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=0fe9dae1a7861a6115697df9c0f482fd";
      let lay = new T.TileLayer(imageURL,{
        minZoom:2,
        maxZoom:18
      })
      let config = {layers:[lay]}
      let map2 = new T.Map("map2",config)
      map2.centerAndZoom(new T.LngLat(116.40769,39.88945),10)
      */

      /* 创建单个图层*/
      /* 
      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=0fe9dae1a7861a6115697df9c0f482fd";
      // 创建自定义图层对象
      var lay = new T.TileLayer(imageURL,{
        minZoom:2,
        maxZoom:18
      })
      var config = {layers:[lay]}
      // 初始化地图对象
      var map = new T.Map("map",config)
      map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 10);
      // 允许鼠标滑轮滚动缩放地图大小
      map.enableScrollWheelZoom()
      */

      // 基本设置
      let that = this;
      that.map = new window.T.Map("map", {
        // 地图的投影方式 EPSG:900913(墨卡托投影)，EPSG:4326(大地平面投影)
        projection: "EPSG:4326",
        // min 0 max 18
        minZoom: 8,
        maxZoom: 18
      });
      that.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 10);

      // 添加控件
      var ctrl = new T.Control.MapType([
        {
          title: "地图", //地图控件上所要显示的图层名称
          icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小80x80）
          layer: TMAP_NORMAL_MAP //地图类型对象，即MapType。
        },
        {
          title: "卫星混合",
          icon:
            "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
          layer: TMAP_HYBRID_MAP
        }
      ]);
      that.map.addControl(ctrl);
    },
    maxZooms() {
      console.log("map");
      let that = this;
      console.log(that.map.getZoom());
      that.map.zoomIn()
    },
    minZooms(){
      console.log("map2");
      let that = this
      that.map.zoomOut()
    },
    positionBtn() {
      let that = this;
      // this.map.clearOverLays();   //清理地图上的覆盖物
      let lc = new T.LocalCity(); //创建一个获取本地城市位置的实例
      lc.location(function(e) {
        //利用ip进行定位
        alert(e.cityName);
        let marker = new T.Marker(e.lnglat); //e.lnglat，标注点的地理坐标
        that.map.addOverLay(marker); //addOverLay方法，将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次。
        that.getMap(); //创建地图对象

        marker.addEventListener("dragend", overlay_style); //添加事件监听函数。
        marker.enableDragging(); //开启标注拖拽功能

        function overlay_style(e) {
          let p = e.target;
          alert(
            "该地区经纬度是：" + p.getLngLat().lng + "," + p.getLngLat().lat
          );
        }
      });
    },

    getMap() {
      let that = this;
      //创建对象
      let administrative = new T.AdministrativeDivision(); //创建一个获取行政区划的实例
      let config = {
        needSubInfo: false, //是否需要下一级信息
        needAll: false, //是否需要所有子节点。
        needPolygon: true, //是否需要行政区划范围。
        needPre: true, //是否需要上一级所有信息。
        searchType: 1, //查询类型。0表示根据code查询，1表示根据名称查询。
        searchWord: this.cityName //查询行政区划的名称。
      };
      administrative.search(config, searchResult); //方法：根据检索词发起检索，searchResult：回调参数
      function searchResult(result) {
        if (result.getStatus() == 100) {
          let data = result.getData();
          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) {
          //绘制行政区划
          this.polygon(data[i].points);
        }

        //解释下级行政区划
        if (data[i].child) {
          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);
        }
        //创建面对象,样式
        let polygon = new T.Polygon(regionLngLats, {
          color: "#fd737a",
          weight: 3,
          opacity: 1,
          fillColor: "#FFFFFF", //填充颜色。
          fillOpacity: 0.3 //填充透明度
        });
        //向地图上添加行政区划面
        that.map.addOverLay(polygon);
      }
      //显示最佳比例尺
      that.map.setViewport(pointsArr);
      alert(
        "当前地图中心点：" +
          that.map.getCenter().getLng() +
          "," +
          that.map.getCenter().getLat()
      );
    }
  }
};
script>


<style lang="less">
*,
body {
  padding: 0;
  margin: 0;
}
#app {
  width: 100%;
  height: 100%;
  background-color: #e5e5e5;
  position: relative;
  #map {
    width: 100%;
    height: 400px;
    background-color: antiquewhite;
  }
  #map2 {
    width: 100%;
    height: 200px;
  }
}
style>