百度地图 – 基础学习(6): 鼠标绘制工具添加、图形几何运算(长度、面积等)

  • 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;       }     }   }); },

上述步骤完成后,鼠标绘制工具就可以使用了。

百度地图 - 基础学习(6): 鼠标绘制工具添加、图形几何运算(长度、面积等)(添加工具完成,当前只添加了画圆、折线、多边形三种模式)、百度地图 - 基础学习(6): 鼠标绘制工具添加、图形几何运算(长度、面积等)(画圆)、百度地图 - 基础学习(6): 鼠标绘制工具添加、图形几何运算(长度、面积等)(多边形)

 二、图形几何运算

单纯画出的各种图形实际上用处不大,真正有用的是在这些图形上的进一步交互,如:1、判定某个坐标是否在区域内;2、计算两点之间的距离;3、判断点(某个地址)是否在折线(行程线路)上 等等。

进行这些运算又涉及到另一个开源库 GeoUtils,GeoUtils类提供了若干几何算法,用来帮助用户判断点与矩形、 圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。 

1、 GeoUtils类的引入

GeoUtils类的引入才是最坑的,文档上只说【该类提供的都是静态方法,勿需实例化即可使用】,而且是挂载在 BMapLib 上使用的,给人一种 GeoUtils类 和 DrawingManager类一样,都是BMapLib的子类,直接调用就行,但是当你正调用的时候就报各种 undefined。

百度地图 - 基础学习(6): 鼠标绘制工具添加、图形几何运算(长度、面积等)百度地图 - 基础学习(6): 鼠标绘制工具添加、图形几何运算(长度、面积等)

原因是 GeoUtils类虽然是挂载在 BMapLib 使用的,但 GeoUtils却是一个独立库,需要单独引用。

<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>