天地图实现手动绘制多边形,获取顶点位置坐标,双击弹出菜单提供删除功能
天地图实现手动绘制多边形,获取顶点位置坐标,双击弹出菜单提供删除功能
现在呢,有一个天地图,需要在上边手动绘制区域,绘制的区域是一个多边形,需要在绘制完成之后获取绘制的多边形的各个顶点存入数据库,并且可以实现双击唤出菜单,菜单提供删除或者是编辑的功能。
手动绘制多边形
首先需要创建一个绘制工具,监听绘制事件。
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去改就可以了!
完成!!!!!!
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014