From 5841e32cdd474f267fec6004c62df281a77d036a Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Mon, 13 Dec 2021 17:27:39 +0800 Subject: [PATCH] Shihuidev (#879) 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 * feat: 平面弧线新增弧线偏移量的数据映射能力 * style: lint style * fix: 修复重复销毁bug * style: lint style * feat: 修复 texture 重复销毁问题 * style: lint style * fix: 修复图层叠加模式下的拾取失效问题 * style: lint style * fix: 修复纹理贴图在 zoom 大于 12 时存在的问题 * fix: 修复水波点颜色偏暗 * style: lint style * feat: npm reagist failed. update version repuhslish * feat: 优化点图层的渲染效果，叠加渲染效果 * style: lint style * fix: 修复 layer contextmenu 事件丢失 * fix: 修复 map 类型 resize 失效 * style: lint style --- latest.sh | 22 ++--- lerna.json | 2 +- packages/component/package.json | 6 +- packages/core/package.json | 4 +- .../services/interaction/PickingService.ts | 6 +- packages/core/src/shaders/picking.frag.glsl | 14 ++- packages/l7/package.json | 16 ++-- packages/l7/src/version.ts | 2 +- packages/layers/package.json | 8 +- packages/layers/src/point/models/fill.ts | 3 + .../layers/src/point/shaders/fill_frag.glsl | 44 ++++----- .../layers/src/point/shaders/fill_vert.glsl | 5 +- packages/map/package.json | 4 +- packages/map/src/map.ts | 3 +- packages/maps/package.json | 8 +- packages/mini/package.json | 12 +-- packages/renderer/package.json | 4 +- packages/scene/package.json | 14 +-- packages/source/package.json | 8 +- packages/three/package.json | 8 +- packages/utils/package.json | 2 +- stories/Map/components/mapCenter.tsx | 48 +++------- stories/customMap/components/Map.tsx | 96 +++++++++---------- 23 files changed, 162 insertions(+), 177 deletions(-) diff --git a/latest.sh b/latest.sh index 7c23f6849a..3f31e588a5 100644 --- a/latest.sh +++ b/latest.sh @@ -1,11 +1,11 @@ -npm dist-tag add @antv/l7-component@2.5.40 latest -npm dist-tag add @antv/l7-core@2.5.40 latest -npm dist-tag add @antv/l7@2.5.40 latest -npm dist-tag add @antv/l7-layers@2.5.40 latest -npm dist-tag add @antv/l7-map@2.5.40 latest -npm dist-tag add @antv/l7-maps@2.5.40 latest -npm dist-tag add @antv/l7-renderer@2.5.40 latest -npm dist-tag add @antv/l7-scene@2.5.40 latest -npm dist-tag add @antv/l7-source@2.5.40 latest -npm dist-tag add @antv/l7-three@2.5.40 latest -npm dist-tag add @antv/l7-utils@2.5.40 latest +npm dist-tag add @antv/l7-component@2.6.12 latest +npm dist-tag add @antv/l7-core@2.6.12 latest +npm dist-tag add @antv/l7@2.6.12 latest +npm dist-tag add @antv/l7-layers@2.6.12 latest +npm dist-tag add @antv/l7-map@2.6.12 latest +npm dist-tag add @antv/l7-maps@2.6.12 latest +npm dist-tag add @antv/l7-renderer@2.6.12 latest +npm dist-tag add @antv/l7-scene@2.6.12 latest +npm dist-tag add @antv/l7-source@2.6.12 latest +npm dist-tag add @antv/l7-three@2.6.12 latest +npm dist-tag add @antv/l7-utils@2.6.12 latest diff --git a/lerna.json b/lerna.json index 3b696999bf..92e46a7b3f 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.6.13", + "version": "2.6.15", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/packages/component/package.json b/packages/component/package.json index 459fd931cf..09b9fdafb6 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-component", - "version": "2.6.13", + "version": "2.6.15", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -25,8 +25,8 @@ "author": "lzxue", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.6.13", - "@antv/l7-utils": "^2.6.13", + "@antv/l7-core": "^2.6.15", + "@antv/l7-utils": "^2.6.15", "@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 6130a21016..f16fa21c04 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-core", - "version": "2.6.13", + "version": "2.6.15", "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.13", + "@antv/l7-utils": "^2.6.15", "@babel/runtime": "^7.7.7", "ajv": "^6.10.2", "element-resize-event": "^3.0.3", diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index 758e2524b2..1321611df6 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -171,8 +171,8 @@ export default class PickingService implements IPickingService { } this.alreadyInPicking = true; const t = new Date().getTime(); - // @ts-ignore - if (t - this.lastPickTime > 10) { + // TODO: 优化拾取操作 在右键时 mousedown 和 contextmenu 几乎同时触发，所以不能舍去这一次的触发 + if (t - this.lastPickTime > 10 || target.type === 'contextmenu') { await this.pickingLayers(target); } // await this.pickingLayers(target); @@ -206,8 +206,6 @@ export default class PickingService implements IPickingService { getContainer, } = this.rendererService; - this.resizePickingFBO(); - useFramebuffer(this.pickingFBO, () => { const layers = this.layerService.getRenderList(); layers diff --git a/packages/core/src/shaders/picking.frag.glsl b/packages/core/src/shaders/picking.frag.glsl index ebfb8902b1..6a816d9780 100644 --- a/packages/core/src/shaders/picking.frag.glsl +++ b/packages/core/src/shaders/picking.frag.glsl @@ -11,7 +11,7 @@ uniform float u_shaderPick; /* * Returns highlight color if this item is selected. */ -vec4 filterHighlightColor(vec4 color, float lightWeight) { +vec4 filterHighlightColor(vec4 color, float weight) { bool selected = bool(v_PickingResult.a); if (selected) { @@ -21,7 +21,7 @@ vec4 filterHighlightColor(vec4 color, float lightWeight) { float highLightRatio = highLightAlpha / (highLightAlpha + color.a * (1.0 - highLightAlpha)); vec3 resultRGB = mix(color.rgb, highLightColor.rgb, highLightRatio); - return vec4(resultRGB * lightWeight, color.a); + return vec4(resultRGB * weight, color.a); } else { return color; } @@ -53,6 +53,16 @@ vec4 filterColor(vec4 color) { } +// TODO: 优化水波点 blend additive 模式下有的拾取效果 +vec4 filterColorAnimate(vec4 color) { + // TODO: 过滤多余的 shader 计算 + if(u_shaderPick < 0.5) { + return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题 + } else { + return filterPickingColor(filterHighlightColor(color, color.a)); + } +} + vec4 filterColorWithLight(vec4 color, float lightWeight) { // TODO: 过滤多余的 shader 计算 // return color; diff --git a/packages/l7/package.json b/packages/l7/package.json index b916b6a818..1f27082e1a 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "2.6.13", + "version": "2.6.15", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -25,13 +25,13 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-component": "^2.6.13", - "@antv/l7-core": "^2.6.13", - "@antv/l7-layers": "^2.6.13", - "@antv/l7-maps": "^2.6.13", - "@antv/l7-scene": "^2.6.13", - "@antv/l7-source": "^2.6.13", - "@antv/l7-utils": "^2.6.13", + "@antv/l7-component": "^2.6.15", + "@antv/l7-core": "^2.6.15", + "@antv/l7-layers": "^2.6.15", + "@antv/l7-maps": "^2.6.15", + "@antv/l7-scene": "^2.6.15", + "@antv/l7-source": "^2.6.15", + "@antv/l7-utils": "^2.6.15", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index b5167ca8d0..5bfde8c349 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.6.13'; +const version = '2.6.15'; export { version }; diff --git a/packages/layers/package.json b/packages/layers/package.json index d63862cd94..a38d73cf00 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-layers", - "version": "2.6.13", + "version": "2.6.15", "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.13", - "@antv/l7-source": "^2.6.13", - "@antv/l7-utils": "^2.6.13", + "@antv/l7-core": "^2.6.15", + "@antv/l7-source": "^2.6.15", + "@antv/l7-utils": "^2.6.15", "@babel/runtime": "^7.7.7", "@mapbox/martini": "^0.2.0", "@turf/meta": "^6.0.2", diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index 718e3079e5..8d6cde9d8f 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/packages/layers/src/point/models/fill.ts @@ -31,6 +31,7 @@ interface IPointLayerStyleOptions { stroke: styleColor; strokeOpacity: styleSingle; offsets: styleOffset; + blend: string; } // 判断当前使用的 style 中的变量属性是否需要进行数据映射 export default class FillModel extends BaseModel { @@ -41,6 +42,7 @@ export default class FillModel extends BaseModel { strokeWidth = 0, stroke = 'rgba(0,0,0,0)', offsets = [0, 0], + blend, } = this.layer.getLayerConfig() as IPointLayerStyleOptions; if ( @@ -90,6 +92,7 @@ export default class FillModel extends BaseModel { }); } return { + u_additive: blend === 'additive' ? 1.0 : 0.0, u_globel: this.mapService.version === 'GLOBEL' ? 1 : 0, u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1] u_cellTypeLayout: this.getCellTypeLayout(), diff --git a/packages/layers/src/point/shaders/fill_frag.glsl b/packages/layers/src/point/shaders/fill_frag.glsl index d05680f25d..2423cec2fd 100644 --- a/packages/layers/src/point/shaders/fill_frag.glsl +++ b/packages/layers/src/point/shaders/fill_frag.glsl @@ -1,8 +1,7 @@ #define Animate 0.0 uniform float u_globel; -uniform float u_blur : 0; -// uniform float u_stroke_width : 1; +uniform float u_additive; varying mat4 styleMappingMat; // 传递从片元中传递的映射数据 @@ -33,8 +32,6 @@ void main() { vec4 strokeColor = textrueStroke == vec4(0) ? v_color : textrueStroke; lowp float antialiasblur = v_data.z; - float antialiased_blur = -max(u_blur, antialiasblur); - // float r = v_radius / (v_radius + u_stroke_width); float r = v_radius / (v_radius + strokeWidth); float outer_df; @@ -72,18 +69,12 @@ void main() { if(u_globel > 0.0) { // TODO: 地球模式下避免多余片元绘制，同时也能避免有用片元在透明且重叠的情况下无法写入 // 付出的代价是边缘会有一些锯齿 - if(outer_df > antialiased_blur + 0.018) discard; + if(outer_df > antialiasblur + 0.018) discard; } - float opacity_t = smoothstep(0.0, antialiased_blur, outer_df); - - - // float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep( - // antialiased_blur, - // 0.0, - // inner_df - // ); - float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep( - antialiased_blur, + float opacity_t = smoothstep(0.0, antialiasblur, outer_df); + + float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep( + antialiasblur, 0.0, inner_df ); @@ -93,21 +84,26 @@ void main() { gl_FragColor = mix(vec4(v_color.rgb, v_color.a * opacity), strokeColor * stroke_opacity, color_t); - gl_FragColor.a = gl_FragColor.a * opacity_t; if(u_aimate.x == Animate) { float d = length(v_data.xy); float intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * u_aimate.z - u_aimate.y * u_time)), 0.0, 1.0); - gl_FragColor = vec4(gl_FragColor.xyz, intensity); + + // TODO: 根据叠加模式选择效果 + if(u_additive > 0.0) { + gl_FragColor *= intensity; + } else { + gl_FragColor = vec4(gl_FragColor.xyz, intensity); + } + // TODO: 优化在水波纹情况下的拾取（a == 0 时无法拾取） if(d < 0.7) { gl_FragColor.a = max(gl_FragColor.a, 0.001); } + + gl_FragColor = u_additive > 0.0 ？filterColorAnimate(gl_FragColor) : filterColor(gl_FragColor); + } else { + gl_FragColor = filterColor(gl_FragColor); } - - gl_FragColor = filterColor(gl_FragColor); - if(gl_FragColor.a == 0.00) { - gl_FragColor.rgb *= gl_FragColor.a; - } - // gl_FragColor.rgb *= gl_FragColor.a; - + + gl_FragColor *= opacity_t; } diff --git a/packages/layers/src/point/shaders/fill_vert.glsl b/packages/layers/src/point/shaders/fill_vert.glsl index 7cd11daf46..6d9c52a646 100644 --- a/packages/layers/src/point/shaders/fill_vert.glsl +++ b/packages/layers/src/point/shaders/fill_vert.glsl @@ -20,6 +20,8 @@ uniform float u_stroke_width : 2; uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0]; uniform vec2 u_offsets; +uniform float u_blur : 0.0; + #pragma include "styleMapping" #pragma include "styleMappingCalOpacity" #pragma include "styleMappingCalStrokeOpacity" @@ -121,7 +123,8 @@ void main() { // TODO: billboard // anti-alias - float antialiasblur = 1.0 / u_DevicePixelRatio / (newSize + u_stroke_width); + // float antialiased_blur = -max(u_blur, antialiasblur); + float antialiasblur = -max(1.0 / u_DevicePixelRatio / (newSize + u_stroke_width), u_blur); // construct point coords // TODP: /abs(extrude.x) 是为了兼容地球模式 diff --git a/packages/map/package.json b/packages/map/package.json index a7952b76e6..0dde48ef1b 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-map", - "version": "2.6.13", + "version": "2.6.15", "description": "l7 map", "keywords": [], "author": "thinkinggis ", @@ -37,7 +37,7 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-utils": "^2.6.13", + "@antv/l7-utils": "^2.6.15", "@babel/runtime": "^7.7.7", "@mapbox/point-geometry": "^0.1.0", "@mapbox/unitbezier": "^0.0.0", diff --git a/packages/map/src/map.ts b/packages/map/src/map.ts index aec10c00c2..61741efa3e 100644 --- a/packages/map/src/map.ts +++ b/packages/map/src/map.ts @@ -122,7 +122,8 @@ export class Map extends Camera { const height = dimensions[1]; this.transform.resize(width, height); - if (!isMini) { + // TODO: 小程序环境不需要执行后续动作 + if (isMini) { return this; } const fireMoving = !this.moving; diff --git a/packages/maps/package.json b/packages/maps/package.json index c5cd2aeae7..a97c57763d 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-maps", - "version": "2.6.13", + "version": "2.6.15", "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.13", - "@antv/l7-map": "^2.6.13", - "@antv/l7-utils": "^2.6.13", + "@antv/l7-core": "^2.6.15", + "@antv/l7-map": "^2.6.15", + "@antv/l7-utils": "^2.6.15", "@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 c9a92d1b68..91fd3dd849 100644 --- a/packages/mini/package.json +++ b/packages/mini/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-mini", - "version": "2.6.13", + "version": "2.6.15", "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.13", - "@antv/l7-layers": "^2.6.13", - "@antv/l7-maps": "^2.6.13", - "@antv/l7-scene": "^2.6.13", - "@antv/l7-utils": "^2.6.13", + "@antv/l7-core": "^2.6.15", + "@antv/l7-layers": "^2.6.15", + "@antv/l7-maps": "^2.6.15", + "@antv/l7-scene": "^2.6.15", + "@antv/l7-utils": "^2.6.15", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/renderer/package.json b/packages/renderer/package.json index f830c50824..008c182380 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-renderer", - "version": "2.6.13", + "version": "2.6.15", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,7 +26,7 @@ "gl": "^4.4.0" }, "dependencies": { - "@antv/l7-core": "^2.6.13", + "@antv/l7-core": "^2.6.15", "@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 22da06a38a..b80ab9182d 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-scene", - "version": "2.6.13", + "version": "2.6.15", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -23,12 +23,12 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-component": "^2.6.13", - "@antv/l7-core": "^2.6.13", - "@antv/l7-layers": "^2.6.13", - "@antv/l7-maps": "^2.6.13", - "@antv/l7-renderer": "^2.6.13", - "@antv/l7-utils": "^2.6.13", + "@antv/l7-component": "^2.6.15", + "@antv/l7-core": "^2.6.15", + "@antv/l7-layers": "^2.6.15", + "@antv/l7-maps": "^2.6.15", + "@antv/l7-renderer": "^2.6.15", + "@antv/l7-utils": "^2.6.15", "@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 9c0f9c6120..363b5b87ef 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-source", - "version": "2.6.13", + "version": "2.6.15", "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.13", - "@antv/l7-utils": "^2.6.13", + "@antv/l7-core": "^2.6.15", + "@antv/l7-utils": "^2.6.15", "@babel/runtime": "^7.7.7", "@mapbox/geojson-rewind": "^0.4.0", "@turf/helpers": "^6.1.4", @@ -46,7 +46,7 @@ "@types/d3-hexbin": "^0.2.3", "@types/lodash": "^4.14.138" }, - "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", + "gitHead": "f63aea6c9140aac41f1e842fd7fef34502bfeec5", "publishConfig": { "access": "public" } diff --git a/packages/three/package.json b/packages/three/package.json index 6f36ae7120..cc1ad79f82 100644 --- a/packages/three/package.json +++ b/packages/three/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-three", - "version": "2.6.13", + "version": "2.6.15", "description": "three for L7 ", "keywords": [ "3D", @@ -44,9 +44,9 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-core": "^2.6.13", - "@antv/l7-layers": "^2.6.13", - "@antv/l7-scene": "^2.6.13", + "@antv/l7-core": "^2.6.15", + "@antv/l7-layers": "^2.6.15", + "@antv/l7-scene": "^2.6.15", "@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 3a21c7b130..ce86dc1903 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-utils", - "version": "2.6.13", + "version": "2.6.15", "description": "", "main": "lib/index.js", "module": "es/index.js", diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index fe7c08d7ee..e2930a4f92 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -28,7 +28,9 @@ export default class GaodeMapComponent extends React.Component { // min = 'min', // max = 'max', // none = 'none', - const layer = new PointLayer({ zIndex: 2, blend: 'additive' }) // + // blend: 'additive' + + let layer = new PointLayer({ zIndex: 2, blend: 'additive' }) .source( [ { @@ -49,48 +51,26 @@ export default class GaodeMapComponent extends React.Component { }, ) .shape('circle') - // .shape('normal') .color('#1990FF') - .size(20) + .size(40) .style({ - stroke: '#fff', - storkeWidth: 2, - }); + stroke: '#f00', + strokeWidth: 3, + strokeOpacity: 1, + }) + .animate(true) + .active({ color: '#ff0' }); this.scene = scene; - const linelayer = new LineLayer({ blend: 'additive' }) - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [121.107846, 30.267069], - [121.107, 30.267069], - ], - ], - }, - }, - ], - }) - .shape('line') - .color('#78FFFF') - .size(10); - scene.on('loaded', () => { - // scene.addLayer(linelayer); scene.addLayer(layer); }); layer.on('click', () => console.log('point click')); - layer.on('mousemove', (e) => { - console.log(e.feature); - }); - linelayer.on('click', () => console.log('line click')); + layer.on('contextmenu', () => console.log('contextmenu')); + // layer.on('mousemove', (e) => { + // console.log(e.feature); + // }); } public render() { diff --git a/stories/customMap/components/Map.tsx b/stories/customMap/components/Map.tsx index 6bf8cb55ba..81ea636d6d 100644 --- a/stories/customMap/components/Map.tsx +++ b/stories/customMap/components/Map.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { Scene, PolygonLayer, PointLayer, Map } from '@antv/l7-mini'; // import { Scene } from '@antv/l7'; // import { PolygonLayer, PointLayer } from '@antv/l7-layers'; @@ -8,68 +9,61 @@ export default class ScaleComponent extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Map({ center: [105, 32], pitch: 0, zoom: 3, }), }); // scene.setBgColor('#000'); + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', + ) + .then((res) => res.json()) + .then((data) => { + let layer = new PolygonLayer({ blend: 'normal' }) // autoFit: true + .source(data) + .size('name', [0, 10000, 50000, 30000, 100000]) + .color('name', [ + '#2E8AE6', + '#69D1AB', + '#DAF291', + '#FFD591', + '#FF7A45', + '#CF1D49', + ]) + .shape('fill') + .select(true) + .style({ + opacity: 0.8, + opacityLinear: { + enable: true, + dir: 'in', // in - out + }, + }); - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', - ) - .then((res) => res.json()) - .then((data) => { - const layer = new PolygonLayer({ blend: 'normal' }) // autoFit: true - .source(data) - .size('name', [0, 10000, 50000, 30000, 100000]) - .color('name', [ - '#2E8AE6', - '#69D1AB', - '#DAF291', - '#FFD591', - '#FF7A45', - '#CF1D49', - ]) - .shape('fill') - .select(true) - .style({ - opacity: 0.8, - opacityLinear: { - enable: true, - dir: 'in', // in - out - }, - }); + let layer2 = new PolygonLayer({ blend: 'normal' }) + .source(data) + .size(1) + .color('name', [ + '#2E8AE6', + '#69D1AB', + '#DAF291', + '#FFD591', + '#FF7A45', + '#CF1D49', + ]) + .shape('line') + .select(true) + .style({ + opacity: 1.0, + }); - const layer2 = new PolygonLayer({ blend: 'normal' }) - .source(data) - .size(1) - .color('name', [ - '#2E8AE6', - '#69D1AB', - '#DAF291', - '#FFD591', - '#FF7A45', - '#CF1D49', - ]) - .shape('line') - .select(true) - .style({ - opacity: 1.0, - }); - - scene.on('loaded', () => { scene.addLayer(layer); scene.addLayer(layer2); - scene.fitBounds([ - [48.073279, 3.067261], - [160.573279, 54.003394], - ]); - - console.log('getBounds', scene.getBounds()); }); - }); + }); } public render() {