fix(scene):鼠标事件监听

This commit is contained in:
李正学 2018-12-24 16:15:18 +08:00
parent c968530976
commit 983c4b5474
8 changed files with 70 additions and 71 deletions

View File

@ -36,12 +36,18 @@ class Picking {
this._resizeHandler = this._resizeTexture.bind(this); this._resizeHandler = this._resizeTexture.bind(this);
window.addEventListener('resize', this._resizeHandler, false); window.addEventListener('resize', this._resizeHandler, false);
this._mouseUpHandler = this._onMouseUp.bind(this); // this._mouseUpHandler = this._onMouseUp.bind(this);
this._world._container.addEventListener('mouseup', this._mouseUpHandler, false); // this._world._container.addEventListener('mouseup', this._mouseUpHandler, false);
this._world._container.addEventListener('mousemove', this._mouseUpHandler, false); // this._world._container.addEventListener('mousemove', this._mouseUpHandler, false);
this._world._container.addEventListener('mousemove', this._onWorldMove.bind(this), false); // this._world._container.addEventListener('mousemove', this._onWorldMove.bind(this), false);
}
pickdata(event) {
const point = { x: event.clientX, y: event.clientY, type: event.type };
const normalisedPoint = { x: 0, y: 0 };
normalisedPoint.x = (point.x / this._width) * 2 - 1;
normalisedPoint.y = -(point.y / this._height) * 2 + 1;
this._pickAllObject(point, normalisedPoint);
} }
_onMouseUp(event) { _onMouseUp(event) {
// Only react to main button click // Only react to main button click
// if (event.button !== 0) { // if (event.button !== 0) {
@ -56,6 +62,7 @@ class Picking {
// this._pick(point, normalisedPoint); // this._pick(point, normalisedPoint);
} }
_onWorldMove() { _onWorldMove() {
this._needUpdate = true; this._needUpdate = true;
@ -152,7 +159,7 @@ class Picking {
point3d: _point3d, point3d: _point3d,
intersects intersects
}; };
return item return item;
} }

View File

@ -65,6 +65,7 @@ export default class Layer extends Base {
scene._engine._scene.add(this._object3D); scene._engine._scene.add(this._object3D);
this.layerMesh = null; this.layerMesh = null;
this.layerLineMesh = null; this.layerLineMesh = null;
this._addPickingEvents();
} }
/** /**
@ -260,11 +261,11 @@ export default class Layer extends Base {
const resetHander = this._resetStyle.bind(this); const resetHander = this._resetStyle.bind(this);
if (this.get('allowActive')) { if (this.get('allowActive')) {
this.on('active', activeHander); this.on('mousemove', activeHander);
this.on('mouseleave', resetHander); this.on('mouseleave', resetHander);
} else { } else {
this.off('active', activeHander); this.off('mousemove', activeHander);
this.off('mouseleave', resetHander); this.off('mouseleave', resetHander);
} }
} }
@ -427,11 +428,11 @@ export default class Layer extends Base {
}); });
} }
} }
on(type, callback) { // on(type, callback) {
this._addPickingEvents(); // this._addPickingEvents();
super.on(type, callback); // super.on(type, callback);
} // }
getPickingId() { getPickingId() {
return this.scene._engine._picking.getNextId(); return this.scene._engine._picking.getNextId();
} }
@ -485,22 +486,8 @@ export default class Layer extends Base {
lnglat: { lng: lnglat.lng, lat: lnglat.lat } lnglat: { lng: lnglat.lng, lat: lnglat.lat }
}; };
if (featureId >= 0) { if (featureId >= 0) {
this.emit(type, target);
switch(type) {
case 'mouseup':
this.emit('click', target);
break;
case 'mousemove':
this.emit('mousemove', target);
this.emit('active', target);
break;
default:
//this.emit('click', target);
} }
}
}); });
} }

View File

@ -18,7 +18,6 @@ export default class Scene extends Base {
} }
_initEngine(mapContainer) { _initEngine(mapContainer) {
this._el = mapContainer;
this._engine = new Engine(mapContainer, this); this._engine = new Engine(mapContainer, this);
this._engine.run(); this._engine.run();
} }
@ -41,6 +40,7 @@ export default class Scene extends Base {
this.map = Map.map; this.map = Map.map;
Map.asyncCamera(this._engine); Map.asyncCamera(this._engine);
this.initLayer(); this.initLayer();
this._registEvents();
this.emit('loaded'); this.emit('loaded');
}); });
@ -98,11 +98,12 @@ export default class Scene extends Base {
'click', 'click',
'dblclick' 'dblclick'
]; ];
events.forEach((event)=>{ events.forEach(event => {
this._el.addEventListener(event, e => { this._container.addEventListener(event, e => {
// 要素拾取
this._engine._picking.pickdata(e);
}, false); }, false);
}) });
} }
// 代理map事件 // 代理map事件
removeLayer(layer) { removeLayer(layer) {

View File

@ -171,9 +171,9 @@ export function Line(path, props, positionsIndex) {
miter.push(-m); miter.push(-m);
miter.push(m); miter.push(m);
}); });
attrDistance = attrDistance.map((d)=>{ attrDistance = attrDistance.map(d => {
return d / attrDistance[attrDistance.length - 1]; return d / attrDistance[attrDistance.length - 1];
}) });
return { return {
positions, positions,
normal, normal,

View File

@ -65,7 +65,7 @@ export default class LineLayer extends Layer {
material.upDateUninform({ material.upDateUninform({
u_duration: duration, u_duration: duration,
u_interval: interval, u_interval: interval,
u_trailLength:trailLength, u_trailLength: trailLength
}); });

View File

@ -32,7 +32,7 @@ export default class PointLayer extends Layer {
return this; return this;
} }
_prepareRender() { _prepareRender() {
const { opacity, strokeWidth, stroke, strokeOpacity, shape, fill } = this.get('styleOptions'); const { stroke, fill } = this.get('styleOptions');
if (this.shapeType === 'text') { // 绘制文本图层 if (this.shapeType === 'text') { // 绘制文本图层
this._textPoint(); this._textPoint();
@ -58,16 +58,20 @@ export default class PointLayer extends Layer {
} }
break; break;
case 'image':// 绘制图片标注 case 'image':// 绘制图片标注
{
const imageAttribute = PointBuffer.ImageBuffer(source.geoData, this.StyleData, { imagePos: this.scene.image.imagePos }); const imageAttribute = PointBuffer.ImageBuffer(source.geoData, this.StyleData, { imagePos: this.scene.image.imagePos });
const imageMesh = drawPoint.DrawImage(imageAttribute, { ...style, texture: this.scene.image.texture }); const imageMesh = drawPoint.DrawImage(imageAttribute, { ...style, texture: this.scene.image.texture });
this.add(imageMesh); this.add(imageMesh);
break; break;
}
case 'normal' : // 原生点 case 'normal' : // 原生点
{
const normalAttribute = PointBuffer.NormalBuffer(source.geoData, this.StyleData, style); const normalAttribute = PointBuffer.NormalBuffer(source.geoData, this.StyleData, style);
const normalPointMesh = drawPoint.DrawNormal(normalAttribute, style); const normalPointMesh = drawPoint.DrawNormal(normalAttribute, style);
this.add(normalPointMesh); this.add(normalPointMesh);
} }
} }
}
_getShape() { _getShape() {
let shape = null; let shape = null;
if (!this.StyleData[0].hasOwnProperty('shape')) { if (!this.StyleData[0].hasOwnProperty('shape')) {
@ -82,7 +86,7 @@ export default class PointLayer extends Layer {
if (pointShape['2d'].indexOf(shape) !== -1 || pointShape['3d'].indexOf(shape) !== -1) { if (pointShape['2d'].indexOf(shape) !== -1 || pointShape['3d'].indexOf(shape) !== -1) {
return 'fill'; return 'fill';
} else if (shape == 'text') { } else if (shape === 'text') {
return 'text'; return 'text';
} else if (this.scene.image.imagesIds.indexOf(shape) !== -1) { } else if (this.scene.image.imagesIds.indexOf(shape) !== -1) {
return 'image'; return 'image';