地圖滑鼠繪制，打算分兩部分學習，主要是牽涉東西太多，今天主要是 滑鼠繪制工具添加及配置，以及圖形長度和多邊形面積的計算
一、 滑鼠繪制工具
滑鼠繪制工具主要采用開源庫 DrawingManager，通過此工具用戶可以在地圖任意位置上畫點、畫圓、畫折線、畫多邊形、以及畫矩形，并顯示線的距離及面的面積，
1、 滑鼠繪制工具添加
<!--在頁面的頭部加載進滑鼠繪制工具開源庫的檔案--> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
2、工具初始化及配置
// 繪制模式樣式配置 styleOptions: { strokeColor: "red", // 邊線顏色， fillColor: "red", // 填充顏色，當引數為空時，圓形將沒有填充效果， strokeWeight: 3, // 邊線的寬度，以像素為單位， strokeOpacity: 0.8, // 邊線透明度，取值范圍0 - 1， fillOpacity: 0.6, // 填充的透明度，取值范圍0 - 1， strokeStyle: "solid" // 邊線的樣式，solid或dashed， }, // 實體化滑鼠繪制工具 addDrawingManager() { let that = this; this.drawingManager = new BMapLib.DrawingManager(that.mapInstance, { isOpen: false, // 是否開啟繪制模式 enableDrawingTool: true, // 是否顯示工具列，默認不顯示 drawingToolOptions: { anchor: window.BMAP_ANCHOR_TOP_RIGHT, // 工具顯示位置 offset: new BMap.Size(5, 5), // 偏離值 drawingModes: [ window.BMAP_DRAWING_CIRCLE, window.BMAP_DRAWING_POLYLINE, window.BMAP_DRAWING_POLYGON ] // 工具列上可以選擇需要顯示的繪制模式，將需要顯示的DrawingType以陣列形式傳入，默認是全部 // BMAP_DRAWING_MARKER：畫點，BMAP_DRAWING_CIRCLE：畫圓，BMAP_DRAWING_POLYLINE：折線，BMAP_DRAWING_POLYGON：多邊形，BMAP_DRAWING_RECTANGLE：矩形 // 注：工具列第一項(拖動地圖)不在Modes設定范圍內 }, circleOptions: that.styleOptions, // 圓的樣式 polylineOptions: that.styleOptions, // 折線樣式 polygonOptions: that.styleOptions, // 多邊形樣式 rectangleOptions: that.styleOptions // 矩形樣式 // 注：此處各種繪制模式樣式采用了同一個配置，實際開發中，可以根據實際需要進行不同配置，從而在樣式上區分各種模式 }); // this.drawingManager.enableCalculate(); // 打開距離或面積計算 },
3、添加各種繪制監聽事件
// 添加繪制監聽事件 addDrawingManagerEvent() { let that = this; // 點繪制事件監聽 this.drawingManager.addEventListener("markercomplete", function(e, overlay) { console.log(e); console.log(overlay); }); // 圓繪制事件監聽 this.drawingManager.addEventListener("circlecomplete", function(e, overlay) { console.log(e); console.log(overlay); }); // 折線繪制事件監聽 this.drawingManager.addEventListener("polylinecomplete", function(e, overlay) { console.log(e); console.log(overlay); }); // 多邊形繪制事件監聽 this.drawingManager.addEventListener("polygoncomplete", function(e, overlay) { console.log(e); console.log(overlay); }); // 矩形繪制事件監聽 this.drawingManager.addEventListener("rectanglecomplete", function(e, overlay) { console.log(e); console.log(overlay); }); // 滑鼠繪制事件總監聽(無論哪種繪制，繪制完成都會呼叫) this.drawingManager.addEventListener("overlaycomplete", function(e) { // e.drawingMode; // 當前的繪制模式 // e.overlay; // 對應的繪制模式回傳對應的覆寫物 // e.calculate; // 需要開啟計算模式才會回傳這個值，當繪制線的時候回傳距離、繪制多邊形、圓、矩形時候回傳面積，單位為米， // e.label; // 計算面積時候出現在Map上的Label物件 let overlayList = null; switch (e.drawingMode) { case "circle": { // 圓(細看，圓實際上是一個由41個坐標構成的多邊形) overlayList = e.overlay.ha; break; } case "polyline": { // 折線 overlayList = e.overlay.ha; // 折線點坐標陣列 break; } case "polygon": { // 多邊形 overlayList = e.overlay.Ao; // 多邊形各點坐標陣列 break; } } }); },
上述步驟完成后，滑鼠繪制工具就可以使用了，
(添加工具完成，當前只添加了畫圓、折線、多邊形三種模式)、
(畫圓)、
(多邊形)
二、圖形幾何運算
單純畫出的各種圖形實際上用處不大，真正有用的是在這些圖形上的進一步互動，如：1、判定某個坐標是否在區域內；2、計算兩點之間的距離；3、判斷點(某個地址)是否在折線(行程線路)上 等等，
進行這些運算又涉及到另一個開源庫 GeoUtils，GeoUtils類提供了若干幾何演算法，用來幫助用戶判斷點與矩形、 圓形、多邊形線、多邊形面的關系，并提供計算折線長度和多邊形的面積的公式，
1、 GeoUtils類的引入
GeoUtils類的引入才是最坑的，檔案上只說【該類提供的都是靜態方法，勿需實體化即可使用】，而且是掛載在 BMapLib 上使用的，給人一種 GeoUtils類 和 DrawingManager類一樣，都是BMapLib的子類，直接呼叫就行，但是當你正呼叫的時候就報各種 undefined，
，
原因是 GeoUtils類雖然是掛載在 BMapLib 使用的，但 GeoUtils卻是一個獨立庫，需要單獨參考，
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/245597.html
標籤：JavaScript