前言
通常POI数据就泛指点数据，包括图标、文字，是最为经常使用的地理数据。百度地图API中提供点覆盖物实现类包括：BMapGL.Marker、BMapGL.Label、BMapGL.Marker3D、BMapGL.Overlay、BMapGL.CustomOverlay，包括：图标点、文字点、可变颜色图标点、动画图标点、高度点以及自定义DOM点等。本文主要介绍业务中经常用到的动画相关的使用。
自定义DOM实现动画模拟
利用构建DOM实现自定义覆盖物，实现gif图片或者Dom动态渲染模拟动画。相对BMapGL.Marker，实现更轻量更多元。
// 创建自定义覆盖物DOM
function createDOM(feature) {
var img = document.createElement('img');
img.style.height = '240px';
img.style.width = '80px';
img.src = 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/fire.gif';
img.draggable = false;
return img;
}
// 创建自定义覆盖物
var customOverlay = new BMapGL.CustomOverlay(createDOM, {
point: new BMapGL.Point(116.42342230333138, 39.92498414216742),
opacity: 0.5,
offsetY: -10
});
map.addOverlay(customOverlay);
循环渲染实现动画模拟
利用BMapGL.Marker的icon配置动态数据源，实现动画效果。相对自定义DOM，地图移动过程效果更好。
function CustomSymbol(size, anchor) {
BMapGL.Symbol.call(this, size, anchor);
this.width = size.width;
this.height = size.height;
// 需要再addOverlay之前设置true，需要保证纹理大小不变化
this.isReDraw = true;
}
CustomSymbol.prototype = new BMapGL.Symbol();
CustomSymbol.prototype.constructor = CustomSymbol;
CustomSymbol.prototype.add = function () {
const canvas = document.createElement('canvas');
canvas.width = this.width * 2;
canvas.height = this.height * 2;
this.context = canvas.getContext('2d');
this.isReDraw = false;
}
CustomSymbol.prototype.render = function (map) {
const duration = 1000;
const t = (performance.now() % duration) / duration;
const radius = (this.width / 2) * 0.3;
const outerRadius = (this.width / 2) * 0.7 * t + radius;
const context = this.context;
context.save();
// 2倍图
context.scale(2, 2);
// Draw the outer circle.
context.clearRect(0, 0, this.width, this.height);
context.beginPath();
context.arc(
this.width / 2,
this.height / 2,
outerRadius,
0,
Math.PI * 2
);
context.fillStyle = `rgba(255, 200, 200, ${1 - t})`;
context.fill();
// Draw the inner circle.
context.beginPath();
context.arc(
this.width / 2,
this.height / 2,
radius,
0,
Math.PI * 2
);
context.fillStyle = 'rgba(255, 100, 100, 1)';
context.strokeStyle = 'white';
context.lineWidth = 2 + 4 * (1 - t);
context.fill();
context.stroke();
context.restore();
// Update this image's data with data from the canvas.
this.data = context.getImageData(
0,
0,
this.context.canvas.width,
this.context.canvas.height
);
return true;
}
const size = 200;
let custom = new CustomSymbol(new BMapGL.Size(size, size), new BMapGL.Size(size / 2, size / 2));
function stop() {
custom.isReDraw = false;
}
function start() {
custom.isReDraw = true;
}
let marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925), { icon: custom, enableDragging: false });
map.addOverlay(marker);
TWEEN实现动画模拟
// 设计TWEEN心跳机
let timer;
function animate(time) {
timer = requestAnimationFrame(animate);
TWEEN.update(time);
}
function start() {
timer = requestAnimationFrame(animate);
}
function stop() {
cancelAnimationFrame(timer);
}
// 定义初始化图标
var marker = new BMapGL.Marker(new BMapGL.Point(117.20350, 36.24764), {
icon: new BMapGL.Icon('https://webmap0.bdimg.com/wolfman/static/common/images/markers_new2x_2960fb4.png', new BMapGL.Size(32 / 2, 42 / 2), {
imageSize: new BMapGL.Size(300 / 2, 453 / 2), // 原始图片大小
imageOffset: new BMapGL.Size(268 / 2, 42 / 2), // 相对于原始图片左上角正数来描述偏移值
})
});
map.addOverlay(marker);
// 定义点击事件，启动动画
var count = 0;
marker.addEventListener('click', () => {
count = 1;
start();
});
// 定义TWEEN动画，并启动监听
const options = { top: -20, size: 1 };
const tween = new TWEEN.Tween(options)
.to({ top: 0, size: 0 }, 800)
.easing(TWEEN.Easing.Quadratic.Out) // 变化函数
.repeat(Infinity) // 无限循环
.yoyo(true) // 动画在循环时反转方向
.onUpdate(function () {
marker.setOffset(new BMapGL.Size(0, options.top));
let enhance = 1 + options.size;
marker.setIcon(new BMapGL.Icon('https://webmap0.bdimg.com/wolfman/static/common/images/markers_new2x_2960fb4.png', new BMapGL.Size(32 * enhance, 42 * enhance), {
imageSize: new BMapGL.Size(300 * enhance, 453 * enhance), // 原始图片大小
imageOffset: new BMapGL.Size(268 * enhance, 42 * enhance), // 相对于原始图片左上角正数来描述偏移值
}));
if (options.top === 0) {
count--;
}
if (count <= -1) {
stop();
}
});
tween.start();
循环渲染实现贴地动画模拟
BMapGL.Marker的动画有个缺点就是立体展示，如果要严格的按照区域进行动画展示，就需要使用BMapGL.GroundOverlay
const canvas = document.createElement('canvas');
canvas.width = size * 2;
canvas.height = size * 2;
// 自定义canvas
function getTextureCanvas() {
const duration = 1000;
const t = (performance.now() % duration) / duration;
const radius = (size / 2) * 0.3;
const outerRadius = (size / 2) * 0.7 * t + radius;
const context = canvas.getContext('2d');
context.save();
// 2倍图
context.scale(2, 2);
// Draw the outer circle.
context.clearRect(0, 0, size, size);
context.beginPath();
context.arc(
size / 2,
size / 2,
outerRadius,
0,
Math.PI * 2
);
context.fillStyle = `rgba(255, 200, 200, ${1 - t})`;
context.fill();
// Draw the inner circle.
context.beginPath();
context.arc(
size / 2,
size / 2,
radius,
0,
Math.PI * 2
);
context.fillStyle = 'rgba(255, 100, 100, 1)';
context.strokeStyle = 'white';
context.lineWidth = 2 + 4 * (1 - t);
context.fill();
context.stroke();
context.restore();
}
// 添加canvas叠加层
var pStart = new BMapGL.Point(116.447717, 39.919173);
var pEnd = new BMapGL.Point(116.453125, 39.923475);
var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
var canvasOverlay = new BMapGL.GroundOverlay(bounds, {
type: 'canvas',
url: canvas,
opacity: 0.9,
isReDraw: true,
drawHook: getTextureCanvas
});
function stop() {
canvasOverlay.isReDraw = false;
}
function start() {
canvasOverlay.isReDraw = true;
}
map.addOverlay(canvasOverlay);
注意问题
复杂灵活的点信息面板，建议采用BMapGL.CustomOverlay，需要更高的灵活则可以通过BMapGL.Overlay进行自行封装。如果更加关注跟随地图操作过程更加平缓，那么建议BMapGL.Marker、BMapGL.Marker3D。
