diff --git a/lerna.json b/lerna.json index fb3299d9e8..18a515cb3b 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.5.59", + "version": "2.6.2", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/packages/component/package.json b/packages/component/package.json index 9720cd7338..5656eebe1b 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-component", - "version": "2.5.59", + "version": "2.6.2", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -25,8 +25,8 @@ "author": "lzxue", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-core": "^2.6.2", + "@antv/l7-utils": "^2.6.2", "@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 804a971d83..4620113c9a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-core", - "version": "2.5.59", + "version": "2.6.2", "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.59", + "@antv/l7-utils": "^2.6.2", "@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 a1d56288dc..72a6ec0a92 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -161,7 +161,9 @@ export default class PickingService implements IPickingService { // TODO: this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作 this.layerService.alreadyInRendering || // TODO: this.layerService.isMapDragging() 如果地图正在拖拽 则不进行拾取操作 - this.layerService.isMapDragging() + this.layerService.isMapDragging() || + // TODO: 判断当前 是都进行 shader pick 拾取判断 + !this.layerService.getShaderPickStat() ) { return; } diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index afec8fcfb2..ac4201dc27 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -136,6 +136,8 @@ export interface ILayer { */ threeRenderService?: any; + + getShaderPickStat: () => boolean; needPick(type: string): boolean; getLayerConfig(): Partial; getContainer(): Container; @@ -373,6 +375,11 @@ export interface ILayerService { clock: Clock; alreadyInRendering: boolean; sceneService?: any; + + // 控制着色器颜色拾取计算 + enableShaderPick: () => void; + disableShaderPick: () => void; + getShaderPickStat: () => boolean; add(layer: ILayer): void; initLayers(): void; startAnimate(): void; @@ -386,5 +393,6 @@ export interface ILayerService { 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 f7bd7f5900..25e108acaf 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/packages/core/src/services/layer/LayerService.ts @@ -25,6 +25,9 @@ export default class LayerService implements ILayerService { private animateInstanceCount: number = 0; + // TODO: 是否开启 shader 中的颜色拾取计算 + private shaderPicking: boolean = true; + @inject(TYPES.IRendererService) private readonly renderService: IRendererService; @@ -163,6 +166,19 @@ export default class LayerService implements ILayerService { return this.mapService.dragging; } + // 控制着色器颜色拾取计算 + public enableShaderPick() { + this.shaderPicking = true; + } + + public disableShaderPick() { + this.shaderPicking = false; + } + + public getShaderPickStat() { + return this.shaderPicking; + } + private runRender() { this.renderLayers(); this.layerRenderID = $window.requestAnimationFrame( diff --git a/packages/core/src/shaders/picking.frag.glsl b/packages/core/src/shaders/picking.frag.glsl index 879e266994..e0be072fb7 100644 --- a/packages/core/src/shaders/picking.frag.glsl +++ b/packages/core/src/shaders/picking.frag.glsl @@ -1,7 +1,7 @@ varying vec4 v_PickingResult; uniform vec4 u_HighlightColor : [0, 0, 0, 0]; uniform float u_PickingStage : 0.0; -uniform float u_Dragging; +uniform float u_shaderPick; #define PICKING_NONE 0.0 #define PICKING_ENCODE 1.0 @@ -44,6 +44,11 @@ vec4 filterPickingColor(vec4 color) { */ vec4 filterColor(vec4 color) { // TODO: 过滤多余的 shader 计算 - // if(u_Dragging > 0.0) return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题 - return filterPickingColor(filterHighlightColor(color)); + // return color; + if(u_shaderPick < 0.5) { + return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题 + } else { + return filterPickingColor(filterHighlightColor(color)); + } + } diff --git a/packages/core/src/shaders/picking.vert.glsl b/packages/core/src/shaders/picking.vert.glsl index 4a9975d8f8..51d3cbda24 100644 --- a/packages/core/src/shaders/picking.vert.glsl +++ b/packages/core/src/shaders/picking.vert.glsl @@ -6,6 +6,7 @@ uniform vec4 u_HighlightColor : [0, 0, 0, 0]; uniform float u_PickingStage : 0.0; uniform float u_PickingThreshold : 1.0; uniform float u_PickingBuffer: 0.0; +uniform float u_shaderPick; #define PICKING_NONE 0.0 #define PICKING_ENCODE 1.0 @@ -20,6 +21,9 @@ bool isVertexPicked(vec3 vertexColor) { } void setPickingColor(vec3 pickingColor) { + if(u_shaderPick < 0.5) { + return; + } // compares only in highlight stage v_PickingResult.a = float((u_PickingStage == PICKING_HIGHLIGHT) && isVertexPicked(pickingColor)); diff --git a/packages/l7/package.json b/packages/l7/package.json index f06e56f99b..100aa1f438 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "2.5.59", + "version": "2.6.2", "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.59", - "@antv/l7-core": "^2.5.59", - "@antv/l7-layers": "^2.5.59", - "@antv/l7-maps": "^2.5.59", - "@antv/l7-scene": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-component": "^2.6.2", + "@antv/l7-core": "^2.6.2", + "@antv/l7-layers": "^2.6.2", + "@antv/l7-maps": "^2.6.2", + "@antv/l7-scene": "^2.6.2", + "@antv/l7-utils": "^2.6.2", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index b3cd251d29..7210655248 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.5.59'; +const version = '2.6.2'; export { version }; diff --git a/packages/layers/package.json b/packages/layers/package.json index 534f34e0ca..cb09a342be 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-layers", - "version": "2.5.59", + "version": "2.6.2", "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.5.59", - "@antv/l7-source": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-core": "^2.6.2", + "@antv/l7-source": "^2.6.2", + "@antv/l7-utils": "^2.6.2", "@babel/runtime": "^7.7.7", "@mapbox/martini": "^0.2.0", "@turf/meta": "^6.0.2", diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 64c634de44..03ea58e77d 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -1009,6 +1009,10 @@ export default class BaseLayer extends EventEmitter } } + public getShaderPickStat() { + return this.layerService.getShaderPickStat(); + } + /** * 继承空方法 * @param time diff --git a/packages/layers/src/line/shaders/line_arcmini_frag.glsl b/packages/layers/src/line/shaders/line_arcmini_frag.glsl index e8058285c0..5da2fc1b19 100644 --- a/packages/layers/src/line/shaders/line_arcmini_frag.glsl +++ b/packages/layers/src/line/shaders/line_arcmini_frag.glsl @@ -38,5 +38,4 @@ void main() { 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 index af4356601f..b75f076457 100644 --- a/packages/layers/src/line/shaders/line_arcmini_vert.glsl +++ b/packages/layers/src/line/shaders/line_arcmini_vert.glsl @@ -101,5 +101,4 @@ void main() { } else { gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); } - setPickingColor(a_PickingColor); } diff --git a/packages/layers/src/plugins/ShaderUniformPlugin.ts b/packages/layers/src/plugins/ShaderUniformPlugin.ts index 017d41bc61..9ca5708368 100644 --- a/packages/layers/src/plugins/ShaderUniformPlugin.ts +++ b/packages/layers/src/plugins/ShaderUniformPlugin.ts @@ -79,7 +79,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin { // u_ModelMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], u_PickingBuffer: layer.getLayerConfig().pickingBuffer || 0, // TODO: 当前地图是否在拖动 - u_Dragging: Number(this.mapService.dragging), + u_shaderPick: Number(layer.getShaderPickStat()), }); }); diff --git a/packages/layers/src/point/shaders/fill_frag.glsl b/packages/layers/src/point/shaders/fill_frag.glsl index afe2e052cb..b42095fd89 100644 --- a/packages/layers/src/point/shaders/fill_frag.glsl +++ b/packages/layers/src/point/shaders/fill_frag.glsl @@ -105,5 +105,6 @@ void main() { } gl_FragColor = filterColor(gl_FragColor); + gl_FragColor.rgb *= gl_FragColor.a; } diff --git a/packages/map/package.json b/packages/map/package.json index c00fa048d7..ce4a3b7ba3 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-map", - "version": "2.5.59", + "version": "2.6.2", "description": "l7 map", "keywords": [], "author": "thinkinggis ", @@ -37,7 +37,7 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-utils": "^2.5.59", + "@antv/l7-utils": "^2.6.2", "@babel/runtime": "^7.7.7", "@mapbox/point-geometry": "^0.1.0", "@mapbox/unitbezier": "^0.0.0", diff --git a/packages/map/src/camera.ts b/packages/map/src/camera.ts index c709e99649..0eb20e2262 100644 --- a/packages/map/src/camera.ts +++ b/packages/map/src/camera.ts @@ -710,6 +710,7 @@ export default class Camera extends EventEmitter { if (this.easeId && easeId && this.easeId === easeId) { return; } + // @ts-ignore delete this.easeId; const wasZooming = this.zooming; diff --git a/packages/map/src/geo/transform.ts b/packages/map/src/geo/transform.ts index 655d04cc6a..edc55c9243 100644 --- a/packages/map/src/geo/transform.ts +++ b/packages/map/src/geo/transform.ts @@ -565,10 +565,12 @@ export default class Transform { // unproject two points to get a line and then find the point on that // line with z=0 - const coord0 = new Float32Array([p.x, p.y, 0, 1]); - const coord1 = new Float32Array([p.x, p.y, 1, 1]); + const coord0 = new Float64Array([p.x, p.y, 0, 1]); + const coord1 = new Float64Array([p.x, p.y, 1, 1]); + // @ts-ignore vec4.transformMat4(coord0, coord0, this.pixelMatrixInverse); + // @ts-ignore vec4.transformMat4(coord1, coord1, this.pixelMatrixInverse); const w0 = coord0[3]; diff --git a/packages/maps/package.json b/packages/maps/package.json index a2c81bd0b0..a52c7de6b5 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-maps", - "version": "2.5.59", + "version": "2.6.2", "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.59", - "@antv/l7-map": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-core": "^2.6.2", + "@antv/l7-map": "^2.6.2", + "@antv/l7-utils": "^2.6.2", "@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 1260b0fec5..d830bec554 100644 --- a/packages/maps/src/amap/map.ts +++ b/packages/maps/src/amap/map.ts @@ -142,7 +142,8 @@ export default class AMapService } public setZoom(zoom: number): void { - return this.map.setZoom(zoom); + // 统一设置 Mapbox 缩放等级 + return this.map.setZoom(zoom + 1); } public getCenter(options?: ICameraOptions): ILngLat { @@ -359,13 +360,18 @@ export default class AMapService this.$mapContainer = this.creatAmapContainer( id as string | HTMLDivElement, ); - - const map = new AMap.Map(this.$mapContainer, { + const mapConstructorOptions = { mapStyle: this.getMapStyle(style as string), zooms: [minZoom, maxZoom], viewMode: '3D', ...rest, - }); + }; + if (mapConstructorOptions.zoom) { + // TODO: 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级 + mapConstructorOptions.zoom += 1; + } + // @ts-ignore + const map = new AMap.Map(this.$mapContainer, mapConstructorOptions); // 监听地图相机事件 map.on('camerachange', this.handleCameraChanged); // @ts-ignore diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts index ed3e137e11..b0c615da00 100644 --- a/packages/maps/src/amap2/map.ts +++ b/packages/maps/src/amap2/map.ts @@ -207,11 +207,13 @@ export default class AMapService return 'amap2'; } public getZoom(): number { - return this.map.getZoom(); + // 统一返回 Mapbox 缩放等级 + return this.map.getZoom() - 1; } public setZoom(zoom: number): void { - return this.map.setZoom(zoom); + // 统一设置 Mapbox 缩放等级 + return this.map.setZoom(zoom + 1); } public getCenter(options?: ICameraOptions): ILngLat { @@ -445,12 +447,18 @@ export default class AMapService this.$mapContainer = this.creatAmapContainer( id as string | HTMLDivElement, ); - const map = new AMap.Map(this.$mapContainer, { + const mapConstructorOptions = { mapStyle: this.getMapStyle(style as string), zooms: [minZoom, maxZoom], viewMode: '3D', ...rest, - }); + }; + if (mapConstructorOptions.zoom) { + // TODO: 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级 + mapConstructorOptions.zoom += 1; + } + // @ts-ignore + const map = new AMap.Map(this.$mapContainer, mapConstructorOptions); // @ts-ignore this.map = map; // 在使用 map.customCoords 的时候必须使用 diff --git a/packages/mini/package.json b/packages/mini/package.json index c883df06c3..1212ec552d 100644 --- a/packages/mini/package.json +++ b/packages/mini/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-mini", - "version": "2.5.59", + "version": "2.6.2", "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.5.59", - "@antv/l7-layers": "^2.5.59", - "@antv/l7-maps": "^2.5.59", - "@antv/l7-scene": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-core": "^2.6.2", + "@antv/l7-layers": "^2.6.2", + "@antv/l7-maps": "^2.6.2", + "@antv/l7-scene": "^2.6.2", + "@antv/l7-utils": "^2.6.2", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/renderer/package.json b/packages/renderer/package.json index eebd2772aa..ddc6628855 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-renderer", - "version": "2.5.59", + "version": "2.6.2", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,7 +26,7 @@ "gl": "^4.4.0" }, "dependencies": { - "@antv/l7-core": "^2.5.59", + "@antv/l7-core": "^2.6.2", "@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 ef40985bb4..ab3dcb2aaa 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-scene", - "version": "2.5.59", + "version": "2.6.2", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -23,12 +23,12 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-component": "^2.5.59", - "@antv/l7-core": "^2.5.59", - "@antv/l7-layers": "^2.5.59", - "@antv/l7-maps": "^2.5.59", - "@antv/l7-renderer": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-component": "^2.6.2", + "@antv/l7-core": "^2.6.2", + "@antv/l7-layers": "^2.6.2", + "@antv/l7-maps": "^2.6.2", + "@antv/l7-renderer": "^2.6.2", + "@antv/l7-utils": "^2.6.2", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "mapbox-gl": "^1.2.1", diff --git a/packages/scene/src/ILayerManager.ts b/packages/scene/src/ILayerManager.ts index 1cbb01ed05..ea8025f0de 100644 --- a/packages/scene/src/ILayerManager.ts +++ b/packages/scene/src/ILayerManager.ts @@ -1,6 +1,8 @@ import { ILayer } from '@antv/l7-core'; export default interface ILayerManager { + enableShaderPick: () => void; + diasbleShaderPick: () => void; addLayer(layer: ILayer): void; getLayers(): ILayer[]; diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 0b7f9df94b..972c0433bb 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -51,6 +51,9 @@ import IPostProcessingPassPluggable from './IPostProcessingPassPluggable'; */ class Scene implements IPostProcessingPassPluggable, IMapController, ILayerManager { + public get map() { + return this.mapService.map; + } private sceneService: ISceneService; private mapService: IMapService; private controlService: IControlService; @@ -153,10 +156,6 @@ class Scene } } - public get map() { - return this.mapService.map; - } - public setBgColor(color: string) { this.mapService.setBgColor(color); } @@ -401,6 +400,16 @@ class Scene .to(constructor) .whenTargetNamed(name); } + // 资源管理 + + // 控制 shader pick 计算 + public enableShaderPick() { + this.layerService.enableShaderPick(); + } + + public diasbleShaderPick() { + this.layerService.disableShaderPick(); + } private initComponent(id: string | HTMLDivElement) { this.controlService.init( @@ -419,7 +428,6 @@ class Scene this.addControl(new Logo({ position: logoPosition })); } } - // 资源管理 } export { Scene }; diff --git a/packages/source/package.json b/packages/source/package.json index c8c50b02bd..a510ebb9df 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-source", - "version": "2.5.59", + "version": "2.6.2", "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.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-core": "^2.6.2", + "@antv/l7-utils": "^2.6.2", "@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 6ea2f9b69e..9ee0ee6344 100644 --- a/packages/three/package.json +++ b/packages/three/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-three", - "version": "2.5.59", + "version": "2.6.2", "description": "three for L7 ", "keywords": [ "3D", @@ -44,9 +44,9 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-core": "^2.5.59", - "@antv/l7-layers": "^2.5.59", - "@antv/l7-scene": "^2.5.59", + "@antv/l7-core": "^2.6.2", + "@antv/l7-layers": "^2.6.2", + "@antv/l7-scene": "^2.6.2", "@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 a7abbff68f..720dc3b2e4 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-utils", - "version": "2.5.59", + "version": "2.6.2", "description": "", "main": "lib/index.js", "module": "es/index.js", diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index 364f0a9dc0..6f11ae9d37 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -17,13 +17,18 @@ export default class GaodeMapComponent extends React.Component { map: new GaodeMap({ center: [121.107846, 30.267069], pitch: 0, - style: 'normal', + // style: 'normal', zoom: 20, animateEnable: false, }), }); - - const layer = new PointLayer() + // normal = 'normal', + // additive = 'additive', + // subtractive = 'subtractive', + // min = 'min', + // max = 'max', + // none = 'none', + const layer = new PointLayer({ blend: 'additive' }) .source( [ { diff --git a/stories/Map/components/plugin.tsx b/stories/Map/components/plugin.tsx new file mode 100644 index 0000000000..0b277769c9 --- /dev/null +++ b/stories/Map/components/plugin.tsx @@ -0,0 +1,179 @@ +// @ts-nocheck +import { PointLayer, Scene, LineLayer } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; +import * as React from 'react'; + +export default class AmapPlugin extends React.Component { + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + center: [116.47, 39.98], + pitch: 0, + zoom: 12.5, + plugin: ['AMap.ToolBar', 'AMap.LineSearch'], + }), + }); + this.scene = scene; + scene.addImage( + 'road', + 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg', + ); + scene.addImage( + 'start', + 'https://gw.alipayobjects.com/zos/bmw-prod/1c301f25-9bb8-4e67-8d5c-41117c877caf.svg', + ); + scene.addImage( + 'end', + 'https://gw.alipayobjects.com/zos/bmw-prod/f3db4998-e657-4c46-b5ab-205ddc12031f.svg', + ); + + scene.addImage( + 'busStop', + 'https://gw.alipayobjects.com/zos/bmw-prod/54345af2-1d01-43e1-9d11-cd9bb953202c.svg', + ); + + scene.on('loaded', () => { + window.AMap.plugin(['AMap.ToolBar', 'AMap.LineSearch'], () => { + scene.map.addControl(new AMap.ToolBar()); + + var linesearch = new AMap.LineSearch({ + pageIndex: 1, //页码,默认值为1 + pageSize: 1, //单页显示结果条数,默认值为20,最大值为50 + city: '北京', //限定查询城市,可以是城市名(中文/中文全拼)、城市编码,默认值为『全国』 + extensions: 'all', //是否返回公交线路详细信息,默认值为『base』 + }); + + //执行公交路线关键字查询 + linesearch.search('536', function(status, result) { + //打印状态信息status和结果信息result + + const { path, via_stops } = result.lineInfo[0]; + const startPoint = [path[0]]; + const endpoint = [path[path.length - 1]]; + const budStopsData = via_stops.map((stop) => ({ + lng: stop.location.lng, + lat: stop.location.lat, + name: stop.name, + })); + const data = [ + { + id: '1', + coord: path.map((p) => [p.lng, p.lat]), + }, + ]; + + const busLine = new LineLayer({ blend: 'normal' }) + .source(data, { + parser: { + type: 'json', + coordinates: 'coord', + }, + }) + .size(5) + .shape('line') + .color('rgb(99, 166, 242)') + .texture('road') + .animate({ + interval: 1, // 间隔 + duration: 1, // 持续时间,延时 + trailLength: 2, // 流线长度 + }) + .style({ + lineTexture: true, + iconStep: 25, + }); + + scene.addLayer(busLine); + + const startPointLayer = new PointLayer({ zIndex: 1 }) + .source(startPoint, { + parser: { + x: 'lng', + y: 'lat', + type: 'json', + }, + }) + .shape('start') + .size(20) + .style({ + offsets: [0, 25], + }); + scene.addLayer(startPointLayer); + + const endPointLayer = new PointLayer({ zIndex: 1 }) + .source(endpoint, { + parser: { + x: 'lng', + y: 'lat', + type: 'json', + }, + }) + .shape('end') + .size(25) + .style({ + offsets: [0, 25], + }); + scene.addLayer(endPointLayer); + + const busStops = new PointLayer() + .source(budStopsData, { + parser: { + x: 'lng', + y: 'lat', + type: 'json', + }, + }) + .shape('busStop') + .size(13) + .style({ + offsets: [20, 0], + }); + scene.addLayer(busStops); + + const busStopsName = new PointLayer() + .source(budStopsData, { + parser: { + x: 'lng', + y: 'lat', + type: 'json', + }, + }) + .shape('name', 'text') + .size(12) + .color('#000') + .style({ + textAnchor: 'left', + textOffset: [80, 0], + stroke: '#fff', + strokeWidth: 1, + }); + scene.addLayer(busStopsName); + }); + }); + }); + } + + public render() { + return ( + <> +
+ + ); + } +} diff --git a/stories/Map/map.stories.tsx b/stories/Map/map.stories.tsx index e4ea82987e..011453b626 100644 --- a/stories/Map/map.stories.tsx +++ b/stories/Map/map.stories.tsx @@ -63,6 +63,7 @@ import Amap2demo_styleMap from "./components/amap2demo_styleMap" import Amap2demo_textOffset from "./components/amap2demo_textOffset" import ShapeUpdate from './components/shapeUpdate' +import AmapPlugin from './components/plugin' // @ts-ignore storiesOf('地图方法', module) @@ -129,3 +130,4 @@ storiesOf('地图方法', module) .add('测试销毁', () => ) .add('ShapeUpdate', () => ) + .add('AmapPlugin', () => ) diff --git a/stories/MapPerformance/components/BigLine.tsx b/stories/MapPerformance/components/BigLine.tsx index 4fd41d10b2..e1f3f951f9 100644 --- a/stories/MapPerformance/components/BigLine.tsx +++ b/stories/MapPerformance/components/BigLine.tsx @@ -21,7 +21,7 @@ export default class PointTest extends React.Component { zoom: 5, }), }); - + scene.diasbleShaderPick(); let address = 'https://gw.alipayobjects.com/os/bmw-prod/3f2f9284-3fb1-4838-8baa-6ffd06738fcd.csv'; fetch(address) @@ -43,6 +43,27 @@ export default class PointTest extends React.Component { .shape('arcmini') .size(2) .color('rgb(13,64,140)') + .style({ + segmentNumber: 30, + }); + + // lineLayer2 + const lineLayer2 = new LineLayer({ + // autoFit: true, + blend: 'normal', + }) + .source(data, { + parser: { + type: 'csv', + x: 'f_lon', + y: 'f_lat', + x1: 't_lon', + y1: 't_lat', + }, + }) + .shape('arc') + .size(2) + .color('rgb(13,64,140)') .style({ segmentNumber: 30, }) @@ -52,9 +73,19 @@ export default class PointTest extends React.Component { .active({ color: '#ff0', }); - // .animate(true) + lineLayer2.hide(); + // scene.addLayer(lineLayer2); scene.addLayer(lineLayer); + + window.onmousedown = () => { + // lineLayer2.hide() + lineLayer.show(); + }; + window.onmouseup = () => { + // lineLayer2.show() + lineLayer.hide(); + }; }); } diff --git a/stories/MapPerformance/components/Map.tsx b/stories/MapPerformance/components/Map.tsx index f1e0c14703..70db4791f3 100644 --- a/stories/MapPerformance/components/Map.tsx +++ b/stories/MapPerformance/components/Map.tsx @@ -145,8 +145,9 @@ export default class PointTest extends React.Component { // let address = 'https://gw.alipayobjects.com/os/bmw-prod/e76d89f4-aa69-4974-90b7-b236904a43b1.json' // 100 // let address = 'https://gw.alipayobjects.com/os/bmw-prod/edc8219a-b095-4451-98e9-3e387e290087.json' // 10000 // let address = 'https://gw.alipayobjects.com/os/bmw-prod/2c37f08b-3fe6-4c68-a699-dc15cfc217f1.json' // 50000 + // let address = 'https://gw.alipayobjects.com/os/bmw-prod/8adff753-64e6-4ffa-9e7b-1f3dc6f4fd76.json'; // 100000 let address = - 'https://gw.alipayobjects.com/os/bmw-prod/8adff753-64e6-4ffa-9e7b-1f3dc6f4fd76.json'; // 100000 + 'https://gw.alipayobjects.com/os/bmw-prod/577a70fb-fc19-4582-83ed-7cddb7b77645.json'; // 20 0000 fetch(address) .then((res) => res.json()) .then((data) => { @@ -168,6 +169,7 @@ export default class PointTest extends React.Component { // .animate(true) // .active(true); + scene.diasbleShaderPick(); scene.on('loaded', () => { scene.addLayer(layer); }); diff --git a/stories/React/React.stories.tsx b/stories/React/React.stories.tsx index 63233a1756..2bfa67c89a 100644 --- a/stories/React/React.stories.tsx +++ b/stories/React/React.stories.tsx @@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; import GaodeMapScene from './components/Scene'; import WorldMap from './components/world'; +import WorldLayer from './components/worldLayer'; import WorldExtrueMap from './components/world_ncov'; import WorldBubbleMap from './components/world_ncov_bubble'; import WorldBubbleAnimateMap from './components/world_ncov_bubble_animate'; @@ -11,6 +12,7 @@ import WorldFillMap from './components/world_ncov_fill'; // @ts-ignore storiesOf('React', module).add('高德地图', () => ); storiesOf('React', module).add('世界地图', () => ); +storiesOf('React', module).add('WorldLayer', () => ); storiesOf('React', module).add('疫情地图-填充图', () => ); storiesOf('React', module).add('疫情地图-气泡图', () => ); storiesOf('React', module).add('疫情地图-3D柱图', () => ); diff --git a/stories/React/components/worldLayer.tsx b/stories/React/components/worldLayer.tsx new file mode 100644 index 0000000000..576dd41eb3 --- /dev/null +++ b/stories/React/components/worldLayer.tsx @@ -0,0 +1,81 @@ +import { Scene } from '@antv/l7'; +import { WorldLayer } from '@antv/l7-district'; +import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps'; +import * as React from 'react'; + +export default class Country extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMapV2({ + pitch: 0, + style: 'dark', + center: [116.2825, 39.9], + // zoom: 0, + zoom: 3, + // minZoom: 0, + maxZoom: 24, + }), + }); + scene.on('loaded', () => { + const Layer = new WorldLayer(scene, { + autoFit: false, + data: [], + geoDataLevel: 2, + joinBy: ['SOC', 'SOC'], + fill: { + color: { + field: 'NAME_CHN', + values: ['rgba(1.0, 0.0, 0.0, 0.5)'], + }, + }, + stroke: '#ccc', + label: { + enable: true, + textAllowOverlap: false, + field: 'NAME_ENG', + padding: [5, 5], + }, + popup: { + // enable: true, + enable: false, + Html: (props) => { + return `${props.NAME_CHN}`; + }, + }, + }); + // @ts-ignore + // window.onresize = () => Layer.fillLayer.fitBounds() + + // scene.setZoom(4) + // console.log(scene.getZoom()) + setTimeout(() => { + console.log('***', scene.getZoom()); + }, 1500); + }); + + this.scene = scene; + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/customMap/components/Map.tsx b/stories/customMap/components/Map.tsx index b0118af4a9..d8b086d4f6 100644 --- a/stories/customMap/components/Map.tsx +++ b/stories/customMap/components/Map.tsx @@ -32,9 +32,9 @@ export default class ScaleComponent extends React.Component { // canvas: this.el, map: new Map({ hash: true, - center: [110.19382669582967, 30.258134], + center: [122.2215, 29.8325], pitch: 0, - zoom: 2, + zoom: 22, }), }); scene.addImage( @@ -107,6 +107,7 @@ export default class ScaleComponent extends React.Component { const layer = new PolygonLayer({ name: '01', + autoFit: true, }) .source(data) .size('name', [0, 10000, 50000, 30000, 100000]) @@ -124,6 +125,8 @@ export default class ScaleComponent extends React.Component { opacity: 1.0, }); scene.addLayer(layer); + + window.onresize = () => layer.fitBounds(); }); scene.on('loaded', () => {