百度地图的基础和自定义动画的实践

最新推荐文章于 2024-01-26 19:54:31 发布

孤帆鸿影

最新推荐文章于 2024-01-26 19:54:31 发布

阅读量350

点赞数 1

分类专栏：前端面试专栏文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_42202310/article/details/133885710

版权

前端面试专栏专栏收录该内容

9 篇文章 1 订阅

订阅专栏

百度地图API

引用以及初始化

百度在线地图用于生成在线的地图，可以完成地图绘制、基本标记点、

引用过后window上面会有一个全局的 BMapGl 的对象，这是地图上标记点覆盖物的基础

于common.js 引入，initMap方法，本质上是对new BMapGL.Map(‘container’)的一种扩展

const map = initMap({
  tilt: 45, // 旋转角度
  heading: 30, // 倾斜角度
  center: [118.823692, 32.035499], // 中心坐标点
  zoom: 18, // 缩放层级
})

通用外链 https://mapv.baidu.com/gl/examples/static/common.js

设置地图类型

map.setMapType(BMAP_EARTH_MAP);

标准地图：BMAP_NORMAL_MAP
地球模式：BMAP_EARTH_MAP
普通卫星地图：BMAP_SATELLITE_MAP

通过样式ID调用个性化地图样式，样式id在百度地图后台设置
```
map.setMapStyleV2({
  styleId: 你的样式id,
})
```

生成并初始化view

const view = new View({
  map: map,
})

生成渲染点

const point = new BMapGL.Point(118.818203, 32.036984)
// 根据经纬度生成一个 { lng, lat } 的点对象

自定义渲染

const imgUrl = 'img/icon.svg'
// 生成图片
const icon = new BMapGL.Icon(imgUrl, new BMapGL.Size(100, 100))
// 自定义标记点
const marker = new BMapGL.Marker(this.point, {
  size: 100,
  icon
})
map.addOverlay(marker)

这样就添加了一个自定义的标记点了

其他

通过百度API可以实现基础的点线面，具体实现参考文档，如果想要实现复杂的图层，则要借助于百度地图gl模块

地图gl模块

下载引用引用

npm install mapvgl

index.js 这样引用

import { View, HeatmapLayer, HeatGridLayer } from 'mapvgl'

曲线生成器

贝塞尔曲线坐标集，生成飞线数据

const curve = new mapvgl.BezierCurve({
    start: [12946640.989, 4846560.296],
    end: [12946348.509, 4846401.146]
});
curve.getPoints() // 生成两点坐标集

Od曲线生成器

const curve = new mapvgl.OdCurve({
  points: [
    [116.392394, 39.910683],
    [111.432322, 40.222315]
  ]
})
curve.getPoints() // 生成两点坐标集

飞线

import { FlyLineLayer } from 'mapvgl/dist/mapvgl.threelayers.min'

const flyLineLayer = new FlyLineLayer({
  style: 'chaos', // 动画方式  chaos 不均匀   
  step: 0.2, //步长
  color: 'rgba(33, 242, 214, 0.3)',
  textureColor: '#ff0000',
  textureWidth: 30,
  textureLength: 60,
})

雷达

import { FanLayer } from 'mapvgl/dist/mapvgl.threelayers.min'

const layer = new FanLayer({
    color: 'rgba(50, 50, 200, 1)',
    radius: 100,
    data: [{
        geometry: {
            type: 'Point',
            coordinates: [116.392394, 39.910683]
        }
    }]
});

无人机移动动画

使用自定义点渲染出无人机

const imgUrl = 'img/uav.png' // 无人机图片
const point = new BMapGL.Point(118.818203, 32.036984) // 无人机坐标
// 生成图片
const icon = new BMapGL.Icon(imgUrl, new BMapGL.Size(100, 100))
// 自定义标记点
const marker = new BMapGL.Marker(point, {
  size: 100,
  icon
})
map.addOverlay(marker)

无人机移动

我们想实现这样一个功能，就是通过传入无人机的名称、目标坐标、路径类型、移动时长，然后执行移动的程序

百度API有一个轨迹动画功能，交互也比较好，可惜的是，轨迹动画不能自定义点，生成的轨迹也只能是黑色，所以并没有使用轨迹动画，所以我们换了一种思路，使用requestAnimationFrame方法，根据屏幕刷新的帧数，一般为 60Hz，也就是说屏幕一秒钟刷新 60 次，于是我们每次就在屏幕刷新时候，更新无人机的位置，这样就形成了无人机的移动动画

根据时长生成帧数

const ftp = 60
const FTP_NUM = 0.5
const frames = Math.floor(time / 1000 * ftp * FTP_NUM)

以上代码中，time为传入时间，ftp为屏幕刷新频率，FTP_NUM为内存参数，因为要有复杂的动画处理，刷新频率的回调requestAnimationFrameftp会比实际的小一点，由此添加了这么一个参数

生成移动路径坐标集

前面我们已经算出了动画帧数，就可以凭此生成移动路径的坐标集
移动路径定义为三种，直线、曲线1、曲线2

直线
- 直线生成直接根据前后坐标，分成frames份，从而得出坐标集

曲线

以Od曲线为例

const curve = new mapvgl.OdCurve({
  points: [
    [116.392394, 39.910683],
    [111.432322, 40.222315]
  ]
})
const coors = curve.getPoints(frames) // 生成两点坐标集

移动动画

得到移动路径坐标集之后，无人机就可以移动了

function animateMarker(num) {
  // 更新 marker 的位置
  if (num > frames) {
    return
  }
  // 继续下一帧动画
  requestAnimationFrame(() => this.animateMarker(++num))
  const current = coors[num]
  // marker 移动到当前坐标点
  marker.setPosition(current)
}

marker - 前文中生成的无人机自定义渲染点
frames - 帧数 coors - 移动路径坐标集

移动时飞线和雷达处理

无人机通讯使用的飞线特效，无人机的雷达使用的是雷达特效，我们的移动动画是自己写的，由此在移动过程中，务必要考虑目标无人机的雷达和飞线的移动。

封装雷达移动函数在无人机坐标改变时候调用

function setFanLayer(coor) {
  const fanData = {
    geometry: {
      type: 'Point',
      coordinates: coor,
    },
    properties: {
      count: 100,
    }
  }
  fanLayer.setData([fanData])
}