p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(linelayer): remove normal line

This commit is contained in:
thinkinggis 2019-04-02 11:47:38 +08:00
parent 3d2bde558e
commit ee284d81cc
5 changed files with 37 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demos/line.html
View File

@ -46,11 +46,9 @@ scene.on('loaded', () => {
interval:1,
duration:2,
trailLength:0.1,
repeat:1,
repeat:1000,
})
.render();
linelayer.on('animateEnd',()=>{
scene.removeLayer(linelayer);
//linelayer.hide();

56
src/geom/shape/line.js
View File

@ -1,60 +1,4 @@
import { Vector3 } from '../../core/three';
import getNormal from 'polyline-normals';
/**
* shape meshLine
* @param {array} geo 坐标点
* @param {object} props 属性数据
* @param {int} index 原始数据ndex
* @return {object} 顶点坐标，索引坐标
*/
export function meshLine(geo, props, index) {
const dataLength = geo.length;
const width = props.size[0] * 50 || 100;
const dem = props.size[1] || 0;
const posArray = [];
const indexArray = [];
const points = [];
for (let i = 0; i < dataLength; i++) {
let previous = (i === 0) ? geo[0] : geo[i - 1];
let next = (i === dataLength - 1) ? geo[dataLength - 1] : geo[i + 1];
let current = geo[i];
previous = [ previous[0], previous[1], 0 ];
next = [ next[0], next[1], 0 ];
current = [ current[0], current[1], 0 ];
let dir = null;
if (i === 0 || i === dataLength - 1) {
dir = new Vector3(1, 1, 1);
} else {
const dir1 = new Vector3();
const dir2 = new Vector3();
dir = new Vector3();
dir1.subVectors(new Vector3(...current), new Vector3(...previous)).normalize();
dir2.subVectors(new Vector3(...next), new Vector3(...current)).normalize();
dir.addVectors(dir1, dir2).normalize();
}
let normal = [ -dir.y, dir.x, 0 ];
normal = [ normal[0] * width, normal[1] * width, 0 ];
const n1 = [ normal[0], normal[1], 0 ];
const n2 = [ -normal[0], -normal[1], 0 ];
const p1 = new Vector3();
const p2 = new Vector3();
p1.addVectors(new Vector3(...current), new Vector3(...n1));
p2.addVectors(new Vector3(...current), new Vector3(...n2));
points.push([ p1.x, p1.y, dem ], [ p2.x, p2.y, dem ]);
}// end of for
for (let i = 0; i < points.length - 2; i += 2) {
const ct = i;
const cb = i + 1;
const nt = i + 2;
const nb = i + 3;
posArray.push(points[ct], points[cb], points[nt]);
posArray.push(points[nt], points[cb], points[nb]);
indexArray.push(index, index, index);
indexArray.push(index, index, index);
}
return { positions: posArray, indexes: indexArray };
}
/**
* shape arc

152
src/layer/lineLayer.js
View File

@ -1,12 +1,7 @@
import Layer from '../core/layer';
import * as THREE from '../core/three';
import DrawLine from './render/line/drawMeshLine';
import DrawArc from './render/line/drawArc';
import { LineBuffer } from '../geom/buffer/index';
import {
LineMaterial,
ArcLineMaterial,
MeshLineMaterial,
DashLineMaterial
} from '../geom/material/lineMaterial';
export default class LineLayer extends Layer {
shape(type) {
this.shapeType = type;
@ -32,147 +27,24 @@ export default class LineLayer extends Layer {
draw() {
const layerData = this.layerData;
const style = this.get('styleOptions');
const animateOptions = this.get('animateOptions');
const activeOption = this.get('activedOptions');
const layerCfg = {
zoom: this.scene.getZoom(),
style,
animateOptions,
activeOption
};
const buffer = (this._buffer = new LineBuffer({
layerData,
shapeType: this.shapeType,
style
}));
const { opacity } = this.get('styleOptions');
const animateOptions = this.get('animateOptions');
const activeOption = this.get('activedOptions');
// const layerCfg = {
// ...style,
// ...animateOptions,
// ...activeOption
// };
const geometry = new THREE.BufferGeometry();
const { attributes } = buffer;
if (this.shapeType === 'arc') {
geometry.setIndex(attributes.indexArray);
geometry.addAttribute(
'pickingId',
new THREE.Float32BufferAttribute(attributes.pickingIds, 1)
);
geometry.addAttribute(
'position',
new THREE.Float32BufferAttribute(attributes.positions, 3)
);
geometry.addAttribute(
'a_color',
new THREE.Float32BufferAttribute(attributes.colors, 4)
);
geometry.addAttribute(
'a_instance',
new THREE.Float32BufferAttribute(attributes.instances, 4)
);
geometry.addAttribute(
'a_size',
new THREE.Float32BufferAttribute(attributes.sizes, 1)
);
const material = new ArcLineMaterial({
u_opacity: opacity,
u_zoom: this.scene.getZoom(),
activeColor: activeOption.fill
});
const mesh = new THREE.Mesh(geometry, material);
this.add(mesh);
} else if (this.shapeType === 'line') {
// DrawLine(attributes, layerCfg)
geometry.setIndex(attributes.indexArray);
geometry.addAttribute(
'pickingId',
new THREE.Float32BufferAttribute(attributes.pickingIds, 1)
);
geometry.addAttribute(
'position',
new THREE.Float32BufferAttribute(attributes.positions, 3)
);
geometry.addAttribute(
'a_color',
new THREE.Float32BufferAttribute(attributes.colors, 4)
);
geometry.addAttribute(
'a_size',
new THREE.Float32BufferAttribute(attributes.sizes, 1)
);
geometry.addAttribute(
'normal',
new THREE.Float32BufferAttribute(attributes.normal, 3)
);
geometry.addAttribute(
'a_miter',
new THREE.Float32BufferAttribute(attributes.miter, 1)
);
geometry.addAttribute(
'a_distance',
new THREE.Float32BufferAttribute(attributes.attrDistance, 1)
);
const lineType = style.lineType;
let material;
if (lineType !== 'dash') {
material = new MeshLineMaterial({
u_opacity: opacity,
u_zoom: this.scene.getZoom(),
activeColor: activeOption.fill
});
if (animateOptions.enable) {
material.setDefinesvalue('ANIMATE', true);
this.scene.startAnimate();
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
});
}
} else {
geometry.addAttribute(
'a_distance',
new THREE.Float32BufferAttribute(attributes.attrDistance, 1)
);
material = new DashLineMaterial({
u_opacity: opacity,
u_zoom: this.scene.getZoom(),
activeColor: activeOption.fill
});
}
const mesh = new THREE.Mesh(geometry, material);
this.add(mesh);
DrawArc(attributes, layerCfg, this);
} else {
// 直线
geometry.addAttribute(
'pickingId',
new THREE.Float32BufferAttribute(attributes.pickingIds, 1)
);
geometry.addAttribute(
'position',
new THREE.Float32BufferAttribute(attributes.vertices, 3)
);
geometry.addAttribute(
'a_color',
new THREE.Float32BufferAttribute(attributes.colors, 4)
);
const material = new LineMaterial({
u_opacity: opacity,
u_time: 0,
activeColor: activeOption.fill
});
if (animateOptions.enable) {
material.setDefinesvalue('ANIMATE', true);
this.scene.startAnimate();
}
const mesh = new THREE.LineSegments(geometry, material);
this.add(mesh);
DrawLine(attributes, layerCfg, this);
}
}
}

8
src/layer/render/line/drawArc.js
View File

@ -1,6 +1,7 @@
import * as THREE from '../../../core/three';
import { ArcLineMaterial } from '../../../geom/material/lineMaterial';
export default function DrawArcLine(attributes, style) {
export default function DrawArcLine(attributes, cfg, layer) {
const { style, activeOption } = cfg;
const { opacity, zoom } = style;
const geometry = new THREE.BufferGeometry();
geometry.setIndex(attributes.indexArray);
@ -10,10 +11,11 @@ export default function DrawArcLine(attributes, style) {
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
const lineMaterial = new ArcLineMaterial({
u_opacity: opacity,
u_zoom: zoom
u_zoom: zoom,
activeColor: activeOption.fill
}, {
SHAPE: false
});
const arcMesh = new THREE.Mesh(geometry, lineMaterial);
return arcMesh;
layer.add(arcMesh);
}

37
src/layer/render/line/drawLine.js → src/layer/render/line/drawMeshLine.js
View File

@ -1,7 +1,7 @@
import * as THREE from '../../../core/three';
import { MeshLineMaterial } from '../../../geom/material/lineMaterial';
export default function DrawLine(attributes, style) {
const { opacity, zoom, animate, duration, interval, trailLength } = style;
export default function DrawLine(attributes, cfg, layer) {
const { style, animateOptions, activeOption, zoom } = cfg;
const geometry = new THREE.BufferGeometry();
geometry.setIndex(attributes.indexArray);
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
@ -11,33 +11,34 @@ export default function DrawLine(attributes, style) {
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normal, 3));
geometry.addAttribute('a_miter', new THREE.Float32BufferAttribute(attributes.miter, 1));
geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1));
const lineMaterial = new MeshLineMaterial({
u_opacity: opacity,
u_opacity: style.opacity,
u_zoom: zoom,
u_duration: duration,
u_interval: interval,
u_trailLength: trailLength,
u_time: 0
u_time: 0,
activeColor: activeOption.fill
}, {
SHAPE: false,
ANIMATE: animate
ANIMATE: false
});
const arcMesh = new THREE.Mesh(geometry, lineMaterial);
if (animate) {
this.scene.startAnimate();
const lineMesh = new THREE.Mesh(geometry, lineMaterial);
if (animateOptions.enable) {
layer.scene.startAnimate();
const {
duration,
interval,
trailLength,
duration = 2,
interval = 0.5,
trailLength = 0.5,
repeat = Infinity
} = style;
this.animateDuration =
this.scene._engine.clock.getElapsedTime() + duration * repeat;
} = animateOptions;
layer.animateDuration =
layer.scene._engine.clock.getElapsedTime() + duration * repeat;
lineMaterial.upDateUninform({
u_duration: duration,
u_interval: interval,
u_trailLength: trailLength
});
lineMaterial.setDefinesvalue('ANIMATE', true);
}
return arcMesh;
layer.add(lineMesh);
}