wip: polygon

antvis · May 23, 2024 · 59e0707 · 59e0707
1 parent 29da999
commit 59e0707
Show file tree

Hide file tree

Showing 16 changed files with 217 additions and 264 deletions.
diff --git a/examples/demos/polygon/extrude-city.ts b/examples/demos/polygon/extrude-city.ts
diff --git a/examples/demos/polygon/extrude.ts b/examples/demos/polygon/extrude.ts
diff --git a/examples/demos/polygon/extrusion.ts b/examples/demos/polygon/extrusion.ts
diff --git a/examples/demos/polygon/fill.ts b/examples/demos/polygon/fill.ts
diff --git a/examples/demos/polygon/index.ts b/examples/demos/polygon/index.ts
diff --git a/examples/demos/polygon/texture.ts b/examples/demos/polygon/texture.ts
diff --git a/examples/demos_next/index.ts b/examples/demos_next/index.ts
@@ -7,13 +7,15 @@ import * as HeatmapTestCases from './heatmap';
 import * as LineTestCases from './line';
 import * as MaskTestCases from './mask';
 import * as PointTestCases from './point';
+import * as PolygonTestCases from './polygon';
 
 export { BasemapTestCases, CanvasTestCases, PointTestCases };
 
 export const TestCases = new Map<string, [string, TestCase][]>([
   ['point', Object.entries(PointTestCases)],
   ['heatmap', Object.entries(HeatmapTestCases)],
   ['line', Object.entries(LineTestCases)],
+  ['polygon', Object.entries(PolygonTestCases)],
   ['mask', Object.entries(MaskTestCases)],
   ['basemap', Object.entries(BasemapTestCases)],
   ['canvas', Object.entries(CanvasTestCases)],

diff --git a/examples/demos_next/polygon/extrude-city.ts b/examples/demos_next/polygon/extrude-city.ts
@@ -0,0 +1,28 @@
+import { PolygonLayer } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const extrudeCity: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      style: 'dark',
+      center: [121.434765, 31.256735],
+      zoom: 14.83,
+      pitch: 45,
+    },
+  });
+
+  const data = await fetch(
+    'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json',
+  ).then((res) => res.json());
+
+  const layer = new PolygonLayer({ autoFit: true })
+    .source(data)
+    .shape('extrude')
+    .size('h20', [100, 120, 160, 200, 260, 500])
+    .color('h20', ['#816CAD', '#A67FB5', '#C997C7', '#DEB8D4', '#F5D4E6', '#FAE4F1', '#FFF3FC']);
+  scene.addLayer(layer);
+
+  return scene;
+};
diff --git a/examples/demos_next/polygon/extrude.ts b/examples/demos_next/polygon/extrude.ts
@@ -0,0 +1,33 @@
+import { PolygonLayer } from '@antv/l7';
+import data from '../../data/nanjing-city.json';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const extrude: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      center: [121.434765, 31.256735],
+      zoom: 14.83,
+      pitch: 45,
+    },
+  });
+
+  const filllayer = new PolygonLayer({
+    name: 'fill',
+    zIndex: 3,
+    autoFit: true,
+  })
+    .source(data)
+    .shape('extrude')
+    .active(true)
+    .size('unit_price', (unit_price) => unit_price)
+    .color('count', ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f'])
+    .style({
+      pickLight: true,
+      opacity: 1,
+    });
+  scene.addLayer(filllayer);
+
+  return scene;
+};
diff --git a/examples/demos_next/polygon/extrusion.ts b/examples/demos_next/polygon/extrusion.ts
@@ -0,0 +1,32 @@
+import { PolygonLayer } from '@antv/l7';
+import data from '../../data/indoor-3d-map.json';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const extrusion: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      center: [120, 29.732983],
+      zoom: 6.2,
+      pitch: 30,
+    },
+  });
+
+  const provincelayerSide = new PolygonLayer({
+    autoFit: true,
+  })
+    .source(data)
+    .size('height')
+    .shape('extrusion')
+    .color('color')
+    .style({
+      extrusionBase: {
+        field: 'base_height',
+      },
+      opacity: 1.0,
+    });
+  scene.addLayer(provincelayerSide);
+
+  return scene;
+};
diff --git a/examples/demos/polygon/fill-linear.ts → examples/demos_next/polygon/fill-linear.ts b/examples/demos/polygon/fill-linear.ts → examples/demos_next/polygon/fill-linear.ts
@@ -1,16 +1,14 @@
-import { PolygonLayer, Scene } from '@antv/l7';
-import * as allMap from '@antv/l7-maps';
-import type { RenderDemoOptions } from '../../types';
+import { PolygonLayer } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
 
-export function MapRender(options: RenderDemoOptions) {
-  const scene = new Scene({
-    id: 'map',
-    renderer: options.renderer,
-    map: new allMap[options.map]({
-      style: 'light',
+export const fillLinear: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
       center: [121.434765, 31.256735],
       zoom: 14.83,
-    }),
+    },
   });
 
   const data = {
@@ -52,10 +50,7 @@ export function MapRender(options: RenderDemoOptions) {
       },
     });
 
-  scene.on('loaded', () => {
-    scene.addLayer(layer);
-    if (window['screenshot']) {
-      window['screenshot']();
-    }
-  });
-}
+  scene.addLayer(layer);
+
+  return scene;
+};