mirror of https://gitee.com/antv-l7/antv-l7
fix(scene):鼠标事件监听
This commit is contained in:
parent
1c04831fe3
commit
1b73136f1f
|
@ -36,25 +36,32 @@ class Picking {
|
|||
this._resizeHandler = this._resizeTexture.bind(this);
|
||||
window.addEventListener('resize', this._resizeHandler, false);
|
||||
|
||||
this._mouseUpHandler = this._onMouseUp.bind(this);
|
||||
this._world._container.addEventListener('mouseup', this._mouseUpHandler, false);
|
||||
this._world._container.addEventListener('mousemove', this._mouseUpHandler, false);
|
||||
this._world._container.addEventListener('mousemove', this._onWorldMove.bind(this), false);
|
||||
// this._mouseUpHandler = this._onMouseUp.bind(this);
|
||||
// this._world._container.addEventListener('mouseup', this._mouseUpHandler, false);
|
||||
// this._world._container.addEventListener('mousemove', this._mouseUpHandler, 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) {
|
||||
// Only react to main button click
|
||||
// if (event.button !== 0) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
const point = { x: event.clientX, y: event.clientY,type:event.type};
|
||||
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);
|
||||
// this._pick(point, normalisedPoint);
|
||||
}
|
||||
|
||||
|
||||
_onWorldMove() {
|
||||
|
||||
|
@ -111,7 +118,7 @@ class Picking {
|
|||
item.type = point.type;
|
||||
this._world.emit('pick', item);
|
||||
this._world.emit('pick-' + object.name, item);
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
_updateRender() {
|
||||
|
@ -152,8 +159,8 @@ class Picking {
|
|||
point3d: _point3d,
|
||||
intersects
|
||||
};
|
||||
return item
|
||||
|
||||
return item;
|
||||
|
||||
}
|
||||
|
||||
// Add mesh to picking scene
|
||||
|
|
|
@ -65,6 +65,7 @@ export default class Layer extends Base {
|
|||
scene._engine._scene.add(this._object3D);
|
||||
this.layerMesh = null;
|
||||
this.layerLineMesh = null;
|
||||
this._addPickingEvents();
|
||||
|
||||
}
|
||||
/**
|
||||
|
@ -260,11 +261,11 @@ export default class Layer extends Base {
|
|||
const resetHander = this._resetStyle.bind(this);
|
||||
if (this.get('allowActive')) {
|
||||
|
||||
this.on('active', activeHander);
|
||||
this.on('mousemove', activeHander);
|
||||
this.on('mouseleave', resetHander);
|
||||
|
||||
} else {
|
||||
this.off('active', activeHander);
|
||||
this.off('mousemove', activeHander);
|
||||
this.off('mouseleave', resetHander);
|
||||
}
|
||||
}
|
||||
|
@ -427,11 +428,11 @@ export default class Layer extends Base {
|
|||
});
|
||||
}
|
||||
}
|
||||
on(type, callback) {
|
||||
// on(type, callback) {
|
||||
|
||||
this._addPickingEvents();
|
||||
super.on(type, callback);
|
||||
}
|
||||
// this._addPickingEvents();
|
||||
// super.on(type, callback);
|
||||
// }
|
||||
getPickingId() {
|
||||
return this.scene._engine._picking.getNextId();
|
||||
}
|
||||
|
@ -469,8 +470,8 @@ export default class Layer extends Base {
|
|||
_addPickingEvents() {
|
||||
// TODO: Find a way to properly remove this listener on destroy
|
||||
this.scene.on('pick-' + this.layerId, e => {
|
||||
const { featureId, point2d,type} = e;
|
||||
|
||||
const { featureId, point2d, type } = e;
|
||||
|
||||
if (featureId < -100 && this._activeIds !== null) {
|
||||
this.emit('mouseleave');
|
||||
return;
|
||||
|
@ -484,23 +485,9 @@ export default class Layer extends Base {
|
|||
pixel: point2d,
|
||||
lnglat: { lng: lnglat.lng, lat: lnglat.lat }
|
||||
};
|
||||
if(featureId>=0) {
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
if (featureId >= 0) {
|
||||
this.emit(type, target);
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
@ -642,7 +629,7 @@ export default class Layer extends Base {
|
|||
this._object3D = null;
|
||||
this.scene = null;
|
||||
}
|
||||
_preRender(){
|
||||
_preRender() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,7 +18,6 @@ export default class Scene extends Base {
|
|||
}
|
||||
|
||||
_initEngine(mapContainer) {
|
||||
this._el = mapContainer;
|
||||
this._engine = new Engine(mapContainer, this);
|
||||
this._engine.run();
|
||||
}
|
||||
|
@ -41,6 +40,7 @@ export default class Scene extends Base {
|
|||
this.map = Map.map;
|
||||
Map.asyncCamera(this._engine);
|
||||
this.initLayer();
|
||||
this._registEvents();
|
||||
this.emit('loaded');
|
||||
});
|
||||
|
||||
|
@ -87,7 +87,7 @@ export default class Scene extends Base {
|
|||
_addLayer() {
|
||||
|
||||
}
|
||||
_registEvents(){
|
||||
_registEvents() {
|
||||
const events = [
|
||||
'mouseout',
|
||||
'mouseover',
|
||||
|
@ -98,11 +98,12 @@ export default class Scene extends Base {
|
|||
'click',
|
||||
'dblclick'
|
||||
];
|
||||
events.forEach((event)=>{
|
||||
this._el.addEventListener(event, e => {
|
||||
|
||||
events.forEach(event => {
|
||||
this._container.addEventListener(event, e => {
|
||||
// 要素拾取
|
||||
this._engine._picking.pickdata(e);
|
||||
}, false);
|
||||
})
|
||||
});
|
||||
}
|
||||
// 代理map事件
|
||||
removeLayer(layer) {
|
||||
|
|
|
@ -9,8 +9,8 @@ export { Points } from 'three/src/objects/Points.js';
|
|||
export { LineSegments } from 'three/src/objects/LineSegments.js';
|
||||
export { Mesh } from 'three/src/objects/Mesh.js';
|
||||
export { Texture } from 'three/src/textures/Texture.js';
|
||||
//export { DirectionalLight } from 'three/src/lights/DirectionalLight.js';
|
||||
//export { AmbientLight } from 'three/src/lights/AmbientLight.js';
|
||||
// export { DirectionalLight } from 'three/src/lights/DirectionalLight.js';
|
||||
// export { AmbientLight } from 'three/src/lights/AmbientLight.js';
|
||||
export { WebGLRenderTarget } from 'three/src/renderers/WebGLRenderTarget.js';
|
||||
export { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera.js';
|
||||
export { BufferGeometry } from 'three/src/core/BufferGeometry.js';
|
||||
|
|
|
@ -154,11 +154,11 @@ export function Line(path, props, positionsIndex) {
|
|||
positions.push(...point);
|
||||
positions.push(...point);
|
||||
|
||||
if(pointIndex===0){
|
||||
attrDistance.push(0, 0);
|
||||
} else{
|
||||
const d = attrDistance[pointIndex * 2-1] + lineSegmentDistance(path[pointIndex-1],path[pointIndex]);
|
||||
attrDistance.push(d,d);
|
||||
if (pointIndex === 0) {
|
||||
attrDistance.push(0, 0);
|
||||
} else {
|
||||
const d = attrDistance[pointIndex * 2 - 1] + lineSegmentDistance(path[pointIndex - 1], path[pointIndex]);
|
||||
attrDistance.push(d, d);
|
||||
}
|
||||
|
||||
index += 2;
|
||||
|
@ -171,9 +171,9 @@ export function Line(path, props, positionsIndex) {
|
|||
miter.push(-m);
|
||||
miter.push(m);
|
||||
});
|
||||
attrDistance = attrDistance.map((d)=>{
|
||||
return d / attrDistance[attrDistance.length-1];
|
||||
})
|
||||
attrDistance = attrDistance.map(d => {
|
||||
return d / attrDistance[attrDistance.length - 1];
|
||||
});
|
||||
return {
|
||||
positions,
|
||||
normal,
|
||||
|
@ -186,9 +186,9 @@ export function Line(path, props, positionsIndex) {
|
|||
};
|
||||
|
||||
}
|
||||
function lineSegmentDistance(end,start) {
|
||||
const dx = start[0] - end[0];
|
||||
const dy = start[1] - end[1];
|
||||
const dz = start[2] - end[2];
|
||||
return Math.sqrt(dx * dx + dy * dy + dz * dz);
|
||||
function lineSegmentDistance(end, start) {
|
||||
const dx = start[0] - end[0];
|
||||
const dy = start[1] - end[1];
|
||||
const dz = start[2] - end[2];
|
||||
return Math.sqrt(dx * dx + dy * dy + dz * dz);
|
||||
}
|
||||
|
|
|
@ -60,15 +60,15 @@ export default class LineLayer extends Layer {
|
|||
if (animateOptions.enable) {
|
||||
|
||||
material.setDefinesvalue('ANIMATE', true);
|
||||
const {duration,interval,trailLength,repeat = Infinity} = animateOptions;
|
||||
const { duration, interval, trailLength, repeat = Infinity } = animateOptions;
|
||||
this.animateDuration = this.scene._engine.clock.getElapsedTime() + duration * repeat;
|
||||
material.upDateUninform({
|
||||
u_duration: duration,
|
||||
u_interval: interval,
|
||||
u_trailLength:trailLength,
|
||||
u_trailLength: trailLength
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
} else {
|
||||
geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1));
|
||||
|
@ -95,8 +95,8 @@ export default class LineLayer extends Layer {
|
|||
}
|
||||
return this;
|
||||
}
|
||||
_preRender(){
|
||||
if(this.animateDuration>0 && this.animateDuration< this.scene._engine.clock.getElapsedTime()){
|
||||
_preRender() {
|
||||
if (this.animateDuration > 0 && this.animateDuration < this.scene._engine.clock.getElapsedTime()) {
|
||||
this.layerMesh.material.setDefinesvalue('ANIMATE', false);
|
||||
this.emit('animateEnd');
|
||||
this.animateDuration = Infinity;
|
||||
|
|
|
@ -32,7 +32,7 @@ export default class PointLayer extends Layer {
|
|||
return this;
|
||||
}
|
||||
_prepareRender() {
|
||||
const { opacity, strokeWidth, stroke, strokeOpacity, shape, fill } = this.get('styleOptions');
|
||||
const { stroke, fill } = this.get('styleOptions');
|
||||
if (this.shapeType === 'text') { // 绘制文本图层
|
||||
|
||||
this._textPoint();
|
||||
|
@ -58,14 +58,18 @@ export default class PointLayer extends Layer {
|
|||
}
|
||||
break;
|
||||
case 'image':// 绘制图片标注
|
||||
const imageAttribute = PointBuffer.ImageBuffer(source.geoData, this.StyleData, { imagePos: this.scene.image.imagePos });
|
||||
const imageMesh = drawPoint.DrawImage(imageAttribute, { ...style, texture: this.scene.image.texture });
|
||||
this.add(imageMesh);
|
||||
break;
|
||||
{
|
||||
const imageAttribute = PointBuffer.ImageBuffer(source.geoData, this.StyleData, { imagePos: this.scene.image.imagePos });
|
||||
const imageMesh = drawPoint.DrawImage(imageAttribute, { ...style, texture: this.scene.image.texture });
|
||||
this.add(imageMesh);
|
||||
break;
|
||||
}
|
||||
case 'normal' : // 原生点
|
||||
const normalAttribute = PointBuffer.NormalBuffer(source.geoData, this.StyleData, style);
|
||||
const normalPointMesh = drawPoint.DrawNormal(normalAttribute, style);
|
||||
this.add(normalPointMesh);
|
||||
{
|
||||
const normalAttribute = PointBuffer.NormalBuffer(source.geoData, this.StyleData, style);
|
||||
const normalPointMesh = drawPoint.DrawNormal(normalAttribute, style);
|
||||
this.add(normalPointMesh);
|
||||
}
|
||||
}
|
||||
}
|
||||
_getShape() {
|
||||
|
@ -82,7 +86,7 @@ export default class PointLayer extends Layer {
|
|||
|
||||
if (pointShape['2d'].indexOf(shape) !== -1 || pointShape['3d'].indexOf(shape) !== -1) {
|
||||
return 'fill';
|
||||
} else if (shape == 'text') {
|
||||
} else if (shape === 'text') {
|
||||
return 'text';
|
||||
} else if (this.scene.image.imagesIds.indexOf(shape) !== -1) {
|
||||
return 'image';
|
||||
|
|
|
@ -19,4 +19,4 @@ setTimeout(function() {
|
|||
const d = encodeURIComponent(JSON.stringify([ newObj ]));
|
||||
image.src = `${SERVER_URL}?BIProfile=merge&d=${d}`;
|
||||
}
|
||||
}, 3000);
|
||||
}, 3000);
|
||||
|
|
Loading…
Reference in New Issue