fix: shape 更新,filter 优化

dev-demos/bugs/point/demos/shape.tsx

@@ -55,13 +55,11 @@ export default () => {
         .size(20);
       scene.addLayer(imageLayer);
       setTimeout(()=>{
-      shapeType = '02';
+        shapeType = '02';
-    //   imageLayer.shape('type', (v: any) => {
+        imageLayer.shape('type', (v: any) => {
-    //     console.log(1111,shapeType)
+          return shapeType;
-    //     return shapeType;
+        })
-    //   })
+       scene.render()
-    imageLayer.shape('02');
-    //   scene.render()
 
       },2000)
           

dev-demos/gallery/scale/diverging.tsx

@@ -16,6 +16,7 @@ export default () => {
           style: 'light',
           center: [-96, 37.8],
           zoom: 3,
+          interactive: true,
         }),
       });
       setScene(mapScene);

packages/core/src/services/layer/StyleAttributeService.ts

@@ -76,6 +76,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
     updateOptions?: Partial<IStyleAttributeUpdateOptions>,
   ) {
 
+
     let attributeToUpdate = this.getLayerStyleAttribute(attributeName);
     if (!attributeToUpdate) {
       attributeToUpdate = this.registerStyleAttribute({

packages/layers/src/core/BaseLayer.ts

@@ -65,7 +65,6 @@ import {
   createMultiPassRenderer,
   normalizePasses,
 } from '../utils/multiPassRender';
-import { updateShape } from '../utils/updateShape';
 import LayerPickService from './LayerPickService';
 import TextureService from './TextureService';
 /**
@@ -540,6 +539,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     updateOptions?: Partial<IStyleAttributeUpdateOptions>,
   ) {
     this.updateStyleAttribute('filter', field, values, updateOptions);
+    this.dataState.dataSourceNeedUpdate = true;
     return this;
   }
 
@@ -548,18 +548,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     values?: StyleAttributeOption,
     updateOptions?: Partial<IStyleAttributeUpdateOptions>,
   ) {
-    const lastShape =
-      this.styleAttributeService?.getLayerStyleAttribute('shape')?.scale?.field;
-    const currentShape = field;
     this.shapeOption = {
       field,
       values,
     };
     this.updateStyleAttribute('shape', field, values, updateOptions);
-    // Tip: 根据 shape 判断是否需要更新 model
+    this.dataState.dataSourceNeedUpdate = true; // 通过数据更新驱动shape 更新
-    if (!this.tileLayer) {
-      updateShape(this, lastShape, currentShape);
-    }
     return this;
   }
   public label(

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -62,7 +62,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
       if (Array.isArray(dataArray) && dataArray.length === 0) {
         return;
       }
-
       const attributesToRemapping = attributes.filter(
         (attribute) => attribute.needRemapping, // 如果filter变化
       );
@@ -76,27 +75,16 @@ export default class DataMappingPlugin implements ILayerPlugin {
 
       if (attributesToRemapping.length) {
         // 过滤数据
-        if (filter?.needRemapping) {
+        const encodeData = this.mapping(
-          const encodeData = this.mapping(
+          layer,
-            layer,
+          attributesToRemapping,
-            attributes,
+          filterData,
-            filterData,
+          layer.getEncodedData(),
-            undefined,
+        );
-          );
+        layer.setEncodedData(encodeData);
-          layer.setEncodedData(encodeData);
-          filter.needRemapping = false;
-        } else {
-          const encodeData = this.mapping(
-            layer,
-            attributesToRemapping,
-            filterData,
-            layer.getEncodedData(),
-          );
-          layer.setEncodedData(encodeData);
-        }
-        // 处理文本更新，更新文字形状
-        // layer.emit('remapping', null);
       }
+      // 处理文本更新，更新文字形状
+      // layer.emit('remapping', null);
     });
   }
   private generateMaping(
@@ -119,6 +107,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
     // Tip: layer 对数据做处理
     // 数据处理 在数据进行 mapping 生成 encodeData 之前对数据进行处理
     // 在各个 layer 中继承
+
     filterData = layer.processData(filterData);
     const encodeData = this.mapping(layer, attributes, filterData, undefined);
     layer.setEncodedData(encodeData);
@@ -139,9 +128,9 @@ export default class DataMappingPlugin implements ILayerPlugin {
       },
     } = layer.getLayerConfig() as ILineLayerStyleOptions;
 
-    const usedAttributes = attributes.filter(
+    const usedAttributes = attributes
-      (attribute) => attribute.scale !== undefined,
+      .filter((attribute) => attribute.scale !== undefined)
-    );
+      .filter((attribute) => attribute.name !== 'filter');
     const mappedData = data.map((record: IParseDataItem, i) => {
       const preRecord = predata ? predata[i] : {};
       const encodeRecord: IEncodeFeature = {
@@ -149,10 +138,9 @@ export default class DataMappingPlugin implements ILayerPlugin {
         coordinates: record.coordinates,
         ...preRecord,
       };
+
       usedAttributes.forEach((attribute: IStyleAttribute) => {
         let values = this.applyAttributeMapping(attribute, record);
-        attribute.needRemapping = false;
-
         // TODO: 支持每个属性配置 postprocess
         if (attribute.name === 'color') {
           values = values.map((c: unknown) => {
@@ -188,12 +176,15 @@ export default class DataMappingPlugin implements ILayerPlugin {
       }
       return encodeRecord;
     }) as IEncodeFeature[];
+
+    attributes.forEach((attribute) => {
+      attribute.needRemapping = false;
+    });
     // 调整数据兼容 Amap2.0
     this.adjustData2Amap2Coordinates(mappedData, layer);
 
     // 调整数据兼容 SimpleCoordinates
     this.adjustData2SimpleCoordinates(mappedData);
-
     return mappedData;
   }
 

packages/layers/src/plugins/RegisterStyleAttributePlugin.ts

@@ -42,7 +42,7 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
     }
     // Tip: normal render layer
     this.registerPositionAttribute(styleAttributeService);
-    this.registerFilterAttribute(styleAttributeService);
+    // this.registerFilterAttribute(styleAttributeService);//数据层数据过滤
     this.registerColorAttribute(styleAttributeService);
     this.registerVertexIdAttribute(styleAttributeService);
   }

packages/layers/src/point/models/fillmage.ts

@@ -197,7 +197,6 @@ export default class FillImageModel extends BaseModel {
       mask = false,
       maskInside = true,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
-
        const model = await this.layer
       .buildLayerModel({
         moduleName: 'pointFillImage',

packages/layers/src/point/models/image.ts

@@ -83,7 +83,6 @@ export default class ImageModel extends BaseModel {
   public async initModels(): Promise<IModel[]> {
     this.iconService.on('imageUpdate', this.updateTexture);
     this.updateTexture();
-
     return await this.buildModels();
   }
 

packages/layers/src/utils/updateShape.ts

@@ -1,43 +0,0 @@
-import { ILayer, StyleAttributeField } from '@antv/l7-core';
-// shapeUpdateList 存储一系列的 shape 类型
-// 当这一系列的 shape 相互切换的时候需要重构 layer 的 model (顶点数据集)
-const shapeUpdateList = [
-  // PointLayer
-  ['circle', 'cylinder'],
-  ['square', 'cylinder'],
-  ['triangle', 'cylinder'],
-  ['pentagon', 'cylinder'],
-  ['hexagon', 'cylinder'],
-  ['octogon', 'cylinder'],
-  ['hexagram', 'cylinder'],
-  ['rhombus', 'cylinder'],
-  ['vesica', 'cylinder'],
-];
-export async function updateShape(
-  layer: ILayer,
-  lastShape: StyleAttributeField | undefined,
-  currentShape: StyleAttributeField | undefined,
-) {
-  if (
-    typeof lastShape === 'string' &&
-    typeof currentShape === 'string' &&
-    lastShape !== currentShape
-  ) {
-    if (layer.type === 'PointLayer') {
-      layer.dataState.dataSourceNeedUpdate = true;
-      await layer.hooks.beforeRenderData.promise();
-      layer.renderLayers();
-      return;
-    }
-
-    shapeUpdateList.map(async (shapes) => {
-      if (shapes.includes(lastShape) && shapes.includes(currentShape)) {
-        // dataSourceNeedUpdate 借用数据更新时更新 layer model 的工作流
-        layer.dataState.dataSourceNeedUpdate = true;
-        await layer.hooks.beforeRenderData.promise();
-        layer.renderLayers();
-        return;
-      }
-    });
-  }
-}

packages/site/docs/api/scene.zh.md

@@ -92,6 +92,7 @@ const scene = new L7.Scene({
 是否保留缓冲区数据 `boolean` `false`。
 
 ### isMini
+
 <description> _boolean_ **可选** _default: false_ </description>
 
 是否小程序模式 `boolean` `false`,目前仅支持支付宝

packages/utils/src/workers/triangulation.ts

@@ -63,16 +63,24 @@ export function PointFillTriangulation(feature: IEncodeFeature) {
 }
 
 export function polygonFillTriangulation(feature: IEncodeFeature) {
-  const { coordinates } = feature;
+  const { coordinates, version } = feature;
   const flattengeo = earcut.flatten(coordinates as number[][][]);
   const { vertices, dimensions, holes } = flattengeo;
-  for (let i = 0; i < vertices.length; i += dimensions) {
+  if (version !== 'GAODE2.x') {
-    vertices[i + 1] = project_y(vertices[i + 1]);
+    for (let i = 0; i < vertices.length; i += dimensions) {
+      const mer = project_mercator(vertices[i + 0], vertices[i + 1]);
+      vertices[i] = mer[0];
+      vertices[i + 1] = mer[1];
+    }
   }
   // https://github.com/mapbox/earcut/issues/159
   const triangles = earcut(vertices, holes, dimensions);
-  for (let i = 0; i < vertices.length; i += dimensions) {
+  if (version !== 'GAODE2.x') {
-    vertices[i + 1] = un_project_y(vertices[i + 1]);
+    for (let i = 0; i < vertices.length; i += dimensions) {
+      const ll = mercator_lnglat(vertices[i + 0], vertices[i + 1]);
+      vertices[i] = ll[0];
+      vertices[i + 1] = ll[1];
+    }
   }
 
   return {
@@ -82,16 +90,16 @@ export function polygonFillTriangulation(feature: IEncodeFeature) {
   };
 }
 
-function project_y(y: number) {
+function project_mercator(x: number, y: number) {
-  if (y > 85 || y < -85) {
+  return [
-    return y;
+    (Math.PI * x) / 180 + Math.PI,
-  }
+    Math.PI - Math.log(Math.tan(Math.PI * 0.25 + ((Math.PI * y) / 180) * 0.5)),
-  return Math.log(Math.tan((Math.PI * y) / 360));
+  ];
 }
 
-function un_project_y(y: number) {
+function mercator_lnglat(x: number, y: number) {
-  if (y > 85 || y < -85) {
+  return [
-    return y;
+    ((x - Math.PI) * 180) / Math.PI,
-  }
+    ((Math.atan(Math.exp(Math.PI - y)) - Math.PI * 0.25) * 2 * 180) / Math.PI,
-  return (Math.atan(Math.exp(y)) * 360) / Math.PI;
+  ];
 }