百度地图 - 基础学习(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)    
// 多边形(不规则密闭多边形、矩形)计算面积，该方法只能计算闭合的多边形，自相交多边形无法计算。具体使用可翻阅文档：http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbols/BMapLib.GeoUtils.html

// 密闭多边形面积计算
overlayList = e.overlay.Ao; // 多边形(密闭多边形、矩形)各点坐标数组
geoUtilsValue = BMapLib.GeoUtils.getPolygonArea(overlayList) / 1000000 + "平方千米"; // 多边形计算面积(除以1000000，将平方米换算成平方千米)
alert(geoUtilsValue);

这次以北京欢乐水魔方水上公园为例：百度资料显示是500亩[即0.3333333 平方千米]，地图上框出来的区域计算是：0.33334941175584426平方千米，两者相当接近，精度非常高了。

(密闭多边形面积计算)、(BMapLib.GeoUtils.getPolygonArea() 方法计算面积值)

秒客网

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

一、鼠标绘制工具 DrawingManager

1、鼠标绘制工具添加

2、工具初始化及配置

3、添加各种绘制监听事件

二、图形几何运算 GeoUtils

1、GeoUtils类的引入

2、GeoUtils类方法的使用

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

相关文章

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

一、鼠标绘制工具 DrawingManager

1、鼠标绘制工具添加

2、工具初始化及配置

3、添加各种绘制监听事件

二、图形几何运算 GeoUtils

1、GeoUtils类的引入

2、GeoUtils类 方法的使用

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

相关文章

2、GeoUtils类方法的使用