From 6c5488c19c5b25b668b59e72477472d5778d4d58 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Tue, 7 Dec 2021 17:27:45 +0800 Subject: [PATCH] Shihuidev (#869) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 增加着色器的拾取计算控制、完善 arcmini * feat: 完善 enableShaderPick/disableShaderPick 功能 * style: lint style * feat: 补充调用高德地图公交线路查询 demo * style: lint style * feat: 优化弧线的纹理动画 * style: lint style * feat: 去除greatCircle 的纹理动画优化 * feat: 扩展点图层圆柱效果 * feat: 增加几何体的径向渐变配置 * style: lint style * fix: 修复bug 图层触发的事件跟图层设置的zIndex无关，只跟插入图层先后顺序有关 * style: lint style * feat: 补全挤出几何体拾取颜色的光照配置 * style: lint style * fix: 修复圆柱 cull 问题 mapbox amap 不同 * feat: 图层销毁时的内存泄漏 * style: lint style * chore: update version 2.6.6 -> 2.6.7 * feat: 平面弧线新增弧线偏移量的数据映射能力 * style: lint style --- lerna.json | 2 +- packages/component/package.json | 6 +- packages/core/package.json | 4 +- .../services/shader/ShaderModuleService.ts | 5 + packages/core/src/shaders/styleMapping.glsl | 9 +- .../shaders/styleMappingCalThetaOffset.glsl | 11 ++ packages/l7/package.json | 15 +-- packages/l7/src/version.ts | 2 +- packages/layers/package.json | 8 +- packages/layers/src/core/BaseModel.ts | 28 ++++- packages/layers/src/line/models/arc.ts | 9 +- .../src/line/shaders/line_arc_vert.glsl | 20 +-- packages/layers/src/utils/dataMappingStyle.ts | 8 +- packages/map/package.json | 4 +- packages/maps/package.json | 8 +- packages/mini/package.json | 12 +- packages/renderer/package.json | 4 +- packages/scene/package.json | 14 +-- packages/source/package.json | 6 +- packages/three/package.json | 8 +- packages/utils/package.json | 2 +- stories/Map/components/planeLine.tsx | 115 ++++++++++++++++++ stories/Map/map.stories.tsx | 2 + 23 files changed, 239 insertions(+), 63 deletions(-) create mode 100644 packages/core/src/shaders/styleMappingCalThetaOffset.glsl create mode 100644 stories/Map/components/planeLine.tsx diff --git a/lerna.json b/lerna.json index 3db0e40df3..f5d451cd59 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.6.6", + "version": "2.6.7", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/packages/component/package.json b/packages/component/package.json index 52f5be8675..49e7095293 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-component", - "version": "2.6.6", + "version": "2.6.7", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -25,8 +25,8 @@ "author": "lzxue", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.6.6", - "@antv/l7-utils": "^2.6.6", + "@antv/l7-core": "^2.6.7", + "@antv/l7-utils": "^2.6.7", "@babel/runtime": "^7.7.7", "eventemitter3": "^4.0.0", "inversify": "^5.0.1", diff --git a/packages/core/package.json b/packages/core/package.json index d64d9a72ca..4c94f1f572 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-core", - "version": "2.6.6", + "version": "2.6.7", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -24,7 +24,7 @@ "license": "ISC", "dependencies": { "@antv/async-hook": "^2.1.0", - "@antv/l7-utils": "^2.6.6", + "@antv/l7-utils": "^2.6.7", "@babel/runtime": "^7.7.7", "ajv": "^6.10.2", "element-resize-event": "^3.0.3", diff --git a/packages/core/src/services/shader/ShaderModuleService.ts b/packages/core/src/services/shader/ShaderModuleService.ts index a89022f4da..b1fa4b7810 100644 --- a/packages/core/src/services/shader/ShaderModuleService.ts +++ b/packages/core/src/services/shader/ShaderModuleService.ts @@ -17,6 +17,7 @@ import styleMapping from '../../shaders/styleMapping.glsl'; import styleMappingCalOpacity from '../../shaders/styleMappingCalOpacity.glsl'; import styleMappingCalStrokeOpacity from '../../shaders/styleMappingCalStrokeOpacity.glsl'; import styleMappingCalStrokeWidth from '../../shaders/styleMappingCalStrokeWidth.glsl'; +import styleMappingCalThetaOffset from '../../shaders/styleMappingCalThetaOffset.glsl'; const precisionRegExp = /precision\s+(high|low|medium)p\s+float/; const globalDefaultprecision = @@ -39,6 +40,10 @@ export default class ShaderModuleService implements IShaderModuleService { this.registerModule('light', { vs: light, fs: '' }); this.registerModule('picking', { vs: pickingVert, fs: pickingFrag }); this.registerModule('styleMapping', { vs: styleMapping, fs: '' }); + this.registerModule('styleMappingCalThetaOffset', { + vs: styleMappingCalThetaOffset, + fs: '', + }); this.registerModule('styleMappingCalOpacity', { vs: styleMappingCalOpacity, fs: '', diff --git a/packages/core/src/shaders/styleMapping.glsl b/packages/core/src/shaders/styleMapping.glsl index 599ccc2a7b..5d6c2534b3 100644 --- a/packages/core/src/shaders/styleMapping.glsl +++ b/packages/core/src/shaders/styleMapping.glsl @@ -23,6 +23,10 @@ bool hasOffsets() { // 判断 cell 中是否存在 offsets 的数据 return u_cellTypeLayout[2][0] > 0.0 && u_cellTypeLayout[3][3] > 0.0; } +bool hasThetaOffset() { // 判断 cell 中是否存在 thetaOffset 的数据 + return u_cellTypeLayout[2][1] > 0.0 && u_cellTypeLayout[3][3] > 0.0; +} + // 根据坐标位置先是计算 uv ，然后根据 uv 从数据纹理中取值 float pos2value(vec2 pos, float columnWidth, float rowHeight) { float u = (pos.r - 1.0) * columnWidth + columnWidth/2.0; @@ -53,12 +57,13 @@ float calCellCount() { // u_cellTypeLayout // cal_height, WIDTH, 0.0, 0.0, // rowCount columnCount - 几行几列 // 1.0, 1.0, 1.0, 0.0, // opacity strokeOpacity strokeWidth stroke - 1.0 表示有数据映射、0.0 表示没有 - // 1.0, 0.0, 0.0, 0.0, // offsets + // 1.0, 1.0, 0.0, 0.0, // offsets thetaOffset // 0.0, 0.0, 0.0, 0.0 return u_cellTypeLayout[1][0] + // opacity u_cellTypeLayout[1][1] + // strokeOpacity u_cellTypeLayout[1][2] + // strokeWidth u_cellTypeLayout[1][3] * 4.0 + // stroke - u_cellTypeLayout[2][0] * 2.0; // offsets + u_cellTypeLayout[2][0] * 2.0 + // offsets + u_cellTypeLayout[2][1]; // thetaOffset } \ No newline at end of file diff --git a/packages/core/src/shaders/styleMappingCalThetaOffset.glsl b/packages/core/src/shaders/styleMappingCalThetaOffset.glsl new file mode 100644 index 0000000000..56116e42ee --- /dev/null +++ b/packages/core/src/shaders/styleMappingCalThetaOffset.glsl @@ -0,0 +1,11 @@ + +// 计算 thetaOffset 和标示在 cell 中取值位置的偏移量 textureOffset +vec2 calThetaOffsetAndOffset(float cellCurrentRow, float cellCurrentColumn, float columnCount, float textureOffset, float columnWidth, float rowHeight) { + if(!hasThetaOffset()) { // 数据纹理中不存在 thetaOffset 的时候取默认值（用户在 style 中传入的是常量） + return vec2(u_thetaOffset, textureOffset); + } else { + vec2 valuePos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset); + float textureThetaOffset = pos2value(valuePos, columnWidth, rowHeight); + return vec2(textureThetaOffset, textureOffset + 1.0); + } +} diff --git a/packages/l7/package.json b/packages/l7/package.json index 55c92c87b1..352cb5d564 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "2.6.6", + "version": "2.6.7", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -25,12 +25,13 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-component": "^2.6.6", - "@antv/l7-core": "^2.6.6", - "@antv/l7-layers": "^2.6.6", - "@antv/l7-maps": "^2.6.6", - "@antv/l7-scene": "^2.6.6", - "@antv/l7-utils": "^2.6.6", + "@antv/l7-component": "^2.6.7", + "@antv/l7-core": "^2.6.7", + "@antv/l7-source": "^2.6.7", + "@antv/l7-layers": "^2.6.7", + "@antv/l7-maps": "^2.6.7", + "@antv/l7-scene": "^2.6.7", + "@antv/l7-utils": "^2.6.7", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index 664317af32..63589ae671 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.6.6'; +const version = '2.6.7'; export { version }; diff --git a/packages/layers/package.json b/packages/layers/package.json index 546b01e590..5f130db2d0 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-layers", - "version": "2.6.6", + "version": "2.6.7", "description": "L7's collection of built-in layers", "main": "lib/index.js", "module": "es/index.js", @@ -24,9 +24,9 @@ "license": "ISC", "dependencies": { "@antv/geo-coord": "^1.0.8", - "@antv/l7-core": "^2.6.6", - "@antv/l7-source": "^2.6.6", - "@antv/l7-utils": "^2.6.6", + "@antv/l7-core": "^2.6.7", + "@antv/l7-source": "^2.6.7", + "@antv/l7-utils": "^2.6.7", "@babel/runtime": "^7.7.7", "@mapbox/martini": "^0.2.0", "@turf/meta": "^6.0.2", diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index 34fab0dd74..1d1b13dce2 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/packages/layers/src/core/BaseModel.ts @@ -70,6 +70,7 @@ export default class BaseModel protected rowCount: number; // 计算得到的当前数据纹理有多少行（高度） protected cacheStyleProperties: { // 记录存储上一次样式字段的值 + thetaOffset: styleSingle | undefined; opacity: styleSingle | undefined; strokeOpacity: styleSingle | undefined; strokeWidth: styleSingle | undefined; @@ -81,6 +82,7 @@ export default class BaseModel protected cellTypeLayout: number[]; protected stylePropertyesExist: { // 记录 style 属性是否存在的中间变量 + hasThetaOffset: number; hasOpacity: number; hasStrokeOpacity: number; hasStrokeWidth: number; @@ -145,6 +147,7 @@ export default class BaseModel this.cellLength = 0; this.cellProperties = []; this.cacheStyleProperties = { + thetaOffset: undefined, opacity: undefined, strokeOpacity: undefined, strokeWidth: undefined, @@ -152,6 +155,7 @@ export default class BaseModel offsets: undefined, }; this.stylePropertyesExist = { + hasThetaOffset: 0, hasOpacity: 0, hasStrokeOpacity: 0, hasStrokeWidth: 0, @@ -181,6 +185,7 @@ export default class BaseModel this.cellLength = 0; // 清空上一次计算的 cell 的长度 this.stylePropertyesExist = { // 全量清空上一次是否需要对 style 属性进行数据映射的判断 + hasThetaOffset: 0, hasOpacity: 0, hasStrokeOpacity: 0, hasStrokeWidth: 0, @@ -192,18 +197,22 @@ export default class BaseModel public getCellTypeLayout() { if (this.dataTextureTest) { return [ + // 0 this.rowCount, // 数据纹理有几行 this.DATA_TEXTURE_WIDTH, // 数据纹理有几列 0.0, 0.0, + // 1 this.stylePropertyesExist.hasOpacity, // cell 中是否存在 opacity this.stylePropertyesExist.hasStrokeOpacity, // cell 中是否存在 strokeOpacity this.stylePropertyesExist.hasStrokeWidth, // cell 中是否存在 strokeWidth this.stylePropertyesExist.hasStroke, // cell 中是否存在 stroke + // 2 this.stylePropertyesExist.hasOffsets, // cell 中是否存在 offsets + this.stylePropertyesExist.hasThetaOffset, // cell 中是否存在 thetaOffset 0.0, 0.0, - 0.0, + // 3 0.0, 0.0, 0.0, @@ -237,6 +246,8 @@ export default class BaseModel * @returns */ public dataTextureNeedUpdate(options: { + // TODO: thetaOffset 目前只有 lineLayer/arc 使用 + thetaOffset?: styleSingle; opacity?: styleSingle; strokeOpacity?: styleSingle; strokeWidth?: styleSingle; @@ -245,6 +256,10 @@ export default class BaseModel textOffset?: styleOffset; }): boolean { let isUpdate = false; + if (!isEqual(options.thetaOffset, this.cacheStyleProperties.thetaOffset)) { + isUpdate = true; + this.cacheStyleProperties.thetaOffset = options.thetaOffset; + } if (!isEqual(options.opacity, this.cacheStyleProperties.opacity)) { isUpdate = true; this.cacheStyleProperties.opacity = options.opacity; @@ -277,6 +292,8 @@ export default class BaseModel * @param options */ public judgeStyleAttributes(options: { + // TODO: 目前 thetaOffset 只有 lineLayer/arc 使用 + thetaOffset?: styleSingle; opacity?: styleSingle; strokeOpacity?: styleSingle; strokeWidth?: styleSingle; @@ -325,6 +342,13 @@ export default class BaseModel this.stylePropertyesExist.hasOffsets = 1; this.cellLength += 2; } + + if (options.thetaOffset !== undefined && !isNumber(options.thetaOffset)) { + // 数据映射 + this.cellProperties.push({ attr: 'thetaOffset', count: 1 }); + this.stylePropertyesExist.hasThetaOffset = 1; + this.cellLength += 1; + } // console.log('this.cellLength', this.cellLength) } @@ -405,7 +429,7 @@ export default class BaseModel const { attr, count } = layout; const value = cellData[attr]; - if (value) { + if (value !== undefined) { // 数据中存在该属性 if (attr === 'stroke') { d.push(...rgb2arr(value)); diff --git a/packages/layers/src/line/models/arc.ts b/packages/layers/src/line/models/arc.ts index b6ca8fce0f..a312c70971 100644 --- a/packages/layers/src/line/models/arc.ts +++ b/packages/layers/src/line/models/arc.ts @@ -37,8 +37,11 @@ export default class ArcModel extends BaseModel { thetaOffset = 0.314, } = this.layer.getLayerConfig() as ILineLayerStyleOptions; - if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) { - this.judgeStyleAttributes({ opacity }); + if ( + this.dataTextureTest && + this.dataTextureNeedUpdate({ opacity, thetaOffset }) + ) { + this.judgeStyleAttributes({ opacity, thetaOffset }); const encodeData = this.layer.getEncodedData(); const { data, width, height } = this.calDataFrame( this.cellLength, @@ -86,10 +89,10 @@ export default class ArcModel extends BaseModel { } return { - u_thetaOffset: thetaOffset, u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1] u_cellTypeLayout: this.getCellTypeLayout(), + u_thetaOffset: isNumber(thetaOffset) ? thetaOffset : 0.0, u_opacity: isNumber(opacity) ? opacity : 1.0, u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0, segmentNumber, diff --git a/packages/layers/src/line/shaders/line_arc_vert.glsl b/packages/layers/src/line/shaders/line_arc_vert.glsl index 6e5c4328fe..a0e73b3880 100644 --- a/packages/layers/src/line/shaders/line_arc_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_vert.glsl @@ -30,6 +30,7 @@ varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样 #pragma include "styleMapping" #pragma include "styleMappingCalOpacity" +#pragma include "styleMappingCalThetaOffset" #pragma include "projection" #pragma include "project" @@ -39,11 +40,11 @@ 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 midPoint(vec2 source, vec2 target, float arcThetaOffset) { vec2 center = target - source; float r = length(center); float theta = atan(center.y, center.x); - float thetaOffset = u_thetaOffset; + float thetaOffset = arcThetaOffset; float r2 = r / 2.0 / cos(thetaOffset); float theta2 = theta + thetaOffset; vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y); @@ -59,9 +60,9 @@ vec2 midPoint(vec2 source, vec2 target) { float getSegmentRatio(float index) { return smoothstep(0.0, 1.0, index / (segmentNumber - 1.)); } -vec2 interpolate (vec2 source, vec2 target, float t) { +vec2 interpolate (vec2 source, vec2 target, float t, float arcThetaOffset) { // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation - vec2 mid = midPoint(source, target); + vec2 mid = midPoint(source, target, arcThetaOffset); 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)); @@ -102,13 +103,17 @@ void main() { float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行 float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列 - // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... + // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke -> thetaOffset... // 按顺序从 cell 中取值、若没有则自动往下取值 float textureOffset = 0.0; // 在 cell 中取值的偏移量 vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight); styleMappingMat[0][0] = opacityAndOffset.r; textureOffset = opacityAndOffset.g; + + vec2 thetaOffsetAndOffset = calThetaOffsetAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight); + styleMappingMat[0][1] = thetaOffsetAndOffset.r; + textureOffset = thetaOffsetAndOffset.g; // cal style mapping - 数据纹理映射部分的计算 @@ -144,8 +149,9 @@ void main() { styleMappingMat[3].b = d_distance_ratio; - 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)); + // styleMappingMat[0][1] - arcThetaOffset + vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio, styleMappingMat[0][1]), 0.0, 1.0)); + vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio, styleMappingMat[0][1]), 0.0, 1.0)); // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); //unProjCustomCoord diff --git a/packages/layers/src/utils/dataMappingStyle.ts b/packages/layers/src/utils/dataMappingStyle.ts index 0aaaad4b6d..b185235930 100644 --- a/packages/layers/src/utils/dataMappingStyle.ts +++ b/packages/layers/src/utils/dataMappingStyle.ts @@ -13,6 +13,7 @@ import { isArray, isFunction, isNumber, isString } from 'lodash'; */ interface IConfigToUpdate { + thetaOffset?: any; opacity?: any; strokeOpacity?: any; stroke?: any; @@ -48,7 +49,6 @@ function registerStyleAttribute( function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) { if (configToUpdate.opacity) { // 处理 style 中 opacity 属性的数据映射 - handleStyleFloat('opacity', layer, configToUpdate.opacity); } @@ -60,7 +60,6 @@ function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) { if (configToUpdate.strokeOpacity) { // 处理 style 中 strokeOpacity 属性的数据映射 - handleStyleFloat('strokeOpacity', layer, configToUpdate.strokeOpacity); } @@ -78,6 +77,11 @@ function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) { // 处理 style 中 textOffset 属性的数据映射 handleStyleOffsets('textOffset', layer, configToUpdate.textOffset); } + + if (configToUpdate.thetaOffset) { + // 处理 style 中 thetaOffset 属性的数据映射 + handleStyleFloat('thetaOffset', layer, configToUpdate.thetaOffset); + } } /** diff --git a/packages/map/package.json b/packages/map/package.json index a72fe88734..bf485723a5 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-map", - "version": "2.6.6", + "version": "2.6.7", "description": "l7 map", "keywords": [], "author": "thinkinggis ", @@ -37,7 +37,7 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-utils": "^2.6.6", + "@antv/l7-utils": "^2.6.7", "@babel/runtime": "^7.7.7", "@mapbox/point-geometry": "^0.1.0", "@mapbox/unitbezier": "^0.0.0", diff --git a/packages/maps/package.json b/packages/maps/package.json index 547f82eab1..68986d672b 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-maps", - "version": "2.6.6", + "version": "2.6.7", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -27,9 +27,9 @@ "license": "ISC", "dependencies": { "@amap/amap-jsapi-loader": "^0.0.3", - "@antv/l7-core": "^2.6.6", - "@antv/l7-map": "^2.6.6", - "@antv/l7-utils": "^2.6.6", + "@antv/l7-core": "^2.6.7", + "@antv/l7-map": "^2.6.7", + "@antv/l7-utils": "^2.6.7", "@babel/runtime": "^7.7.7", "@types/amap-js-api": "^1.4.6", "@types/mapbox-gl": "^1.11.2", diff --git a/packages/mini/package.json b/packages/mini/package.json index 49d2b74c13..8015d29e6f 100644 --- a/packages/mini/package.json +++ b/packages/mini/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-mini", - "version": "2.6.6", + "version": "2.6.7", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -25,11 +25,11 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-core": "^2.6.6", - "@antv/l7-layers": "^2.6.6", - "@antv/l7-maps": "^2.6.6", - "@antv/l7-scene": "^2.6.6", - "@antv/l7-utils": "^2.6.6", + "@antv/l7-core": "^2.6.7", + "@antv/l7-layers": "^2.6.7", + "@antv/l7-maps": "^2.6.7", + "@antv/l7-scene": "^2.6.7", + "@antv/l7-utils": "^2.6.7", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/renderer/package.json b/packages/renderer/package.json index 28a9f345b7..f8f93455b9 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-renderer", - "version": "2.6.6", + "version": "2.6.7", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,7 +26,7 @@ "gl": "^4.4.0" }, "dependencies": { - "@antv/l7-core": "^2.6.6", + "@antv/l7-core": "^2.6.7", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "l7regl": "^0.0.16", diff --git a/packages/scene/package.json b/packages/scene/package.json index 4e78b8d2dd..aad8d6133c 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-scene", - "version": "2.6.6", + "version": "2.6.7", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -23,12 +23,12 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-component": "^2.6.6", - "@antv/l7-core": "^2.6.6", - "@antv/l7-layers": "^2.6.6", - "@antv/l7-maps": "^2.6.6", - "@antv/l7-renderer": "^2.6.6", - "@antv/l7-utils": "^2.6.6", + "@antv/l7-component": "^2.6.7", + "@antv/l7-core": "^2.6.7", + "@antv/l7-layers": "^2.6.7", + "@antv/l7-maps": "^2.6.7", + "@antv/l7-renderer": "^2.6.7", + "@antv/l7-utils": "^2.6.7", "@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 bcbc5a4ede..0018c5a611 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-source", - "version": "2.6.6", + "version": "2.6.7", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,8 +26,8 @@ "license": "ISC", "dependencies": { "@antv/async-hook": "^2.1.0", - "@antv/l7-core": "^2.6.6", - "@antv/l7-utils": "^2.6.6", + "@antv/l7-core": "^2.6.7", + "@antv/l7-utils": "^2.6.7", "@babel/runtime": "^7.7.7", "@mapbox/geojson-rewind": "^0.4.0", "@turf/helpers": "^6.1.4", diff --git a/packages/three/package.json b/packages/three/package.json index 5d709b6d17..9396d6ae49 100644 --- a/packages/three/package.json +++ b/packages/three/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-three", - "version": "2.6.6", + "version": "2.6.7", "description": "three for L7 ", "keywords": [ "3D", @@ -44,9 +44,9 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-core": "^2.6.6", - "@antv/l7-layers": "^2.6.6", - "@antv/l7-scene": "^2.6.6", + "@antv/l7-core": "^2.6.7", + "@antv/l7-layers": "^2.6.7", + "@antv/l7-scene": "^2.6.7", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "reflect-metadata": "^0.1.13", diff --git a/packages/utils/package.json b/packages/utils/package.json index 6ce055964b..38a1e845f0 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-utils", - "version": "2.6.6", + "version": "2.6.7", "description": "", "main": "lib/index.js", "module": "es/index.js", diff --git a/stories/Map/components/planeLine.tsx b/stories/Map/components/planeLine.tsx new file mode 100644 index 0000000000..263eab2149 --- /dev/null +++ b/stories/Map/components/planeLine.tsx @@ -0,0 +1,115 @@ +import { LineLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; +import * as React from 'react'; + +export default class PlaneLine extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + pitch: 40, + center: [110, 35.443], + zoom: 5, + viewMode: '3D', + style: 'dark', + }), + }); + this.scene = scene; + scene.addImage( + 'plane', + 'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg', + ); + // 106.6400729259405 29.72018042111331 重庆 + // 116.5883553580003 40.07680509701226 北京 + let originData = { + lng1: 106.6400729259405, + lat1: 29.72018042111331, + lng2: 116.5883553580003, + lat2: 40.07680509701226, + }; + scene.on('loaded', () => { + let data = []; + for (let i = 0; i < 11; i++) { + data.push({ + thetaOffset: -0.5 + i * 0.1, + ...originData, + }); + } + + const layer = new LineLayer({ + blend: 'normal', + }) + .source(data, { + parser: { + type: 'json', + x: 'lng1', + y: 'lat1', + x1: 'lng2', + y1: 'lat2', + }, + }) + .size(1) + .shape('arc') + .color('#ccc') + .style({ + opacity: 1, + thetaOffset: 'thetaOffset', + }); + scene.addLayer(layer); + + const layer2 = new LineLayer({ + blend: 'normal', + }) + .source(data, { + parser: { + type: 'json', + x: 'lng1', + y: 'lat1', + x1: 'lng2', + y1: 'lat2', + }, + }) + .size(15) + .texture('plane') + .shape('arc') + .color('#8C1EB2') + .style({ + opacity: 1, + thetaOffset: 'thetaOffset', + lineTexture: true, // 开启线的贴图功能 + iconStep: 20, // 设置贴图纹理的间距 + textureBlend: 'replace', + }) + .animate({ + duration: 0.2, + interval: 0.5, + trailLength: 1, + }); + scene.addLayer(layer2); + }); + } + + public render() { + return ( + <> +
+ + ); + } +} diff --git a/stories/Map/map.stories.tsx b/stories/Map/map.stories.tsx index 4f7d3abf59..f8e1c63349 100644 --- a/stories/Map/map.stories.tsx +++ b/stories/Map/map.stories.tsx @@ -66,6 +66,7 @@ import ShapeUpdate from './components/shapeUpdate' import AmapPlugin from './components/plugin' import PointUV from './components/pointUV' import DestroyClear from './components/destroyClear' +import PlaneLine from './components/planeLine' // @ts-ignore storiesOf('地图方法', module) @@ -135,3 +136,4 @@ storiesOf('地图方法', module) .add('AmapPlugin', () => ) .add('PointUV', () => ) .add('DestroyClear', () => ) + .add('PlaneLine', () => )