541 lines
17 KiB
JavaScript
541 lines
17 KiB
JavaScript
|
(function (global, factory) {
|
|||
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|||
|
|
typeof define === 'function' && define.amd ? define(factory) :
|
|||
|
|
(global.LineGradient = 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 tool = {
|
|||
|
|
merge: function merge(settings, defaults) {
|
|||
|
|
Object.keys(settings).forEach(function (key) {
|
|||
|
|
defaults[key] = settings[key];
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//计算两点间距离
|
|||
|
|
getDistance: function getDistance(p1, p2) {
|
|||
|
|
return Math.sqrt((p1[0] - p2[0]) * (p1[0] - p2[0]) + (p1[1] - p2[1]) * (p1[1] - p2[1]));
|
|||
|
|
},
|
|||
|
|
//判断点是否在线段上
|
|||
|
|
containStroke: function containStroke(x0, y0, x1, y1, lineWidth, x, y) {
|
|||
|
|
if (lineWidth === 0) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
var _l = lineWidth;
|
|||
|
|
var _a = 0;
|
|||
|
|
var _b = x0;
|
|||
|
|
// Quick reject
|
|||
|
|
if (y > y0 + _l && y > y1 + _l || y < y0 - _l && y < y1 - _l || x > x0 + _l && x > x1 + _l || x < x0 - _l && x < x1 - _l) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (x0 !== x1) {
|
|||
|
|
_a = (y0 - y1) / (x0 - x1);
|
|||
|
|
_b = (x0 * y1 - x1 * y0) / (x0 - x1);
|
|||
|
|
} else {
|
|||
|
|
return Math.abs(x - x0) <= _l / 2;
|
|||
|
|
}
|
|||
|
|
var tmp = _a * x - y + _b;
|
|||
|
|
var _s = tmp * tmp / (_a * _a + 1);
|
|||
|
|
return _s <= _l / 2 * _l / 2;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//是否在矩形内
|
|||
|
|
isPointInRect: function isPointInRect(point, bound) {
|
|||
|
|
var wn = bound.wn; //西北
|
|||
|
|
var es = bound.es; //东南
|
|||
|
|
return point.x >= wn.x && point.x <= es.x && point.y >= wn.y && point.y <= es.y;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//是否在圆内
|
|||
|
|
isPointInCircle: function isPointInCircle(point, center, radius) {
|
|||
|
|
var dis = this.getDistanceNew(point, center);
|
|||
|
|
return dis <= radius;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//两点间距离
|
|||
|
|
getDistanceNew: function getDistanceNew(point1, point2) {
|
|||
|
|
return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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 LineGradient = function LineGradient(map, userOptions) {
|
|||
|
|
var self = this;
|
|||
|
|
|
|||
|
|
self.map = map;
|
|||
|
|
self.lines = [];
|
|||
|
|
self.pixelList = [];
|
|||
|
|
|
|||
|
|
//默认参数
|
|||
|
|
var options = {
|
|||
|
|
//线条宽度
|
|||
|
|
lineWidth: 1
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//全局变量
|
|||
|
|
var baseLayer = null,
|
|||
|
|
animationLayer = null,
|
|||
|
|
animationFlag = true,
|
|||
|
|
width = map.getSize().width,
|
|||
|
|
height = map.getSize().height;
|
|||
|
|
|
|||
|
|
function Line(opts) {
|
|||
|
|
this.name = opts.name;
|
|||
|
|
this.label = opts.label;
|
|||
|
|
this.labelColor = opts.labelColor;
|
|||
|
|
this.path = opts.path;
|
|||
|
|
this.step = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Line.prototype.getPointList = function () {
|
|||
|
|
var points = [],
|
|||
|
|
path = this.path;
|
|||
|
|
if (path && path.length > 0) {
|
|||
|
|
path.forEach(function (p) {
|
|||
|
|
points.push({
|
|||
|
|
code: p.code,
|
|||
|
|
name: p.name,
|
|||
|
|
location: p.location,
|
|||
|
|
pixel: map.pointToPixel(p.location),
|
|||
|
|
height: p.height,
|
|||
|
|
value: p.value,
|
|||
|
|
time: p.time,
|
|||
|
|
color: p.color
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return points;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
Line.prototype.draw = function (context) {
|
|||
|
|
var pointList = this.pixelList || this.getPointList();
|
|||
|
|
|
|||
|
|
for (var i = 0, len = pointList.length; i < len - 1; i++) {
|
|||
|
|
context.save();
|
|||
|
|
context.beginPath();
|
|||
|
|
// context.lineCap = "round";
|
|||
|
|
// context.lineJoin = "round";
|
|||
|
|
context.lineWidth = options.lineWidth;
|
|||
|
|
context.strokeStyle = pointList[i].color;
|
|||
|
|
context.moveTo(pointList[i].pixel.x, pointList[i].pixel.y);
|
|||
|
|
context.lineTo(pointList[i + 1].pixel.x, pointList[i + 1].pixel.y);
|
|||
|
|
context.stroke();
|
|||
|
|
context.closePath();
|
|||
|
|
context.restore();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var lastpoint = pointList[pointList.length - 1];
|
|||
|
|
context.font = 'bold 14px Arial';
|
|||
|
|
context.textAlign = 'left';
|
|||
|
|
context.textBaseline = 'middle';
|
|||
|
|
context.fillStyle = this.labelColor;
|
|||
|
|
context.fillText(this.label, lastpoint.pixel.x, lastpoint.pixel.y);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
Line.prototype.drawMoveCircle = function (context) {
|
|||
|
|
var pointList = this.pixelList || this.getPointList();
|
|||
|
|
|
|||
|
|
context.save();
|
|||
|
|
context.fillStyle = '#fff';
|
|||
|
|
context.shadowColor = '#fff';
|
|||
|
|
context.shadowBlur = 5;
|
|||
|
|
context.beginPath();
|
|||
|
|
context.arc(pointList[this.step].pixel.x, pointList[this.step].pixel.y, 3, 0, Math.PI * 2, true);
|
|||
|
|
context.fill();
|
|||
|
|
context.closePath();
|
|||
|
|
context.restore();
|
|||
|
|
this.step += 1;
|
|||
|
|
if (this.step >= pointList.length) {
|
|||
|
|
this.step = 0;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
Line.prototype.drawArrow = function (context, map) {
|
|||
|
|
var pointList = this.pixelList || this.getPointList();
|
|||
|
|
// for (var i = 0, len = pointList.length; i < len - 1; i++) {
|
|||
|
|
if (this.step >= pointList.length - 1) {
|
|||
|
|
this.step = 0;
|
|||
|
|
}
|
|||
|
|
context.beginPath();
|
|||
|
|
// context.lineWidth = options.animateLineWidth;
|
|||
|
|
context.lineWidth = 5;
|
|||
|
|
context.strokeStyle = '#fff';
|
|||
|
|
context.moveTo(pointList[this.step].pixel.x, pointList[this.step].pixel.y);
|
|||
|
|
context.lineTo(pointList[this.step + 1].pixel.x, pointList[this.step + 1].pixel.y);
|
|||
|
|
context.stroke();
|
|||
|
|
|
|||
|
|
context.save();
|
|||
|
|
context.translate(pointList[this.step + 1].pixel.x, pointList[this.step + 1].pixel.y);
|
|||
|
|
//我的箭头本垂直向下，算出直线偏离Y的角，然后旋转 ,rotate是顺时针旋转的，所以加个负号
|
|||
|
|
var ang = (pointList[this.step + 1].pixel.x - pointList[this.step].pixel.x) / (pointList[this.step + 1].pixel.y - pointList[this.step].pixel.y);
|
|||
|
|
ang = Math.atan(ang);
|
|||
|
|
pointList[this.step + 1].pixel.y - pointList[this.step].pixel.y >= 0 ? context.rotate(-ang) : context.rotate(Math.PI - ang); //加个180度，反过来
|
|||
|
|
context.lineTo(-6, -6);
|
|||
|
|
context.lineTo(0, 6);
|
|||
|
|
context.lineTo(6, -6);
|
|||
|
|
context.lineTo(0, 0);
|
|||
|
|
context.fillStyle = '#fff';
|
|||
|
|
context.fill(); //箭头是个封闭图形
|
|||
|
|
context.restore(); //用来恢复Canvas之前保存的状态,否则会影响后续绘制
|
|||
|
|
|
|||
|
|
this.step += 1;
|
|||
|
|
// }
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//底层canvas渲染，标注，线条
|
|||
|
|
var brush = function brush() {
|
|||
|
|
var baseCtx = baseLayer.canvas.getContext('2d');
|
|||
|
|
if (!baseCtx) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
addLine();
|
|||
|
|
|
|||
|
|
baseCtx.clearRect(0, 0, width, height);
|
|||
|
|
|
|||
|
|
self.pixelList = [];
|
|||
|
|
self.lines.forEach(function (line) {
|
|||
|
|
self.pixelList.push({
|
|||
|
|
name: line.name,
|
|||
|
|
label: line.label,
|
|||
|
|
labelColor: line.labelColor,
|
|||
|
|
data: line.getPointList()
|
|||
|
|
});
|
|||
|
|
line.draw(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,.2)';
|
|||
|
|
var prev = animationCtx.globalCompositeOperation;
|
|||
|
|
animationCtx.globalCompositeOperation = 'destination-in';
|
|||
|
|
animationCtx.fillRect(0, 0, width, height);
|
|||
|
|
animationCtx.globalCompositeOperation = prev;
|
|||
|
|
|
|||
|
|
var lines = self.lines;
|
|||
|
|
for (var i = 0; i < lines.length; i++) {
|
|||
|
|
var line = lines[i];
|
|||
|
|
// line.drawMoveCircle(animationCtx); //移动圆点
|
|||
|
|
line.drawArrow(animationCtx); //画箭头
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//鼠标事件
|
|||
|
|
var mouseInteract = function mouseInteract() {
|
|||
|
|
map.addEventListener('movestart', function () {
|
|||
|
|
animationFlag = false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
map.addEventListener('moveend', function () {
|
|||
|
|
animationFlag = true;
|
|||
|
|
self.lines = []; //解决拖动后多余的小圆点bug，没想明白，暂时这样
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
map.addEventListener('zoomstart', function () {
|
|||
|
|
animationFlag = false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
map.addEventListener('zoomend', function () {
|
|||
|
|
animationFlag = true;
|
|||
|
|
self.lines = [];
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var addLine = function addLine() {
|
|||
|
|
if (self.lines && self.lines.length > 0) return;
|
|||
|
|
var dataset = options.data;
|
|||
|
|
var legend = new Legend();
|
|||
|
|
|
|||
|
|
dataset.forEach(function (l, i) {
|
|||
|
|
var line = new Line({
|
|||
|
|
name: l.name,
|
|||
|
|
label: l.label,
|
|||
|
|
labelColor: l.labelColor,
|
|||
|
|
path: []
|
|||
|
|
});
|
|||
|
|
l.data.forEach(function (p, j) {
|
|||
|
|
line.path.push({
|
|||
|
|
code: p.code,
|
|||
|
|
name: p.name,
|
|||
|
|
location: new BMap.Point(p.Longitude, p.Latitude),
|
|||
|
|
height: p.height,
|
|||
|
|
value: p.value,
|
|||
|
|
time: p.time,
|
|||
|
|
color: legend.getColor(p.value).color
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
self.lines.push(line);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var Legend = function Legend() {
|
|||
|
|
var options = {
|
|||
|
|
width: 400,
|
|||
|
|
height: 15,
|
|||
|
|
range: [700, 750, 800, 850, 900, 950, 1000, 1050, 1100],
|
|||
|
|
// gradient: {
|
|||
|
|
// 0: 'rgba(100,255,51,1)',
|
|||
|
|
// 0.167: 'rgba(153,255,51,1)',
|
|||
|
|
// 0.333: 'rgba(204,255,51,1)',
|
|||
|
|
// 0.5: 'rgba(255,255,71,0.8)',
|
|||
|
|
// 0.667: 'rgba(255,250,150,1',
|
|||
|
|
// 0.833: 'rgba(255,187,102,0.9)',
|
|||
|
|
// 1: 'rgba(255,119,68,0.9)'
|
|||
|
|
// }
|
|||
|
|
gradient: {
|
|||
|
|
0.1: '#fe0000',
|
|||
|
|
0.4: '#ffaa01',
|
|||
|
|
0.7: '#b0e000',
|
|||
|
|
1.0: '#38a702'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var canvas = document.createElement('canvas');
|
|||
|
|
var context = canvas.getContext('2d');
|
|||
|
|
canvas.width = options.width;
|
|||
|
|
canvas.height = options.height;
|
|||
|
|
var grad = context.createLinearGradient(0, 0, canvas.width, canvas.height);
|
|||
|
|
for (var gradient in options.gradient) {
|
|||
|
|
grad.addColorStop(gradient, options.gradient[gradient]);
|
|||
|
|
}
|
|||
|
|
context.fillStyle = grad;
|
|||
|
|
context.fillRect(0, 0, canvas.width, canvas.height);
|
|||
|
|
|
|||
|
|
this.d2Hex = function (d) {
|
|||
|
|
// Converts a decimal number to a two digit Hex value
|
|||
|
|
var hex = Number(d).toString(16);
|
|||
|
|
while (hex.length < 2) {
|
|||
|
|
hex = "0" + hex;
|
|||
|
|
}
|
|||
|
|
return hex.toUpperCase();
|
|||
|
|
};
|
|||
|
|
this.getRgbColor = function (point) {
|
|||
|
|
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
|
|||
|
|
var data = imageData.data;
|
|||
|
|
var i = (point.Y * canvas.width + point.X) * 4;
|
|||
|
|
var rgb = [],
|
|||
|
|
color = '#',
|
|||
|
|
objRgbColor = {
|
|||
|
|
"rgb": rgb,
|
|||
|
|
"color": color
|
|||
|
|
};
|
|||
|
|
for (var j = 0; j < 3; j++) {
|
|||
|
|
rgb.push(data[i + j]);
|
|||
|
|
color += this.d2Hex(data[i + j]);
|
|||
|
|
}
|
|||
|
|
objRgbColor.color = color;
|
|||
|
|
return objRgbColor;
|
|||
|
|
};
|
|||
|
|
this.getColor = function (value) {
|
|||
|
|
var colorValue = value - options.range[0];
|
|||
|
|
var point = Math.round(colorValue * canvas.width / (options.range[options.range.length - 1] - options.range[0]));
|
|||
|
|
return this.getRgbColor({
|
|||
|
|
X: point,
|
|||
|
|
Y: 1
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
self.init(userOptions, options);
|
|||
|
|
|
|||
|
|
baseLayer = new CanvasLayer({
|
|||
|
|
map: map,
|
|||
|
|
update: brush
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
animationLayer = new CanvasLayer({
|
|||
|
|
map: map,
|
|||
|
|
update: render
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
mouseInteract();
|
|||
|
|
|
|||
|
|
(function drawFrame() {
|
|||
|
|
self.timer = setTimeout(function () {
|
|||
|
|
self.animationId = requestAnimationFrame(drawFrame);
|
|||
|
|
render();
|
|||
|
|
}, 1000 / 10);
|
|||
|
|
|
|||
|
|
// requestAnimationFrame(drawFrame);
|
|||
|
|
// render();
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
this.clickEvent = this.clickEvent.bind(this);
|
|||
|
|
|
|||
|
|
this.bindEvent();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
LineGradient.prototype.init = function (settings, defaults) {
|
|||
|
|
//合并参数
|
|||
|
|
tool.merge(settings, defaults);
|
|||
|
|
this.options = defaults;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
LineGradient.prototype.bindEvent = function (e) {
|
|||
|
|
var map = this.map;
|
|||
|
|
if (this.options.methods) {
|
|||
|
|
if (this.options.methods.click) {
|
|||
|
|
map.setDefaultCursor("default");
|
|||
|
|
map.addEventListener('click', this.clickEvent);
|
|||
|
|
}
|
|||
|
|
if (this.options.methods.mousemove) {
|
|||
|
|
map.setDefaultCursor("default");
|
|||
|
|
map.addEventListener('mousemove', this.clickEvent);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
LineGradient.prototype.clickEvent = function (e) {
|
|||
|
|
var self = this,
|
|||
|
|
flag = false,
|
|||
|
|
lines = self.pixelList;
|
|||
|
|
|
|||
|
|
if (lines.length > 0) {
|
|||
|
|
lines.forEach(function (line, i) {
|
|||
|
|
for (var j = 0; j < line.data.length; j++) {
|
|||
|
|
var beginPt = line.data[j].pixel;
|
|||
|
|
if (line.data[j + 1] == undefined) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var endPt = line.data[j + 1].pixel;
|
|||
|
|
var curPt = e.pixel;
|
|||
|
|
var inCircle = tool.isPointInCircle(curPt, beginPt, self.options.lineWidth);
|
|||
|
|
if (inCircle) {
|
|||
|
|
// self.options.methods.click(e, line.name);
|
|||
|
|
self.options.methods.mousemove(e, line.data[j]);
|
|||
|
|
flag = true;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// var isOnLine = tool.containStroke(beginPt.x, beginPt.y, endPt.x, endPt.y, self.options.lineWidth, curPt.x, curPt.y);
|
|||
|
|
// if (isOnLine) {
|
|||
|
|
// // self.options.methods.click(e, line.name);
|
|||
|
|
// self.options.methods.mousemove(e, line);
|
|||
|
|
// return;
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (!flag) {
|
|||
|
|
document.getElementById('tooltips').style.visibility = 'hidden';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return LineGradient;
|
|||
|
|
|
|||
|
|
})));
|