diff --git a/examples/line/arc/demo/arcCircle.js b/examples/line/arc/demo/arcCircle.js index 3fb1f37441..7b28638742 100644 --- a/examples/line/arc/demo/arcCircle.js +++ b/examples/line/arc/demo/arcCircle.js @@ -27,8 +27,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') .shape('greatcircle') .color('#8C1EB2') .style({ - opacity: 0.8, - blur: 0.99 + opacity: 0.8 }); scene.addLayer(layer); }); diff --git a/lerna.json b/lerna.json index 10155db72c..4775acebad 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.0.18", + "version": "2.0.19", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/package.json b/package.json index 87c2d5c404..306f9456a3 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,7 @@ "scripts": { "start": "yarn run site:clean && yarn run site:develop", "site:develop": "cross-env BABEL_ENV=site gatsby develop --open -H 0.0.0.0", - "site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths --no-uglify", + "site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths", "site:clean": "gatsby clean", "site:deploy": "yarn run site:build && gh-pages -d public", "site:publish": "gh-pages -d public", diff --git a/packages/component/package.json b/packages/component/package.json index 26f86a51c6..a194fdea9b 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-component", - "version": "2.0.18", + "version": "2.0.19", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -24,8 +24,8 @@ "author": "lzxue", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.0.18", - "@antv/l7-utils": "^2.0.18", + "@antv/l7-core": "^2.0.19", + "@antv/l7-utils": "^2.0.19", "@babel/runtime": "^7.7.7", "eventemitter3": "^4.0.0", "inversify": "^5.0.1", diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts index 20e9f82e2e..bcf15c05db 100644 --- a/packages/component/src/marker.ts +++ b/packages/component/src/marker.ts @@ -252,32 +252,32 @@ export default class Marker extends EventEmitter { element.addEventListener('click', (e: MouseEvent) => { this.onMapClick(e); }); - element.addEventListener('click', this.eventHander); + element.addEventListener('click', this.eventHandle); applyAnchorClass(element, anchor, 'marker'); } private registerMarkerEvent(element: HTMLElement) { - element.addEventListener('mousemove', this.eventHander); - element.addEventListener('click', this.eventHander); - element.addEventListener('mousedown', this.eventHander); - element.addEventListener('mouseup', this.eventHander); - element.addEventListener('dblclick', this.eventHander); - element.addEventListener('contextmenu', this.eventHander); - element.addEventListener('mouseover', this.eventHander); - element.addEventListener('mouseout', this.eventHander); + element.addEventListener('mousemove', this.eventHandle); + element.addEventListener('click', this.eventHandle); + element.addEventListener('mousedown', this.eventHandle); + element.addEventListener('mouseup', this.eventHandle); + element.addEventListener('dblclick', this.eventHandle); + element.addEventListener('contextmenu', this.eventHandle); + element.addEventListener('mouseover', this.eventHandle); + element.addEventListener('mouseout', this.eventHandle); } private unRegisterMarkerEvent() { const element = this.getElement(); - element.removeEventListener('mousemove', this.eventHander); - element.removeEventListener('click', this.eventHander); - element.removeEventListener('mousedown', this.eventHander); - element.removeEventListener('mouseup', this.eventHander); - element.removeEventListener('dblclick', this.eventHander); - element.removeEventListener('contextmenu', this.eventHander); - element.removeEventListener('mouseover', this.eventHander); - element.removeEventListener('mouseout', this.eventHander); + element.removeEventListener('mousemove', this.eventHandle); + element.removeEventListener('click', this.eventHandle); + element.removeEventListener('mousedown', this.eventHandle); + element.removeEventListener('mouseup', this.eventHandle); + element.removeEventListener('dblclick', this.eventHandle); + element.removeEventListener('contextmenu', this.eventHandle); + element.removeEventListener('mouseover', this.eventHandle); + element.removeEventListener('mouseout', this.eventHandle); } - private eventHander = (e: MouseEvent) => { + private eventHandle = (e: MouseEvent) => { this.emit(e.type, { target: e, data: this.markerOption.extData, diff --git a/packages/core/package.json b/packages/core/package.json index f9cf1f6126..9cb3495279 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-core", - "version": "2.0.18", + "version": "2.0.19", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -22,7 +22,7 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-utils": "^2.0.18", + "@antv/l7-utils": "^2.0.19", "@babel/runtime": "^7.7.7", "@mapbox/tiny-sdf": "^1.1.1", "ajv": "^6.10.2", diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 8c164f1b56..42b070fa54 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -165,10 +165,10 @@ export interface ILayer { /** * 事件 */ - on(type: string, hander: (...args: any[]) => void): void; - off(type: string, hander: (...args: any[]) => void): void; - emit(type: string, hander: unknown): void; - once(type: string, hander: (...args: any[]) => void): void; + on(type: string, handler: (...args: any[]) => void): void; + off(type: string, handler: (...args: any[]) => void): void; + emit(type: string, handler: unknown): void; + once(type: string, handler: (...args: any[]) => void): void; /** * JSON Schema 用于校验配置项 */ diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts index 1cad47d771..f397f86d41 100644 --- a/packages/core/src/services/map/IMapService.ts +++ b/packages/core/src/services/map/IMapService.ts @@ -121,6 +121,8 @@ export interface IMapConfig { maxZoom?: number; attributionControl?: boolean; + + [key: string]: any; } /** diff --git a/packages/core/src/services/renderer/passes/PixelPickingPass.ts b/packages/core/src/services/renderer/passes/PixelPickingPass.ts index 3227532a0a..e6d6c5a592 100644 --- a/packages/core/src/services/renderer/passes/PixelPickingPass.ts +++ b/packages/core/src/services/renderer/passes/PixelPickingPass.ts @@ -75,11 +75,11 @@ export default class PixelPickingPass< this.interactionService.on(InteractionEvent.Hover, this.pickFromPickingFBO); this.interactionService.on( InteractionEvent.Select, - this.selectFeatureHander.bind(this), + this.selectFeatureHandle.bind(this), ); this.interactionService.on( InteractionEvent.Active, - this.highlightFeatureHander.bind(this), + this.highlightFeatureHandle.bind(this), ); } @@ -259,12 +259,12 @@ export default class PixelPickingPass< this.layerService.renderLayers(); } - private selectFeatureHander({ featureId }: Partial) { + private selectFeatureHandle({ featureId }: Partial) { const pickedColors = encodePickingColor(featureId as number); this.selectFeature(new Uint8Array(pickedColors)); } - private highlightFeatureHander({ featureId }: Partial) { + private highlightFeatureHandle({ featureId }: Partial) { const pickedColors = encodePickingColor(featureId as number); this.highlightPickedFeature(new Uint8Array(pickedColors)); } diff --git a/packages/core/src/services/scene/ISceneService.ts b/packages/core/src/services/scene/ISceneService.ts index 50bc35ab01..03748bc587 100644 --- a/packages/core/src/services/scene/ISceneService.ts +++ b/packages/core/src/services/scene/ISceneService.ts @@ -3,8 +3,8 @@ import { IMapConfig } from '../map/IMapService'; import { IRenderConfig } from '../renderer/IRendererService'; export interface ISceneService { - on(type: string, hander: (...args: any[]) => void): void; - off(type: string, hander: (...args: any[]) => void): void; + on(type: string, handle: (...args: any[]) => void): void; + off(type: string, handle: (...args: any[]) => void): void; removeAllListeners(event?: string): this; init(config: IMapConfig & IRenderConfig): void; addLayer(layer: ILayer): void; diff --git a/packages/l7/package.json b/packages/l7/package.json index 592059b820..5e3167ffd3 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "2.0.18", + "version": "2.0.19", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -24,11 +24,11 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-component": "^2.0.18", - "@antv/l7-core": "^2.0.18", - "@antv/l7-layers": "^2.0.18", - "@antv/l7-maps": "^2.0.18", - "@antv/l7-scene": "^2.0.18", + "@antv/l7-component": "^2.0.19", + "@antv/l7-core": "^2.0.19", + "@antv/l7-layers": "^2.0.19", + "@antv/l7-maps": "^2.0.19", + "@antv/l7-scene": "^2.0.19", "@babel/runtime": "^7.7.7" }, "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e", diff --git a/packages/layers/package.json b/packages/layers/package.json index 054178937d..cd0f0a2778 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-layers", - "version": "2.0.18", + "version": "2.0.19", "description": "L7's collection of built-in layers", "main": "lib/index.js", "module": "es/index.js", @@ -22,9 +22,9 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.0.18", - "@antv/l7-source": "^2.0.18", - "@antv/l7-utils": "^2.0.18", + "@antv/l7-core": "^2.0.19", + "@antv/l7-source": "^2.0.19", + "@antv/l7-utils": "^2.0.19", "@babel/runtime": "^7.7.7", "@mapbox/martini": "^0.1.0", "@turf/meta": "^6.0.2", diff --git a/packages/layers/src/line/models/arc.ts b/packages/layers/src/line/models/arc.ts index 9963a24a36..0ad24a1936 100644 --- a/packages/layers/src/line/models/arc.ts +++ b/packages/layers/src/line/models/arc.ts @@ -12,7 +12,7 @@ import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineArcTriangulation } from '../../core/triangulation'; import line_arc_frag from '../shaders/line_arc_frag.glsl'; -import line_arc2d_vert from '../shaders/line_bezier_vert.glsl'; +import line_arc2d_vert from '../shaders/line_arc_vert.glsl'; const lineStyleObj: { [key: string]: number } = { solid: 0.0, dash: 1.0, diff --git a/packages/layers/src/line/models/arc_3d.ts b/packages/layers/src/line/models/arc_3d.ts index 4110ae6c7b..a96c6fcade 100644 --- a/packages/layers/src/line/models/arc_3d.ts +++ b/packages/layers/src/line/models/arc_3d.ts @@ -10,8 +10,8 @@ import { import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineArcTriangulation } from '../../core/triangulation'; +import line_arc_vert from '../shaders/line_arc_3d_vert.glsl'; import line_arc_frag from '../shaders/line_arc_frag.glsl'; -import line_arc_vert from '../shaders/line_arc_vert.glsl'; const lineStyleObj: { [key: string]: number } = { solid: 0.0, dash: 1.0, diff --git a/packages/layers/src/line/models/great_circle.ts b/packages/layers/src/line/models/great_circle.ts index 16ce7d75af..a7e71e947c 100644 --- a/packages/layers/src/line/models/great_circle.ts +++ b/packages/layers/src/line/models/great_circle.ts @@ -11,8 +11,8 @@ import { import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineArcTriangulation } from '../../core/triangulation'; -import line_arc2d_vert from '../shaders/line_arc2d_vert.glsl'; import line_arc_frag from '../shaders/line_arc_frag.glsl'; +import line_arc2d_vert from '../shaders/line_arc_great_circle_vert.glsl'; const lineStyleObj: { [key: string]: number } = { solid: 0.0, dash: 1.0, diff --git a/packages/layers/src/line/shaders/line_arc_3d_vert.glsl b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl new file mode 100644 index 0000000000..d0ce46b315 --- /dev/null +++ b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl @@ -0,0 +1,91 @@ +#define LineTypeSolid 0.0 +#define LineTypeDash 1.0 +#define Animate 0.0 +attribute vec3 a_Position; +attribute vec4 a_Instance; +attribute vec4 a_Color; +attribute float a_Size; + +uniform mat4 u_ModelMatrix; +uniform float segmentNumber; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; +varying vec4 v_color; +varying vec2 v_normal; +varying float v_distance_ratio; +uniform float u_line_type: 0.0; +uniform vec2 u_dash_array: [10.0, 5.]; + +varying vec2 v_dash_array; + +#pragma include "projection" +#pragma include "project" +#pragma include "picking" + +float maps (float value, float start1, float stop1, float start2, float stop2) { + return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)); +} + +float getSegmentRatio(float index) { + return smoothstep(0.0, 1.0, index / (segmentNumber - 1.0)); +} + +float paraboloid(vec2 source, vec2 target, float ratio) { + vec2 x = mix(source, target, ratio); + vec2 center = mix(source, target, 0.5); + float dSourceCenter = distance(source, center); + float dXCenter = distance(x, center); + return (dSourceCenter + dXCenter) * (dSourceCenter - dXCenter); +} + +vec3 getPos(vec2 source, vec2 target, float segmentRatio) { + float vertex_height = paraboloid(source, target, segmentRatio); + + return vec3( + mix(source, target, segmentRatio), + sqrt(max(0.0, vertex_height)) + ); +} +vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { + // normalized direction of the line + vec2 dir_screenspace = normalize(line_clipspace); + // rotate by 90 degrees + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + + vec2 offset = dir_screenspace * offset_direction * a_Size / 2.0; + + return offset; +} +vec2 getNormal(vec2 line_clipspace, float offset_direction) { + // normalized direction of the line + vec2 dir_screenspace = normalize(line_clipspace); + // rotate by 90 degrees + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction); +} + +void main() { + v_color = a_Color; + vec2 source = project_position(vec4(a_Instance.rg, 0, 0)).xy; + vec2 target = project_position(vec4(a_Instance.ba, 0, 0)).xy; + float segmentIndex = a_Position.x; + float segmentRatio = getSegmentRatio(segmentIndex); + float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); + + if(u_line_type == LineTypeDash) { + v_distance_ratio = segmentIndex / segmentNumber; + float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); + } + if(u_aimate.x == Animate) { + v_distance_ratio = segmentIndex / segmentNumber; + } + + float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); + vec3 curr = getPos(source, target, segmentRatio); + vec3 next = getPos(source, target, nextSegmentRatio); + vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y); + v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); + + gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0)); + setPickingColor(a_PickingColor); +} diff --git a/packages/layers/src/line/shaders/line_arc_frag.glsl b/packages/layers/src/line/shaders/line_arc_frag.glsl index 7c9802c707..c72c593c0d 100644 --- a/packages/layers/src/line/shaders/line_arc_frag.glsl +++ b/packages/layers/src/line/shaders/line_arc_frag.glsl @@ -18,7 +18,7 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; void main() { gl_FragColor = v_color; float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)); - gl_FragColor.a *= (blur * u_opacity); + gl_FragColor.a *= u_opacity * blur; if(u_line_type == LineTypeDash) { gl_FragColor.a *= blur * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y))); } diff --git a/packages/layers/src/line/shaders/line_arc2d_vert.glsl b/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl similarity index 99% rename from packages/layers/src/line/shaders/line_arc2d_vert.glsl rename to packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl index e9cfafb0d0..f16aaf417c 100644 --- a/packages/layers/src/line/shaders/line_arc2d_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl @@ -50,7 +50,7 @@ vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { // rotate by 90 degrees dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); vec2 offset = dir_screenspace * offset_direction * a_Size / 2.0; - return offset * vec2(1.0, -1.0); + return offset; } vec2 getNormal(vec2 line_clipspace, float offset_direction) { // normalized direction of the line diff --git a/packages/layers/src/line/shaders/line_arc_vert.glsl b/packages/layers/src/line/shaders/line_arc_vert.glsl index d0ce46b315..dd710d2de1 100644 --- a/packages/layers/src/line/shaders/line_arc_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_vert.glsl @@ -1,91 +1,85 @@ #define LineTypeSolid 0.0 #define LineTypeDash 1.0 #define Animate 0.0 +attribute vec4 a_Color; attribute vec3 a_Position; attribute vec4 a_Instance; -attribute vec4 a_Color; attribute float a_Size; - uniform mat4 u_ModelMatrix; uniform float segmentNumber; uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; varying vec4 v_color; varying vec2 v_normal; + varying float v_distance_ratio; uniform float u_line_type: 0.0; uniform vec2 u_dash_array: [10.0, 5.]; - varying vec2 v_dash_array; - #pragma include "projection" #pragma include "project" #pragma include "picking" -float maps (float value, float start1, float stop1, float start2, float stop2) { - return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)); +float bezier3(vec3 arr, float t) { + float ut = 1. - t; + return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t; +} +vec2 midPoint(vec2 source, vec2 target) { + vec2 center = target - source; + float r = length(center); + float theta = atan(center.y, center.x); + float thetaOffset = 0.314; + float r2 = r / 2.0 / cos(thetaOffset); + float theta2 = theta + thetaOffset; + vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y); + return mid; } - float getSegmentRatio(float index) { - return smoothstep(0.0, 1.0, index / (segmentNumber - 1.0)); + return smoothstep(0.0, 1.0, index / (segmentNumber - 1.)); } - -float paraboloid(vec2 source, vec2 target, float ratio) { - vec2 x = mix(source, target, ratio); - vec2 center = mix(source, target, 0.5); - float dSourceCenter = distance(source, center); - float dXCenter = distance(x, center); - return (dSourceCenter + dXCenter) * (dSourceCenter - dXCenter); -} - -vec3 getPos(vec2 source, vec2 target, float segmentRatio) { - float vertex_height = paraboloid(source, target, segmentRatio); - - return vec3( - mix(source, target, segmentRatio), - sqrt(max(0.0, vertex_height)) - ); +vec2 interpolate (vec2 source, vec2 target, float t) { + // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation + vec2 mid = midPoint(source, target); + vec3 x = vec3(source.x, mid.x, target.x); + vec3 y = vec3(source.y, mid.y, target.y); + return vec2(bezier3(x ,t), bezier3(y,t)); } vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { // normalized direction of the line vec2 dir_screenspace = normalize(line_clipspace); // rotate by 90 degrees - dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); - + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); vec2 offset = dir_screenspace * offset_direction * a_Size / 2.0; - return offset; } vec2 getNormal(vec2 line_clipspace, float offset_direction) { // normalized direction of the line vec2 dir_screenspace = normalize(line_clipspace); // rotate by 90 degrees - dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); - return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction); + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction); } void main() { v_color = a_Color; - vec2 source = project_position(vec4(a_Instance.rg, 0, 0)).xy; - vec2 target = project_position(vec4(a_Instance.ba, 0, 0)).xy; + vec2 source = a_Instance.rg; + vec2 target = a_Instance.ba; float segmentIndex = a_Position.x; float segmentRatio = getSegmentRatio(segmentIndex); float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); - - if(u_line_type == LineTypeDash) { - v_distance_ratio = segmentIndex / segmentNumber; - float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; - v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); - } - if(u_aimate.x == Animate) { + float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); + if(u_line_type == LineTypeDash) { + v_distance_ratio = segmentIndex / segmentNumber; + float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); + } + if(u_aimate.x == Animate) { v_distance_ratio = segmentIndex / segmentNumber; } - - float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); - vec3 curr = getPos(source, target, segmentRatio); - vec3 next = getPos(source, target, nextSegmentRatio); - vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y); + vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio), 0.0, 1.0)); + vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio), 0.0, 1.0)); v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); + vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y)); - gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0)); + gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); setPickingColor(a_PickingColor); } diff --git a/packages/layers/src/line/shaders/line_bezier_vert.glsl b/packages/layers/src/line/shaders/line_bezier_vert.glsl deleted file mode 100644 index 50a8b340ae..0000000000 --- a/packages/layers/src/line/shaders/line_bezier_vert.glsl +++ /dev/null @@ -1,85 +0,0 @@ -#define LineTypeSolid 0.0 -#define LineTypeDash 1.0 -#define Animate 0.0 -attribute vec4 a_Color; -attribute vec3 a_Position; -attribute vec4 a_Instance; -attribute float a_Size; -uniform mat4 u_ModelMatrix; -uniform float segmentNumber; -uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; -varying vec4 v_color; -varying vec2 v_normal; - -varying float v_distance_ratio; -uniform float u_line_type: 0.0; -uniform vec2 u_dash_array: [10.0, 5.]; -varying vec2 v_dash_array; -#pragma include "projection" -#pragma include "project" -#pragma include "picking" - -float bezier3(vec3 arr, float t) { - float ut = 1. - t; - return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t; -} -vec2 midPoint(vec2 source, vec2 target) { - vec2 center = target - source; - float r = length(center); - float theta = atan(center.y, center.x); - float thetaOffset = 0.314; - float r2 = r / 2.0 / cos(thetaOffset); - float theta2 = theta + thetaOffset; - vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y); - return mid; -} -float getSegmentRatio(float index) { - return smoothstep(0.0, 1.0, index / (segmentNumber - 1.)); -} -vec2 interpolate (vec2 source, vec2 target, float t) { - // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation - vec2 mid = midPoint(source, target); - vec3 x = vec3(source.x, mid.x, target.x); - vec3 y = vec3(source.y, mid.y, target.y); - return vec2(bezier3(x ,t), bezier3(y,t)); -} -vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { - // normalized direction of the line - vec2 dir_screenspace = normalize(line_clipspace); - // rotate by 90 degrees - dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); - vec2 offset = dir_screenspace * offset_direction * a_Size / 2.0; - return offset * vec2(1.0, -1.0); -} -vec2 getNormal(vec2 line_clipspace, float offset_direction) { - // normalized direction of the line - vec2 dir_screenspace = normalize(line_clipspace); - // rotate by 90 degrees - dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); - return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction); -} - -void main() { - v_color = a_Color; - vec2 source = a_Instance.rg; - vec2 target = a_Instance.ba; - float segmentIndex = a_Position.x; - float segmentRatio = getSegmentRatio(segmentIndex); - float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); - float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); - if(u_line_type == LineTypeDash) { - v_distance_ratio = segmentIndex / segmentNumber; - float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; - v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); - } - if(u_aimate.x == Animate) { - v_distance_ratio = segmentIndex / segmentNumber; - } - vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio), 0.0, 1.0)); - vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio), 0.0, 1.0)); - v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); - vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y)); - - gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); - setPickingColor(a_PickingColor); -} diff --git a/packages/maps/package.json b/packages/maps/package.json index 3e5ca81c53..739a4da358 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-maps", - "version": "2.0.18", + "version": "2.0.19", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -23,8 +23,8 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.0.18", - "@antv/l7-utils": "^2.0.18", + "@antv/l7-core": "^2.0.19", + "@antv/l7-utils": "^2.0.19", "@babel/runtime": "^7.7.7", "gl-matrix": "^3.1.0", "inversify": "^5.0.1", diff --git a/packages/renderer/package.json b/packages/renderer/package.json index 175c320315..494867f0e0 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-renderer", - "version": "2.0.18", + "version": "2.0.19", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -25,7 +25,7 @@ "gl": "^4.4.0" }, "dependencies": { - "@antv/l7-core": "^2.0.18", + "@antv/l7-core": "^2.0.19", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "lodash": "^4.17.15", diff --git a/packages/scene/package.json b/packages/scene/package.json index 2a2778c1b7..01590e1b16 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-scene", - "version": "2.0.18", + "version": "2.0.19", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -22,11 +22,11 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-component": "^2.0.18", - "@antv/l7-core": "^2.0.18", - "@antv/l7-maps": "^2.0.18", - "@antv/l7-renderer": "^2.0.18", - "@antv/l7-utils": "^2.0.18", + "@antv/l7-component": "^2.0.19", + "@antv/l7-core": "^2.0.19", + "@antv/l7-maps": "^2.0.19", + "@antv/l7-renderer": "^2.0.19", + "@antv/l7-utils": "^2.0.19", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "mapbox-gl": "^1.2.1", diff --git a/packages/source/package.json b/packages/source/package.json index d1001ad992..7d44c8ef19 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-source", - "version": "2.0.18", + "version": "2.0.19", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -24,8 +24,8 @@ "author": "lzxue", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.0.18", - "@antv/l7-utils": "^2.0.18", + "@antv/l7-core": "^2.0.19", + "@antv/l7-utils": "^2.0.19", "@babel/runtime": "^7.7.7", "@mapbox/geojson-rewind": "^0.4.0", "@turf/helpers": "^6.1.4", diff --git a/packages/utils/package.json b/packages/utils/package.json index 2793c13e9e..c24f614c74 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-utils", - "version": "2.0.18", + "version": "2.0.19", "description": "", "main": "lib/index.js", "module": "es/index.js", diff --git a/stories/Layers/components/Arc2DLine.tsx b/stories/Layers/components/Arc2DLine.tsx index 671afd3e02..67d4e2d305 100644 --- a/stories/Layers/components/Arc2DLine.tsx +++ b/stories/Layers/components/Arc2DLine.tsx @@ -23,28 +23,28 @@ export default class Arc2DLineDemo extends React.Component { zoom: 2, }), }); - const lineLayer = new LineLayer() + const lineLayer = new LineLayer({ + blend: 'normal', + }) .source(await response.text(), { parser: { type: 'csv', - x: 'lng1', - y: 'lat1', - x1: 'lng2', - y1: 'lat2', + x1: 'lng1', + y1: 'lat1', + x: 'lng2', + y: 'lat2', }, }) - .size(4) - .shape('greatcircle') - .color('rgb(13,64,140)') - .animate({ - interval: 0.5, - duration: 2, - trailLength: 0.4, - }) + .size(3) + .shape('arc') + .color('#8C1EB2') .style({ - opacity: 0.1, + opacity: 1, }); scene.addLayer(lineLayer); + lineLayer.on('click', (e) => { + console.log(e); + }); scene.render(); this.scene = scene; }