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

已于 2022-01-22 13:40:53 修改
阅读量3.9k 收藏 20
点赞数 3
分类专栏： 天地图 文章标签： 前端
于 2022-01-17 10:14:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenjingsuo/article/details/122533806
版权

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

首先在项目中引入天地图

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

彳亍而无所趋
关注
  • 3
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
天地图显示定位显示图层
11-27
本人亲测，非常好用的天地图，可以直接运行，支持地图显示，图层定位，覆盖物的点击
天地图之添加覆盖物
躬行之
08-22 4710
最近多少还是会有一点焦虑，其实很大一部分原因是考虑的比较多罢了，适当的放弃一些东西，一切就会变的明朗起来。 接着上一篇继续来学习天地图 Android SDK ，地图开发中除了常见的定位需求，还有就是覆盖物的添加，比如最近的项目是有关风险管控的，在地图上就要显示对应的风险点，下面的今天的内容： 单个覆盖物 多个覆盖物 集合覆盖物 文字覆盖物 总结 测试效果 单个覆盖物 这里...
天地图根据后台经纬度数据添加覆盖物
最新发布
weixin_67281896的博客
05-20 139
3。
天地图项目2——绘制矩形覆盖物
qq_43093129的博客
08-08 1079
天地图应用
【用java进行百度地图二次开发之一】任意角度画扇形，添加覆盖层
WYR_try的博客
04-17 766
【用java进行百度地图二次开发之一】任意角度画扇形，添加覆盖层 给定方向和角度。以该方向为扇形中心，2倍的角度为扇形的角度。代码中每一步的注释很清楚思想很简单，具体实现如下： //绘出扇形 List<Polygon>Polygonlist=new ArrayList<>(); //以画多边形区域的方法画扇形区域 画出以point2点为圆心，半径为radi...
天地图实现手动绘制多边形，获取顶点位置坐标，双击弹出菜单提供删除功能
大家好，我是 ed.
03-01 3887
天地图实现手动绘制多边形，回去顶点位置坐标，双击弹出菜单提供删除功能 现在呢，有一个天地图，需要在上边手动绘制区域，绘制的区域是一个多边形，需要在绘制完成之后获取绘制的多边形的各个顶点存入数据库，并且可以实现双击唤出菜单，菜单提供删除或者是编辑的功能。 手动绘制多边形 首先需要创建一个绘制工具，监听绘制事件。 draw() { polygonTool = new T.PolygonTool(map, { showLabel: false, // 不显示面积信息 color:
Echarts地图+覆盖物提示框轮播效果
02-18
提示：springboot项目，下载之后需要运行该项目，然后才能访问看到效果。代码不多，谨慎下载。...主要功能：地图缩放拖动、区域点击往返市区地图、双击地图全屏放大、轮播带图片提示框 需要的快去下载吧！！！
Map覆盖物添加demo
11-20
ShitMap覆盖物添加demo
百度地图定位及覆盖物添加
09-07
简单的百度地图定位及覆盖物添加的Demo
地图图片覆盖物切片工具20220113专业版
09-20
这个切图工具的唯一作用是把一个图片分割为大小为 256*256 或者 512*512的图片并覆盖到指定地图上 支持天地图(用leafleti调用天地图生成切片可用)、百度地图、高德地图、腾讯地图、OpenLayers、LeafLet（调用高德、...
基于百度地图api清除指定覆盖物(Overlay)的方法
08-28
百度地图API提供了一个示例，使用`map.getOverlays()`方法获取所有的覆盖物，然后遍历这些覆盖物来筛选所要移除的覆盖物。例如： ``` function deletePoint(){ var allOverlay = map.getOverlays(); for (var i = ...
天地图电子地图符号与注记样式
04-23
国家基础地理信息中心初版天地图电子地图符号与注记样式，包含注记分级显示内容、矢量地图符号与注记样式、影像地图符号与注记样式
天地图-图形绘制
简析的博客
12-14 2633
原文地址：https://www.cnblogs.com/nuoye/p/10563555.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>天地图</title> <style> /*设置地图显示大小*/ #mapDiv{ width:
天地图-第五篇-覆盖物
cherry_vicent的专栏
01-21 2416
天地图-覆盖物
使用天地图动态加载波纹动画
weixin_41438668的博客
06-13 403
注意：在style部分不要用scoped否则会没有效果。动态效果用div+css实现。
天地图API-获取自定义点覆盖物集
weixin_45711444的博客
03-23 989
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>天地图－地图API－范例－添加点覆盖物工具</title> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=
天地图中覆盖物创建，删除及自定义信息弹窗(多边形)
weixin_43575792的博客
08-10 3454
需求介绍 这篇博客接着上一篇博客的内容接着往下说，上一篇介绍了天地图key的申请，还有引入vue脚手架中实例化，现在介绍一下天地图中覆盖物的各种操作 实际开发 首先定义一个空数组point,将坐标放入数组中，然后实例化该多边形，最后在地图实例中加入该多边形实例；多边形实例的内容决定了多边形的基本配置；如果该面携带者其他数据，可以将数据如下方表格内容一样填写进入Polygon实例中，比如下面我在代码里面写到的test就是我自定义的一个变量，被携带进入多边形实例中 名称 意义 color 多边
天地图——常用方法分享
dyt1_1的博客
03-18 1492
（1）获取行政区划信息——points返回为空，只能使用其他方式获取行政区划边界坐标（参考（3）绘制边界线）（2）JavaScript API 4.0 类参考（常用）（3）JavaScript API 4.0代码示例（常用）（5）地图平移——改变中心点坐标，移动到其他位置。（9）逆地理编码——根据经纬度获取地址。（4）在地图上绘制点位（点聚合）（4）web API 代码示例。（8）去掉天地图自带的版权控件。（2）创建地图并标记当前位置。（5）vue使用天地图。
高德地图圆形覆盖物添加内容
07-27
在高德地图中，要给圆形覆盖物添加内容，可以使用 `AMap.CircleMarker` 类来创建圆形覆盖物，并结合自定义的 HTML 内容来实现。下面是一个示例代码： ```javascript // 创建地图对象 var map = new AMap.Map('mapContainer'); // 创建圆形覆盖物 var circle = new AMap.CircleMarker({ center: [lng, lat], // 圆心位置，lng为经度，lat为纬度 radius: 100, // 半径，单位为像素 fillColor: '#FF0000', // 填充颜色 strokeColor: '#000000', // 描边颜色 strokeWeight: 2 // 描边宽度 }); // 创建自定义的 HTML 内容 var content = '<div class="circle-content">这是一个圆形覆盖物</div>'; // 将自定义的 HTML 内容添加到圆形覆盖物上 circle.setContent(content); // 将圆形覆盖物添加到地图上 map.add(circle); ``` 在上述代码中，我们首先创建了一个地图对象，并将其放置在 id 为 "mapContainer" 的 DOM 元素中。然后，通过 `new AMap.CircleMarker()` 来创建一个圆形覆盖物，设置了圆心位置、半径、填充颜色、描边颜色和描边宽度等属性。 接下来，我们创建了一个自定义的 HTML 内容，可以根据需要自定义样式和内容。然后，通过调用 `circle.setContent(content)` 将自定义的 HTML 内容添加到圆形覆盖物上。 最后，通过调用 `map.add(circle)` 将圆形覆盖物添加到地图上进行显示。 您可以根据实际需求，修改圆形覆盖物的属性和自定义的 HTML 内容，来满足您的要求。 希望以上信息对您有所帮助！如果您有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值