百度地图 - 绘制扇区

简介

为了更加熟练的使用百度地图api，最简单的方式就是实现一个个DEMO。当然DEMO也是一个个慢慢实现的，在这里我们先讲解一个简单的扇区绘制功能。

引入地图

• 通过script标签加载地图api，然后通过BMapGL.Map('bmap')实例化地图。一个简单的地图就实现了。

 <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>
 <div id="bmap" class="bmap"></div>
 <script>
      // 创建Map实例
      var map = new BMapGL.Map('bmap')
      // 初始化地图,设置中心点坐标和地图级别
      map.centerAndZoom(new BMapGL.Point(121.480509, 31.23592), 10) 
      // 启用 鼠标滚轮事件
      map.enableScrollWheelZoom()
 </script>

辅助函数

• 在地图中绘制扇形是通过，Polygon()函数来绘制的。根据扇形弧度的总长度，来计算扇形边界点个数，然后根据圆点坐标和半径计算每个边界点的坐标，把计算好的点通过Polygon()函数在地图上绘制出来。
• 实现获取扇形点坐标的函数。

      /**
       * @param point 原点
       * @param radius 半径 米
       * @param SRadian 开始弧度
       * @param ERadian 结束弧度
       * */
      function sector(point, radius, SRadian, ERadian) {
        //
        var points = [] // 创建构成多边形的点数组
        points.push(point) // 起点
        // 根据弧度 计算扇形点 分布
        var step = (ERadian - SRadian) / 15 || 15

        for (var i = SRadian; i < ERadian + 0.001; i += step) {
          // 循环 获取 圆弧上点的坐标
          points.push(EOffsetBearing(point, radius, i))
        }
        // 连接起点
        points.push(point)
        return points
      }

• 使用数学的方法计算需要画扇形的圆弧上的点坐标。

      /**
       * @param point 原点
       * @param dist 半径
       * @param bearing 计数
       * */
      function EOffsetBearing(point, dist, bearing) {
        // 计算1经度与原点的距离
        var lngConv = map.getDistance(point, new BMapGL.Point(point.lng + 0.1, point.lat)) * 10
        // 计算1纬度与原点的距离
        var latConv = map.getDistance(point, new BMapGL.Point(point.lng, point.lat + 0.1)) * 10
        // 正弦计算待获取的点的纬度与原点纬度差
        var lat = (dist * Math.sin((bearing * Math.PI) / 180)) / latConv
        // 余弦计算待获取的点的经度与原点经度差
        var lng = (dist * Math.cos((bearing * Math.PI) / 180)) / lngConv
        return new BMapGL.Point(point.lng + lng, point.lat + lat)
      }

根据规定的数据格式，绘制扇形。

• 数据格式是自己规定好的，方便后面获取数据。
• 这里需要注意的是，半径是以米为单位的。

      var mapDate = {
        上海: [121.480509, 31.23592, 0, 90, '上海'],
        上海2: [121.480509, 31.23592, 100, 130, '上海2']
      }
       
      function makesectors(mapDate) {
        for (var key in mapDate) {
          var temPoi = mapDate[key]
          // 圆点
          var point = new BMapGL.Point(temPoi[0], temPoi[1])
          // 弧度
          SRadian = temPoi[2]
          ERadian = temPoi[3]
          // 30000 半径 单位米
          var oval = new BMapGL.Polygon(sector(point, 30000, SRadian, ERadian), {
            strokeColor: '#ADFF2F', // 边线颜色
            strokeWeight: 1, // 边线的宽度，以像素为单位
            strokeOpacity: 0.5, // 边线透明度，取值范围0 - 1
            fillColor: '#ADFF2F', // 填充颜色
            fillOpacity: 0.5
          })
          map.addOverlay(oval)
          // // 文本内容
          // var text = temPoi[4]
          // onClick(text, oval) // 调鼠标用点击事件
          // onMouseover(oval)
          // onMouseout(oval)
        }
      }
      makesectors(mapDate)

• 一个简单的扇区绘制就出现了
  

添加交互

• 在开发中不可能只是单纯的画图，也需要一些事件交互。很幸运的是在地图api实现的一套和原生DOM基本一样的事件模型，可以对覆盖物直接使用。

点击事件

1. 通过覆盖物内部函数addEventListener，来设置监听事件。
2. 通过给覆盖物设置click事件监听，实现点击回调。

      // 点击事件
      function onClick(text, marker) {
        marker.addEventListener('click', function (e) {
          openWin(text, marker.getBounds().getCenter())
        })
      }
      // 定义信息窗口样式
      var opts = {
        width: 250, // 信息窗口宽度
        height: 80, // 信息窗口高度
        title: '信息窗口' // 信息窗口标题
      }

      var infoWindow = null
      // 打开信息窗口
      function openWin(text, centerPoint) {
        // 创建信息窗口对象
        infoWindow = new BMapGL.InfoWindow(text, opts) 
        // 关闭 点击地图时关闭信息窗口
        infoWindow.disableCloseOnClick() 
        // 开启信息窗口
        map.openInfoWindow(infoWindow, centerPoint) 
      }

3. 这里使用了，信息窗口覆盖物InfoWindow，根据文档编写默认参数设置窗口样式和内容。通过地图实例的openInfoWindow()把信息窗口加入地图中。InfoWindow也提供了一些函数用于控制它自己。

鼠标移入

     function onMouseover(oval) {
        oval.addEventListener('mouseover', function () {
          oval.setStrokeWeight(2) //边界变宽
          oval.setStrokeOpacity(1) //边界颜色变深
          oval.setFillOpacity(1) //填充颜色变深
        })
      }

• 在回调函数中，通过覆盖物提供的函数，修改覆盖物样式。实现鼠标移入的交互效果。

鼠标移开

     function onMouseout(oval) {
        oval.addEventListener('mouseout', function () {
          oval.setStrokeWeight(1) //边界恢复
          oval.setStrokeOpacity(0.5) //边界透明度变化
          oval.setFillOpacity(0.5) //填充颜色变化
        })
      }

• 在回调函数中，通过同样的函数恢复参数。实现鼠标移开的交互效果。要注意恢复参数不要有错误，不然会影响用户体验。

• 最后效果