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

使用百度地图自驾，可以自定义起点终点，还有语音导航选项。 #生活技巧# #自驾游建议# #自驾导航软件#

百度地图API

引用以及初始化

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

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

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

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

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

设置地图类型

map.setMapType(BMAP_EARTH_MAP); 1 标准地图：BMAP_NORMAL_MAP地球模式：BMAP_EARTH_MAP普通卫星地图：BMAP_SATELLITE_MAP

通过样式ID调用个性化地图样式，样式id在百度地图后台设置

map.setMapStyleV2({ styleId: 你的样式id, }) 123 生成并初始化view

const view = new View({ map: map, }) 123 生成渲染点

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

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) 123456789

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

其他

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

地图gl模块

下载引用引用

npm install mapvgl 1

index.js 这样引用

import { View, HeatmapLayer, HeatGridLayer } from 'mapvgl' 1 曲线生成器

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

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

Od曲线生成器

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

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, }) 12345678910 雷达

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] } }] }); 123456789101112

无人机移动动画

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

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) 12345678910 无人机移动

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

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

根据时长生成帧数

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

以上代码中，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) // 生成两点坐标集 1234567 移动动画

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

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

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

移动时飞线和雷达处理

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

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

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

飞线处理同理

网址：百度地图的基础和自定义动画的实践 https://www.yuejiaxmz.com/news/view/661038

相关内容

基于事件和知识图谱的智能运维实践
生活的法律知识图画——构建和谐社会的基石
【李淑梅】哲学实践基础的发现与哲学的变革
谈谈和谐社会的马克思主义哲学基础
进击的百度地图：从出行助手到生活守护
如何在百度地图中查找附近的艺术画廊？
【百度地图】百度地图免费下载
怎么理解心理素质是实现自我和幸福生活的基础？
幸福家园丨文明实践绘就居民幸福生活新画卷
百度地图VS高德地图 同款功能pick哪家

随便看看