天地图覆盖物的添加，工具类的使用

下面是自己在使用天地图后的总结，方便以后查看

首先在项目中引入天地图

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>

申请key值请查看官方文档：天地图入门指导

 页面效果：

 通过点击添加点位、绘制区域、绘制路线、绘制矩形和绘制圆向地图添加对应类型的覆盖物。

点击清除手工添加的覆盖物效果是清除通过点击添加的各类的覆盖物。

点击清除默认添加的覆盖物效果是清除天地图初始化时添加的各类的覆盖物。

清除可根据条件判断清除某一类的覆盖物或者某一个覆盖物。（代码未添加，请自行判断）

天地图在创建各种对象时如果有简单的方法欢迎告知

<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>
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', config);//创建地图对象
			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)
        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="scss">
.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: 100%;
  z-index: 0;
}
.button_click{
  position: absolute;
  display: flex;
  z-index: 401;
}
</style>

最后

以上就是大方舞蹈为你收集整理的天地图覆盖物的添加，工具类的使用的全部内容，希望文章能够帮你解决天地图覆盖物的添加，工具类的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。