百度地图 - 基础学习(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() 方法计算面积值)