test: 应用调试规范

__tests__/integration/utils/generator.ts

@@ -33,7 +33,7 @@ export function generateCanvasTestCases(
 
       it(key, async () => {
         // Go to test page served by vite devServer.
-        const url = `http://localhost:${port}/?type=${namespace}&name=${name}`;
+        const url = `http://localhost:${port}/?namespace=${namespace}&name=${name}`;
         await page.goto(url);
         await sleep(sleepTime);
 

examples/constants.ts

@@ -1,6 +1,14 @@
-import type { RenderDemoMap, RenderDemoOptions } from './types';
+import type { GUIOptions, TestCaseBasemap } from './types';
 
-export const MAP_TYPES: RenderDemoMap[] = [
+export const DEFAULT_GUI_OPTIONS: GUIOptions = {
+  map: 'Map',
+  renderer: 'device',
+  animate: false,
+};
+
+export const SEARCH_PARAMS_KEYS = ['namespace', 'name'].concat(Object.keys(DEFAULT_GUI_OPTIONS));
+
+export const MAP_TYPES: TestCaseBasemap[] = [
   'Map',
   'GaodeMap',
   'Mapbox',
@@ -10,9 +18,3 @@ export const MAP_TYPES: RenderDemoMap[] = [
   'TMap',
   'GoogleMap',
 ] as const;
-
-export const DEFAULT_RENDER_OPTIONS: RenderDemoOptions = {
-  map: 'Map',
-  renderer: 'device',
-  animate: false,
-};

examples/demos_next/basemap/amap-data.ts

@@ -0,0 +1,45 @@
+import { LineLayer, Source } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const amapData: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      center: [121.434765, 31.256735],
+      zoom: 14.83,
+      maxZoom: 25,
+    },
+  });
+
+  const geoData = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'LineString',
+          coordinates: [
+            [120.104021, 30.262493],
+            [120.103875, 30.262601],
+            [120.103963, 30.262694],
+          ],
+        },
+      },
+    ],
+  };
+
+  const source = new Source(geoData);
+  const layer = new LineLayer({ blend: 'normal', autoFit: true })
+    .source(source)
+    .size(2)
+    .shape('line')
+    .color('#f00')
+    .style({
+      opacity: 1,
+    });
+  scene.addLayer(layer);
+
+  return scene;
+};

examples/demos_next/basemap/index.ts

@@ -0,0 +1,2 @@
+export { amapData } from './amap-data';
+export { wgs84Data } from './wgs84-data';

examples/demos_next/basemap/wgs84-data.ts

@@ -0,0 +1,70 @@
+import { LineLayer, Source } from '@antv/l7';
+import type { Map } from 'maplibre-gl';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const wgs84Data: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      center: [121.434765, 31.256735],
+      zoom: 14.83,
+      maxZoom: 23.9,
+    },
+  });
+
+  const geoData = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'LineString',
+          coordinates: [
+            [120.10121458655186, 30.269329295915544],
+            [120.10122467185921, 30.2693341645727],
+            [120.10123176240315, 30.269323019911795],
+          ],
+        },
+      },
+    ],
+  };
+
+  const source = new Source(geoData);
+  const layer = new LineLayer({ blend: 'normal', autoFit: true })
+    .source(source)
+    .size(2)
+    .shape('line')
+    .color('#f00')
+    .style({
+      opacity: 1,
+    });
+
+  scene.addLayer(layer);
+
+  if (scene.getType() === 'mapbox') {
+    const baseMap = scene.map as Map;
+    baseMap.on('load', () => {
+      baseMap.addSource('route', {
+        type: 'geojson',
+        data: geoData,
+      });
+      baseMap.addLayer({
+        id: 'route',
+        type: 'line',
+        source: 'route',
+        layout: {
+          'line-join': 'round',
+          'line-cap': 'round',
+        },
+        paint: {
+          'line-color': '#0083FE',
+          'line-width': 2,
+        },
+      });
+    });
+  }
+
+  return scene;
+};

examples/demos_next/index.ts

@@ -0,0 +1,10 @@
+import type { TestCase } from '../types';
+import * as BasemapTestCases from './basemap';
+import * as PointTestCases from './point';
+
+export { PointTestCases };
+
+export const TestCases = new Map<string, [string, TestCase][]>([
+  ['point', Object.entries(PointTestCases)],
+  ['basemap', Object.entries(BasemapTestCases)],
+]);

examples/demos_next/point/billboard.ts

@@ -0,0 +1,76 @@
+import { PointLayer } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const billboard: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      center: [120.188193, 30.292542],
+      pitch: 0,
+      zoom: 16,
+    },
+  });
+
+  const layer = new PointLayer()
+    .source({
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'Point',
+            coordinates: [120.188193, 30.292542],
+          },
+        },
+        {
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'Point',
+            coordinates: [120.201665, 30.26873],
+          },
+        },
+        {
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'Point',
+            coordinates: [120.225209, 30.290802],
+          },
+        },
+        {
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'Point',
+            coordinates: [120.189641, 30.293248],
+          },
+        },
+        {
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'Point',
+            coordinates: [120.189389, 30.292542],
+          },
+        },
+        {
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'Point',
+            coordinates: [120.190837, 30.293303],
+          },
+        },
+      ],
+    })
+    .size(10)
+    .color('#f00')
+    .shape('simple');
+
+  scene.addLayer(layer);
+
+  return scene;
+};

examples/demos_next/point/column.ts

@@ -0,0 +1,38 @@
+import { PointLayer } from '@antv/l7';
+import data from '../../data/shanghaixi-village.json';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const column: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      style: 'light',
+      center: [121.400257, 31.25287],
+      zoom: 14.55,
+      pitch: 45,
+    },
+  });
+
+  const pointLayer = new PointLayer({})
+    .source(data, {
+      parser: {
+        type: 'json',
+        x: 'longitude',
+        y: 'latitude',
+      },
+    })
+    .shape('name', ['cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'])
+    .active(true)
+    .size('unit_price', (h) => {
+      return [6, 6, 100];
+    })
+    .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
+    .style({
+      opacity: 1,
+    });
+
+  scene.addLayer(pointLayer);
+
+  return scene;
+};

examples/demos_next/point/dot.ts

@@ -0,0 +1,48 @@
+import { PointLayer } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
+
+export const dot: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
+      center: [116.417463, 40.015175],
+      zoom: 8,
+      minZoom: 5,
+    },
+  });
+
+  const data = await fetch(
+    'https://gw.alipayobjects.com/os/antfincdn/8Ps2h%24qgmk/traffic_110000.csv',
+  ).then((res) => res.text());
+
+  const colors = ['#c57f34', '#cbfddf', '#edea70', '#8cc9f1', '#2c7bb6'];
+  const pointLayer = new PointLayer({})
+    .source(data, {
+      parser: {
+        type: 'csv',
+        y: 'lat',
+        x: 'lng',
+      },
+    })
+    .shape('dot')
+    .size(0.5)
+    .color('type', (type) => {
+      switch (parseInt(type)) {
+        case 3:
+          return colors[0];
+        case 4:
+          return colors[1];
+        case 41:
+          return colors[2];
+        case 5:
+          return colors[3];
+        default:
+          return colors[4];
+      }
+    });
+
+  scene.addLayer(pointLayer);
+
+  return scene;
+};