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

128 阅读 0 评论 85 点赞

我是靠谱客的博主大方舞蹈，这篇文章主要介绍天地图覆盖物的添加，工具类的使用，现在分享给大家，希望可以做个参考。

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

首先在项目中引入天地图

复制代码

1
<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>

}
  },
  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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
<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>