java动态画线_Openlayers4中实现动态线效果

(function (global, factory) {

typeof exports &＃61;&＃61;&＃61; &＃39;object&＃39; && typeof module !&＃61;&＃61; &＃39;undefined&＃39; ? module.exports &＃61; factory() :

typeof define &＃61;&＃61;&＃61; &＃39;function&＃39; && define.amd ? define(factory) :

(global.MoveLine &＃61; factory());

}(this, (function () { &＃39;use strict&＃39;;

/**

* &＃64;author https://github.com/chengquan223

* &＃64;Date 2017-02-27

* */

function CanvasLayer(options) {

this.options &＃61; options || {};

this.paneName &＃61; this.options.paneName || &＃39;labelPane&＃39;;

this.zIndex &＃61; this.options.zIndex || 0;

this._map &＃61; options.map;

this._lastDrawTime &＃61; null;

this.show();

}

CanvasLayer.prototype.initialize &＃61; function () {

var canvas &＃61; this.canvas &＃61; document.createElement(&＃39;canvas&＃39;);

var ctx &＃61; this.ctx &＃61; this.canvas.getContext(&＃39;2d&＃39;);

canvas.style.cssText &＃61; &＃39;position:absolute;&＃39; &＃43; &＃39;left:0;&＃39; &＃43; &＃39;top:0;&＃39; &＃43; &＃39;z-index:&＃39; &＃43; this.zIndex &＃43; &＃39;;&＃39;;

this.adjustSize();

this.adjustRatio(ctx);

map.getViewport().appendChild(canvas);

var that &＃61; this;

map.getView().on(&＃39;propertychange&＃39;,function(){

$(canvas).hide();

});

map.on("moveend",function(){

$(canvas).show();

that.adjustSize();

that._draw();

});

return this.canvas;

};

CanvasLayer.prototype.adjustSize &＃61; function () {

var size &＃61; this._map.getSize();

var canvas &＃61; this.canvas;

canvas.width &＃61; size[0];

canvas.height &＃61; size[1];

canvas.style.width &＃61; canvas.width &＃43; &＃39;px&＃39;;

canvas.style.height &＃61; canvas.height &＃43; &＃39;px&＃39;;

};

CanvasLayer.prototype.adjustRatio &＃61; function (ctx) {

var backingStore &＃61; ctx.backingStorePixelRatio || ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;

var pixelRatio &＃61; (window.devicePixelRatio || 1) / backingStore;

var canvasWidth &＃61; ctx.canvas.width;

var canvasHeight &＃61; ctx.canvas.height;

ctx.canvas.width &＃61; canvasWidth * pixelRatio;

ctx.canvas.height &＃61; canvasHeight * pixelRatio;

ctx.canvas.style.width &＃61; canvasWidth &＃43; &＃39;px&＃39;;

ctx.canvas.style.height &＃61; canvasHeight &＃43; &＃39;px&＃39;;

ctx.scale(pixelRatio, pixelRatio);

};

CanvasLayer.prototype.draw &＃61; function () {

var self &＃61; this;

var args &＃61; arguments;

clearTimeout(self.timeoutID);

self.timeoutID &＃61; setTimeout(function () {

self._draw();

}, 15);

};

CanvasLayer.prototype._draw &＃61; function () {

var map &＃61; this._map;

var size &＃61; map.getSize();

var center &＃61; map.getView().getCenter();

if (center) {

var pixel &＃61; map.getPixelFromCoordinate(center);

this.canvas.style.left &＃61; pixel[0] - size[0] / 2 &＃43; &＃39;px&＃39;;

this.canvas.style.top &＃61; pixel[1] - size[1] / 2 &＃43; &＃39;px&＃39;;

this.options.update && this.options.update.call(this);

}

};

CanvasLayer.prototype.getContainer &＃61; function () {

return this.canvas;

};

CanvasLayer.prototype.show &＃61; function () {

this.initialize();

this.canvas.style.display &＃61; &＃39;block&＃39;;

};

CanvasLayer.prototype.hide &＃61; function () {

this.canvas.style.display &＃61; &＃39;none&＃39;;

};

CanvasLayer.prototype.setZIndex &＃61; function (zIndex) {

this.canvas.style.zIndex &＃61; zIndex;

};

CanvasLayer.prototype.getZIndex &＃61; function () {

return this.zIndex;

};

var global &＃61; typeof window &＃61;&＃61;&＃61; &＃39;undefined&＃39; ? {} : window;

var requestAnimationFrame &＃61; global.requestAnimationFrame || global.mozRequestAnimationFrame || global.webkitRequestAnimationFrame || global.msRequestAnimationFrame || function (callback) {

return global.setTimeout(callback, 1000 / 60);

};

var MoveLine &＃61; function MoveLine(map, userOptions) {

var self &＃61; this;

//默认参数

var options &＃61; {

//marker点半径

markerRadius: 3,

//marker点颜色,为空或null则默认取线条颜色

markerColor: &＃39;#fff&＃39;,

//线条类型 solid、dashed、dotted

lineType: &＃39;solid&＃39;,

//线条宽度

lineWidth: 1,

//线条颜色

colors: [&＃39;#F9815C&＃39;, &＃39;#F8AB60&＃39;, &＃39;#EDCC72&＃39;, &＃39;#E2F194&＃39;, &＃39;#94E08A&＃39;, &＃39;#4ECDA5&＃39;],

//移动点半径

moveRadius: 2,

//移动点颜色

fillColor: &＃39;#fff&＃39;,

//移动点阴影颜色

shadowColor: &＃39;#fff&＃39;,

//移动点阴影大小

shadowBlur: 5

};

//全局变量

var baseLayer &＃61; null,

animationLayer &＃61; null,

width &＃61; map.getSize()[0],

height &＃61; map.getSize()[1],

animationFlag &＃61; true,

markLines &＃61; [];

//参数合并

var merge &＃61; function merge(userOptions, options) {

Object.keys(userOptions).forEach(function (key) {

options[key] &＃61; userOptions[key];

});

};

function Marker(opts) {

this.city &＃61; opts.city;

this.location &＃61; opts.location;

this.color &＃61; opts.color;

}

Marker.prototype.draw &＃61; function (context) {

var pixel &＃61; this.pixel &＃61; map.getPixelFromCoordinate(this.location);

context.save();

context.beginPath();

context.fillStyle &＃61; options.markerColor || this.color;

context.arc(pixel[0], pixel[1], options.markerRadius, 0, Math.PI * 2, true);

context.closePath();

context.fill();

context.textAlign &＃61; &＃39;center&＃39;;

context.textBaseline &＃61; &＃39;middle&＃39;;

context.font &＃61; &＃39;12px Microsoft YaHei&＃39;;

context.fillStyle &＃61; this.color;

context.fillText(this.city, pixel[0], pixel[1] - 10);

context.restore();

};

function MarkLine(opts) {

this.from &＃61; opts.from;

this.to &＃61; opts.to;

this.id &＃61; opts.id;

this.step &＃61; 0;

}

MarkLine.prototype.getPointList &＃61; function (from, to) {

var points &＃61; [[from[0], from[1]], [to[0], to[1]]];

var ex &＃61; points[1][0];

var ey &＃61; points[1][1];

points[3] &＃61; [ex, ey];

points[1] &＃61; this.getOffsetPoint(points[0], points[3]);

points[2] &＃61; this.getOffsetPoint(points[3], points[0]);

points &＃61; this.smoothSpline(points, false);

//修正最后一点在插值产生的偏移

points[points.length - 1] &＃61; [ex, ey];

return points;

};

MarkLine.prototype.getOffsetPoint &＃61; function (start, end) {

var distance &＃61; this.getDistance(start, end) / 3; //除以3&＃xff1f;

var angle, dX, dY;

var mp &＃61; [start[0], start[1]];

var deltaAngle &＃61; -0.2; //偏移0.2弧度

if (start[0] !&＃61; end[0] && start[1] !&＃61; end[1]) {

//斜率存在

var k &＃61; (end[1] - start[1]) / (end[0] - start[0]);

angle &＃61; Math.atan(k);

} else if (start[0] &＃61;&＃61; end[0]) {

//垂直线

angle &＃61; (start[1] <&＃61; end[1] ? 1 : -1) * Math.PI / 2;

} else {

//水平线

angle &＃61; 0;

}

if (start[0] <&＃61; end[0]) {

angle -&＃61; deltaAngle;

dX &＃61; Math.round(Math.cos(angle) * distance);

dY &＃61; Math.round(Math.sin(angle) * distance);

mp[0] &＃43;&＃61; dX;

mp[1] &＃43;&＃61; dY;

} else {

angle &＃43;&＃61; deltaAngle;

dX &＃61; Math.round(Math.cos(angle) * distance);

dY &＃61; Math.round(Math.sin(angle) * distance);

mp[0] -&＃61; dX;

mp[1] -&＃61; dY;

}

return mp;

};

MarkLine.prototype.smoothSpline &＃61; function (points, isLoop) {

var len &＃61; points.length;

var ret &＃61; [];

var distance &＃61; 0;

for (var i &＃61; 1; i 

distance &＃43;&＃61; this.getDistance(points[i - 1], points[i]);

}

var segs &＃61; distance / 2;

segs &＃61; segs 

for (var i &＃61; 0; i 

var pos &＃61; i / (segs - 1) * (isLoop ? len : len - 1);

var idx &＃61; Math.floor(pos);

var w &＃61; pos - idx;

var p0;

var p1 &＃61; points[idx % len];

var p2;

var p3;

if (!isLoop) {

p0 &＃61; points[idx &＃61;&＃61;&＃61; 0 ? idx : idx - 1];

p2 &＃61; points[idx > len - 2 ? len - 1 : idx &＃43; 1];

p3 &＃61; points[idx > len - 3 ? len - 1 : idx &＃43; 2];

} else {

p0 &＃61; points[(idx - 1 &＃43; len) % len];

p2 &＃61; points[(idx &＃43; 1) % len];

p3 &＃61; points[(idx &＃43; 2) % len];

}

var w2 &＃61; w * w;

var w3 &＃61; 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 &＃61; function (p0, p1, p2, p3, t, t2, t3) {

var v0 &＃61; (p2 - p0) * 0.5;

var v1 &＃61; (p3 - p1) * 0.5;

return (2 * (p1 - p2) &＃43; v0 &＃43; v1) * t3 &＃43; (-3 * (p1 - p2) - 2 * v0 - v1) * t2 &＃43; v0 * t &＃43; p1;

};

MarkLine.prototype.getDistance &＃61; function (p1, p2) {

return Math.sqrt((p1[0] - p2[0]) * (p1[0] - p2[0]) &＃43; (p1[1] - p2[1]) * (p1[1] - p2[1]));

};

MarkLine.prototype.drawMarker &＃61; function (context) {

this.from.draw(context);

this.to.draw(context);

};

MarkLine.prototype.drawLinePath &＃61; function (context) {

var pointList &＃61; this.path &＃61; this.getPointList(map.getPixelFromCoordinate(this.from.location), map.getPixelFromCoordinate(this.to.location));

var len &＃61; pointList.length;

context.save();

context.beginPath();

context.lineWidth &＃61; options.lineWidth;

context.strokeStyle &＃61; options.colors[this.id];

if (!options.lineType || options.lineType &＃61;&＃61; &＃39;solid&＃39;) {

context.moveTo(pointList[0][0], pointList[0][1]);

for (var i &＃61; 0; i 

context.lineTo(pointList[i][0], pointList[i][1]);

}

} else if (options.lineType &＃61;&＃61; &＃39;dashed&＃39; || options.lineType &＃61;&＃61; &＃39;dotted&＃39;) {

for (var i &＃61; 1; i 

context.moveTo(pointList[i - 1][0], pointList[i - 1][1]);

context.lineTo(pointList[i][0], pointList[i][1]);

}

}

context.stroke();

context.restore();

this.step &＃61; 0; //缩放地图时重新绘制动画

};

MarkLine.prototype.drawMoveCircle &＃61; function (context) {

var pointList &＃61; this.path || this.getPointList(map.getPixelFromCoordinate(this.from.location), map.getPixelFromCoordinate(this.to.location));

context.save();

context.fillStyle &＃61; options.fillColor;

context.shadowColor &＃61; options.shadowColor;

context.shadowBlur &＃61; 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 &＃43;&＃61; 1;

if (this.step >&＃61; pointList.length) {

this.step &＃61; 0;

}

};

//底层canvas渲染&＃xff0c;标注&＃xff0c;线条

var brush &＃61; function brush() {

var baseCtx &＃61; baseLayer.canvas.getContext(&＃39;2d&＃39;);

if (!baseCtx) {

return;

}

addMarkLine();

baseCtx.clearRect(0, 0, width, height);

markLines.forEach(function (line) {

line.drawMarker(baseCtx);

line.drawLinePath(baseCtx);

});

};

//上层canvas渲染&＃xff0c;动画效果

var render &＃61; function render() {

var animationCtx &＃61; animationLayer.canvas.getContext(&＃39;2d&＃39;);

if (!animationCtx) {

return;

}

if (!animationFlag) {

animationCtx.clearRect(0, 0, width, height);

return;

}

animationCtx.fillStyle &＃61; &＃39;rgba(0,0,0,.93)&＃39;;

var prev &＃61; animationCtx.globalCompositeOperation;

animationCtx.globalCompositeOperation &＃61; &＃39;destination-in&＃39;;

animationCtx.fillRect(0, 0, width, height);

animationCtx.globalCompositeOperation &＃61; prev;

for (var i &＃61; 0; i 

var markLine &＃61; markLines[i];

markLine.drawMoveCircle(animationCtx); //移动圆点

}

};

var addMarkLine &＃61; function addMarkLine() {

markLines &＃61; [];

var dataset &＃61; options.data;

dataset.forEach(function (line, i) {

markLines.push(new MarkLine({

id: i,

from: new Marker({

city: line.from.city,

location: [line.from.lnglat[0], line.from.lnglat[1]],

color: options.colors[i]

}),

to: new Marker({

city: line.to.city,

location: [line.to.lnglat[0], line.to.lnglat[1]],

color: options.colors[i]

})

}));

});

};

//初始化

var init &＃61; function init(map, options) {

merge(userOptions, options);

baseLayer &＃61; new CanvasLayer({

map: map,

update: brush

});

animationLayer &＃61; new CanvasLayer({

map: map,

update: render

});

(function drawFrame() {

requestAnimationFrame(drawFrame);

render();

})();

};

init(map, options);

self.options &＃61; options;

};

MoveLine.prototype.update &＃61; function (resetOpts) {

for (var key in resetOpts) {

this.options[key] &＃61; resetOpts[key];

}

};

return MoveLine;

})));