天地圖實現手動繪制多邊形，獲取頂點位置坐標，雙擊彈出菜單提供刪除功能

現在呢，有一個天地圖，需要在上邊手動繪制區域，繪制的區域是一個多邊形，需要在繪制完成之后獲取繪制的多邊形的各個頂點存入數據庫，並且可以實現雙擊喚出菜單，菜單提供刪除或者是編輯的功能。

手動繪制多邊形

首先需要創建一個繪制工具，監聽繪制事件。

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去改就可以了！

完成！！！！！！