fix: mvt tile pick fix #2273 (#2298)

* fix: mvt tile pick fix #2273 * feat: 补充rasterlayer heatmap 图层的 getlegend 方法 close: #2223 * docs: 添加卷帘对比demo * chore: 修改demo 路径 * docs: 添加文档demo
antvis · Feb 21, 2024 · 5aa14c0 · 5aa14c0
1 parent a802096
commit 5aa14c0
Show file tree

Hide file tree

Showing 20 changed files with 222 additions and 68 deletions.
diff --git a/examples/demos/heatmap/normal.ts b/examples/demos/heatmap/normal.ts
@@ -42,6 +42,9 @@ export function MapRender(option: {
                 },
               });
             scene.addLayer(layer);
+            layer.on('inited', () => {
+              console.log(layer.getLegend('color'))
+            })
             if (window['screenshot']) {
               window['screenshot']();
             }

diff --git a/examples/demos/raster/dem.ts b/examples/demos/raster/dem.ts
@@ -26,7 +26,6 @@ export function MapRender(option: { map: string; renderer: 'regl' | 'device' })
     const width = image.getWidth();
     const height = image.getHeight();
     const values = await image.readRasters();
-    console.log(values);
 
     const layer = new RasterLayer();
     layer
@@ -60,7 +59,13 @@ export function MapRender(option: { map: string; renderer: 'regl' | 'device' })
         },
       });
 
+
+    layer.on('inited',()=>{
+      console.log(layer.getLegend('color'));
+    })
+
     scene.addLayer(layer);
+
     if (window['screenshot']) {
       window['screenshot']();
     }

diff --git a/examples/demos/tile/perf.ts b/examples/demos/tile/perf.ts
@@ -2,8 +2,6 @@ import { LineLayer, PolygonLayer, Scene, Source } from '@antv/l7';
 // @ts-ignore
 import * as allMap from '@antv/l7-maps';
 import { Protocol } from 'pmtiles';
-const protocol = new Protocol();
-Scene.addProtocol('pmtiles', protocol.tile);
 
 export function MapRender(option: {
   map: string;
@@ -41,11 +39,17 @@ export function MapRender(option: {
     // 绿地
     const fill = new PolygonLayer({
       sourceLayer: 'CHN_Districts',
+      featureId:'adcode',
     })
       .source(source)
       .shape('fill')
+      // .color('#f00');
       .color('adcode', getColorByAdcode);
 
+    fill.on('click', (e) => {
+      console.log(e);
+    });
+
     const line = new LineLayer({
       sourceLayer: 'CHN_Districts_L',
     })
@@ -70,9 +74,9 @@ export function MapRender(option: {
       .color('#de2d26');
 
     scene.addLayer(fill);
-    scene.addLayer(line);
-    scene.addLayer(line2);
-    scene.addLayer(line3);
+    // scene.addLayer(line);
+    // scene.addLayer(line2);
+    // scene.addLayer(line3);
     //   scene.addLayer(line2);
     // const debugerLayer = new TileDebugLayer({ usage: 'basemap' });
     // scene.addLayer(debugerLayer);

diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts
@@ -376,23 +376,16 @@ export default class PickingService implements IPickingService {
     for (const layer of layers
       .filter((layer) => layer.needPick(target.type))
       .reverse()) {
-      if (!layer.tileLayer) {
-        layer.hooks.beforePickingEncode.call();
-      }
       await useFramebufferAsync(this.pickingFBO, async () => {
         clear({
           framebuffer: this.pickingFBO,
           color: [0, 0, 0, 0],
           stencil: 0,
           depth: 1,
         });
+        // 渲染需要拾取的图层
         layer.layerPickService.pickRender(target);
       });
-
-      if (!layer.tileLayer) {
-        layer.hooks.afterPickingEncode.call();
-      }
-
       const isPicked = await this.pickFromPickingFBO(layer, target);
       this.layerService.pickedLayerId = isPicked ? +layer.id : -1;
       if (isPicked && !layer.getLayerConfig().enablePropagation) {

diff --git a/packages/core/src/services/layer/IStyleAttributeService.ts b/packages/core/src/services/layer/IStyleAttributeService.ts
@@ -25,6 +25,7 @@ export enum ScaleTypes {
   THRESHOLD = 'threshold',
   CAT = 'cat',
   DIVERGING = 'diverging',
+  CUSTOM = 'threshold',
 }
 export type ScaleTypeName =
   | 'linear'
@@ -37,7 +38,8 @@ export type ScaleTypeName =
   | 'threshold'
   | 'diverging'
   | 'sequential'
-  | 'cat';
+  | 'cat'
+  | 'custom';
 
 export type ScaleAttributeType = 'color' | 'size' | 'shape';
 export interface IScale {

diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts
@@ -189,7 +189,7 @@ export default class LayerService
   public renderTileLayerMask(layer: ILayer) {
     let maskindex = 0;
     const { enableMask = true } = layer.getLayerConfig();
-    let maskCount = layer.tileMask ? 1 : 0;
+    let maskCount = layer.tileMask ? 1 : 0; // 瓦片裁剪 线图层或者面图层
     const masklayers = layer.masks.filter((m) => m.inited);
 
     maskCount = maskCount + (enableMask ? masklayers.length : 1);

diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts
@@ -716,7 +716,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     });
 
     this.encodeStyle(newOption);
-
     this.updateLayerConfig(newOption);
 
     return this;
@@ -1404,7 +1403,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
       this.clearModels();
       return this;
     }
-
     this.hooks.beforeRender.call();
     this.models.forEach((model) => {
       model.draw(

diff --git a/packages/layers/src/core/LayerPickService.ts b/packages/layers/src/core/LayerPickService.ts
@@ -21,10 +21,13 @@ export default class BaseLayerPickService implements ILayerPickService {
     if (layer.tileLayer) {
       return layer.tileLayer.pickRender(target);
     }
+    // 渲染瓦片图层的拾取
+    layer.hooks.beforePickingEncode.call();
     layerService.renderTileLayerMask(layer);
     layer.renderModels({
       ispick: true,
     });
+    layer.hooks.afterPickingEncode.call();
   }
 
   public async pick(layer: ILayer, target: IInteractionTarget) {

diff --git a/packages/layers/src/heatmap/index.ts b/packages/layers/src/heatmap/index.ts
@@ -1,8 +1,9 @@
-import type { IAttributeAndElements, IRenderOptions } from '@antv/l7-core';
+import type { IAttributeAndElements, ILegend, IRenderOptions } from '@antv/l7-core';
 import BaseLayer from '../core/BaseLayer';
 import type { IHeatMapLayerStyleOptions } from '../core/interface';
 import type { HeatMapModelType } from './models';
 import HeatMapModels from './models';
+import { rampColor2legend } from '../utils/rampcolor_legend';
 export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
   public type: string = 'HeatMapLayer';
 
@@ -75,4 +76,21 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
     }
     return 'heatmap';
   }
+  public getLegend(name: string): ILegend {
+    if(this.getModelType() === 'heatmap') {
+      if (name !== 'color') return {
+        type: undefined,
+        field: undefined,
+        items: []
+      }
+      const rampColors = this.getLayerConfig().rampColors;
+      return rampColor2legend(rampColors,name);
+    } else {
+      return super.getLegend(name);
+    }
+
+
+  }
+
+
 }
diff --git a/packages/layers/src/raster/index.ts b/packages/layers/src/raster/index.ts
@@ -1,7 +1,9 @@
+import type { ILegend } from '@antv/l7-core';
 import BaseLayer from '../core/BaseLayer';
 import type { IRasterLayerStyleOptions } from '../core/interface';
 import type { RasterModelType } from './models/index';
 import RasterModels from './models/index';
+import { rampColor2legend } from '../utils/rampcolor_legend';
 export default class RaterLayer extends BaseLayer<IRasterLayerStyleOptions> {
   public type: string = 'RasterLayer';
   public async buildModels() {
@@ -37,4 +39,14 @@ export default class RaterLayer extends BaseLayer<IRasterLayerStyleOptions> {
         return 'raster';
     }
   }
+  public getLegend(name: string): ILegend {
+    if (name !== 'color') return {
+      type: undefined,
+      field: undefined,
+      items: []
+    }
+    const rampColors = this.getLayerConfig().rampColors;
+    return rampColor2legend(rampColors,name);
+
+}
 }
diff --git a/packages/layers/src/utils/rampcolor_legend.ts b/packages/layers/src/utils/rampcolor_legend.ts
@@ -0,0 +1,13 @@
+import type { ILegend, ScaleTypeName } from '@antv/l7-core';
+export function rampColor2legend (rampColors: {type: ScaleTypeName, colors: string[], positions: number[]}, name: string): ILegend {
+    return {
+        type: rampColors.type,
+        field: 'value',
+        items: rampColors.positions.map((value: number, index: number) => {
+          return {
+            [name]: index >= rampColors.colors.length ? null : rampColors.colors[index],
+            value
+          }
+        })
+      }
+}
diff --git a/packages/site/docs/api/common/layer/layer_event.zh.md b/packages/site/docs/api/common/layer/layer_event.zh.md
@@ -53,7 +53,7 @@ layer.on('legend', (ev) => console.log(ev));
 
 ```
 
-### legend:color
+### `legend:color`
 
 数据映射更新，图例发生变化,color 颜色改变
 参数 option
@@ -65,7 +65,7 @@ layer.on('legend:color', (ev) => console.log(ev));
 
 ```
 
-### legend:size
+### `legend:size`
 
 数据映射更新，图例发生变化,size 大小改变
 参数 option

diff --git a/packages/site/docs/api/common/layer/layer_interaction.zh.md b/packages/site/docs/api/common/layer/layer_interaction.zh.md
@@ -131,6 +131,7 @@ const size1 = sizeScale('n1'); // 40
 const size2 = sizeScale('n2'); // 20
 ```
 ### getLegendItems(type: string)
+不推荐使用，将废弃，
 
 获取图例配置
 
@@ -144,7 +145,9 @@ layer.getLegendItems('size');
 ```
 
 ### getLegend(type: string)
-获取图例 getLegendItems 加强版返回更多信息
+getLegendItems方法的替代方法
+
+该方法需要
 
 返回值
 - type 图例类型
@@ -156,4 +159,5 @@ layer.getLegendItems('size');
 layer.getLegend('color');
 
 layer.getLegend('size');
-```
+```
+注：rasterayer 只支持 color 类型
diff --git a/packages/site/examples/gallery/basic/demo/meta.json b/packages/site/examples/gallery/basic/demo/meta.json
@@ -31,11 +31,11 @@
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*PtMUR6hsN9EAAAAAAAAAAAAAARQnAQ"
     },
     {
-      "filename": "point.js",
-      "title": "海量点",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*OiQxQKq-P9MAAAAAAAAAAAAAARQnAQ"
-    }
-    ,
+      "filename": "swipe.ts",
+      "title": "卷帘对比-作物长势",
+      "new": true,
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*b1WCRJjht2wAAAAAAAAAAAAADmJ7AQ/original"
+    },
     {
       "filename": "normal.js",
       "title": "亮度图",

diff --git a/packages/site/examples/gallery/basic/demo/point.js b/packages/site/examples/gallery/basic/demo/point.js