天地图api总结

天地图案例

<template>
  <div id="map" class="tdmap">
    <div class="button_click">
      <el-button @click="mark" type="primary" size="mini">添加点位</el-button>
      <el-button @click="polyg" type="primary" size="mini">绘制区域</el-button>
      <el-button @click="polyl" type="primary" size="mini">绘制路线</el-button>
      <el-button @click="rect" type="primary" size="mini">绘制矩形</el-button>
      <el-button @click="circ" type="primary" size="mini">绘制圆</el-button>
      <el-button @click="clear" type="primary" size="mini"
        >清除默认添加的覆盖物</el-button
      >
      <el-button @click="clearClick" type="primary" size="mini"
        >清除手工添加的覆盖物</el-button
      >
      <el-input
        v-model="input"
        placeholder="请输入内容"
        style="margin-left: 20px"
      ></el-input>
      <el-button @click="search" type="primary" size="mini">搜索</el-button>
    </div>
  </div>
</template>
 
<script>
const T = window.T;
export default {
  data() {
    return {
      map: "",
      mockList: [
        "118.6114,37.24864",
        "118.61775,37.24885",
        "118.63286,37.2496",
        "118.64865,37.25144",
      ],
      area: [
        ["118.56359,37.26715", "118.55836,37.26012", "118.56892,37.26005"],
        [
          "118.55793,37.25704",
          "118.5569,37.24816",
          "118.56806,37.24816",
          "118.56823,37.2567",
        ],
        [
          "118.56214,37.24543",
          "118.56085,37.24147",
          "118.5563,37.24119",
          "118.56068,37.24017",
          "118.55759,37.23764",
          "118.56179,37.23955",
          "118.56368,37.23757",
          "118.56317,37.2401",
          "118.56711,37.23969",
          "118.56325,37.24126",
        ],
      ],
      line: [
        [
          "118.56668,37.26729",
          "118.58059,37.26722",
          "118.569,37.24113",
          "118.58557,37.24277",
          "118.58411,37.22992",
          "118.58059,37.22131",
        ],
        [
          "118.58497,37.25745",
          "118.58522,37.25042",
          "118.5884,37.25049",
          "118.59303,37.25076",
          "118.59364,37.24618",
        ],
        [
          "118.59767,37.2444",
          "118.58737,37.22923",
          "118.59904,37.22575",
          "118.59982,37.22787",
        ],
      ],
      recta: [
        ["118.63767,37.23265", "118.62308,37.22288"],
        ["118.67955,37.23942", "118.66101,37.2278"],
      ],
      circleList: [
        ["118.69123", "37.26271", "1117.0034000701808"],
        ["118.55905", "37.2183", "600.6030888877458"],
        ["118.69629", "37.2265", "1053.7729265767698"],
      ],
      icon: "",
      markerInfoWin: "",
      submarker: "",
      // marker:'',
      markers: [],
      // polygon:'',
      polygondraw: "",
      polygons: [],
      markspot: "",
      labels: [],
      marks: [],
      input: "",
      geocoder: "",
      pdefinedOverlays: [],
      polygs: [],
      polylinedraw: "",
      polyls: [],
      div: "",
      // polyline:'',
      polylines: [],
      // rectangle:'',
      rectang: "",
      rectangles: [],
      rectangs: [],
      // cricle:'',
      cirel: "",
      cricles: [],
      cirels: [],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    //地图初始化
    init() {
      //添加图层
      const 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=f6a256d612b541a0520a1cd3bbbec82f"; //卫星图影像
      const 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=f6a256d612b541a0520a1cd3bbbec82f"; //卫星图标记
      const lay = new T.TileLayer(imageURL, { minZoom: 6, maxZoom: 18 }); //创建图层对象
      const lay2 = new T.TileLayer(imageURLT, { minZoom: 6, maxZoom: 18 }); //创建图层对象
      var config = { layers: [lay, lay2] };
      this.map = new T.Map("map"); //创建地图对象
      this.map.centerAndZoom(new T.LngLat(118.63372, 37.24352), 14); //初始化地图
      this.addCovering();
      this.addToolCovering();
    },
    //初始化在地图上添加覆盖物
    addCovering() {
      //创建marker图标样式
      this.icon = new T.Icon({
        iconUrl: "images/position_icon.png",
        iconSize: new T.Point(36, 36),
        iconAnchor: new T.Point(15, 30),
      });
      // 创建信息窗口对象
      this.markerInfoWin = new T.InfoWindow("", {
        offset: new T.Point(2, -30),
      });
      // this.addMarker(); //添加marker标注
      this.addPolygon(); //添加多边形
      // this.addPolyline(); //添加线条
      // this.addRectangle(); //添加矩形
      // this.addCircle(); //添加圆形
    },
    //创建工具类对象
    addToolCovering() {
      //标注点对象
      this.markspot = new T.MarkTool(this.map, {
        follow: true,
        icon: this.icon,
      });
      this.markspot.addEventListener("mouseup", this.onMorkPolygon);
      //多边形对象
      this.polygondraw = new T.PolygonTool(this.map, {
        color: "#F59200",
        width: 10,
        opacity: 1,
        fillColor: "#F59200",
        fillOpacity: 0.3,
        showLabel: false,
      });
      this.polygondraw.addEventListener("draw", this.onDrawPolygon);
      //线对象
      this.polylinedraw = new T.PolylineTool(this.map, {
        color: "red",
        width: 10,
        opacity: 1,
        showLabel: false,
      });
      this.polylinedraw.addEventListener("draw", this.onDrawPolyline);
      //矩形对象
      this.rectang = new T.RectangleTool(this.map, {
        color: "#01A1ED",
        width: 10,
        opacity: 1,
        fillColor: "#01A1ED",
        fillOpacity: 0.3,
      });
      this.rectang.addEventListener("draw", this.onDrawRectangle);
      //圆形对象
      this.cirel = new T.CircleTool(this.map, {
        color: "#b800ff",
        width: 10,
        opacity: 1,
        fillColor: "#b800ff",
        fillOpacity: 0.3,
      });
      this.cirel.addEventListener("drawend", this.onDrawCirele);
    },
    //marker标注的位置
    addMarker() {
      //添加多个marker标注
      this.mockList.forEach((item, index) => {
        let point = item.split(",");
        //创建label对象，morker的文字标注
        let latlng = new T.LngLat(point[0], point[1]);
        let label = new T.Label({
          text: `天地图marker${index + 1}的文字标注`,
          position: latlng,
          offset: new T.Point(0, -10),
        });
        //设置label对象的css样式
        label.setFontColor("#fff");
        label.setBackgroundColor("transparent");
        label.setBorderColor("transparent");
        this.map.addOverLay(label); //向地图对象添加marker文字标注
        this.labels.push(label); //变量用于清除覆盖对象

        let html = "<div>天地图信息窗</div>"; //marker信息窗显示的内容
        //创建marker对象
        let marker = new T.Marker(new T.LngLat(point[0], point[1]), {
          icon: this.icon,
        });
        marker.content = html;
        this.map.addOverLay(marker); //向地图对象添加marker
        marker.addEventListener("click", this.infoClick); //向marker对象添加事件监听，鼠标点击
        this.markers.push(marker); //变量用于清除覆盖对象

        //自定义覆盖物，对某一位置特殊处理，例如marker标注位置需要特殊css动画
        let definedOverlay = T.Overlay.extend({
          initialize: function (lnglat, options) {
            this.lnglat = lnglat;
            this.setOptions(options);
          },
          onAdd: function (map) {
            this.map = map;
            var div = (this.div = document.createElement("div"));
            div.className = "div_class";
            div.style.position = "absolute";
            div.style.MozUserSelect = "none";
            div.onmouseover = function () {
              this.style.backgroundColor = "#6BADCA";
              this.style.borderColor = "#0000ff";
            };
            div.onmouseout = function () {
              this.style.backgroundColor = "#EE5D5B";
              this.style.borderColor = "#BC3B3A";
            };
            map.getPanes().overlayPane.appendChild(this.div);
            this.update(this.lnglat);
          },
          onRemove: function () {
            var parent = this.div.parentNode;
            if (parent) {
              parent.removeChild(this.div);
              this.map = null;
              this.div = null;
            }
          },
          setLnglat: function (lnglat) {
            this.lnglat = lnglat;
            this.update();
          },
          getLnglat: function () {
            return this.lnglat;
          },
          setPos: function (pos) {
            this.lnglat = this.map.layerPointToLngLat(pos);
            this.update();
          },
          update: function () {
            var pos = this.map.lngLatToLayerPoint(this.lnglat);
            this.div.style.top = pos.y - 54 + "px";
            this.div.style.left = pos.x - 35 + "px";
          },
        });
        let p = new T.LngLat(point[0], point[1]);
        var pdefinedOverlay = new definedOverlay(p, {});
        this.map.addOverLay(pdefinedOverlay);
        this.pdefinedOverlays.push(pdefinedOverlay); //变量用于清除覆盖对象
      });
    },
    //点击marker标注
    infoClick(e) {
      let point = e.lnglat;
      this.markerInfoWin.setContent(e.target.content);
      this.map.openInfoWindow(this.markerInfoWin, point); //开启信息窗口
    },
    //多边形
    addPolygon() {
      this.area.forEach((item) => {
        let list = this.getList(item);
        console.log(list);
        let polygon = new T.Polygon(list, {
          color: "#06d7f9",
          weight: 3,
          opacity: 1,
          fillColor: "#06d7f9",
          fillOpacity: 0.3,
        });
        this.map.addOverLay(polygon);
        this.polygons.push(polygon);
      });
    },
    //线条
    addPolyline() {
      this.line.forEach((item) => {
        let list = this.getList(item);
        let polyline = new T.Polyline(list, {
          color: "#CBDE02",
          weight: 3,
          opacity: 1,
        });
        this.map.addOverLay(polyline);
        this.polylines.push(polyline);
      });
    },
    //矩形
    addRectangle() {
      this.recta.forEach((item) => {
        let list = this.getList(item);
        let bounds = new T.LngLatBounds(list[0], list[1]);
        let rectangle = new T.Rectangle(bounds, {
          color: "#1ded26",
          width: 10,
          opacity: 1,
          fillColor: "#1ded26",
          fillOpacity: 0.3,
        });
        this.map.addOverLay(rectangle);
        this.rectangles.push(rectangle);
      });
    },
    //圆形
    addCircle() {
      this.circleList.forEach((item) => {
        let cricle = new T.Circle(
          new T.LngLat(item[0], item[1]),
          parseFloat(item[2]),
          {
            color: "#ff007e",
            weight: 3,
            opacity: 1,
            fillColor: "#ff007e",
            fillOpacity: 0.3,
          }
        );
        this.map.addOverLay(cricle);
        this.cricles.push(cricle);
      });
    },
    getList(obj) {
      let item = obj;
      let list = [];
      item.forEach((i) => {
        let arr = i.split(",");
        list.push(new T.LngLat(arr[0], arr[1]));
      });
      return list;
    },

    //添加marker标注
    mark() {
      this.markspot.open();
    },
    //获取marker标注的位置
    onMorkPolygon(e) {
      let monkerStr = `${e.currentLnglat.lng},${e.currentLnglat.lat}`;
      this.marks.push(e.currentMarker);
      console.log(monkerStr);
    },
    //绘制多边形
    polyg() {
      this.polygondraw.open();
    },
    //获取绘制的多边形路径
    onDrawPolygon(e) {
      let position = [];
      e.currentLnglats.forEach((item) => {
        let str = `${item.lng},${item.lat}`;
        position.push(str);
      });
      this.polygs.push(e.currentPolygon);
      console.log(position);
    },
    //绘制路线（线工具）
    polyl() {
      this.polylinedraw.open();
    },
    //获取绘制的线条的路径
    onDrawPolyline(e) {
      let position = [];
      e.currentLnglats.forEach((item) => {
        let str = `${item.lng},${item.lat}`;
        position.push(str);
      });
      this.polyls.push(e.currentPolyline);
      console.log(position);
    },
    //绘制矩形
    rect() {
      this.rectang.open();
    },
    //获取绘制的矩形坐标
    onDrawRectangle(e) {
      let obj = e.currentBounds;
      let position = [
        `${obj.Lq.lng},${obj.Lq.lat}`,
        `${obj.kq.lng},${obj.kq.lat}`,
      ];
      this.rectangs.push(e.currentRectangle);
      console.log(position);
    },
    //绘制圆形
    circ() {
      this.cirel.open();
    },
    //获取绘制的圆坐标
    onDrawCirele(e) {
      let obj = e.currentCenter;
      let position = [obj.lng, obj.lat, e.currentRadius];
      this.cirels.push(e.currentCircle);
      console.log(position);
    },

    //根据需求清除地图的覆盖物
    clear() {
      this.polygons.forEach((item) => {
        this.map.removeOverLay(item);
      });
      this.labels.forEach((item) => {
        this.map.removeOverLay(item);
      });
      this.markers.forEach((item) => {
        this.map.removeOverLay(item);
      });
      this.pdefinedOverlays.forEach((item) => {
        this.map.removeOverLay(item);
      });
      this.polylines.forEach((item) => {
        this.map.removeOverLay(item);
      });
      this.rectangles.forEach((item) => {
        this.map.removeOverLay(item);
      });
      this.cricles.forEach((item) => {
        this.map.removeOverLay(item);
      });
    },
    clearClick() {
      this.marks.forEach((item) => {
        this.map.removeOverLay(item);
      });
      this.polygs.forEach((item) => {
        this.map.removeOverLay(item);
      });
      this.polyls.forEach((item) => {
        this.map.removeOverLay(item);
      });
      this.rectangs.forEach((item) => {
        this.map.removeOverLay(item);
      });
      this.cirels.forEach((item) => {
        this.map.removeOverLay(item);
      });
    },
    //根据名字查询位置
    search() {
      this.map.removeOverLay(this.submarker);
      this.geocoder = new T.Geocoder();
      this.geocoder.getPoint(this.input, this.searchResult);
    },
    //查询位置的结果
    searchResult(result) {
      if (result.getStatus() == 0) {
        this.map.panTo(result.getLocationPoint(), 12);
        //创建标注对象
        this.submarker = new T.Marker(result.getLocationPoint());
        //向地图上添加标注
        this.map.addOverLay(this.submarker);
      } else {
        alert(result.getMsg());
      }
    },
  },
};
</script>
<style lang="less">
.div_class {
  outline: none;
  transform-origin: 0 0;
  display: block;
  opacity: 0.7;
}

.div_class::after {
  content: "";
  -webkit-border-radius: 100%;
  border-radius: 100%;
  height: 80px;
  width: 80px;
  position: absolute;
  box-shadow: 0 0 6px 2px #dd524d;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite; /*无穷反复*/
  animation-delay: 1.1s;
}
@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  50% {
    opacity: 1;
    filter: none;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
    filter: alpha(opacity=0);
  }
}

.tdmap {
  width: 100%;
  height: 800px;
  z-index: 0;
}
.button_click {
  position: absolute;
  display: flex;
  z-index: 401;
}
</style>