fix: discrete colorScale drawing error

hongfaqiu · Jul 2, 2024 · 1ced789 · 1ced789
1 parent 2a8ac51
commit 1ced789
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 18 deletions.
diff --git a/packages/TIFFImageryProvider/src/helpers/utils.ts b/packages/TIFFImageryProvider/src/helpers/utils.ts
@@ -55,16 +55,17 @@ export function generateColorScale(colors: [number, string][] | string[], minMax
   stops.sort((a, b) => a[0] - b[0]);
 
   if (stops[0][0] > 0) {
-    stops = [stops[0], ...stops]
-  }
-
-  if (stops[stops.length - 1][0] > 0) {
-    stops = [...stops, stops[stops.length - 1]]
+    stops = [[0, stops[0][1]], ...stops]
   }
 
   const colorScale = {
     colors: stops.map(stop => stop[1]),
-    positions: stops.map(stop => stop[0]),
+    positions: stops.map(stop => {
+      let s = stop[0];
+      if (s < 0) return 0;
+      if (s > 1) return 1;
+      return s;
+    }),
   }
 
   return colorScale;

diff --git a/packages/TIFFImageryProvider/src/plotty/index.ts b/packages/TIFFImageryProvider/src/plotty/index.ts
@@ -124,31 +124,40 @@ function addColorScale(name: string, colors: string[], positions: number[]) {
  * @param {RenderColorType} type the type of color scale to render, either "continuous" or "discrete"
  */
 function renderColorScaleToCanvas(name: string, canvas: HTMLCanvasElement, type: RenderColorType = 'continuous') {
-  /* eslint-disable no-param-reassign */
   const csDef = colorscales[name];
   canvas.height = 1;
   const ctx = canvas.getContext('2d');
 
+  if (!ctx) {
+    throw new Error('Unable to get canvas context.');
+  }
+
   if (Object.prototype.toString.call(csDef) === '[object Object]') {
     canvas.width = 256;
-    const gradient = ctx.createLinearGradient(0, 0, 256, 1);
 
     if (type === 'continuous') {
+      const gradient = ctx.createLinearGradient(0, 0, 256, 1);
+
       for (let i = 0; i < csDef.colors.length; ++i) {
         gradient.addColorStop(csDef.positions[i], csDef.colors[i]);
       }
+
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, 256, 1);
     } else if (type === 'discrete') {
       for (let i = 0; i < csDef.colors.length - 1; ++i) {
-        gradient.addColorStop(csDef.positions[i], csDef.colors[i]);
-        gradient.addColorStop(csDef.positions[i + 1] - 0.001, csDef.colors[i]);
+        const startPos = csDef.positions[i] * 256;
+        const endPos = csDef.positions[i + 1] * 256;
+        ctx.fillStyle = csDef.colors[i];
+        ctx.fillRect(startPos, 0, endPos - startPos, 1);
       }
-      gradient.addColorStop(1, csDef.colors[csDef.colors.length - 1]);
+
+      ctx.fillStyle = csDef.colors[csDef.colors.length - 1];
+      ctx.fillRect(csDef.positions[csDef.positions.length - 1] * 256, 0, 256 - csDef.positions[csDef.positions.length - 1] * 256, 1);
+
     } else {
       throw new Error('Invalid color scale type.');
     }
-
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, 256, 1);
   } else if (Object.prototype.toString.call(csDef) === '[object Uint8Array]') {
     canvas.width = 256;
     const imgData = ctx.createImageData(256, 1);
@@ -157,7 +166,6 @@ function renderColorScaleToCanvas(name: string, canvas: HTMLCanvasElement, type:
   } else {
     throw new Error('Color scale not defined.');
   }
-  /* eslint-enable no-param-reassign */
 }
 
 const vertexShaderSource = `

diff --git a/vite-example/index.html b/vite-example/index.html
@@ -8,7 +8,26 @@
     <script type="module" src="/src/index.ts"></script>
   </head>
 
+  <style>
+    #legendContainer {
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      padding: 10px;
+      background-color: white;
+      z-index: 1;
+    }
+    #legend {
+      width: 256px;
+      height: 20px;
+    }
+  </style>
+
   <body>
-    <div id="cesiumContainer"></div>
+    <div id="cesiumContainer">
+      <div id="legendContainer">
+        <img id="legend" />
+      </div>
+    </div>
   </body>
 </html>
diff --git a/vite-example/public/cogtif.tif b/vite-example/public/cogtif.tif
diff --git a/vite-example/src/index.ts b/vite-example/src/index.ts
@@ -20,7 +20,7 @@ const viewer = new Viewer('cesiumContainer', {
   orderIndependentTranslucency: false,
 });
 
-const provider: any = await TIFFImageryProvider.fromUrl('https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/56/J/NP/2023/4/S2A_56JNP_20230410_0_L2A/TCI.tif', {
+const provider = await TIFFImageryProvider.fromUrl('/cogtif.tif', {
   enablePickFeatures: true,
   projFunc: (code) => {
     if (![4326, 3857, 900913].includes(code)) {
@@ -38,9 +38,18 @@ const provider: any = await TIFFImageryProvider.fromUrl('https://sentinel-cogs.s
     }
     return undefined
   },
+  renderOptions: {
+    "single": {
+      colorScale: "rainbow",
+    }
+  }
 });
 console.log(provider);
-const imageryLayer = viewer.imageryLayers.addImageryProvider(provider);
+const imageryLayer = viewer.imageryLayers.addImageryProvider(provider as any);
+const legend = document.getElementById("legend") as HTMLImageElement;
+const img = provider.plot.colorScaleCanvas.toDataURL();
+legend.src = img;
+
 viewer.flyTo(imageryLayer, {
   duration: 1,
 });