feat: 新增枚举类型的色带 (#1283)

Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>

dev-demos/features/point/linearline.md

@@ -0,0 +1,2 @@
+### Linear Line
+<code src="./linearline.tsx"></code>

dev-demos/features/point/linearline.tsx

@@ -0,0 +1,80 @@
+import { PointLayer, LineLayer, Scene, RasterLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+    useEffect(() => {
+        const scene = new Scene({
+            id: 'map',
+            map: new GaodeMap({
+              center: [105, 30.258134],
+              zoom: 5,
+            }),
+          });
+          
+          const geoData = {
+            type: 'FeatureCollection',
+            features: [
+              {
+                type: 'Feature',
+                properties: {
+                  testOpacity: 0.8,
+                },
+                geometry: {
+                  type: 'Polygon',
+                  coordinates: [
+                    [
+                      [99.228515625, 37.43997405227057],
+                      [99.228515625, 35.02999636902566],
+                      [101.337890625, 32.99023555965106],
+                      [99.052734375, 30.29701788337205],
+                      [100.72265625, 27.994401411046148],
+                      [99.49218749999999, 26.352497858154024],
+                      [100.634765625, 23.725011735951796],
+                    ],
+                    [
+                      [108.544921875, 37.71859032558816],
+                      [110.74218749999999, 34.66935854524543],
+                      [110.21484375, 32.76880048488168],
+                      [112.412109375, 32.84267363195431],
+                      [112.1484375, 30.751277776257812],
+                      [114.08203125, 31.42866311735861],
+                    ],
+                  ],
+                },
+              },
+            ],
+          };
+
+        const layer = new LineLayer({})
+          .source(geoData)
+          .size(10)
+          .shape('linearline')
+          .style({
+            rampColors: {
+              colors: [
+                '#FF4818',
+                '#F7B74A',
+                '#FFF598',
+                '#91EABC',
+                '#2EA9A1',
+                '#206C7C',
+              ],
+              weights: [0.1, 0.1, 0.1, 0.1, 0.1, 0.5]
+            },
+          });
+
+        scene.on('loaded', () => {
+            scene.addLayer(layer);
+        })
+    }, [])
+    return (
+        <div
+            id="map"
+            style={{
+                height:'500px',
+                position: 'relative'
+            }}
+        />
+    );
+}

packages/utils/src/color.ts

@@ -3,6 +3,7 @@ import { $window, isMini } from './mini-adapter';
 export interface IColorRamp {
   positions: number[];
   colors: string[];
+  weights?: number[];
 }
 
 export function isColor(str: any) {
@@ -57,21 +58,31 @@ export function generateColorRamp(
   let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
   canvas.width = 256;
   canvas.height = 1;
-  const gradient = ctx.createLinearGradient(0, 0, 256, 1);
   let data = null;
-  const min = colorRamp.positions[0];
-  const max = colorRamp.positions[colorRamp.positions.length - 1];
-  for (let i = 0; i < colorRamp.colors.length; ++i) {
-    const value = (colorRamp.positions[i] - min) / (max - min);
-    gradient.addColorStop(value, colorRamp.colors[i]);
-  }
-  ctx.fillStyle = gradient;
-  ctx.fillRect(0, 0, 256, 1);
 
-  // data = new Uint8ClampedArray(ctx.getImageData(0, 0, 256, 1).data);
+  if (colorRamp.weights) {
-  // return !isMini
+    // draw enum color
-  //   ? new ImageData(data, 256, 1)
+    let count = 0;
-  //   : { data, width: 256, height: 1 };
+    colorRamp.weights.map((w, index) => {
+      const color = colorRamp.colors[index] || 'rgba(0, 0, 0, 0)';
+      const stop = count + w;
+      ctx.fillStyle = color;
+      ctx.fillRect(count * 256, 0, stop * 256, 1);
+      count = stop;
+    });
+  } else {
+    // draw linear color
+    const gradient = ctx.createLinearGradient(0, 0, 256, 1);
+
+    const min = colorRamp.positions[0];
+    const max = colorRamp.positions[colorRamp.positions.length - 1];
+    for (let i = 0; i < colorRamp.colors.length; ++i) {
+      const value = (colorRamp.positions[i] - min) / (max - min);
+      gradient.addColorStop(value, colorRamp.colors[i]);
+    }
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, 256, 1);
+  }
 
   if (!isMini) {
     data = ctx.getImageData(0, 0, 256, 1).data;