- A+
所属分类：Web前端
地图鼠标绘制，打算分两部分学习，主要是牵涉东西太多。今天主要是 鼠标绘制工具添加及配置，以及图形长度和多边形面积的计算
一、 鼠标绘制工具
鼠标绘制工具主要采用开源库 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>
