百度地图 - 基础学习(6): 鼠标绘制工具添加、图形几何运算(长度、面积等)
地图鼠标绘制，打算分两部分学习，主要是牵涉东西太多。今天主要是 鼠标绘制工具添加及配置，以及图形长度和多边形面积的计算
一、鼠标绘制工具 DrawingManager
鼠标绘制工具主要采用开源库 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, geoUtilsValue = 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;
} case "rectangle": { // 矩形
overlayList = e.overlay.Ao; // 矩形各点坐标数组
break;
}
}
});
},
上述步骤完成后，鼠标绘制工具就可以使用了。
(添加工具完成，当前只添加了画圆、折线、多边形三种模式)、
(画圆)、
(多边形)
二、图形几何运算 GeoUtils
单纯画出的各种图形实际上用处不大，真正有用的是在这些图形上的进一步交互，如：1、判定某个坐标是否在区域内；2、计算两点之间的距离；3、判断点(某个地址)是否在折线(行程线路)上 等等。
DrawingManager 自身带有一定的计算功能(默认关闭)，通过调用 DrawingManager类的 enableCalculate() 方法打开，打开后也可以调用另一个方法 disableCalculate() 予以关闭。
this.drawingManager.enableCalculate(); // 打开距离或面积计算
this.drawingManager.disableCalculate(); // 关闭距离或面积计算
以北京景山公园为例：百度资料显示是23公顷[即0.23平方千米]，地图上框出来的面积是：0.26514128平方千米左右，实际上相差不大(还是比较准)。
(密闭多边形框图面积计算值)、
(enableCalculate()方法返回的结果单位为平方米)
(折线合成多边形框图计算值)、
(enableCalculate()方法无法计算折线合成多边形的面积，只能计算长度)
虽然 DrawingManager类自身带有一定计算功能，但计算功能相对而言比较弱势(只能计算折线长度、密闭多边形面积)，从上面例子就可以看出(折线合成多边形的面积，都只能另外找方法计算)。所以在这次的图形计算学习中，关闭了DrawingManager类自带的计算功能，改用另一个开源库 GeoUtils。
开源库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>
2、GeoUtils类 方法的使用
BMapLib.GeoUtils.getPolygonArea(overlayList)
// 密闭多边形面积计算overlayList = e.overlay.Ao; // 多边形(密闭多边形、矩形)各点坐标数组geoUtilsValue = BMapLib.GeoUtils.getPolygonArea(overlayList) / 1000000 + "平方千米"; // 多边形计算面积(除以1000000，将平方米换算成平方千米)alert(geoUtilsValue);
这次以北京欢乐水魔方水上公园为例：百度资料显示是500亩[即0.3333333 平方千米]，地图上框出来的区域计算是：0.33334941175584426平方千米，两者相当接近，精度非常高了。
(密闭多边形面积计算)、
(BMapLib.GeoUtils.getPolygonArea() 方法计算面积值)