diff --git a/demos/greatcircle.html b/demos/greatcircle.html
new file mode 100644
index 0000000000..b2d1fe28f5
--- /dev/null
+++ b/demos/greatcircle.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+ 弧线图
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/geom/buffer/line.js b/src/geom/buffer/line.js
index 680829d3e1..74612384dd 100644
--- a/src/geom/buffer/line.js
+++ b/src/geom/buffer/line.js
@@ -3,11 +3,7 @@ import { lineShape } from '../shape';
export default class LineBuffer extends BufferBase {
geometryBuffer() {
- const layerData = this.get('layerData');
const shapeType = this.shapeType = this.get('shapeType');
- const positions = [];
- const positionsIndex = [];
- const instances = [];
if (shapeType === 'line') {
this.attributes = this._getMeshLineAttributes();
return;
@@ -15,22 +11,6 @@ export default class LineBuffer extends BufferBase {
this.attributes = this._getArcLineAttributes();
return;
}
- layerData.forEach((item, index) => {
- const props = item;
- const attrData = this._getShape(item.coordinates, props, index);
- positions.push(...attrData.positions);
- positionsIndex.push(...attrData.indexes);
- if (attrData.hasOwnProperty('instances')) {
- instances.push(...attrData.instances);
- }
- });
- this.bufferStruct.style = layerData;
- this.bufferStruct.verts = positions;
- this.bufferStruct.indexs = positionsIndex;
- if (instances.length > 0) {
- this.bufferStruct.instances = instances;
- }
- this.attributes = this._toAttributes(this.bufferStruct);
}
_getShape(geo, props, index) {
@@ -55,6 +35,7 @@ export default class LineBuffer extends BufferBase {
const indexArray = [];
const sizes = [];
const instances = [];
+ const pickingIds = [];
layerData.forEach(item => {
const props = item;
const positionCount = positions.length / 3;
@@ -64,8 +45,10 @@ export default class LineBuffer extends BufferBase {
indexArray.push(...attrData.indexArray);
instances.push(...attrData.instances);
sizes.push(...attrData.sizes);
+ pickingIds.push(...attrData.pickingIds);
});
return {
+ pickingIds,
positions,
colors,
indexArray,
@@ -122,38 +105,4 @@ export default class LineBuffer extends BufferBase {
totalDistance
};
}
-
- _toAttributes(bufferStruct) {
- const vertCount = bufferStruct.verts.length;
- const vertices = new Float32Array(vertCount * 3);
- const pickingIds = new Float32Array(vertCount);
- const inposs = new Float32Array(vertCount * 4);
- const colors = new Float32Array(vertCount * 4);
- for (let i = 0; i < vertCount; i++) {
- const index = bufferStruct.indexs[i];
- const color = bufferStruct.style[index].color;
- const id = bufferStruct.style[index].id;
- vertices[i * 3] = bufferStruct.verts[i][0];
- vertices[i * 3 + 1] = bufferStruct.verts[i][1];
- vertices[i * 3 + 2] = bufferStruct.verts[i][2];
- colors[i * 4] = color[0];
- pickingIds[i] = id;
- colors[i * 4 + 1] = color[1];
- colors[i * 4 + 2] = color[2];
- colors[i * 4 + 3] = color[3];
- if (bufferStruct.instances) { // 弧线
- inposs[i * 4] = bufferStruct.instances[i][0];
- inposs[i * 4 + 1] = bufferStruct.instances[i][1];
- inposs[i * 4 + 2] = bufferStruct.instances[i][2];
- inposs[i * 4 + 3] = bufferStruct.instances[i][3];
- }
-
- }
- return {
- pickingIds,
- vertices,
- colors,
- inposs
- };
- }
}
diff --git a/src/geom/material/lineMaterial.js b/src/geom/material/lineMaterial.js
index 68754d0762..8ff74a6a78 100644
--- a/src/geom/material/lineMaterial.js
+++ b/src/geom/material/lineMaterial.js
@@ -1,8 +1,6 @@
import * as THREE from '../../core/three';
import Material from './material';
import { getModule, wrapUniforms } from '../../util/shaderModule';
-import arcline_frag from '../shader/arcline_frag.glsl';
-import arcline_vert from '../shader/arcline_vert.glsl';
import merge from '@antv/util/lib/deep-mix';
export function LineMaterial(options) {
@@ -23,17 +21,22 @@ export function LineMaterial(options) {
return material;
}
export function ArcLineMaterial(options) {
+ let moduleName = 'arcline';
+ if (options.shapeType === 'greatCircle') {
+ moduleName = 'greatcircle';
+ }
+ const { vs, fs } = getModule(moduleName);
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity || 1.0 },
- segmentNumber: { value: 49 },
+ segmentNumber: { value: 29 },
u_time: { value: 0 },
u_zoom: { value: options.u_zoom || 10 },
u_activeId: { value: options.activeId || 0 },
u_activeColor: { value: options.activeColor || [ 1.0, 0, 0, 1.0 ] }
},
- vertexShader: arcline_vert,
- fragmentShader: arcline_frag,
+ vertexShader: vs,
+ fragmentShader: fs,
transparent: true,
blending: THREE.AdditiveBlending
});
diff --git a/src/geom/shader/arcline_vert.glsl b/src/geom/shader/arcline_vert.glsl
index 209306ddd4..1b0289ca13 100644
--- a/src/geom/shader/arcline_vert.glsl
+++ b/src/geom/shader/arcline_vert.glsl
@@ -4,6 +4,8 @@ attribute vec4 a_instance;
attribute float a_size;
uniform float u_zoom;
uniform float u_time;
+uniform float u_activeId : 0;
+uniform vec4 u_activeColor : [ 1.0, 0, 0, 1.0 ];
uniform mat4 matModelViewProjection;
uniform float segmentNumber;
varying vec4 v_color;
@@ -42,7 +44,6 @@ vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) {
void main() {
- float visindex =mod(u_time *10.,segmentNumber);
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
vec2 source = a_instance.rg;
vec2 target = a_instance.ba;
@@ -55,13 +56,11 @@ void main() {
vec3 next = getPos(source, target, nextSegmentRatio);
vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, position.y);
gl_Position =matModelViewProjection * vec4(vec3(curr + vec3(offset, 0.0)),1.0);
- // float apha = 0.;
- // if( position.x> 0. && position.x