refactor: split tripartite map

.changeset/hot-bikes-swim.md

@@ -0,0 +1,5 @@
+---
+'@antv/l7-maps': major
+---
+
+refactor: split tripartite map

.changeset/pre.json

@@ -0,0 +1,21 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "@antv/l7-extension-maps": "2.22.0",
+    "@antv/l7-component": "2.22.0",
+    "@antv/l7-core": "2.22.0",
+    "@antv/l7": "2.22.0",
+    "@antv/l7-layers": "2.22.0",
+    "@antv/l7-map": "2.22.0",
+    "@antv/l7-maps": "2.22.0",
+    "@antv/l7-renderer": "2.22.0",
+    "@antv/l7-scene": "2.22.0",
+    "@antv/l7-source": "2.22.0",
+    "@antv/l7-test-utils": "2.22.0",
+    "@antv/l7-three": "2.22.0",
+    "@antv/l7-utils": "2.22.0",
+    "@antv/l7-site": "2.21.4"
+  },
+  "changesets": []
+}

.prettierignore

@@ -18,6 +18,9 @@ LICENSE
 packages/*/es/**
 packages/*/lib/**
 packages/*/dist/**
+extensions/*/es/**
+extensions/*/lib/**
+extensions/*/dist/**
 
 # legacy
 legacy/

eslint.config.js

@@ -33,6 +33,9 @@ export default tseslint.config(
       'packages/*/es/*',
       'packages/*/lib/*',
       'packages/*/dist/*',
+      'extensions/*/es/*',
+      'extensions/*/lib/*',
+      'extensions/*/dist/*',
 
       // Website static files
       'site/public/*',

examples/constants.ts

@@ -2,7 +2,6 @@ import type { GUIOptions, TestCaseBasemap } from './types';
 
 export const DEFAULT_GUI_OPTIONS: GUIOptions = {
   map: 'Map',
-  renderer: 'device',
   animate: false,
   enableWebGPU: false,
 };
@@ -18,6 +17,6 @@ export const MAP_TYPES: TestCaseBasemap[] = [
   'MapLibre',
   'BaiduMap',
   'TencentMap',
-  'TMap',
+  'TdtMap',
   'GoogleMap',
 ] as const;

examples/main.tsx

@@ -37,9 +37,6 @@ export const Main = () => {
     guiRef.current
       .add(inintGuiOptions, 'map', MAP_TYPES)
       .onChange((map: GUIOptions['map']) => onChange({ map }));
-    guiRef.current
-      .add(inintGuiOptions, 'renderer', ['regl', 'device'])
-      .onChange((renderer: GUIOptions['renderer']) => onChange({ renderer }));
     guiRef.current
       .add(inintGuiOptions, 'enableWebGPU')
       .onChange((enableWebGPU: GUIOptions['enableWebGPU']) => onChange({ enableWebGPU }));

examples/types.ts

@@ -1,10 +1,8 @@
 import type { Scene } from '@antv/l7';
-import type { ISceneConfig } from '@antv/l7-core';
 import type { Controller, GUI } from 'lil-gui';
 
 export type GUIOptions = {
   map: TestCaseBasemap;
-  renderer: ISceneConfig['renderer'];
   animate: boolean;
   enableWebGPU: boolean;
   [keys: string]: any;
@@ -17,7 +15,7 @@ export type TestCaseBasemap =
   | 'MapLibre'
   | 'TencentMap'
   | 'Mapbox'
-  | 'TMap'
+  | 'TdtMap'
   | 'GoogleMap';
 
 export type TestCaseOptions = GUIOptions & {

examples/utils/scene.ts

@@ -1,8 +1,28 @@
 import { Scene } from '@antv/l7';
 import type { IMapConfig } from '@antv/l7-core';
-import * as Maps from '@antv/l7-maps';
+import {
+  BaiduMap,
+  GaodeMap,
+  GoogleMap,
+  MapLibre,
+  Mapbox,
+  TdtMap,
+  TencentMap,
+} from '@antv/l7-extension-maps';
+import { Map } from '@antv/l7-maps';
 import type { TestCaseOptions } from '../types';
 
+const Maps = {
+  Map,
+  BaiduMap,
+  GaodeMap,
+  GoogleMap,
+  MapLibre,
+  Mapbox,
+  TdtMap,
+  TencentMap,
+};
+
 type CaseSceneOptions = TestCaseOptions & {
   mapConfig?: Partial<IMapConfig>;
 };

extensions/extension-maps/.fatherrc.ts

@@ -0,0 +1,48 @@
+import type { IFatherConfig } from 'father';
+import { defineConfig } from 'father';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const umdConfig: IFatherConfig['umd'] = {
+  name: 'L7ExtensionMaps',
+  output: {
+    path: './dist',
+    filename: 'l7-extension-maps.min.js',
+  },
+  platform: 'browser',
+  targets: { ie: 11 },
+  externals: {
+    'mapbox-gl': {
+      root: 'mapboxgl',
+      commonjs: 'mapbox-gl',
+      commonjs2: 'mapbox-gl',
+      amd: 'mapbox-gl',
+    },
+    'maplibre-gl': {
+      root: 'maplibregl',
+      commonjs: 'maplibre-gl',
+      commonjs2: 'maplibre-gl',
+      amd: 'maplibre-gl',
+    },
+  },
+  chainWebpack(memo) {
+    // 关闭压缩方便调试，默认开启
+    // memo.optimization.minimize(false);
+
+    // 打包体积分析
+    memo
+      .plugin('webpack-bundle-analyzer')
+      .use(BundleAnalyzerPlugin, [{ analyzerMode: 'static', openAnalyzer: false }]);
+
+    return memo;
+  },
+};
+
+export default defineConfig({
+  extends: '../../.fatherrc.base.ts',
+  // 使用 babel 编译 esm/cjs 产物，启用 transform-import-css-l7 插件完成 CSS 内联打包
+  esm: { transformer: 'babel' },
+  cjs: isProduction ? { transformer: 'babel' } : undefined,
+  umd: isProduction ? umdConfig : undefined,
+});

extensions/extension-maps/.gitignore

@@ -0,0 +1,3 @@
+/lib
+/es
+/dist

extensions/extension-maps/CHANGELOG.md

@@ -0,0 +1 @@
+# Change Log

extensions/extension-maps/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@antv/l7-extension-maps",
+  "version": "2.22.0",
+  "description": "Extension Maps for L7",
+  "license": "MIT",
+  "author": "https://github.com/orgs/antvis/people",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "lib/index.js",
+  "unpkg": "dist/l7-extension-maps.min.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "files": [
+    "dist",
+    "lib",
+    "es",
+    "!dist/report.html"
+  ],
+  "scripts": {
+    "dev": "father dev",
+    "build": "npm run clean && father build",
+    "check-deps": "father doctor",
+    "lint": "eslint src",
+    "clean": "rimraf dist es lib"
+  },
+  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@antv/l7-core": "workspace:*",
+    "@antv/l7-utils": "workspace:*",
+    "@babel/runtime": "^7.7.7",
+    "gl-matrix": "^3.1.0",
+    "mapbox-gl": "^1.2.1",
+    "maplibre-gl": "^3.5.2",
+    "viewport-mercator-project": "^6.2.1"
+  },
+  "devDependencies": {
+    "@map-component/tmap-types": "^0.1.3",
+    "@types/amap-js-api": "^1.4.6",
+    "@types/bmapgl": "^0.0.7",
+    "@types/gl-matrix": "^2.4.5",
+    "@types/google.maps": "^3.54.10",
+    "@types/mapbox-gl": "^1.11.2",
+    "@types/viewport-mercator-project": "^6.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": "[email protected]:antvis/L7.git"
+}

packages/maps/src/amap-next/index.ts → extensions/extension-maps/src/amap/index.ts

@@ -1,4 +1,4 @@
-import BaseMapWrapper from '../utils/BaseMapWrapper';
+import { BaseMapWrapper } from '@antv/l7-core';
 import MapService from './map';
 
 export default class AMap2Wrapper extends BaseMapWrapper<AMap.Map> {

packages/maps/src/amap-next/map.ts → extensions/extension-maps/src/amap/map.ts

@@ -9,33 +9,26 @@ import type {
   MapStyleConfig,
   MapStyleName,
 } from '@antv/l7-core';
-import { MapServiceEvent } from '@antv/l7-core';
-import { DOM, amap2Project, lodashUtil } from '@antv/l7-utils';
+import { BaseMapService, MapServiceEvent, WebMercatorViewport } from '@antv/l7-core';
+import { DOM, amap2Project } from '@antv/l7-utils';
 import { mat4, vec3 } from 'gl-matrix';
-import BaseMap from '../lib/base-map';
-import Viewport from '../lib/web-mercator-viewport';
-import { MapType } from '../types';
-import { toPaddingOptions } from '../utils/utils';
+import { toPaddingOptions } from '../utils';
 import './logo.css';
 import { MapTheme } from './theme';
 
 const AMAP_VERSION = '2.0';
 const AMAP_API_KEY = 'f59bcf249433f8b05caaee19f349b3d7';
 const ZOOM_OFFSET = 1;
 
-const AMapEventMapV2: Record<string, string> = {
+const AMapEvent: Record<string, string> = {
   contextmenu: 'rightclick',
   camerachange: 'viewchange',
 };
 
-export default class BMapService extends BaseMap<AMap.Map> {
-  protected viewport = new Viewport();
+export default class AMapService extends BaseMapService<AMap.Map> {
+  protected viewport = new WebMercatorViewport();
 
-  public version = MapType.GAODE;
-
-  public getType() {
-    return 'amap';
-  }
+  public type = 'AMap';
 
   public async init() {
     const {
@@ -144,7 +137,7 @@ export default class BMapService extends BaseMap<AMap.Map> {
        height: 100%;
        width: 100%;
      `;
-    amapdiv.id = lodashUtil.uniqueId('l7_amap_div');
+    amapdiv.id = 'l7_amap_div';
     wrapper.appendChild(amapdiv);
     return amapdiv;
   }
@@ -153,6 +146,10 @@ export default class BMapService extends BaseMap<AMap.Map> {
     return this.map.getContainer();
   }
 
+  public getMapCanvasContainer(): HTMLElement {
+    return this.map.getContainer()?.getElementsByClassName('amap-maps')[0] as HTMLElement;
+  }
+
   public addMarkerContainer(): void {
     if (!this.map) return;
 
@@ -165,28 +162,24 @@ export default class BMapService extends BaseMap<AMap.Map> {
     }
   }
 
-  public getMarkerContainer(): HTMLElement {
-    return this.markerContainer;
-  }
-
   public getCanvasOverlays() {
     return this.mapContainer?.querySelector('.amap-overlays') as HTMLElement;
   }
 
-  // MapEvent // 定义事件类型
+  // MapEvent，定义事件类型
   public on(type: string, handler: (...args: any[]) => void): void {
     if (MapServiceEvent.indexOf(type) !== -1) {
       this.eventEmitter.on(type, handler);
     } else {
-      this.map.on(AMapEventMapV2[type] || type, handler);
+      this.map.on(AMapEvent[type] || type, handler);
     }
   }
 
   public off(type: string, handler: (...args: any[]) => void): void {
     if (MapServiceEvent.indexOf(type) !== -1) {
       this.eventEmitter.off(type, handler);
     } else {
-      this.map.off(AMapEventMapV2[type] || type, handler);
+      this.map.off(AMapEvent[type] || type, handler);
     }
   }
 
@@ -252,14 +245,6 @@ export default class BMapService extends BaseMap<AMap.Map> {
     ];
   }
 
-  public getMapContainer() {
-    return this.mapContainer;
-  }
-
-  public getMapCanvasContainer(): HTMLElement {
-    return this.map.getContainer()?.getElementsByClassName('amap-maps')[0] as HTMLElement;
-  }
-
   public getMapStyleConfig(): MapStyleConfig {
     return MapTheme;
   }

packages/maps/src/bmap/index.ts → extensions/extension-maps/src/bmap/index.ts

@@ -1,5 +1,6 @@
-import BaseMapWrapper from '../utils/BaseMapWrapper';
+import { BaseMapWrapper } from '@antv/l7-core';
 import MapService from './map';
+
 export default class MapboxWrapper extends BaseMapWrapper<BMapGL.Map> {
   protected getServiceConstructor() {
     return MapService;