From 07364c10c30c90d8f8ec528d4c3e3c45f7a2d97d Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Tue, 26 Oct 2021 17:56:35 +0800 Subject: [PATCH] Shihui dev (#811) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add performance demo * style: lint style * style: lint style * feat: add getModelMatrix into viewport * feat: 新增地球模式 （初步构建） * feat: 完善地球交互 * style: lint style * feat: 调整地球图层缩放的方向 * style: lint style * feat: 增加地球模式的 pointLayer/fill 图层 * style: lint style * feat: 增加地球、太阳的简单运动系统，优化部分代码结构 * fix: 修复时间点击出错 * style: lint style * fix: 修复地图 panBy 方法参数错误 * style: lint style * feat: pointLayer/cylinder 圆柱兼容地球模式 * style: lint style * feat: 修复 pointLayer/fill 在拾取是破面严重的情况 * style: lint style * feat: 增加 arc 弧度调节 * feat: 增加 lineLayer/arc3d 兼容地球模式 * style: lint style * feat: 增加地球图层 - 大气层 * style: lint style * feat: 增加设置可视化层背景色的能力 * style: lint style * feat: 增加地球外发光效果 * style: lint style * feat: 允许用户不使用 layer 的 source 方法 - 地球模式下光晕图层不需要传数据 * style: lint style * feat: 调整光晕的 shader 计算 * feat: 调整地球大气层的渲染层级 * style: lint style * feat: 调整案例 * style: lint style * feat: 增加地球图层的默认参数、调整部分代码 * style: lint style * feat: imageTile developinging * style: lint style * feat: 新增图片瓦片地图 * fix: 修复 amap2 新增样式导致的 marker 失效 * feat: 修复 amap2 的 amap-maps 新增 z-index=0; 引发的marker 显示层级失效 * feat: amap2 的 amap-maps 新增 z-index=0; 样式，让 marker 中 zIndex 失效 * style: lint style * feat: 补全瓦片地图中的类型引用 * style: lint style * feat: 增加 demo * style: lint style * feat: 修复 varying 传递 float 总数在部分终端设备 ios13 上突破限制的问题 * feat: add stoty demo * style: lint style * feat: 调整 aspace demo * feat: 调整 aspace demo * style: lint style * feat: 调整 demo * feat: 补充依赖 * chore: update version 2.5.39 -> 2.5.40 * feat: 新增 arcmini layer，增加拖拽时的拾取优化（地图拖拽时取消拾取） * feat: 增加注释 --- lerna.json | 2 +- packages/component/package.json | 6 +- packages/core/package.json | 4 +- .../services/interaction/PickingService.ts | 9 +- .../core/src/services/layer/ILayerService.ts | 1 + .../core/src/services/layer/LayerService.ts | 19 ++- packages/core/src/services/map/IMapService.ts | 1 + packages/l7/package.json | 14 +- packages/l7/src/version.ts | 2 +- packages/layers/package.json | 9 +- packages/layers/src/line/index.ts | 1 + packages/layers/src/line/models/arcmini.ts | 134 ++++++++++++++++++ packages/layers/src/line/models/index.ts | 9 +- .../src/line/shaders/line_arcmini_frag.glsl | 42 ++++++ .../src/line/shaders/line_arcmini_vert.glsl | 105 ++++++++++++++ packages/map/package.json | 4 +- packages/maps/package.json | 8 +- packages/maps/src/amap/map.ts | 13 ++ packages/maps/src/amap2/map.ts | 13 ++ packages/maps/src/earth/map.ts | 3 + packages/maps/src/map/map.ts | 13 ++ packages/maps/src/mapbox/map.ts | 13 ++ 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/MapPerformance/components/BigLine.tsx | 75 ++++++++++ stories/MapPerformance/components/Map.tsx | 27 +--- stories/MapPerformance/map.stories.tsx | 2 + 30 files changed, 488 insertions(+), 75 deletions(-) create mode 100644 packages/layers/src/line/models/arcmini.ts create mode 100644 packages/layers/src/line/shaders/line_arcmini_frag.glsl create mode 100644 packages/layers/src/line/shaders/line_arcmini_vert.glsl create mode 100644 stories/MapPerformance/components/BigLine.tsx diff --git a/lerna.json b/lerna.json index 0c124b2b80..cc16823bbd 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.5.39", + "version": "2.5.40", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/packages/component/package.json b/packages/component/package.json index 75101b8005..aec48100c9 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-component", - "version": "2.5.39", + "version": "2.5.40", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -25,8 +25,8 @@ "author": "lzxue", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.5.39", - "@antv/l7-utils": "^2.5.39", + "@antv/l7-core": "^2.5.40", + "@antv/l7-utils": "^2.5.40", "@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 92e3bdb9e9..8e12d7fe61 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-core", - "version": "2.5.39", + "version": "2.5.40", "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.5.39", + "@antv/l7-utils": "^2.5.40", "@babel/runtime": "^7.7.7", "@mapbox/tiny-sdf": "^1.1.1", "ajv": "^6.10.2", diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index e23a19ff1a..2660ee67b7 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -140,7 +140,14 @@ export default class PickingService implements IPickingService { return features; } private async pickingAllLayer(target: IInteractionTarget) { - if (this.alreadyInPicking || this.layerService.alreadyInRendering) { + if ( + // TODO: this.alreadyInPicking 避免多次重复拾取 + this.alreadyInPicking || + // TODO: this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作 + this.layerService.alreadyInRendering || + // TODO: this.layerService.isMapDragging() 如果地图正在拖拽 则不进行拾取操作 + this.layerService.isMapDragging() + ) { return; } this.alreadyInPicking = true; diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 96d1f052fc..fb39a7180f 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -384,5 +384,6 @@ export interface ILayerService { updateRenderOrder(): void; renderLayers(type?: string): void; getOESTextureFloat(): boolean; + isMapDragging(): boolean; destroy(): void; } diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 9335a261c1..c36ab2876f 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/packages/core/src/services/layer/LayerService.ts @@ -162,6 +162,16 @@ export default class LayerService implements ILayerService { return this.renderService.extensionObject.OES_texture_float; } + // TODO: 判断地图是否正在被拖动 + public isMapDragging() { + return this.mapService.dragging; + } + + private runRender() { + this.renderLayers(); + this.layerRenderID = requestAnimationFrame(this.runRender.bind(this)); + } + // 渲染检测 private renderTest(renderType: string | undefined): boolean { const now = new Date().getTime(); @@ -174,8 +184,9 @@ export default class LayerService implements ILayerService { if (renderType) { switch (renderType) { case 'picking': + // return false; // TODO: picking 类型的渲染事件 - // 若是上次触发为地图或动画触发的渲染，则认为是地图事件与拾取事件在同时触发，放弃此次渲染 + // 若是上次触发为地图触发的渲染，则认为是地图事件与拾取事件在同时触发，放弃此次渲染 if ( this.lastRenderType === 'mapRender' || this.lastRenderType === 'animate' @@ -192,6 +203,7 @@ export default class LayerService implements ILayerService { return true; } case 'animate': + // return false; if (this.lastRenderType === 'mapRender') { this.lastRenderType = 'animate'; return false; @@ -225,11 +237,6 @@ export default class LayerService implements ILayerService { }); } - private runRender() { - this.renderLayers('animate'); - this.layerRenderID = requestAnimationFrame(this.runRender.bind(this)); - } - private stopRender() { cancelAnimationFrame(this.layerRenderID); } diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts index 32cab61ae3..592e90baa3 100644 --- a/packages/core/src/services/map/IMapService.ts +++ b/packages/core/src/services/map/IMapService.ts @@ -32,6 +32,7 @@ export interface IMapWrapper { export interface IMapService { version?: string; map: RawMap; + dragging: boolean; bgColor: string; setBgColor(color: string): void; init(): void; diff --git a/packages/l7/package.json b/packages/l7/package.json index 4b56314bff..30969cdd14 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "2.5.39", + "version": "2.5.40", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -25,12 +25,12 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-component": "^2.5.39", - "@antv/l7-core": "^2.5.39", - "@antv/l7-layers": "^2.5.39", - "@antv/l7-maps": "^2.5.39", - "@antv/l7-scene": "^2.5.39", - "@antv/l7-utils": "^2.5.39", + "@antv/l7-component": "^2.5.40", + "@antv/l7-core": "^2.5.40", + "@antv/l7-layers": "^2.5.40", + "@antv/l7-maps": "^2.5.40", + "@antv/l7-scene": "^2.5.40", + "@antv/l7-utils": "^2.5.40", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index 1d0853fe07..65f6cab687 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.5.39'; +const version = '2.5.40'; export { version }; diff --git a/packages/layers/package.json b/packages/layers/package.json index edc64c99dd..9997d5f59c 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-layers", - "version": "2.5.39", + "version": "2.5.40", "description": "L7's collection of built-in layers", "main": "lib/index.js", "module": "es/index.js", @@ -25,9 +25,10 @@ "dependencies": { "@antv/geo-coord": "^1.0.8", "@antv/async-hook": "^2.1.0", - "@antv/l7-core": "^2.5.39", - "@antv/l7-source": "^2.5.39", - "@antv/l7-utils": "^2.5.39", + "@antv/geo-coord": "^1.0.8", + "@antv/l7-core": "^2.5.40", + "@antv/l7-source": "^2.5.40", + "@antv/l7-utils": "^2.5.40", "@babel/runtime": "^7.7.7", "@mapbox/martini": "^0.2.0", "@turf/meta": "^6.0.2", diff --git a/packages/layers/src/line/index.ts b/packages/layers/src/line/index.ts index 5517840db0..b22f94c406 100644 --- a/packages/layers/src/line/index.ts +++ b/packages/layers/src/line/index.ts @@ -31,6 +31,7 @@ export default class LineLayer extends BaseLayer { line: {}, arc3d: { blend: 'additive' }, arc: { blend: 'additive' }, + arcmini: { blend: 'additive' }, greatcircle: { blend: 'additive' }, }; return defaultConfig[type]; diff --git a/packages/layers/src/line/models/arcmini.ts b/packages/layers/src/line/models/arcmini.ts new file mode 100644 index 0000000000..a369e1761a --- /dev/null +++ b/packages/layers/src/line/models/arcmini.ts @@ -0,0 +1,134 @@ +import { + AttributeType, + gl, + IAnimateOption, + IEncodeFeature, + ILayerConfig, + IModel, + IModelUniform, +} from '@antv/l7-core'; + +import { rgb2arr } from '@antv/l7-utils'; +import { isNumber } from 'lodash'; +import BaseModel from '../../core/BaseModel'; +import { ILineLayerStyleOptions } from '../../core/interface'; +import { LineArcTriangulation } from '../../core/triangulation'; +import line_arcmini_frag from '../shaders/line_arcmini_frag.glsl'; +import line_arcmini_vert from '../shaders/line_arcmini_vert.glsl'; + +export default class ArcMiniModel extends BaseModel { + public getUninforms(): IModelUniform { + const { + opacity, + sourceColor, + targetColor, + forward = true, + segmentNumber = 30, + thetaOffset = 0.314, + } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + + // 转化渐变色 + let useLinearColor = 0; // 默认不生效 + let sourceColorArr = [0, 0, 0, 0]; + let targetColorArr = [0, 0, 0, 0]; + if (sourceColor && targetColor) { + sourceColorArr = rgb2arr(sourceColor); + targetColorArr = rgb2arr(targetColor); + useLinearColor = 1; + } + + return { + u_thetaOffset: thetaOffset, + + u_opacity: isNumber(opacity) ? opacity : 1.0, + + segmentNumber, + u_blur: 0.9, + u_lineDir: forward ? 1 : -1, + + // 渐变色支持参数 + u_linearColor: useLinearColor, + u_sourceColor: sourceColorArr, + u_targetColor: targetColorArr, + }; + } + + public getAnimateUniforms(): IModelUniform { + const { animateOption } = this.layer.getLayerConfig() as ILayerConfig; + return { + u_aimate: this.animateOption2Array(animateOption as IAnimateOption), + u_time: this.layer.getLayerAnimateTime(), + }; + } + + public initModels(): IModel[] { + return this.buildModels(); + } + + public buildModels(): IModel[] { + const { + segmentNumber = 30, + } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + + return [ + this.layer.buildLayerModel({ + moduleName: 'arc2dminiline', + vertexShader: line_arcmini_vert, + fragmentShader: line_arcmini_frag, + triangulation: LineArcTriangulation, + depth: { enable: false }, + blend: this.getBlend(), + segmentNumber, + }), + ]; + } + + protected registerBuiltinAttributes() { + // point layer size; + this.styleAttributeService.registerStyleAttribute({ + name: 'size', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Size', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + ) => { + const { size = 1 } = feature; + return Array.isArray(size) ? [size[0]] : [size as number]; + }, + }, + }); + + this.styleAttributeService.registerStyleAttribute({ + name: 'instance', // 弧线起始点信息 + type: AttributeType.Attribute, + descriptor: { + name: 'a_Instance', + buffer: { + usage: gl.STATIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 4, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + ) => { + return [vertex[3], vertex[4], vertex[5], vertex[6]]; + }, + }, + }); + } +} diff --git a/packages/layers/src/line/models/index.ts b/packages/layers/src/line/models/index.ts index 54a3a124e8..d5ab6eb73a 100644 --- a/packages/layers/src/line/models/index.ts +++ b/packages/layers/src/line/models/index.ts @@ -1,12 +1,19 @@ import ArcModel from './arc'; import Arc3DModel from './arc_3d'; +import ArcMiniModel from './arcmini'; import GreatCircleModel from './great_circle'; import LineModel from './line'; -export type LineModelType = 'arc' | 'arc3d' | 'greatcircle' | 'line'; +export type LineModelType = + | 'arc' + | 'arcmini' + | 'arc3d' + | 'greatcircle' + | 'line'; const LineModels: { [key in LineModelType]: any } = { arc: ArcModel, + arcmini: ArcMiniModel, arc3d: Arc3DModel, greatcircle: GreatCircleModel, line: LineModel, diff --git a/packages/layers/src/line/shaders/line_arcmini_frag.glsl b/packages/layers/src/line/shaders/line_arcmini_frag.glsl new file mode 100644 index 0000000000..e8058285c0 --- /dev/null +++ b/packages/layers/src/line/shaders/line_arcmini_frag.glsl @@ -0,0 +1,42 @@ +#define LineTypeSolid 0.0 +#define Animate 0.0 + +uniform float u_opacity; +uniform float u_blur : 0.9; +// varying vec2 v_normal; +varying vec4 v_color; + +uniform float u_time; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; + +uniform float segmentNumber; +varying float v_distance_ratio; + +uniform float u_linearColor: 0; +uniform vec4 u_sourceColor; +uniform vec4 u_targetColor; + +#pragma include "picking" + +void main() { + + // 设置弧线的底色 + if(u_linearColor == 1.0) { // 使用渐变颜色 + gl_FragColor = mix(u_sourceColor, u_targetColor, v_distance_ratio); + } else { // 使用 color 方法传入的颜色 + gl_FragColor = v_color; + } + + + gl_FragColor.a *= u_opacity; + + if(u_aimate.x == Animate) { + float animateSpeed = u_time / u_aimate.y; // 运动速度 + float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y); + alpha = (alpha + u_aimate.w -1.0) / u_aimate.w; + // alpha = smoothstep(0., 1., alpha); + alpha = clamp(alpha, 0.0, 1.0); + gl_FragColor.a *= alpha; + } + gl_FragColor = filterColor(gl_FragColor); +} \ No newline at end of file diff --git a/packages/layers/src/line/shaders/line_arcmini_vert.glsl b/packages/layers/src/line/shaders/line_arcmini_vert.glsl new file mode 100644 index 0000000000..af4356601f --- /dev/null +++ b/packages/layers/src/line/shaders/line_arcmini_vert.glsl @@ -0,0 +1,105 @@ +#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 mat4 u_Mvp; +uniform float segmentNumber; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; +varying vec4 v_color; +// varying vec2 v_normal; + +uniform float u_lineDir: 1.0; + +// 偏移量 +uniform float u_thetaOffset: 0.314; + +uniform float u_opacity: 1.0; +varying float v_distance_ratio; + +#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 = u_thetaOffset; + float r2 = r / 2.0 / cos(thetaOffset); + float theta2 = theta + thetaOffset; + vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y); + if(u_lineDir == 1.0) { // 正向 + return mid; + } else { // 逆向 + // (mid + vmin)/2 = (s + t)/2 + vec2 vmid = source + target - mid; + return vmid; + } + // 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 * setPickingSize(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 = 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); + + v_distance_ratio = segmentIndex / segmentNumber; + + if(u_aimate.x == Animate && u_lineDir != 1.0) { + v_distance_ratio = 1.0 - v_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)); + // v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); + //unProjCustomCoord + + vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y)); + + if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x + gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0)); + } else { + gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); + } + setPickingColor(a_PickingColor); +} diff --git a/packages/map/package.json b/packages/map/package.json index c38cacbf68..447a8954ea 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-map", - "version": "2.5.39", + "version": "2.5.40", "description": "l7 map", "keywords": [], "author": "thinkinggis ", @@ -37,7 +37,7 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-utils": "^2.5.39", + "@antv/l7-utils": "^2.5.40", "@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 be4154f695..ba9f435a1e 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-maps", - "version": "2.5.39", + "version": "2.5.40", "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.5.39", - "@antv/l7-map": "^2.5.39", - "@antv/l7-utils": "^2.5.39", + "@antv/l7-core": "^2.5.40", + "@antv/l7-map": "^2.5.40", + "@antv/l7-utils": "^2.5.40", "@babel/runtime": "^7.7.7", "@types/amap-js-api": "^1.4.6", "@types/mapbox-gl": "^1.11.2", diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts index a4617729d0..1260b0fec5 100644 --- a/packages/maps/src/amap/map.ts +++ b/packages/maps/src/amap/map.ts @@ -61,6 +61,9 @@ export default class AMapService */ public map: AMap.Map & IAMapInstance; + // TODO: 判断地图是否正在拖拽 + public dragging: boolean = false; + // 背景色 public bgColor: string = 'rgba(0, 0, 0, 0)'; @@ -403,6 +406,16 @@ export default class AMapService } }); + // TODO: 判断地图是否正在被拖拽 + this.map.on('dragstart', () => { + this.dragging = true; + return ''; + }); + this.map.on('dragend', () => { + this.dragging = false; + return ''; + }); + this.viewport = new Viewport(); } diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts index 1ff15c130b..ed3e137e11 100644 --- a/packages/maps/src/amap2/map.ts +++ b/packages/maps/src/amap2/map.ts @@ -64,6 +64,9 @@ export default class AMapService */ public map: AMap.Map & IAMapInstance; + // TODO: 判断地图是否正在拖拽 + public dragging: boolean = false; + /** * 用于 customCooords 数据的计算 */ @@ -494,6 +497,16 @@ export default class AMapService } } }); + + // TODO: 判断地图是否正在被拖拽 + this.map.on('dragstart', () => { + this.dragging = true; + return ''; + }); + this.map.on('dragend', () => { + this.dragging = false; + return ''; + }); } public exportMap(type: 'jpg' | 'png'): string { diff --git a/packages/maps/src/earth/map.ts b/packages/maps/src/earth/map.ts index 7c25a28352..4dff58130d 100644 --- a/packages/maps/src/earth/map.ts +++ b/packages/maps/src/earth/map.ts @@ -42,6 +42,9 @@ export default class L7EarthService implements IEarthService { public version: string = Version.GLOBEL; public map: Map; + // TODO: 判断地图是否正在拖拽 + public dragging: boolean = false; + // 背景色 public bgColor: string = '#000'; diff --git a/packages/maps/src/map/map.ts b/packages/maps/src/map/map.ts index 2c11cfbafd..4fe4b4c824 100644 --- a/packages/maps/src/map/map.ts +++ b/packages/maps/src/map/map.ts @@ -43,6 +43,9 @@ export default class L7MapService implements IMapService { public version: string = Version.L7MAP; public map: Map; + // TODO: 判断地图是否正在拖拽 + public dragging: boolean = false; + // 背景色 public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)'; @@ -280,6 +283,16 @@ export default class L7MapService implements IMapService { this.map.on('load', this.handleCameraChanged); this.map.on('move', this.handleCameraChanged); + // TODO: 判断地图是否正在被拖拽 + this.map.on('dragstart', () => { + this.dragging = true; + return ''; + }); + this.map.on('dragend', () => { + this.dragging = false; + return ''; + }); + // 不同于高德地图，需要手动触发首次渲染 this.handleCameraChanged(); } diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts index 166b618485..1651be7036 100644 --- a/packages/maps/src/mapbox/map.ts +++ b/packages/maps/src/mapbox/map.ts @@ -50,6 +50,9 @@ export default class MapboxService public version: string = Version.MAPBOX; public map: Map & IMapboxInstance; + // TODO: 判断地图是否正在拖拽 + public dragging: boolean = false; + // 背景色 public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)'; @@ -363,6 +366,16 @@ export default class MapboxService this.map.on('load', this.handleCameraChanged); this.map.on('move', this.handleCameraChanged); + // TODO: 判断地图是否正在被拖拽 + this.map.on('dragstart', () => { + this.dragging = true; + return ''; + }); + this.map.on('dragend', () => { + this.dragging = false; + return ''; + }); + // 不同于高德地图，需要手动触发首次渲染 this.handleCameraChanged(); } diff --git a/packages/renderer/package.json b/packages/renderer/package.json index 1c11626b38..e8c715588f 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-renderer", - "version": "2.5.39", + "version": "2.5.40", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,7 +26,7 @@ "gl": "^4.4.0" }, "dependencies": { - "@antv/l7-core": "^2.5.39", + "@antv/l7-core": "^2.5.40", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "l7regl": "^0.0.14", diff --git a/packages/scene/package.json b/packages/scene/package.json index 4a5f628c98..bd4e3ad305 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-scene", - "version": "2.5.39", + "version": "2.5.40", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -23,12 +23,12 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-component": "^2.5.39", - "@antv/l7-core": "^2.5.39", - "@antv/l7-layers": "^2.5.39", - "@antv/l7-maps": "^2.5.39", - "@antv/l7-renderer": "^2.5.39", - "@antv/l7-utils": "^2.5.39", + "@antv/l7-component": "^2.5.40", + "@antv/l7-core": "^2.5.40", + "@antv/l7-layers": "^2.5.40", + "@antv/l7-maps": "^2.5.40", + "@antv/l7-renderer": "^2.5.40", + "@antv/l7-utils": "^2.5.40", "@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 dcb2120db6..b37502f68c 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-source", - "version": "2.5.39", + "version": "2.5.40", "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.5.39", - "@antv/l7-utils": "^2.5.39", + "@antv/l7-core": "^2.5.40", + "@antv/l7-utils": "^2.5.40", "@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 87eafd4ff2..16d33a3b76 100644 --- a/packages/three/package.json +++ b/packages/three/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-three", - "version": "2.5.39", + "version": "2.5.40", "description": "three for L7 ", "keywords": [ "3D", @@ -44,9 +44,9 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-core": "^2.5.39", - "@antv/l7-layers": "^2.5.39", - "@antv/l7-scene": "^2.5.39", + "@antv/l7-core": "^2.5.40", + "@antv/l7-layers": "^2.5.40", + "@antv/l7-scene": "^2.5.40", "@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 ca09d39c0a..991459fcbc 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-utils", - "version": "2.5.39", + "version": "2.5.40", "description": "", "main": "lib/index.js", "module": "es/index.js", diff --git a/stories/MapPerformance/components/BigLine.tsx b/stories/MapPerformance/components/BigLine.tsx new file mode 100644 index 0000000000..ff9bade068 --- /dev/null +++ b/stories/MapPerformance/components/BigLine.tsx @@ -0,0 +1,75 @@ +// @ts-nocheck +// @ts-ignore +import { Scene } from '@antv/l7'; +import { PointLayer, LineLayer } from '@antv/l7-layers'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; +import * as React from 'react'; + +export default class PointTest extends React.Component { + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + center: [110.19382669582967, 30.258134], + pitch: 0, + zoom: 4, + }), + }); + + let address = + 'https://gw.alipayobjects.com/os/bmw-prod/3f2f9284-3fb1-4838-8baa-6ffd06738fcd.csv'; + fetch(address) + .then((res) => res.text()) + .then((data) => { + const lineLayer = new LineLayer({ + autoFit: true, + blend: 'normal', + }) + .source(data, { + parser: { + type: 'csv', + x: 'f_lon', + y: 'f_lat', + x1: 't_lon', + y1: 't_lat', + }, + }) + .shape('arcmini') + .size(2) + .color('rgb(13,64,140)') + .style({ + segmentNumber: 30, + }) + .select({ + color: '#ff0', + }) + .active({ + color: '#ff0', + }); + // .animate(true) + + scene.addLayer(lineLayer); + }); + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/MapPerformance/components/Map.tsx b/stories/MapPerformance/components/Map.tsx index ad7ea9f9fd..f1e0c14703 100644 --- a/stories/MapPerformance/components/Map.tsx +++ b/stories/MapPerformance/components/Map.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck // @ts-ignore import { Scene } from '@antv/l7'; import { PointLayer } from '@antv/l7-layers'; @@ -169,32 +170,6 @@ export default class PointTest extends React.Component { scene.on('loaded', () => { scene.addLayer(layer); - // @ts-ignore - // layer.layerService.startAnimate2(stats) - - // ILayerService - // --- - // startAnimate2(state: any): void; - // --- - // LayerService - // --- - // private stats: any; - // --- - // @ts-ignore - // public startAnimate2(stats) { - // // @ts-ignore - // this.stats = stats - // if (this.animateInstanceCount++ === 0) { - // this.clock.start(); - // this.runRender(); - // } - // } - // public runRender() { - // // @ts-ignore - // this.stats.update() - // this.renderLayers(); - // this.layerRenderID = requestAnimationFrame(this.runRender.bind(this)); - // } }); }); } diff --git a/stories/MapPerformance/map.stories.tsx b/stories/MapPerformance/map.stories.tsx index 8e879b3e2d..7f62d0746a 100644 --- a/stories/MapPerformance/map.stories.tsx +++ b/stories/MapPerformance/map.stories.tsx @@ -2,6 +2,8 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; import PointTest from './components/Map'; +import BigLine from './components/BigLine' // @ts-ignore storiesOf('地图性能检测', module) .add('点', () => ) +.add('BigLine', () => )