天地图实现手动绘制多边形，获取顶点位置坐标，双击弹出菜单提供删除功能

天地图实现手动绘制多边形，获取顶点位置坐标，双击弹出菜单提供删除功能

现在呢，有一个天地图，需要在上边手动绘制区域，绘制的区域是一个多边形，需要在绘制完成之后获取绘制的多边形的各个顶点存入数据库，并且可以实现双击唤出菜单，菜单提供删除或者是编辑的功能。

手动绘制多边形

首先需要创建一个绘制工具，监听绘制事件。

draw() {
   polygonTool = new T.PolygonTool(map, {
     showLabel: false,  // 不显示面积信息
     color: "#ffcd42", weight: 3, opacity: 0.5, fillColor: "#ffdc00", fillOpacity: 0.5
   });
   polygonTool.open()
   polygonTool.addEventListener('draw', this.drawFinish)  // 监听双击绘制完成事件，调用drawFinish方法
},

绘制完成，打印一下各个顶点坐标。

// 圈地结束
drawFinish(e) {
	console.log("顶点坐标列表 ----------> ", e.currentLnglats)
},

这样就可以绘制多边形了。

双击绘制图层弹出菜单

这个地方是根据我自己的案例做的，有些地方做的不是很好，所以说各位在参考的时候可以更灵活一点。

首先有一点哈，我也是查看官方文档发现的，天地图和百度地图不一样，百度地图可以给覆盖物设置右键菜单，但是天地图不可以，他只能给整个地图设置右键菜单。所以说呢，我就自己写了一个菜单，双击覆盖物的时候，在鼠标点击的位置显示出这个菜单。具体就是下面的这个样子。

首先编写一个HTML菜单样式，组件库我用的 elementUI，这个组件库无所谓。

<div id="right-btn">
  <p class="right-item" @click=""><i class="el-icon-edit"></i> 编辑</p>
  <p class="right-item" @click=""><i class="el-icon-delete"></i> 删除</p>
  <p class="right-item" @click=""><i class="el-icon-circle-close"></i> 取消</p>
</div>

css样式

  #right-btn {
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    background-color: #fff;
    cursor: pointer;
    border: 1px solid #dee1e6;
  }

  .right-item {
    margin: 4px;
    font-size: 12px;
  }


  .right-item:hover {
    color: #23aaf2;
  }

首先要在画完多边形的时候给画完的覆盖物添加一个双击点击事件。

// 圈地结束
drawFinish(e) {
   e.currentPolygon.addEventListener('dblclick', this.dblclickPolygon)  // 绘制完成给覆盖物添加双击事件
},

双击之后执行下面的方法。

dblclickPolygon(e) {
   currentPolygon = e.target       // 把当前操作的覆盖物赋值给一个全局变量
   let menu = document.getElementById('right-btn');
   let evt = window.event || arguments[0];
   menu.style.left = evt.clientX - 220 + "px";
   menu.style.top = evt.clientY - 60 + "px";
   menu.style.visibility = "visible";
},

好了，上边这一部分就完成了双击覆盖物弹出自定义菜单弹窗

点击菜单删除清除该覆盖物

弹出菜单来了一切都好说了嘛，然后就可以根据天地图的官方API接口实现相对应的功能就可以了啊！

// 删除圈地
delPolygon() {
   map.removeOverLay(currentPolygon)  // 清除当前选中的覆盖物
   this.handlerMenu()   // 执行一个方法
},

这个执行的方法是什么呢，其实就是点击完删除操作之后，把菜单给隐藏了。

handlerMenu() {
   let menu = document.getElementById('right-btn');
   menu.style.visibility = "hidden";
},

清除覆盖物的功能就完成了，当然，编辑也类似，直接照着官方API去改就可以了！

完成！！！！！！