fix(scene):鼠标事件监听

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

View File

@ -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

View File

@ -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() {
}
}

View File

@ -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) {

View File

@ -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';

View File

@ -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);
}

View File

@ -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;

View File

@ -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';

View File

@ -19,4 +19,4 @@ setTimeout(function() {
const d = encodeURIComponent(JSON.stringify([ newObj ]));
image.src = `${SERVER_URL}?BIProfile=merge&d=${d}`;
}
}, 3000);
}, 3000);