438 lines
14 KiB
JavaScript
438 lines
14 KiB
JavaScript
|
(function (global, factory) {
|
|||
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|||
|
|
typeof define === 'function' && define.amd ? define(factory) :
|
|||
|
|
(global.MoveLine = factory());
|
|||
|
|
}(this, (function () { 'use strict';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @author https://github.com/chengquan223
|
|||
|
|
* @Date 2017-02-27
|
|||
|
|
* */
|
|||
|
|
function CanvasLayer(options) {
|
|||
|
|
this.options = options || {};
|
|||
|
|
this.paneName = this.options.paneName || 'labelPane';
|
|||
|
|
this.zIndex = this.options.zIndex || 0;
|
|||
|
|
this._map = options.map;
|
|||
|
|
this._lastDrawTime = null;
|
|||
|
|
this.show();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
CanvasLayer.prototype = new BMap.Overlay();
|
|||
|
|
|
|||
|
|
CanvasLayer.prototype.initialize = function (map) {
|
|||
|
|
this._map = map;
|
|||
|
|
var canvas = this.canvas = document.createElement('canvas');
|
|||
|
|
var ctx = this.ctx = this.canvas.getContext('2d');
|
|||
|
|
canvas.style.cssText = 'position:absolute;' + 'left:0;' + 'top:0;' + 'z-index:' + this.zIndex + ';';
|
|||
|
|
this.adjustSize();
|
|||
|
|
this.adjustRatio(ctx);
|
|||
|
|
map.getPanes()[this.paneName].appendChild(canvas);
|
|||
|
|
var that = this;
|
|||
|
|
map.addEventListener('resize', function () {
|
|||
|
|
that.adjustSize();
|
|||
|
|
that._draw();
|
|||
|
|
});
|
|||
|
|
return this.canvas;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
CanvasLayer.prototype.adjustSize = function () {
|
|||
|
|
var size = this._map.getSize();
|
|||
|
|
var canvas = this.canvas;
|
|||
|
|
canvas.width = size.width;
|
|||
|
|
canvas.height = size.height;
|
|||
|
|
canvas.style.width = canvas.width + 'px';
|
|||
|
|
canvas.style.height = canvas.height + 'px';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
CanvasLayer.prototype.adjustRatio = function (ctx) {
|
|||
|
|
var backingStore = ctx.backingStorePixelRatio || ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
|
|||
|
|
var pixelRatio = (window.devicePixelRatio || 1) / backingStore;
|
|||
|
|
var canvasWidth = ctx.canvas.width;
|
|||
|
|
var canvasHeight = ctx.canvas.height;
|
|||
|
|
ctx.canvas.width = canvasWidth * pixelRatio;
|
|||
|
|
ctx.canvas.height = canvasHeight * pixelRatio;
|
|||
|
|
ctx.canvas.style.width = canvasWidth + 'px';
|
|||
|
|
ctx.canvas.style.height = canvasHeight + 'px';
|
|||
|
|
// console.log(ctx.canvas.height, canvasHeight);
|
|||
|
|
ctx.scale(pixelRatio, pixelRatio);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
CanvasLayer.prototype.draw = function () {
|
|||
|
|
var self = this;
|
|||
|
|
var args = arguments;
|
|||
|
|
|
|||
|
|
clearTimeout(self.timeoutID);
|
|||
|
|
self.timeoutID = setTimeout(function () {
|
|||
|
|
self._draw();
|
|||
|
|
}, 15);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
CanvasLayer.prototype._draw = function () {
|
|||
|
|
var map = this._map;
|
|||
|
|
var size = map.getSize();
|
|||
|
|
var center = map.getCenter();
|
|||
|
|
if (center) {
|
|||
|
|
var pixel = map.pointToOverlayPixel(center);
|
|||
|
|
this.canvas.style.left = pixel.x - size.width / 2 + 'px';
|
|||
|
|
this.canvas.style.top = pixel.y - size.height / 2 + 'px';
|
|||
|
|
this.dispatchEvent('draw');
|
|||
|
|
this.options.update && this.options.update.call(this);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
CanvasLayer.prototype.getContainer = function () {
|
|||
|
|
return this.canvas;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
CanvasLayer.prototype.show = function () {
|
|||
|
|
if (!this.canvas) {
|
|||
|
|
this._map.addOverlay(this);
|
|||
|
|
}
|
|||
|
|
this.canvas.style.display = 'block';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
CanvasLayer.prototype.hide = function () {
|
|||
|
|
this.canvas.style.display = 'none';
|
|||
|
|
//this._map.removeOverlay(this);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
CanvasLayer.prototype.setZIndex = function (zIndex) {
|
|||
|
|
this.canvas.style.zIndex = zIndex;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
CanvasLayer.prototype.getZIndex = function () {
|
|||
|
|
return this.zIndex;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var global = typeof window === 'undefined' ? {} : window;
|
|||
|
|
|
|||
|
|
var requestAnimationFrame = global.requestAnimationFrame || global.mozRequestAnimationFrame || global.webkitRequestAnimationFrame || global.msRequestAnimationFrame || function (callback) {
|
|||
|
|
return global.setTimeout(callback, 1000 / 60);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var MoveLine = function MoveLine(map, userOptions) {
|
|||
|
|
var self = this;
|
|||
|
|
|
|||
|
|
//默认参数
|
|||
|
|
var options = {
|
|||
|
|
//marker点半径
|
|||
|
|
markerRadius: 3,
|
|||
|
|
//marker点颜色,为空或null则默认取线条颜色
|
|||
|
|
markerColor: '#fff',
|
|||
|
|
//线条类型 solid、dashed、dotted
|
|||
|
|
lineType: 'solid',
|
|||
|
|
//线条宽度
|
|||
|
|
lineWidth: 1,
|
|||
|
|
//线条颜色
|
|||
|
|
colors: ['#F9815C', '#F8AB60', '#EDCC72', '#E2F194', '#94E08A', '#4ECDA5'],
|
|||
|
|
//移动点半径
|
|||
|
|
moveRadius: 2,
|
|||
|
|
//移动点颜色
|
|||
|
|
fillColor: '#fff',
|
|||
|
|
//移动点阴影颜色
|
|||
|
|
shadowColor: '#fff',
|
|||
|
|
//移动点阴影大小
|
|||
|
|
shadowBlur: 5
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//全局变量
|
|||
|
|
var baseLayer = null,
|
|||
|
|
animationLayer = null,
|
|||
|
|
width = map.getSize().width,
|
|||
|
|
height = map.getSize().height,
|
|||
|
|
animationFlag = true,
|
|||
|
|
markLines = [];
|
|||
|
|
|
|||
|
|
//参数合并
|
|||
|
|
var merge = function merge(userOptions, options) {
|
|||
|
|
Object.keys(userOptions).forEach(function (key) {
|
|||
|
|
options[key] = userOptions[key];
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function Marker(opts) {
|
|||
|
|
this.city = opts.city;
|
|||
|
|
this.location = opts.location;
|
|||
|
|
this.color = opts.color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Marker.prototype.draw = function (context) {
|
|||
|
|
var pixel = this.pixel = map.pointToPixel(this.location);
|
|||
|
|
|
|||
|
|
context.save();
|
|||
|
|
context.beginPath();
|
|||
|
|
context.fillStyle = options.markerColor || this.color;
|
|||
|
|
context.arc(pixel.x, pixel.y, options.markerRadius, 0, Math.PI * 2, true);
|
|||
|
|
context.closePath();
|
|||
|
|
context.fill();
|
|||
|
|
|
|||
|
|
context.textAlign = 'center';
|
|||
|
|
context.textBaseline = 'middle';
|
|||
|
|
context.font = '12px Microsoft YaHei';
|
|||
|
|
context.fillStyle = this.color;
|
|||
|
|
context.fillText(this.city, pixel.x, pixel.y - 10);
|
|||
|
|
context.restore();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function MarkLine(opts) {
|
|||
|
|
this.from = opts.from;
|
|||
|
|
this.to = opts.to;
|
|||
|
|
this.id = opts.id;
|
|||
|
|
this.step = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
MarkLine.prototype.getPointList = function (from, to) {
|
|||
|
|
var points = [[from.x, from.y], [to.x, to.y]];
|
|||
|
|
var ex = points[1][0];
|
|||
|
|
var ey = points[1][1];
|
|||
|
|
points[3] = [ex, ey];
|
|||
|
|
points[1] = this.getOffsetPoint(points[0], points[3]);
|
|||
|
|
points[2] = this.getOffsetPoint(points[3], points[0]);
|
|||
|
|
points = this.smoothSpline(points, false);
|
|||
|
|
//修正最后一点在插值产生的偏移
|
|||
|
|
points[points.length - 1] = [ex, ey];
|
|||
|
|
return points;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
MarkLine.prototype.getOffsetPoint = function (start, end) {
|
|||
|
|
var distance = this.getDistance(start, end) / 3; //除以3？
|
|||
|
|
var angle, dX, dY;
|
|||
|
|
var mp = [start[0], start[1]];
|
|||
|
|
var deltaAngle = -0.2; //偏移0.2弧度
|
|||
|
|
if (start[0] != end[0] && start[1] != end[1]) {
|
|||
|
|
//斜率存在
|
|||
|
|
var k = (end[1] - start[1]) / (end[0] - start[0]);
|
|||
|
|
angle = Math.atan(k);
|
|||
|
|
} else if (start[0] == end[0]) {
|
|||
|
|
//垂直线
|
|||
|
|
angle = (start[1] <= end[1] ? 1 : -1) * Math.PI / 2;
|
|||
|
|
} else {
|
|||
|
|
//水平线
|
|||
|
|
angle = 0;
|
|||
|
|
}
|
|||
|
|
if (start[0] <= end[0]) {
|
|||
|
|
angle -= deltaAngle;
|
|||
|
|
dX = Math.round(Math.cos(angle) * distance);
|
|||
|
|
dY = Math.round(Math.sin(angle) * distance);
|
|||
|
|
mp[0] += dX;
|
|||
|
|
mp[1] += dY;
|
|||
|
|
} else {
|
|||
|
|
angle += deltaAngle;
|
|||
|
|
dX = Math.round(Math.cos(angle) * distance);
|
|||
|
|
dY = Math.round(Math.sin(angle) * distance);
|
|||
|
|
mp[0] -= dX;
|
|||
|
|
mp[1] -= dY;
|
|||
|
|
}
|
|||
|
|
return mp;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
MarkLine.prototype.smoothSpline = function (points, isLoop) {
|
|||
|
|
var len = points.length;
|
|||
|
|
var ret = [];
|
|||
|
|
var distance = 0;
|
|||
|
|
for (var i = 1; i < len; i++) {
|
|||
|
|
distance += this.getDistance(points[i - 1], points[i]);
|
|||
|
|
}
|
|||
|
|
var segs = distance / 2;
|
|||
|
|
segs = segs < len ? len : segs;
|
|||
|
|
for (var i = 0; i < segs; i++) {
|
|||
|
|
var pos = i / (segs - 1) * (isLoop ? len : len - 1);
|
|||
|
|
var idx = Math.floor(pos);
|
|||
|
|
var w = pos - idx;
|
|||
|
|
var p0;
|
|||
|
|
var p1 = points[idx % len];
|
|||
|
|
var p2;
|
|||
|
|
var p3;
|
|||
|
|
if (!isLoop) {
|
|||
|
|
p0 = points[idx === 0 ? idx : idx - 1];
|
|||
|
|
p2 = points[idx > len - 2 ? len - 1 : idx + 1];
|
|||
|
|
p3 = points[idx > len - 3 ? len - 1 : idx + 2];
|
|||
|
|
} else {
|
|||
|
|
p0 = points[(idx - 1 + len) % len];
|
|||
|
|
p2 = points[(idx + 1) % len];
|
|||
|
|
p3 = points[(idx + 2) % len];
|
|||
|
|
}
|
|||
|
|
var w2 = w * w;
|
|||
|
|
var w3 = w * w2;
|
|||
|
|
|
|||
|
|
ret.push([this.interpolate(p0[0], p1[0], p2[0], p3[0], w, w2, w3), this.interpolate(p0[1], p1[1], p2[1], p3[1], w, w2, w3)]);
|
|||
|
|
}
|
|||
|
|
return ret;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
MarkLine.prototype.interpolate = function (p0, p1, p2, p3, t, t2, t3) {
|
|||
|
|
var v0 = (p2 - p0) * 0.5;
|
|||
|
|
var v1 = (p3 - p1) * 0.5;
|
|||
|
|
return (2 * (p1 - p2) + v0 + v1) * t3 + (-3 * (p1 - p2) - 2 * v0 - v1) * t2 + v0 * t + p1;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
MarkLine.prototype.getDistance = function (p1, p2) {
|
|||
|
|
return Math.sqrt((p1[0] - p2[0]) * (p1[0] - p2[0]) + (p1[1] - p2[1]) * (p1[1] - p2[1]));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
MarkLine.prototype.drawMarker = function (context) {
|
|||
|
|
this.from.draw(context);
|
|||
|
|
this.to.draw(context);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
MarkLine.prototype.drawLinePath = function (context) {
|
|||
|
|
var pointList = this.path = this.getPointList(map.pointToPixel(this.from.location), map.pointToPixel(this.to.location));
|
|||
|
|
var len = pointList.length;
|
|||
|
|
context.save();
|
|||
|
|
context.beginPath();
|
|||
|
|
context.lineWidth = options.lineWidth;
|
|||
|
|
context.strokeStyle = options.colors[this.id];
|
|||
|
|
|
|||
|
|
if (!options.lineType || options.lineType == 'solid') {
|
|||
|
|
context.moveTo(pointList[0][0], pointList[0][1]);
|
|||
|
|
for (var i = 0; i < len; i++) {
|
|||
|
|
context.lineTo(pointList[i][0], pointList[i][1]);
|
|||
|
|
}
|
|||
|
|
} else if (options.lineType == 'dashed' || options.lineType == 'dotted') {
|
|||
|
|
for (var i = 1; i < len; i += 2) {
|
|||
|
|
context.moveTo(pointList[i - 1][0], pointList[i - 1][1]);
|
|||
|
|
context.lineTo(pointList[i][0], pointList[i][1]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
context.stroke();
|
|||
|
|
context.restore();
|
|||
|
|
this.step = 0; //缩放地图时重新绘制动画
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
MarkLine.prototype.drawMoveCircle = function (context) {
|
|||
|
|
var pointList = this.path || this.getPointList(map.pointToPixel(this.from.location), map.pointToPixel(this.to.location));
|
|||
|
|
|
|||
|
|
context.save();
|
|||
|
|
context.fillStyle = options.fillColor;
|
|||
|
|
context.shadowColor = options.shadowColor;
|
|||
|
|
context.shadowBlur = options.shadowBlur;
|
|||
|
|
context.beginPath();
|
|||
|
|
context.arc(pointList[this.step][0], pointList[this.step][1], options.moveRadius, 0, Math.PI * 2, true);
|
|||
|
|
context.fill();
|
|||
|
|
context.closePath();
|
|||
|
|
context.restore();
|
|||
|
|
this.step += 1;
|
|||
|
|
if (this.step >= pointList.length) {
|
|||
|
|
this.step = 0;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//底层canvas渲染，标注，线条
|
|||
|
|
var brush = function brush() {
|
|||
|
|
var baseCtx = baseLayer.canvas.getContext('2d');
|
|||
|
|
if (!baseCtx) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
addMarkLine();
|
|||
|
|
|
|||
|
|
baseCtx.clearRect(0, 0, width, height);
|
|||
|
|
|
|||
|
|
markLines.forEach(function (line) {
|
|||
|
|
line.drawMarker(baseCtx);
|
|||
|
|
line.drawLinePath(baseCtx);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//上层canvas渲染，动画效果
|
|||
|
|
var render = function render() {
|
|||
|
|
var animationCtx = animationLayer.canvas.getContext('2d');
|
|||
|
|
if (!animationCtx) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!animationFlag) {
|
|||
|
|
animationCtx.clearRect(0, 0, width, height);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
animationCtx.fillStyle = 'rgba(0,0,0,.93)';
|
|||
|
|
var prev = animationCtx.globalCompositeOperation;
|
|||
|
|
animationCtx.globalCompositeOperation = 'destination-in';
|
|||
|
|
animationCtx.fillRect(0, 0, width, height);
|
|||
|
|
animationCtx.globalCompositeOperation = prev;
|
|||
|
|
|
|||
|
|
for (var i = 0; i < markLines.length; i++) {
|
|||
|
|
var markLine = markLines[i];
|
|||
|
|
markLine.drawMoveCircle(animationCtx); //移动圆点
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//鼠标事件
|
|||
|
|
var mouseInteract = function mouseInteract() {
|
|||
|
|
map.addEventListener('movestart', function () {
|
|||
|
|
animationFlag = false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
map.addEventListener('moveend', function () {
|
|||
|
|
animationFlag = true;
|
|||
|
|
markLines = []; //解决拖动后多余的小圆点bug，没想明白，暂时这样
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
map.addEventListener('zoomstart', function () {
|
|||
|
|
animationFlag = false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
map.addEventListener('zoomend', function () {
|
|||
|
|
animationFlag = true;
|
|||
|
|
markLines = [];
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var addMarkLine = function addMarkLine() {
|
|||
|
|
markLines = [];
|
|||
|
|
var dataset = options.data;
|
|||
|
|
data.forEach(function (line, i) {
|
|||
|
|
markLines.push(new MarkLine({
|
|||
|
|
id: i,
|
|||
|
|
from: new Marker({
|
|||
|
|
city: line.from.city,
|
|||
|
|
location: new BMap.Point(line.from.lnglat[0], line.from.lnglat[1]),
|
|||
|
|
color: options.colors[i]
|
|||
|
|
}),
|
|||
|
|
to: new Marker({
|
|||
|
|
city: line.to.city,
|
|||
|
|
location: new BMap.Point(line.to.lnglat[0], line.to.lnglat[1]),
|
|||
|
|
color: options.colors[i]
|
|||
|
|
})
|
|||
|
|
}));
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//初始化
|
|||
|
|
var init = function init(map, options) {
|
|||
|
|
merge(userOptions, options);
|
|||
|
|
|
|||
|
|
baseLayer = new CanvasLayer({
|
|||
|
|
map: map,
|
|||
|
|
update: brush
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
animationLayer = new CanvasLayer({
|
|||
|
|
map: map,
|
|||
|
|
update: render
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
mouseInteract();
|
|||
|
|
|
|||
|
|
(function drawFrame() {
|
|||
|
|
requestAnimationFrame(drawFrame);
|
|||
|
|
render();
|
|||
|
|
})();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
init(map, options);
|
|||
|
|
|
|||
|
|
self.options = options;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
MoveLine.prototype.update = function (resetOpts) {
|
|||
|
|
for (var key in resetOpts) {
|
|||
|
|
this.options[key] = resetOpts[key];
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return MoveLine;
|
|||
|
|
|
|||
|
|
})));
|