diff --git a/demos/line.html b/demos/line.html
index 7c38f6cf1d..3f2e31c871 100644
--- a/demos/line.html
+++ b/demos/line.html
@@ -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();
diff --git a/src/geom/shape/line.js b/src/geom/shape/line.js
index ee6ea123e2..ec68f55770 100644
--- a/src/geom/shape/line.js
+++ b/src/geom/shape/line.js
@@ -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
diff --git a/src/layer/lineLayer.js b/src/layer/lineLayer.js
index bd039bc178..dc26bd307b 100644
--- a/src/layer/lineLayer.js
+++ b/src/layer/lineLayer.js
@@ -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);
}
}
}
diff --git a/src/layer/render/line/drawArc.js b/src/layer/render/line/drawArc.js
index 246b8b55aa..5324e0c821 100644
--- a/src/layer/render/line/drawArc.js
+++ b/src/layer/render/line/drawArc.js
@@ -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);
}
diff --git a/src/layer/render/line/drawLine.js b/src/layer/render/line/drawMeshLine.js
similarity index 65%
rename from src/layer/render/line/drawLine.js
rename to src/layer/render/line/drawMeshLine.js
index c509db47f4..bb3fbe15c7 100644
--- a/src/layer/render/line/drawLine.js
+++ b/src/layer/render/line/drawMeshLine.js
@@ -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);
}