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

3、百度地图 - 基础学习(7): GeoUtils类其他方法的使用(折线长度、点是否在区域内)

(0)

相关推荐