fix： 修复样式数据映射失效 (#1143)

* fix: 修复样式数据映射失效

* style: lint style

packages/layers/src/line/models/arc.ts

@@ -8,8 +8,8 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-
 import { getMask, rgb2arr } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
@@ -98,8 +98,8 @@ export default class ArcModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
 
-      u_thetaOffset: Number(thetaOffset),
+      u_thetaOffset: isNumber(thetaOffset) ? thetaOffset : 0.0,
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
       segmentNumber,
       u_line_type: lineStyleObj[lineType || 'solid'],

packages/layers/src/line/models/arc_3d.ts

@@ -9,6 +9,7 @@ import {
   ITexture2D,
 } from '@antv/l7-core';
 import { getMask, rgb2arr } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
@@ -95,7 +96,7 @@ export default class Arc3DModel extends BaseModel {
 
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
       segmentNumber,
       u_line_type: lineStyleObj[lineType as string] || 0.0,

packages/layers/src/line/models/arcmini.ts

@@ -7,8 +7,8 @@ import {
   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';
@@ -39,7 +39,7 @@ export default class ArcMiniModel extends BaseModel {
     return {
       u_thetaOffset: thetaOffset,
 
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
 
       segmentNumber,
       u_blur: 0.9,

packages/layers/src/line/models/great_circle.ts

@@ -8,8 +8,8 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-
 import { getMask, rgb2arr } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
 import { LineArcTriangulation } from '../../core/triangulation';
@@ -86,7 +86,7 @@ export default class GreatCircleModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
 
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
       segmentNumber,
       u_line_type: lineStyleObj[lineType as string] || 0.0,

packages/layers/src/line/models/line.ts

@@ -9,8 +9,8 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-
 import { getMask, rgb2arr } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
 import { LineTriangulation } from '../../core/triangulation';
@@ -101,7 +101,7 @@ export default class LineModel extends BaseModel {
     return {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
       u_line_type: lineStyleObj[lineType],
       u_dash_array: dashArray,

packages/layers/src/line/models/linearline.ts

@@ -6,8 +6,8 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-
 import { generateColorRamp, getMask, IColorRamp } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
 import { LineTriangulation } from '../../core/triangulation';
@@ -61,7 +61,7 @@ export default class LinearLineModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
 
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
       // 纹理支持参数
       u_texture: this.colorTexture, // 贴图
 

packages/layers/src/line/models/simpleLine.ts

@@ -7,8 +7,8 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-
 import { getMask, rgb2arr } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
 import { SimpleLineTriangulation } from '../../core/triangulation';
@@ -68,7 +68,7 @@ export default class SimpleLineModel extends BaseModel {
     return {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
 
       // 渐变色支持参数
       u_linearColor: useLinearColor,

packages/layers/src/line/models/wall.ts

@@ -8,8 +8,8 @@ import {
   IModelUniform,
   ITexture2D,
 } 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 { LineTriangulation } from '../../core/triangulation';
@@ -79,7 +79,7 @@ export default class LineWallModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
 
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
 
       // 纹理支持参数

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

@@ -6,6 +6,7 @@ import {
   IModel,
 } from '@antv/l7-core';
 import { getCullFace, rgb2arr } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
 import { PointExtrudeTriangulation } from '../../core/triangulation';
@@ -116,7 +117,7 @@ export default class ExtrudeModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
 
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
 
       // 渐变色支持参数
       u_linearColor: useLinearColor,

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

@@ -10,6 +10,7 @@ import {
   IModelUniform,
 } from '@antv/l7-core';
 import { getCullFace, getMask } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
 import {
@@ -96,9 +97,9 @@ export default class FillModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
 
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
-      u_stroke_opacity: Number(strokeOpacity),
+      u_stroke_opacity: isNumber(strokeOpacity) ? strokeOpacity : 1.0,
-      u_stroke_width: Number(strokeWidth),
+      u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 1.0,
       u_stroke_color: this.getStrokeColor(stroke),
       u_offsets: this.isOffsetStatic(offsets)
         ? (offsets as [number, number])

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

@@ -10,6 +10,7 @@ import {
 } from '@antv/l7-core';
 import { Version } from '@antv/l7-maps';
 import { getCullFace, getMask } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
 import { PointFillTriangulation } from '../../core/triangulation';
@@ -107,7 +108,7 @@ export default class FillImageModel extends BaseModel {
       u_texture: this.texture,
       u_textSize: [1024, this.iconService.canvasHeight || 128],
 
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_offsets: this.isOffsetStatic(offsets)
         ? (offsets as [number, number])
         : [0, 0],

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

@@ -7,6 +7,7 @@ import {
   ITexture2D,
 } from '@antv/l7-core';
 import { getMask } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
 import { PointImageTriangulation } from '../../core/triangulation';
@@ -68,7 +69,7 @@ export default class ImageModel extends BaseModel {
 
       u_texture: this.texture,
       u_textSize: [1024, this.iconService.canvasHeight || 128],
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_offsets: this.isOffsetStatic(offsets)
         ? (offsets as [number, number])
         : [0, 0],

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

@@ -7,6 +7,7 @@ import {
   IModelUniform,
 } from '@antv/l7-core';
 import { getMask } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
 import normalFrag from '../shaders/normal_frag.glsl';
@@ -75,7 +76,7 @@ export default class NormalModel extends BaseModel {
     return {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_offsets: this.isOffsetStatic(offsets)
         ? (offsets as [number, number])
         : [0, 0],

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

@@ -10,6 +10,7 @@ import {
   IModelUniform,
 } from '@antv/l7-core';
 import { getCullFace, getMask } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
 import { PointFillTriangulation } from '../../core/triangulation';
@@ -77,7 +78,7 @@ export default class RadarModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
 
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_offsets: this.isOffsetStatic(offsets)
         ? (offsets as [number, number])
         : [0, 0],

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

@@ -6,8 +6,8 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-
 import { getMask } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
 
@@ -83,12 +83,12 @@ export default class SimplePointModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
 
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_offsets: this.isOffsetStatic(offsets)
         ? (offsets as [number, number])
         : [0, 0],
-      u_stroke_opacity: Number(strokeOpacity),
+      u_stroke_opacity: isNumber(strokeOpacity) ? strokeOpacity : 1.0,
-      u_stroke_width: Number(strokeWidth),
+      u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 1.0,
       u_stroke_color: this.getStrokeColor(stroke),
     };
   }

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

@@ -7,6 +7,7 @@ import {
   ITexture2D,
 } from '@antv/l7-core';
 import { boundsContains, getMask, padBounds } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
 import CollisionIndex from '../../utils/collision-index';
@@ -160,8 +161,8 @@ export default class TextModel extends BaseModel {
       u_cellTypeLayout: this.getCellTypeLayout(),
       u_raisingHeight: Number(raisingHeight),
 
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
-      u_stroke_width: Number(strokeWidth),
+      u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 1.0,
       u_stroke_color: this.getStrokeColor(stroke),
 
       u_sdf_map: this.texture,

packages/layers/src/polygon/models/extrude.ts

@@ -6,6 +6,7 @@ import {
   ITexture2D,
 } from '@antv/l7-core';
 import { getMask, rgb2arr } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPolygonLayerStyleOptions } from '../../core/interface';
 import { PolygonExtrudeTriangulation } from '../../core/triangulation';
@@ -82,7 +83,7 @@ export default class ExtrudeModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
       u_raisingHeight: Number(raisingHeight),
-      u_opacity: Number(opacity),
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
 
       // 渐变色支持参数
       u_linearColor: useLinearColor,

packages/layers/src/polygon/models/fill.ts

@@ -6,6 +6,7 @@ import {
   Triangulation,
 } from '@antv/l7-core';
 import { getMask } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPolygonLayerStyleOptions } from '../../core/interface';
 import {
@@ -61,7 +62,7 @@ export default class FillModel extends BaseModel {
 
       u_raisingHeight: Number(raisingHeight),
 
-      u_opacity: opacity,
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
 
       u_opacitylinear: Number(opacityLinear.enable),
       u_dir: opacityLinear.dir === 'in' ? 1.0 : 0.0,

packages/layers/src/polygon/models/ocean.ts

@@ -7,6 +7,7 @@ import {
   ITexture2D,
 } from '@antv/l7-core';
 import { getMask, rgb2arr } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPolygonLayerStyleOptions } from '../../core/interface';
 import { polygonTriangulation } from '../../core/triangulation';
@@ -59,7 +60,7 @@ export default class OceanModel extends BaseModel {
       u_watercolor2: rgb2arr(watercolor2),
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
-      u_opacity: opacity,
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
     };
   }
 

packages/layers/src/polygon/models/water.ts

@@ -7,6 +7,7 @@ import {
   ITexture2D,
 } from '@antv/l7-core';
 import { getMask } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IPolygonLayerStyleOptions } from '../../core/interface';
 import { polygonTriangulation } from '../../core/triangulation';
@@ -53,7 +54,7 @@ export default class WaterModel extends BaseModel {
       u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: this.getCellTypeLayout(),
       u_speed: speed,
-      u_opacity: opacity,
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
     };
   }
 

stories/Map/components/bugfix.tsx

@@ -38,58 +38,45 @@ export default class Amap2demo extends React.Component {
     this.scene = scene;
 
     scene.on('loaded', () => {
-      // var xyzTileLayer = new window.AMap.TileLayer({
-      //   // 图块取图地址
-      //   getTileUrl:
-      //     'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8&ltype=11',
-      //   zIndex: 100,
-      // });
-      // scene.getMapService().map.add(xyzTileLayer);
-
-      addMarkers();
-      scene.render();
-    });
-
-    function addMarkers() {
       fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+        'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
       )
         .then((res) => res.json())
-        .then((nodes) => {
+        .then((data) => {
-          const markerLayer = new MarkerLayer({
+          data.features = data.features.filter((item) => {
-            cluster: true,
+            return item.properties.capacity > 800;
           });
-          for (let i = 0; i < nodes.features.length; i++) {
+          data.features.forEach((item) => {
-            const { coordinates } = nodes.features[i].geometry;
+            // console.log(item.properties.capacity);
-            const marker = new Marker().setLnglat({
+          });
-              lng: coordinates[0],
+          const pointLayer = new PointLayer({})
-              lat: coordinates[1],
+            .source(data)
+            .shape('capacity', (capacity) =>
+              capacity < 5000 ? 'circle' : 'triangle',
+            )
+            .size('capacity', [0, 16])
+            .color('capacity', [
+              '#34B6B7',
+              '#4AC5AF',
+              '#5FD3A6',
+              '#7BE39E',
+              '#A1EDB8',
+              '#CEF8D6',
+            ])
+            .active(true)
+            .style({
+              opacity: 0.5,
+              // strokeWidth: ["capacity", (capacity) => (capacity < 5000 ? 2 : 4)],
+              strokeWidth: ['capacity', [1, 2]],
+              stroke: [
+                'capacity',
+                (capacity) => (capacity < 5000 ? '#ff0000' : '#0000ff'),
+              ],
             });
-            markerLayer.addMarker(marker);
+
-          }
+          scene.addLayer(pointLayer);
-          scene.addMarkerLayer(markerLayer);
-          // 模拟第二次查询（8条数据，坐标点是兰州）
-          // 注意看地图上兰州的位置，原本是3，放大后会变成11
-          const data = [
-            { coordinates: [103.823305441, 36.064225525] },
-            { coordinates: [103.823305441, 36.064225525] },
-            { coordinates: [103.823305441, 36.064225525] },
-            { coordinates: [103.823305441, 36.064225525] },
-            { coordinates: [103.823305441, 36.064225525] },
-            { coordinates: [103.823305441, 36.064225525] },
-            { coordinates: [103.823305441, 36.064225525] },
-            { coordinates: [103.823305441, 36.064225525] },
-          ];
-          for (let i = 0; i < data.length; i++) {
-            const { coordinates } = data[i];
-            const marker = new Marker().setLnglat({
-              lng: coordinates[0],
-              lat: coordinates[1],
-            });
-            markerLayer.addMarker(marker);
-          }
         });
-    }
+    });
   }
 
   public render() {