mirror of https://gitee.com/antv-l7/antv-l7
fix(scene):鼠标事件监听
This commit is contained in:
parent
c968530976
commit
983c4b5474
|
@ -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;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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';
|
||||||
|
|
Loading…
Reference in New Issue