diff --git a/.changeset/README.md b/.changeset/README.md deleted file mode 100644 index e5b6d8d6a67..00000000000 --- a/.changeset/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# Changesets - -Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works -with multi-package repos, or single-package repos to help you version and publish your code. You can -find the full documentation for it [in our repository](https://github.com/changesets/changesets) - -We have a quick list of common questions to get you started engaging with this project in -[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) diff --git a/.changeset/hot-bikes-swim.md b/.changeset/hot-bikes-swim.md new file mode 100644 index 00000000000..dfdde644380 --- /dev/null +++ b/.changeset/hot-bikes-swim.md @@ -0,0 +1,5 @@ +--- +'@antv/l7-maps': major +--- + +refactor: split tripartite map diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000000..a0f5ebba32f --- /dev/null +++ b/.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": [] +} diff --git a/.prettierignore b/.prettierignore index 54404306532..13354e73cc5 100644 --- a/.prettierignore +++ b/.prettierignore @@ -18,6 +18,9 @@ LICENSE packages/*/es/** packages/*/lib/** packages/*/dist/** +extensions/*/es/** +extensions/*/lib/** +extensions/*/dist/** # legacy legacy/ diff --git a/eslint.config.js b/eslint.config.js index 8bf5dca352d..044088bbc21 100644 --- a/eslint.config.js +++ b/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/*', diff --git a/examples/constants.ts b/examples/constants.ts index f7011588789..cda0cf6048b 100644 --- a/examples/constants.ts +++ b/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; diff --git a/examples/main.tsx b/examples/main.tsx index ce779b3fcdb..41b5ba627af 100644 --- a/examples/main.tsx +++ b/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 })); diff --git a/examples/types.ts b/examples/types.ts index bf5cd325dba..e9fdd093852 100644 --- a/examples/types.ts +++ b/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 & { diff --git a/examples/utils/scene.ts b/examples/utils/scene.ts index 96fe9f6d43b..1204db69ea6 100644 --- a/examples/utils/scene.ts +++ b/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; }; diff --git a/extensions/extension-maps/.fatherrc.ts b/extensions/extension-maps/.fatherrc.ts new file mode 100644 index 00000000000..09468ea8c6d --- /dev/null +++ b/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, +}); diff --git a/extensions/extension-maps/.gitignore b/extensions/extension-maps/.gitignore new file mode 100644 index 00000000000..23280030f45 --- /dev/null +++ b/extensions/extension-maps/.gitignore @@ -0,0 +1,3 @@ +/lib +/es +/dist diff --git a/extensions/extension-maps/CHANGELOG.md b/extensions/extension-maps/CHANGELOG.md new file mode 100644 index 00000000000..420e6f23d0e --- /dev/null +++ b/extensions/extension-maps/CHANGELOG.md @@ -0,0 +1 @@ +# Change Log diff --git a/extensions/extension-maps/package.json b/extensions/extension-maps/package.json new file mode 100644 index 00000000000..f7aabacca10 --- /dev/null +++ b/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": "git@github.com:antvis/L7.git" +} diff --git a/packages/maps/src/amap-next/index.ts b/extensions/extension-maps/src/amap/index.ts similarity index 75% rename from packages/maps/src/amap-next/index.ts rename to extensions/extension-maps/src/amap/index.ts index ba35d784fbc..2ebe1945e71 100644 --- a/packages/maps/src/amap-next/index.ts +++ b/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 { diff --git a/packages/maps/src/amap-next/logo.css b/extensions/extension-maps/src/amap/logo.css similarity index 100% rename from packages/maps/src/amap-next/logo.css rename to extensions/extension-maps/src/amap/logo.css diff --git a/packages/maps/src/amap-next/map.ts b/extensions/extension-maps/src/amap/map.ts similarity index 93% rename from packages/maps/src/amap-next/map.ts rename to extensions/extension-maps/src/amap/map.ts index 826de03a164..db3a13f38cd 100644 --- a/packages/maps/src/amap-next/map.ts +++ b/extensions/extension-maps/src/amap/map.ts @@ -9,13 +9,10 @@ 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'; @@ -23,19 +20,15 @@ const AMAP_VERSION = '2.0'; const AMAP_API_KEY = 'f59bcf249433f8b05caaee19f349b3d7'; const ZOOM_OFFSET = 1; -const AMapEventMapV2: Record = { +const AMapEvent: Record = { contextmenu: 'rightclick', camerachange: 'viewchange', }; -export default class BMapService extends BaseMap { - protected viewport = new Viewport(); +export default class AMapService extends BaseMapService { + 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 { 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 { 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,20 +162,16 @@ export default class BMapService extends BaseMap { } } - 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); } } @@ -186,7 +179,7 @@ export default class BMapService extends BaseMap { 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 { ]; } - public getMapContainer() { - return this.mapContainer; - } - - public getMapCanvasContainer(): HTMLElement { - return this.map.getContainer()?.getElementsByClassName('amap-maps')[0] as HTMLElement; - } - public getMapStyleConfig(): MapStyleConfig { return MapTheme; } diff --git a/packages/maps/src/amap-next/theme.ts b/extensions/extension-maps/src/amap/theme.ts similarity index 100% rename from packages/maps/src/amap-next/theme.ts rename to extensions/extension-maps/src/amap/theme.ts diff --git a/packages/maps/src/bmap/bmapglloader.ts b/extensions/extension-maps/src/bmap/bmapglloader.ts similarity index 100% rename from packages/maps/src/bmap/bmapglloader.ts rename to extensions/extension-maps/src/bmap/bmapglloader.ts diff --git a/packages/maps/src/bmap/index.ts b/extensions/extension-maps/src/bmap/index.ts similarity index 76% rename from packages/maps/src/bmap/index.ts rename to extensions/extension-maps/src/bmap/index.ts index 744d924b71b..fa11e2f61dc 100644 --- a/packages/maps/src/bmap/index.ts +++ b/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 { protected getServiceConstructor() { return MapService; diff --git a/packages/maps/src/bmap/logo.css b/extensions/extension-maps/src/bmap/logo.css similarity index 100% rename from packages/maps/src/bmap/logo.css rename to extensions/extension-maps/src/bmap/logo.css diff --git a/packages/maps/src/bmap/map.ts b/extensions/extension-maps/src/bmap/map.ts similarity index 89% rename from packages/maps/src/bmap/map.ts rename to extensions/extension-maps/src/bmap/map.ts index 47d028378db..14bf7444046 100644 --- a/packages/maps/src/bmap/map.ts +++ b/extensions/extension-maps/src/bmap/map.ts @@ -6,82 +6,36 @@ import type { IMercator, IPoint, IStatusOptions, - IViewport, MapStyleConfig, Point, } from '@antv/l7-core'; -import { MapServiceEvent } from '@antv/l7-core'; +import { BaseMapService, MapServiceEvent, WebMercatorViewport } from '@antv/l7-core'; import { DOM } from '@antv/l7-utils'; import { mat4, vec3 } from 'gl-matrix'; -import Viewport from '../lib/web-mercator-viewport'; -import BaseMapService from '../utils/BaseMapService'; -import { toPaddingOptions } from '../utils/utils'; +import { toPaddingOptions } from '../utils'; import BMapGLLoader from './bmapglloader'; import './logo.css'; -const EventMap: { - [key: string]: any; -} = { +const MapEvent: Record = { mapmove: 'moving', contextmenu: 'rightclick', camerachange: 'update', zoomchange: 'zoomend', }; -const BMAP_API_KEY: string = 'zLhopYPPERGtpGOgimcdKcCimGRyyIsh'; -const BMAP_VERSION: string = '1.0'; +const BMAP_API_KEY = 'zLhopYPPERGtpGOgimcdKcCimGRyyIsh'; +const BMAP_VERSION = '1.0'; +const ZOOM_OFFSET = 1.75; // TODO: 基于抽象类 BaseMap 实现，补全缺失方法，解决类型问题 export default class BMapService extends BaseMapService { - protected viewport: IViewport; - protected styleConfig: Record = { - normal: [], - }; - protected currentStyle: any = 'normal'; - // 事件回调代理 - protected evtCbProxyMap: Map any, (...args: any) => any>> = - new Map(); - - public getMap() { - return this.map as any as BMapGL.Map & { - destroy: () => void; - getTilt: () => number; - enableRotate: () => void; - enableRotateGestures: () => void; - disableRotate: () => void; - disableRotateGestures: () => void; - lnglatToMercator: (lng: number, lat: number) => [number, number]; - _webglPainter: { - _canvas: HTMLCanvasElement; - }; - getHeading: () => number; - setDisplayOptions: (options: { indoor?: boolean }) => void; - }; - } + public type: string = 'BMap'; - public handleCameraChanged = () => { - this.emit('mapchange'); - const map = this.getMap(); - const { lng, lat } = map.getCenter(); - const option = { - center: [lng, lat], - viewportHeight: map.getContainer().clientHeight, - viewportWidth: map.getContainer().clientWidth, - bearing: 360 - map.getHeading(), - pitch: map.getTilt(), - zoom: map.getZoom() - 1.75, - }; - this.viewport.syncWithMapCamera(option as any); - this.updateCoordinateSystemService(); - this.cameraChangedCallback(this.viewport); - }; + public version: string; - public setBgColor(color: string): void { - this.bgColor = color; - } + public viewport = new WebMercatorViewport(); public async init() { - this.viewport = new Viewport(); const { id, center = [121.30654632240122, 31.25744185633306], @@ -89,14 +43,11 @@ export default class BMapService extends BaseMapService { token = BMAP_API_KEY, mapInstance, version = BMAP_VERSION, - mapSize = 10000, minZoom = 0, maxZoom = 21, ...rest } = this.config; - this.viewport = new Viewport(); this.version = version; - this.simpleMapCoord.setSize(mapSize); if (!(window.BMapGL || mapInstance)) { await BMapGLLoader.load({ @@ -106,9 +57,8 @@ export default class BMapService extends BaseMapService { } if (mapInstance) { - // @ts-ignore this.map = mapInstance; - this.$mapContainer = this.map.getContainer(); + this.mapContainer = this.map.getContainer(); const point = new BMapGL.Point(center[0], center[1]); // false，表示用户未执行centerAndZoom进行地图初始渲染 // @ts-ignore @@ -116,6 +66,7 @@ export default class BMapService extends BaseMapService { this.map.centerAndZoom(point, zoom); } this.initMapByConfig(this.config); + // @ts-ignore this.map.on('update', this.handleCameraChanged); } else { const mapConstructorOptions = { @@ -136,17 +87,17 @@ export default class BMapService extends BaseMapService { throw Error('No container id specified'); } - const mapContainer = DOM.getContainer(id); + const mapContainer = this.creatMapContainer(id); // 存储控件等容器，百度地图实例会被卸载掉，所以实例化后需要重新挂载 // @ts-ignore let mapChildNodes = [...mapContainer.childNodes]; // @ts-ignore const map = new BMapGL.Map(mapContainer, mapConstructorOptions); - this.$mapContainer = map.getContainer(); + this.mapContainer = map.getContainer(); mapChildNodes.forEach((child) => { - this.$mapContainer!.appendChild(child); + this.mapContainer!.appendChild(child); }); // @ts-ignore mapChildNodes = null; @@ -162,12 +113,76 @@ export default class BMapService extends BaseMapService { } } - public destroy(): void { - this.getMap().destroy(); + public handleCameraChanged = () => { + const map = this.getMap(); + const { lng, lat } = map.getCenter(); + const center: [number, number] = [lng, lat]; + const option = { + center, + viewportHeight: map.getContainer().clientHeight, + viewportWidth: map.getContainer().clientWidth, + bearing: 360 - map.getHeading(), + pitch: map.getTilt(), + zoom: map.getZoom() - ZOOM_OFFSET, + }; + this.updateView(option); + }; + + protected styleConfig: Record = { + normal: [], + }; + + protected currentStyle: any = 'normal'; + + // 事件回调代理 + protected evtCbProxyMap: Map any, (...args: any) => any>> = + new Map(); + + public getMap() { + return this.map as any as BMapGL.Map & { + destroy: () => void; + getTilt: () => number; + enableRotate: () => void; + enableRotateGestures: () => void; + disableRotate: () => void; + disableRotateGestures: () => void; + lnglatToMercator: (lng: number, lat: number) => [number, number]; + _webglPainter: { + _canvas: HTMLCanvasElement; + }; + getHeading: () => number; + setDisplayOptions: (options: { indoor?: boolean }) => void; + }; + } + + public setBgColor(color: string): void { + this.bgColor = color; + } + + protected creatMapContainer(id: string | HTMLDivElement) { + const wrapper = super.creatMapContainer(id); + const amapdiv = document.createElement('div'); + amapdiv.style.cssText += ` + position: absolute; + top: 0; + height: 100%; + width: 100%; + `; + amapdiv.id = 'l7_baidu_div'; + wrapper.appendChild(amapdiv); + return amapdiv; + } + + public getContainer(): HTMLElement | null { + return this.getMap().getContainer(); + } + + public getMapContainer(): HTMLElement { + return this.getMap().getContainer(); } - public onCameraChanged(callback: (viewport: IViewport) => void): void { - this.cameraChangedCallback = callback; + public getMapCanvasContainer(): HTMLElement { + return this.getMap().getContainer(); } // tslint:disable-next-line:no-empty @@ -207,7 +222,8 @@ export default class BMapService extends BaseMapService { }; cbProxyMap.set(handle, handleProxy); - this.map.on(EventMap[type] || type, handleProxy); + // @ts-ignore + this.map.on(MapEvent[type] || type, handleProxy); } public off(type: string, handle: (...args: any[]) => void): void { @@ -221,34 +237,29 @@ export default class BMapService extends BaseMapService { return; } this.evtCbProxyMap.get(type)?.delete(handle); - this.map.off(EventMap[type] || type, handleProxy); + // @ts-ignore + this.map.off(MapEvent[type] || type, handleProxy); } public once(type: string, handler: (...args: any[]) => void): void { this.eventEmitter.once(type, handler); } - public getContainer(): HTMLElement | null { - return this.getMap().getContainer(); - } - public getSize(): [number, number] { const size = this.getMap().getSize(); return [size.width, size.height]; } + // 百度地图缩放等级 public getMinZoom(): number { + // @ts-ignore return this.map.getMinZoom(); } public getMaxZoom(): number { + // @ts-ignore return this.map.getMaxZoom(); } - // get map params - public getType() { - return 'bmap'; - } - public getZoom(): number { return this.getMap().getZoom(); } @@ -288,14 +299,6 @@ export default class BMapService extends BaseMapService { ]; } - public getMapContainer(): HTMLElement { - return this.getMap().getContainer(); - } - - public getMapCanvasContainer(): HTMLElement { - return this.getMap().getContainer(); - } - public getMapStyleConfig(): MapStyleConfig { return this.styleConfig; } @@ -304,6 +307,10 @@ export default class BMapService extends BaseMapService { return this.styleConfig[name]; } + public getMapStyle(): string { + return this.currentStyle; + } + public setMapStyle(style: any): void { if (this.currentStyle === style) { return; @@ -356,7 +363,7 @@ export default class BMapService extends BaseMapService { } public setZoomAndCenter(zoom: number, [lng, lat]: Point): void { - this.getMap().centerAndZoom(new BMapGL.Point(lng, lat), zoom + 1.75); + this.getMap().centerAndZoom(new BMapGL.Point(lng, lat), zoom + ZOOM_OFFSET); } public setCenter([lng, lat]: [number, number], options?: ICameraOptions): void { @@ -378,6 +385,14 @@ export default class BMapService extends BaseMapService { this.getMap().setZoom(zoom); } + public setMaxZoom(max: number): void { + this.map.setMaxZoom(max); + } + + public setMinZoom(min: number): void { + this.map.setMinZoom(min); + } + public setMapStatus(option: Partial): void { const map = this.getMap(); (Object.keys(option) as Array).map((status) => { @@ -508,10 +523,6 @@ export default class BMapService extends BaseMapService { return modelMatrix as unknown as number[]; } - public getCustomCoordCenter?(): [number, number] { - throw new Error('Method not implemented.'); - } - public exportMap(type: 'jpg' | 'png'): string { const renderCanvas = this.getMap()._webglPainter._canvas; const layersPng = @@ -544,4 +555,10 @@ export default class BMapService extends BaseMapService { this.hideLogo(); } } + + public destroy(): void { + super.destroy(); + this.mapContainer?.parentNode?.removeChild(this.mapContainer); + this.getMap().destroy(); + } } diff --git a/extensions/extension-maps/src/gmap/index.ts b/extensions/extension-maps/src/gmap/index.ts new file mode 100644 index 00000000000..5ebda342e65 --- /dev/null +++ b/extensions/extension-maps/src/gmap/index.ts @@ -0,0 +1,8 @@ +import { BaseMapWrapper } from '@antv/l7-core'; +import GMapService from './map'; + +export default class GMapWrapper extends BaseMapWrapper { + protected getServiceConstructor() { + return GMapService; + } +} diff --git a/extensions/extension-maps/src/gmap/logo.css b/extensions/extension-maps/src/gmap/logo.css new file mode 100644 index 00000000000..7564d637152 --- /dev/null +++ b/extensions/extension-maps/src/gmap/logo.css @@ -0,0 +1,5 @@ +.googlemap-contianer--hide-logo { + img[alt='Google'] { + /* display: none !important; */ + } +} diff --git a/packages/maps/src/gmap/map.ts b/extensions/extension-maps/src/gmap/map.ts similarity index 76% rename from packages/maps/src/gmap/map.ts rename to extensions/extension-maps/src/gmap/map.ts index aa9492e0d1c..0447d14bfc4 100644 --- a/packages/maps/src/gmap/map.ts +++ b/extensions/extension-maps/src/gmap/map.ts @@ -4,23 +4,20 @@ import type { IMercator, IPoint, IStatusOptions, - IViewport, MapStyleConfig, Point, } from '@antv/l7-core'; -import { MapServiceEvent } from '@antv/l7-core'; -import { MercatorCoordinate } from '@antv/l7-map'; +import { BaseMapService, MapServiceEvent, WebMercatorViewport } from '@antv/l7-core'; import { DOM } from '@antv/l7-utils'; import { mat4, vec3 } from 'gl-matrix'; -import Viewport from '../lib/web-mercator-viewport'; -import BaseMapService from '../utils/BaseMapService'; +import { lngLatToMercator } from '../utils'; import './logo.css'; import GMapLoader from './maploader'; -const GMAP_API_KEY: string = 'AIzaSyDBDCfl4pvuDtaazdCog3LmhA7CQLhmcRE'; +const GMAP_API_KEY = 'AIzaSyDBDCfl4pvuDtaazdCog3LmhA7CQLhmcRE'; -const EventMap: { - [key: string]: any; +const MapEvent: { + [key: string]: string[] | string; } = { mapmove: 'center_changed', camerachange: ['drag', 'pan', 'rotate', 'tilt', 'zoom_changed'], @@ -28,41 +25,15 @@ const EventMap: { dragging: 'drag', }; -// TODO: 基于抽象类 BaseMap 实现，补全缺失方法，解决类型问题 -export default class TMapService extends BaseMapService { - // @ts-ignore - protected viewport: IViewport = null; - protected evtCbProxyMap: Map any, (...args: any) => any>> = - new Map(); - - public handleCameraChanged = () => { - this.emit('mapchange'); - const map = this.map; - - const { lng, lat } = map.getCenter(); - - const option = { - center: [lng(), lat()], - - viewportHeight: map.getDiv().clientHeight, - - viewportWidth: map.getDiv().clientWidth, - - bearing: map.getHeading(), +export default class GMapService extends BaseMapService { + public type: string = 'GoogleMap'; - pitch: map.getTilt(), - - zoom: map.getZoom() - 1, - }; + public viewport = new WebMercatorViewport(); - this.viewport.syncWithMapCamera(option as any); - this.updateCoordinateSystemService(); - this.cameraChangedCallback(this.viewport); - }; + protected evtCbProxyMap: Map any, (...args: any) => any>> = + new Map(); public async init(): Promise { - this.viewport = new Viewport(); - const { id, mapInstance, @@ -82,8 +53,8 @@ export default class TMapService extends BaseMapService { if (mapInstance) { // If there's already a map instance, maybe not setting any other configurations - this.map = mapInstance as any; - this.$mapContainer = this.map.getDiv(); + this.map = mapInstance; + this.mapContainer = this.map.getDiv(); if (logoVisible === false) { this.hideLogo(); } @@ -91,7 +62,7 @@ export default class TMapService extends BaseMapService { if (!id) { throw Error('No container id specified'); } - const mapContainer = DOM.getContainer(id)!; + const mapContainer = this.creatMapContainer(id); const map = new google.maps.Map(mapContainer, { maxZoom, @@ -104,7 +75,7 @@ export default class TMapService extends BaseMapService { this.map = map; - this.$mapContainer = map.getDiv(); + this.mapContainer = map.getDiv(); if (logoVisible === false) { this.hideLogo(); } @@ -125,19 +96,54 @@ export default class TMapService extends BaseMapService { this.handleCameraChanged(); } - public destroy(): void { - this.map.setMap(null); + public handleCameraChanged = () => { + const map = this.map; + const { lng, lat } = map.getCenter()!; + const center: [number, number] = [lng(), lat()]; + + const option = { + center, + viewportHeight: map.getDiv().clientHeight, + viewportWidth: map.getDiv().clientWidth, + bearing: map.getHeading(), + pitch: map.getTilt(), + zoom: map.getZoom()! - 1, + }; + + this.updateView(option); + }; + + protected creatMapContainer(id: string | HTMLDivElement) { + const wrapper = super.creatMapContainer(id); + const amapdiv = document.createElement('div'); + amapdiv.style.cssText += ` + position: absolute; + top: 0; + height: 100%; + width: 100%; + `; + amapdiv.id = 'l7_gmap_div'; + wrapper.appendChild(amapdiv); + return amapdiv; + } + + public getContainer(): HTMLElement | null { + return this.map.getDiv(); } - public onCameraChanged(callback: (viewport: IViewport) => void): void { - this.cameraChangedCallback = callback; + public getMapContainer(): HTMLElement { + return this.map.getDiv(); + } + + public getMapCanvasContainer(): HTMLElement { + return this.map.getDiv()?.getElementsByTagName('canvas')[0]; } public addMarkerContainer(): void { - // const container = this.map.getDiv(); - // this.markerContainer = DOM.create('div', 'l7-marker-container', container); - // this.markerContainer.setAttribute('tabindex', '-1'); - // this.markerContainer.style.zIndex = '2'; + const container = this.map.getDiv(); + this.markerContainer = DOM.create('div', 'l7-marker-container', container); + this.markerContainer.setAttribute('tabindex', '-1'); + this.markerContainer.style.zIndex = '2'; } public getMarkerContainer(): HTMLElement { @@ -173,15 +179,17 @@ export default class TMapService extends BaseMapService { }; cbProxyMap.set(handle, handleProxy); + // @ts-expect-error this.map.on(eventName, handleProxy); }; - if (Array.isArray(EventMap[type])) { - EventMap[type].forEach((eventName: string) => { + const event = MapEvent[type]; + if (Array.isArray(event)) { + event.forEach((eventName: string) => { onProxy(eventName || type); }); } else { - onProxy(EventMap[type] || type); + onProxy(event || type); } } } @@ -198,15 +206,17 @@ export default class TMapService extends BaseMapService { return; } this.evtCbProxyMap.get(eventName)?.delete(handle); + // @ts-expect-error this.map.off(eventName, handleProxy); }; - if (Array.isArray(EventMap[type])) { - EventMap[type].forEach((eventName: string) => { + const event = MapEvent[type]; + if (Array.isArray(event)) { + event.forEach((eventName: string) => { offProxy(eventName || type); }); } else { - offProxy(EventMap[type] || type); + offProxy(event || type); } } @@ -214,46 +224,40 @@ export default class TMapService extends BaseMapService { throw new Error('Method not implemented.'); } - // get dom - public getContainer(): HTMLElement | null { - return this.map.getDiv(); - } - public getSize(): [number, number] { + // @ts-expect-error return [this.map.width, this.map.height]; } - // get map status method public getMinZoom(): number { + // @ts-expect-error return this.map.transform._minZoom; } public getMaxZoom(): number { + // @ts-expect-error return this.map.transform._maxZoom; } - // get map params - public getType() { - return 'googlemap'; - } - public getZoom(): number { - return this.map.getZoom(); + return this.map.getZoom() || 0; } + public getCenter(): ILngLat { - const { lng, lat } = this.map.getCenter(); + const { lng, lat } = this.map.getCenter()!; return { lng: lng(), lat: lat(), }; } + public getPitch(): number { - return this.map.getTilt(); + return this.map.getTilt() || 0; } public getRotation(): number { const rotation = this.map.getHeading(); - return rotation; + return rotation || 0; } public getBounds(): Bounds { @@ -262,44 +266,48 @@ export default class TMapService extends BaseMapService { const bounds = this.map.getBounds(); const ne = bounds?.getNorthEast(); const sw = bounds?.getSouthWest(); + + if (!ne || !sw) { + return [ + [-180, -90], + [180, 90], + ]; + } + return [ [sw.lng(), sw.lat()], [ne.lng(), ne.lat()], ]; } - public getMapContainer(): HTMLElement { - return this.map.getDiv(); - } - - public getMapCanvasContainer(): HTMLElement { - return this.map.getDiv()?.getElementsByTagName('canvas')[0]; - } - public getMapStyleConfig(): MapStyleConfig { throw new Error('Method not implemented.'); } + public getMapStyle(): string { + return ''; + } + public setBgColor(color: string): void { this.bgColor = color; } public setMapStyle(styleId: any): void { + // @ts-expect-error this.map.setMapStyleId(styleId); } - // control with raw map public setRotation(rotation: number): void { this.map.setHeading(rotation); } public zoomIn(): void { - const currentZoom = this.map.getZoom(); + const currentZoom = this.map.getZoom()!; this.map.setZoom(currentZoom + 1); } public zoomOut(): void { - const currentZoom = this.map.getZoom(); + const currentZoom = this.map.getZoom()!; this.map.setZoom(currentZoom - 1); } @@ -318,6 +326,7 @@ export default class TMapService extends BaseMapService { { lat: sw[1], lng: sw[0] }, { lat: ne[1], lng: ne[0] }, ); + // @ts-ignore this.map.fitBounds(bounds, fitBoundsOptions); } @@ -338,6 +347,16 @@ export default class TMapService extends BaseMapService { this.map.setZoom(zoom); } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + public setMaxZoom(max: number): void { + throw new Error('Method not implemented.'); + } + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + public setMinZoom(min: number): void { + throw new Error('Method not implemented.'); + } + public setMapStatus(option: Partial): void { (Object.keys(option) as Array).map((status) => { switch (status as keyof IStatusOptions) { @@ -364,7 +383,6 @@ export default class TMapService extends BaseMapService { }); } - // coordinates methods public meterToCoord( [centerLon, centerLat]: [number, number], [outerLon, outerLat]: [number, number], @@ -377,17 +395,18 @@ export default class TMapService extends BaseMapService { new google.maps.LatLng(outerLat, outerLon), ]); - const [x1, y1] = this.lngLatToCoord!([centerLon, centerLat]); - const [x2, y2] = this.lngLatToCoord!([outerLon, outerLat]); - const coordDistance = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)); + const { x: x1, y: y1 } = this.lngLatToPixel([centerLon, centerLat]); + const { x: x2, y: y2 } = this.lngLatToPixel([outerLon, outerLat]); + const coordDistance = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y2 - y1, 2)); return coordDistance / metreDistance; } public pixelToLngLat([x, y]: Point): ILngLat { - const { lng: clng, lat: clat } = this.map.getCenter(); + const { lng: clng, lat: clat } = this.map.getCenter()!; const { x: centerPixelX, y: centerPixelY } = this.lngLatToPixel([clng(), clat()]); const { x: centerContainerX, y: centerContainerY } = this.lngLatToContainer([clng(), clat()]); + // @ts-expect-error const { lng, lat } = this.map.unprojectFromContainer( new google.maps.Point( centerContainerX + (x - centerPixelX), @@ -399,39 +418,26 @@ export default class TMapService extends BaseMapService { public lngLatToPixel([lng, lat]: Point): IPoint { const latLng = new google.maps.LatLng(lat, lng); - const point = this.map.getProjection().fromLatLngToPoint(latLng); - return { x: point.x, y: point.y }; + const point = this.map.getProjection()?.fromLatLngToPoint(latLng); + return { x: point?.x || 0, y: point?.y || 0 }; } public containerToLngLat([x, y]: [number, number]): ILngLat { const pixelCoordinate = new google.maps.Point(x, y); const lngLat = this.map.getProjection()?.fromPointToLatLng(pixelCoordinate); - return { lng: lngLat.lng(), lat: lngLat.lat() }; + return { lng: lngLat?.lng() || 0, lat: lngLat?.lat() || 0 }; } public lngLatToContainer([lng, lat]: [number, number]): IPoint { const latLng = new google.maps.LatLng(lat, lng); + // @ts-expect-error const pixel = this.map.getProjection()?.fromLatLngToContainerPixel?.(latLng); return { x: pixel.x, y: pixel.y }; } - public lngLatToCoord?([lng, lat]: [number, number]): [number, number] { - // TODO: Perhaps need to check the three.js coordinates - const { x, y } = this.lngLatToPixel([lng, lat]); - return [x, -y]; - } - - public lngLatToCoords?(list: number[][] | number[][][]): any { - return list.map((item) => - Array.isArray(item[0]) - ? this.lngLatToCoords!(item as Array<[number, number]>) - : this.lngLatToCoord!(item as [number, number]), - ); - } - public lngLatToMercator(lnglat: [number, number], altitude: number): IMercator { // Use built in mercator tools due to Tencent not provided related methods - const { x = 0, y = 0, z = 0 } = MercatorCoordinate.fromLngLat(lnglat, altitude); + const { x = 0, y = 0, z = 0 } = lngLatToMercator(lnglat, altitude); return { x, y, z }; } @@ -455,10 +461,6 @@ export default class TMapService extends BaseMapService { return modelMatrix as unknown as number[]; } - public getCustomCoordCenter?(): [number, number] { - throw new Error('Method not implemented.'); - } - public exportMap(type: 'jpg' | 'png'): string { const renderCanvas = this.getMapCanvasContainer() as HTMLCanvasElement; const layersPng = @@ -468,16 +470,20 @@ export default class TMapService extends BaseMapService { return layersPng; } - // Method on earth mode - public rotateY?(): void { - throw new Error('Method not implemented.'); - } - private hideLogo() { const container = this.map.getDiv(); if (!container) { return; } - DOM.addClass(container, 'tmap-contianer--hide-logo'); + DOM.addClass(container, 'googlemap-contianer--hide-logo'); + } + + public destroy(): void { + super.destroy(); + this.mapContainer?.parentNode?.removeChild(this.mapContainer); + if (this.map) { + // TODO: map destroy + this.mapContainer = null; + } } } diff --git a/packages/maps/src/gmap/maploader.ts b/extensions/extension-maps/src/gmap/maploader.ts similarity index 99% rename from packages/maps/src/gmap/maploader.ts rename to extensions/extension-maps/src/gmap/maploader.ts index d38f0eb568e..d49bfccdb1d 100644 --- a/packages/maps/src/gmap/maploader.ts +++ b/extensions/extension-maps/src/gmap/maploader.ts @@ -1,4 +1,3 @@ -/* eslint-disable */ if (!window) { throw Error('Google Map JSAPI can only be used in Browser.'); } diff --git a/extensions/extension-maps/src/index.ts b/extensions/extension-maps/src/index.ts new file mode 100644 index 00000000000..0239e3d847a --- /dev/null +++ b/extensions/extension-maps/src/index.ts @@ -0,0 +1,15 @@ +import GaodeMap from './amap'; +import BaiduMap from './bmap'; +import GoogleMap from './gmap'; +import Mapbox from './mapbox'; +import MapLibre from './maplibre'; +import TdtMap from './tdtmap'; +import TencentMap from './tmap'; + +/** + * @deprecated + * 使用 new TdtMap() + */ +const TMap = TdtMap; + +export { BaiduMap, GaodeMap, GoogleMap, MapLibre, Mapbox, TMap, TdtMap, TencentMap }; diff --git a/extensions/extension-maps/src/mapbox/index.ts b/extensions/extension-maps/src/mapbox/index.ts new file mode 100644 index 00000000000..17cd07c6d30 --- /dev/null +++ b/extensions/extension-maps/src/mapbox/index.ts @@ -0,0 +1,10 @@ +import { BaseMapWrapper } from '@antv/l7-core'; +import type { Map } from 'mapbox-gl'; +import './logo.css'; +import MapboxService from './map'; + +export default class MapboxWrapper extends BaseMapWrapper { + protected getServiceConstructor() { + return MapboxService; + } +} diff --git a/packages/maps/src/mapbox/logo.css b/extensions/extension-maps/src/mapbox/logo.css similarity index 100% rename from packages/maps/src/mapbox/logo.css rename to extensions/extension-maps/src/mapbox/logo.css diff --git a/extensions/extension-maps/src/mapbox/map.ts b/extensions/extension-maps/src/mapbox/map.ts new file mode 100644 index 00000000000..40429ef4337 --- /dev/null +++ b/extensions/extension-maps/src/mapbox/map.ts @@ -0,0 +1,419 @@ +import type { + Bounds, + ILngLat, + IMercator, + IPoint, + IStatusOptions, + MapStyleConfig, +} from '@antv/l7-core'; +import { BaseMapService, MapServiceEvent, WebMercatorViewport } from '@antv/l7-core'; +import { DOM } from '@antv/l7-utils'; +import { mat4, vec3 } from 'gl-matrix'; +import type { Map } from 'mapbox-gl'; +import mapboxgl from 'mapbox-gl'; +import 'mapbox-gl/dist/mapbox-gl.css'; +import { MapTheme } from './theme'; + +const MAPBOX_API_KEY = + '101MlGsZ2AmmA&access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg'; + +const MapEvent: Record = { + mapmove: 'move', + camerachange: 'move', + zoomchange: 'zoom', + dragging: 'drag', +}; + +/** + * MapboxService + */ +export default class MapboxService extends BaseMapService { + public type: string = 'Mapbox'; + + public viewport = new WebMercatorViewport(); + + public async init(): Promise { + const { + id = 'map', + attributionControl = false, + style = 'light', + token = MAPBOX_API_KEY, + rotation = 0, + mapInstance, + ...rest + } = this.config; + + /** + * TODO: 使用 mapbox v0.53.x 版本 custom layer，需要共享 gl context + * @see https://github.com/mapbox/mapbox-gl-js/blob/master/debug/threejs.html#L61-L64 + */ + + // 判断全局 mapboxgl 对象的加载 + if (!mapInstance && window?.mapboxgl) { + // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。 + console.error(this.configService.getSceneWarninfo('SDK')); + } + + if ( + token === MAPBOX_API_KEY && + style !== 'blank' && + window?.mapboxgl?.accessToken && + !mapInstance // 如果用户传递了 mapInstance，应该不去干预实例的 accessToken。 + ) { + console.warn(this.configService.getSceneWarninfo('MapToken')); + } + + // 判断是否设置了 accessToken + if (!mapInstance && window?.mapboxgl?.accessToken) { + // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。 + window.mapboxgl.accessToken = token; + } + + if (mapInstance) { + this.map = mapInstance; + this.mapContainer = this.map.getContainer(); + } else { + this.mapContainer = this.creatMapContainer(id); + this.map = new (window?.mapboxgl || mapboxgl).Map({ + container: this.mapContainer, + style: this.getMapStyleValue(style), + attributionControl, + bearing: rotation, + ...rest, + }); + } + this.map.on('load', () => { + this.handleCameraChanged(); + }); + this.map.on('move', this.handleCameraChanged); + + this.handleCameraChanged(); + } + + protected handleCameraChanged = () => { + const { lat, lng } = this.map.getCenter(); + const center: [number, number] = [lng, lat]; + const option = { + center, + // @ts-ignore + viewportWidth: this.map.transform.width, + // @ts-ignore + viewportHeight: this.map.transform.height, + bearing: this.map.getBearing(), + pitch: this.map.getPitch(), + zoom: this.map.getZoom(), + // mapbox 中固定相机高度为 viewport 高度的 1.5 倍 + cameraHeight: 0, + }; + + this.updateView(option); + }; + + protected creatMapContainer(id: string | HTMLDivElement) { + const wrapper = super.creatMapContainer(id); + const mapContainer = document.createElement('div'); + mapContainer.style.cssText += ` + position: absolute; + top: 0; + height: 100%; + width: 100%; + `; + mapContainer.id = 'l7_mapbox_div'; + wrapper.appendChild(mapContainer); + return mapContainer; + } + + public getContainer(): HTMLElement | null { + return this.map.getContainer(); + } + + public getMapCanvasContainer(): HTMLElement { + return this.map.getCanvasContainer() as HTMLElement; + } + + public addMarkerContainer(): void { + const container = this.map.getCanvasContainer(); + this.markerContainer = DOM.create('div', 'l7-marker-container', container); + this.markerContainer.setAttribute('tabindex', '-1'); + } + + public getCanvasOverlays() { + return this.getMapContainer()?.querySelector('.mapboxgl-canvas-container') as HTMLElement; + } + + // MapEvent，定义事件类型 + public on(type: string, handle: (...args: any[]) => void): void { + if (MapServiceEvent.indexOf(type) !== -1) { + this.eventEmitter.on(type, handle); + } else { + // 统一事件名称 + this.map.on(MapEvent[type] || type, handle); + } + } + + public once(type: string, handle: (...args: any[]) => void) { + if (MapServiceEvent.indexOf(type) !== -1) { + this.eventEmitter.once(type, handle); + } else { + // 统一事件名称 + this.map.once(MapEvent[type] || type, handle); + } + } + + public off(type: string, handle: (...args: any[]) => void): void { + this.map.off(MapEvent[type] || type, handle); + this.eventEmitter.off(type, handle); + } + + public getSize(): [number, number] { + //@ts-ignore + const size = this.map.transform; + + return [size.width, size.height]; + } + + public getMinZoom(): number { + return this.map.getMinZoom(); + } + + public getMaxZoom(): number { + return this.map.getMaxZoom(); + } + + public getZoom(): number { + return this.map.getZoom(); + } + + public getCenter(): ILngLat { + return this.map.getCenter(); + } + + public getPitch(): number { + return this.map.getPitch(); + } + + public getRotation(): number { + return this.map.getBearing(); + } + + public getBounds(): Bounds { + return this.map.getBounds().toArray() as Bounds; + } + + public getMapStyleConfig(): MapStyleConfig { + return MapTheme; + } + + public getMapStyleValue(name: string) { + return this.getMapStyleConfig()[name] || name; + } + + public getMapStyle(): string { + try { + const styleUrl = this.map.getStyle().sprite ?? ''; + // 将 Mapbox 返回的样式字符串转成传入 style 保持一致 + if (/^mapbox:\/\/sprites\/zcxduo\/\w+\/\w+$/.test(styleUrl)) { + return styleUrl?.replace(/\/\w+$/, '').replace(/sprites/, 'styles'); + } + return styleUrl; + } catch (e) { + return ''; + } + } + + public setMapStyle(style: any): void { + this.map.setStyle(this.getMapStyleValue(style)); + } + + public setRotation(rotation: number): void { + this.map.setBearing(rotation); + } + + public zoomIn(option?: any, eventData?: any): void { + this.map.zoomIn(option, eventData); + } + + public zoomOut(option?: any, eventData?: any): void { + this.map.zoomOut(option, eventData); + } + + public panTo(p: [number, number]): void { + this.map.panTo(p); + } + + public panBy(x: number = 0, y: number = 0): void { + // @ts-ignore + this.map.panBy([x, y]); + } + + public fitBounds(bound: Bounds, fitBoundsOptions?: any): void { + this.map.fitBounds(bound, fitBoundsOptions); + } + + public setZoomAndCenter(zoom: number, center: [number, number]): void { + this.map.flyTo({ + zoom, + center, + }); + } + + public setCenter(lnglat: [number, number]): void { + this.map.setCenter(lnglat); + } + + public setPitch(pitch: number) { + return this.map.setPitch(pitch); + } + + public setZoom(zoom: number) { + return this.map.setZoom(zoom); + } + + public setMaxZoom(max: number): void { + this.map.setMaxZoom(max); + } + + public setMinZoom(min: number): void { + this.map.setMinZoom(min); + } + + public setMapStatus(option: Partial): void { + if (option.doubleClickZoom === true) { + this.map.doubleClickZoom.enable(); + } + if (option.doubleClickZoom === false) { + this.map.doubleClickZoom.disable(); + } + if (option.dragEnable === false) { + this.map.dragPan.disable(); + } + if (option.dragEnable === true) { + this.map.dragPan.enable(); + } + if (option.rotateEnable === false) { + this.map.dragRotate.disable(); + } + if (option.dragEnable === true) { + this.map.dragRotate.enable(); + } + if (option.keyboardEnable === false) { + this.map.keyboard.disable(); + } + if (option.keyboardEnable === true) { + this.map.keyboard.enable(); + } + if (option.zoomEnable === false) { + this.map.scrollZoom.disable(); + } + if (option.zoomEnable === true) { + this.map.scrollZoom.enable(); + } + } + + public meterToCoord(center: [number, number], outer: [number, number]) { + // 统一根据经纬度来转化 + // Tip: 实际米距离 unit meter + const centerLnglat = new mapboxgl.LngLat(center[0], center[1]); + + const outerLnglat = new mapboxgl.LngLat(outer[0], outer[1]); + const meterDis = centerLnglat.distanceTo(outerLnglat); + + // Tip: 三维世界坐标距离 + + const centerMercator = mapboxgl.MercatorCoordinate.fromLngLat({ + lng: center[0], + lat: center[1], + }); + const outerMercator = mapboxgl.MercatorCoordinate.fromLngLat({ + lng: outer[0], + lat: outer[1], + }); + const { x: x1, y: y1 } = centerMercator; + const { x: x2, y: y2 } = outerMercator; + // Math.pow(2, 22) 4194304 + const coordDis = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) * 4194304 * 2; + + return coordDis / meterDis; + } + + public pixelToLngLat(pixel: [number, number]): ILngLat { + return this.map.unproject(pixel); + } + + public lngLatToPixel(lnglat: [number, number]): IPoint { + return this.map.project(lnglat); + } + + public containerToLngLat(pixel: [number, number]): ILngLat { + return this.map.unproject(pixel); + } + + public lngLatToContainer(lnglat: [number, number]): IPoint { + return this.map.project(lnglat); + } + + /** + * 将经纬度转成墨卡托坐标 + */ + public lngLatToMercator(lnglat: [number, number], altitude: number): IMercator { + const { x = 0, y = 0, z = 0 } = window.mapboxgl.MercatorCoordinate.fromLngLat(lnglat, altitude); + return { x, y, z }; + } + + public getModelMatrix( + lnglat: [number, number], + altitude: number, + rotate: [number, number, number], + scale: [number, number, number] = [1, 1, 1], + origin: IMercator = { x: 0, y: 0, z: 0 }, + ): number[] { + const modelAsMercatorCoordinate = window.mapboxgl.MercatorCoordinate.fromLngLat( + lnglat, + altitude, + ); + const meters = modelAsMercatorCoordinate.meterInMercatorCoordinateUnits(); + const modelMatrix = mat4.create(); + + mat4.translate( + modelMatrix, + modelMatrix, + vec3.fromValues( + modelAsMercatorCoordinate.x - origin.x, + modelAsMercatorCoordinate.y - origin.y, + modelAsMercatorCoordinate.z || 0 - origin.z, + ), + ); + + mat4.scale( + modelMatrix, + modelMatrix, + vec3.fromValues(meters * scale[0], -meters * scale[1], meters * scale[2]), + ); + + mat4.rotateX(modelMatrix, modelMatrix, rotate[0]); + mat4.rotateY(modelMatrix, modelMatrix, rotate[1]); + mat4.rotateZ(modelMatrix, modelMatrix, rotate[2]); + + return modelMatrix as unknown as number[]; + } + + public exportMap(type: 'jpg' | 'png'): string { + const renderCanvas = this.map.getCanvas(); + const layersPng = + type === 'jpg' + ? (renderCanvas?.toDataURL('image/jpeg') as string) + : (renderCanvas?.toDataURL('image/png') as string); + return layersPng; + } + + public destroy(): void { + super.destroy(); + // 销毁地图可视化层的容器 + this.mapContainer?.parentNode?.removeChild(this.mapContainer); + + if (this.map) { + this.map.remove(); + this.mapContainer = null; + } + } +} diff --git a/packages/maps/src/earth/theme.ts b/extensions/extension-maps/src/mapbox/theme.ts similarity index 100% rename from packages/maps/src/earth/theme.ts rename to extensions/extension-maps/src/mapbox/theme.ts diff --git a/extensions/extension-maps/src/maplibre/index.ts b/extensions/extension-maps/src/maplibre/index.ts new file mode 100644 index 00000000000..d9e4979003a --- /dev/null +++ b/extensions/extension-maps/src/maplibre/index.ts @@ -0,0 +1,9 @@ +import { BaseMapWrapper } from '@antv/l7-core'; +import type { Map } from 'maplibre-gl'; +import MaplibreService from './map'; + +export default class MapboxWrapper extends BaseMapWrapper { + protected getServiceConstructor() { + return MaplibreService; + } +} diff --git a/packages/maps/src/utils/BaseMapService.ts b/extensions/extension-maps/src/maplibre/map.ts similarity index 54% rename from packages/maps/src/utils/BaseMapService.ts rename to extensions/extension-maps/src/maplibre/map.ts index b4a82233dca..30b799f95fe 100644 --- a/packages/maps/src/utils/BaseMapService.ts +++ b/extensions/extension-maps/src/maplibre/map.ts @@ -1,140 +1,158 @@ -/** - * MapboxService - */ import type { Bounds, - ICoordinateSystemService, - IGlobalConfigService, ILngLat, - IMapCamera, - IMapConfig, - IMapService, IMercator, IPoint, IStatusOptions, - IViewport, - L7Container, MapStyleConfig, - MapStyleName, } from '@antv/l7-core'; -import { CoordinateSystem, MapServiceEvent } from '@antv/l7-core'; -import type { Map } from '@antv/l7-map'; +import { BaseMapService, MapServiceEvent, WebMercatorViewport } from '@antv/l7-core'; import { DOM } from '@antv/l7-utils'; -import { EventEmitter } from 'eventemitter3'; -import type { ISimpleMapCoord } from './simpleMapCoord'; -import { SimpleMapCoord } from './simpleMapCoord'; -import { MapTheme } from './theme'; -const EventMap: { - [key: string]: any; -} = { +import { mat4, vec3 } from 'gl-matrix'; +import type { Map } from 'maplibre-gl'; +import maplibregl from 'maplibre-gl'; +import 'maplibre-gl/dist/maplibre-gl.css'; +import { MapTheme } from '../mapbox/theme'; + +const MapEvent: Record = { mapmove: 'move', camerachange: 'move', zoomchange: 'zoom', dragging: 'drag', }; -const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12; +export default class MaplibreService extends BaseMapService { + public type: string = 'Maplibre'; -export default abstract class BaseMapService implements IMapService { - public version: string = 'DEFAUlTMAP'; - public map: Map & T; - public simpleMapCoord: ISimpleMapCoord = new SimpleMapCoord(); - // 背景色 - public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)'; - protected abstract viewport: IViewport | unknown; + public viewport = new WebMercatorViewport(); - protected readonly config: Partial; + public async init(): Promise { + const { + id = 'map', + attributionControl = false, + style = 'light', + rotation = 0, + mapInstance, + ...rest + } = this.config; - protected readonly configService: IGlobalConfigService; + if (mapInstance) { + this.map = mapInstance; + this.mapContainer = this.map.getContainer(); + } else { + this.mapContainer = this.creatMapContainer(id); + this.map = new maplibregl.Map({ + container: this.mapContainer, + style: this.getMapStyleValue(style), + attributionControl, + bearing: rotation, + ...rest, + }); + } + this.map.on('load', () => { + this.handleCameraChanged(); + }); + this.map.on('move', this.handleCameraChanged); - protected readonly coordinateSystemService: ICoordinateSystemService; + this.handleCameraChanged(); + } - protected eventEmitter: any; + protected handleCameraChanged = () => { + const { lat, lng } = this.map.getCenter(); + const center: [number, number] = [lng, lat]; + const option = { + center, + viewportWidth: this.map.transform.width, + viewportHeight: this.map.transform.height, + bearing: this.map.getBearing(), + pitch: this.map.getPitch(), + zoom: this.map.getZoom(), + // mapbox 中固定相机高度为 viewport 高度的 1.5 倍 + cameraHeight: 0, + }; + + this.updateView(option); + }; - constructor(container: L7Container) { - this.config = container.mapConfig; - this.configService = container.globalConfigService; - this.coordinateSystemService = container.coordinateSystemService; - this.eventEmitter = new EventEmitter(); + protected creatMapContainer(id: string | HTMLDivElement) { + const wrapper = super.creatMapContainer(id); + const mapContainer = document.createElement('div'); + mapContainer.style.cssText += ` + position: absolute; + top: 0; + height: 100%; + width: 100%; + `; + mapContainer.id = 'l7_maplibre_div'; + wrapper.appendChild(mapContainer); + return mapContainer; + } + + public getContainer(): HTMLElement | null { + return this.map.getContainer(); } - protected markerContainer: HTMLElement; - protected cameraChangedCallback: (viewport: IViewport) => void; - protected $mapContainer: HTMLElement | null; - public setBgColor(color: string) { - this.bgColor = color; + public getMapCanvasContainer(): HTMLElement { + return this.map.getCanvasContainer() as HTMLElement; } - // init public addMarkerContainer(): void { const container = this.map.getCanvasContainer(); this.markerContainer = DOM.create('div', 'l7-marker-container', container); this.markerContainer.setAttribute('tabindex', '-1'); } - public getMarkerContainer(): HTMLElement { - return this.markerContainer; - } - public getOverlayContainer(): HTMLElement | undefined { - return undefined; - } - - public getCanvasOverlays(): HTMLElement | null | undefined { - return undefined; + public getCanvasOverlays() { + return this.getMapContainer()?.querySelector('.maplibregl-canvas-container') as HTMLElement; } - // map event + // MapEvent，定义事件类型 public on(type: string, handle: (...args: any[]) => void): void { if (MapServiceEvent.indexOf(type) !== -1) { this.eventEmitter.on(type, handle); } else { // 统一事件名称 - this.map.on(EventMap[type] || type, handle); + this.map.on(MapEvent[type] || type, handle); } } - public off(type: string, handle: (...args: any[]) => void): void { - this.map.off(EventMap[type] || type, handle); - this.eventEmitter.off(type, handle); - } - public getContainer(): HTMLElement | null { - return this.map.getContainer(); + public once(type: string, handle: (...args: any[]) => void) { + if (MapServiceEvent.indexOf(type) !== -1) { + this.eventEmitter.once(type, handle); + } else { + // 统一事件名称 + this.map.once(MapEvent[type] || type, handle); + } } - public getMapCanvasContainer(): HTMLElement { - return this.map.getCanvasContainer() as HTMLElement; + public off(type: string, handle: (...args: any[]) => void): void { + this.map.off(MapEvent[type] || type, handle); + this.eventEmitter.off(type, handle); } public getSize(): [number, number] { - if (this.version === 'SIMPLE') { - return this.simpleMapCoord.getSize(); - } + //@ts-ignore const size = this.map.transform; return [size.width, size.height]; } - // get mapStatus method - public getType() { - return 'default'; + public getMinZoom(): number { + return this.map.getMinZoom(); + } + + public getMaxZoom(): number { + return this.map.getMaxZoom(); } public getZoom(): number { return this.map.getZoom(); } - public setZoom(zoom: number) { - return this.map.setZoom(zoom); - } - public getCenter(): ILngLat { return this.map.getCenter(); } - public setCenter(lnglat: [number, number]): void { - this.map.setCenter(lnglat); - } - public getPitch(): number { return this.map.getPitch(); } @@ -147,12 +165,30 @@ export default abstract class BaseMapService implements IMapService return this.map.getBounds().toArray() as Bounds; } - public getMinZoom(): number { - return this.map.getMinZoom(); + public getMapStyleConfig(): MapStyleConfig { + return MapTheme; } - public getMaxZoom(): number { - return this.map.getMaxZoom(); + public getMapStyleValue(name: string) { + return this.getMapStyleConfig()[name] || name; + } + + public getMapStyle(): string { + try { + // @ts-ignore + const styleUrl = (this.map.getStyle().sprite as string) ?? ''; + // 将 Mapbox 返回的样式字符串转成传入 style 保持一致 + if (/^mapbox:\/\/sprites\/zcxduo\/\w+\/\w+$/.test(styleUrl)) { + return styleUrl?.replace(/\/\w+$/, '').replace(/sprites/, 'styles'); + } + return styleUrl; + } catch (e) { + return ''; + } + } + + public setMapStyle(style: any): void { + this.map.setStyle(this.getMapStyleValue(style)); } public setRotation(rotation: number): void { @@ -162,12 +198,10 @@ export default abstract class BaseMapService implements IMapService public zoomIn(option?: any, eventData?: any): void { this.map.zoomIn(option, eventData); } + public zoomOut(option?: any, eventData?: any): void { this.map.zoomOut(option, eventData); } - public setPitch(pitch: number) { - return this.map.setPitch(pitch); - } public panTo(p: [number, number]): void { this.map.panTo(p); @@ -181,6 +215,25 @@ export default abstract class BaseMapService implements IMapService this.map.fitBounds(bound, fitBoundsOptions); } + public setZoomAndCenter(zoom: number, center: [number, number]): void { + this.map.flyTo({ + zoom, + center, + }); + } + + public setCenter(lnglat: [number, number]): void { + this.map.setCenter(lnglat); + } + + public setPitch(pitch: number) { + return this.map.setPitch(pitch); + } + + public setZoom(zoom: number) { + return this.map.setZoom(zoom); + } + public setMaxZoom(max: number): void { this.map.setMaxZoom(max); } @@ -188,6 +241,7 @@ export default abstract class BaseMapService implements IMapService public setMinZoom(min: number): void { this.map.setMinZoom(min); } + public setMapStatus(option: Partial): void { if (option.doubleClickZoom === true) { this.map.doubleClickZoom.enable(); @@ -221,24 +275,32 @@ export default abstract class BaseMapService implements IMapService } } - public setZoomAndCenter(zoom: number, center: [number, number]): void { - this.map.flyTo({ - zoom, - center, - }); - } + public meterToCoord(center: [number, number], outer: [number, number]) { + // 统一根据经纬度来转化 + // Tip: 实际米距离 unit meter + const centerLnglat = new maplibregl.LngLat(center[0], center[1]); - public setMapStyle(style: any): void { - // @ts-ignore - this.map?.setStyle(this.getMapStyleValue(style)); - } + const outerLnglat = new maplibregl.LngLat(outer[0], outer[1]); + const meterDis = centerLnglat.distanceTo(outerLnglat); - // eslint-disable-next-line @typescript-eslint/no-unused-vars - public meterToCoord(center: [number, number], outer: [number, number]) { - return 1.0; + // Tip: 三维世界坐标距离 + + const centerMercator = maplibregl.MercatorCoordinate.fromLngLat({ + lng: center[0], + lat: center[1], + }); + const outerMercator = maplibregl.MercatorCoordinate.fromLngLat({ + lng: outer[0], + lat: outer[1], + }); + const { x: x1, y: y1 } = centerMercator; + const { x: x2, y: y2 } = outerMercator; + // Math.pow(2, 22) 4194304 + const coordDis = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) * 4194304 * 2; + + return coordDis / meterDis; } - // TODO: 计算像素坐标 public pixelToLngLat(pixel: [number, number]): ILngLat { return this.map.unproject(pixel); } @@ -254,56 +316,47 @@ export default abstract class BaseMapService implements IMapService public lngLatToContainer(lnglat: [number, number]): IPoint { return this.map.project(lnglat); } - public abstract lngLatToMercator(lnglat: [number, number], altitude: number): IMercator; - public abstract getModelMatrix( + /** + * 将经纬度转成墨卡托坐标 + */ + public lngLatToMercator(lnglat: [number, number], altitude: number): IMercator { + const { x = 0, y = 0, z = 0 } = maplibregl.MercatorCoordinate.fromLngLat(lnglat, altitude); + return { x, y, z }; + } + + public getModelMatrix( lnglat: [number, number], altitude: number, rotate: [number, number, number], - scale: [number, number, number], - origin: IMercator, - ): number[]; - - public getMapStyle(): string { - try { - // @ts-ignore - const styleUrl = this.map.getStyle().sprite ?? ''; - // 将 Mapbox 返回的样式字符串转成传入 style 保持一致 - if (/^mapbox:\/\/sprites\/zcxduo\/\w+\/\w+$/.test(styleUrl)) { - return styleUrl?.replace(/\/\w+$/, '').replace(/sprites/, 'styles'); - } - return styleUrl; - } catch (e) { - return ''; - } - } - - public getMapStyleConfig(): MapStyleConfig { - return MapTheme; - } - - public getMapStyleValue(name: MapStyleName): any { - return this.getMapStyleConfig()[name] ?? name; - } - - public abstract init(): Promise; - - public destroy() { - this.eventEmitter.removeAllListeners(); - if (this.map) { - this.map.remove(); - this.$mapContainer = null; - } - } - public emit(name: string, ...args: any[]) { - this.eventEmitter.emit(name, ...args); - } - public once(name: string, ...args: any[]) { - this.eventEmitter.once(name, ...args); - } - - public getMapContainer() { - return this.$mapContainer; + scale: [number, number, number] = [1, 1, 1], + origin: IMercator = { x: 0, y: 0, z: 0 }, + ): number[] { + const modelAsMercatorCoordinate = maplibregl.MercatorCoordinate.fromLngLat(lnglat, altitude); + const meters = modelAsMercatorCoordinate.meterInMercatorCoordinateUnits(); + const modelMatrix = mat4.create(); + + mat4.translate( + modelMatrix, + modelMatrix, + vec3.fromValues( + modelAsMercatorCoordinate.x - origin.x, + modelAsMercatorCoordinate.y - origin.y, + modelAsMercatorCoordinate.z || 0 - origin.z, + ), + ); + + mat4.scale( + modelMatrix, + modelMatrix, + vec3.fromValues(meters * scale[0], -meters * scale[1], meters * scale[2]), + ); + + mat4.rotateX(modelMatrix, modelMatrix, rotate[0]); + mat4.rotateY(modelMatrix, modelMatrix, rotate[1]); + mat4.rotateZ(modelMatrix, modelMatrix, rotate[2]); + + return modelMatrix as unknown as number[]; } public exportMap(type: 'jpg' | 'png'): string { @@ -315,63 +368,15 @@ export default abstract class BaseMapService implements IMapService : (renderCanvas?.toDataURL('image/png') as string); return layersPng; } - public onCameraChanged(callback: (viewport: IViewport) => void): void { - this.cameraChangedCallback = callback; - } - // eslint-disable-next-line @typescript-eslint/no-unused-vars - protected handleCameraChanged = (e?: any) => { - const { lat, lng } = this.map.getCenter(); - // Tip: 统一触发地图变化事件 - this.emit('mapchange'); - // resync - (this.viewport as IViewport).syncWithMapCamera({ - bearing: this.map.getBearing(), - center: [lng, lat], - viewportHeight: this.map.transform.height, - pitch: this.map.getPitch(), - viewportWidth: this.map.transform.width, - zoom: this.map.getZoom(), - // mapbox 中固定相机高度为 viewport 高度的 1.5 倍 - cameraHeight: 0, - }); - - this.updateCoordinateSystemService(); - this.cameraChangedCallback(this.viewport as IViewport); - }; + public destroy(): void { + super.destroy(); + // 销毁地图可视化层的容器 + this.mapContainer?.parentNode?.removeChild(this.mapContainer); - protected creatMapContainer(id: string | HTMLDivElement) { - let $wrapper = id as HTMLDivElement; - if (typeof id === 'string') { - $wrapper = document.getElementById(id) as HTMLDivElement; - } - return $wrapper; - } - public updateView(viewOption: Partial) { - // Tip: 统一触发地图变化事件 - this.emit('mapchange'); - // resync - (this.viewport as IViewport).syncWithMapCamera({ - bearing: viewOption.bearing, - center: viewOption.center, - viewportHeight: viewOption.viewportHeight, - pitch: viewOption.pitch, - viewportWidth: viewOption.viewportWidth, - zoom: viewOption.zoom, - // mapbox 中固定相机高度为 viewport 高度的 1.5 倍 - cameraHeight: 0, - }); - this.updateCoordinateSystemService(); - this.cameraChangedCallback(this.viewport as IViewport); - } - - protected updateCoordinateSystemService() { - const { offsetCoordinate = true } = this.config; - // set coordinate system - if ((this.viewport as IViewport).getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD && offsetCoordinate) { - this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.LNGLAT_OFFSET); - } else { - this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.LNGLAT); + if (this.map) { + this.map.remove(); + this.mapContainer = null; } } } diff --git a/packages/maps/src/tdtmap/index.ts b/extensions/extension-maps/src/tdtmap/index.ts similarity index 65% rename from packages/maps/src/tdtmap/index.ts rename to extensions/extension-maps/src/tdtmap/index.ts index 788ea151fdb..55305ee9688 100644 --- a/packages/maps/src/tdtmap/index.ts +++ b/extensions/extension-maps/src/tdtmap/index.ts @@ -1,9 +1,7 @@ -/* eslint-disable */ -import BaseMapWrapper from '../utils/BaseMapWrapper'; +import { BaseMapWrapper } from '@antv/l7-core'; import TdtMapService from './map'; export default class TdtMapWrapper extends BaseMapWrapper { - // @ts-ignore protected getServiceConstructor() { return TdtMapService; } diff --git a/packages/maps/src/tdtmap/map.ts b/extensions/extension-maps/src/tdtmap/map.ts similarity index 83% rename from packages/maps/src/tdtmap/map.ts rename to extensions/extension-maps/src/tdtmap/map.ts index 45c47ef026e..37dbf416a55 100644 --- a/packages/maps/src/tdtmap/map.ts +++ b/extensions/extension-maps/src/tdtmap/map.ts @@ -1,34 +1,138 @@ -import BaseMapService from '../utils/BaseMapService'; - import type { Bounds, ILngLat, IMercator, IPoint, IStatusOptions, - IViewport, + MapStyleConfig, Point, } from '@antv/l7-core'; -import { MapServiceEvent } from '@antv/l7-core'; -import { MercatorCoordinate } from '@antv/l7-map'; -import Viewport from '../lib/web-mercator-viewport'; +import { BaseMapService, MapServiceEvent, WebMercatorViewport } from '@antv/l7-core'; +import { lngLatToMercator } from '../utils'; import { load } from './maploader'; -let mapdivCount: number = 0; - -const EventMap: { - [key: string]: any; -} = { +const MapEvent: Record = { zoomchange: ['Ge'], }; +const TDT_API_KEY = 'b15e548080c79819617367d3f6095c69'; // TODO: 基于抽象类 BaseMap 实现，补全缺失方法，解决类型问题 export default class TdtMapService extends BaseMapService { - protected viewport: IViewport | null = null; + public type: string = 'TdtMap'; + + public viewport = new WebMercatorViewport(); + protected evtCbProxyMap: Map any, (...args: any) => any>> = new Map(); - // @ts-ignore + private sceneContainer: HTMLElement; + + public async init(): Promise { + const { + id, + mapInstance, + center = [121.30654632240122, 31.25744185633306], + token = TDT_API_KEY, + minZoom = 1, + maxZoom = 18, + zoom = 3, + } = this.config; + + // @ts-ignore + if (!window.T) { + await load({ tk: token }); + } + + if (mapInstance) { + this.map = mapInstance; + // @ts-ignore + this.map.centerAndZoom(new window.T.LngLat(center[0], center[1]), zoom); + this.mapContainer = this.map.getContainer(); + + // @ts-ignore + const point = new window.T.LngLat(center[0], center[1]); + this.map.centerAndZoom(point, zoom); + this.setMinZoom(minZoom); + this.setMaxZoom(maxZoom); + } else { + if (!id) { + throw Error('No container id specified'); + } + + this.mapContainer = this.creatMapContainer(id as string | HTMLDivElement); + // @ts-ignore + const map = new T.Map(this.mapContainer, { + // @ts-ignore + center: window.T.LngLat(center[0], center[1]), + minZoom, + maxZoom, + zoom, + projection: 'EPSG:900913', + }); + this.map = map; + // @ts-ignore + const control = new window.T.Control.Zoom(); + map.addControl(control); + } + + const container = this.map.getContainer(); + const tdtPanes = container.querySelector('.tdt-pane'); + tdtPanes.style.zIndex = 1; + this.handleCameraChanged(); + this.map.on('move', this.update); + //对应leaflet中的zoomanim + this.map.on('Ge', this.zoomStartUpdate); + this.map.on('resize', this.resize); + } + + protected handleCameraChanged = () => { + const map = this.map; + const { lng, lat } = this.map.getCenter(); + const center: [number, number] = [lng, lat]; + const option = { + center, + // @ts-ignore + viewportHeight: map.getContainer().clientHeight, + // @ts-ignore + viewportWidth: map.getContainer().clientWidth, + // @ts-ignore + bearing: 360, + // @ts-ignore + pitch: 0, + // @ts-ignore + zoom: map.getZoom() - 1, + }; + + this.updateView(option); + }; + + protected creatMapContainer(id: string | HTMLDivElement) { + const wrapper = super.creatMapContainer(id); + const tdtmapdiv = document.createElement('div'); + tdtmapdiv.style.cssText += ` + position: absolute; + top: 0; + height: 100%; + width: 100%; + `; + tdtmapdiv.id = 'l7_tdt_div'; + wrapper.appendChild(tdtmapdiv); + return tdtmapdiv; + } + + public getContainer(): HTMLElement | null { + return this.map.getContainer(); + } + + public getMapContainer(): HTMLElement { + return this.map.getContainer(); + } + + public getMapCanvasContainer(): HTMLElement { + // tdt-container + return this.map.getContainer()?.getElementsByClassName('tdt-container')[0]; + } + // 不直接用自带的marker的div，因为会收到天地图缩放时visibility变成hidden的影响 public addMarkerContainer(): void { const container = this.map.getContainer(); @@ -53,14 +157,12 @@ export default class TdtMapService extends BaseMapService { return this.markerContainer; } - public onCameraChanged(callback: (viewport: IViewport) => void): void { - this.cameraChangedCallback = callback; - } - private resize(ev: any) { + private resize = (ev: any) => { this.sceneContainer.style.width = ev.newSize.x + 'px'; this.sceneContainer.style.height = ev.newSize.y + 'px'; - } - private update() { + }; + + private update = () => { const bounds = this.map.getBounds(); const { x, y } = this.map.lngLatToLayerPoint({ lng: bounds.getSouthWest().lng, @@ -76,7 +178,7 @@ export default class TdtMapService extends BaseMapService { // @ts-ignore this.sceneContainer._tdt_pos = new T.Point(x, y); this.handleCameraChanged(); - } + }; private getZoomScale(toZoom: number, fromZoom: number): number { // TODO replace with universal implementation after refactoring projections @@ -84,7 +186,8 @@ export default class TdtMapService extends BaseMapService { fromZoom = fromZoom === undefined ? this.map.getZoom() : fromZoom; return crs.scale(toZoom) / crs.scale(fromZoom); } - private zoomStartUpdate(ev: any) { + + private zoomStartUpdate = (ev: any) => { // T._Q :DomUtil // this.map.options.IW.qW:map.project // GQ:multiply aQ:add DQ:substract @@ -109,7 +212,8 @@ export default class TdtMapService extends BaseMapService { this.sceneContainer.style.transition = 'transform 0.25s cubic-bezier(0,0,0.25,1)'; this.handleCameraChanged(); - } + }; + public getOverlayContainer(): HTMLElement | undefined { const overlayPane = this.map.getPanes()?.overlayPane; const container = document.createElement('div'); @@ -123,93 +227,6 @@ export default class TdtMapService extends BaseMapService { this.sceneContainer = container; return container; } - protected handleCameraChanged = () => { - this.emit('mapchange'); - const map = this.map; - const { lng, lat } = this.map.getCenter(); - const option = { - center: [lng, lat], - // @ts-ignore - viewportHeight: map.getContainer().clientHeight, - // @ts-ignore - viewportWidth: map.getContainer().clientWidth, - // @ts-ignore - bearing: 360, - // @ts-ignore - pitch: 0, - // @ts-ignore - zoom: map.getZoom() - 1, - }; - if (this.viewport) { - this.viewport.syncWithMapCamera(option as any); - this.updateCoordinateSystemService(); - this.cameraChangedCallback(this.viewport); - } - }; - - public async init(): Promise { - this.viewport = new Viewport(); - - const { - id, - mapInstance, - center = [121.30654632240122, 31.25744185633306], - token = 'b15e548080c79819617367d3f6095c69', - minZoom = 1, - maxZoom = 18, - zoom = 3, - } = this.config; - - // @ts-ignore - if (!window.T) { - await load({ tk: token }); - } - - if (mapInstance) { - this.map = mapInstance; - // @ts-ignore - this.map.centerAndZoom(new window.T.LngLat(center[0], center[1]), zoom); - this.$mapContainer = this.map.getContainer(); - - // @ts-ignore - const point = new window.T.LngLat(center[0], center[1]); - this.map.centerAndZoom(point, zoom); - this.setMinZoom(minZoom); - this.setMaxZoom(maxZoom); - } else { - if (!id) { - throw Error('No container id specified'); - } - - this.$mapContainer = this.creatMapContainer(id as string | HTMLDivElement); - // @ts-ignore - const map = new T.Map(this.$mapContainer, { - // @ts-ignore - center: window.T.LngLat(center[0], center[1]), - minZoom, - maxZoom, - zoom, - projection: 'EPSG:900913', - }); - this.map = map; - // @ts-ignore - const control = new window.T.Control.Zoom(); - map.addControl(control); - } - - const container = this.map.getContainer(); - const tdtPanes = container.querySelector('.tdt-pane'); - tdtPanes.style.zIndex = 1; - this.handleCameraChanged(); - this.map.on('move', this.update, this); - //对应leaflet中的zoomanim - this.map.on('Ge', this.zoomStartUpdate, this); - this.map.on('resize', this.resize, this); - } - - public destroy(): void { - return; - } // MapEvent public on(type: string, handle: (...args: any[]) => void): void { @@ -239,12 +256,13 @@ export default class TdtMapService extends BaseMapService { this.map.on(eventName, handleProxy); }; - if (Array.isArray(EventMap[type])) { - EventMap[type].forEach((eventName: string) => { + const event = MapEvent[type]; + if (Array.isArray(event)) { + event.forEach((eventName: string) => { onProxy(eventName || type); }); } else { - onProxy(EventMap[type] || type); + onProxy(event || type); } } } @@ -264,46 +282,39 @@ export default class TdtMapService extends BaseMapService { this.map.off(eventName, handleProxy); }; - if (Array.isArray(EventMap[type])) { - EventMap[type].forEach((eventName: string) => { + const event = MapEvent[type]; + if (Array.isArray(event)) { + event.forEach((eventName: string) => { offProxy(eventName || type); }); } else { - offProxy(EventMap[type] || type); + offProxy(event || type); } } + // eslint-disable-next-line @typescript-eslint/no-unused-vars public once(type: string, handler: (...args: any[]) => void): void { throw new Error('Method not implemented.'); } - // get dom - - public getMapContainer(): HTMLElement { - return this.map.getContainer(); - } - - public getType() { - return 'tdtmap'; - } - - public getMapCanvasContainer(): HTMLElement { - // tdt-container - return this.map.getContainer()?.getElementsByClassName('tdt-container')[0]; - } - // get mapStatus method public getSize(): [number, number] { const size = this.map.getSize(); return [size.x, size.y]; } - // get mapStatus method - public getZoom(): number { return this.map.getZoom(); } + public getMinZoom(): number { + throw new Error('Method not implemented.'); + } + + public getMaxZoom(): number { + throw new Error('Method not implemented.'); + } + public setZoom(zoom: number) { return this.map.setZoom(zoom); } @@ -324,6 +335,11 @@ export default class TdtMapService extends BaseMapService { this.map.centerAndZoom(lngLat, zoom); } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + public setPitch(pitch: number) { + throw new Error('Method not implemented.'); + } + public getPitch(): number { return 0; } @@ -332,6 +348,29 @@ export default class TdtMapService extends BaseMapService { return 0; } + public getBounds(): Bounds { + const latlngBound = this.map.getBounds(); + + const sw = latlngBound.getSouthWest(), + ne = latlngBound.getNorthEast(); + return [ + [sw.lng, sw.lat], + [ne.lng, ne.lat], + ]; + } + + public getMapStyleConfig(): MapStyleConfig { + return []; + } + + public getMapStyle(): string { + return ''; + } + + public setMapStyle() { + throw new Error('Method not implemented.'); + } + public setRotation(rotation: number): void { this.map.setBearing(rotation); } @@ -395,8 +434,6 @@ export default class TdtMapService extends BaseMapService { } } - // coordinates methods - public getModelMatrix(): number[] { throw new Error('Method not implemented.'); } @@ -443,45 +480,25 @@ export default class TdtMapService extends BaseMapService { ); } - public getBounds(): Bounds { - const latlngBound = this.map.getBounds(); - - const sw = latlngBound.getSouthWest(), - ne = latlngBound.getNorthEast(); - return [ - [sw.lng, sw.lat], - [ne.lng, ne.lat], - ]; - } - public lngLatToMercator(lnglat: [number, number], altitude: number): IMercator { // Use built in mercator tools due to Tencent not provided related methods - const { x = 0, y = 0, z = 0 } = MercatorCoordinate.fromLngLat(lnglat, altitude); + const { x = 0, y = 0, z = 0 } = lngLatToMercator(lnglat, altitude); return { x, y, z }; } - public getCustomCoordCenter?(): [number, number] { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + public exportMap(type: 'jpg' | 'png'): string { throw new Error('Method not implemented.'); } - protected creatMapContainer(id: string | HTMLDivElement) { - let $wrapper = id as HTMLDivElement; - if (typeof id === 'string') { - $wrapper = document.getElementById(id) as HTMLDivElement; + public destroy(): void { + super.destroy(); + // 销毁地图可视化层的容器 + this.mapContainer?.parentNode?.removeChild(this.mapContainer); + + if (this.map) { + // TODO: map destroy + this.mapContainer = null; } - const $tdtmapdiv = document.createElement('div'); - $tdtmapdiv.style.cssText += ` - position: absolute; - top: 0; - height: 100%; - width: 100%; - `; - $tdtmapdiv.id = 'l7_tdt_div' + mapdivCount++; - $wrapper.appendChild($tdtmapdiv); - return $tdtmapdiv; } - - // public exportMap() {} - // - // private hideLogo() {} } diff --git a/packages/maps/src/tdtmap/maploader.ts b/extensions/extension-maps/src/tdtmap/maploader.ts similarity index 100% rename from packages/maps/src/tdtmap/maploader.ts rename to extensions/extension-maps/src/tdtmap/maploader.ts diff --git a/extensions/extension-maps/src/tmap/index.ts b/extensions/extension-maps/src/tmap/index.ts new file mode 100644 index 00000000000..b71ddc0aff5 --- /dev/null +++ b/extensions/extension-maps/src/tmap/index.ts @@ -0,0 +1,8 @@ +import { BaseMapWrapper } from '@antv/l7-core'; +import TencentMapService from './map'; + +export default class TencentMapWrapper extends BaseMapWrapper { + protected getServiceConstructor() { + return TencentMapService; + } +} diff --git a/packages/maps/src/tmap/logo.css b/extensions/extension-maps/src/tmap/logo.css similarity index 100% rename from packages/maps/src/tmap/logo.css rename to extensions/extension-maps/src/tmap/logo.css diff --git a/packages/maps/src/tmap/map.ts b/extensions/extension-maps/src/tmap/map.ts similarity index 82% rename from packages/maps/src/tmap/map.ts rename to extensions/extension-maps/src/tmap/map.ts index ff0451747ae..9e790fa4af2 100644 --- a/packages/maps/src/tmap/map.ts +++ b/extensions/extension-maps/src/tmap/map.ts @@ -4,24 +4,21 @@ import type { IMercator, IPoint, IStatusOptions, - IViewport, MapStyleConfig, Point, } from '@antv/l7-core'; -import { MapServiceEvent } from '@antv/l7-core'; -import { MercatorCoordinate } from '@antv/l7-map'; +import { BaseMapService, MapServiceEvent, WebMercatorViewport } from '@antv/l7-core'; import { DOM } from '@antv/l7-utils'; import { mat4, vec3 } from 'gl-matrix'; -import Viewport from '../lib/web-mercator-viewport'; -import BaseMapService from '../utils/BaseMapService'; +import { lngLatToMercator } from '../utils'; import './logo.css'; import TMapLoader from './maploader'; const TMAP_API_KEY: string = 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'; -const BMAP_VERSION: string = '1.exp'; +const VERSION: string = '1.exp'; -const EventMap: { - [key: string]: any; +const MapEvent: { + [key: string]: string | string[]; } = { mapmove: 'center_changed', camerachange: ['drag', 'pan', 'rotate', 'pitch', 'zoom'], @@ -29,55 +26,27 @@ const EventMap: { dragging: 'drag', }; -// TODO: 基于抽象类 BaseMap 实现，补全缺失方法，解决类型问题 -export default class TMapService extends BaseMapService { - // @ts-ignore - protected viewport: IViewport = null; - protected evtCbProxyMap: Map any, (...args: any) => any>> = - new Map(); +export default class TencentMapService extends BaseMapService { + public type: string = 'TencentMap'; - public handleCameraChanged = () => { - // Trigger map change event - this.emit('mapchange'); - // resync - const map = this.map; - // @ts-ignore - const { lng, lat } = map.getCenter(); - const option = { - center: [lng, lat], - // @ts-ignore - viewportHeight: map.getContainer().clientHeight, - // @ts-ignore - viewportWidth: map.getContainer().clientWidth, - // @ts-ignore - bearing: map.getHeading(), - // @ts-ignore - pitch: map.getPitch(), - // @ts-ignore - zoom: map.getZoom() - 1, - }; + public viewport = new WebMercatorViewport(); - this.viewport.syncWithMapCamera(option as any); - this.updateCoordinateSystemService(); - this.cameraChangedCallback(this.viewport); - }; + protected evtCbProxyMap: Map any, (...args: any) => any>> = + new Map(); public async init(): Promise { - this.viewport = new Viewport(); - // TODO: Handle initial config const { id, mapInstance, center = [121.30654632240122, 31.25744185633306], token = TMAP_API_KEY, - version = BMAP_VERSION, + version = VERSION, libraries = [], minZoom = 3, maxZoom = 18, rotation = 0, pitch = 0, - mapSize = 10000, logoVisible = true, ...rest } = this.config; @@ -92,8 +61,9 @@ export default class TMapService extends BaseMapService { if (mapInstance) { // If there's already a map instance, maybe not setting any other configurations - this.map = mapInstance as any; - this.$mapContainer = this.map.getContainer(); + this.map = mapInstance; + // @ts-ignore + this.mapContainer = this.map.getContainer(); if (logoVisible === false) { this.hideLogo(); } @@ -101,7 +71,7 @@ export default class TMapService extends BaseMapService { if (!id) { throw Error('No container id specified'); } - const mapContainer = DOM.getContainer(id)!; + const mapContainer = this.creatMapContainer(id); const map = new TMap.Map(mapContainer, { maxZoom, @@ -117,7 +87,7 @@ export default class TMapService extends BaseMapService { // @ts-ignore this.map = map; // @ts-ignore - this.$mapContainer = map.getContainer(); + this.mapContainer = map.getContainer(); if (logoVisible === false) { this.hideLogo(); } @@ -136,8 +106,6 @@ export default class TMapService extends BaseMapService { controlParentContainer.style.zIndex = 2; } - this.simpleMapCoord.setSize(mapSize); - // May be find an integrated event replacing following events this.map.on('drag', this.handleCameraChanged); this.map.on('pan', this.handleCameraChanged); @@ -149,15 +117,60 @@ export default class TMapService extends BaseMapService { this.handleCameraChanged(); } - public destroy(): void { - this.map.destroy(); + public handleCameraChanged = () => { + const map = this.map; + const { lng, lat } = map.getCenter(); + const center: [number, number] = [lng, lat]; + const option = { + center, + // @ts-ignore + viewportHeight: map.getContainer().clientHeight, + // @ts-ignore + viewportWidth: map.getContainer().clientWidth, + // @ts-ignore + bearing: map.getHeading(), + pitch: map.getPitch(), + zoom: map.getZoom() - 1, + }; + + this.updateView(option); + }; + + protected creatMapContainer(id: string | HTMLDivElement) { + const wrapper = super.creatMapContainer(id); + const amapdiv = document.createElement('div'); + amapdiv.style.cssText += ` + position: absolute; + top: 0; + height: 100%; + width: 100%; + `; + amapdiv.id = 'l7_tmap_div'; + wrapper.appendChild(amapdiv); + return amapdiv; + } + + public getContainer(): HTMLElement | null { + // @ts-ignore + return this.map.getContainer(); + } + + public getMapContainer(): HTMLElement { + // @ts-ignore + return this.map.getContainer(); + } + + public getMapCanvasContainer(): HTMLElement { + // @ts-ignore + return this.map.getContainer()?.getElementsByTagName('canvas')[0]; } - public onCameraChanged(callback: (viewport: IViewport) => void): void { - this.cameraChangedCallback = callback; + public getCanvasOverlays() { + return this.getMapCanvasContainer()?.nextSibling?.firstChild as HTMLElement; } public addMarkerContainer(): void { + // @ts-ignore const container = this.map.getContainer(); this.markerContainer = DOM.create('div', 'l7-marker-container', container); this.markerContainer.setAttribute('tabindex', '-1'); @@ -195,12 +208,13 @@ export default class TMapService extends BaseMapService { this.map.on(eventName, handleProxy); }; - if (Array.isArray(EventMap[type])) { - EventMap[type].forEach((eventName: string) => { + const event = MapEvent[type]; + if (Array.isArray(event)) { + event.forEach((eventName: string) => { onProxy(eventName || type); }); } else { - onProxy(EventMap[type] || type); + onProxy(event || type); } } } @@ -220,12 +234,13 @@ export default class TMapService extends BaseMapService { this.map.off(eventName, handleProxy); }; - if (Array.isArray(EventMap[type])) { - EventMap[type].forEach((eventName: string) => { + const event = MapEvent[type]; + if (Array.isArray(event)) { + event.forEach((eventName: string) => { offProxy(eventName || type); }); } else { - offProxy(EventMap[type] || type); + offProxy(event || type); } } @@ -233,17 +248,11 @@ export default class TMapService extends BaseMapService { throw new Error('Method not implemented.'); } - // get dom - public getContainer(): HTMLElement | null { - return this.map.getContainer(); - } - public getSize(): [number, number] { // @ts-ignore return [this.map.width, this.map.height]; } - // get map status method public getMinZoom(): number { // @ts-ignore return this.map.transform._minZoom; @@ -254,14 +263,10 @@ export default class TMapService extends BaseMapService { return this.map.transform._maxZoom; } - // get map params - public getType() { - return 'tmap'; - } - public getZoom(): number { return this.map.getZoom(); } + public getCenter(): ILngLat { const { lng, lat } = this.map.getCenter(); return { @@ -269,6 +274,7 @@ export default class TMapService extends BaseMapService { lat, }; } + public getPitch(): number { return this.map.getPitch(); } @@ -286,23 +292,14 @@ export default class TMapService extends BaseMapService { ]; } - public getMapContainer(): HTMLElement { - return this.map.getContainer(); - } - - public getMapCanvasContainer(): HTMLElement { - return this.map.getContainer()?.getElementsByTagName('canvas')[0]; - } - - public getCanvasOverlays() { - return this.getMapCanvasContainer()?.nextSibling?.firstChild as HTMLElement; - } - public getMapStyleConfig(): MapStyleConfig { - // return this.getMap() throw new Error('Method not implemented.'); } + public getMapStyle() { + return ''; + } + public setBgColor(color: string): void { this.bgColor = color; } @@ -311,7 +308,6 @@ export default class TMapService extends BaseMapService { this.map.setMapStyleId(styleId); } - // control with raw map public setRotation(rotation: number): void { this.map.setRotation(rotation); } @@ -329,6 +325,7 @@ export default class TMapService extends BaseMapService { } public panBy(x: number, y: number): void { + // @ts-expect-error this.map.panBy([x, y]); } @@ -358,6 +355,16 @@ export default class TMapService extends BaseMapService { this.map.setZoom(zoom); } + // eslint-disable-next-line @typescript-eslint/no-unused-vars + public setMaxZoom(max: number): void { + throw new Error('Method not implemented.'); + } + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + public setMinZoom(min: number): void { + throw new Error('Method not implemented.'); + } + public setMapStatus(option: Partial): void { (Object.keys(option) as Array).map((status) => { switch (status) { @@ -384,7 +391,6 @@ export default class TMapService extends BaseMapService { }); } - // coordinates methods public meterToCoord( [centerLon, centerLat]: [number, number], [outerLon, outerLat]: [number, number], @@ -394,9 +400,9 @@ export default class TMapService extends BaseMapService { new TMap.LatLng(outerLat, outerLon), ]); - const [x1, y1] = this.lngLatToCoord!([centerLon, centerLat]); - const [x2, y2] = this.lngLatToCoord!([outerLon, outerLat]); - const coordDistance = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)); + const { x: x1, y: y1 } = this.lngLatToPixel!([centerLon, centerLat]); + const { x: x2, y: y2 } = this.lngLatToPixel!([outerLon, outerLat]); + const coordDistance = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(-y1 + y2, 2)); return coordDistance / metreDistance; } @@ -430,23 +436,9 @@ export default class TMapService extends BaseMapService { return { x, y }; } - public lngLatToCoord?([lng, lat]: [number, number]): [number, number] { - // TODO: Perhaps need to check the three.js coordinates - const { x, y } = this.lngLatToPixel([lng, lat]); - return [x, -y]; - } - - public lngLatToCoords?(list: number[][] | number[][][]): any { - return list.map((item) => - Array.isArray(item[0]) - ? this.lngLatToCoords!(item as Array<[number, number]>) - : this.lngLatToCoord!(item as [number, number]), - ); - } - public lngLatToMercator(lnglat: [number, number], altitude: number): IMercator { // Use built in mercator tools due to Tencent not provided related methods - const { x = 0, y = 0, z = 0 } = MercatorCoordinate.fromLngLat(lnglat, altitude); + const { x = 0, y = 0, z = 0 } = lngLatToMercator(lnglat, altitude); return { x, y, z }; } @@ -470,10 +462,6 @@ export default class TMapService extends BaseMapService { return modelMatrix as unknown as number[]; } - public getCustomCoordCenter?(): [number, number] { - throw new Error('Method not implemented.'); - } - public exportMap(type: 'jpg' | 'png'): string { const renderCanvas = this.getMapCanvasContainer() as HTMLCanvasElement; const layersPng = @@ -483,16 +471,23 @@ export default class TMapService extends BaseMapService { return layersPng; } - // Method on earth mode - public rotateY?(): void { - throw new Error('Method not implemented.'); - } - private hideLogo() { + // @ts-ignore const container = this.map.getContainer(); if (!container) { return; } DOM.addClass(container, 'tmap-contianer--hide-logo'); } + + public destroy(): void { + super.destroy(); + // 销毁地图可视化层的容器 + this.mapContainer?.parentNode?.removeChild(this.mapContainer); + + if (this.map) { + this.map.destroy(); + this.mapContainer = null; + } + } } diff --git a/packages/maps/src/tmap/maploader.ts b/extensions/extension-maps/src/tmap/maploader.ts similarity index 99% rename from packages/maps/src/tmap/maploader.ts rename to extensions/extension-maps/src/tmap/maploader.ts index 7e8d9a8ffa2..eeca4861500 100644 --- a/packages/maps/src/tmap/maploader.ts +++ b/extensions/extension-maps/src/tmap/maploader.ts @@ -1,4 +1,3 @@ -/* eslint-disable */ if (!window) { throw Error('TMap JSAPI can only be used in Browser.'); } diff --git a/extensions/extension-maps/src/utils/index.ts b/extensions/extension-maps/src/utils/index.ts new file mode 100644 index 00000000000..209b501a7f4 --- /dev/null +++ b/extensions/extension-maps/src/utils/index.ts @@ -0,0 +1,78 @@ +export type Padding = + | number + | [number, number, number, number] + | { + top?: number; + bottom?: number; + right?: number; + left?: number; + }; + +export function toPaddingOptions(padding: Padding = {}) { + const defaultPadding = { + top: 0, + right: 0, + bottom: 0, + left: 0, + }; + if (typeof padding === 'number') { + return { + top: padding, + right: padding, + bottom: padding, + left: padding, + }; + } + if (Array.isArray(padding)) { + if (padding.length === 4) { + return { + top: padding[0], + right: padding[1], + bottom: padding[2], + left: padding[3], + }; + } + if (padding.length === 2) { + return { + top: padding[0], + right: padding[1], + bottom: padding[0], + left: padding[1], + }; + } + } + + return { ...defaultPadding, ...padding }; +} + +export function lngLatToMercator(lnglat: [number, number], altitude: number) { + const mercatorXfromLng = (lng: number) => { + return (180 + lng) / 360; + }; + + const mercatorYfromLat = (lat: number) => { + return (180 - (180 / Math.PI) * Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360))) / 360; + }; + + const mercatorZfromAltitude = (altitude: number, lat: number) => { + /* + * The circumference at a line of latitude in meters. + */ + const circumferenceAtLatitude = (latitude: number) => { + const earthRadius = 6371008.8; + /* + * The average circumference of the world in meters. + */ + const earthCircumfrence = 2 * Math.PI * earthRadius; // meters + return earthCircumfrence * Math.cos((latitude * Math.PI) / 180); + }; + + return altitude / circumferenceAtLatitude(lat); + }; + + const x = mercatorXfromLng(lnglat[0]); + const y = mercatorYfromLat(lnglat[1]); + const z = mercatorZfromAltitude(altitude, lnglat[1]); + + return { x, y, z }; +} diff --git a/extensions/extension-maps/style.d.ts b/extensions/extension-maps/style.d.ts new file mode 100644 index 00000000000..f2fcb611590 --- /dev/null +++ b/extensions/extension-maps/style.d.ts @@ -0,0 +1,8 @@ +declare module '*.css' { + const classes: { readonly [key: string]: string }; + export default classes; +} +declare module '*.less' { + const classes: { readonly [key: string]: string }; + export default classes; +} diff --git a/extensions/extension-maps/tsconfig.json b/extensions/extension-maps/tsconfig.json new file mode 100644 index 00000000000..d1eb80449f9 --- /dev/null +++ b/extensions/extension-maps/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "types": [ + "@types/amap-js-api", + "@types/bmapgl", + "@types/google.maps", + "@map-component/tmap-types" + ] + } +} diff --git a/packages/component/__tests__/mapTheme.spec.ts b/packages/component/__tests__/mapTheme.spec.ts index 47c1516fb67..10a8ae10eb2 100644 --- a/packages/component/__tests__/mapTheme.spec.ts +++ b/packages/component/__tests__/mapTheme.spec.ts @@ -22,16 +22,7 @@ describe('mapTheme', () => { scene.addControl(control); const options = control.getOptions().options; - expect(options.length).toBeGreaterThan(0); - expect(control.getSelectValue()).toEqual('mapbox://styles/mapbox/streets-v11'); - - const optionList = (control.getPopper().getContent() as HTMLDivElement).querySelectorAll( - '.l7-select-control-item', - ) as unknown as HTMLDivElement[]; - optionList[1].click(); - - // expect(control.getSelectValue()).toEqual( - // 'mapbox://styles/zcxduo/ck2ypyb1r3q9o1co1766dex29', - // ); + expect(options.length).toEqual(0); + expect(control.getSelectValue()).toEqual('normal'); }); }); diff --git a/packages/component/src/control/mapTheme.ts b/packages/component/src/control/mapTheme.ts index 588ec89f135..dc2ccd4f5a3 100644 --- a/packages/component/src/control/mapTheme.ts +++ b/packages/component/src/control/mapTheme.ts @@ -16,8 +16,9 @@ export default class MapTheme extends SelectControl { } public getStyleOptions(): ControlOptionItem[] { - const mapStyleConfig = - this.mapsService.getType() === 'mapbox' ? MapboxMapStyleConfig : GaodeMapStyleConfig; + const mapStyleConfig = ['Mapbox', 'Maplibre'].includes(this.mapsService.type) + ? MapboxMapStyleConfig + : GaodeMapStyleConfig; return Object.entries(this.mapsService.getMapStyleConfig()) .filter(([key, value]) => typeof value === 'string' && key !== 'blank') .map(([key, value]) => { diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts index 33e37363e77..e55e36977cc 100644 --- a/packages/component/src/marker.ts +++ b/packages/component/src/marker.ts @@ -437,7 +437,7 @@ export default class Marker extends EventEmitter { */ private touchStartTime: number; private polyfillEvent(e: MouseEvent | TouchEvent) { - if (!this.mapsService || this.mapsService.getType() !== 'amap') { + if (!this.mapsService || this.mapsService.type !== 'AMap') { return; } if (!isPC()) { diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 4a9e0ecc92c..ebbc3bd611d 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,6 +1,6 @@ -import BasePostProcessingPass from './services/renderer/passes/BasePostProcessingPass'; -import { removeDuplicateUniforms } from './utils/shader-module'; -import { packCircleVertex } from './utils/vertex-compression'; +export { default as BasePostProcessingPass } from './services/renderer/passes/BasePostProcessingPass'; +export { removeDuplicateUniforms } from './utils/shader-module'; +export { packCircleVertex } from './utils/vertex-compression'; export * from './services/asset/IFontService'; export * from './services/asset/IIconService'; @@ -34,4 +34,7 @@ export * from './services/renderer/IUniform'; export * from './services/scene/ISceneService'; export * from './services/shader/IShaderModuleService'; export * from './services/source/ISourceService'; -export { BasePostProcessingPass, packCircleVertex, removeDuplicateUniforms }; +/** 地图类基类 */ +export * from './services/map/base-map'; +export * from './services/map/base-map-wrapper'; +export * from './services/map/web-mercator-viewport'; diff --git a/packages/core/src/services/config/IConfigService.ts b/packages/core/src/services/config/IConfigService.ts index e53d18535d0..15887032ae9 100644 --- a/packages/core/src/services/config/IConfigService.ts +++ b/packages/core/src/services/config/IConfigService.ts @@ -16,10 +16,6 @@ export interface ISceneConfig extends IRenderConfig { // TODO: 场景是否支持 stencil mask stencil?: boolean; debug?: boolean; - /** - * Support regl & @antv/g-device-api now - */ - renderer?: 'regl' | 'device'; } export interface IGlobalConfigService { diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index 9090c42b6eb..bcd22ca34e1 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -147,9 +147,9 @@ export default class PickingService implements IPickingService { public handleCursor(layer: ILayer, type: string) { const { cursor = '', cursorEnabled } = layer.getLayerConfig(); if (cursorEnabled) { - const mapType = this.mapService.getType(); + const mapType = this.mapService.type; const domContainer = - mapType === 'amap' + mapType === 'AMap' ? this.mapService.getMapContainer() : this.mapService.getMarkerContainer(); // const domContainer = this.mapService.getMarkerContainer(); diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts index 8d0789bd584..51829fa5c68 100644 --- a/packages/core/src/services/map/IMapService.ts +++ b/packages/core/src/services/map/IMapService.ts @@ -37,17 +37,10 @@ export interface IMapWrapper { setContainer(container: L7Container, id: string | HTMLDivElement): void; } -interface ISimpleMapCoord { - setSize(size: number): void; - getSize(): [number, number]; - project(lnglat: [number, number]): [number, number]; - unproject(xy: [number, number]): [number, number]; -} - export interface IMapService { - version?: string; - simpleMapCoord: ISimpleMapCoord; map: RawMap; + type: string; + version?: string; bgColor: string; setBgColor(color: string): void; init(): void; @@ -70,7 +63,6 @@ export interface IMapService { getMinZoom(): number; getMaxZoom(): number; // get map params - getType(): string; getZoom(): number; getCenter(option?: ICameraOptions): ILngLat; getPitch(): number; @@ -131,7 +123,6 @@ export interface IMapService { } export interface IEarthService { - version?: string; map: RawMap; bgColor: string; setBgColor(color: string): void; @@ -153,7 +144,6 @@ export interface IEarthService { getMinZoom(): number; getMaxZoom(): number; // get map params - getType(): string; getZoom(): number; getCenter(option?: ICameraOptions): ILngLat; getPitch(): number; diff --git a/packages/maps/src/utils/BaseMapWrapper.ts b/packages/core/src/services/map/base-map-wrapper.ts similarity index 56% rename from packages/maps/src/utils/BaseMapWrapper.ts rename to packages/core/src/services/map/base-map-wrapper.ts index 4bd45c65d18..0002f66a5b7 100644 --- a/packages/maps/src/utils/BaseMapWrapper.ts +++ b/packages/core/src/services/map/base-map-wrapper.ts @@ -1,11 +1,12 @@ -import type { - IGlobalConfigService, - IMapConfig, - IMapService, - IMapWrapper, - L7Container, -} from '@antv/l7-core'; -export default class BaseMapWrapper implements IMapWrapper { +import type { L7Container } from '../../inversify.config'; +import type { IGlobalConfigService } from '../config/IConfigService'; +import type { IMapConfig, IMapWrapper } from './IMapService'; +import type { BaseMapService } from './base-map'; + +/** + * BaseMapWrapper + */ +export class BaseMapWrapper implements IMapWrapper { protected configService: IGlobalConfigService; protected config: Partial; @@ -24,7 +25,7 @@ export default class BaseMapWrapper implements IMapWrapper { sceneContainer.mapService = new (this.getServiceConstructor())(sceneContainer); } - protected getServiceConstructor(): new (...args: any[]) => IMapService { + protected getServiceConstructor(): new (...args: any[]) => BaseMapService { throw new Error('Method not implemented.'); } } diff --git a/packages/maps/src/lib/base-map.ts b/packages/core/src/services/map/base-map.ts similarity index 89% rename from packages/maps/src/lib/base-map.ts rename to packages/core/src/services/map/base-map.ts index cc4865b5ab5..76437d0c48d 100644 --- a/packages/maps/src/lib/base-map.ts +++ b/packages/core/src/services/map/base-map.ts @@ -1,7 +1,12 @@ +import type { EventEmitterStatic } from 'eventemitter3'; +import { EventEmitter } from 'eventemitter3'; +import type { L7Container } from '../../inversify.config'; +import type { IViewport } from '../camera/ICameraService'; +import type { IGlobalConfigService } from '../config/IConfigService'; +import type { ICoordinateSystemService } from '../coordinate/ICoordinateSystemService'; +import { CoordinateSystem } from '../coordinate/ICoordinateSystemService'; import type { Bounds, - ICoordinateSystemService, - IGlobalConfigService, ILngLat, IMapCamera, IMapConfig, @@ -9,29 +14,24 @@ import type { IMercator, IPoint, IStatusOptions, - IViewport, - L7Container, MapStyleConfig, MapStyleName, -} from '@antv/l7-core'; -import { CoordinateSystem } from '@antv/l7-core'; -import type { EventEmitterStatic } from 'eventemitter3'; -import { EventEmitter } from 'eventemitter3'; -import { SimpleMapCoord } from '../utils/simpleMapCoord'; +} from './IMapService'; const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12; -export default abstract class BaseMap implements IMapService { +/** + * BaseMapService + */ +export abstract class BaseMapService implements IMapService { /** * 地图实例 */ public map: T; - /** - * @deprecated - * TODO: 基类型不需要实现，只是自定义 Map 使用非地理坐标系才会用到 + * 地图类型 */ - public simpleMapCoord = new SimpleMapCoord(); + public abstract type: string; /** * 背景色 @@ -94,15 +94,15 @@ export default abstract class BaseMap implements IMapService { } protected creatMapContainer(id: string | HTMLDivElement) { - let $wrapper: HTMLDivElement; + let wrapper: HTMLDivElement; if (typeof id === 'string') { - $wrapper = document.getElementById(id) as HTMLDivElement; + wrapper = document.getElementById(id) as HTMLDivElement; } else { - $wrapper = id; + wrapper = id; } - return $wrapper; + return wrapper; } public abstract getMapStyle(): string; @@ -113,8 +113,6 @@ export default abstract class BaseMap implements IMapService { return this.getMapStyleConfig()[name] ?? name; } - public abstract getType(): string; - public setBgColor(color: string) { this.bgColor = color; } @@ -145,14 +143,14 @@ export default abstract class BaseMap implements IMapService { public abstract off(type: string, handle: (...args: any[]) => void): void; - public emit(name: string, ...args: any[]) { - this.eventEmitter.emit(name, ...args); - } - public once(name: string, handler: (...args: any[]) => void) { this.eventEmitter.once(name, handler); } + public emit(name: string, ...args: any[]) { + this.eventEmitter.emit(name, ...args); + } + public abstract getSize(): [number, number]; public abstract getZoom(): number; diff --git a/packages/maps/src/lib/web-mercator-viewport.ts b/packages/core/src/services/map/web-mercator-viewport.ts similarity index 84% rename from packages/maps/src/lib/web-mercator-viewport.ts rename to packages/core/src/services/map/web-mercator-viewport.ts index f80e3f1d045..5a123d40b50 100644 --- a/packages/maps/src/lib/web-mercator-viewport.ts +++ b/packages/core/src/services/map/web-mercator-viewport.ts @@ -1,8 +1,9 @@ -import type { IMapCamera, IViewport } from '@antv/l7-core'; -import WebMercatorViewport from 'viewport-mercator-project'; +import { default as WMViewport } from 'viewport-mercator-project'; +import type { IViewport } from '../camera/ICameraService'; +import type { IMapCamera } from './IMapService'; -export default class Viewport implements IViewport { - public viewport = new WebMercatorViewport(); +export class WebMercatorViewport implements IViewport { + public viewport = new WMViewport(); public syncWithMapCamera(mapCamera: Partial) { const { center, zoom, pitch, bearing, viewportHeight, viewportWidth } = mapCamera; @@ -17,7 +18,7 @@ export default class Viewport implements IViewport { bearing: this.viewport.bearing, }; - this.viewport = new WebMercatorViewport({ + this.viewport = new WMViewport({ ...preView, width: viewportWidth, height: viewportHeight, diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 725f226459e..d3c126b9c19 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -140,7 +140,7 @@ export default class Scene extends EventEmitter implements ISceneService { */ this.hooks.init.tapPromise('initMap', async () => { this.debugService.log('map.mapInitStart', { - type: this.map.version, + type: this.map.type, }); // 等待首次相机同步 await new Promise((resolve) => { diff --git a/packages/layers/src/geometry/models/billboard.ts b/packages/layers/src/geometry/models/billboard.ts index 56c848b6f82..cc14d066730 100644 --- a/packages/layers/src/geometry/models/billboard.ts +++ b/packages/layers/src/geometry/models/billboard.ts @@ -63,7 +63,7 @@ export default class BillBoardModel extends BaseModel { * AMAP -1 */ let rotateFlag = 1; - if (this.mapService.getType() === 'amap') { + if (this.mapService.type === 'AMap') { rotateFlag = -1; } // 控制图标的旋转角度（绕 Z 轴旋转） diff --git a/packages/layers/src/line/models/arc_3d.ts b/packages/layers/src/line/models/arc_3d.ts index 11145b879f4..25125a59e10 100644 --- a/packages/layers/src/line/models/arc_3d.ts +++ b/packages/layers/src/line/models/arc_3d.ts @@ -73,7 +73,7 @@ export default class Arc3DModel extends BaseModel { u_sourceColor: sourceColorArr, u_targetColor: targetColorArr, u_textSize: [1024, this.iconService.canvasHeight || 128], - u_globel: this.mapService.version === 'GLOBEL' ? 1 : 0, + u_globel: this.mapService.type === 'Globel' ? 1 : 0, u_globel_radius: EARTH_RADIUS, // 地球半径 u_global_height: globalArcHeight, segmentNumber, diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts index a052d253970..08da655e2fb 100644 --- a/packages/layers/src/plugins/DataMappingPlugin.ts +++ b/packages/layers/src/plugins/DataMappingPlugin.ts @@ -157,7 +157,11 @@ export default class DataMappingPlugin implements ILayerPlugin { } private adjustData2SimpleCoordinates(mappedData: IEncodeFeature[]) { - if (mappedData.length > 0 && this.mapService.version === 'SIMPLE') { + if ( + mappedData.length > 0 && + this.mapService.type === 'Map' && + this.mapService?.version === 'SIMPLE' + ) { mappedData.map((d) => { if (!d.simpleCoordinate) { d.coordinates = this.unProjectCoordinates(d.coordinates); @@ -168,7 +172,9 @@ export default class DataMappingPlugin implements ILayerPlugin { } private unProjectCoordinates(coordinates: any) { - if (typeof coordinates[0] === 'number') { + // @ts-ignore + if (typeof coordinates[0] === 'number' && this.mapService['simpleMapCoord']) { + // @ts-ignore return this.mapService.simpleMapCoord.unproject(coordinates as [number, number]); } @@ -179,6 +185,7 @@ export default class DataMappingPlugin implements ILayerPlugin { // @ts-ignore const c1 = []; coord.map((co: any) => { + // @ts-ignore c1.push(this.mapService.simpleMapCoord.unproject(co as [number, number])); }); // @ts-ignore @@ -191,6 +198,7 @@ export default class DataMappingPlugin implements ILayerPlugin { const coords = []; // @ts-ignore coordinates.map((coord) => { + // @ts-ignore coords.push(this.mapService.simpleMapCoord.unproject(coord as [number, number])); }); // @ts-ignore diff --git a/packages/layers/src/point/index.ts b/packages/layers/src/point/index.ts index 56b1385d615..27f11a3c5f0 100644 --- a/packages/layers/src/point/index.ts +++ b/packages/layers/src/point/index.ts @@ -108,14 +108,14 @@ export default class PointLayer extends BaseLayer { return 'fillImage'; } if (shape2d?.indexOf(shape as string) !== -1) { - if (this.mapService.version === 'GLOBEL') { + if (this.mapService.type === 'Globel') { return 'earthFill'; } else { return 'fill'; } } if (shape3d?.indexOf(shape as string) !== -1) { - if (this.mapService.version === 'GLOBEL') { + if (this.mapService.type === 'Globel') { return 'earthExtrude'; } else { return 'extrude'; diff --git a/packages/map/legacy/camera.ts b/packages/map/legacy/camera.ts deleted file mode 100644 index 5e99bba3f8c..00000000000 --- a/packages/map/legacy/camera.ts +++ /dev/null @@ -1,852 +0,0 @@ -// @ts-ignore -import { lodashUtil } from '@antv/l7-utils'; -import { EventEmitter } from 'eventemitter3'; -import type { IPaddingOptions } from './geo/edge_insets'; -import type { LngLatLike } from './geo/lng_lat'; -import LngLat from './geo/lng_lat'; -import type { LngLatBoundsLike } from './geo/lng_lat_bounds'; -import LngLatBounds from './geo/lng_lat_bounds'; -import type { PointLike } from './geo/point'; -import Point from './geo/point'; -import Transform from './geo/transform'; -import { Event } from './handler/events/event'; -import type { IMapOptions } from './interface'; -import { - clamp, - ease as defaultEasing, - extend, - interpolate, - now, - pick, - prefersReducedMotion, - wrap, -} from './util'; -const { merge } = lodashUtil; -type CallBack = (_: number) => void; - -export interface ICameraOptions { - center?: LngLatLike; - zoom?: number; - bearing?: number; - pitch?: number; - around?: LngLatLike; - padding?: IPaddingOptions; -} - -export interface IAnimationOptions { - duration?: number; - easing?: (_: number) => number; - offset?: PointLike; - animate?: boolean; - essential?: boolean; - linear?: boolean; -} - -export default class Camera extends EventEmitter { - public transform: Transform; - // public requestRenderFrame: (_: any) => number; - // public cancelRenderFrame: (_: number) => void; - protected options: IMapOptions; - protected moving: boolean; - protected zooming: boolean; - protected rotating: boolean; - protected pitching: boolean; - protected padding: boolean; - - private bearingSnap: number; - private easeEndTimeoutID: number; - private easeStart: number; - private easeOptions: { - duration: number; - easing: (_: number) => number; - }; - private easeId: string | void; - private onEaseFrame: (_: number) => void; - private onEaseEnd: (easeId?: string) => void; - private easeFrameId: number; - private pitchEnabled: boolean; - private rotateEnabled: boolean; - - constructor(options: IMapOptions) { - super(); - this.options = options; - const { minZoom, maxZoom, minPitch, maxPitch, renderWorldCopies } = options; - this.moving = false; - this.zooming = false; - this.bearingSnap = options.bearingSnap; - this.pitchEnabled = options.pitchEnabled; - this.rotateEnabled = options.rotateEnabled; - this.transform = new Transform(minZoom, maxZoom, minPitch, maxPitch, renderWorldCopies); - } - // eslint-disable-next-line @typescript-eslint/no-unused-vars - public requestRenderFrame(cb: CallBack): number { - return 0; - } - // eslint-disable-next-line @typescript-eslint/no-unused-vars - public cancelRenderFrame(_: number): void { - return; - } - - public getCenter() { - const { lng, lat } = this.transform.center; - return new LngLat(lng, lat); - } - - public getZoom(): number { - return this.transform.zoom; - } - - public getPitch(): number { - return this.transform.pitch; - } - - public setCenter(center: LngLatLike, eventData?: any) { - return this.jumpTo({ center }, eventData); - } - - public setPitch(pitch: number, eventData?: any) { - this.jumpTo({ pitch }, eventData); - return this; - } - - public getBearing(): number { - return this.transform.bearing; - } - - public panTo(lnglat: LngLatLike, options?: IAnimationOptions, eventData?: any) { - return this.easeTo( - merge( - { - center: lnglat, - }, - options, - ), - eventData, - ); - } - - public panBy(offset: PointLike, options?: IAnimationOptions, eventData?: any) { - offset = Point.convert(offset).mult(-1); - return this.panTo(this.transform.center, extend({ offset }, options || {}), eventData); - } - public zoomOut(options?: IAnimationOptions, eventData?: any) { - this.zoomTo(this.getZoom() - 1, options, eventData); - return this; - } - - public setBearing(bearing: number, eventData?: any) { - this.jumpTo({ bearing }, eventData); - return this; - } - public setZoom(zoom: number, eventData?: any) { - this.jumpTo({ zoom }, eventData); - return this; - } - - public zoomIn(options?: IAnimationOptions, eventData?: any) { - this.zoomTo(this.getZoom() + 1, options, eventData); - return this; - } - - public zoomTo(zoom: number, options?: IAnimationOptions, eventData?: any) { - return this.easeTo( - merge( - { - zoom, - }, - options, - ), - eventData, - ); - } - - public getPadding(): IPaddingOptions { - return this.transform.padding; - } - - public setPadding(padding: IPaddingOptions, eventData?: any) { - this.jumpTo({ padding }, eventData); - return this; - } - - public rotateTo(bearing: number, options?: IAnimationOptions, eventData?: any) { - return this.easeTo( - merge( - { - bearing, - }, - options, - ), - eventData, - ); - } - - public resetNorth(options?: IAnimationOptions, eventData?: any) { - this.rotateTo(0, merge({ duration: 1000 }, options), eventData); - return this; - } - - public resetNorthPitch(options?: IAnimationOptions, eventData?: any) { - this.easeTo( - merge( - { - bearing: 0, - pitch: 0, - duration: 1000, - }, - options, - ), - eventData, - ); - return this; - } - public fitBounds( - bounds: LngLatBoundsLike, - options?: IAnimationOptions & ICameraOptions, - eventData?: any, - ) { - return this.fitInternal( - // @ts-ignore - this.cameraForBounds(bounds, options), - options, - eventData, - ); - } - public cameraForBounds( - bounds: LngLatBoundsLike, - options?: ICameraOptions, - ): void | (ICameraOptions & IAnimationOptions) { - bounds = LngLatBounds.convert(bounds); - return this.cameraForBoxAndBearing( - bounds.getNorthWest(), - bounds.getSouthEast(), - 0, - // @ts-ignore - options, - ); - } - - public snapToNorth(options?: IAnimationOptions, eventData?: any) { - if (Math.abs(this.getBearing()) < this.bearingSnap) { - return this.resetNorth(options, eventData); - } - return this; - } - - public jumpTo(options: ICameraOptions = {}, eventData?: any) { - this.stop(); - - const tr = this.transform; - let zoomChanged = false; - let bearingChanged = false; - let pitchChanged = false; - - if (options.zoom !== undefined && tr.zoom !== +options.zoom) { - zoomChanged = true; - tr.zoom = +options.zoom; - } - - if (options.center !== undefined) { - tr.center = LngLat.convert(options.center); - } - - if (options.bearing !== undefined && tr.bearing !== +options.bearing) { - bearingChanged = true; - tr.bearing = +options.bearing; - } - if (options.pitch !== undefined && tr.pitch !== +options.pitch) { - pitchChanged = true; - tr.pitch = +options.pitch; - } - - if (options.padding !== undefined && !tr.isPaddingEqual(options.padding)) { - tr.padding = options.padding; - } - - this.emit('movestart', new Event('movestart', eventData)); - this.emit('move', new Event('move', eventData)); - - if (zoomChanged) { - this.emit('zoomstart', new Event('zoomstart', eventData)); - this.emit('zoom', new Event('zoom', eventData)); - this.emit('zoomend', new Event('zoomend', eventData)); - } - - if (bearingChanged) { - this.emit('rotatestart', new Event('rotatestart', eventData)); - this.emit('rotate', new Event('rotate', eventData)); - this.emit('rotateend', new Event('rotateend', eventData)); - } - - if (pitchChanged) { - this.emit('pitchstart', new Event('pitchstart', eventData)); - this.emit('pitch', new Event('pitch', eventData)); - this.emit('pitchend', new Event('pitchend', eventData)); - } - - return this.emit('moveend', new Event('moveend', eventData)); - } - - public easeTo( - options: ICameraOptions & IAnimationOptions & { easeId?: string; noMoveStart?: boolean } = {}, - eventData?: any, - ) { - options = merge( - { - offset: [0, 0], - duration: 500, - easing: defaultEasing, - }, - options, - ); - - if (options.animate === false || (!options.essential && prefersReducedMotion())) { - options.duration = 0; - } - - const tr = this.transform; - const startZoom = this.getZoom(); - const startBearing = this.getBearing(); - const startPitch = this.getPitch(); - const startPadding = this.getPadding(); - - const zoom = options.zoom ? +options.zoom : startZoom; - const bearing = options.bearing - ? this.normalizeBearing(options.bearing, startBearing) - : startBearing; - const pitch = options.pitch ? +options.pitch : startPitch; - const padding = options.padding ? options.padding : tr.padding; - - const offsetAsPoint = Point.convert(options.offset); - let pointAtOffset = tr.centerPoint.add(offsetAsPoint); - const locationAtOffset = tr.pointLocation(pointAtOffset); - const center = LngLat.convert(options.center || locationAtOffset); - this.normalizeCenter(center); - - const from = tr.project(locationAtOffset); - const delta = tr.project(center).sub(from); - const finalScale = tr.zoomScale(zoom - startZoom); - - let around: LngLat; - let aroundPoint: Point; - - if (options.around) { - around = LngLat.convert(options.around); - aroundPoint = tr.locationPoint(around); - } - - const currently = { - moving: this.moving, - zooming: this.zooming, - rotating: this.rotating, - pitching: this.pitching, - }; - - this.zooming = this.zooming || zoom !== startZoom; - this.rotating = this.rotating || startBearing !== bearing; - this.pitching = this.pitching || pitch !== startPitch; - this.padding = !tr.isPaddingEqual(padding); - - this.easeId = options.easeId; - this.prepareEase(eventData, options.noMoveStart, currently); - - clearTimeout(this.easeEndTimeoutID); - - this.ease( - (k) => { - if (this.zooming) { - tr.zoom = interpolate(startZoom, zoom, k); - } - if (this.rotating && this.rotateEnabled) { - tr.bearing = interpolate(startBearing, bearing, k); - } - if (this.pitching && this.pitchEnabled) { - tr.pitch = interpolate(startPitch, pitch, k); - } - if (this.padding) { - tr.interpolatePadding(startPadding, padding, k); - // When padding is being applied, Transform#centerPoint is changing continously, - // thus we need to recalculate offsetPoint every fra,e - pointAtOffset = tr.centerPoint.add(offsetAsPoint); - } - - if (around) { - tr.setLocationAtPoint(around, aroundPoint); - } else { - const scale = tr.zoomScale(tr.zoom - startZoom); - const base = zoom > startZoom ? Math.min(2, finalScale) : Math.max(0.5, finalScale); - const speedup = Math.pow(base, 1 - k); - const newCenter = tr.unproject(from.add(delta.mult(k * speedup)).mult(scale)); - tr.setLocationAtPoint(tr.renderWorldCopies ? newCenter.wrap() : newCenter, pointAtOffset); - } - - this.fireMoveEvents(eventData); - }, - (interruptingEaseId?: string) => { - this.afterEase(eventData, interruptingEaseId); - }, - // @ts-ignore - options, - ); - - return this; - } - public flyTo(options: any = {}, eventData?: any) { - // Fall through to jumpTo if user has set prefers-reduced-motion - if (!options.essential && prefersReducedMotion()) { - const coercedOptions = pick(options, [ - 'center', - 'zoom', - 'bearing', - 'pitch', - 'around', - ]) as ICameraOptions; - return this.jumpTo(coercedOptions, eventData); - } - - this.stop(); - - options = merge( - { - offset: [0, 0], - speed: 1.2, - curve: 1.42, - easing: defaultEasing, - }, - options, - ); - const tr = this.transform; - const startZoom = this.getZoom(); - const startBearing = this.getBearing(); - const startPitch = this.getPitch(); - const startPadding = this.getPadding(); - - const zoom = options.zoom ? clamp(+options.zoom, tr.minZoom, tr.maxZoom) : startZoom; - const bearing = options.bearing - ? this.normalizeBearing(options.bearing, startBearing) - : startBearing; - const pitch = options.pitch ? +options.pitch : startPitch; - const padding = 'padding' in options ? options.padding : tr.padding; - - const scale = tr.zoomScale(zoom - startZoom); - const offsetAsPoint = Point.convert(options.offset); - let pointAtOffset = tr.centerPoint.add(offsetAsPoint); - const locationAtOffset = tr.pointLocation(pointAtOffset); - const center = LngLat.convert(options.center || locationAtOffset); - this.normalizeCenter(center); - - const from = tr.project(locationAtOffset); - const delta = tr.project(center).sub(from); - - let rho = options.curve; - - // w₀: Initial visible span, measured in pixels at the initial scale. - const w0 = Math.max(tr.width, tr.height); - // w₁: Final visible span, measured in pixels with respect to the initial scale. - const w1 = w0 / scale; - // Length of the flight path as projected onto the ground plane, measured in pixels from - // the world image origin at the initial scale. - const u1 = delta.mag(); - - if ('minZoom' in options) { - const minZoom = clamp(Math.min(options.minZoom, startZoom, zoom), tr.minZoom, tr.maxZoom); - // wm: Maximum visible span, measured in pixels with respect to the initial - // scale. - const wMax = w0 / tr.zoomScale(minZoom - startZoom); - rho = Math.sqrt((wMax / u1) * 2); - } - - // ρ² - const rho2 = rho * rho; - - /** - * rᵢ: Returns the zoom-out factor at one end of the animation. - * - * @param i 0 for the ascent or 1 for the descent. - * @private - */ - function r(i: number) { - const b = - (w1 * w1 - w0 * w0 + (i ? -1 : 1) * rho2 * rho2 * u1 * u1) / - (2 * (i ? w1 : w0) * rho2 * u1); - return Math.log(Math.sqrt(b * b + 1) - b); - } - - function sinh(n: number) { - return (Math.exp(n) - Math.exp(-n)) / 2; - } - function cosh(n: number) { - return (Math.exp(n) + Math.exp(-n)) / 2; - } - function tanh(n: number) { - return sinh(n) / cosh(n); - } - - // r₀: Zoom-out factor during ascent. - const r0 = r(0); - - // w(s): Returns the visible span on the ground, measured in pixels with respect to the - // initial scale. Assumes an angular field of view of 2 arctan ½ ≈ 53°. - let w: (_: number) => number = (s) => { - return cosh(r0) / cosh(r0 + rho * s); - }; - - // u(s): Returns the distance along the flight path as projected onto the ground plane, - // measured in pixels from the world image origin at the initial scale. - let u: (_: number) => number = (s) => { - return (w0 * ((cosh(r0) * tanh(r0 + rho * s) - sinh(r0)) / rho2)) / u1; - }; - - // S: Total length of the flight path, measured in ρ-screenfuls. - let S = (r(1) - r0) / rho; - - // When u₀ = u₁, the optimal path doesn’t require both ascent and descent. - if (Math.abs(u1) < 0.000001 || !isFinite(S)) { - // Perform a more or less instantaneous transition if the path is too short. - if (Math.abs(w0 - w1) < 0.000001) { - return this.easeTo(options, eventData); - } - - const k = w1 < w0 ? -1 : 1; - S = Math.abs(Math.log(w1 / w0)) / rho; - - u = () => { - return 0; - }; - w = (s) => { - return Math.exp(k * rho * s); - }; - } - - if ('duration' in options) { - options.duration = +options.duration; - } else { - const V = 'screenSpeed' in options ? +options.screenSpeed / rho : +options.speed; - options.duration = (1000 * S) / V; - } - - if (options.maxDuration && options.duration > options.maxDuration) { - options.duration = 0; - } - - this.zooming = true; - this.rotating = startBearing !== bearing; - this.pitching = pitch !== startPitch; - this.padding = !tr.isPaddingEqual(padding); - - this.prepareEase(eventData, false); - - this.ease( - (k) => { - // s: The distance traveled along the flight path, measured in ρ-screenfuls. - const s = k * S; - // @ts-ignore - const easeScale = 1 / w(s); - tr.zoom = k === 1 ? zoom : startZoom + tr.scaleZoom(easeScale); - - if (this.rotating) { - tr.bearing = interpolate(startBearing, bearing, k); - } - if (this.pitching) { - tr.pitch = interpolate(startPitch, pitch, k); - } - if (this.padding) { - tr.interpolatePadding(startPadding, padding, k); - // When padding is being applied, Transform#centerPoint is changing continously, - // thus we need to recalculate offsetPoint every frame - pointAtOffset = tr.centerPoint.add(offsetAsPoint); - } - - const newCenter = - k === 1 ? center : tr.unproject(from.add(delta.mult(u(s))).mult(easeScale)); - tr.setLocationAtPoint(tr.renderWorldCopies ? newCenter.wrap() : newCenter, pointAtOffset); - - this.fireMoveEvents(eventData); - }, - () => this.afterEase(eventData), - options, - ); - - return this; - } - public fitScreenCoordinates( - p0: PointLike, - p1: PointLike, - bearing: number, - options?: IAnimationOptions & ICameraOptions, - eventData?: any, - ) { - return this.fitInternal( - // @ts-ignore - this.cameraForBoxAndBearing( - this.transform.pointLocation(Point.convert(p0)), - this.transform.pointLocation(Point.convert(p1)), - bearing, - // @ts-ignore - options, - ), - options, - eventData, - ); - } - public stop(allowGestures?: boolean, easeId?: string) { - if (this.easeFrameId) { - this.cancelRenderFrame(this.easeFrameId); - // @ts-ignore - delete this.easeFrameId; - // @ts-ignore - delete this.onEaseFrame; - } - - if (this.onEaseEnd) { - // The _onEaseEnd function might emit events which trigger new - // animation, which sets a new _onEaseEnd. Ensure we don't delete - // it unintentionally. - const onEaseEnd = this.onEaseEnd; - // @ts-ignore - delete this.onEaseEnd; - onEaseEnd.call(this, easeId); - } - // if (!allowGestures) { - // const handlers = (this: any).handlers; - // if (handlers) handlers.stop(); - // } - return this; - } - public renderFrameCallback = () => { - const t = Math.min((now() - this.easeStart) / this.easeOptions.duration, 1); - this.onEaseFrame(this.easeOptions.easing(t)); - if (t < 1) { - // this.easeFrameId = window.requestAnimationFrame(this.renderFrameCallback); - this.easeFrameId = this.requestRenderFrame(this.renderFrameCallback); - } else { - this.stop(); - } - }; - private normalizeBearing(bearing: number, currentBearing: number) { - bearing = wrap(bearing, -180, 180); - const diff = Math.abs(bearing - currentBearing); - if (Math.abs(bearing - 360 - currentBearing) < diff) { - bearing -= 360; - } - if (Math.abs(bearing + 360 - currentBearing) < diff) { - bearing += 360; - } - return bearing; - } - - private normalizeCenter(center: LngLat) { - const tr = this.transform; - if (!tr.renderWorldCopies || tr.lngRange) { - return; - } - - const delta = center.lng - tr.center.lng; - center.lng += delta > 180 ? -360 : delta < -180 ? 360 : 0; - } - - private fireMoveEvents(eventData?: any) { - this.emit('move', new Event('move', eventData)); - if (this.zooming) { - this.emit('zoom', new Event('zoom', eventData)); - } - if (this.rotating) { - this.emit('rotate', new Event('rotate', eventData)); - } - if (this.pitching) { - this.emit('rotate', new Event('pitch', eventData)); - } - } - private prepareEase( - eventData: object | undefined, - noMoveStart: boolean = false, - currently: { [key: string]: boolean } = {}, - ) { - this.moving = true; - - if (!noMoveStart && !currently.moving) { - this.emit('movestart', new Event('movestart', eventData)); - } - if (this.zooming && !currently.zooming) { - this.emit('zoomstart', new Event('zoomstart', eventData)); - } - if (this.rotating && !currently.rotating) { - this.emit('rotatestart', new Event('rotatestart', eventData)); - } - if (this.pitching && !currently.pitching) { - this.emit('pitchstart', new Event('pitchstart', eventData)); - } - } - - private afterEase(eventData: object | undefined, easeId?: string) { - // if this easing is being stopped to start another easing with - // the same id then don't fire any events to avoid extra start/stop events - if (this.easeId && easeId && this.easeId === easeId) { - return; - } - // @ts-ignore - delete this.easeId; - - const wasZooming = this.zooming; - const wasRotating = this.rotating; - const wasPitching = this.pitching; - this.moving = false; - this.zooming = false; - this.rotating = false; - this.pitching = false; - this.padding = false; - - if (wasZooming) { - this.emit('zoomend', new Event('zoomend', eventData)); - } - if (wasRotating) { - this.emit('rotateend', new Event('rotateend', eventData)); - } - if (wasPitching) { - this.emit('pitchend', new Event('pitchend', eventData)); - } - this.emit('moveend', new Event('moveend', eventData)); - } - - private ease( - frame: (_: number) => void, - finish: () => void, - options: { - animate: boolean; - duration: number; - easing: (_: number) => number; - }, - ) { - if (options.animate === false || options.duration === 0) { - frame(1); - finish(); - } else { - this.easeStart = now(); - this.easeOptions = options; - this.onEaseFrame = frame; - this.onEaseEnd = finish; - this.easeFrameId = this.requestRenderFrame(this.renderFrameCallback); - } - } - - private cameraForBoxAndBearing( - p0: LngLatLike, - p1: LngLatLike, - bearing: number, - options?: ICameraOptions & { - offset: [number, number]; - maxZoom: number; - padding: IPaddingOptions; - }, - ): void | (ICameraOptions & IAnimationOptions) { - const defaultPadding = { - top: 0, - bottom: 0, - right: 0, - left: 0, - }; - options = merge( - { - padding: defaultPadding, - offset: [0, 0], - maxZoom: this.transform.maxZoom, - }, - options, - ); - - if (typeof options.padding === 'number') { - const p = options.padding; - options.padding = { - top: p, - bottom: p, - right: p, - left: p, - }; - } - - options.padding = merge(defaultPadding, options.padding); - const tr = this.transform; - const edgePadding = tr.padding as IPaddingOptions; - - // We want to calculate the upper right and lower left of the box defined by p0 and p1 - // in a coordinate system rotate to match the destination bearing. - const p0world = tr.project(LngLat.convert(p0)); - const p1world = tr.project(LngLat.convert(p1)); - const p0rotated = p0world.rotate((-bearing * Math.PI) / 180); - const p1rotated = p1world.rotate((-bearing * Math.PI) / 180); - - const upperRight = new Point( - Math.max(p0rotated.x, p1rotated.x), - Math.max(p0rotated.y, p1rotated.y), - ); - const lowerLeft = new Point( - Math.min(p0rotated.x, p1rotated.x), - Math.min(p0rotated.y, p1rotated.y), - ); - - // Calculate zoom: consider the original bbox and padding. - const size = upperRight.sub(lowerLeft); - const scaleX = - (tr.width - - // @ts-ignore - (edgePadding.left + - // @ts-ignore - edgePadding.right + - // @ts-ignore - options.padding.left + - // @ts-ignore - options.padding.right)) / - size.x; - const scaleY = - (tr.height - - // @ts-ignore - (edgePadding.top + - // @ts-ignore - edgePadding.bottom + - // @ts-ignore - options.padding.top + - // @ts-ignore - options.padding.bottom)) / - size.y; - - if (scaleY < 0 || scaleX < 0) { - return; - } - - const zoom = Math.min(tr.scaleZoom(tr.scale * Math.min(scaleX, scaleY)), options.maxZoom); - - // Calculate center: apply the zoom, the configured offset, as well as offset that exists as a result of padding. - const offset = Point.convert(options.offset); - // @ts-ignore - const paddingOffsetX = (options.padding.left - options.padding.right) / 2; - // @ts-ignore - const paddingOffsetY = (options.padding.top - options.padding.bottom) / 2; - const offsetAtInitialZoom = new Point(offset.x + paddingOffsetX, offset.y + paddingOffsetY); - const offsetAtFinalZoom = offsetAtInitialZoom.mult(tr.scale / tr.zoomScale(zoom)); - - const center = tr.unproject(p0world.add(p1world).div(2).sub(offsetAtFinalZoom)); - - return { - center, - zoom, - bearing, - }; - } - - private fitInternal( - calculatedOptions?: ICameraOptions & IAnimationOptions, - options?: IAnimationOptions & ICameraOptions, - eventData?: any, - ) { - // cameraForBounds warns + returns undefined if unable to fit: - if (!calculatedOptions) { - return this; - } - - options = merge(calculatedOptions, options); - // Explictly remove the padding field because, calculatedOptions already accounts for padding by setting zoom and center accordingly. - delete options.padding; - // @ts-ignore - return options.linear ? this.easeTo(options, eventData) : this.flyTo(options, eventData); - } -} diff --git a/packages/map/legacy/earthmap.ts b/packages/map/legacy/earthmap.ts deleted file mode 100644 index 185a7b9749f..00000000000 --- a/packages/map/legacy/earthmap.ts +++ /dev/null @@ -1,355 +0,0 @@ -import { DOM, lodashUtil } from '@antv/l7-utils'; -import Camera from './camera'; -import './css/l7.css'; -import type { LngLatLike } from './geo/lng_lat'; -import LngLat from './geo/lng_lat'; -import type { LngLatBoundsLike } from './geo/lng_lat_bounds'; -import LngLatBounds from './geo/lng_lat_bounds'; -// @ts-ignore -import type { PointLike } from './geo/point'; -import Point from './geo/point'; -import type BoxZoomHandler from './handler/box_zoom'; -import HandlerManager from './handler/handler_manager'; -import type KeyboardHandler from './handler/keyboard'; - -import type ScrollZoomHandler from './handler/scroll_zoom'; -import type DoubleClickZoomHandler from './handler/shim/dblclick_zoom'; -import type DragPanHandler from './handler/shim/drag_pan'; -import type DragRotateHandler from './handler/shim/drag_rotate'; -import type TouchZoomRotateHandler from './handler/shim/touch_zoom_rotate'; -import type { TouchPitchHandler } from './handler/touch'; -import type { IMapOptions } from './interface'; -import { renderframe } from './util'; -import { PerformanceUtils } from './utils/performance'; -import type { TaskID } from './utils/task_queue'; -import TaskQueue from './utils/task_queue'; -type CallBack = (_: number) => void; -const defaultMinZoom = -2; -const defaultMaxZoom = 22; -const { merge } = lodashUtil; -// the default values, but also the valid range -const defaultMinPitch = 0; -const defaultMaxPitch = 60; - -const DefaultOptions: IMapOptions = { - hash: false, - zoom: -1, - center: [112, 32], - pitch: 0, - bearing: 0, - interactive: true, - minZoom: defaultMinZoom, - maxZoom: defaultMaxZoom, - minPitch: defaultMinPitch, - maxPitch: defaultMaxPitch, - scrollZoom: true, - boxZoom: true, - dragRotate: true, - dragPan: true, - keyboard: true, - doubleClickZoom: true, - touchZoomRotate: true, - touchPitch: true, - bearingSnap: 7, - clickTolerance: 3, - pitchWithRotate: true, - trackResize: true, - renderWorldCopies: true, - pitchEnabled: true, - rotateEnabled: true, -}; - -/** - * @deprecated - */ -export class EarthMap extends Camera { - public doubleClickZoom: DoubleClickZoomHandler; - public dragRotate: DragRotateHandler; - public dragPan: DragPanHandler; - public touchZoomRotate: TouchZoomRotateHandler; - public scrollZoom: ScrollZoomHandler; - public keyboard: KeyboardHandler; - public touchPitch: TouchPitchHandler; - public boxZoom: BoxZoomHandler; - public handlers: HandlerManager; - - private container: HTMLElement; - private canvas: HTMLCanvasElement; - private canvasContainer: HTMLElement; - private renderTaskQueue: TaskQueue = new TaskQueue(); - private frame: { cancel: () => void } | null; - private trackResize: boolean = true; - - constructor(options: Partial) { - super(merge({}, DefaultOptions, options)); - this.initContainer(); - this.resize(); - this.handlers = new HandlerManager(this, this.options); - - if (typeof window !== 'undefined') { - window.addEventListener('online', this.onWindowOnline, false); - window.addEventListener('resize', this.onWindowResize, false); - window.addEventListener('orientationchange', this.onWindowResize, false); - } - } - - public resize(eventData?: any) { - const dimensions = this.containerDimensions(); - const width = dimensions[0]; - const height = dimensions[1]; - - // this.resizeCanvas(width, height); - this.transform.resize(width, height); - const fireMoving = !this.moving; - if (fireMoving) { - this.stop(); - this.emit('movestart', new Event('movestart', eventData)); - this.emit('move', new Event('move', eventData)); - } - - this.emit('resize', new Event('resize', eventData)); - - if (fireMoving) { - this.emit('moveend', new Event('moveend', eventData)); - } - - return this; - } - - public getContainer() { - return this.container; - } - - public getCanvas() { - return this.canvas; - } - - public getCanvasContainer() { - return this.canvasContainer; - } - - public project(lngLat: LngLatLike) { - return this.transform.locationPoint(LngLat.convert(lngLat)); - } - - public unproject(point: PointLike) { - return this.transform.pointLocation(Point.convert(point)); - } - - public getBounds(): LngLatBounds { - return this.transform.getBounds(); - } - - public getMaxBounds(): LngLatBounds | null { - return this.transform.getMaxBounds(); - } - - public setMaxBounds(bounds: LngLatBoundsLike) { - this.transform.setMaxBounds(LngLatBounds.convert(bounds)); - } - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - public setStyle(style: any) { - return; - } - public setMinZoom(minZoom?: number) { - minZoom = minZoom === null || minZoom === undefined ? defaultMinZoom : minZoom; - if (minZoom >= defaultMinZoom && minZoom <= this.transform.maxZoom) { - this.transform.minZoom = minZoom; - if (this.getZoom() < minZoom) { - this.setZoom(minZoom); - } - - return this; - } else { - throw new Error( - `minZoom must be between ${defaultMinZoom} and the current maxZoom, inclusive`, - ); - } - } - - public getMinZoom() { - return this.transform.minZoom; - } - - public setMaxZoom(maxZoom?: number) { - maxZoom = maxZoom === null || maxZoom === undefined ? defaultMaxZoom : maxZoom; - - if (maxZoom >= this.transform.minZoom) { - this.transform.maxZoom = maxZoom; - if (this.getZoom() > maxZoom) { - this.setZoom(maxZoom); - } - - return this; - } else { - throw new Error('maxZoom must be greater than the current minZoom'); - } - } - public getMaxZoom() { - return this.transform.maxZoom; - } - - public setMinPitch(minPitch?: number) { - minPitch = minPitch === null || minPitch === undefined ? defaultMinPitch : minPitch; - - if (minPitch < defaultMinPitch) { - throw new Error(`minPitch must be greater than or equal to ${defaultMinPitch}`); - } - - if (minPitch >= defaultMinPitch && minPitch <= this.transform.maxPitch) { - this.transform.minPitch = minPitch; - if (this.getPitch() < minPitch) { - this.setPitch(minPitch); - } - - return this; - } else { - throw new Error( - `minPitch must be between ${defaultMinPitch} and the current maxPitch, inclusive`, - ); - } - } - - public getMinPitch() { - return this.transform.minPitch; - } - - public setMaxPitch(maxPitch?: number) { - maxPitch = maxPitch === null || maxPitch === undefined ? defaultMaxPitch : maxPitch; - - if (maxPitch > defaultMaxPitch) { - throw new Error(`maxPitch must be less than or equal to ${defaultMaxPitch}`); - } - - if (maxPitch >= this.transform.minPitch) { - this.transform.maxPitch = maxPitch; - if (this.getPitch() > maxPitch) { - this.setPitch(maxPitch); - } - - return this; - } else { - throw new Error('maxPitch must be greater than the current minPitch'); - } - } - - public getMaxPitch() { - return this.transform.maxPitch; - } - - public getRenderWorldCopies() { - return this.transform.renderWorldCopies; - } - - public setRenderWorldCopies(renderWorldCopies?: boolean) { - this.transform.renderWorldCopies = !!renderWorldCopies; - } - - public remove() { - if (this.frame) { - this.frame.cancel(); - this.frame = null; - } - this.renderTaskQueue.clear(); - //销毁事件 - this.handlers.destroy(); - if (typeof window !== 'undefined') { - window.removeEventListener('online', this.onWindowOnline, false); - window.removeEventListener('resize', this.onWindowResize, false); - window.removeEventListener('orientationchange', this.onWindowResize, false); - } - } - - public requestRenderFrame(cb: CallBack): TaskID { - this.update(); - return this.renderTaskQueue.add(cb); - } - - public cancelRenderFrame(id: TaskID) { - return this.renderTaskQueue.remove(id); - } - - public triggerRepaint() { - if (!this.frame) { - this.frame = renderframe((paintStartTimeStamp: number) => { - PerformanceUtils.frame(paintStartTimeStamp); - this.frame = null; - this.update(paintStartTimeStamp); - }); - } - } - - public update(time?: number) { - if (!this.frame) { - this.frame = renderframe((paintStartTimeStamp: number) => { - PerformanceUtils.frame(paintStartTimeStamp); - this.frame = null; - this.renderTaskQueue.run(time); - }); - } - } - - private initContainer() { - if (typeof this.options.container === 'string') { - this.container = window.document.getElementById(this.options.container) as HTMLElement; - if (!this.container) { - throw new Error(`Container '${this.options.container}' not found.`); - } - } else if (this.options.container instanceof HTMLElement) { - this.container = this.options.container; - } else { - throw new Error("Invalid type: 'container' must be a String or HTMLElement."); - } - - const container = this.container; - container.classList.add('l7-map'); - - const canvasContainer = (this.canvasContainer = DOM.create( - 'div', - 'l7-canvas-container', - container, - )); - if (this.options.interactive) { - canvasContainer.classList.add('l7-interactive'); - } - - // this.canvas = DOM.create( - // 'canvas', - // 'l7-canvas', - // canvasContainer, - // ) as HTMLCanvasElement; - // this.canvas.setAttribute('tabindex', '-'); - // this.canvas.setAttribute('aria-label', 'Map'); - } - - private containerDimensions(): [number, number] { - let width = 0; - let height = 0; - if (this.container) { - width = this.container.clientWidth || 400; - height = this.container.clientHeight || 300; - } - return [width, height]; - } - - private resizeCanvas(width: number, height: number) { - const pixelRatio = DOM.DPR || 1; - this.canvas.width = pixelRatio * width; - this.canvas.height = pixelRatio * height; - - // Maintain the same canvas size, potentially downscaling it for HiDPI displays - this.canvas.style.width = `${width}px`; - this.canvas.style.height = `${height}px`; - } - - private onWindowOnline = () => { - this.update(); - }; - - private onWindowResize = (event: Event) => { - if (this.trackResize) { - this.resize({ originalEvent: event }).update(); - } - }; -} diff --git a/packages/map/legacy/geo/edge_insets.ts b/packages/map/legacy/geo/edge_insets.ts deleted file mode 100644 index 5540a20d686..00000000000 --- a/packages/map/legacy/geo/edge_insets.ts +++ /dev/null @@ -1,125 +0,0 @@ -// @ts-ignore -import { clamp, interpolate } from '../util'; -import Point from './point'; - -/** - * An `EdgeInset` object represents screen space padding applied to the edges of the viewport. - * This shifts the apprent center or the vanishing point of the map. This is useful for adding floating UI elements - * on top of the map and having the vanishing point shift as UI elements resize. - * - * @param {number} [top=0] - * @param {number} [bottom=0] - * @param {number} [left=0] - * @param {number} [right=0] - */ -export default class EdgeInsets { - public top: number; - public bottom: number; - public left: number; - public right: number; - - constructor(top: number = 0, bottom: number = 0, left: number = 0, right: number = 0) { - if ( - isNaN(top) || - top < 0 || - isNaN(bottom) || - bottom < 0 || - isNaN(left) || - left < 0 || - isNaN(right) || - right < 0 - ) { - throw new Error( - 'Invalid value for edge-insets, top, bottom, left and right must all be numbers', - ); - } - - this.top = top; - this.bottom = bottom; - this.left = left; - this.right = right; - } - - /** - * Interpolates the inset in-place. - * This maintains the current inset value for any inset not present in `target`. - * - * @param {PaddingOptions} target - * @param {number} t - * @returns {EdgeInsets} - * @memberof EdgeInsets - */ - public interpolate( - start: IPaddingOptions | EdgeInsets, - target: IPaddingOptions, - t: number, - ): EdgeInsets { - if (target.top != null && start.top != null) { - this.top = interpolate(start.top, target.top, t); - } - if (target.bottom != null && start.bottom != null) { - this.bottom = interpolate(start.bottom, target.bottom, t); - } - if (target.left != null && start.left != null) { - this.left = interpolate(start.left, target.left, t); - } - if (target.right != null && start.right != null) { - this.right = interpolate(start.right, target.right, t); - } - - return this; - } - - /** - * Utility method that computes the new apprent center or vanishing point after applying insets. - * This is in pixels and with the top left being (0.0) and +y being downwards. - * - * @param {number} width - * @param {number} height - * @returns {Point} - * @memberof EdgeInsets - */ - public getCenter(width: number, height: number): Point { - // Clamp insets so they never overflow width/height and always calculate a valid center - const x = clamp((this.left + width - this.right) / 2, 0, width); - const y = clamp((this.top + height - this.bottom) / 2, 0, height); - - return new Point(x, y); - } - - public equals(other: IPaddingOptions): boolean { - return ( - this.top === other.top && - this.bottom === other.bottom && - this.left === other.left && - this.right === other.right - ); - } - - public clone(): EdgeInsets { - return new EdgeInsets(this.top, this.bottom, this.left, this.right); - } - - /** - * Returns the current sdtate as json, useful when you want to have a - * read-only representation of the inset. - * - * @returns {PaddingOptions} - * @memberof EdgeInsets - */ - public toJSON(): IPaddingOptions { - return { - top: this.top, - bottom: this.bottom, - left: this.left, - right: this.right, - }; - } -} - -export interface IPaddingOptions { - top?: number; - bottom?: number; - right?: number; - left?: number; -} diff --git a/packages/map/legacy/geo/lng_lat.ts b/packages/map/legacy/geo/lng_lat.ts deleted file mode 100644 index 8136472fa67..00000000000 --- a/packages/map/legacy/geo/lng_lat.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { wrap } from '../util'; -export const earthRadius = 6371008.8; -export type LngLatLike = - | LngLat - | { lng: number; lat: number } - | { lon: number; lat: number } - | [number, number]; - -export default class LngLat { - public static convert(input: LngLatLike): LngLat { - if (input instanceof LngLat) { - return input; - } - if (Array.isArray(input) && (input.length === 2 || input.length === 3)) { - return new LngLat(Number(input[0]), Number(input[1])); - } - if (!Array.isArray(input) && typeof input === 'object' && input !== null) { - const lng = 'lng' in input ? input.lng : input.lon; - return new LngLat( - // flow can't refine this to have one of lng or lat, so we have to cast to any - Number(lng), - Number(input.lat), - ); - } - throw new Error( - '`LngLatLike` argument must be specified as a LngLat instance, an object {lng: , lat: }, an object {lon: , lat: }, or an array of [, ]', - ); - } - public lng: number; - public lat: number; - constructor(lng: number, lat: number) { - if (isNaN(lng) || isNaN(lat)) { - throw new Error(`Invalid LngLat object: (${lng}, ${lat})`); - } - this.lng = +lng; - this.lat = +lat; - if (this.lat > 90 || this.lat < -90) { - throw new Error('Invalid LngLat latitude value: must be between -90 and 90'); - } - } - - public wrap() { - return new LngLat(wrap(this.lng, -180, 180), this.lat); - } - public toArray(): [number, number] { - return [this.lng, this.lat]; - } - // public toBounds(radius: number = 0) { - // const earthCircumferenceInMetersAtEquator = 40075017; - // const latAccuracy = (360 * radius) / earthCircumferenceInMetersAtEquator; - // const lngAccuracy = latAccuracy / Math.cos((Math.PI / 180) * this.lat); - - // return new LngLatBounds( - // new LngLat(this.lng - lngAccuracy, this.lat - latAccuracy), - // new LngLat(this.lng + lngAccuracy, this.lat + latAccuracy), - // ); - // } - public toString() { - return `LngLat(${this.lng}, ${this.lat})`; - } - public distanceTo(lngLat: LngLat) { - const rad = Math.PI / 180; - const lat1 = this.lat * rad; - const lat2 = lngLat.lat * rad; - const a = - Math.sin(lat1) * Math.sin(lat2) + - Math.cos(lat1) * Math.cos(lat2) * Math.cos((lngLat.lng - this.lng) * rad); - - const maxMeters = earthRadius * Math.acos(Math.min(a, 1)); - return maxMeters; - } -} diff --git a/packages/map/legacy/geo/lng_lat_bounds.ts b/packages/map/legacy/geo/lng_lat_bounds.ts deleted file mode 100644 index e09237c369d..00000000000 --- a/packages/map/legacy/geo/lng_lat_bounds.ts +++ /dev/null @@ -1,139 +0,0 @@ -import type { LngLatLike } from './lng_lat'; -import LngLat from './lng_lat'; -export type LngLatBoundsLike = - | LngLatBounds - | [LngLatLike, LngLatLike] - | [number, number, number, number]; -export default class LngLatBounds { - public static convert(input: LngLatBoundsLike): LngLatBounds { - if (input instanceof LngLatBounds) { - return input; - } - return new LngLatBounds(input); - } - private ne: LngLat; - private sw: LngLat; - constructor(sw?: any, ne?: any) { - if (!sw) { - // noop - } else if (ne) { - this.setSouthWest(sw).setNorthEast(ne); - } else if (sw.length === 4) { - this.setSouthWest([sw[0], sw[1]]).setNorthEast([sw[2], sw[3]]); - } else { - this.setSouthWest(sw[0]).setNorthEast(sw[1]); - } - } - - public setNorthEast(ne: LngLatLike) { - this.ne = ne instanceof LngLat ? new LngLat(ne.lng, ne.lat) : LngLat.convert(ne); - return this; - } - public setSouthWest(sw: LngLatLike) { - this.sw = sw instanceof LngLat ? new LngLat(sw.lng, sw.lat) : LngLat.convert(sw); - return this; - } - - public extend(obj: LngLatLike | LngLatBoundsLike): this { - const sw = this.sw; - const ne = this.ne; - let sw2: any; - let ne2: any; - - if (obj instanceof LngLat) { - sw2 = obj; - ne2 = obj; - } else if (obj instanceof LngLatBounds) { - sw2 = obj.sw; - ne2 = obj.ne; - - if (!sw2 || !ne2) { - return this; - } - } else { - if (Array.isArray(obj)) { - // @ts-ignore - if (obj.length === 4 || obj.every(Array.isArray)) { - const lngLatBoundsObj = obj as LngLatBoundsLike; - return this.extend(LngLatBounds.convert(lngLatBoundsObj)); - } else { - const lngLatObj = obj as LngLatLike; - return this.extend(LngLat.convert(lngLatObj)); - } - } - return this; - } - - if (!sw && !ne) { - this.sw = new LngLat(sw2.lng, sw2.lat); - this.ne = new LngLat(ne2.lng, ne2.lat); - } else { - sw.lng = Math.min(sw2.lng, sw.lng); - sw.lat = Math.min(sw2.lat, sw.lat); - ne.lng = Math.max(ne2.lng, ne.lng); - ne.lat = Math.max(ne2.lat, ne.lat); - } - - return this; - } - public getCenter(): LngLat { - return new LngLat((this.sw.lng + this.ne.lng) / 2, (this.sw.lat + this.ne.lat) / 2); - } - - public getSouthWest(): LngLat { - return this.sw; - } - - public getNorthEast(): LngLat { - return this.ne; - } - - public getNorthWest(): LngLat { - return new LngLat(this.getWest(), this.getNorth()); - } - - public getSouthEast(): LngLat { - return new LngLat(this.getEast(), this.getSouth()); - } - - public getWest(): number { - return this.sw.lng; - } - - public getSouth(): number { - return this.sw.lat; - } - - public getEast(): number { - return this.ne.lng; - } - - public getNorth(): number { - return this.ne.lat; - } - - public toArray(): [[number, number], [number, number]] { - return [this.sw.toArray(), this.ne.toArray()]; - } - - public toString() { - return `LngLatBounds(${this.sw.toString()}, ${this.ne.toString()})`; - } - - public isEmpty() { - return !(this.sw && this.ne); - } - - public contains(lnglat: LngLatLike) { - const { lng, lat } = LngLat.convert(lnglat); - - const containsLatitude = this.sw.lat <= lat && lat <= this.ne.lat; - let containsLongitude = this.sw.lng <= lng && lng <= this.ne.lng; - if (this.sw.lng > this.ne.lng) { - // wrapped coordinates - containsLongitude = this.sw.lng >= lng && lng >= this.ne.lng; - } - - return containsLatitude && containsLongitude; - } -} diff --git a/packages/map/legacy/geo/mercator.ts b/packages/map/legacy/geo/mercator.ts deleted file mode 100644 index dcee92f63fe..00000000000 --- a/packages/map/legacy/geo/mercator.ts +++ /dev/null @@ -1,89 +0,0 @@ -import type { LngLatLike } from './lng_lat'; -import LngLat, { earthRadius } from './lng_lat'; - -/* - * The average circumference of the world in meters. - */ -const earthCircumfrence = 2 * Math.PI * earthRadius; // meters - -/* - * The circumference at a line of latitude in meters. - */ -function circumferenceAtLatitude(latitude: number) { - return earthCircumfrence * Math.cos((latitude * Math.PI) / 180); -} - -export function mercatorXfromLng(lng: number) { - return (180 + lng) / 360; -} - -export function mercatorYfromLat(lat: number) { - return (180 - (180 / Math.PI) * Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360))) / 360; -} - -export function mercatorZfromAltitude(altitude: number, lat: number) { - return altitude / circumferenceAtLatitude(lat); -} - -export function lngFromMercatorX(x: number) { - return x * 360 - 180; -} - -export function latFromMercatorY(y: number) { - const y2 = 180 - y * 360; - return (360 / Math.PI) * Math.atan(Math.exp((y2 * Math.PI) / 180)) - 90; -} - -export function altitudeFromMercatorZ(z: number, y: number) { - return z * circumferenceAtLatitude(latFromMercatorY(y)); -} - -/** - * Determine the Mercator scale factor for a given latitude, see - * https://en.wikipedia.org/wiki/Mercator_projection#Scale_factor - * - * At the equator the scale factor will be 1, which increases at higher latitudes. - * - * @param {number} lat Latitude - * @returns {number} scale factor - * @private - */ -export function mercatorScale(lat: number) { - return 1 / Math.cos((lat * Math.PI) / 180); -} - -export default class MercatorCoordinate { - public static fromLngLat(lngLatLike: LngLatLike, altitude: number = 0) { - const lngLat = LngLat.convert(lngLatLike); - - return new MercatorCoordinate( - mercatorXfromLng(lngLat.lng), - mercatorYfromLat(lngLat.lat), - mercatorZfromAltitude(altitude, lngLat.lat), - ); - } - public x: number; - public y: number; - public z: number; - - constructor(x: number, y: number, z: number = 0) { - this.x = +x; - this.y = +y; - this.z = +z; - } - - public toLngLat() { - return new LngLat(lngFromMercatorX(this.x), latFromMercatorY(this.y)); - } - - public toAltitude() { - return altitudeFromMercatorZ(this.z, this.y); - } - - public meterInMercatorCoordinateUnits() { - // 1 meter / circumference at equator in meters * Mercator projection scale factor at this latitude - return (1 / earthCircumfrence) * mercatorScale(latFromMercatorY(this.y)); - } -} - -export { MercatorCoordinate }; diff --git a/packages/map/legacy/geo/point.ts b/packages/map/legacy/geo/point.ts deleted file mode 100644 index d3a9e8565c0..00000000000 --- a/packages/map/legacy/geo/point.ts +++ /dev/null @@ -1,183 +0,0 @@ -export type PointLike = [number, number] | Point; - -export default class Point { - public static convert(a: any) { - if (a instanceof Point) { - return a; - } - if (Array.isArray(a)) { - return new Point(a[0], a[1]); - } - return a; - } - public x: number; - public y: number; - - constructor(x: number, y: number) { - this.x = x; - this.y = y; - } - - public clone() { - return new Point(this.x, this.y); - } - - public _add(p: Point) { - this.x += p.x; - this.y += p.y; - return this; - } - - public add(p: Point) { - return this.clone()._add(p); - } - - public _sub(p: Point) { - this.x -= p.x; - this.y -= p.y; - return this; - } - public sub(p: Point) { - return this.clone()._sub(p); - } - - public _multByPoint(p: Point) { - this.x *= p.x; - this.y *= p.y; - return this; - } - - public multByPoint(p: Point) { - return this.clone()._multByPoint(p); - } - - public _divByPoint(p: Point) { - this.x /= p.x; - this.y /= p.y; - return this; - } - public divByPoint(p: Point) { - return this.clone()._divByPoint(p); - } - - public _mult(k: number) { - this.x *= k; - this.y *= k; - return this; - } - - public mult(k: number) { - return this.clone()._mult(k); - } - - public _div(k: number) { - this.x /= k; - this.y /= k; - return this; - } - - public div(k: number) { - return this.clone()._div(k); - } - - public _rotate(angle: number) { - const cos = Math.cos(angle); - const sin = Math.sin(angle); - const x = cos * this.x - sin * this.y; - const y = sin * this.x + cos * this.y; - this.x = x; - this.y = y; - return this; - } - - public rotate(angle: number) { - return this.clone()._rotate(angle); - } - - public _rotateAround(angle: number, p: Point) { - const cos = Math.cos(angle); - const sin = Math.sin(angle); - const x = p.x + cos * (this.x - p.x) - sin * (this.y - p.y); - const y = p.y + sin * (this.x - p.x) + cos * (this.y - p.y); - this.x = x; - this.y = y; - return this; - } - public roateAround(angle: number, p: Point) { - return this.clone()._rotateAround(angle, p); - } - - public _matMult(m: number[]) { - const x = m[0] * this.x + m[1] * this.y; - const y = m[2] * this.x + m[3] * this.y; - this.x = x; - this.y = y; - return this; - } - - public matMult(m: number[]) { - return this.clone()._matMult(m); - } - - public _unit() { - this.div(this.mag()); - return this; - } - public unit() { - return this.clone()._unit(); - } - - public _perp() { - const y = this.y; - this.y = this.x; - this.x = -y; - return this; - } - public perp() { - return this.clone()._perp(); - } - - public _round() { - this.x = Math.round(this.x); - this.y = Math.round(this.y); - return this; - } - - public round() { - return this.clone()._round(); - } - - public mag() { - return Math.sqrt(this.x * this.x + this.y * this.y); - } - - public equals(other: Point) { - return this.x === other.x && this.y === other.y; - } - - public dist(p: Point) { - return Math.sqrt(this.distSqr(p)); - } - - public distSqr(p: Point) { - const dx = p.x - this.x; - const dy = p.y - this.y; - return dx * dx + dy * dy; - } - - public angle() { - return Math.atan2(this.y, this.x); - } - - public angleTo(b: Point) { - return Math.atan2(this.y - b.y, this.x - b.x); - } - - public angleWith(b: Point) { - return this.angleWithSep(b.x, b.y); - } - - public angleWithSep(x: number, y: number) { - return Math.atan2(this.x * y - this.y * x, this.x * x + this.y * y); - } -} diff --git a/packages/map/legacy/geo/simple.ts b/packages/map/legacy/geo/simple.ts deleted file mode 100644 index 24cbc9ea735..00000000000 --- a/packages/map/legacy/geo/simple.ts +++ /dev/null @@ -1,88 +0,0 @@ -import type { LngLatLike } from './lng_lat'; -import LngLat, { earthRadius } from './lng_lat'; - -/* - * The average circumference of the world in meters. - */ -const earthCircumfrence = 2 * Math.PI * earthRadius; // meters - -/* - * The circumference at a line of latitude in meters. - */ -export function circumferenceAtLatitude(latitude: number) { - return earthCircumfrence * Math.cos((latitude * Math.PI) / 180); -} - -export function mercatorXfromLng(lng: number) { - return lng; -} - -export function mercatorYfromLat(lat: number) { - return lat; -} - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export function mercatorZfromAltitude(altitude: number, lat: number) { - return altitude; -} - -export function lngFromMercatorX(x: number) { - return x; -} - -export function latFromMercatorY(y: number) { - return y; -} - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export function altitudeFromMercatorZ(z: number, y: number) { - return z; -} - -/** - * Determine the Mercator scale factor for a given latitude, see - * https://en.wikipedia.org/wiki/Mercator_projection#Scale_factor - * - * At the equator the scale factor will be 1, which increases at higher latitudes. - * - * @param {number} lat Latitude - * @returns {number} scale factor - * @private - */ -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export function mercatorScale(lat: number) { - return 1; -} - -export default class SimpleCoordinate { - public static fromLngLat(lngLatLike: LngLatLike, altitude: number = 0) { - const lngLat = LngLat.convert(lngLatLike); - - return new SimpleCoordinate( - mercatorXfromLng(lngLat.lng), - mercatorYfromLat(lngLat.lat), - mercatorZfromAltitude(altitude, lngLat.lat), - ); - } - public x: number; - public y: number; - public z: number; - - constructor(x: number, y: number, z: number = 0) { - this.x = +x; - this.y = +y; - this.z = +z; - } - public toLngLat() { - return new LngLat(this.x, this.y); - } - - public toAltitude() { - return this.z; - } - - public meterInMercatorCoordinateUnits() { - // 1 meter / circumference at equator in meters * Mercator projection scale factor at this latitude - return 1; - } -} diff --git a/packages/map/legacy/geo/transform.ts b/packages/map/legacy/geo/transform.ts deleted file mode 100644 index 8505ec8e0ec..00000000000 --- a/packages/map/legacy/geo/transform.ts +++ /dev/null @@ -1,1002 +0,0 @@ -// @ts-ignore -import { mat2, mat4, vec4 } from 'gl-matrix'; -import { clamp, interpolate, wrap } from '../util'; -import type { IPaddingOptions } from './edge_insets'; -import EdgeInsets from './edge_insets'; -import LngLat from './lng_lat'; -import LngLatBounds from './lng_lat_bounds'; -import MercatorCoordinate, { - mercatorXfromLng, - mercatorYfromLat, - mercatorZfromAltitude, -} from './mercator'; -import Point from './point'; -export const EXTENT = 8192; -export default class Transform { - get minZoom(): number { - return this._minZoom; - } - set minZoom(zoom: number) { - if (this._minZoom === zoom) { - return; - } - this._minZoom = zoom; - this.zoom = Math.max(this.zoom, zoom); - } - - get maxZoom(): number { - return this._maxZoom; - } - set maxZoom(zoom: number) { - if (this._maxZoom === zoom) { - return; - } - this._maxZoom = zoom; - this.zoom = Math.min(this.zoom, zoom); - } - - get minPitch(): number { - return this._minPitch; - } - set minPitch(pitch: number) { - if (this._minPitch === pitch) { - return; - } - this._minPitch = pitch; - this._pitch = Math.max(this._pitch, pitch); - } - - get maxPitch(): number { - return this._maxPitch; - } - set maxPitch(pitch: number) { - if (this._maxPitch === pitch) { - return; - } - this._maxPitch = pitch; - this._pitch = Math.min(this._pitch, pitch); - } - - get renderWorldCopies(): boolean { - return this._renderWorldCopies; - } - set renderWorldCopies(renderWorldCopies: boolean) { - if (renderWorldCopies === undefined) { - renderWorldCopies = true; - } else if (renderWorldCopies === null) { - renderWorldCopies = false; - } - - this._renderWorldCopies = renderWorldCopies; - } - - get worldSize(): number { - return this.tileSize * this.scale; - } - - get centerOffset(): Point { - return this.centerPoint._sub(this.size._div(2)); - } - - get size(): Point { - return new Point(this.width, this.height); - } - - get bearing(): number { - return (-this.angle / Math.PI) * 180; - } - set bearing(bearing: number) { - const b = (-wrap(bearing, -180, 180) * Math.PI) / 180; - if (this.angle === b) { - return; - } - this.unmodified = false; - this.angle = b; - this.calcMatrices(); - - // 2x2 matrix for rotating points - this.rotationMatrix = mat2.create(); - mat2.rotate(this.rotationMatrix, this.rotationMatrix, this.angle); - } - - get pitch(): number { - return (this._pitch / Math.PI) * 180; - } - set pitch(pitch: number) { - const p = (clamp(pitch, this._minPitch, this._maxPitch) / 180) * Math.PI; - if (this._pitch === p) { - return; - } - this.unmodified = false; - this._pitch = p; - this.calcMatrices(); - } - - get fov(): number { - return (this._fov / Math.PI) * 180; - } - - set fov(fov: number) { - fov = Math.max(0.01, Math.min(60, fov)); - if (this._fov === fov) { - return; - } - this.unmodified = false; - this._fov = (fov / 180) * Math.PI; - this.calcMatrices(); - } - - get zoom(): number { - return this._zoom; - } - - set zoom(zoom: number) { - const z = Math.min(Math.max(zoom, this._minZoom), this._maxZoom); - if (this._zoom === z) { - return; - } - this.unmodified = false; - this._zoom = z; - this.scale = this.zoomScale(z); - this.tileZoom = Math.floor(z); - this.zoomFraction = z - this.tileZoom; - this.constrain(); - this.calcMatrices(); - } - - get center(): LngLat { - return this._center; - } - - set center(center: LngLat) { - if (center.lat === this._center.lat && center.lng === this._center.lng) { - return; - } - this.unmodified = false; - this._center = center; - this.constrain(); - this.calcMatrices(); - } - - get padding(): IPaddingOptions { - return this.edgeInsets.toJSON(); - } - - set padding(padding: IPaddingOptions) { - if (this.edgeInsets.equals(padding)) { - return; - } - this.unmodified = false; - // Update edge-insets inplace - this.edgeInsets.interpolate(this.edgeInsets, padding, 1); - this.calcMatrices(); - } - - /** - * The center of the screen in pixels with the top-left corner being (0,0) - * and +y axis pointing downwards. This accounts for padding. - * - * @readonly - * @type {Point} - * @memberof Transform - */ - get centerPoint(): Point { - return this.edgeInsets.getCenter(this.width, this.height); - } - - get point(): Point { - return this.project(this.center); - } - public tileSize: number; - public tileZoom: number; - public lngRange?: [number, number]; - public latRange?: [number, number]; - public maxValidLatitude: number; - public scale: number; - public width: number; - public height: number; - public angle: number; - public rotationMatrix: mat2; - public pixelsToGLUnits: [number, number]; - public cameraToCenterDistance: number; - public mercatorMatrix: mat4; - public projMatrix: mat4; - public invProjMatrix: mat4; - public alignedProjMatrix: mat4; - public pixelMatrix: mat4; - public pixelMatrixInverse: mat4; - public glCoordMatrix: mat4; - public labelPlaneMatrix: mat4; - // tslint:disable:variable-name - private _fov: number; - private _pitch: number; - private _zoom: number; - private _renderWorldCopies: boolean; - private _minZoom: number; - private _maxZoom: number; - private _minPitch: number; - private _maxPitch: number; - private _center: LngLat; - // tslint:enable - private zoomFraction: number; - private unmodified: boolean; - private edgeInsets: EdgeInsets; - private constraining: boolean; - private posMatrixCache: { [_: string]: Float32Array }; - private alignedPosMatrixCache: { [_: string]: Float32Array }; - constructor( - minZoom: number, - maxZoom: number, - minPitch: number, - maxPitch: number, - renderWorldCopies: boolean | void, - ) { - this.tileSize = 512; // constant - this.maxValidLatitude = 85.051129; // constant - - this._renderWorldCopies = ( - renderWorldCopies === undefined ? true : renderWorldCopies - ) as boolean; - this._minZoom = minZoom || 0; - this._maxZoom = maxZoom || 22; - - this._minPitch = minPitch === undefined || minPitch === null ? 0 : minPitch; - this._maxPitch = maxPitch === undefined || maxPitch === null ? 60 : maxPitch; - - this.setMaxBounds(); - - this.width = 0; - this.height = 0; - this._center = new LngLat(0, 0); - this.zoom = 0; - this.angle = 0; - this._fov = 0.6435011087932844; - this._pitch = 0; - this.unmodified = true; - this.edgeInsets = new EdgeInsets(); - this.posMatrixCache = {}; - this.alignedPosMatrixCache = {}; - } - - public clone(): Transform { - const clone = new Transform( - this._minZoom, - this._maxZoom, - this._minPitch, - this._maxPitch, - this._renderWorldCopies, - ); - clone.tileSize = this.tileSize; - clone.latRange = this.latRange; - clone.width = this.width; - clone.height = this.height; - clone.center = this._center; - clone.zoom = this.zoom; - clone.angle = this.angle; - clone.fov = this._fov; - clone.pitch = this._pitch; - clone.unmodified = this.unmodified; - clone.edgeInsets = this.edgeInsets.clone(); - clone.calcMatrices(); - return clone; - } - - /** - * Returns if the padding params match - * - * @param {IPaddingOptions} padding - * @returns {boolean} - * @memberof Transform - */ - public isPaddingEqual(padding: IPaddingOptions): boolean { - return this.edgeInsets.equals(padding); - } - - /** - * Helper method to upadte edge-insets inplace - * - * @param {IPaddingOptions} target - * @param {number} t - * @memberof Transform - */ - public interpolatePadding(start: IPaddingOptions, target: IPaddingOptions, t: number) { - this.unmodified = false; - this.edgeInsets.interpolate(start, target, t); - this.constrain(); - this.calcMatrices(); - } - - /** - * Return a zoom level that will cover all tiles the transform - * @param {Object} options options - * @param {number} options.tileSize Tile size, expressed in screen pixels. - * @param {boolean} options.roundZoom Target zoom level. If true, the value will be rounded to the closest integer. Otherwise the value will be floored. - * @returns {number} zoom level An integer zoom level at which all tiles will be visible. - */ - public coveringZoomLevel(options: { roundZoom?: boolean; tileSize: number }) { - const z = (options.roundZoom ? Math.round : Math.floor)( - this.zoom + this.scaleZoom(this.tileSize / options.tileSize), - ); - // At negative zoom levels load tiles from z0 because negative tile zoom levels don't exist. - return Math.max(0, z); - } - - /** - * Return any "wrapped" copies of a given tile coordinate that are visible - * in the current view. - * - * @private - */ - // public getVisibleUnwrappedCoordinates(tileID: CanonicalTileID) { - // const result = [new UnwrappedTileID(0, tileID)]; - // if (this._renderWorldCopies) { - // const utl = this.pointCoordinate(new Point(0, 0)); - // const utr = this.pointCoordinate(new Point(this.width, 0)); - // const ubl = this.pointCoordinate(new Point(this.width, this.height)); - // const ubr = this.pointCoordinate(new Point(0, this.height)); - // const w0 = Math.floor(Math.min(utl.x, utr.x, ubl.x, ubr.x)); - // const w1 = Math.floor(Math.max(utl.x, utr.x, ubl.x, ubr.x)); - - // // Add an extra copy of the world on each side to properly render ImageSources and CanvasSources. - // // Both sources draw outside the tile boundaries of the tile that "contains them" so we need - // // to add extra copies on both sides in case offscreen tiles need to draw into on-screen ones. - // const extraWorldCopy = 1; - - // for (let w = w0 - extraWorldCopy; w <= w1 + extraWorldCopy; w++) { - // if (w === 0) { - // continue; - // } - // result.push(new UnwrappedTileID(w, tileID)); - // } - // } - // return result; - // } - - /** - * Return all coordinates that could cover this transform for a covering - * zoom level. - * @param {Object} options - * @param {number} options.tileSize - * @param {number} options.minzoom - * @param {number} options.maxzoom - * @param {boolean} options.roundZoom - * @param {boolean} options.reparseOverscaled - * @param {boolean} options.renderWorldCopies - * @returns {Array} OverscaledTileIDs - * @private - */ - // public coveringTiles(options: { - // tileSize: number; - // minzoom?: number; - // maxzoom?: number; - // roundZoom?: boolean; - // reparseOverscaled?: boolean; - // renderWorldCopies?: boolean; - // }): OverscaledTileID[] { - // let z = this.coveringZoomLevel(options); - // const actualZ = z; - - // if (options.minzoom !== undefined && z < options.minzoom) { - // return []; - // } - // if (options.maxzoom !== undefined && z > options.maxzoom) { - // z = options.maxzoom; - // } - - // const centerCoord = MercatorCoordinate.fromLngLat(this.center); - // const numTiles = Math.pow(2, z); - // const centerPoint = [numTiles * centerCoord.x, numTiles * centerCoord.y, 0]; - // const cameraFrustum = Frustum.fromInvProjectionMatrix( - // this.invProjMatrix, - // this.worldSize, - // z, - // ); - - // // No change of LOD behavior for pitch lower than 60 and when there is no top padding: return only tile ids from the requested zoom level - // let minZoom = options.minzoom || 0; - // // Use 0.1 as an epsilon to avoid for explicit == 0.0 floating point checks - // if (this._pitch <= 60.0 && this.edgeInsets.top < 0.1) { - // minZoom = z; - // } - - // // There should always be a certain number of maximum zoom level tiles surrounding the center location - // const radiusOfMaxLvlLodInTiles = 3; - - // const newRootTile = (wrap: number): any => { - // return { - // // All tiles are on zero elevation plane => z difference is zero - // aabb: new Aabb( - // [wrap * numTiles, 0, 0], - // [(wrap + 1) * numTiles, numTiles, 0], - // ), - // zoom: 0, - // x: 0, - // y: 0, - // wrap, - // fullyVisible: false, - // }; - // }; - - // // Do a depth-first traversal to find visible tiles and proper levels of detail - // const stack = []; - // const result = []; - // const maxZoom = z; - // const overscaledZ = options.reparseOverscaled ? actualZ : z; - - // if (this._renderWorldCopies) { - // // Render copy of the globe thrice on both sides - // for (let i = 1; i <= 3; i++) { - // stack.push(newRootTile(-i)); - // stack.push(newRootTile(i)); - // } - // } - - // stack.push(newRootTile(0)); - - // while (stack.length > 0) { - // const it = stack.pop(); - // const x = it.x; - // const y = it.y; - // let fullyVisible = it.fullyVisible; - - // // Visibility of a tile is not required if any of its ancestor if fully inside the frustum - // if (!fullyVisible) { - // const intersectResult = it.aabb.intersects(cameraFrustum); - - // if (intersectResult === 0) { - // continue; - // } - - // fullyVisible = intersectResult === 2; - // } - - // const distanceX = it.aabb.distanceX(centerPoint); - // const distanceY = it.aabb.distanceY(centerPoint); - // const longestDim = Math.max(Math.abs(distanceX), Math.abs(distanceY)); - - // // We're using distance based heuristics to determine if a tile should be split into quadrants or not. - // // radiusOfMaxLvlLodInTiles defines that there's always a certain number of maxLevel tiles next to the map center. - // // Using the fact that a parent node in quadtree is twice the size of its children (per dimension) - // // we can define distance thresholds for each relative level: - // // f(k) = offset + 2 + 4 + 8 + 16 + ... + 2^k. This is the same as "offset+2^(k+1)-2" - // const distToSplit = - // radiusOfMaxLvlLodInTiles + (1 << (maxZoom - it.zoom)) - 2; - - // // Have we reached the target depth or is the tile too far away to be any split further? - // if ( - // it.zoom === maxZoom || - // (longestDim > distToSplit && it.zoom >= minZoom) - // ) { - // result.push({ - // tileID: new OverscaledTileID( - // it.zoom === maxZoom ? overscaledZ : it.zoom, - // it.wrap, - // it.zoom, - // x, - // y, - // ), - // distanceSq: vec2.sqrLen([ - // centerPoint[0] - 0.5 - x, - // centerPoint[1] - 0.5 - y, - // ]), - // }); - // continue; - // } - - // for (let i = 0; i < 4; i++) { - // const childX = (x << 1) + (i % 2); - // const childY = (y << 1) + (i >> 1); - - // stack.push({ - // aabb: it.aabb.quadrant(i), - // zoom: it.zoom + 1, - // x: childX, - // y: childY, - // wrap: it.wrap, - // fullyVisible, - // }); - // } - // } - - // return result - // .sort((a, b) => a.distanceSq - b.distanceSq) - // .map((a) => a.tileID); - // } - - public resize(width: number, height: number) { - this.width = width; - this.height = height; - - this.pixelsToGLUnits = [2 / width, -2 / height]; - this.constrain(); - this.calcMatrices(); - } - - public zoomScale(zoom: number) { - return Math.pow(2, zoom); - } - public scaleZoom(scale: number) { - return Math.log(scale) / Math.LN2; - } - - public project(lnglat: LngLat) { - const lat = clamp(lnglat.lat, -this.maxValidLatitude, this.maxValidLatitude); - return new Point( - mercatorXfromLng(lnglat.lng) * this.worldSize, - mercatorYfromLat(lat) * this.worldSize, - ); - } - - public unproject(point: Point): LngLat { - return new MercatorCoordinate(point.x / this.worldSize, point.y / this.worldSize).toLngLat(); - } - - public setLocationAtPoint(lnglat: LngLat, point: Point) { - const a = this.pointCoordinate(point); - const b = this.pointCoordinate(this.centerPoint); - const loc = this.locationCoordinate(lnglat); - const newCenter = new MercatorCoordinate(loc.x - (a.x - b.x), loc.y - (a.y - b.y)); - this.center = this.coordinateLocation(newCenter); - if (this._renderWorldCopies) { - this.center = this.center.wrap(); - } - } - - public pointCoordinate(p: Point) { - const targetZ = 0; - // since we don't know the correct projected z value for the point, - // unproject two points to get a line and then find the point on that - // line with z=0 - - const coord0 = new Float64Array([p.x, p.y, 0, 1]); - const coord1 = new Float64Array([p.x, p.y, 1, 1]); - - // @ts-ignore - vec4.transformMat4(coord0, coord0, this.pixelMatrixInverse); - // @ts-ignore - vec4.transformMat4(coord1, coord1, this.pixelMatrixInverse); - - const w0 = coord0[3]; - const w1 = coord1[3]; - const x0 = coord0[0] / w0; - const x1 = coord1[0] / w1; - const y0 = coord0[1] / w0; - const y1 = coord1[1] / w1; - const z0 = coord0[2] / w0; - const z1 = coord1[2] / w1; - - const t = z0 === z1 ? 0 : (targetZ - z0) / (z1 - z0); - - return new MercatorCoordinate( - interpolate(x0, x1, t) / this.worldSize, - interpolate(y0, y1, t) / this.worldSize, - ); - } - - /** - * Returns the map's geographical bounds. When the bearing or pitch is non-zero, the visible region is not - * an axis-aligned rectangle, and the result is the smallest bounds that encompasses the visible region. - * @returns {LngLatBounds} Returns a {@link LngLatBounds} object describing the map's geographical bounds. - */ - public getBounds(): LngLatBounds { - return new LngLatBounds() - .extend(this.pointLocation(new Point(0, 0))) - .extend(this.pointLocation(new Point(this.width, 0))) - .extend(this.pointLocation(new Point(this.width, this.height))) - .extend(this.pointLocation(new Point(0, this.height))); - } - - /** - * Returns the maximum geographical bounds the map is constrained to, or `null` if none set. - * @returns {LngLatBounds} {@link LngLatBounds} - */ - public getMaxBounds(): LngLatBounds | null { - if ( - !this.latRange || - this.latRange.length !== 2 || - !this.lngRange || - this.lngRange.length !== 2 - ) { - return null; - } - - return new LngLatBounds( - [this.lngRange[0], this.latRange[0]], - [this.lngRange[1], this.latRange[1]], - ); - } - - /** - * Sets or clears the map's geographical constraints. - * @param {LngLatBounds} bounds A {@link LngLatBounds} object describing the new geographic boundaries of the map. - */ - public setMaxBounds(bounds?: LngLatBounds) { - if (bounds) { - this.lngRange = [bounds.getWest(), bounds.getEast()]; - this.latRange = [bounds.getSouth(), bounds.getNorth()]; - this.constrain(); - } else { - this.lngRange = undefined; - this.latRange = [-this.maxValidLatitude, this.maxValidLatitude]; - } - } - - public customLayerMatrix(): number[] { - return (this.mercatorMatrix as number[]).slice(); - } - - public maxPitchScaleFactor() { - // calcMatrices hasn't run yet - if (!this.pixelMatrixInverse) { - return 1; - } - - const coord = this.pointCoordinate(new Point(0, 0)); - const p = new Float32Array([coord.x * this.worldSize, coord.y * this.worldSize, 0, 1]); - const topPoint = vec4.transformMat4(p, p, this.pixelMatrix); - return topPoint[3] / this.cameraToCenterDistance; - } - - /* - * The camera looks at the map from a 3D (lng, lat, altitude) location. Let's use `cameraLocation` - * as the name for the location under the camera and on the surface of the earth (lng, lat, 0). - * `cameraPoint` is the projected position of the `cameraLocation`. - * - * This point is useful to us because only fill-extrusions that are between `cameraPoint` and - * the query point on the surface of the earth can extend and intersect the query. - * - * When the map is not pitched the `cameraPoint` is equivalent to the center of the map because - * the camera is right above the center of the map. - */ - public getCameraPoint() { - const pitch = this._pitch; - const yOffset = Math.tan(pitch) * (this.cameraToCenterDistance || 1); - return this.centerPoint.add(new Point(0, yOffset)); - } - - /* - * When the map is pitched, some of the 3D features that intersect a query will not intersect - * the query at the surface of the earth. Instead the feature may be closer and only intersect - * the query because it extrudes into the air. - * - * This returns a geometry that includes all of the original query as well as all possible ares of the - * screen where the *base* of a visible extrusion could be. - * - For point queries, the line from the query point to the "camera point" - * - For other geometries, the envelope of the query geometry and the "camera point" - */ - public getCameraQueryGeometry(queryGeometry: Point[]): Point[] { - const c = this.getCameraPoint(); - - if (queryGeometry.length === 1) { - return [queryGeometry[0], c]; - } else { - let minX = c.x; - let minY = c.y; - let maxX = c.x; - let maxY = c.y; - for (const p of queryGeometry) { - minX = Math.min(minX, p.x); - minY = Math.min(minY, p.y); - maxX = Math.max(maxX, p.x); - maxY = Math.max(maxY, p.y); - } - return [ - new Point(minX, minY), - new Point(maxX, minY), - new Point(maxX, maxY), - new Point(minX, maxY), - new Point(minX, minY), - ]; - } - } - - /** - * Given a coordinate, return the screen point that corresponds to it - * @param {Coordinate} coord - * @returns {Point} screen point - * @private - */ - public coordinatePoint(coord: MercatorCoordinate) { - const p = vec4.fromValues(coord.x * this.worldSize, coord.y * this.worldSize, 0, 1); - vec4.transformMat4(p, p, this.pixelMatrix); - return new Point(p[0] / p[3], p[1] / p[3]); - } - /** - * Given a location, return the screen point that corresponds to it - * @param {LngLat} lnglat location - * @returns {Point} screen point - * @private - */ - public locationPoint(lnglat: LngLat) { - return this.coordinatePoint(this.locationCoordinate(lnglat)); - } - - /** - * Given a point on screen, return its lnglat - * @param {Point} p screen point - * @returns {LngLat} lnglat location - * @private - */ - public pointLocation(p: Point) { - // if(p.x !== 0 && p.x !== 1001) { - // console.log(p.x) - // } - - return this.coordinateLocation(this.pointCoordinate(p)); - } - - /** - * Given a geographical lnglat, return an unrounded - * coordinate that represents it at this transform's zoom level. - * @param {LngLat} lnglat - * @returns {Coordinate} - * @private - */ - public locationCoordinate(lnglat: LngLat) { - return MercatorCoordinate.fromLngLat(lnglat); - } - - /** - * Given a Coordinate, return its geographical position. - * @param {Coordinate} coord - * @returns {LngLat} lnglat - * @private - */ - public coordinateLocation(coord: MercatorCoordinate) { - return coord.toLngLat(); - } - - public getProjectionMatrix(): mat4 { - return this.projMatrix; - } - /** - * Calculate the posMatrix that, given a tile coordinate, would be used to display the tile on a map. - * @param {UnwrappedTileID} unwrappedTileID; - * @private - */ - // private calculatePosMatrix( - // unwrappedTileID: UnwrappedTileID, - // aligned: boolean = false, - // ): Float32Array { - // const posMatrixKey = unwrappedTileID.key; - // const cache = aligned ? this.alignedPosMatrixCache : this.posMatrixCache; - // if (cache[posMatrixKey]) { - // return cache[posMatrixKey]; - // } - - // const canonical = unwrappedTileID.canonical; - // const scale = this.worldSize / this.zoomScale(canonical.z); - // const unwrappedX = - // canonical.x + Math.pow(2, canonical.z) * unwrappedTileID.wrap; - - // const posMatrix = mat4.identity(new Float64Array(16)); - // mat4.translate(posMatrix, posMatrix, [ - // unwrappedX * scale, - // canonical.y * scale, - // 0, - // ]); - // mat4.scale(posMatrix, posMatrix, [scale / EXTENT, scale / EXTENT, 1]); - // mat4.multiply( - // posMatrix, - // aligned ? this.alignedProjMatrix : this.projMatrix, - // posMatrix, - // ); - - // cache[posMatrixKey] = new Float32Array(posMatrix); - // return cache[posMatrixKey]; - // } - - private constrain() { - if (!this.center || !this.width || !this.height || this.constraining) { - return; - } - - this.constraining = true; - - let minY = -90; - let maxY = 90; - let minX = -180; - let maxX = 180; - let sy; - let sx; - let x2; - let y2; - const size = this.size; - const unmodified = this.unmodified; - if (this.latRange) { - const latRange = this.latRange; - minY = mercatorYfromLat(latRange[1]) * this.worldSize; - maxY = mercatorYfromLat(latRange[0]) * this.worldSize; - sy = maxY - minY < size.y ? size.y / (maxY - minY) : 0; - } - - if (this.lngRange) { - const lngRange = this.lngRange; - minX = mercatorXfromLng(lngRange[0]) * this.worldSize; - maxX = mercatorXfromLng(lngRange[1]) * this.worldSize; - sx = maxX - minX < size.x ? size.x / (maxX - minX) : 0; - } - - const point = this.point; - - // how much the map should scale to fit the screen into given latitude/longitude ranges - const s = Math.max(sx || 0, sy || 0); - - if (s) { - this.center = this.unproject( - new Point(sx ? (maxX + minX) / 2 : point.x, sy ? (maxY + minY) / 2 : point.y), - ); - - this.zoom += this.scaleZoom(s); - - this.unmodified = unmodified; - this.constraining = false; - return; - } - - if (this.latRange) { - const y = point.y; - const h2 = size.y / 2; - - if (y - h2 < minY) { - y2 = minY + h2; - } - if (y + h2 > maxY) { - y2 = maxY - h2; - } - } - - if (this.lngRange) { - const x = point.x; - const w2 = size.x / 2; - - if (x - w2 < minX) { - x2 = minX + w2; - } - if (x + w2 > maxX) { - x2 = maxX - w2; - } - } - - // pan the map if the screen goes off the range - if (x2 !== undefined || y2 !== undefined) { - this.center = this.unproject( - new Point(x2 !== undefined ? x2 : point.x, y2 !== undefined ? y2 : point.y), - ); - } - - this.unmodified = unmodified; - this.constraining = false; - } - - private calcMatrices() { - if (!this.height) { - return; - } - - const halfFov = this._fov / 2; - const offset = this.centerOffset; - this.cameraToCenterDistance = (0.5 / Math.tan(halfFov)) * this.height; - - // Find the distance from the center point [width/2 + offset.x, height/2 + offset.y] to the - // center top point [width/2 + offset.x, 0] in Z units, using the law of sines. - // 1 Z unit is equivalent to 1 horizontal px at the center of the map - // (the distance between[width/2, height/2] and [width/2 + 1, height/2]) - const groundAngle = Math.PI / 2 + this._pitch; - const fovAboveCenter = this._fov * (0.5 + offset.y / this.height); - const topHalfSurfaceDistance = - (Math.sin(fovAboveCenter) * this.cameraToCenterDistance) / - Math.sin(clamp(Math.PI - groundAngle - fovAboveCenter, 0.01, Math.PI - 0.01)); - const point = this.point; - const x = point.x; - const y = point.y; - - // Calculate z distance of the farthest fragment that should be rendered. - const furthestDistance = - Math.cos(Math.PI / 2 - this._pitch) * topHalfSurfaceDistance + this.cameraToCenterDistance; - // Add a bit extra to avoid precision problems when a fragment's distance is exactly `furthestDistance` - const farZ = furthestDistance * 1.01; - - // The larger the value of nearZ is - // - the more depth precision is available for features (good) - // - clipping starts appearing sooner when the camera is close to 3d features (bad) - // - // Smaller values worked well for mapbox-gl-js but deckgl was encountering precision issues - // when rendering it's layers using custom layers. This value was experimentally chosen and - // seems to solve z-fighting issues in deckgl while not clipping buildings too close to the camera. - const nearZ = this.height / 50; - - // matrix for conversion from location to GL coordinates (-1 .. 1) - // 使用 Float64Array 的原因是为了避免计算精度问题、 mat4.create() 默认使用 Float32Array - let m = new Float64Array(16); - // @ts-ignore - mat4.perspective(m, this._fov, this.width / this.height, nearZ, farZ); - - // Apply center of perspective offset - m[8] = (-offset.x * 2) / this.width; - m[9] = (offset.y * 2) / this.height; - - // @ts-ignore - mat4.scale(m, m, [1, -1, 1]); - // @ts-ignore - mat4.translate(m, m, [0, 0, -this.cameraToCenterDistance]); - // @ts-ignore - mat4.rotateX(m, m, this._pitch); - // @ts-ignore - mat4.rotateZ(m, m, this.angle); - // @ts-ignore - mat4.translate(m, m, [-x, -y, 0]); - - // The mercatorMatrix can be used to transform points from mercator coordinates - // ([0, 0] nw, [1, 1] se) to GL coordinates. - // @ts-ignore - this.mercatorMatrix = mat4.scale([], m, [this.worldSize, this.worldSize, this.worldSize]); - // scale vertically to meters per pixel (inverse of ground resolution): - - // @ts-ignore - mat4.scale(m, m, [1, 1, mercatorZfromAltitude(1, this.center.lat) * this.worldSize, 1]); - // @ts-ignore - this.projMatrix = m; - // @ts-ignore - this.invProjMatrix = mat4.invert([], this.projMatrix); - - // Make a second projection matrix that is aligned to a pixel grid for rendering raster tiles. - // We're rounding the (floating point) x/y values to achieve to avoid rendering raster images to fractional - // coordinates. Additionally, we adjust by half a pixel in either direction in case that viewport dimension - // is an odd integer to preserve rendering to the pixel grid. We're rotating this shift based on the angle - // of the transformation so that 0°, 90°, 180°, and 270° rasters are crisp, and adjust the shift so that - // it is always <= 0.5 pixels. - const xShift = (this.width % 2) / 2; - const yShift = (this.height % 2) / 2; - const angleCos = Math.cos(this.angle); - const angleSin = Math.sin(this.angle); - const dx = x - Math.round(x) + angleCos * xShift + angleSin * yShift; - const dy = y - Math.round(y) + angleCos * yShift + angleSin * xShift; - // const alignedM = mat4.clone(m); - const alignedM = new Float64Array(m); - // @ts-ignore - mat4.translate(alignedM, alignedM, [dx > 0.5 ? dx - 1 : dx, dy > 0.5 ? dy - 1 : dy, 0]); - // @ts-ignore - this.alignedProjMatrix = alignedM; - - // @ts-ignore - m = mat4.create(); - // @ts-ignore - mat4.scale(m, m, [this.width / 2, -this.height / 2, 1]); - // @ts-ignore - mat4.translate(m, m, [1, -1, 0]); - // @ts-ignore - this.labelPlaneMatrix = m; - - // @ts-ignore - m = mat4.create(); - // @ts-ignore - mat4.scale(m, m, [1, -1, 1]); - // @ts-ignore - mat4.translate(m, m, [-1, -1, 0]); - // @ts-ignore - mat4.scale(m, m, [2 / this.width, 2 / this.height, 1]); - // @ts-ignore - this.glCoordMatrix = m; - - // matrix for conversion from location to screen coordinates - this.pixelMatrix = mat4.multiply( - // @ts-ignore - new Float64Array(16), - this.labelPlaneMatrix, - this.projMatrix, - ); - - // inverse matrix for conversion from screen coordinaes to location - // @ts-ignore - m = mat4.invert(new Float64Array(16), this.pixelMatrix); - if (!m) { - throw new Error('failed to invert matrix'); - } - // @ts-ignore - this.pixelMatrixInverse = m; - - this.posMatrixCache = {}; - this.alignedPosMatrixCache = {}; - } -} diff --git a/packages/map/legacy/handler/IHandler.ts b/packages/map/legacy/handler/IHandler.ts deleted file mode 100644 index 069f1736698..00000000000 --- a/packages/map/legacy/handler/IHandler.ts +++ /dev/null @@ -1,44 +0,0 @@ -// @ts-ignore -import type { EarthMap } from '../earthmap'; -import type Point from '../geo/point'; -import type { Map } from '../map'; -export interface IHandlerResult { - panDelta?: Point; - zoomDelta?: number; - bearingDelta?: number; - pitchDelta?: number; - around?: Point | null; - pinchAround?: Point | null; - cameraAnimation?: (map: Map | EarthMap) => any; - originalEvent?: any; - // Makes the manager trigger a frame; allowing the handler to return multiple results over time (see scrollzoom). - needsRenderFrame?: boolean; - noInertia?: boolean; -} - -export interface IHandler { - // Handlers can optionally implement these methods. - // They are called with dom events whenever those dom evens are received. - touchstart?: (e: TouchEvent, points: Point[], mapTouches: Touch[]) => IHandlerResult | void; - touchmove?: (e: TouchEvent, points: Point[], mapTouches: Touch[]) => IHandlerResult | void; - touchend?: (e: TouchEvent, points: Point[], mapTouches: Touch[]) => IHandlerResult | void; - touchcancel?: (e: TouchEvent, points: Point[], mapTouches: Touch[]) => IHandlerResult | void; - mousedown?: (e: MouseEvent, point: Point) => IHandlerResult | void; - mousemove?: (e: MouseEvent, point: Point) => IHandlerResult | void; - mouseup?: (e: MouseEvent, point: Point) => IHandlerResult | void; - dblclick?: (e: MouseEvent, point: Point) => IHandlerResult | void; - wheel?: (e: WheelEvent, point: Point) => IHandlerResult | void; - keydown?: (e: KeyboardEvent) => IHandlerResult | void; - keyup?: (e: KeyboardEvent) => IHandlerResult | void; - - // `renderFrame` is the only non-dom event. It is called during render - // frames and can be used to smooth camera changes (see scroll handler). - renderFrame?: () => IHandlerResult | void; - enable(options?: any): void; - disable(): void; - isEnabled(): boolean; - isActive(): boolean; - - // `reset` can be called by the manager at any time and must reset everything to it's original state - reset(): void; -} diff --git a/packages/map/legacy/handler/blockable_map_event.ts b/packages/map/legacy/handler/blockable_map_event.ts deleted file mode 100644 index 9091c60b4ac..00000000000 --- a/packages/map/legacy/handler/blockable_map_event.ts +++ /dev/null @@ -1,68 +0,0 @@ -// @ts-ignore -import type { EarthMap } from '../earthmap'; -import type { Map } from '../map'; -import { MapMouseEvent } from './events'; -export default class BlockableMapEventHandler { - private map: Map | EarthMap; - private delayContextMenu: boolean; - private contextMenuEvent: MouseEvent; - - constructor(map: Map | EarthMap) { - this.map = map; - } - - public reset() { - this.delayContextMenu = false; - // @ts-ignore - delete this.contextMenuEvent; - } - - public mousemove(e: MouseEvent) { - // mousemove map events should not be fired when interaction handlers (pan, rotate, etc) are active - this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e)); - } - - public mousedown() { - this.delayContextMenu = true; - } - - public mouseup() { - this.delayContextMenu = false; - if (this.contextMenuEvent) { - this.map.emit( - 'contextmenu', - new MapMouseEvent('contextmenu', this.map, this.contextMenuEvent), - ); - // @ts-ignore - delete this.contextMenuEvent; - } - } - public contextmenu(e: MouseEvent) { - if (this.delayContextMenu) { - // Mac: contextmenu fired on mousedown; we save it until mouseup for consistency's sake - this.contextMenuEvent = e; - } else { - // Windows: contextmenu fired on mouseup, so fire event now - this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e)); - } - - // prevent browser context menu when necessary - if (this.map.listeners('contextmenu')) { - e.preventDefault(); - } - } - - public isEnabled() { - return true; - } - - public isActive() { - return false; - } - public enable() { - return true; - } - public disable() { - return false; - } -} diff --git a/packages/map/legacy/handler/box_zoom.ts b/packages/map/legacy/handler/box_zoom.ts deleted file mode 100644 index 3dc9ab8492a..00000000000 --- a/packages/map/legacy/handler/box_zoom.ts +++ /dev/null @@ -1,188 +0,0 @@ -// @ts-ignore -import type { EarthMap } from '../earthmap'; -import type Point from '../geo/point'; -import type { Map } from '../map'; -import DOM from '../utils/dom'; -import { Event } from './events/event'; - -/** - * The `BoxZoomHandler` allows the user to zoom the map to fit within a bounding box. - * The bounding box is defined by clicking and holding `shift` while dragging the cursor. - */ -class BoxZoomHandler { - private map: Map | EarthMap; - private el: HTMLElement; - private container: HTMLElement; - private enabled: boolean; - private active: boolean; - private startPos: Point; - private lastPos: Point; - private box: HTMLElement | null; - private clickTolerance: number; - - /** - * @private - */ - constructor( - map: Map | EarthMap, - options: { - clickTolerance: number; - }, - ) { - this.map = map; - this.el = map.getCanvasContainer(); - this.container = map.getContainer(); - this.clickTolerance = options.clickTolerance || 1; - } - - /** - * Returns a Boolean indicating whether the "box zoom" interaction is enabled. - * - * @returns {boolean} `true` if the "box zoom" interaction is enabled. - */ - public isEnabled() { - return !!this.enabled; - } - - /** - * Returns a Boolean indicating whether the "box zoom" interaction is active, i.e. currently being used. - * - * @returns {boolean} `true` if the "box zoom" interaction is active. - */ - public isActive() { - return !!this.active; - } - - /** - * Enables the "box zoom" interaction. - * - * @example - * map.boxZoom.enable(); - */ - public enable() { - if (this.isEnabled()) { - return; - } - this.enabled = true; - } - - /** - * Disables the "box zoom" interaction. - * - * @example - * map.boxZoom.disable(); - */ - public disable() { - if (!this.isEnabled()) { - return; - } - this.enabled = false; - } - - public mousedown(e: MouseEvent, point: Point) { - if (!this.isEnabled()) { - return; - } - if (!(e.shiftKey && e.button === 0)) { - return; - } - - DOM.disableDrag(); - this.startPos = this.lastPos = point; - this.active = true; - } - - public mousemoveWindow(e: MouseEvent, point: Point) { - if (!this.active) { - return; - } - - const pos = point; - - if (this.lastPos.equals(pos) || (!this.box && pos.dist(this.startPos) < this.clickTolerance)) { - return; - } - - const p0 = this.startPos; - this.lastPos = pos; - - if (!this.box) { - this.box = DOM.create('div', 'l7-boxzoom', this.container); - this.container.classList.add('l7-crosshair'); - this.fireEvent('boxzoomstart', e); - } - const minX = Math.min(p0.x, pos.x); - const maxX = Math.max(p0.x, pos.x); - const minY = Math.min(p0.y, pos.y); - const maxY = Math.max(p0.y, pos.y); - - DOM.setTransform(this.box, `translate(${minX}px,${minY}px)`); - if (this.box) { - this.box.style.width = `${maxX - minX}px`; - this.box.style.height = `${maxY - minY}px`; - } - } - - public mouseupWindow(e: MouseEvent, point: Point) { - if (!this.active) { - return; - } - - if (e.button !== 0) { - return; - } - - const p0 = this.startPos; - const p1 = point; - - this.reset(); - - DOM.suppressClick(); - - if (p0.x === p1.x && p0.y === p1.y) { - this.fireEvent('boxzoomcancel', e); - } else { - this.map.emit('boxzoomend', new Event('boxzoomend', { originalEvent: e })); - return { - cameraAnimation: (map: Map) => - map.fitScreenCoordinates(p0, p1, this.map.getBearing(), { - linear: true, - }), - }; - } - } - - public keydown(e: KeyboardEvent) { - if (!this.active) { - return; - } - - if (e.keyCode === 27) { - this.reset(); - this.fireEvent('boxzoomcancel', e); - } - } - - public reset() { - this.active = false; - - this.container.classList.remove('l7-crosshair'); - - if (this.box) { - DOM.remove(this.box); - this.box = null; - } - - DOM.enableDrag(); - // @ts-ignore - delete this.startPos; - // @ts-ignore - delete this.lastPos; - } - - public fireEvent(type: string, e: any) { - return this.map.emit(type, new Event(type, { originalEvent: e })); - } -} - -export default BoxZoomHandler; diff --git a/packages/map/legacy/handler/click_zoom.ts b/packages/map/legacy/handler/click_zoom.ts deleted file mode 100644 index bc7ad6c6a74..00000000000 --- a/packages/map/legacy/handler/click_zoom.ts +++ /dev/null @@ -1,49 +0,0 @@ -// @ts-ignore -import type { EarthMap } from '../earthmap'; -import type Point from '../geo/point'; -import type { Map } from '../map'; - -export default class ClickZoomHandler { - private enabled: boolean; - private active: boolean; - - constructor() { - this.reset(); - } - - public reset() { - this.active = false; - } - - public dblclick(e: MouseEvent, point: Point) { - e.preventDefault(); - return { - cameraAnimation: (map: Map | EarthMap) => { - map.easeTo( - { - duration: 300, - zoom: map.getZoom() + (e.shiftKey ? -1 : 1), - around: map.unproject(point), - }, - { originalEvent: e }, - ); - }, - }; - } - - public enable() { - this.enabled = true; - } - public disable() { - this.enabled = false; - this.reset(); - } - - public isEnabled() { - return this.enabled; - } - - public isActive() { - return this.active; - } -} diff --git a/packages/map/legacy/handler/events/event.ts b/packages/map/legacy/handler/events/event.ts deleted file mode 100644 index cffa17bf63e..00000000000 --- a/packages/map/legacy/handler/events/event.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { lodashUtil } from '@antv/l7-utils'; -const { merge } = lodashUtil; - -export class Event { - public type: string; - constructor(type: string, data = {}) { - merge(this, data); - this.type = type; - } -} diff --git a/packages/map/legacy/handler/events/index.ts b/packages/map/legacy/handler/events/index.ts deleted file mode 100644 index 25fac6f13f0..00000000000 --- a/packages/map/legacy/handler/events/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import MapMouseEvent from './map_mouse_event'; -import MapTouchEvent from './map_touch_event'; -import MapWheelEvent from './map_wheel_event'; - -export { MapMouseEvent, MapTouchEvent, MapWheelEvent }; diff --git a/packages/map/legacy/handler/events/map_mouse_event.ts b/packages/map/legacy/handler/events/map_mouse_event.ts deleted file mode 100644 index 40f1ce69980..00000000000 --- a/packages/map/legacy/handler/events/map_mouse_event.ts +++ /dev/null @@ -1,67 +0,0 @@ -// @ts-ignore -// tslint:disable-next-line:no-submodule-imports -import type { EarthMap } from '../../earthmap'; -import type LngLat from '../../geo/lng_lat'; -import type Point from '../../geo/point'; -import type { Map } from '../../map'; -import DOM from '../../utils/dom'; -import { Event } from './event'; - -export default class MapMouseEvent extends Event { - /** - * `true` if `preventDefault` has been called. - * @private - */ - - public declare type: - | 'mousedown' - | 'mouseup' - | 'click' - | 'dblclick' - | 'mousemove' - | 'mouseover' - | 'mouseenter' - | 'mouseleave' - | 'mouseout' - | 'contextmenu'; - - /** - * The `Map` object that fired the event. - */ - public target: Map | EarthMap; - - /** - * The DOM event which caused the map event. - */ - public originalEvent: MouseEvent; - - /** - * The pixel coordinates of the mouse cursor, relative to the map and measured from the top left corner. - */ - public point: Point; - - /** - * The geographic location on the map of the mouse cursor. - */ - public lngLat: LngLat; - - public defaultPrevented: boolean; - - /** - * @private - */ - constructor(type: string, map: Map | EarthMap, originalEvent: MouseEvent) { - super(type); - const point = DOM.mousePos(map.getCanvasContainer(), originalEvent); - const lngLat = map.unproject(point); - - this.point = point; - this.lngLat = lngLat; - this.originalEvent = originalEvent; - this.defaultPrevented = false; - this.target = map; - } - public preventDefault() { - this.defaultPrevented = true; - } -} diff --git a/packages/map/legacy/handler/events/map_touch_event.ts b/packages/map/legacy/handler/events/map_touch_event.ts deleted file mode 100644 index 6baeb3fa228..00000000000 --- a/packages/map/legacy/handler/events/map_touch_event.ts +++ /dev/null @@ -1,91 +0,0 @@ -// @ts-ignore -import type { EarthMap } from '../../earthmap'; -import type LngLat from '../../geo/lng_lat'; -import Point from '../../geo/point'; -import type { Map } from '../../map'; -import DOM from '../../utils/dom'; -import { Event } from './event'; - -export default class MapTouchEvent extends Event { - /** - * The event type. - */ - public declare type: 'touchstart' | 'touchend' | 'touchcancel'; - - /** - * The `Map` object that fired the event. - */ - public target: Map | EarthMap; - - /** - * The DOM event which caused the map event. - */ - public originalEvent: TouchEvent; - - /** - * The geographic location on the map of the center of the touch event points. - */ - public lngLat: LngLat; - - /** - * The pixel coordinates of the center of the touch event points, relative to the map and measured from the top left - * corner. - */ - public point: Point; - - /** - * The array of pixel coordinates corresponding to a - * [touch event's `touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches) property. - */ - public points: Point[]; - - /** - * The geographical locations on the map corresponding to a - * [touch event's `touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches) property. - */ - public lngLats: LngLat[]; - - /** - * `true` if `preventDefault` has been called. - * @private - */ - - public defaultPrevented: boolean; - - /** - * @private - */ - constructor(type: string, map: Map | EarthMap, originalEvent: TouchEvent) { - super(type); - const touches = type === 'touchend' ? originalEvent.changedTouches : originalEvent.touches; - const points = DOM.touchPos(map.getCanvasContainer(), touches); - const lngLats = points.map((t: Point) => map.unproject(t)); - const point = points.reduce( - (prev: Point, curr: Point, i: number, arr: Point[]) => { - return prev.add(curr.div(arr.length)); - }, - new Point(0, 0), - ); - const lngLat = map.unproject(point); - - this.points = points; - this.point = point; - this.lngLats = lngLats; - this.lngLat = lngLat; - this.originalEvent = originalEvent; - this.defaultPrevented = false; - } - - /** - * Prevents subsequent default processing of the event by the map. - * - * Calling this method will prevent the following default map behaviors: - * - * * On `touchstart` events, the behavior of {@link DragPanHandler} - * * On `touchstart` events, the behavior of {@link TouchZoomRotateHandler} - * - */ - private preventDefault() { - this.defaultPrevented = true; - } -} diff --git a/packages/map/legacy/handler/events/map_wheel_event.ts b/packages/map/legacy/handler/events/map_wheel_event.ts deleted file mode 100644 index 03e8944fe8a..00000000000 --- a/packages/map/legacy/handler/events/map_wheel_event.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type { EarthMap } from '../../earthmap'; -import type { Map } from '../../map'; -import { Event } from './event'; - -export interface IMapBoxZoomEvent { - type: 'boxzoomstart' | 'boxzoomend' | 'boxzoomcancel'; - target: Map | EarthMap; - originalEvent: MouseEvent; -} -export default class MapWheelEvent extends Event { - /** - * The event type. - */ - public declare type: 'wheel'; - - /** - * The DOM event which caused the map event. - */ - public originalEvent: WheelEvent; - - public defaultPrevented: boolean; - - /** - * The `Map` object that fired the event. - */ - public target: Map | EarthMap; - - /** - * @private - */ - constructor(type: string, map: Map | EarthMap, originalEvent: WheelEvent) { - super(type); - this.originalEvent = originalEvent; - this.defaultPrevented = false; - } - - /** - * Prevents subsequent default processing of the event by the map. - * - * Calling this method will prevent the the behavior of {@link ScrollZoomHandler}. - */ - private preventDefault() { - this.defaultPrevented = true; - } -} diff --git a/packages/map/legacy/handler/events/render_event.ts b/packages/map/legacy/handler/events/render_event.ts deleted file mode 100644 index 04f458bfc6e..00000000000 --- a/packages/map/legacy/handler/events/render_event.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Event } from './event'; -export default class RenderFrameEvent extends Event { - public type: string = 'renderFrame'; - public timeStamp: number; - - constructor(type: string, timeStamp: number) { - super(type); - this.timeStamp = timeStamp; - } -} diff --git a/packages/map/legacy/handler/handler_inertia.ts b/packages/map/legacy/handler/handler_inertia.ts index 130dd7d9d45..89cb25fd72d 100644 --- a/packages/map/legacy/handler/handler_inertia.ts +++ b/packages/map/legacy/handler/handler_inertia.ts @@ -1,19 +1,15 @@ -// @ts-ignore -import Point from '../geo/point'; - -// tslint:disable-next-line:no-submodule-imports -import { lodashUtil } from '@antv/l7-utils'; -import type { EarthMap } from '../earthmap'; -import type { Map } from '../map'; -import { bezier, clamp, now } from '../util'; -import type { IDragPanOptions } from './shim/drag_pan'; -const { merge } = lodashUtil; +import Point from '@mapbox/point-geometry'; +import type { DragPanOptions } from './handler/shim/drag_pan'; +import type { Map } from './map'; +import { browser } from './util/browser'; +import { bezier, clamp, extend } from './util/util'; + const defaultInertiaOptions = { linearity: 0.3, easing: bezier(0, 0, 0.3, 1), }; -const defaultPanInertiaOptions = merge( +const defaultPanInertiaOptions = extend( { deceleration: 2500, maxSpeed: 1400, @@ -21,7 +17,7 @@ const defaultPanInertiaOptions = merge( defaultInertiaOptions, ); -const defaultZoomInertiaOptions = merge( +const defaultZoomInertiaOptions = extend( { deceleration: 20, maxSpeed: 1400, @@ -29,7 +25,7 @@ const defaultZoomInertiaOptions = merge( defaultInertiaOptions, ); -const defaultBearingInertiaOptions = merge( +const defaultBearingInertiaOptions = extend( { deceleration: 1000, maxSpeed: 360, @@ -37,7 +33,7 @@ const defaultBearingInertiaOptions = merge( defaultInertiaOptions, ); -const defaultPitchInertiaOptions = merge( +const defaultPitchInertiaOptions = extend( { deceleration: 1000, maxSpeed: 90, @@ -45,49 +41,45 @@ const defaultPitchInertiaOptions = merge( defaultInertiaOptions, ); -export interface IInertiaOptions { +export type InertiaOptions = { linearity: number; easing: (t: number) => number; deceleration: number; maxSpeed: number; -} - -export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent; +}; -export default class HandlerInertia { - private map: Map | EarthMap; - private inertiaBuffer: Array<{ +export class HandlerInertia { + _map: Map; + _inertiaBuffer: Array<{ time: number; - settings: { [key: string]: any }; + settings: any; }>; - constructor(map: Map | EarthMap) { - this.map = map; + constructor(map: Map) { + this._map = map; this.clear(); } - public clear() { - this.inertiaBuffer = []; + clear() { + this._inertiaBuffer = []; } - public record(settings: any) { - this.drainInertiaBuffer(); - this.inertiaBuffer.push({ time: now(), settings }); + record(settings: any) { + this._drainInertiaBuffer(); + this._inertiaBuffer.push({ time: browser.now(), settings }); } - public drainInertiaBuffer() { - const inertia = this.inertiaBuffer; - const nowTime = now(); - const cutoff = 160; // msec + _drainInertiaBuffer() { + const inertia = this._inertiaBuffer, + now = browser.now(), + cutoff = 160; //msec - while (inertia.length > 0 && nowTime - inertia[0].time > cutoff) { - inertia.shift(); - } + while (inertia.length > 0 && now - inertia[0].time > cutoff) inertia.shift(); } - public onMoveEnd(panInertiaOptions?: IDragPanOptions) { - this.drainInertiaBuffer(); - if (this.inertiaBuffer.length < 2) { + _onMoveEnd(panInertiaOptions?: DragPanOptions | boolean) { + this._drainInertiaBuffer(); + if (this._inertiaBuffer.length < 2) { return; } @@ -100,62 +92,56 @@ export default class HandlerInertia { around: undefined, }; - for (const { settings } of this.inertiaBuffer) { + for (const { settings } of this._inertiaBuffer) { deltas.zoom += settings.zoomDelta || 0; deltas.bearing += settings.bearingDelta || 0; deltas.pitch += settings.pitchDelta || 0; - if (settings.panDelta) { - deltas.pan._add(settings.panDelta); - } - if (settings.around) { - deltas.around = settings.around; - } - if (settings.pinchAround) { - deltas.pinchAround = settings.pinchAround; - } + if (settings.panDelta) deltas.pan._add(settings.panDelta); + if (settings.around) deltas.around = settings.around; + if (settings.pinchAround) deltas.pinchAround = settings.pinchAround; } - const lastEntry = this.inertiaBuffer[this.inertiaBuffer.length - 1]; - const duration = lastEntry.time - this.inertiaBuffer[0].time; + const lastEntry = this._inertiaBuffer[this._inertiaBuffer.length - 1]; + const duration = lastEntry.time - this._inertiaBuffer[0].time; - const easeOptions: { [key: string]: any } = {}; + const easeOptions = {} as any; if (deltas.pan.mag()) { const result = calculateEasing( deltas.pan.mag(), duration, - merge({}, defaultPanInertiaOptions, panInertiaOptions || {}), + extend({}, defaultPanInertiaOptions, panInertiaOptions || {}), ); easeOptions.offset = deltas.pan.mult(result.amount / deltas.pan.mag()); - easeOptions.center = this.map.transform.center; + easeOptions.center = this._map.transform.center; extendDuration(easeOptions, result); } if (deltas.zoom) { const result = calculateEasing(deltas.zoom, duration, defaultZoomInertiaOptions); - easeOptions.zoom = this.map.transform.zoom + result.amount; + easeOptions.zoom = this._map.transform.zoom + result.amount; extendDuration(easeOptions, result); } if (deltas.bearing) { const result = calculateEasing(deltas.bearing, duration, defaultBearingInertiaOptions); - easeOptions.bearing = this.map.transform.bearing + clamp(result.amount, -179, 179); + easeOptions.bearing = this._map.transform.bearing + clamp(result.amount, -179, 179); extendDuration(easeOptions, result); } if (deltas.pitch) { const result = calculateEasing(deltas.pitch, duration, defaultPitchInertiaOptions); - easeOptions.pitch = this.map.transform.pitch + result.amount; + easeOptions.pitch = this._map.transform.pitch + result.amount; extendDuration(easeOptions, result); } if (easeOptions.zoom || easeOptions.bearing) { const last = deltas.pinchAround === undefined ? deltas.around : deltas.pinchAround; - easeOptions.around = last ? this.map.unproject(last) : this.map.getCenter(); + easeOptions.around = last ? this._map.unproject(last) : this._map.getCenter(); } this.clear(); - return merge(easeOptions, { + return extend(easeOptions, { noMoveStart: true, }); } @@ -163,14 +149,14 @@ export default class HandlerInertia { // Unfortunately zoom, bearing, etc can't have different durations and easings so // we need to choose one. We use the longest duration and it's corresponding easing. -function extendDuration(easeOptions: any, result: any) { +function extendDuration(easeOptions, result) { if (!easeOptions.duration || easeOptions.duration < result.duration) { easeOptions.duration = result.duration; easeOptions.easing = result.easing; } } -function calculateEasing(amount: number, inertiaDuration: number, inertiaOptions: IInertiaOptions) { +function calculateEasing(amount, inertiaDuration: number, inertiaOptions) { const { maxSpeed, linearity, deceleration } = inertiaOptions; const speed = clamp((amount * linearity) / (inertiaDuration / 1000), -maxSpeed, maxSpeed); const duration = Math.abs(speed) / (deceleration * linearity); diff --git a/packages/map/legacy/handler/handler_manager.ts b/packages/map/legacy/handler/handler_manager.ts deleted file mode 100644 index 9e6a5244b1a..00000000000 --- a/packages/map/legacy/handler/handler_manager.ts +++ /dev/null @@ -1,597 +0,0 @@ -// @ts-ignore -// tslint:disable-next-line: no-submodule-imports -import { lodashUtil } from '@antv/l7-utils'; -import type { EarthMap } from '../earthmap'; -import Point from '../geo/point'; -import type { Map } from '../map'; -import DOM from '../utils/dom'; -import type { IHandler, IHandlerResult } from './IHandler'; -import BlockableMapEventHandler from './blockable_map_event'; -import BoxZoomHandler from './box_zoom'; -import ClickZoomHandler from './click_zoom'; -import { Event } from './events/event'; -import RenderFrameEvent from './events/render_event'; -import HandlerInertia from './handler_inertia'; -import KeyboardHandler from './keyboard'; -import MapEventHandler from './map_event'; -import { MousePanHandler, MousePitchHandler, MouseRotateHandler } from './mouse'; -import ScrollZoomHandler from './scroll_zoom'; -import DoubleClickZoomHandler from './shim/dblclick_zoom'; -import DragPanHandler from './shim/drag_pan'; -import DragRotateHandler from './shim/drag_rotate'; -import TouchZoomRotateHandler from './shim/touch_zoom_rotate'; -import TapDragZoomHandler from './tap/tap_drag_zoom'; -import TapZoomHandler from './tap/tap_zoom'; -import { TouchPanHandler, TouchPitchHandler, TouchRotateHandler, TouchZoomHandler } from './touch'; - -export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent; -const { merge } = lodashUtil; -const isMoving = (p: any) => p.zoom || p.drag || p.pitch || p.rotate; - -function hasChange(result: IHandlerResult) { - return ( - (result.panDelta && result.panDelta.mag()) || - result.zoomDelta || - result.bearingDelta || - result.pitchDelta - ); -} - -export interface IHandlerOptions { - interactive: boolean; - boxZoom: boolean; - dragRotate: boolean; - dragPan: boolean; - keyboard: boolean; - doubleClickZoom: boolean; - touchZoomRotate: boolean; - touchPitch: boolean; - trackResize: boolean; - renderWorldCopies: boolean; - bearingSnap: number; - clickTolerance: number; - pitchWithRotate: boolean; - pitchEnabled: boolean; - rotateEnabled: boolean; -} - -class HandlerManager { - private map: Map | EarthMap; - private el: HTMLElement; - private handlers: Array<{ - handlerName: string; - handler: IHandler; - allowed: any; - }>; - private eventsInProgress: any; - private frameId: number; - private inertia: HandlerInertia; - private bearingSnap: number; - private handlersById: { [key: string]: IHandler }; - private updatingCamera: boolean; - private changes: Array<[IHandlerResult, any, any]>; - private previousActiveHandlers: { [key: string]: IHandler }; - private bearingChanged: boolean; - private rotateEnabled: boolean; - private pitchEnabled: boolean; - private listeners: Array<[HTMLElement, string, void | { passive?: boolean; capture?: boolean }]>; - - constructor(map: Map | EarthMap, options: IHandlerOptions) { - this.map = map; - this.el = this.map.getCanvasContainer(); - this.handlers = []; - this.handlersById = {}; - this.changes = []; - - this.inertia = new HandlerInertia(map); - this.bearingSnap = options.bearingSnap; - this.rotateEnabled = options.rotateEnabled; - this.pitchEnabled = options.pitchEnabled; - this.previousActiveHandlers = {}; - - // Track whether map is currently moving, to compute start/move/end events - this.eventsInProgress = {}; - - this.addDefaultHandlers(options); - - const el = this.el; - this.listeners = []; - // l7 - mini - this.listeners = [ - // Bind touchstart and touchmove with passive: false because, even though - // they only fire a map events and therefore could theoretically be - // passive, binding with passive: true causes iOS not to respect - // e.preventDefault() in _other_ handlers, even if they are non-passive - // (see https://bugs.webkit.org/show_bug.cgi?id=184251) - [el, 'touchstart', { passive: false }], - [el, 'touchmove', { passive: false }], - [el, 'touchend', undefined], - [el, 'touchcancel', undefined], - - [el, 'mousedown', undefined], - [el, 'mousemove', undefined], - [el, 'mouseup', undefined], - - // Bind window-level event listeners for move and up/end events. In the absence of - // the pointer capture API, which is not supported by all necessary platforms, - // window-level event listeners give us the best shot at capturing events that - // fall outside the map canvas element. Use `{capture: true}` for the move event - // to prevent map move events from being fired during a drag. - // @ts-ignore - [window.document, 'mousemove', { capture: true }], - // @ts-ignore - [window.document, 'mouseup', undefined], - - [el, 'mouseover', undefined], - [el, 'mouseout', undefined], - [el, 'dblclick', undefined], - [el, 'click', undefined], - - [el, 'keydown', { capture: false }], - [el, 'keyup', undefined], - - [el, 'wheel', { passive: false }], - [el, 'contextmenu', undefined], - // @ts-ignore - [window, 'blur', undefined], - ]; - for (const [target, type, listenerOptions] of this.listeners) { - // @ts-ignore - DOM.addEventListener( - target, - type, - // @ts-ignore - target === window.document ? this.handleWindowEvent : this.handleEvent, - listenerOptions, - ); - } - } - - public destroy() { - for (const [target, type, listenerOptions] of this.listeners) { - // @ts-ignore - DOM.removeEventListener( - target, - type, - // @ts-ignore - target === window.document ? this.handleWindowEvent : this.handleEvent, - listenerOptions, - ); - } - } - - public stop() { - // do nothing if this method was triggered by a gesture update - if (this.updatingCamera) { - return; - } - - for (const { handler } of this.handlers) { - handler.reset(); - } - this.inertia.clear(); - this.fireEvents({}, {}); - this.changes = []; - } - - public isActive() { - for (const { handler } of this.handlers) { - if (handler.isActive()) { - return true; - } - } - return false; - } - - public isZooming() { - return !!this.eventsInProgress.zoom || this.map.scrollZoom.isZooming(); - } - public isRotating() { - return !!this.eventsInProgress.rotate; - } - - public isMoving() { - return Boolean(isMoving(this.eventsInProgress)) || this.isZooming(); - } - - public handleWindowEvent = (e: InputEvent) => { - this.handleEvent(e, `${e.type}Window`); - }; - - public handleEvent = (e: InputEvent | RenderFrameEvent, eventName?: string) => { - if (e.type === 'blur') { - this.stop(); - return; - } - this.updatingCamera = true; - const inputEvent = e.type === 'renderFrame' ? undefined : (e as InputEvent); - - /* - * We don't call e.preventDefault() for any events by default. - * Handlers are responsible for calling it where necessary. - */ - - const mergedIHandlerResult: IHandlerResult = { needsRenderFrame: false }; - const eventsInProgress: { [key: string]: any } = {}; - const activeHandlers: { [key: string]: any } = {}; - // @ts-ignore - const mapTouches = e.touches - ? // @ts-ignore - this.getMapTouches(e.touches as Touch[]) - : undefined; - const points = mapTouches - ? DOM.touchPos(this.el, mapTouches) - : DOM.mousePos(this.el, e as MouseEvent); - - for (const { handlerName, handler, allowed } of this.handlers) { - if (!handler.isEnabled()) { - continue; - } - let data: IHandlerResult; - if (this.blockedByActive(activeHandlers, allowed, handlerName)) { - handler.reset(); - } else { - const handerName = eventName || e.type; - // @ts-ignore - if (handler && handler[handerName]) { - // @ts-ignore - data = handler[handerName](e, points, mapTouches); - this.mergeIHandlerResult( - mergedIHandlerResult, - eventsInProgress, - data, - handlerName, - inputEvent, - ); - if (data && data.needsRenderFrame) { - this.triggerRenderFrame(); - } - } - } - // @ts-ignore - if (data || handler.isActive()) { - activeHandlers[handlerName] = handler; - } - } - - const deactivatedHandlers: { [key: string]: any } = {}; - for (const name in this.previousActiveHandlers) { - if (!activeHandlers[name]) { - deactivatedHandlers[name] = inputEvent; - } - } - this.previousActiveHandlers = activeHandlers; - if (Object.keys(deactivatedHandlers).length || hasChange(mergedIHandlerResult)) { - this.changes.push([mergedIHandlerResult, eventsInProgress, deactivatedHandlers]); - this.triggerRenderFrame(); - } - - if (Object.keys(activeHandlers).length || hasChange(mergedIHandlerResult)) { - this.map.stop(true); - } - - this.updatingCamera = false; - - const { cameraAnimation } = mergedIHandlerResult; - if (cameraAnimation) { - this.inertia.clear(); - this.fireEvents({}, {}); - this.changes = []; - cameraAnimation(this.map); - } - }; - - public mergeIHandlerResult( - mergedIHandlerResult: IHandlerResult, - eventsInProgress: { [key: string]: any }, - HandlerResult: IHandlerResult, - name: string, - e?: InputEvent, - ) { - if (!HandlerResult) { - return; - } - - merge(mergedIHandlerResult, HandlerResult); - - const eventData = { - handlerName: name, - originalEvent: HandlerResult.originalEvent || e, - }; - - // track which handler changed which camera property - if (HandlerResult.zoomDelta !== undefined) { - eventsInProgress.zoom = eventData; - } - if (HandlerResult.panDelta !== undefined) { - eventsInProgress.drag = eventData; - } - if (HandlerResult.pitchDelta !== undefined) { - eventsInProgress.pitch = eventData; - } - if (HandlerResult.bearingDelta !== undefined) { - eventsInProgress.rotate = eventData; - } - } - - public triggerRenderFrame() { - if (this.frameId === undefined) { - this.frameId = this.map.requestRenderFrame((timeStamp: number) => { - // @ts-ignore - delete this.frameId; - this.handleEvent(new RenderFrameEvent('renderFrame', timeStamp)); - this.applyChanges(); - }); - } - } - - private addDefaultHandlers(options: IHandlerOptions) { - const map = this.map; - const el = map.getCanvasContainer(); - this.add('mapEvent', new MapEventHandler(map, options)); - - const boxZoom = (map.boxZoom = new BoxZoomHandler(map, options)); - this.add('boxZoom', boxZoom); - - const tapZoom = new TapZoomHandler(); - const clickZoom = new ClickZoomHandler(); - map.doubleClickZoom = new DoubleClickZoomHandler(clickZoom, tapZoom); - this.add('tapZoom', tapZoom); - this.add('clickZoom', clickZoom); - - const tapDragZoom = new TapDragZoomHandler(); - this.add('tapDragZoom', tapDragZoom); - - const touchPitch = (map.touchPitch = new TouchPitchHandler()); - this.add('touchPitch', touchPitch); - - const mouseRotate = new MouseRotateHandler(options); - const mousePitch = new MousePitchHandler(options); - map.dragRotate = new DragRotateHandler(options, mouseRotate, mousePitch); - this.add('mouseRotate', mouseRotate, ['mousePitch']); - this.add('mousePitch', mousePitch, ['mouseRotate']); - - const mousePan = new MousePanHandler(options); - const touchPan = new TouchPanHandler(options); - map.dragPan = new DragPanHandler(el, mousePan, touchPan); - this.add('mousePan', mousePan); - this.add('touchPan', touchPan, ['touchZoom', 'touchRotate']); - - const touchRotate = new TouchRotateHandler(); - const touchZoom = new TouchZoomHandler(); - map.touchZoomRotate = new TouchZoomRotateHandler(el, touchZoom, touchRotate, tapDragZoom); - this.add('touchRotate', touchRotate, ['touchPan', 'touchZoom']); - this.add('touchZoom', touchZoom, ['touchPan', 'touchRotate']); - - const scrollZoom = (map.scrollZoom = new ScrollZoomHandler(map, this)); - this.add('scrollZoom', scrollZoom, ['mousePan']); - - const keyboard = (map.keyboard = new KeyboardHandler()); - this.add('keyboard', keyboard); - - this.add('blockableMapEvent', new BlockableMapEventHandler(map)); - - for (const name of [ - 'boxZoom', - 'doubleClickZoom', - 'tapDragZoom', - 'touchPitch', - 'dragRotate', - 'dragPan', - 'touchZoomRotate', - 'scrollZoom', - 'keyboard', - ]) { - // @ts-ignore - if (options.interactive && options[name]) { - // @ts-ignore - map[name].enable(options[name]); - } - } - } - - private add(handlerName: string, handler: IHandler, allowed?: string[]) { - this.handlers.push({ handlerName, handler, allowed }); - this.handlersById[handlerName] = handler; - } - - private blockedByActive( - activeHandlers: { [key: string]: IHandler }, - allowed: string[], - myName: string, - ) { - for (const name in activeHandlers) { - if (name === myName) { - continue; - } - if (!allowed || allowed.indexOf(name) < 0) { - return true; - } - } - return false; - } - - private getMapTouches(touches: Touch[]): Touch[] { - const mapTouches = []; - for (const t of touches) { - const target = t.target as Node; - if (this.el.contains(target)) { - mapTouches.push(t); - } - } - return mapTouches; - } - - private applyChanges() { - const combined: { [key: string]: any } = {}; - const combinedEventsInProgress = {}; - const combinedDeactivatedHandlers = {}; - - for (const [change, eventsInProgress, deactivatedHandlers] of this.changes) { - if (change.panDelta) { - combined.panDelta = (combined.panDelta || new Point(0, 0))._add(change.panDelta); - } - if (change.zoomDelta) { - combined.zoomDelta = (combined.zoomDelta || 0) + change.zoomDelta; - } - if (change.bearingDelta) { - combined.bearingDelta = (combined.bearingDelta || 0) + change.bearingDelta; - } - if (change.pitchDelta) { - combined.pitchDelta = (combined.pitchDelta || 0) + change.pitchDelta; - } - if (change.around !== undefined) { - combined.around = change.around; - } - if (change.pinchAround !== undefined) { - combined.pinchAround = change.pinchAround; - } - if (change.noInertia) { - combined.noInertia = change.noInertia; - } - - merge(combinedEventsInProgress, eventsInProgress); - merge(combinedDeactivatedHandlers, deactivatedHandlers); - } - - this.updateMapTransform(combined, combinedEventsInProgress, combinedDeactivatedHandlers); - this.changes = []; - } - - private updateMapTransform( - combinedResult: any, - combinedEventsInProgress: any, - deactivatedHandlers: any, - ) { - const map = this.map; - const tr = map.transform; - - if (!hasChange(combinedResult)) { - return this.fireEvents(combinedEventsInProgress, deactivatedHandlers); - } - const { panDelta, zoomDelta, bearingDelta, pitchDelta, pinchAround } = combinedResult; - let { around } = combinedResult; - - if (pinchAround !== undefined) { - around = pinchAround; - } - - // stop any ongoing camera animations (easeTo, flyTo) - map.stop(true); - - around = around || map.transform.centerPoint; - const loc = tr.pointLocation(panDelta ? around.sub(panDelta) : around); - if (bearingDelta && this.rotateEnabled) { - tr.bearing += bearingDelta; - } - if (pitchDelta && this.pitchEnabled) { - tr.pitch += pitchDelta; - } - if (zoomDelta) { - tr.zoom += zoomDelta; - } - tr.setLocationAtPoint(loc, around); - - this.map.update(); - if (!combinedResult.noInertia) { - this.inertia.record(combinedResult); - } - this.fireEvents(combinedEventsInProgress, deactivatedHandlers); - } - - private fireEvents( - newEventsInProgress: { [key: string]: any }, - deactivatedHandlers: { [key: string]: any }, - ) { - const wasMoving = isMoving(this.eventsInProgress); - const nowMoving = isMoving(newEventsInProgress); - - const startEvents: { [key: string]: any } = {}; - - for (const eventName in newEventsInProgress) { - if (newEventsInProgress[eventName]) { - const { originalEvent } = newEventsInProgress[eventName]; - if (!this.eventsInProgress[eventName]) { - startEvents[`${eventName}start`] = originalEvent; - } - - this.eventsInProgress[eventName] = newEventsInProgress[eventName]; - } - } - - // fire start events only after this.eventsInProgress has been updated - if (!wasMoving && nowMoving) { - this.fireEvent('movestart', nowMoving.originalEvent); - } - - for (const name in startEvents) { - if (startEvents[name]) { - this.fireEvent(name, startEvents[name]); - } - } - - if (newEventsInProgress.rotate) { - this.bearingChanged = true; - } - - if (nowMoving) { - this.fireEvent('move', nowMoving.originalEvent); - } - - for (const eventName in newEventsInProgress) { - if (newEventsInProgress[eventName]) { - const { originalEvent } = newEventsInProgress[eventName]; - this.fireEvent(eventName, originalEvent); - } - } - - const endEvents: { [key: string]: any } = {}; - - let originalEndEvent; - for (const eventName in this.eventsInProgress) { - if (this.eventsInProgress[eventName]) { - const { handlerName, originalEvent } = this.eventsInProgress[eventName]; - if (!this.handlersById[handlerName].isActive()) { - delete this.eventsInProgress[eventName]; - originalEndEvent = deactivatedHandlers[handlerName] || originalEvent; - endEvents[`${eventName}end`] = originalEndEvent; - } - } - } - - for (const name in endEvents) { - if (endEvents[name]) { - this.fireEvent(name, endEvents[name]); - } - } - - const stillMoving = isMoving(this.eventsInProgress); - if ((wasMoving || nowMoving) && !stillMoving) { - this.updatingCamera = true; - const inertialEase = this.inertia.onMoveEnd(this.map.dragPan.inertiaOptions); - - const shouldSnapToNorth = (bearing: number) => - bearing !== 0 && -this.bearingSnap < bearing && bearing < this.bearingSnap; - - if (inertialEase) { - if (shouldSnapToNorth(inertialEase.bearing || this.map.getBearing())) { - inertialEase.bearing = 0; - } - this.map.easeTo(inertialEase, { originalEvent: originalEndEvent }); - } else { - this.map.emit('moveend', new Event('moveend', { originalEvent: originalEndEvent })); - if (shouldSnapToNorth(this.map.getBearing())) { - this.map.resetNorth(); - } - } - this.bearingChanged = false; - this.updatingCamera = false; - } - } - - private fireEvent(type: string, e: any) { - this.map.emit(type, new Event(type, e ? { originalEvent: e } : {})); - } -} - -export default HandlerManager; diff --git a/packages/map/legacy/handler/handler_util.ts b/packages/map/legacy/handler/handler_util.ts deleted file mode 100644 index 57172f36ca8..00000000000 --- a/packages/map/legacy/handler/handler_util.ts +++ /dev/null @@ -1,10 +0,0 @@ -// @ts-ignore -import type Point from '../geo/point'; - -export function indexTouches(touches: Touch[], points: Point[]) { - const obj: { [key: string]: any } = {}; - for (let i = 0; i < touches.length; i++) { - obj[touches[i].identifier] = points[i]; - } - return obj; -} diff --git a/packages/map/legacy/handler/keyboard.ts b/packages/map/legacy/handler/keyboard.ts deleted file mode 100644 index c5503f10e7e..00000000000 --- a/packages/map/legacy/handler/keyboard.ts +++ /dev/null @@ -1,152 +0,0 @@ -import type { EarthMap } from '../earthmap'; -import type { Map } from '../map'; - -const defaultOptions = { - panStep: 100, - bearingStep: 15, - pitchStep: 10, -}; - -/** - * The `KeyboardHandler` allows the user to zoom, rotate, and pan the map using - * the following keyboard shortcuts: - * - * - `=` / `+`: Increase the zoom level by 1. - * - `Shift-=` / `Shift-+`: Increase the zoom level by 2. - * - `-`: Decrease the zoom level by 1. - * - `Shift--`: Decrease the zoom level by 2. - * - Arrow keys: Pan by 100 pixels. - * - `Shift+⇢`: Increase the rotation by 15 degrees. - * - `Shift+⇠`: Decrease the rotation by 15 degrees. - * - `Shift+⇡`: Increase the pitch by 10 degrees. - * - `Shift+⇣`: Decrease the pitch by 10 degrees. - */ -class KeyboardHandler { - private enabled: boolean; - private active: boolean; - private panStep: number; - private bearingStep: number; - private pitchStep: number; - - /** - * @private - */ - constructor() { - const stepOptions = defaultOptions; - this.panStep = stepOptions.panStep; - this.bearingStep = stepOptions.bearingStep; - this.pitchStep = stepOptions.pitchStep; - } - - public reset() { - this.active = false; - } - - public keydown(e: KeyboardEvent) { - if (e.altKey || e.ctrlKey || e.metaKey) { - return; - } - let zoomDir = 0; - let bearingDir = 0; - let pitchDir = 0; - let xDir = 0; - let yDir = 0; - - switch (e.keyCode) { - case 61: - case 107: - case 171: - case 187: - zoomDir = 1; - break; - - case 189: - case 109: - case 173: - zoomDir = -1; - break; - - case 37: - if (e.shiftKey) { - bearingDir = -1; - } else { - e.preventDefault(); - xDir = -1; - } - break; - - case 39: - if (e.shiftKey) { - bearingDir = 1; - } else { - e.preventDefault(); - xDir = 1; - } - break; - - case 38: - if (e.shiftKey) { - pitchDir = 1; - } else { - e.preventDefault(); - yDir = -1; - } - break; - - case 40: - if (e.shiftKey) { - pitchDir = -1; - } else { - e.preventDefault(); - yDir = 1; - } - break; - - default: - return; - } - - return { - cameraAnimation: (map: Map | EarthMap) => { - const zoom = map.getZoom(); - map.easeTo( - { - duration: 300, - easeId: 'keyboardHandler', - easing: easeOut, - - zoom: zoomDir ? Math.round(zoom) + zoomDir * (e.shiftKey ? 2 : 1) : zoom, - bearing: map.getBearing() + bearingDir * this.bearingStep, - pitch: map.getPitch() + pitchDir * this.pitchStep, - offset: [-xDir * this.panStep, -yDir * this.panStep], - center: map.getCenter(), - }, - { originalEvent: e }, - ); - }, - }; - } - - public enable() { - this.enabled = true; - } - - public disable() { - this.enabled = false; - this.reset(); - } - - public isEnabled() { - return this.enabled; - } - - public isActive() { - return this.active; - } -} - -function easeOut(t: number) { - return t * (2 - t); -} - -export default KeyboardHandler; diff --git a/packages/map/legacy/handler/map_event.ts b/packages/map/legacy/handler/map_event.ts deleted file mode 100644 index 4ed7e089c41..00000000000 --- a/packages/map/legacy/handler/map_event.ts +++ /dev/null @@ -1,107 +0,0 @@ -// @ts-ignore -import type { EarthMap } from '../earthmap'; -import type Point from '../geo/point'; -import type { Map } from '../map'; -import { MapMouseEvent, MapTouchEvent, MapWheelEvent } from './events'; - -export default class MapEventHandler { - private mousedownPos: Point; - private clickTolerance: number; - private map: Map | EarthMap; - - constructor(map: Map | EarthMap, options: { clickTolerance: number }) { - this.map = map; - this.clickTolerance = options.clickTolerance; - } - - public reset() { - // @ts-ignore - delete this.mousedownPos; - } - - public wheel(e: WheelEvent) { - // If mapEvent.preventDefault() is called by the user, prevent handlers such as: - // - ScrollZoom - return this.firePreventable(new MapWheelEvent(e.type, this.map, e)); - } - - public mousedown(e: MouseEvent, point: Point) { - this.mousedownPos = point; - // If mapEvent.preventDefault() is called by the user, prevent handlers such as: - // - MousePan - // - MouseRotate - // - MousePitch - // - DblclickHandler - return this.firePreventable(new MapMouseEvent(e.type, this.map, e)); - } - - public mouseup(e: MouseEvent) { - this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e)); - } - - public click(e: MouseEvent, point: Point) { - if (this.mousedownPos && this.mousedownPos.dist(point) >= this.clickTolerance) { - return; - } - this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e)); - } - - public dblclick(e: MouseEvent) { - // If mapEvent.preventDefault() is called by the user, prevent handlers such as: - // - DblClickZoom - return this.firePreventable(new MapMouseEvent(e.type, this.map, e)); - } - - public mouseover(e: MouseEvent) { - this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e)); - } - - public mouseout(e: MouseEvent) { - this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e)); - } - - public touchstart(e: TouchEvent) { - // If mapEvent.preventDefault() is called by the user, prevent handlers such as: - // - TouchPan - // - TouchZoom - // - TouchRotate - // - TouchPitch - // - TapZoom - // - SwipeZoom - return this.firePreventable(new MapTouchEvent(e.type, this.map, e)); - } - - public touchmove(e: TouchEvent) { - this.map.emit(e.type, new MapTouchEvent(e.type, this.map, e)); - } - - public touchend(e: TouchEvent) { - this.map.emit(e.type, new MapTouchEvent(e.type, this.map, e)); - } - - public touchcancel(e: TouchEvent) { - this.map.emit(e.type, new MapTouchEvent(e.type, this.map, e)); - } - - public firePreventable(mapEvent: MapMouseEvent | MapTouchEvent | MapWheelEvent) { - this.map.emit(mapEvent.type, mapEvent); - if (mapEvent.defaultPrevented) { - // returning an object marks the handler as active and resets other handlers - return {}; - } - } - - public isEnabled() { - return true; - } - - public isActive() { - return false; - } - public enable() { - return false; - } - public disable() { - return false; - } -} diff --git a/packages/map/legacy/handler/mouse/index.ts b/packages/map/legacy/handler/mouse/index.ts deleted file mode 100644 index c73c9a86101..00000000000 --- a/packages/map/legacy/handler/mouse/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import MousePanHandler from './mousepan_handler'; -import MouseRotateHandler from './mousepitch_hander'; -import MousePitchHandler from './mouserotate_hander'; - -export { MousePanHandler, MousePitchHandler, MouseRotateHandler }; diff --git a/packages/map/legacy/handler/mouse/mouse_handler.ts b/packages/map/legacy/handler/mouse/mouse_handler.ts deleted file mode 100644 index 886a1da7ebc..00000000000 --- a/packages/map/legacy/handler/mouse/mouse_handler.ts +++ /dev/null @@ -1,111 +0,0 @@ -// @ts-ignore -import type Point from '../../geo/point'; -import DOM from '../../utils/dom'; -import { buttonStillPressed } from './util'; -export default class MouseHandler { - protected enabled: boolean; - protected active: boolean; - protected lastPoint: Point; - protected eventButton: 1 | 2; - protected moved: boolean; - protected clickTolerance: number; - - constructor(options: { clickTolerance: number }) { - this.reset(); - this.clickTolerance = options.clickTolerance || 1; - } - - public reset() { - this.active = false; - this.moved = false; - // @ts-ignore - delete this.lastPoint; - // @ts-ignore - delete this.eventButton; - } - - public mousedown(e: MouseEvent, point: Point) { - if (this.lastPoint) { - return; - } - - const eventButton = DOM.mouseButton(e); - if (!this.correctButton(e, eventButton)) { - return; - } - - this.lastPoint = point; - this.eventButton = eventButton; - } - - public mousemoveWindow(e: MouseEvent, point: Point) { - const lastPoint = this.lastPoint; - if (!lastPoint) { - return; - } - e.preventDefault(); - - if (buttonStillPressed(e, this.eventButton)) { - // Some browsers don't fire a `mouseup` when the mouseup occurs outside - // the window or iframe: - // https://github.com/mapbox/mapbox-gl-js/issues/4622 - // - // If the button is no longer pressed during this `mousemove` it may have - // been released outside of the window or iframe. - this.reset(); - return; - } - - if (!this.moved && point.dist(lastPoint) < this.clickTolerance) { - return; - } - this.moved = true; - this.lastPoint = point; - - // implemented by child class - return this.move(lastPoint, point); - } - - public mouseupWindow(e: MouseEvent) { - if (!this.lastPoint) { - return; - } - const eventButton = DOM.mouseButton(e); - if (eventButton !== this.eventButton) { - return; - } - if (this.moved) { - DOM.suppressClick(); - } - this.reset(); - } - - public enable() { - this.enabled = true; - } - - public disable() { - this.enabled = false; - this.reset(); - } - - public isEnabled() { - return this.enabled; - } - - public isActive() { - return this.active; - } - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - protected correctButton(e: MouseEvent, button: number) { - // eslint-disable-line - return false; // implemented by child - } - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - protected move(lastPoint: Point, point: Point) { - // eslint-disable-line - return; // implemented by child - } -} diff --git a/packages/map/legacy/handler/mouse/mousepan_handler.ts b/packages/map/legacy/handler/mouse/mousepan_handler.ts deleted file mode 100644 index 17786d185ba..00000000000 --- a/packages/map/legacy/handler/mouse/mousepan_handler.ts +++ /dev/null @@ -1,22 +0,0 @@ -// @ts-ignore -import type Point from '../../geo/point'; -import MouseHandler from './mouse_handler'; -import { LEFT_BUTTON } from './util'; -export default class MousePanHandler extends MouseHandler { - public mousedown(e: MouseEvent, point: Point) { - super.mousedown(e, point); - if (this.lastPoint) { - this.active = true; - } - } - - public move(lastPoint: Point, point: Point) { - return { - around: point, - panDelta: point.sub(lastPoint), - }; - } - protected correctButton(e: MouseEvent, button: number) { - return button === LEFT_BUTTON && !e.ctrlKey; - } -} diff --git a/packages/map/legacy/handler/mouse/mousepitch_hander.ts b/packages/map/legacy/handler/mouse/mousepitch_hander.ts deleted file mode 100644 index 315c2eb97e4..00000000000 --- a/packages/map/legacy/handler/mouse/mousepitch_hander.ts +++ /dev/null @@ -1,24 +0,0 @@ -// @ts-ignore -import type Point from '../../geo/point'; -import MouseHandler from './mouse_handler'; -import { LEFT_BUTTON, RIGHT_BUTTON } from './util'; -export default class MousePitchHandler extends MouseHandler { - public correctButton(e: MouseEvent, button: number) { - return (button === LEFT_BUTTON && e.ctrlKey) || button === RIGHT_BUTTON; - } - - public move(lastPoint: Point, point: Point) { - const degreesPerPixelMoved = -0.5; - const pitchDelta = (point.y - lastPoint.y) * degreesPerPixelMoved; - if (pitchDelta) { - this.active = true; - return { pitchDelta }; - } - } - - public contextmenu(e: MouseEvent) { - // prevent browser context menu when necessary; we don't allow it with rotation - // because we can't discern rotation gesture start from contextmenu on Mac - e.preventDefault(); - } -} diff --git a/packages/map/legacy/handler/mouse/mouserotate_hander.ts b/packages/map/legacy/handler/mouse/mouserotate_hander.ts deleted file mode 100644 index dd91a3ee535..00000000000 --- a/packages/map/legacy/handler/mouse/mouserotate_hander.ts +++ /dev/null @@ -1,23 +0,0 @@ -// @ts-ignore -import type Point from '../../geo/point'; -import MouseHandler from './mouse_handler'; -import { LEFT_BUTTON, RIGHT_BUTTON } from './util'; -export default class MouseRotateHandler extends MouseHandler { - public contextmenu(e: MouseEvent) { - // prevent browser context menu when necessary; we don't allow it with rotation - // because we can't discern rotation gesture start from contextmenu on Mac - e.preventDefault(); - } - protected correctButton(e: MouseEvent, button: number) { - return (button === LEFT_BUTTON && e.ctrlKey) || button === RIGHT_BUTTON; - } - - protected move(lastPoint: Point, point: Point) { - const degreesPerPixelMoved = 0.8; - const bearingDelta = (point.x - lastPoint.x) * degreesPerPixelMoved; - if (bearingDelta) { - this.active = true; - return { bearingDelta }; - } - } -} diff --git a/packages/map/legacy/handler/mouse/util.ts b/packages/map/legacy/handler/mouse/util.ts deleted file mode 100644 index ab865442111..00000000000 --- a/packages/map/legacy/handler/mouse/util.ts +++ /dev/null @@ -1,13 +0,0 @@ -export const LEFT_BUTTON = 0; -export const RIGHT_BUTTON = 2; - -// the values for each button in MouseEvent.buttons -export const BUTTONS_FLAGS: { [key: number]: number } = { - [LEFT_BUTTON]: 1, - [RIGHT_BUTTON]: 2, -}; - -export function buttonStillPressed(e: MouseEvent, button: 1 | 2) { - const flag = BUTTONS_FLAGS[button]; - return e.buttons === undefined || (e.buttons & flag) !== flag; -} diff --git a/packages/map/legacy/handler/scroll_zoom.ts b/packages/map/legacy/handler/scroll_zoom.ts deleted file mode 100644 index fd767548aac..00000000000 --- a/packages/map/legacy/handler/scroll_zoom.ts +++ /dev/null @@ -1,362 +0,0 @@ -// @ts-ignore -import type { EarthMap } from '../earthmap'; -import LngLat from '../geo/lng_lat'; -import type Point from '../geo/point'; -import type { Map } from '../map'; -import { bezier, ease, interpolate, now } from '../util'; -import DOM from '../utils/dom'; -import type HandlerManager from './handler_manager'; - -// deltaY value for mouse scroll wheel identification -const wheelZoomDelta = 4.000244140625; - -// These magic numbers control the rate of zoom. Trackpad events fire at a greater -// frequency than mouse scroll wheel, so reduce the zoom rate per wheel tick -const defaultZoomRate = 1 / 100; -const wheelZoomRate = 1 / 450; - -// upper bound on how much we scale the map in any single render frame; this -// is used to limit zoom rate in the case of very fast scrolling -const maxScalePerFrame = 2; - -/** - * The `ScrollZoomHandler` allows the user to zoom the map by scrolling. - */ -class ScrollZoomHandler { - private map: Map | EarthMap; - private el: HTMLElement; - private enabled: boolean; - private active: boolean; - private zooming: boolean; - private aroundCenter: boolean; - private around: LngLat; - private aroundPoint: Point; - private type: 'wheel' | 'trackpad' | null; - private lastValue: number; - private timeout: number | null; // used for delayed-handling of a single wheel movement - private finishTimeout: number; // used to delay final '{move,zoom}end' events - - private lastWheelEvent: any; - private lastWheelEventTime: number; - - private startZoom: number; - private targetZoom: number; - private delta: number; - private easing: (time: number) => number; - private prevEase: { - start: number; - duration: number; - easing: (_: number) => number; - }; - - private frameId: boolean | null; - private handler: HandlerManager; - - private defaultZoomRate: number; - private wheelZoomRate: number; - - /** - * @private - */ - constructor(map: Map | EarthMap, handler: HandlerManager) { - this.map = map; - this.el = map.getCanvasContainer(); - this.handler = handler; - - this.delta = 0; - this.defaultZoomRate = defaultZoomRate; - this.wheelZoomRate = wheelZoomRate; - } - - /** - * Set the zoom rate of a trackpad - * @param {number} [zoomRate=1/100] The rate used to scale trackpad movement to a zoom value. - * @example - * // Speed up trackpad zoom - * map.scrollZoom.setZoomRate(1/25); - */ - public setZoomRate(zoomRate: number) { - this.defaultZoomRate = zoomRate; - } - - /** - * Set the zoom rate of a mouse wheel - * @param {number} [wheelZoomRate=1/450] The rate used to scale mouse wheel movement to a zoom value. - * @example - * // Slow down zoom of mouse wheel - * map.scrollZoom.setWheelZoomRate(1/600); - */ - public setWheelZoomRate(zoomRate: number) { - this.wheelZoomRate = zoomRate; - } - - /** - * Returns a Boolean indicating whether the "scroll to zoom" interaction is enabled. - * - * @returns {boolean} `true` if the "scroll to zoom" interaction is enabled. - */ - public isEnabled() { - return !!this.enabled; - } - - /* - * Active state is turned on and off with every scroll wheel event and is set back to false before the map - * render is called, so _active is not a good candidate for determining if a scroll zoom animation is in - * progress. - */ - public isActive() { - return !!this.active || this.finishTimeout !== undefined; - } - - public isZooming() { - return !!this.zooming; - } - - /** - * Enables the "scroll to zoom" interaction. - * - * @param {Object} [options] Options object. - * @param {string} [options.around] If "center" is passed, map will zoom around center of map - * - * @example - * map.scrollZoom.enable(); - * @example - * map.scrollZoom.enable({ around: 'center' }) - */ - public enable(options?: any) { - if (this.isEnabled()) { - return; - } - this.enabled = true; - this.aroundCenter = options && options.around === 'center'; - } - - /** - * Disables the "scroll to zoom" interaction. - * - * @example - * map.scrollZoom.disable(); - */ - public disable() { - if (!this.isEnabled()) { - return; - } - this.enabled = false; - } - - public wheel(e: WheelEvent) { - if (!this.isEnabled()) { - return; - } - // Remove `any` cast when https://github.com/facebook/flow/issues/4879 is fixed. - let value = e.deltaMode === window.WheelEvent.DOM_DELTA_LINE ? e.deltaY * 40 : e.deltaY; - const nowTime = now(); - const timeDelta = nowTime - (this.lastWheelEventTime || 0); - - this.lastWheelEventTime = nowTime; - - if (value !== 0 && value % wheelZoomDelta === 0) { - // This one is definitely a mouse wheel event. - this.type = 'wheel'; - } else if (value !== 0 && Math.abs(value) < 4) { - // This one is definitely a trackpad event because it is so small. - this.type = 'trackpad'; - } else if (timeDelta > 400) { - // This is likely a new scroll action. - this.type = null; - this.lastValue = value; - - // Start a timeout in case this was a singular event, and dely it by up to 40ms. - // @ts-ignore - this.timeout = setTimeout(this.onTimeout, 40, e); - } else if (!this.type) { - // This is a repeating event, but we don't know the type of event just yet. - // If the delta per time is small, we assume it's a fast trackpad; otherwise we switch into wheel mode. - this.type = Math.abs(timeDelta * value) < 200 ? 'trackpad' : 'wheel'; - - // Make sure our delayed event isn't fired again, because we accumulate - // the previous event (which was less than 40ms ago) into this event. - if (this.timeout) { - clearTimeout(this.timeout); - this.timeout = null; - value += this.lastValue; - } - } - - // Slow down zoom if shift key is held for more precise zooming - if (e.shiftKey && value) { - value = value / 4; - } - // Only fire the callback if we actually know what type of scrolling device the user uses. - if (this.type) { - this.lastWheelEvent = e; - this.delta -= value; - if (!this.active) { - this.start(e); - } - } - - e.preventDefault(); - } - - public renderFrame() { - return this.onScrollFrame(); - } - - public reset() { - this.active = false; - } - - private onScrollFrame = () => { - if (!this.frameId) { - return; - } - this.frameId = null; - - if (!this.isActive()) { - return; - } - const tr = this.map.transform; - - // if we've had scroll events since the last render frame, consume the - // accumulated delta, and update the target zoom level accordingly - if (this.delta !== 0) { - // For trackpad events and single mouse wheel ticks, use the default zoom rate - const zoomRate = - this.type === 'wheel' && Math.abs(this.delta) > wheelZoomDelta - ? this.wheelZoomRate - : this.defaultZoomRate; - // Scale by sigmoid of scroll wheel delta. - let scale = maxScalePerFrame / (1 + Math.exp(-Math.abs(this.delta * zoomRate))); - - if (this.delta < 0 && scale !== 0) { - scale = 1 / scale; - } - - const fromScale = - typeof this.targetZoom === 'number' ? tr.zoomScale(this.targetZoom) : tr.scale; - this.targetZoom = Math.min(tr.maxZoom, Math.max(tr.minZoom, tr.scaleZoom(fromScale * scale))); - - // if this is a mouse wheel, refresh the starting zoom and easing - // function we're using to smooth out the zooming between wheel - // events - if (this.type === 'wheel') { - this.startZoom = tr.zoom; - this.easing = this.smoothOutEasing(200); - } - - this.delta = 0; - } - - const targetZoom = typeof this.targetZoom === 'number' ? this.targetZoom : tr.zoom; - const startZoom = this.startZoom; - const easing = this.easing; - - let finished = false; - let zoom; - if (this.type === 'wheel' && startZoom && easing) { - const t = Math.min((now() - this.lastWheelEventTime) / 200, 1); - const k = easing(t); - zoom = interpolate(startZoom, targetZoom, k); - if (t < 1) { - if (!this.frameId) { - this.frameId = true; - } - } else { - finished = true; - } - } else { - zoom = targetZoom; - finished = true; - } - - this.active = true; - - if (finished) { - this.active = false; - // @ts-ignore - this.finishTimeout = setTimeout(() => { - this.zooming = false; - this.handler.triggerRenderFrame(); - // @ts-ignore - delete this.targetZoom; - // @ts-ignore - delete this.finishTimeout; - }, 200); - } - - return { - noInertia: true, - needsRenderFrame: !finished, - zoomDelta: zoom - tr.zoom, - around: this.aroundPoint, - originalEvent: this.lastWheelEvent, - }; - }; - - private onTimeout(initialEvent: any) { - this.type = 'wheel'; - this.delta -= this.lastValue; - if (!this.active && this.start) { - this.start(initialEvent); - } - } - - private start(e: any) { - if (!this.delta) { - return; - } - - if (this.frameId) { - this.frameId = null; - } - - this.active = true; - if (!this.isZooming()) { - this.zooming = true; - } - - if (this.finishTimeout) { - clearTimeout(this.finishTimeout); - // @ts-ignore - delete this.finishTimeout; - } - - const pos = DOM.mousePos(this.el, e); - - this.around = LngLat.convert( - this.aroundCenter ? this.map.getCenter() : this.map.unproject(pos), - ); - this.aroundPoint = this.map.transform.locationPoint(this.around); - if (!this.frameId) { - this.frameId = true; - this.handler.triggerRenderFrame(); - } - } - - private smoothOutEasing(duration: number) { - let easing = ease; - - if (this.prevEase) { - const preEase = this.prevEase; - const t = (now() - preEase.start) / preEase.duration; - const speed = preEase.easing(t + 0.01) - preEase.easing(t); - - // Quick hack to make new bezier that is continuous with last - const x = (0.27 / Math.sqrt(speed * speed + 0.0001)) * 0.01; - const y = Math.sqrt(0.27 * 0.27 - x * x); - - easing = bezier(x, y, 0.25, 1); - } - - this.prevEase = { - start: now(), - duration, - easing, - }; - - return easing; - } -} - -export default ScrollZoomHandler; diff --git a/packages/map/legacy/handler/shim/dblclick_zoom.ts b/packages/map/legacy/handler/shim/dblclick_zoom.ts deleted file mode 100644 index 3d6a87ce4f6..00000000000 --- a/packages/map/legacy/handler/shim/dblclick_zoom.ts +++ /dev/null @@ -1,59 +0,0 @@ -import type ClickZoomHandler from '../click_zoom'; -import type TapZoomHandler from '../tap/tap_zoom'; - -/** - * The `DoubleClickZoomHandler` allows the user to zoom the map at a point by - * double clicking or double tapping. - */ -export default class DoubleClickZoomHandler { - private clickZoom: ClickZoomHandler; - private tapZoom: TapZoomHandler; - - /** - * @private - */ - constructor(clickZoom: ClickZoomHandler, TapZoom: TapZoomHandler) { - this.clickZoom = clickZoom; - this.tapZoom = TapZoom; - } - - /** - * Enables the "double click to zoom" interaction. - * - * @example - * map.doubleClickZoom.enable(); - */ - public enable() { - this.clickZoom.enable(); - this.tapZoom.enable(); - } - - /** - * Disables the "double click to zoom" interaction. - * - * @example - * map.doubleClickZoom.disable(); - */ - public disable() { - this.clickZoom.disable(); - this.tapZoom.disable(); - } - - /** - * Returns a Boolean indicating whether the "double click to zoom" interaction is enabled. - * - * @returns {boolean} `true` if the "double click to zoom" interaction is enabled. - */ - public isEnabled() { - return this.clickZoom.isEnabled() && this.tapZoom.isEnabled(); - } - - /** - * Returns a Boolean indicating whether the "double click to zoom" interaction is active, i.e. currently being used. - * - * @returns {boolean} `true` if the "double click to zoom" interaction is active. - */ - public isActive() { - return this.clickZoom.isActive() || this.tapZoom.isActive(); - } -} diff --git a/packages/map/legacy/handler/shim/drag_pan.ts b/packages/map/legacy/handler/shim/drag_pan.ts deleted file mode 100644 index 8b734189608..00000000000 --- a/packages/map/legacy/handler/shim/drag_pan.ts +++ /dev/null @@ -1,86 +0,0 @@ -import type { MousePanHandler } from '../mouse'; -import type { TouchPanHandler } from '../touch'; - -export interface IDragPanOptions { - linearity?: number; - easing?: (t: number) => number; - deceleration?: number; - maxSpeed?: number; -} - -/** - * The `DragPanHandler` allows the user to pan the map by clicking and dragging - * the cursor. - */ -export default class DragPanHandler { - public inertiaOptions: IDragPanOptions; - private el: HTMLElement; - private mousePan: MousePanHandler; - private touchPan: TouchPanHandler; - /** - * @private - */ - constructor(el: HTMLElement, mousePan: MousePanHandler, touchPan: TouchPanHandler) { - this.el = el; - this.mousePan = mousePan; - this.touchPan = touchPan; - } - - /** - * Enables the "drag to pan" interaction. - * - * @param {Object} [options] Options object - * @param {number} [options.linearity=0] factor used to scale the drag velocity - * @param {Function} [options.easing=bezier(0, 0, 0.3, 1)] easing function applled to `map.panTo` when applying the drag. - * @param {number} [options.maxSpeed=1400] the maximum value of the drag velocity. - * @param {number} [options.deceleration=2500] the rate at which the speed reduces after the pan ends. - * - * @example - * map.dragPan.enable(); - * @example - * map.dragPan.enable({ - * linearity: 0.3, - * easing: bezier(0, 0, 0.3, 1), - * maxSpeed: 1400, - * deceleration: 2500, - * }); - */ - public enable(options?: IDragPanOptions) { - this.inertiaOptions = options || {}; - this.mousePan.enable(); - this.touchPan.enable(); - - this.el.classList.add('l7-touch-drag-pan'); - } - - /** - * Disables the "drag to pan" interaction. - * - * @example - * map.dragPan.disable(); - */ - public disable() { - this.mousePan.disable(); - this.touchPan.disable(); - - this.el.classList.remove('l7-touch-drag-pan'); - } - - /** - * Returns a Boolean indicating whether the "drag to pan" interaction is enabled. - * - * @returns {boolean} `true` if the "drag to pan" interaction is enabled. - */ - public isEnabled() { - return this.mousePan.isEnabled() && this.touchPan.isEnabled(); - } - - /** - * Returns a Boolean indicating whether the "drag to pan" interaction is active, i.e. currently being used. - * - * @returns {boolean} `true` if the "drag to pan" interaction is active. - */ - public isActive() { - return this.mousePan.isActive() || this.touchPan.isActive(); - } -} diff --git a/packages/map/legacy/handler/shim/drag_rotate.ts b/packages/map/legacy/handler/shim/drag_rotate.ts deleted file mode 100644 index 9ebed7cf09d..00000000000 --- a/packages/map/legacy/handler/shim/drag_rotate.ts +++ /dev/null @@ -1,70 +0,0 @@ -import type { MousePitchHandler, MouseRotateHandler } from '../mouse'; - -/** - * The `DragRotateHandler` allows the user to rotate the map by clicking and - * dragging the cursor while holding the right mouse button or `ctrl` key. - */ -export default class DragRotateHandler { - private mouseRotate: MouseRotateHandler; - private mousePitch: MousePitchHandler; - private pitchWithRotate: boolean; - - /** - * @param {Object} [options] - * @param {number} [options.bearingSnap] The threshold, measured in degrees, that determines when the map's - * bearing will snap to north. - * @param {bool} [options.pitchWithRotate=true] Control the map pitch in addition to the bearing - * @private - */ - constructor( - options: { pitchWithRotate: boolean }, - mouseRotate: MouseRotateHandler, - mousePitch: MousePitchHandler, - ) { - this.pitchWithRotate = options.pitchWithRotate; - this.mouseRotate = mouseRotate; - this.mousePitch = mousePitch; - } - - /** - * Enables the "drag to rotate" interaction. - * - * @example - * map.dragRotate.enable(); - */ - public enable() { - this.mouseRotate.enable(); - if (this.pitchWithRotate) { - this.mousePitch.enable(); - } - } - - /** - * Disables the "drag to rotate" interaction. - * - * @example - * map.dragRotate.disable(); - */ - public disable() { - this.mouseRotate.disable(); - this.mousePitch.disable(); - } - - /** - * Returns a Boolean indicating whether the "drag to rotate" interaction is enabled. - * - * @returns {boolean} `true` if the "drag to rotate" interaction is enabled. - */ - public isEnabled() { - return this.mouseRotate.isEnabled() && (!this.pitchWithRotate || this.mousePitch.isEnabled()); - } - - /** - * Returns a Boolean indicating whether the "drag to rotate" interaction is active, i.e. currently being used. - * - * @returns {boolean} `true` if the "drag to rotate" interaction is active. - */ - public isActive() { - return this.mouseRotate.isActive() || this.mousePitch.isActive(); - } -} diff --git a/packages/map/legacy/handler/shim/touch_zoom_rotate.ts b/packages/map/legacy/handler/shim/touch_zoom_rotate.ts deleted file mode 100644 index 9f2583cfc86..00000000000 --- a/packages/map/legacy/handler/shim/touch_zoom_rotate.ts +++ /dev/null @@ -1,118 +0,0 @@ -import type TapDragZoomHandler from '../tap/tap_drag_zoom'; -import type { TouchRotateHandler, TouchZoomHandler } from '../touch'; - -/** - * The `TouchZoomRotateHandler` allows the user to zoom and rotate the map by - * pinching on a touchscreen. - * - * They can zoom with one finger by double tapping and dragging. On the second tap, - * hold the finger down and drag up or down to zoom in or out. - */ -export default class TouchZoomRotateHandler { - private el: HTMLElement; - private touchZoom: TouchZoomHandler; - private touchRotate: TouchRotateHandler; - private tapDragZoom: TapDragZoomHandler; - private rotationDisabled: boolean; - private enabled: boolean; - - /** - * @private - */ - constructor( - el: HTMLElement, - touchZoom: TouchZoomHandler, - touchRotate: TouchRotateHandler, - tapDragZoom: TapDragZoomHandler, - ) { - this.el = el; - this.touchZoom = touchZoom; - this.touchRotate = touchRotate; - this.tapDragZoom = tapDragZoom; - this.rotationDisabled = false; - this.enabled = true; - } - - /** - * Enables the "pinch to rotate and zoom" interaction. - * - * @param {Object} [options] Options object. - * @param {string} [options.around] If "center" is passed, map will zoom around the center - * - * @example - * map.touchZoomRotate.enable(); - * @example - * map.touchZoomRotate.enable({ around: 'center' }); - */ - public enable(options: { around?: 'center' }) { - this.touchZoom.enable(options); - if (!this.rotationDisabled) { - this.touchRotate.enable(options); - } - this.tapDragZoom.enable(); - - this.el.classList.add('l7-touch-zoom-rotate'); - } - - /** - * Disables the "pinch to rotate and zoom" interaction. - * - * @example - * map.touchZoomRotate.disable(); - */ - public disable() { - this.touchZoom.disable(); - this.touchRotate.disable(); - this.tapDragZoom.disable(); - - this.el.classList.remove('l7-touch-zoom-rotate'); - } - - /** - * Returns a Boolean indicating whether the "pinch to rotate and zoom" interaction is enabled. - * - * @returns {boolean} `true` if the "pinch to rotate and zoom" interaction is enabled. - */ - public isEnabled() { - return ( - this.touchZoom.isEnabled() && - (this.rotationDisabled || this.touchRotate.isEnabled()) && - this.tapDragZoom.isEnabled() - ); - } - - /** - * Returns true if the handler is enabled and has detected the start of a zoom/rotate gesture. - * - * @returns {boolean} //eslint-disable-line - */ - public isActive() { - return this.touchZoom.isActive() || this.touchRotate.isActive() || this.tapDragZoom.isActive(); - } - - /** - * Disables the "pinch to rotate" interaction, leaving the "pinch to zoom" - * interaction enabled. - * - * @example - * map.touchZoomRotate.disableRotation(); - */ - public disableRotation() { - this.rotationDisabled = true; - this.touchRotate.disable(); - } - - /** - * Enables the "pinch to rotate" interaction. - * - * @example - * map.touchZoomRotate.enable(); - * map.touchZoomRotate.enableRotation(); - */ - public enableRotation() { - this.rotationDisabled = false; - if (this.touchZoom.isEnabled()) { - this.touchRotate.enable(); - } - } -} diff --git a/packages/map/legacy/handler/tap/single_tap_recognizer.ts b/packages/map/legacy/handler/tap/single_tap_recognizer.ts deleted file mode 100644 index 81ba129bc8f..00000000000 --- a/packages/map/legacy/handler/tap/single_tap_recognizer.ts +++ /dev/null @@ -1,88 +0,0 @@ -// @ts-ignore -import Point from '../../geo/point'; -import { indexTouches } from '../handler_util'; - -function getCentroid(points: Point[]) { - const sum = new Point(0, 0); - for (const point of points) { - sum._add(point); - } - // @ts-ignore - return sum.div(points.length); -} - -export const MAX_TAP_INTERVAL = 500; -export const MAX_TOUCH_TIME = 500; -export const MAX_DIST = 30; - -export default class SingleTapRecognizer { - public numTouches: number; - public centroid: Point; - public startTime: number; - public aborted: boolean; - public touches: { [key: string]: Point }; - - constructor(options: { numTouches: number }) { - this.reset(); - this.numTouches = options.numTouches; - } - - public reset() { - // @ts-ignore - delete this.centroid; - // @ts-ignore - delete this.startTime; - // @ts-ignore - delete this.touches; - this.aborted = false; - } - - public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - if (this.centroid || mapTouches.length > this.numTouches) { - this.aborted = true; - } - if (this.aborted) { - return; - } - - if (this.startTime === undefined) { - this.startTime = e.timeStamp; - } - - if (mapTouches.length === this.numTouches) { - this.centroid = getCentroid(points); - this.touches = indexTouches(mapTouches, points); - } - } - - public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - if (this.aborted || !this.centroid) { - return; - } - - const newTouches = indexTouches(mapTouches, points); - for (const id in this.touches) { - if (this.touches[id]) { - const prevPos = this.touches[id]; - const pos = newTouches[id]; - if (!pos || pos.dist(prevPos) > MAX_DIST) { - this.aborted = true; - } - } - } - } - - public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - if (!this.centroid || e.timeStamp - this.startTime > MAX_TOUCH_TIME) { - this.aborted = true; - } - - if (mapTouches.length === 0) { - const centroid = !this.aborted && this.centroid; - this.reset(); - if (centroid) { - return centroid; - } - } - } -} diff --git a/packages/map/legacy/handler/tap/tap_drag_zoom.ts b/packages/map/legacy/handler/tap/tap_drag_zoom.ts deleted file mode 100644 index 2cdb216b38d..00000000000 --- a/packages/map/legacy/handler/tap/tap_drag_zoom.ts +++ /dev/null @@ -1,105 +0,0 @@ -// @ts-ignore -import type Point from '../../geo/point'; -import { MAX_TAP_INTERVAL } from './single_tap_recognizer'; -import TapRecognizer from './tap_recognizer'; - -export default class TapDragZoomHandler { - public enabled: boolean; - public active: boolean; - public swipePoint: Point; - public swipeTouch: number; - public tapTime: number; - public tap: TapRecognizer; - - constructor() { - this.tap = new TapRecognizer({ - numTouches: 1, - numTaps: 1, - }); - - this.reset(); - } - - public reset() { - this.active = false; - // @ts-ignore - delete this.swipePoint; - // @ts-ignore - delete this.swipeTouch; - // @ts-ignore - delete this.tapTime; - this.tap.reset(); - } - - public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - if (this.swipePoint) { - return; - } - - if (this.tapTime && e.timeStamp - this.tapTime > MAX_TAP_INTERVAL) { - this.reset(); - } - - if (!this.tapTime) { - this.tap.touchstart(e, points, mapTouches); - } else if (mapTouches.length > 0) { - this.swipePoint = points[0]; - this.swipeTouch = mapTouches[0].identifier; - } - } - - public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - if (!this.tapTime) { - this.tap.touchmove(e, points, mapTouches); - } else if (this.swipePoint) { - if (mapTouches[0].identifier !== this.swipeTouch) { - return; - } - - const newSwipePoint = points[0]; - const dist = newSwipePoint.y - this.swipePoint.y; - this.swipePoint = newSwipePoint; - - e.preventDefault(); - this.active = true; - - return { - zoomDelta: dist / 128, - }; - } - } - - public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - if (!this.tapTime) { - const point = this.tap.touchend(e, points, mapTouches); - if (point) { - this.tapTime = e.timeStamp; - } - } else if (this.swipePoint) { - if (mapTouches.length === 0) { - this.reset(); - } - } - } - - public touchcancel() { - this.reset(); - } - - public enable() { - this.enabled = true; - } - - public disable() { - this.enabled = false; - this.reset(); - } - - public isEnabled() { - return this.enabled; - } - - public isActive() { - return this.active; - } -} diff --git a/packages/map/legacy/handler/tap/tap_recognizer.ts b/packages/map/legacy/handler/tap/tap_recognizer.ts deleted file mode 100644 index 78e7ad15aef..00000000000 --- a/packages/map/legacy/handler/tap/tap_recognizer.ts +++ /dev/null @@ -1,54 +0,0 @@ -// @ts-ignore -import type Point from '../../geo/point'; -import SingleTapRecognizer, { MAX_DIST, MAX_TAP_INTERVAL } from './single_tap_recognizer'; - -export default class TapRecognizer { - public singleTap: SingleTapRecognizer; - public numTaps: number; - public lastTime: number; - public lastTap: Point; - public count: number; - - constructor(options: { numTaps: number; numTouches: number }) { - this.singleTap = new SingleTapRecognizer(options); - this.numTaps = options.numTaps; - this.reset(); - } - - public reset() { - this.lastTime = Infinity; - // @ts-ignore - delete this.lastTap; - this.count = 0; - this.singleTap.reset(); - } - - public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - this.singleTap.touchstart(e, points, mapTouches); - } - - public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - this.singleTap.touchmove(e, points, mapTouches); - } - - public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - const tap = this.singleTap.touchend(e, points, mapTouches); - if (tap) { - const soonEnough = e.timeStamp - this.lastTime < MAX_TAP_INTERVAL; - const closeEnough = !this.lastTap || this.lastTap.dist(tap) < MAX_DIST; - - if (!soonEnough || !closeEnough) { - this.reset(); - } - - this.count++; - this.lastTime = e.timeStamp; - this.lastTap = tap; - - if (this.count === this.numTaps) { - this.reset(); - return tap; - } - } - } -} diff --git a/packages/map/legacy/handler/tap/tap_zoom.ts b/packages/map/legacy/handler/tap/tap_zoom.ts deleted file mode 100644 index 3af5fe748a6..00000000000 --- a/packages/map/legacy/handler/tap/tap_zoom.ts +++ /dev/null @@ -1,100 +0,0 @@ -// @ts-ignore -import type { EarthMap } from '../../earthmap'; -import type Point from '../../geo/point'; -import type { Map } from '../../map'; -import TapRecognizer from './tap_recognizer'; - -export default class TapZoomHandler { - public enabled: boolean; - public active: boolean; - public zoomIn: TapRecognizer; - public zoomOut: TapRecognizer; - - constructor() { - this.zoomIn = new TapRecognizer({ - numTouches: 1, - numTaps: 2, - }); - - this.zoomOut = new TapRecognizer({ - numTouches: 2, - numTaps: 1, - }); - - this.reset(); - } - - public reset() { - this.active = false; - this.zoomIn.reset(); - this.zoomOut.reset(); - } - - public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - this.zoomIn.touchstart(e, points, mapTouches); - this.zoomOut.touchstart(e, points, mapTouches); - } - - public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - this.zoomIn.touchmove(e, points, mapTouches); - this.zoomOut.touchmove(e, points, mapTouches); - } - - public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - const zoomInPoint = this.zoomIn.touchend(e, points, mapTouches); - const zoomOutPoint = this.zoomOut.touchend(e, points, mapTouches); - - if (zoomInPoint) { - this.active = true; - e.preventDefault(); - setTimeout(() => this.reset(), 0); - return { - cameraAnimation: (map: Map | EarthMap) => - map.easeTo( - { - duration: 300, - zoom: map.getZoom() + 1, - around: map.unproject(zoomInPoint), - }, - { originalEvent: e }, - ), - }; - } else if (zoomOutPoint) { - this.active = true; - e.preventDefault(); - setTimeout(() => this.reset(), 0); - return { - cameraAnimation: (map: Map | EarthMap) => - map.easeTo( - { - duration: 300, - zoom: map.getZoom() - 1, - around: map.unproject(zoomOutPoint), - }, - { originalEvent: e }, - ), - }; - } - } - - public touchcancel() { - this.reset(); - } - - public enable() { - this.enabled = true; - } - - public disable() { - this.enabled = false; - this.reset(); - } - - public isEnabled() { - return this.enabled; - } - - public isActive() { - return this.active; - } -} diff --git a/packages/map/legacy/handler/touch/index.ts b/packages/map/legacy/handler/touch/index.ts deleted file mode 100644 index 80d1b30f531..00000000000 --- a/packages/map/legacy/handler/touch/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import TouchPanHandler from './touch_pan'; -import TouchPitchHandler from './touch_pitch'; -import TouchRotateHandler from './touch_rotate'; -import TouchZoomHandler from './touch_zoom'; - -export { TouchPanHandler, TouchPitchHandler, TouchRotateHandler, TouchZoomHandler }; diff --git a/packages/map/legacy/handler/touch/touch_pan.ts b/packages/map/legacy/handler/touch/touch_pan.ts deleted file mode 100644 index c99b94c209a..00000000000 --- a/packages/map/legacy/handler/touch/touch_pan.ts +++ /dev/null @@ -1,108 +0,0 @@ -// @ts-ignore -import Point from '../../geo/point'; -import { indexTouches } from '../handler_util'; - -export default class TouchPanHandler { - public enabled: boolean; - public active: boolean; - public touches: { [key: string]: Point }; - public minTouches: number; - public clickTolerance: number; - public sum: Point; - - constructor(options: { clickTolerance: number }) { - this.minTouches = 1; - this.clickTolerance = options.clickTolerance || 1; - this.reset(); - } - - public reset() { - this.active = false; - this.touches = {}; - this.sum = new Point(0, 0); - } - - public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - return this.calculateTransform(e, points, mapTouches); - } - - public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - if (!this.active) { - return; - } - e.preventDefault(); - return this.calculateTransform(e, points, mapTouches); - } - - public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - this.calculateTransform(e, points, mapTouches); - - if (this.active && mapTouches.length < this.minTouches) { - this.reset(); - } - } - - public touchcancel() { - this.reset(); - } - public enable() { - this.enabled = true; - } - - public disable() { - this.enabled = false; - this.reset(); - } - - public isEnabled() { - return this.enabled; - } - - public isActive() { - return this.active; - } - - private calculateTransform(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - if (mapTouches.length > 0) { - this.active = true; - } - - const touches = indexTouches(mapTouches, points); - - const touchPointSum = new Point(0, 0); - const touchDeltaSum = new Point(0, 0); - let touchDeltaCount = 0; - - for (const identifier in touches) { - if (touches[identifier]) { - const point = touches[identifier]; - const prevPoint = this.touches[identifier]; - if (prevPoint) { - touchPointSum._add(point); - touchDeltaSum._add(point.sub(prevPoint)); - touchDeltaCount++; - touches[identifier] = point; - } - } - } - - this.touches = touches; - - if (touchDeltaCount < this.minTouches || !touchDeltaSum.mag()) { - return; - } - // @ts-ignore - const panDelta = touchDeltaSum.div(touchDeltaCount); - this.sum._add(panDelta); - if (this.sum.mag() < this.clickTolerance) { - return; - } - // @ts-ignore - const around = touchPointSum.div(touchDeltaCount); - - return { - around, - panDelta, - }; - } -} diff --git a/packages/map/legacy/handler/touch/touch_pitch.ts b/packages/map/legacy/handler/touch/touch_pitch.ts deleted file mode 100644 index 1e270946ae6..00000000000 --- a/packages/map/legacy/handler/touch/touch_pitch.ts +++ /dev/null @@ -1,83 +0,0 @@ -// @ts-ignore -import type Point from '../../geo/point'; -import TwoTouchHandler from './two_touch'; - -function isVertical(vector: { x: number; y: number }) { - return Math.abs(vector.y) > Math.abs(vector.x); -} - -const ALLOWED_SINGLE_TOUCH_TIME = 100; - -export default class TouchPitchHandler extends TwoTouchHandler { - public valid: boolean | void; - public firstMove: number; - public lastPoints: [Point, Point]; - - public reset() { - super.reset(); - this.valid = undefined; - // @ts-ignore - delete this.firstMove; - // @ts-ignore - delete this.lastPoints; - } - - public start(points: [Point, Point]) { - this.lastPoints = points; - if (isVertical(points[0].sub(points[1]))) { - // fingers are more horizontal than vertical - this.valid = false; - } - } - - public move(points: [Point, Point], center: Point, e: TouchEvent) { - const vectorA = points[0].sub(this.lastPoints[0]); - const vectorB = points[1].sub(this.lastPoints[1]); - - this.valid = this.gestureBeginsVertically(vectorA, vectorB, e.timeStamp); - if (!this.valid) { - return; - } - - this.lastPoints = points; - this.active = true; - const yDeltaAverage = (vectorA.y + vectorB.y) / 2; - const degreesPerPixelMoved = -0.5; - return { - pitchDelta: yDeltaAverage * degreesPerPixelMoved, - }; - } - - public gestureBeginsVertically(vectorA: Point, vectorB: Point, timeStamp: number) { - if (this.valid !== undefined) { - return this.valid; - } - - const threshold = 2; - const movedA = vectorA.mag() >= threshold; - const movedB = vectorB.mag() >= threshold; - - // neither finger has moved a meaningful amount, wait - if (!movedA && !movedB) { - return; - } - - // One finger has moved and the other has not. - // If enough time has passed, decide it is not a pitch. - if (!movedA || !movedB) { - if (this.firstMove === undefined) { - this.firstMove = timeStamp; - } - - if (timeStamp - this.firstMove < ALLOWED_SINGLE_TOUCH_TIME) { - // still waiting for a movement from the second finger - return undefined; - } else { - return false; - } - } - - const isSameDirection = vectorA.y > 0 === vectorB.y > 0; - return isVertical(vectorA) && isVertical(vectorB) && isSameDirection; - } -} diff --git a/packages/map/legacy/handler/touch/touch_rotate.ts b/packages/map/legacy/handler/touch/touch_rotate.ts deleted file mode 100644 index 7fe8369d4b4..00000000000 --- a/packages/map/legacy/handler/touch/touch_rotate.ts +++ /dev/null @@ -1,62 +0,0 @@ -// @ts-ignore -import type Point from '../../geo/point'; -import TwoTouchHandler from './two_touch'; - -const ROTATION_THRESHOLD = 25; // pixels along circumference of touch circle - -function getBearingDelta(a: Point, b: Point) { - return (a.angleWith(b) * 180) / Math.PI; -} - -export default class TouchRotateHandler extends TwoTouchHandler { - private minDiameter: number; - - public reset() { - super.reset(); - // @ts-ignore - delete this.minDiameter; - // @ts-ignore - delete this.startVector; - // @ts-ignore - delete this.vector; - } - - public start(points: [Point, Point]) { - this.startVector = this.vector = points[0].sub(points[1]); - this.minDiameter = points[0].dist(points[1]); - } - - public move(points: [Point, Point], pinchAround: Point) { - const lastVector = this.vector; - this.vector = points[0].sub(points[1]); - - if (!this.active && this.isBelowThreshold(this.vector)) { - return; - } - this.active = true; - - return { - bearingDelta: getBearingDelta(this.vector, lastVector), - pinchAround, - }; - } - - private isBelowThreshold(vector: Point) { - /* - * The threshold before a rotation actually happens is configured in - * pixels alongth circumference of the circle formed by the two fingers. - * This makes the threshold in degrees larger when the fingers are close - * together and smaller when the fingers are far apart. - * - * Use the smallest diameter from the whole gesture to reduce sensitivity - * when pinching in and out. - */ - - this.minDiameter = Math.min(this.minDiameter, vector.mag()); - const circumference = Math.PI * this.minDiameter; - const threshold = (ROTATION_THRESHOLD / circumference) * 360; - - const bearingDeltaSinceStart = getBearingDelta(vector, this.startVector); - return Math.abs(bearingDeltaSinceStart) < threshold; - } -} diff --git a/packages/map/legacy/handler/touch/touch_zoom.ts b/packages/map/legacy/handler/touch/touch_zoom.ts deleted file mode 100644 index be98ed7c6fe..00000000000 --- a/packages/map/legacy/handler/touch/touch_zoom.ts +++ /dev/null @@ -1,40 +0,0 @@ -// @ts-ignore -import type Point from '../../geo/point'; -import TwoTouchHandler from './two_touch'; - -const ZOOM_THRESHOLD = 0.1; -function getZoomDelta(distance: number, lastDistance: number) { - return Math.log(distance / lastDistance) / Math.LN2; -} -export default class TouchZoomHandler extends TwoTouchHandler { - private distance: number; - private startDistance: number; - - public reset() { - super.reset(); - // @ts-ignore - delete this.distance; - // @ts-ignore - delete this.startDistance; - } - - public start(points: [Point, Point]) { - this.startDistance = this.distance = points[0].dist(points[1]); - } - - public move(points: [Point, Point], pinchAround: Point) { - const lastDistance = this.distance; - this.distance = points[0].dist(points[1]); - if ( - !this.active && - Math.abs(getZoomDelta(this.distance, this.startDistance)) < ZOOM_THRESHOLD - ) { - return; - } - this.active = true; - return { - zoomDelta: getZoomDelta(this.distance, lastDistance), - pinchAround, - }; - } -} diff --git a/packages/map/legacy/handler/touch/two_touch.ts b/packages/map/legacy/handler/touch/two_touch.ts deleted file mode 100644 index 20fd176d15a..00000000000 --- a/packages/map/legacy/handler/touch/two_touch.ts +++ /dev/null @@ -1,115 +0,0 @@ -// @ts-ignore -import type Point from '../../geo/point'; -import DOM from '../../utils/dom'; - -export default class TwoTouchHandler { - protected enabled: boolean; - protected active: boolean; - protected firstTwoTouches: [number, number]; - protected vector: Point; - protected startVector: Point; - protected aroundCenter: boolean; - - constructor() { - this.reset(); - } - - public reset() { - this.active = false; - // @ts-ignore - delete this.firstTwoTouches; - } - // eslint-disable-next-line @typescript-eslint/no-unused-vars - public start(points: [Point, Point]) { - return; - } // eslint-disable-line - public move( - // eslint-disable-next-line @typescript-eslint/no-unused-vars - points: [Point, Point], - // eslint-disable-next-line @typescript-eslint/no-unused-vars - pinchAround: Point | null, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - e: TouchEvent, - ) { - return; - } // eslint-disable-line - - public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - if (this.firstTwoTouches || mapTouches.length < 2) { - return; - } - - this.firstTwoTouches = [mapTouches[0].identifier, mapTouches[1].identifier]; - - // implemented by child classes - this.start([points[0], points[1]]); - } - - public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - if (!this.firstTwoTouches) { - return; - } - - e.preventDefault(); - - const [idA, idB] = this.firstTwoTouches; - const a = getTouchById(mapTouches, points, idA); - const b = getTouchById(mapTouches, points, idB); - if (!a || !b) { - return; - } - const pinchAround = this.aroundCenter ? null : a.add(b).div(2); - - // implemented by child classes - return this.move([a, b], pinchAround, e); - } - - public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) { - if (!this.firstTwoTouches) { - return; - } - - const [idA, idB] = this.firstTwoTouches; - const a = getTouchById(mapTouches, points, idA); - const b = getTouchById(mapTouches, points, idB); - if (a && b) { - return; - } - - if (this.active) { - DOM.suppressClick(); - } - - this.reset(); - } - - public touchcancel() { - this.reset(); - } - - public enable(options?: { around?: 'center' }) { - this.enabled = true; - this.aroundCenter = !!options && options.around === 'center'; - } - - public disable() { - this.enabled = false; - this.reset(); - } - - public isEnabled() { - return this.enabled; - } - - public isActive() { - return this.active; - } -} - -function getTouchById(mapTouches: Touch[], points: Point[], identifier: number) { - for (let i = 0; i < mapTouches.length; i++) { - if (mapTouches[i].identifier === identifier) { - return points[i]; - } - } -} diff --git a/packages/map/legacy/hash.ts b/packages/map/legacy/hash.ts deleted file mode 100644 index d0da44727f7..00000000000 --- a/packages/map/legacy/hash.ts +++ /dev/null @@ -1,138 +0,0 @@ -// @ts-ignore -// tslint:disable-next-line:no-submodule-imports -import { lodashUtil } from '@antv/l7-utils'; -import type { Map } from './map'; -const { throttle } = lodashUtil; -/* - * Adds the map's position to its page's location hash. - * Passed as an option to the map object. - * - * @returns {Hash} `this` - */ -class Hash { - private map: Map; - private updateHash: () => number | void; - private hashName?: string; - - constructor(hashName?: string) { - this.hashName = hashName && encodeURIComponent(hashName); - - // Mobile Safari doesn't allow updating the hash more than 100 times per 30 seconds. - this.updateHash = throttle(this.updateHashUnthrottled, (30 * 1000) / 100); - } - public addTo(map: Map) { - this.map = map; - window.addEventListener('hashchange', this.onHashChange, false); - this.map.on('moveend', this.updateHash); - return this; - } - public remove() { - window.removeEventListener('hashchange', this.onHashChange, false); - this.map.off('moveend', this.updateHash); - // clearTimeout(this.updateHash()); - - // @ts-ignore - delete this.map; - return this; - } - - public onHashChange = () => { - const loc = this.getCurrentHash(); - if (loc.length >= 3 && !loc.some((v: string) => isNaN(+v))) { - const bearing = - this.map.dragRotate.isEnabled() && this.map.touchZoomRotate.isEnabled() - ? +(loc[3] || 0) - : this.map.getBearing(); - this.map.jumpTo({ - center: [+loc[2], +loc[1]], - zoom: +loc[0], - bearing, - pitch: +(loc[4] || 0), - }); - return true; - } - return false; - }; - - private getCurrentHash = () => { - // Get the current hash from location, stripped from its number sign - const hash = window.location.hash.replace('#', ''); - if (this.hashName) { - // Split the parameter-styled hash into parts and find the value we need - let keyval; - hash - .split('&') - .map((part) => part.split('=')) - .forEach((part) => { - if (part[0] === this.hashName) { - keyval = part; - } - }); - return (keyval ? keyval[1] || '' : '').split('/'); - } - return hash.split('/'); - }; - - private getHashString(mapFeedback?: boolean) { - const center = this.map.getCenter(); - const zoom = Math.round(this.map.getZoom() * 100) / 100; - // derived from equation: 512px * 2^z / 360 / 10^d < 0.5px - const precision = Math.ceil((zoom * Math.LN2 + Math.log(512 / 360 / 0.5)) / Math.LN10); - const m = Math.pow(10, precision); - const lng = Math.round(center.lng * m) / m; - const lat = Math.round(center.lat * m) / m; - const bearing = this.map.getBearing(); - const pitch = this.map.getPitch(); - let hash = ''; - if (mapFeedback) { - // new map feedback site has some constraints that don't allow - // us to use the same hash format as we do for the Map hash option. - hash += `/${lng}/${lat}/${zoom}`; - } else { - hash += `${zoom}/${lat}/${lng}`; - } - - if (bearing || pitch) { - hash += `/${Math.round(bearing * 10) / 10}`; - } - if (pitch) { - hash += `/${Math.round(pitch)}`; - } - - if (this.hashName) { - const hashName = this.hashName; - let found = false; - const parts = window.location.hash - .slice(1) - .split('&') - .map((part) => { - const key = part.split('=')[0]; - if (key === hashName) { - found = true; - return `${key}=${hash}`; - } - return part; - }) - .filter((a) => a); - if (!found) { - parts.push(`${hashName}=${hash}`); - } - return `#${parts.join('&')}`; - } - - return `#${hash}`; - } - - private updateHashUnthrottled = () => { - const hash = this.getHashString(); - try { - window.history.replaceState(window.history.state, '', hash); - } catch (SecurityError) { - // IE11 does not allow this if the page is within an iframe created - // with iframe.contentWindow.document.write(...). - // https://github.com/mapbox/mapbox-gl-js/issues/7410 - } - }; -} - -export default Hash; diff --git a/packages/map/legacy/interface.ts b/packages/map/legacy/interface.ts deleted file mode 100644 index fe668a43f72..00000000000 --- a/packages/map/legacy/interface.ts +++ /dev/null @@ -1,39 +0,0 @@ -import type { LngLatBoundsLike } from './geo/lng_lat_bounds'; - -/** - * @deprecated - * 请使用 MapOptions - */ -export interface IMapOptions { - hash: boolean; - style?: any; - container?: HTMLElement | string; - canvas?: HTMLCanvasElement; - center: [number, number]; - zoom: number; - bearing: number; - pitch: number; - interactive: boolean; - scrollZoom: boolean; - bounds?: LngLatBoundsLike; - maxBounds?: LngLatBoundsLike; - fitBoundsOptions?: any; - minZoom: number; - maxZoom: number; - minPitch: number; - maxPitch: number; - boxZoom: boolean; - dragRotate: boolean; - dragPan: boolean; - keyboard: boolean; - doubleClickZoom: boolean; - touchZoomRotate: boolean; - touchPitch: boolean; - trackResize: boolean; - renderWorldCopies: boolean; - bearingSnap: number; - clickTolerance: number; - pitchWithRotate: boolean; - pitchEnabled: boolean; - rotateEnabled: boolean; -} diff --git a/packages/map/legacy/map.ts b/packages/map/legacy/map.ts deleted file mode 100644 index b363fc24b01..00000000000 --- a/packages/map/legacy/map.ts +++ /dev/null @@ -1,381 +0,0 @@ -import { DOM, lodashUtil } from '@antv/l7-utils'; -import Camera from './camera'; -// import './css/l7.css'; -import type { LngLatLike } from './geo/lng_lat'; -import LngLat from './geo/lng_lat'; -import type { LngLatBoundsLike } from './geo/lng_lat_bounds'; -import LngLatBounds from './geo/lng_lat_bounds'; -// @ts-ignore -import type { PointLike } from './geo/point'; -import Point from './geo/point'; -import type BoxZoomHandler from './handler/box_zoom'; -import HandlerManager from './handler/handler_manager'; -import type KeyboardHandler from './handler/keyboard'; - -import type ScrollZoomHandler from './handler/scroll_zoom'; -import type DoubleClickZoomHandler from './handler/shim/dblclick_zoom'; -import type DragPanHandler from './handler/shim/drag_pan'; -import type DragRotateHandler from './handler/shim/drag_rotate'; -import type TouchZoomRotateHandler from './handler/shim/touch_zoom_rotate'; -import type { TouchPitchHandler } from './handler/touch'; -import Hash from './hash'; -import type { IMapOptions } from './interface'; -import { renderframe } from './util'; -import { PerformanceUtils } from './utils/performance'; -import type { TaskID } from './utils/task_queue'; -import TaskQueue from './utils/task_queue'; - -(function () { - if (typeof window.CustomEvent === 'function') return false; //If not IE - - function CustomEvent(event: any, params: any) { - params = params || { bubbles: false, cancelable: false, detail: undefined }; - const evt = document.createEvent('CustomEvent'); - evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); - return evt; - } - - CustomEvent.prototype = window.Event.prototype; - // @ts-ignore - window.CustomEvent = CustomEvent; -})(); -type CallBack = (_: number) => void; -const defaultMinZoom = -2; -const defaultMaxZoom = 22; -const { merge } = lodashUtil; -// the default values, but also the valid range -const defaultMinPitch = 0; -const defaultMaxPitch = 60; - -const DefaultOptions: IMapOptions = { - hash: false, - zoom: -1, - center: [112, 32], - pitch: 0, - bearing: 0, - interactive: true, - minZoom: defaultMinZoom, - maxZoom: defaultMaxZoom, - minPitch: defaultMinPitch, - maxPitch: defaultMaxPitch, - scrollZoom: true, - boxZoom: true, - dragRotate: true, - dragPan: true, - keyboard: true, - doubleClickZoom: true, - touchZoomRotate: true, - touchPitch: true, - bearingSnap: 7, - clickTolerance: 3, - pitchWithRotate: true, - trackResize: true, - renderWorldCopies: true, - pitchEnabled: true, - rotateEnabled: true, -}; - -/** - * @deprecated - */ -export class Map extends Camera { - public doubleClickZoom: DoubleClickZoomHandler; - public dragRotate: DragRotateHandler; - public dragPan: DragPanHandler; - public touchZoomRotate: TouchZoomRotateHandler; - public scrollZoom: ScrollZoomHandler; - public keyboard: KeyboardHandler; - public touchPitch: TouchPitchHandler; - public boxZoom: BoxZoomHandler; - public handlers: HandlerManager; - - private container: HTMLElement; - private canvas: HTMLCanvasElement; - private canvasContainer: HTMLElement; - private renderTaskQueue: TaskQueue = new TaskQueue(); - private frame: { cancel: () => void } | null; - private trackResize: boolean = true; - private hash: Hash | undefined; - constructor(options: Partial) { - super(merge({}, DefaultOptions, options)); - - this.initContainer(); - - this.resize(); - this.handlers = new HandlerManager(this, this.options); - - if (typeof window !== 'undefined') { - window.addEventListener('online', this.onWindowOnline, false); - window.addEventListener('resize', this.onWindowResize, false); - window.addEventListener('orientationchange', this.onWindowResize, false); - } - - const hashName = (typeof options.hash === 'string' && options.hash) || undefined; - if (options.hash) { - this.hash = new Hash(hashName).addTo(this) as Hash; - } - - // don't set position from options if set through hash - if (!this.hash || !this.hash.onHashChange()) { - this.jumpTo({ - center: options.center, - zoom: options.zoom, - bearing: options.bearing, - pitch: options.pitch, - }); - - if (options.bounds) { - this.resize(); - this.fitBounds(options.bounds, merge({}, options.fitBoundsOptions, { duration: 0 })); - } - } - } - - public resize(eventData?: any) { - const [width, height] = this.containerDimensions(); - this.transform.resize(width, height); - // 小程序环境不需要执行后续动作 - const fireMoving = !this.moving; - if (fireMoving) { - this.stop(); - this.emit('movestart', new window.CustomEvent('movestart', eventData)); - this.emit('move', new window.CustomEvent('move', eventData)); - } - - this.emit('resize', new window.CustomEvent('resize', eventData)); - - if (fireMoving) { - this.emit('moveend', new window.CustomEvent('moveend', eventData)); - } - - return this; - } - - public getContainer() { - return this.container; - } - - public getCanvas() { - return this.canvas; - } - - public getCanvasContainer() { - return this.canvasContainer; - } - - public getCanvasOverlays() { - return this.getCanvasContainer() as HTMLElement; - } - - public project(lngLat: LngLatLike) { - return this.transform.locationPoint(LngLat.convert(lngLat)); - } - - public unproject(point: PointLike) { - return this.transform.pointLocation(Point.convert(point)); - } - - public getBounds(): LngLatBounds { - return this.transform.getBounds(); - } - - public getMaxBounds(): LngLatBounds | null { - return this.transform.getMaxBounds(); - } - - public setMaxBounds(bounds: LngLatBoundsLike) { - this.transform.setMaxBounds(LngLatBounds.convert(bounds)); - } - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - public setStyle(style: any) { - return; - } - public setMinZoom(minZoom?: number) { - minZoom = minZoom === null || minZoom === undefined ? defaultMinZoom : minZoom; - if (minZoom >= defaultMinZoom && minZoom <= this.transform.maxZoom) { - this.transform.minZoom = minZoom; - if (this.getZoom() < minZoom) { - this.setZoom(minZoom); - } - - return this; - } else { - throw new Error( - `minZoom must be between ${defaultMinZoom} and the current maxZoom, inclusive`, - ); - } - } - - public getMinZoom() { - return this.transform.minZoom; - } - - public setMaxZoom(maxZoom?: number) { - maxZoom = maxZoom === null || maxZoom === undefined ? defaultMaxZoom : maxZoom; - - if (maxZoom >= this.transform.minZoom) { - this.transform.maxZoom = maxZoom; - if (this.getZoom() > maxZoom) { - this.setZoom(maxZoom); - } - - return this; - } else { - throw new Error('maxZoom must be greater than the current minZoom'); - } - } - public getMaxZoom() { - return this.transform.maxZoom; - } - - public setMinPitch(minPitch?: number) { - minPitch = minPitch === null || minPitch === undefined ? defaultMinPitch : minPitch; - - if (minPitch < defaultMinPitch) { - throw new Error(`minPitch must be greater than or equal to ${defaultMinPitch}`); - } - - if (minPitch >= defaultMinPitch && minPitch <= this.transform.maxPitch) { - this.transform.minPitch = minPitch; - if (this.getPitch() < minPitch) { - this.setPitch(minPitch); - } - - return this; - } else { - throw new Error( - `minPitch must be between ${defaultMinPitch} and the current maxPitch, inclusive`, - ); - } - } - - public getMinPitch() { - return this.transform.minPitch; - } - - public setMaxPitch(maxPitch?: number) { - maxPitch = maxPitch === null || maxPitch === undefined ? defaultMaxPitch : maxPitch; - - if (maxPitch > defaultMaxPitch) { - throw new Error(`maxPitch must be less than or equal to ${defaultMaxPitch}`); - } - - if (maxPitch >= this.transform.minPitch) { - this.transform.maxPitch = maxPitch; - if (this.getPitch() > maxPitch) { - this.setPitch(maxPitch); - } - - return this; - } else { - throw new Error('maxPitch must be greater than the current minPitch'); - } - } - - public getMaxPitch() { - return this.transform.maxPitch; - } - - public getRenderWorldCopies() { - return this.transform.renderWorldCopies; - } - - public setRenderWorldCopies(renderWorldCopies?: boolean) { - this.transform.renderWorldCopies = !!renderWorldCopies; - } - - public remove() { - this.container.removeChild(this.canvasContainer); - // @ts-ignore - this.canvasContainer = null; - if (this.frame) { - this.frame.cancel(); - this.frame = null; - } - this.renderTaskQueue.clear(); - //销毁事件 - this.handlers.destroy(); - if (typeof window !== 'undefined') { - window.removeEventListener('online', this.onWindowOnline, false); - window.removeEventListener('resize', this.onWindowResize, false); - window.removeEventListener('orientationchange', this.onWindowResize, false); - } - } - - public requestRenderFrame(cb: CallBack): TaskID { - this.update(); - return this.renderTaskQueue.add(cb); - } - - public cancelRenderFrame(id: TaskID) { - return this.renderTaskQueue.remove(id); - } - - public triggerRepaint() { - if (!this.frame) { - this.frame = renderframe((paintStartTimeStamp: number) => { - PerformanceUtils.frame(paintStartTimeStamp); - this.frame = null; - this.update(paintStartTimeStamp); - }); - } - } - - public update(time?: number) { - if (!this.frame) { - this.frame = renderframe((paintStartTimeStamp: number) => { - PerformanceUtils.frame(paintStartTimeStamp); - this.frame = null; - this.renderTaskQueue.run(time); - }); - } - } - - private initContainer() { - if (typeof this.options.container === 'string') { - this.container = window.document.getElementById(this.options.container) as HTMLElement; - if (!this.container) { - throw new Error(`Container '${this.options.container}' not found.`); - } - } else if (this.options.container instanceof HTMLElement) { - this.container = this.options.container; - } else { - throw new Error("Invalid type: 'container' must be a String or HTMLElement."); - } - - const container = this.container; - container.classList.add('l7-map'); - - const canvasContainer = (this.canvasContainer = DOM.create( - 'div', - 'l7-canvas-container', - container, - )); - if (this.options.interactive) { - canvasContainer.classList.add('l7-interactive'); - } - } - - private containerDimensions(): [number, number] { - let width = 0; - let height = 0; - if (this.container) { - width = this.container.clientWidth; - height = this.container.clientHeight; - width = width === 0 ? 400 : width; - height = height === 0 ? 300 : height; - } - return [width, height]; - } - - private onWindowOnline = () => { - this.update(); - }; - - private onWindowResize = (event: Event) => { - if (this.trackResize) { - this.resize({ originalEvent: event }).update(); - } - }; -} diff --git a/packages/map/legacy/util.ts b/packages/map/legacy/util.ts deleted file mode 100644 index c82e2614224..00000000000 --- a/packages/map/legacy/util.ts +++ /dev/null @@ -1,87 +0,0 @@ -// @ts-ignore -import UnitBezier from '@mapbox/unitbezier'; -let reducedMotionQuery: MediaQueryList; -export interface ICancelable { - cancel: () => void; -} -export function wrap(n: number, min: number, max: number): number { - const d = max - min; - const w = ((((n - min) % d) + d) % d) + min; - return w === min ? max : w; -} - -export function clamp(n: number, min: number, max: number): number { - return Math.min(max, Math.max(min, n)); -} - -export function interpolate(a: number, b: number, t: number) { - return a * (1 - t) + b * t; -} -export function bezier(p1x: number, p1y: number, p2x: number, p2y: number): (t: number) => number { - const bez = new UnitBezier(p1x, p1y, p2x, p2y); - return (t: number) => { - return bez.solve(t); - }; -} - -export const ease = bezier(0.25, 0.1, 0.25, 1); - -export function prefersReducedMotion(): boolean { - // Lazily initialize media query - if (reducedMotionQuery == null && typeof window !== 'undefined' && window.matchMedia) { - // @ts-ignore - reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); - } - return reducedMotionQuery?.matches; -} - -export function pick(src: { [key: string]: any }, properties: string[]): { [key: string]: any } { - const result: { [key: string]: any } = {}; - for (const name of properties) { - if (name in src) { - result[name] = src[name]; - } - } - return result; -} - -export const now = - window.performance && window.performance.now - ? window.performance.now.bind(window.performance) - : Date.now.bind(Date); - -export const raf = - window.requestAnimationFrame || - // @ts-ignore - window.mozRequestAnimationFrame || - // @ts-ignore - window.webkitRequestAnimationFrame || - // @ts-ignore - window.msRequestAnimationFrame; - -export const cancel = - window.cancelAnimationFrame || - // @ts-ignore - window.mozCancelAnimationFrame || - // @ts-ignore - window.webkitCancelAnimationFrame || - // @ts-ignore - window.msCancelAnimationFrame; - -export function renderframe(fn: (paintStartTimestamp: number) => void): ICancelable { - const frame = raf(fn); - return { cancel: () => cancel(frame) }; -} -export function extend( - dest: { [key: string]: any }, - ...sources: Array> -): { [key: string]: any } { - for (const src of sources) { - for (const k in src) { - if (src[k] !== undefined) { - dest[k] = src[k]; - } - } - } - return dest; -} diff --git a/packages/map/legacy/utils/Aabb.ts b/packages/map/legacy/utils/Aabb.ts deleted file mode 100644 index 301274d048c..00000000000 --- a/packages/map/legacy/utils/Aabb.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { vec3, vec4 } from 'gl-matrix'; -import type Frustum from './primitives'; -export default class Aabb { - public min: vec3; - public max: vec3; - public center: vec3; - - constructor(min: vec3, max: vec3) { - this.min = min; - this.max = max; - this.center = vec3.scale( - new Float32Array(3), - vec3.add(new Float32Array(3), this.min, this.max), - 0.5, - ); - } - - public quadrant(index: number): Aabb { - const split = [index % 2 === 0, index < 2]; - const qMin = vec3.clone(this.min); - const qMax = vec3.clone(this.max); - for (let axis = 0; axis < split.length; axis++) { - qMin[axis] = split[axis] ? this.min[axis] : this.center[axis]; - qMax[axis] = split[axis] ? this.center[axis] : this.max[axis]; - } - // Elevation is always constant, hence quadrant.max.z = this.max.z - qMax[2] = this.max[2]; - return new Aabb(qMin, qMax); - } - - public distanceX(point: number[]): number { - const pointOnAabb = Math.max(Math.min(this.max[0], point[0]), this.min[0]); - return pointOnAabb - point[0]; - } - - public distanceY(point: number[]): number { - const pointOnAabb = Math.max(Math.min(this.max[1], point[1]), this.min[1]); - return pointOnAabb - point[1]; - } - - // Performs a frustum-aabb intersection test. Returns 0 if there's no intersection, - // 1 if shapes are intersecting and 2 if the aabb if fully inside the frustum. - public intersects(frustum: Frustum): number { - // Execute separating axis test between two convex objects to find intersections - // Each frustum plane together with 3 major axes define the separating axes - // Note: test only 4 points as both min and max points have equal elevation - - const aabbPoints = [ - [this.min[0], this.min[1], 0.0, 1], - [this.max[0], this.min[1], 0.0, 1], - [this.max[0], this.max[1], 0.0, 1], - [this.min[0], this.max[1], 0.0, 1], - ]; - - let fullyInside = true; - - for (const plane of frustum.planes) { - let pointsInside = 0; - - for (const i of aabbPoints) { - // @ts-ignore - pointsInside += vec4.dot(plane, i) >= 0; - } - - if (pointsInside === 0) { - return 0; - } - - if (pointsInside !== aabbPoints.length) { - fullyInside = false; - } - } - - if (fullyInside) { - return 2; - } - - for (let axis = 0; axis < 3; axis++) { - let projMin = Number.MAX_VALUE; - let projMax = -Number.MAX_VALUE; - - for (const p of frustum.points) { - const projectedPoint = p[axis] - this.min[axis]; - - projMin = Math.min(projMin, projectedPoint); - projMax = Math.max(projMax, projectedPoint); - } - - if (projMax < 0 || projMin > this.max[axis] - this.min[axis]) { - return 0; - } - } - - return 1; - } -} diff --git a/packages/map/legacy/utils/dom.ts b/packages/map/legacy/utils/dom.ts deleted file mode 100644 index 6873b7926ef..00000000000 --- a/packages/map/legacy/utils/dom.ts +++ /dev/null @@ -1,152 +0,0 @@ -// @ts-ignore -import Point from '../geo/point'; - -const DOM: { - [key: string]: (...arg: any[]) => any; -} = {}; -export default DOM; - -DOM.create = (tagName: string, className?: string, container?: HTMLElement) => { - const el = window.document.createElement(tagName) as HTMLElement; - if (className !== undefined) { - el.className = className; - } - if (container) { - container.appendChild(el); - } - return el; -}; - -DOM.createNS = (namespaceURI: string, tagName: string) => { - const el = window.document.createElementNS(namespaceURI, tagName) as HTMLElement; - return el; -}; - -const docStyle = window.document && window.document.documentElement.style; - -function testProp(props: any) { - if (!docStyle) { - return props[0]; - } - for (const i of props) { - if (i in docStyle) { - return i; - } - } - return props[0]; -} - -const selectProp = testProp(['userSelect', 'MozUserSelect', 'WebkitUserSelect', 'msUserSelect']); -let userSelect: any; - -DOM.disableDrag = () => { - if (docStyle && selectProp) { - userSelect = docStyle[selectProp]; - docStyle[selectProp] = 'none'; - } -}; - -DOM.enableDrag = () => { - if (docStyle && selectProp) { - docStyle[selectProp] = userSelect; - } -}; - -const transformProp = testProp(['transform', 'WebkitTransform']); - -DOM.setTransform = (el: HTMLElement, value: string) => { - // https://github.com/facebook/flow/issues/7754 - // $FlowFixMe - el.style[transformProp] = value; -}; - -// Feature detection for {passive: false} support in add/removeEventListener. -let passiveSupported = false; - -try { - // https://github.com/facebook/flow/issues/285 - // $FlowFixMe - const options = Object.defineProperty({}, 'passive', { - get() { - // eslint-disable-line - passiveSupported = true; - }, - }); - // @ts-ignore - window.addEventListener('test', options, options); - // @ts-ignore - window.removeEventListener('test', options, options); -} catch (err) { - passiveSupported = false; -} - -DOM.addEventListener = ( - target: any, - type: any, - callback: any, - options: { passive?: boolean; capture?: boolean } = {}, -) => { - if ('passive' in options && passiveSupported) { - target.addEventListener(type, callback, options); - } else { - target.addEventListener(type, callback, options.capture); - } -}; - -DOM.removeEventListener = ( - target: any, - type: any, - callback: any, - options: { passive?: boolean; capture?: boolean } = {}, -) => { - if ('passive' in options && passiveSupported) { - target.removeEventListener(type, callback, options); - } else { - target.removeEventListener(type, callback, options.capture); - } -}; - -// Suppress the next click, but only if it's immediate. -const suppressClick = (e: MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - window.removeEventListener('click', suppressClick, true); -}; - -DOM.suppressClick = () => { - window.addEventListener('click', suppressClick, true); - setTimeout(() => { - window.removeEventListener('click', suppressClick, true); - }, 0); -}; - -DOM.mousePos = (el: HTMLElement, e: MouseEvent | Touch) => { - // 暂时从 el 上获取 top/left， 后面需要动态获取 - const rect = el.getBoundingClientRect(); - return new Point(e.clientX - rect.left - el.clientLeft, e.clientY - rect.top - el.clientTop); -}; - -DOM.touchPos = (el: HTMLElement, touches: Touch[]) => { - // 暂时从 el 上获取 top/left， 后面需要动态获取 - const rect = el.getBoundingClientRect(); - const points = []; - for (const touche of touches) { - points.push( - new Point( - touche.clientX - rect.left - el.clientLeft, - touche.clientY - rect.top - el.clientTop, - ), - ); - } - return points; -}; - -DOM.mouseButton = (e: MouseEvent) => { - return e.button; -}; - -DOM.remove = (node: HTMLElement) => { - if (node.parentNode) { - node.parentNode.removeChild(node); - } -}; diff --git a/packages/map/legacy/utils/performance.ts b/packages/map/legacy/utils/performance.ts deleted file mode 100644 index b7da7284322..00000000000 --- a/packages/map/legacy/utils/performance.ts +++ /dev/null @@ -1,79 +0,0 @@ -let lastFrameTime: number | null = null; -let frameTimes: number[] = []; - -const minFramerateTarget = 30; -const frameTimeTarget = 1000 / minFramerateTarget; -const performance = window.performance; - -export interface IPerformanceMetrics { - loadTime: number; - fullLoadTime: number; - fps: number; - percentDroppedFrames: number; -} - -export const PerformanceMarkers = { - create: 'create', - load: 'load', - fullLoad: 'fullLoad', -}; - -export const PerformanceUtils = { - mark(marker: string) { - performance.mark(marker); - }, - frame(timestamp: number) { - const currTimestamp = timestamp; - if (lastFrameTime != null) { - const frameTime = currTimestamp - lastFrameTime; - frameTimes.push(frameTime); - } - lastFrameTime = currTimestamp; - }, - clearMetrics() { - lastFrameTime = null; - frameTimes = []; - performance.clearMeasures('loadTime'); - performance.clearMeasures('fullLoadTime'); - // @ts-ignore - // tslint:disable-next-line:forin - for (const marker in PerformanceMarkers) { - // @ts-ignore - performance.clearMarks(PerformanceMarkers[marker]); - } - }, - getPerformanceMetrics(): IPerformanceMetrics { - const loadTime = performance.measure( - 'loadTime', - PerformanceMarkers.create, - PerformanceMarkers.load, - // @ts-ignore - ).duration; - - const fullLoadTime = performance.measure( - 'fullLoadTime', - PerformanceMarkers.create, - PerformanceMarkers.fullLoad, - // @ts-ignore - ).duration; - const totalFrames = frameTimes.length; - - const avgFrameTime = frameTimes.reduce((prev, curr) => prev + curr, 0) / totalFrames / 1000; - const fps = 1 / avgFrameTime; - - // count frames that missed our framerate target - const droppedFrames = frameTimes - .filter((frameTime) => frameTime > frameTimeTarget) - .reduce((acc, curr) => { - return acc + (curr - frameTimeTarget) / frameTimeTarget; - }, 0); - const percentDroppedFrames = (droppedFrames / (totalFrames + droppedFrames)) * 100; - - return { - loadTime, - fullLoadTime, - fps, - percentDroppedFrames, - }; - }, -}; diff --git a/packages/map/legacy/utils/primitives.ts b/packages/map/legacy/utils/primitives.ts deleted file mode 100644 index 62bbffc7c26..00000000000 --- a/packages/map/legacy/utils/primitives.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { vec3, vec4 } from 'gl-matrix'; -export default class Frustum { - public static fromInvProjectionMatrix( - invProj: Float32Array, - worldSize: number, - zoom: number, - ): Frustum { - const clipSpaceCorners: Array<[number, number, number, number]> = [ - [-1, 1, -1, 1], - [1, 1, -1, 1], - [1, -1, -1, 1], - [-1, -1, -1, 1], - [-1, 1, 1, 1], - [1, 1, 1, 1], - [1, -1, 1, 1], - [-1, -1, 1, 1], - ]; - - const scale = Math.pow(2, zoom); - - // Transform frustum corner points from clip space to tile space - const frustumCoords = clipSpaceCorners - .map((v) => vec4.transformMat4(new Float32Array([]), v, invProj)) - .map((v) => vec4.scale(new Float32Array([]), v, (1.0 / v[3] / worldSize) * scale)); - - const frustumPlanePointIndices: Array<[number, number, number]> = [ - [0, 1, 2], // near - [6, 5, 4], // far - [0, 3, 7], // left - [2, 1, 5], // right - [3, 2, 6], // bottom - [0, 4, 5], // top - ]; - - const frustumPlanes = frustumPlanePointIndices.map((p: [number, number, number]) => { - const a = vec3.sub( - new Float32Array(3), - new Float32Array(frustumCoords[p[0]]), - new Float32Array(frustumCoords[p[1]]), - ); - const b = vec3.sub( - new Float32Array(3), - new Float32Array(frustumCoords[p[2]]), - new Float32Array(frustumCoords[p[1]]), - ); - const n = vec3.normalize(new Float32Array(3), vec3.cross(new Float32Array(3), a, b)); - const d = -vec3.dot(n, new Float32Array(frustumCoords[p[1]])); - return (n as number[]).concat(d); - }); - - return new Frustum(frustumCoords as number[][], frustumPlanes); - } - public points: number[][]; - public planes: number[][]; - - constructor(points: number[][], planes: number[][]) { - this.points = points; - this.planes = planes; - } -} diff --git a/packages/map/legacy/utils/task_queue.ts b/packages/map/legacy/utils/task_queue.ts deleted file mode 100644 index c4c9d479108..00000000000 --- a/packages/map/legacy/utils/task_queue.ts +++ /dev/null @@ -1,68 +0,0 @@ -export type TaskID = number; // can't mark opaque due to https://github.com/flowtype/flow-remove-types/pull/61 -interface ITask { - callback: (timeStamp: number) => void; - id: TaskID; - cancelled: boolean; -} - -class TaskQueue { - private queue: ITask[]; - private id: TaskID; - private cleared: boolean; - private currentlyRunning: ITask[] | false; - - constructor() { - this.queue = []; - this.id = 0; - this.cleared = false; - this.currentlyRunning = false; - } - - public add(callback: (timeStamp: number) => void): TaskID { - const id = ++this.id; - const queue = this.queue; - queue.push({ callback, id, cancelled: false }); - return id; - } - - public remove(id: TaskID) { - const running = this.currentlyRunning; - const queue = running ? this.queue.concat(running) : this.queue; - for (const task of queue) { - if (task.id === id) { - task.cancelled = true; - return; - } - } - } - - public run(timeStamp: number = 0) { - const queue = (this.currentlyRunning = this.queue); - - // Tasks queued by callbacks in the current queue should be executed - // on the next run, not the current run. - this.queue = []; - - for (const task of queue) { - if (task.cancelled) { - continue; - } - task.callback(timeStamp); - if (this.cleared) { - break; - } - } - - this.cleared = false; - this.currentlyRunning = false; - } - - public clear() { - if (this.currentlyRunning) { - this.cleared = true; - } - this.queue = []; - } -} - -export default TaskQueue; diff --git a/packages/maps/.fatherrc.ts b/packages/maps/.fatherrc.ts index 6c2bf50ed1d..30c9bda0163 100644 --- a/packages/maps/.fatherrc.ts +++ b/packages/maps/.fatherrc.ts @@ -1,48 +1,10 @@ -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: 'L7Maps', - output: { - path: './dist', - filename: 'l7-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, }); diff --git a/packages/maps/__tests__/map.spec.ts b/packages/maps/__tests__/map.spec.ts deleted file mode 100644 index 3708593331d..00000000000 --- a/packages/maps/__tests__/map.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { createSceneContainer } from '@antv/l7-core'; -import AMapService from '../src/amap-next/map'; - -describe('maps', () => { - it('AMapService', () => { - const container = createSceneContainer(); - // // 绑定地图服务 - - // const service = new AMapService({ - // style: 'dark', - // center: [120.145, 30.238915], - // pitch: 60, - // zoom: 13.2 - // }); - // service.ma; - - new AMapService(container); - - // service.setContainer(sceneContainer, id, canvas); - - // expect(service).toBeTruthy(); - }); -}); diff --git a/packages/maps/package.json b/packages/maps/package.json index d6150214d33..a75d25db51d 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -21,28 +21,19 @@ "dev": "father dev", "build": "npm run clean && father build", "check-deps": "father doctor", - "lint": "eslint src __tests__", + "lint": "eslint src", "clean": "rimraf dist es lib" }, "dependencies": { - "@amap/amap-jsapi-loader": "^1.0.1", "@antv/l7-core": "workspace:*", "@antv/l7-map": "workspace:*", "@antv/l7-utils": "workspace:*", "@babel/runtime": "^7.7.7", - "eventemitter3": "^4.0.0", "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": { diff --git a/packages/maps/src/earth/Viewport.ts b/packages/maps/src/earth/earth-viewport.ts similarity index 98% rename from packages/maps/src/earth/Viewport.ts rename to packages/maps/src/earth/earth-viewport.ts index 2d0ce96e69c..15badd9d3f0 100644 --- a/packages/maps/src/earth/Viewport.ts +++ b/packages/maps/src/earth/earth-viewport.ts @@ -7,7 +7,7 @@ export interface IEarthCamera { viewportWidth: number; } -export default class Viewport implements IViewport { +export default class EarthViewport implements IViewport { // 初始化相机的姿态 看向地球 private xzReg: number = -Math.PI * 0.6; private yReg: number = Math.PI * 0.2; diff --git a/packages/maps/src/earth/map.ts b/packages/maps/src/earth/earth.ts similarity index 53% rename from packages/maps/src/earth/map.ts rename to packages/maps/src/earth/earth.ts index 77c27175190..bac3030d0be 100644 --- a/packages/maps/src/earth/map.ts +++ b/packages/maps/src/earth/earth.ts @@ -1,83 +1,37 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -/** - * MapboxService - */ -import type { IEarthService, IMercator, IViewport } from '@antv/l7-core'; -import { CoordinateSystem, MapServiceEvent } from '@antv/l7-core'; +import type { IEarthService, IMercator } from '@antv/l7-core'; +import { MapServiceEvent } from '@antv/l7-core'; import { Map } from '@antv/l7-map'; -import BaseMapService from '../utils/BaseMapService'; -import Viewport from './Viewport'; -const EventMap: { - [key: string]: any; -} = { +import MapService from '../map/map'; +import { MapType } from '../types'; +import EarthViewport from './earth-viewport'; + +const EarthEvent: Record = { mapmove: 'move', camerachange: 'move', zoomchange: 'zoom', dragging: 'drag', }; -const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12; /** * EarthService */ -export default class L7EarthService extends BaseMapService implements IEarthService { - public lngLatToMercator(lnglat: [number, number], altitude: number): IMercator { - throw new Error('Method not implemented.'); - } - public getModelMatrix( - lnglat: [number, number], - altitude: number, - rotate: [number, number, number], - scale: [number, number, number], - origin: IMercator, - ): number[] { - throw new Error('Method not implemented.'); - } - public version: string = 'GLOBEL'; - // TODO: 判断地图是否正在拖拽 +export default class EarthService extends MapService implements IEarthService { + protected viewport = new EarthViewport(); + + public type: string = MapType.GLOBEL; + public dragging: boolean = false; - public viewport: Viewport; - // T: 用于记录鼠标对相机的控制 + // 用于记录鼠标对相机的控制 private handleCameraChanging: boolean; private handleCameraTimer: any; - // map event - public on(type: string, handle: (...args: any[]) => void): void { - if (MapServiceEvent.indexOf(type) !== -1) { - this.eventEmitter.on(type, handle); - } else { - // 统一事件名称 - this.map.on(EventMap[type] || type, handle); - } - } - public off(type: string, handle: (...args: any[]) => void): void { - this.map.off(EventMap[type] || type, handle); - this.eventEmitter.off(type, handle); - } - - public getMapCanvasContainer(): HTMLElement { - return this.map.getCanvasContainer() as HTMLElement; - } - - public getSize(): [number, number] { - const size = this.map.transform; - return [size.width, size.height]; - } - // get mapStatus method - - public getType() { - return 'earth'; - } - public async init(): Promise { - const { id = 'map', style = 'light', rotation = 0, ...rest } = this.config; + const { id = 'map', rotation = 0, ...rest } = this.config; - this.viewport = new Viewport(); - - this.$mapContainer = this.creatMapContainer(id); + this.mapContainer = this.creatMapContainer(id); this.map = new Map({ - container: this.$mapContainer, + container: this.mapContainer, bearing: rotation, ...rest, }); @@ -85,65 +39,10 @@ export default class L7EarthService extends BaseMapService implements IEart this.map.on('load', this.handleCameraChanged); this.map.on('move', this.handleCameraChanged); - // 不同于高德地图，需要手动触发首次渲染 this.handleCameraChanged({}); } - public destroy() { - // 销毁地图可视化层的容器 - this.$mapContainer?.parentNode?.removeChild(this.$mapContainer); - - this.eventEmitter.removeAllListeners(); - if (this.map) { - this.map.remove(); - this.$mapContainer = null; - } - } - public emit(name: string, ...args: any[]) { - this.eventEmitter.emit(name, ...args); - } - public once(name: string, ...args: any[]) { - this.eventEmitter.once(name, ...args); - } - - public getMapContainer() { - return this.$mapContainer; - } - - public getCanvasOverlays() { - return undefined; - } - - public onCameraChanged(callback: (viewport: IViewport) => void): void { - this.cameraChangedCallback = callback; - } - - /** - * 地球模式向外暴露的 Y 轴旋转方法 - * @returns - */ - public rotateY(option: { force: boolean; reg: number }) { - const { force = false, reg = 0.01 } = option || {}; - // TODO: 让旋转方法与 - if (this.handleCameraChanging && !force) { - return; - } - - if (this.viewport) { - this.viewport.rotateY(reg); - - this.viewport.syncWithMapCamera({ - viewportHeight: this.map.transform.height, - viewportWidth: this.map.transform.width, - }); - - this.cameraChangedCallback(this.viewport); - } - } - - protected handleCameraChanged = (e: any) => { - // Tip: 统一触发地图变化事件 - this.emit('mapchange'); + protected handleCameraChanged = (e?: any) => { const DELAY_TIME = 2000; this.handleCameraChanging = true; if (this.handleCameraTimer) { @@ -152,6 +51,7 @@ export default class L7EarthService extends BaseMapService implements IEart this.handleCameraTimer = setTimeout(() => { this.handleCameraChanging = false; }, DELAY_TIME); + // 定义鼠标相机控制 const rotateStep = 0.02; if (e.type && e.originalEvent) { @@ -174,20 +74,87 @@ export default class L7EarthService extends BaseMapService implements IEart } } - const { offsetCoordinate = true } = this.config; - - // resync - this.viewport.syncWithMapCamera({ - viewportHeight: this.map.transform.height, + const option = { viewportWidth: this.map.transform.width, - }); - // set coordinate system - if (this.viewport.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD && offsetCoordinate) { - this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.LNGLAT_OFFSET); + viewportHeight: this.map.transform.height, + }; + + this.updateView(option); + }; + + public getCanvasOverlays() { + return null; + } + + // MapEvent，定义事件类型 + public on(type: string, handle: (...args: any[]) => void): void { + if (MapServiceEvent.indexOf(type) !== -1) { + this.eventEmitter.on(type, handle); + } else { + // 统一事件名称 + this.map.on(EarthEvent[type] || type, handle); + } + } + + public once(type: string, handle: (...args: any[]) => void) { + if (MapServiceEvent.indexOf(type) !== -1) { + this.eventEmitter.once(type, handle); } else { - this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.LNGLAT); + // 统一事件名称 + this.map.once(EarthEvent[type] || type, handle); } + } - this.cameraChangedCallback(this.viewport); - }; + public off(type: string, handle: (...args: any[]) => void): void { + this.map.off(EarthEvent[type] || type, handle); + this.eventEmitter.off(type, handle); + } + + public getSize(): [number, number] { + const size = this.map.transform; + + return [size.width, size.height]; + } + + /** + * 地球模式向外暴露的 Y 轴旋转方法 + */ + public rotateY(option: { force: boolean; reg: number }) { + const { force = false, reg = 0.01 } = option || {}; + // TODO: 让旋转方法与 + if (this.handleCameraChanging && !force) { + return; + } + + if (this.viewport) { + this.viewport.rotateY(reg); + + this.viewport.syncWithMapCamera({ + viewportHeight: this.map.transform.height, + viewportWidth: this.map.transform.width, + }); + + this.cameraChangedCallback?.(this.viewport); + } + } + + /** + * 将经纬度转成墨卡托坐标 + */ + // eslint-disable-next-line @typescript-eslint/no-unused-vars + public lngLatToMercator(lnglat: [number, number], altitude: number): IMercator { + throw new Error('Method not implemented.'); + } + + public getModelMatrix( + lnglat: [number, number], + altitude: number, + rotate: [number, number, number], + // eslint-disable-next-line @typescript-eslint/no-unused-vars + scale: [number, number, number] = [1, 1, 1], + // eslint-disable-next-line @typescript-eslint/no-unused-vars + origin: IMercator = { x: 0, y: 0, z: 0 }, + ): number[] { + throw new Error('Method not implemented.'); + } } diff --git a/packages/maps/src/earth/index.ts b/packages/maps/src/earth/index.ts index 8374d687d70..976a6f734be 100644 --- a/packages/maps/src/earth/index.ts +++ b/packages/maps/src/earth/index.ts @@ -1,8 +1,9 @@ +import { BaseMapWrapper } from '@antv/l7-core'; import type { Map } from '@antv/l7-map'; -import BaseMapWrapper from '../utils/BaseMapWrapper'; -import MapService from './map'; +import EarthService from './earth'; + export default class EarthWrapper extends BaseMapWrapper { protected getServiceConstructor() { - return MapService; + return EarthService; } } diff --git a/packages/maps/src/gmap/index.ts b/packages/maps/src/gmap/index.ts deleted file mode 100644 index 8a98bc07f8b..00000000000 --- a/packages/maps/src/gmap/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-disable */ -import BaseMapWrapper from '../utils/BaseMapWrapper'; -import GMapService from './map'; - -export default class GMapWrapper extends BaseMapWrapper { - protected getServiceConstructor() { - return GMapService; - } -} diff --git a/packages/maps/src/gmap/logo.css b/packages/maps/src/gmap/logo.css deleted file mode 100644 index dc13f1d8668..00000000000 --- a/packages/maps/src/gmap/logo.css +++ /dev/null @@ -1,4 +0,0 @@ -img[src*='//mapapi.qq.com/web/jsapi/logo/logo_def.png'],.logo-text -{ - display: none !important; -} diff --git a/packages/maps/src/index.ts b/packages/maps/src/index.ts index c30deff0a33..844d5e04466 100644 --- a/packages/maps/src/index.ts +++ b/packages/maps/src/index.ts @@ -1,40 +1,5 @@ -import { default as GaodeMapNext } from './amap-next'; -import BaiduMap from './bmap/'; -import Earth from './earth/'; -import GoogleMap from './gmap'; -import Map from './map/'; -import Mapbox from './mapbox/'; -import MapLibre from './maplibre'; -import TMap from './tdtmap'; -import TencentMap from './tmap'; +import Earth from './earth'; +import Map from './map'; import type { MapType } from './types'; -export * from './utils'; -const GaodeMap = GaodeMapNext; - -/** - * @deprecated - * 不再支持 GaodeMapV1，自动指向最新版 GaodeMap V2 - */ -const GaodeMapV1 = GaodeMapNext; - -/** - * @deprecated - * 不再暴露 GaodeMapV2，默认自动指向最新版 GaodeMap - */ -const GaodeMapV2 = GaodeMapNext; - -export { - BaiduMap, - Earth, - GaodeMap, - GaodeMapV1, - GaodeMapV2, - GoogleMap, - Map, - MapLibre, - MapType, - Mapbox, - TMap, - TencentMap, -}; +export { Earth, Map, MapType }; diff --git a/packages/maps/src/map/index.ts b/packages/maps/src/map/index.ts index 6abba1cbc1f..63855dc5d21 100644 --- a/packages/maps/src/map/index.ts +++ b/packages/maps/src/map/index.ts @@ -1,6 +1,7 @@ +import { BaseMapWrapper } from '@antv/l7-core'; import type { Map } from '@antv/l7-map'; -import BaseMapWrapper from '../utils/BaseMapWrapper'; import MapService from './map'; + export default class MapboxWrapper extends BaseMapWrapper { protected getServiceConstructor() { return MapService; diff --git a/packages/maps/src/map/map.ts b/packages/maps/src/map/map.ts index 582ae587997..a2aa2eb99be 100644 --- a/packages/maps/src/map/map.ts +++ b/packages/maps/src/map/map.ts @@ -1,83 +1,48 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -/** - * MapboxService - */ -import type { IMercator } from '@antv/l7-core'; +import type { + Bounds, + ILngLat, + IMercator, + IPoint, + IStatusOptions, + IViewport, + MapStyleConfig, +} from '@antv/l7-core'; +import { BaseMapService, MapServiceEvent, WebMercatorViewport } from '@antv/l7-core'; import { Map, MercatorCoordinate } from '@antv/l7-map'; +import { DOM } from '@antv/l7-utils'; import { mat4, vec3 } from 'gl-matrix'; -import Viewport from '../lib/web-mercator-viewport'; import { MapType } from '../types'; -import BaseMapService from '../utils/BaseMapService'; +import type { ISimpleMapCoord } from './simple-coord'; +import { SimpleMapCoord } from './simple-coord'; -// TODO: 基于抽象类 BaseMap 实现 -export default class DefaultMapService extends BaseMapService { - public version: string = MapType.DEFAULT; - /** - * 将经纬度转成墨卡托坐标 - * @param lnglat - * @returns - */ - public lngLatToCoord(lnglat: [number, number], origin: IMercator = { x: 0, y: 0, z: 0 }) { - // @ts-ignore - const { x, y } = this.lngLatToMercator(lnglat, 0); - return [x - origin.x, y - origin.y] as [number, number]; - } - - public lngLatToMercator(lnglat: [number, number], altitude: number): IMercator { - const { x = 0, y = 0, z = 0 } = MercatorCoordinate.fromLngLat(lnglat, altitude); - return { x, y, z }; - } - public getModelMatrix( - lnglat: [number, number], - altitude: number, - rotate: [number, number, number], - scale: [number, number, number] = [1, 1, 1], - origin: IMercator = { x: 0, y: 0, z: 0 }, - ): number[] { - const modelAsMercatorCoordinate = MercatorCoordinate.fromLngLat(lnglat, altitude); - // @ts-ignore - const meters = modelAsMercatorCoordinate.meterInMercatorCoordinateUnits(); - const modelMatrix = mat4.create(); - - mat4.translate( - modelMatrix, - modelMatrix, - vec3.fromValues( - modelAsMercatorCoordinate.x - origin.x, - modelAsMercatorCoordinate.y - origin.y, - modelAsMercatorCoordinate.z || 0 - origin.z, - ), - ); +const MapEvent: Record = { + mapmove: 'move', + camerachange: 'move', + zoomchange: 'zoom', + dragging: 'drag', +}; - mat4.scale( - modelMatrix, - modelMatrix, - vec3.fromValues(meters * scale[0], -meters * scale[1], meters * scale[2]), - ); +export default class MapService extends BaseMapService { + protected viewport: IViewport; - mat4.rotateX(modelMatrix, modelMatrix, rotate[0]); - mat4.rotateY(modelMatrix, modelMatrix, rotate[1]); - mat4.rotateZ(modelMatrix, modelMatrix, rotate[2]); + public type: string = MapType.MAP; - return modelMatrix as unknown as number[]; - } + public version: 'DEFAULT' | 'SIMPLE'; - public viewport: Viewport; + public simpleMapCoord: ISimpleMapCoord = new SimpleMapCoord(); public async init(): Promise { const { id = 'map', - style = 'light', rotation = 0, mapInstance, - version = 'DEFAULTMAP', + version = 'DEFAULT', mapSize = 10000, interactive = true, ...rest } = this.config; - this.viewport = new Viewport(); - + this.viewport = new WebMercatorViewport(); this.version = version; this.simpleMapCoord.setSize(mapSize); if (version === 'SIMPLE' && rest.center) { @@ -86,11 +51,11 @@ export default class DefaultMapService extends BaseMapService { if (mapInstance) { // @ts-ignore this.map = mapInstance; - this.$mapContainer = this.map.getContainer(); + this.mapContainer = this.map.getContainer(); } else { - this.$mapContainer = this.creatMapContainer(id); + this.mapContainer = this.creatMapContainer(id); this.map = new Map({ - container: this.$mapContainer, + container: this.mapContainer, bearing: rotation, ...rest, }); @@ -104,7 +69,6 @@ export default class DefaultMapService extends BaseMapService { this.map.on('move', this.handleCameraChanged); } - // 不同于高德地图，需要手动触发首次渲染 setTimeout(() => { this.handleCameraChanged(); }, 100); @@ -112,28 +76,286 @@ export default class DefaultMapService extends BaseMapService { } protected creatMapContainer(id: string | HTMLDivElement) { - let wrapper = id as HTMLDivElement; - if (typeof id === 'string') { - wrapper = document.getElementById(id) as HTMLDivElement; - } - const container = document.createElement('div'); - container.style.cssText += ` + const wrapper = super.creatMapContainer(id); + const mapContainer = document.createElement('div'); + mapContainer.style.cssText += ` position: absolute; top: 0; height: 100%; width: 100%; `; - wrapper.appendChild(container); - return container; + wrapper.appendChild(mapContainer); + return mapContainer; } - public exportMap(type: 'jpg' | 'png'): string { - return ''; + protected handleCameraChanged = () => { + const { lat, lng } = this.map.getCenter(); + const center: [number, number] = [lng, lat]; + const option = { + center, + viewportWidth: this.map.transform.width, + viewportHeight: this.map.transform.height, + bearing: this.map.getBearing(), + pitch: this.map.getPitch(), + zoom: this.map.getZoom(), + // mapbox 中固定相机高度为 viewport 高度的 1.5 倍 + cameraHeight: 0, + }; + + this.updateView(option); + }; + + public getContainer(): HTMLElement | null { + return this.map.getContainer(); } - public setMapStyle(style: any): void {} + public getMapCanvasContainer(): HTMLElement { + return this.map.getCanvasContainer() as HTMLElement; + } + + public addMarkerContainer(): void { + const container = this.map.getCanvasContainer(); + this.markerContainer = DOM.create('div', 'l7-marker-container', container); + this.markerContainer.setAttribute('tabindex', '-1'); + } public getCanvasOverlays() { return this.getContainer(); } + + // MapEvent，定义事件类型 + public on(type: string, handle: (...args: any[]) => void): void { + if (MapServiceEvent.indexOf(type) !== -1) { + this.eventEmitter.on(type, handle); + } else { + // 统一事件名称 + this.map.on(MapEvent[type] || type, handle); + } + } + + public once(type: string, handle: (...args: any[]) => void) { + if (MapServiceEvent.indexOf(type) !== -1) { + this.eventEmitter.once(type, handle); + } else { + // 统一事件名称 + this.map.once(MapEvent[type] || type, handle); + } + } + + public off(type: string, handle: (...args: any[]) => void): void { + this.map.off(MapEvent[type] || type, handle); + this.eventEmitter.off(type, handle); + } + + public getSize(): [number, number] { + if (this.version === 'SIMPLE') { + return this.simpleMapCoord.getSize(); + } + const size = this.map.transform; + + return [size.width, size.height]; + } + + public getMinZoom(): number { + return this.map.getMinZoom(); + } + + public getMaxZoom(): number { + return this.map.getMaxZoom(); + } + + public getZoom(): number { + return this.map.getZoom(); + } + + public getCenter(): ILngLat { + return this.map.getCenter(); + } + + public getPitch(): number { + return this.map.getPitch(); + } + + public getRotation(): number { + return this.map.getBearing(); + } + + public getBounds(): Bounds { + return this.map.getBounds().toArray() as Bounds; + } + + public getMapStyleConfig(): MapStyleConfig { + return {}; + } + + public getMapStyleValue(name: string) { + return this.getMapStyleConfig()[name] || name; + } + + public getMapStyle(): string { + return ''; + } + + public setMapStyle(): void {} + + public setRotation(rotation: number): void { + this.map.setBearing(rotation); + } + + public zoomIn(option?: any, eventData?: any): void { + this.map.zoomIn(option, eventData); + } + + public zoomOut(option?: any, eventData?: any): void { + this.map.zoomOut(option, eventData); + } + + public panTo(p: [number, number]): void { + this.map.panTo(p); + } + + public panBy(x: number = 0, y: number = 0): void { + // @ts-ignore + this.map.panBy([x, y]); + } + + public fitBounds(bound: Bounds, fitBoundsOptions?: any): void { + this.map.fitBounds(bound, fitBoundsOptions); + } + + public setZoomAndCenter(zoom: number, center: [number, number]): void { + this.map.flyTo({ + zoom, + center, + }); + } + + public setCenter(lnglat: [number, number]): void { + this.map.setCenter(lnglat); + } + + public setPitch(pitch: number) { + return this.map.setPitch(pitch); + } + + public setZoom(zoom: number) { + return this.map.setZoom(zoom); + } + + public setMaxZoom(max: number): void { + this.map.setMaxZoom(max); + } + + public setMinZoom(min: number): void { + this.map.setMinZoom(min); + } + + public setMapStatus(option: Partial): void { + if (option.doubleClickZoom === true) { + this.map.doubleClickZoom.enable(); + } + if (option.doubleClickZoom === false) { + this.map.doubleClickZoom.disable(); + } + if (option.dragEnable === false) { + this.map.dragPan.disable(); + } + if (option.dragEnable === true) { + this.map.dragPan.enable(); + } + if (option.rotateEnable === false) { + this.map.dragRotate.disable(); + } + if (option.dragEnable === true) { + this.map.dragRotate.enable(); + } + if (option.keyboardEnable === false) { + this.map.keyboard.disable(); + } + if (option.keyboardEnable === true) { + this.map.keyboard.enable(); + } + if (option.zoomEnable === false) { + this.map.scrollZoom.disable(); + } + if (option.zoomEnable === true) { + this.map.scrollZoom.enable(); + } + } + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + public meterToCoord(center: [number, number], outer: [number, number]) { + return 1.0; + } + + public pixelToLngLat(pixel: [number, number]): ILngLat { + return this.map.unproject(pixel); + } + + public lngLatToPixel(lnglat: [number, number]): IPoint { + return this.map.project(lnglat); + } + + public containerToLngLat(pixel: [number, number]): ILngLat { + return this.map.unproject(pixel); + } + + public lngLatToContainer(lnglat: [number, number]): IPoint { + return this.map.project(lnglat); + } + + /** + * 将经纬度转成墨卡托坐标 + */ + public lngLatToMercator(lnglat: [number, number], altitude: number): IMercator { + const { x = 0, y = 0, z = 0 } = MercatorCoordinate.fromLngLat(lnglat, altitude); + return { x, y, z }; + } + + public getModelMatrix( + lnglat: [number, number], + altitude: number, + rotate: [number, number, number], + scale: [number, number, number] = [1, 1, 1], + origin: IMercator = { x: 0, y: 0, z: 0 }, + ): number[] { + const modelAsMercatorCoordinate = MercatorCoordinate.fromLngLat(lnglat, altitude); + // @ts-ignore + const meters = modelAsMercatorCoordinate.meterInMercatorCoordinateUnits(); + const modelMatrix = mat4.create(); + + mat4.translate( + modelMatrix, + modelMatrix, + vec3.fromValues( + modelAsMercatorCoordinate.x - origin.x, + modelAsMercatorCoordinate.y - origin.y, + modelAsMercatorCoordinate.z || 0 - origin.z, + ), + ); + + mat4.scale( + modelMatrix, + modelMatrix, + vec3.fromValues(meters * scale[0], -meters * scale[1], meters * scale[2]), + ); + + mat4.rotateX(modelMatrix, modelMatrix, rotate[0]); + mat4.rotateY(modelMatrix, modelMatrix, rotate[1]); + mat4.rotateZ(modelMatrix, modelMatrix, rotate[2]); + + return modelMatrix as unknown as number[]; + } + + public exportMap(): string { + return ''; + } + + public destroy(): void { + super.destroy(); + if (this.map) { + this.map.remove(); + this.mapContainer = null; + } + } } diff --git a/packages/maps/src/utils/simpleMapCoord.ts b/packages/maps/src/map/simple-coord.ts similarity index 99% rename from packages/maps/src/utils/simpleMapCoord.ts rename to packages/maps/src/map/simple-coord.ts index 0f18b87e4af..9799b5deed6 100644 --- a/packages/maps/src/utils/simpleMapCoord.ts +++ b/packages/maps/src/map/simple-coord.ts @@ -4,6 +4,7 @@ export interface ISimpleMapCoord { project(lnglat: [number, number]): [number, number]; unproject(xy: [number, number]): [number, number]; } + export class SimpleMapCoord implements ISimpleMapCoord { private size: number = 10000; constructor(size?: number) { diff --git a/packages/maps/src/map/theme.ts b/packages/maps/src/map/theme.ts deleted file mode 100644 index 3b29aa499fa..00000000000 --- a/packages/maps/src/map/theme.ts +++ /dev/null @@ -1,23 +0,0 @@ -export const MapTheme: { - [key: string]: any; -} = { - light: 'mapbox://styles/zcxduo/ck2ypyb1r3q9o1co1766dex29', - dark: 'mapbox://styles/zcxduo/ck241p6413s0b1cpayzldv7x7', - normal: 'mapbox://styles/mapbox/streets-v11', - blank: { - version: 8, - // sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite', - // glyphs: - // 'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf', - sources: {}, - layers: [ - { - id: 'background', - type: 'background', - layout: { - visibility: 'none', - }, - }, - ], - }, -}; diff --git a/packages/maps/src/mapbox/index.ts b/packages/maps/src/mapbox/index.ts deleted file mode 100644 index ec31022f2b4..00000000000 --- a/packages/maps/src/mapbox/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { Map } from 'mapbox-gl'; -import type { IMapboxInstance } from '../types'; -import BaseMapWrapper from '../utils/BaseMapWrapper'; -import './logo.css'; -import MapboxService from './map'; -export default class MapboxWrapper extends BaseMapWrapper { - protected getServiceConstructor() { - return MapboxService; - } -} diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts deleted file mode 100644 index 6be734b068b..00000000000 --- a/packages/maps/src/mapbox/map.ts +++ /dev/null @@ -1,221 +0,0 @@ -/** - * MapboxService - */ -import type { IMercator } from '@antv/l7-core'; -import { mat4, vec3 } from 'gl-matrix'; -import type { Map } from 'mapbox-gl'; -import mapboxgl from 'mapbox-gl'; -import 'mapbox-gl/dist/mapbox-gl.css'; -import Viewport from '../lib/web-mercator-viewport'; -import type { IMapboxInstance } from '../types'; -import BaseMapService from '../utils/BaseMapService'; -window.mapboxgl = mapboxgl; - -let mapdivCount = 0; -const MAPBOX_API_KEY = - '101MlGsZ2AmmA&access_token=pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg'; - -// TODO: 基于抽象类 BaseMap 实现 -export default class MapboxService extends BaseMapService { - public version: string = 'MAPBOX'; - // get mapStatus method - - public viewport: Viewport; - - public getType() { - return 'mapbox'; - } - - /** - * 将经纬度转成墨卡托坐标 - * @param lnglat - * @returns - */ - public lngLatToCoord(lnglat: [number, number], origin: IMercator = { x: 0, y: 0, z: 0 }) { - // @ts-ignore - const { x, y } = this.lngLatToMercator(lnglat, 0); - return [x - origin.x, y - origin.y] as [number, number]; - } - - public lngLatToMercator(lnglat: [number, number], altitude: number): IMercator { - const { x = 0, y = 0, z = 0 } = window.mapboxgl.MercatorCoordinate.fromLngLat(lnglat, altitude); - return { x, y, z }; - } - public getModelMatrix( - lnglat: [number, number], - altitude: number, - rotate: [number, number, number], - scale: [number, number, number] = [1, 1, 1], - origin: IMercator = { x: 0, y: 0, z: 0 }, - ): number[] { - const modelAsMercatorCoordinate = window.mapboxgl.MercatorCoordinate.fromLngLat( - lnglat, - altitude, - ); - // @ts-ignore - const meters = modelAsMercatorCoordinate.meterInMercatorCoordinateUnits(); - const modelMatrix = mat4.create(); - - mat4.translate( - modelMatrix, - modelMatrix, - vec3.fromValues( - modelAsMercatorCoordinate.x - origin.x, - modelAsMercatorCoordinate.y - origin.y, - modelAsMercatorCoordinate.z || 0 - origin.z, - ), - ); - - mat4.scale( - modelMatrix, - modelMatrix, - vec3.fromValues(meters * scale[0], -meters * scale[1], meters * scale[2]), - ); - - mat4.rotateX(modelMatrix, modelMatrix, rotate[0]); - mat4.rotateY(modelMatrix, modelMatrix, rotate[1]); - mat4.rotateZ(modelMatrix, modelMatrix, rotate[2]); - - return modelMatrix as unknown as number[]; - } - - public async init(): Promise { - const { - id = 'map', - attributionControl = false, - style = 'light', - token = MAPBOX_API_KEY, - rotation = 0, - mapInstance, - ...rest - } = this.config; - - this.viewport = new Viewport(); - - /** - * TODO: 使用 mapbox v0.53.x 版本 custom layer，需要共享 gl context - * @see https://github.com/mapbox/mapbox-gl-js/blob/master/debug/threejs.html#L61-L64 - */ - - // 判断全局 mapboxgl 对象的加载 - if (!mapInstance && !window.mapboxgl) { - // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。 - console.error(this.configService.getSceneWarninfo('SDK')); - } - - if ( - token === MAPBOX_API_KEY && - style !== 'blank' && - !window.mapboxgl.accessToken && - !mapInstance // 如果用户传递了 mapInstance，应该不去干预实例的 accessToken。 - ) { - console.warn(this.configService.getSceneWarninfo('MapToken')); - } - - // 判断是否设置了 accessToken - if (!mapInstance && !window.mapboxgl.accessToken) { - // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 mapboxgl 对象。 - window.mapboxgl.accessToken = token; - } - - if (mapInstance) { - // @ts-ignore - this.map = mapInstance; - this.$mapContainer = this.map.getContainer(); - } else { - this.$mapContainer = this.creatMapContainer(id); - // @ts-ignore - this.map = new window.mapboxgl.Map({ - container: this.$mapContainer, - style: this.getMapStyleValue(style), - attributionControl, - bearing: rotation, - ...rest, - }); - } - this.map.on('load', () => { - this.handleCameraChanged(); - }); - this.map.on('move', this.handleCameraChanged); - - // 不同于高德地图，需要手动触发首次渲染 - this.handleCameraChanged(); - } - - public destroy() { - // 销毁地图可视化层的容器 - this.$mapContainer?.parentNode?.removeChild(this.$mapContainer); - - this.eventEmitter.removeAllListeners(); - if (this.map) { - this.map.remove(); - this.$mapContainer = null; - } - } - public emit(name: string, ...args: any[]) { - this.eventEmitter.emit(name, ...args); - } - public once(name: string, ...args: any[]) { - this.eventEmitter.once(name, ...args); - } - - public getMapContainer() { - return this.$mapContainer; - } - - public getCanvasOverlays() { - return this.getMapContainer()?.querySelector('.mapboxgl-canvas-container') as HTMLElement; - } - - public meterToCoord(center: [number, number], outer: [number, number]) { - // 统一根据经纬度来转化 - // Tip: 实际米距离 unit meter - const centerLnglat = new mapboxgl.LngLat(center[0], center[1]); - - const outerLnglat = new mapboxgl.LngLat(outer[0], outer[1]); - const meterDis = centerLnglat.distanceTo(outerLnglat); - - // Tip: 三维世界坐标距离 - - const centerMercator = mapboxgl.MercatorCoordinate.fromLngLat({ - lng: center[0], - lat: center[1], - }); - const outerMercator = mapboxgl.MercatorCoordinate.fromLngLat({ - lng: outer[0], - lat: outer[1], - }); - const { x: x1, y: y1 } = centerMercator; - const { x: x2, y: y2 } = outerMercator; - // Math.pow(2, 22) 4194304 - const coordDis = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) * 4194304 * 2; - - return coordDis / meterDis; - } - - public exportMap(type: 'jpg' | 'png'): string { - const renderCanvas = this.map.getCanvas(); - const layersPng = - type === 'jpg' - ? (renderCanvas?.toDataURL('image/jpeg') as string) - : (renderCanvas?.toDataURL('image/png') as string); - return layersPng; - } - - protected creatMapContainer(id: string | HTMLDivElement) { - let $wrapper = id as HTMLDivElement; - if (typeof id === 'string') { - $wrapper = document.getElementById(id) as HTMLDivElement; - } - const $amapdiv = document.createElement('div'); - $amapdiv.style.cssText += ` - position: absolute; - top: 0; - height: 100%; - width: 100%; - `; - $amapdiv.id = 'l7_mapbox_div' + mapdivCount++; - $wrapper.appendChild($amapdiv); - return $amapdiv; - } -} diff --git a/packages/maps/src/mapbox/theme.ts b/packages/maps/src/mapbox/theme.ts deleted file mode 100644 index 3b29aa499fa..00000000000 --- a/packages/maps/src/mapbox/theme.ts +++ /dev/null @@ -1,23 +0,0 @@ -export const MapTheme: { - [key: string]: any; -} = { - light: 'mapbox://styles/zcxduo/ck2ypyb1r3q9o1co1766dex29', - dark: 'mapbox://styles/zcxduo/ck241p6413s0b1cpayzldv7x7', - normal: 'mapbox://styles/mapbox/streets-v11', - blank: { - version: 8, - // sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite', - // glyphs: - // 'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf', - sources: {}, - layers: [ - { - id: 'background', - type: 'background', - layout: { - visibility: 'none', - }, - }, - ], - }, -}; diff --git a/packages/maps/src/maplibre/index.ts b/packages/maps/src/maplibre/index.ts deleted file mode 100644 index e2753bd2f47..00000000000 --- a/packages/maps/src/maplibre/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { Map } from 'maplibre-gl'; -import type { IMapboxInstance } from '../types'; -import BaseMapWrapper from '../utils/BaseMapWrapper'; -import MaplibreService from './map'; -export default class MapboxWrapper extends BaseMapWrapper { - protected getServiceConstructor() { - return MaplibreService; - } -} diff --git a/packages/maps/src/maplibre/map.ts b/packages/maps/src/maplibre/map.ts deleted file mode 100644 index 9850456f47c..00000000000 --- a/packages/maps/src/maplibre/map.ts +++ /dev/null @@ -1,209 +0,0 @@ -/** - * MapboxService - */ -import type { IMercator } from '@antv/l7-core'; -import { mat4, vec3 } from 'gl-matrix'; -import type { Map } from 'maplibre-gl'; -import maplibregl from 'maplibre-gl'; -import 'maplibre-gl/dist/maplibre-gl.css'; -import Viewport from '../lib/web-mercator-viewport'; -import { MapType, type IMapboxInstance } from '../types'; -import BaseMapService from '../utils/BaseMapService'; - -// @ts-ignore -window.maplibregl = maplibregl; - -let mapdivCount = 0; - -// TODO: 基于抽象类 BaseMap 实现 -export default class Service extends BaseMapService { - public version: string = MapType.MAPBOX; - // get mapStatus method - - public viewport: Viewport; - - public getType() { - return 'mapbox'; - } - - /** - * 将经纬度转成墨卡托坐标 - * @param lnglat - * @returns - */ - public lngLatToCoord(lnglat: [number, number], origin: IMercator = { x: 0, y: 0, z: 0 }) { - // @ts-ignore - const { x, y } = this.lngLatToMercator(lnglat, 0); - return [x - origin.x, y - origin.y] as [number, number]; - } - - public lngLatToMercator(lnglat: [number, number], altitude: number): IMercator { - const { - x = 0, - y = 0, - z = 0, - } = window.maplibregl.MercatorCoordinate.fromLngLat(lnglat, altitude); - return { x, y, z }; - } - public getModelMatrix( - lnglat: [number, number], - altitude: number, - rotate: [number, number, number], - scale: [number, number, number] = [1, 1, 1], - origin: IMercator = { x: 0, y: 0, z: 0 }, - ): number[] { - const modelAsMercatorCoordinate = window.maplibregl.MercatorCoordinate.fromLngLat( - lnglat, - altitude, - ); - // @ts-ignore - const meters = modelAsMercatorCoordinate.meterInMercatorCoordinateUnits(); - const modelMatrix = mat4.create(); - - mat4.translate( - modelMatrix, - modelMatrix, - vec3.fromValues( - modelAsMercatorCoordinate.x - origin.x, - modelAsMercatorCoordinate.y - origin.y, - modelAsMercatorCoordinate.z || 0 - origin.z, - ), - ); - - mat4.scale( - modelMatrix, - modelMatrix, - vec3.fromValues(meters * scale[0], -meters * scale[1], meters * scale[2]), - ); - - mat4.rotateX(modelMatrix, modelMatrix, rotate[0]); - mat4.rotateY(modelMatrix, modelMatrix, rotate[1]); - mat4.rotateZ(modelMatrix, modelMatrix, rotate[2]); - - return modelMatrix as unknown as number[]; - } - - public async init(): Promise { - const { - id = 'map', - attributionControl = false, - style = 'light', - rotation = 0, - mapInstance, - ...rest - } = this.config; - - this.viewport = new Viewport(); - - /** - * TODO: 使用 mapbox v0.53.x 版本 custom layer，需要共享 gl context - * @see https://github.com/mapbox/mapbox-gl-js/blob/master/debug/threejs.html#L61-L64 - */ - - // 判断全局 maplibregl 对象的加载 - if (!mapInstance && !window.maplibregl) { - // 用户有时传递进来的实例是继承于 mapbox 实例化的，不一定是 maplibregl 对象。 - console.error(this.configService.getSceneWarninfo('SDK')); - } - - if (mapInstance) { - // @ts-ignore - this.map = mapInstance; - this.$mapContainer = this.map.getContainer(); - } else { - this.$mapContainer = this.creatMapContainer(id); - // @ts-ignore - this.map = new window.maplibregl.Map({ - container: this.$mapContainer, - style: this.getMapStyleValue(style), - attributionControl, - bearing: rotation, - ...rest, - }); - } - this.map.on('load', () => { - this.handleCameraChanged(); - }); - this.map.on('move', this.handleCameraChanged); - - // 不同于高德地图，需要手动触发首次渲染 - this.handleCameraChanged(); - } - - public destroy() { - // 销毁地图可视化层的容器 - this.$mapContainer?.parentNode?.removeChild(this.$mapContainer); - - this.eventEmitter.removeAllListeners(); - if (this.map) { - this.map.remove(); - this.$mapContainer = null; - } - } - public emit(name: string, ...args: any[]) { - this.eventEmitter.emit(name, ...args); - } - public once(name: string, ...args: any[]) { - this.eventEmitter.once(name, ...args); - } - - public getMapContainer() { - return this.$mapContainer; - } - - public getCanvasOverlays() { - return this.getMapContainer()?.querySelector('.maplibregl-canvas-container') as HTMLElement; - } - - public meterToCoord(center: [number, number], outer: [number, number]) { - // 统一根据经纬度来转化 - // Tip: 实际米距离 unit meter - const centerLnglat = new maplibregl.LngLat(center[0], center[1]); - - const outerLnglat = new maplibregl.LngLat(outer[0], outer[1]); - const meterDis = centerLnglat.distanceTo(outerLnglat); - - // Tip: 三维世界坐标距离 - - const centerMercator = maplibregl.MercatorCoordinate.fromLngLat({ - lng: center[0], - lat: center[1], - }); - const outerMercator = maplibregl.MercatorCoordinate.fromLngLat({ - lng: outer[0], - lat: outer[1], - }); - const { x: x1, y: y1 } = centerMercator; - const { x: x2, y: y2 } = outerMercator; - // Math.pow(2, 22) 4194304 - const coordDis = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) * 4194304 * 2; - - return coordDis / meterDis; - } - - public exportMap(type: 'jpg' | 'png'): string { - const renderCanvas = this.map.getCanvas(); - const layersPng = - type === 'jpg' - ? (renderCanvas?.toDataURL('image/jpeg') as string) - : (renderCanvas?.toDataURL('image/png') as string); - return layersPng; - } - - protected creatMapContainer(id: string | HTMLDivElement) { - let $wrapper = id as HTMLDivElement; - if (typeof id === 'string') { - $wrapper = document.getElementById(id) as HTMLDivElement; - } - const $amapdiv = document.createElement('div'); - $amapdiv.style.cssText += ` - position: absolute; - top: 0; - height: 100%; - width: 100%; - `; - $amapdiv.id = 'l7_mapbox_div' + mapdivCount++; - $wrapper.appendChild($amapdiv); - return $amapdiv; - } -} diff --git a/packages/maps/src/tdtmap/logo.css b/packages/maps/src/tdtmap/logo.css deleted file mode 100644 index dc13f1d8668..00000000000 --- a/packages/maps/src/tdtmap/logo.css +++ /dev/null @@ -1,4 +0,0 @@ -img[src*='//mapapi.qq.com/web/jsapi/logo/logo_def.png'],.logo-text -{ - display: none !important; -} diff --git a/packages/maps/src/tmap/index.ts b/packages/maps/src/tmap/index.ts deleted file mode 100644 index fb3907b78b0..00000000000 --- a/packages/maps/src/tmap/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* eslint-disable */ -import BaseMapWrapper from '../utils/BaseMapWrapper'; -import TMapService from './map'; - -export default class TMapWrapper extends BaseMapWrapper { - protected getServiceConstructor() { - return TMapService; - } -} diff --git a/packages/maps/src/types.ts b/packages/maps/src/types.ts index 4cbf9b622a7..4ec4c1d617a 100644 --- a/packages/maps/src/types.ts +++ b/packages/maps/src/types.ts @@ -1,58 +1,4 @@ -import type { IControl } from 'mapbox-gl'; - export enum MapType { - 'GAODE' = 'GAODE', - 'MAPBOX' = 'MAPBOX', - 'DEFAULT' = 'DEFAUlTMAP', - 'SIMPLE' = 'SIMPLE', - 'GLOBEL' = 'GLOBEL', -} - -export interface IAMapEvent { - camera: { - fov: number; - near: number; - far: number; - height: number; - pitch: number; - rotation: number; - aspect: number; - position: { x: number; y: number }; - }; -} - -interface CustomCoords { - getCameraParams(): void; - getCenter(): void; - getMVPMatrix(): void; - [other: string]: any; -} - -export interface IAMapInstance { - get(key: string): unknown; - getZooms?(): number[]; - customCoords?: CustomCoords; -} - -export interface IMapboxInstance { - _controls: IControl[]; - transform: { - width: number; - height: number; - }; -} - -export interface IEventEmitter { - emit(event: EventTypes, ...args: any[]): boolean; - /** - * Add a listener for a given event. - */ - on(event: EventTypes, handle: (...args: any[]) => void, context?: any): this; - - off(event: EventTypes, handle: (...args: any[]) => void, context?: any, once?: boolean): this; - - /** - * Remove all listeners, or those of the specified event. - */ - removeAllListeners(event?: EventTypes): this; + 'MAP' = 'Map', + 'GLOBEL' = 'Globel', } diff --git a/packages/maps/src/utils/index.ts b/packages/maps/src/utils/index.ts deleted file mode 100644 index e720907740d..00000000000 --- a/packages/maps/src/utils/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import BaseMapService from './BaseMapService'; -import BaseMapWrapper from './BaseMapWrapper'; -export { BaseMapService, BaseMapWrapper }; diff --git a/packages/maps/src/utils/theme.ts b/packages/maps/src/utils/theme.ts deleted file mode 100644 index 3b29aa499fa..00000000000 --- a/packages/maps/src/utils/theme.ts +++ /dev/null @@ -1,23 +0,0 @@ -export const MapTheme: { - [key: string]: any; -} = { - light: 'mapbox://styles/zcxduo/ck2ypyb1r3q9o1co1766dex29', - dark: 'mapbox://styles/zcxduo/ck241p6413s0b1cpayzldv7x7', - normal: 'mapbox://styles/mapbox/streets-v11', - blank: { - version: 8, - // sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite', - // glyphs: - // 'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf', - sources: {}, - layers: [ - { - id: 'background', - type: 'background', - layout: { - visibility: 'none', - }, - }, - ], - }, -}; diff --git a/packages/maps/src/utils/utils.ts b/packages/maps/src/utils/utils.ts deleted file mode 100644 index f5389583c6f..00000000000 --- a/packages/maps/src/utils/utils.ts +++ /dev/null @@ -1,46 +0,0 @@ -export type IPadding = - | number - | [number, number, number, number] - | { - top?: number; - bottom?: number; - right?: number; - left?: number; - }; - -export function toPaddingOptions(padding: IPadding = {}) { - const defaultPadding = { - top: 0, - right: 0, - bottom: 0, - left: 0, - }; - if (typeof padding === 'number') { - return { - top: padding, - right: padding, - bottom: padding, - left: padding, - }; - } - if (Array.isArray(padding)) { - if (padding.length === 4) { - return { - top: padding[0], - right: padding[1], - bottom: padding[2], - left: padding[3], - }; - } - if (padding.length === 2) { - return { - top: padding[0], - right: padding[1], - bottom: padding[0], - left: padding[1], - }; - } - } - - return { ...defaultPadding, ...padding }; -} diff --git a/packages/maps/tsconfig.json b/packages/maps/tsconfig.json index d1eb80449f9..4082f16a5d9 100644 --- a/packages/maps/tsconfig.json +++ b/packages/maps/tsconfig.json @@ -1,11 +1,3 @@ { - "extends": "../../tsconfig.json", - "compilerOptions": { - "types": [ - "@types/amap-js-api", - "@types/bmapgl", - "@types/google.maps", - "@map-component/tmap-types" - ] - } + "extends": "../../tsconfig.json" } diff --git a/packages/renderer/__tests__/index.spec.ts b/packages/renderer/__tests__/index.spec.ts index 595868f8922..f13284cded6 100644 --- a/packages/renderer/__tests__/index.spec.ts +++ b/packages/renderer/__tests__/index.spec.ts @@ -1,4 +1,4 @@ -import { DeviceRendererService } from '../src/index'; +import { DeviceRendererService } from '../src'; describe('template', () => { it('DeviceRenderer', () => { diff --git a/packages/renderer/package.json b/packages/renderer/package.json index e99d15b61ab..6ca4808385e 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -23,8 +23,7 @@ "@antv/g-device-api": "^1.6.4", "@antv/l7-core": "workspace:*", "@antv/l7-utils": "workspace:*", - "@babel/runtime": "^7.7.7", - "regl": "1.6.1" + "@babel/runtime": "^7.7.7" }, "devDependencies": { "@antv/l7-test-utils": "workspace:^" diff --git a/packages/renderer/src/device/DeviceAttribute.ts b/packages/renderer/src/DeviceAttribute.ts similarity index 100% rename from packages/renderer/src/device/DeviceAttribute.ts rename to packages/renderer/src/DeviceAttribute.ts diff --git a/packages/renderer/src/device/DeviceBuffer.ts b/packages/renderer/src/DeviceBuffer.ts similarity index 100% rename from packages/renderer/src/device/DeviceBuffer.ts rename to packages/renderer/src/DeviceBuffer.ts diff --git a/packages/renderer/src/device/DeviceCache.ts b/packages/renderer/src/DeviceCache.ts similarity index 100% rename from packages/renderer/src/device/DeviceCache.ts rename to packages/renderer/src/DeviceCache.ts diff --git a/packages/renderer/src/device/DeviceElements.ts b/packages/renderer/src/DeviceElements.ts similarity index 100% rename from packages/renderer/src/device/DeviceElements.ts rename to packages/renderer/src/DeviceElements.ts diff --git a/packages/renderer/src/device/DeviceFramebuffer.ts b/packages/renderer/src/DeviceFramebuffer.ts similarity index 100% rename from packages/renderer/src/device/DeviceFramebuffer.ts rename to packages/renderer/src/DeviceFramebuffer.ts diff --git a/packages/renderer/src/device/DeviceModel.ts b/packages/renderer/src/DeviceModel.ts similarity index 99% rename from packages/renderer/src/device/DeviceModel.ts rename to packages/renderer/src/DeviceModel.ts index b826d243dd5..d5d90179473 100644 --- a/packages/renderer/src/device/DeviceModel.ts +++ b/packages/renderer/src/DeviceModel.ts @@ -27,11 +27,11 @@ import type { } from '@antv/l7-core'; import { gl } from '@antv/l7-core'; import { lodashUtil } from '@antv/l7-utils'; -import type DeviceRendererService from '.'; import type DeviceAttribute from './DeviceAttribute'; import type DeviceBuffer from './DeviceBuffer'; import type DeviceElements from './DeviceElements'; import DeviceFramebuffer from './DeviceFramebuffer'; +import type { DeviceRendererService } from './DeviceRendererService'; import DeviceTexture2D from './DeviceTexture2D'; import { blendEquationMap, diff --git a/packages/renderer/src/device/index.ts b/packages/renderer/src/DeviceRendererService.ts similarity index 99% rename from packages/renderer/src/device/index.ts rename to packages/renderer/src/DeviceRendererService.ts index b0e37912dc4..777a72cc98e 100644 --- a/packages/renderer/src/device/index.ts +++ b/packages/renderer/src/DeviceRendererService.ts @@ -41,7 +41,7 @@ const { isUndefined } = lodashUtil; /** * Device API renderer */ -export default class DeviceRendererService implements IRendererService { +export class DeviceRendererService implements IRendererService { uniformBuffers: IBuffer[] = []; extensionObject: IExtensions; private device: Device; diff --git a/packages/renderer/src/device/DeviceTexture2D.ts b/packages/renderer/src/DeviceTexture2D.ts similarity index 100% rename from packages/renderer/src/device/DeviceTexture2D.ts rename to packages/renderer/src/DeviceTexture2D.ts diff --git a/packages/renderer/src/device/constants.ts b/packages/renderer/src/constants.ts similarity index 100% rename from packages/renderer/src/device/constants.ts rename to packages/renderer/src/constants.ts diff --git a/packages/renderer/src/index.ts b/packages/renderer/src/index.ts index 6c33f312633..2f88eaecad5 100644 --- a/packages/renderer/src/index.ts +++ b/packages/renderer/src/index.ts @@ -1,4 +1 @@ -import DeviceRendererService from './device'; -import ReglRendererService from './regl'; - -export { DeviceRendererService, ReglRendererService }; +export { DeviceRendererService } from './DeviceRendererService'; diff --git a/packages/renderer/src/regl/ReglAttribute.ts b/packages/renderer/src/regl/ReglAttribute.ts deleted file mode 100644 index 686987bd089..00000000000 --- a/packages/renderer/src/regl/ReglAttribute.ts +++ /dev/null @@ -1,44 +0,0 @@ -import type { IAttribute, IAttributeInitializationOptions, IBuffer } from '@antv/l7-core'; -import type regl from 'regl'; -import type ReglBuffer from './ReglBuffer'; - -/** - * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#attributes - */ -export default class ReglAttribute implements IAttribute { - private attribute: regl.Attribute; - private buffer: IBuffer; - - constructor(gl: regl.Regl, options: IAttributeInitializationOptions) { - const { buffer, offset, stride, normalized, size, divisor } = options; - this.buffer = buffer; - this.attribute = { - buffer: (buffer as ReglBuffer).get(), - offset: offset || 0, - stride: stride || 0, - normalized: normalized || false, - divisor: divisor || 0, - }; - - if (size) { - this.attribute.size = size; - } - } - - public get() { - return this.attribute; - } - - public updateBuffer(options: { - // 用于替换的数据 - data: number[] | number[][] | Uint8Array | Uint16Array | Uint32Array; - // 原 Buffer 替换位置，单位为 byte - offset: number; - }) { - this.buffer.subData(options); - } - - public destroy() { - this.buffer.destroy(); - } -} diff --git a/packages/renderer/src/regl/ReglBuffer.ts b/packages/renderer/src/regl/ReglBuffer.ts deleted file mode 100644 index 7b23b8bf412..00000000000 --- a/packages/renderer/src/regl/ReglBuffer.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type { IBuffer, IBufferInitializationOptions } from '@antv/l7-core'; -import { gl } from '@antv/l7-core'; -import type regl from 'regl'; -import { dataTypeMap, usageMap } from './constants'; - -/** - * adaptor for regl.Buffer - * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#buffers - */ -export default class ReglBuffer implements IBuffer { - private buffer: regl.Buffer; - - private isDestroyed: boolean = false; - - constructor(reGl: regl.Regl, options: IBufferInitializationOptions) { - const { data, usage, type } = options; - this.buffer = reGl.buffer({ - data, - usage: usageMap[usage || gl.STATIC_DRAW], - type: dataTypeMap[type || gl.UNSIGNED_BYTE], - // length: 0, - }); - } - - public get() { - return this.buffer; - } - - public destroy() { - if (!this.isDestroyed) { - this.buffer.destroy(); - } - this.isDestroyed = true; - } - - public subData({ - data, - offset, - }: { - data: number[] | number[][] | Uint8Array | Uint16Array | Uint32Array; - offset: number; - }) { - this.buffer.subdata(data, offset); - } -} diff --git a/packages/renderer/src/regl/ReglElements.ts b/packages/renderer/src/regl/ReglElements.ts deleted file mode 100644 index 541b282b9c3..00000000000 --- a/packages/renderer/src/regl/ReglElements.ts +++ /dev/null @@ -1,37 +0,0 @@ -import type { IElements, IElementsInitializationOptions } from '@antv/l7-core'; -import { gl } from '@antv/l7-core'; -import type regl from 'regl'; -import { dataTypeMap, usageMap } from './constants'; - -/** - * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#elements - */ -export default class ReglElements implements IElements { - private elements: regl.Elements; - - constructor(reGl: regl.Regl, options: IElementsInitializationOptions) { - const { data, usage, type, count } = options; - this.elements = reGl.elements({ - data, - usage: usageMap[usage || gl.STATIC_DRAW], - type: dataTypeMap[type || gl.UNSIGNED_BYTE] as 'uint8' | 'uint16' | 'uint32', - count, - }); - } - - public get() { - return this.elements; - } - - public subData({ - data, - }: { - data: number[] | number[][] | Uint8Array | Uint16Array | Uint32Array; - }) { - this.elements.subdata(data); - } - - public destroy() { - // this.elements.destroy(); - } -} diff --git a/packages/renderer/src/regl/ReglFramebuffer.ts b/packages/renderer/src/regl/ReglFramebuffer.ts deleted file mode 100644 index 8e1cc69d4ad..00000000000 --- a/packages/renderer/src/regl/ReglFramebuffer.ts +++ /dev/null @@ -1,51 +0,0 @@ -import type { - IFramebuffer, - IFramebufferInitializationOptions, - IRenderbuffer, - ITexture2D, -} from '@antv/l7-core'; -import type regl from 'regl'; -import type ReglTexture2D from './ReglTexture2D'; - -/** - * adaptor for regl.Framebuffer - * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#framebuffers - */ -export default class ReglFramebuffer implements IFramebuffer { - private framebuffer: regl.Framebuffer; - - constructor(reGl: regl.Regl, options: IFramebufferInitializationOptions) { - const { width, height, color, colors } = options; - - const framebufferOptions: regl.FramebufferOptions = { - width, - height, - }; - - if (Array.isArray(colors)) { - framebufferOptions.colors = colors.map((c: ITexture2D | IRenderbuffer) => - (c as ReglTexture2D).get(), - ); - } - - if (color && typeof color !== 'boolean') { - framebufferOptions.color = (color as ReglTexture2D).get(); - } - - // TODO: depth & stencil - - this.framebuffer = reGl.framebuffer(framebufferOptions); - } - - public get() { - return this.framebuffer; - } - - public destroy() { - this.framebuffer.destroy(); - } - - public resize({ width, height }: { width: number; height: number }) { - this.framebuffer.resize(width, height); - } -} diff --git a/packages/renderer/src/regl/ReglModel.ts b/packages/renderer/src/regl/ReglModel.ts deleted file mode 100644 index 4c6777093b9..00000000000 --- a/packages/renderer/src/regl/ReglModel.ts +++ /dev/null @@ -1,404 +0,0 @@ -import { ClipSpaceNearZ, preprocessShader_GLSL, ViewportOrigin } from '@antv/g-device-api'; -import type { - IAttribute, - IBlendOptions, - IElements, - IModel, - IModelDrawOptions, - IModelInitializationOptions, - IUniform, -} from '@antv/l7-core'; -import { gl, removeDuplicateUniforms } from '@antv/l7-core'; -import { lodashUtil } from '@antv/l7-utils'; -import type regl from 'regl'; -import { - blendEquationMap, - blendFuncMap, - cullFaceMap, - depthFuncMap, - primitiveMap, - stencilFuncMap, - stencilOpMap, -} from './constants'; -import type ReglAttribute from './ReglAttribute'; -import type ReglElements from './ReglElements'; -import type ReglFramebuffer from './ReglFramebuffer'; -import type ReglTexture2D from './ReglTexture2D'; -const { isPlainObject, isTypedArray } = lodashUtil; - -/** - * adaptor for regl.DrawCommand - */ -export default class ReglModel implements IModel { - private reGl: regl.Regl; - private destroyed: boolean = false; - private drawCommand: regl.DrawCommand; - private drawParams: regl.DrawConfig; - private options: IModelInitializationOptions; - private uniforms: { - [key: string]: IUniform; - } = {}; - - constructor(reGl: regl.Regl, options: IModelInitializationOptions) { - this.reGl = reGl; - const { vs, fs, attributes, uniforms, primitive, count, elements, depth, cull, instances } = - options; - - /** - * try to compile GLSL 300 to 100 - */ - const vendorInfo = { - platformString: 'WebGL1', - glslVersion: '#version 100', - explicitBindingLocations: false, - separateSamplerTextures: false, - viewportOrigin: ViewportOrigin.LOWER_LEFT, - clipSpaceNearZ: ClipSpaceNearZ.NEGATIVE_ONE, - supportMRT: false, - }; - - const reglUniforms: { [key: string]: IUniform } = {}; - this.options = options; - if (uniforms) { - this.uniforms = this.extractUniforms(uniforms); - Object.keys(uniforms).forEach((uniformName) => { - // use regl prop API - // @ts-ignore - reglUniforms[uniformName] = reGl.prop(uniformName); - }); - } - - const reglAttributes: { [key: string]: regl.Attribute } = {}; - Object.keys(attributes).forEach((name: string) => { - reglAttributes[name] = (attributes[name] as ReglAttribute).get(); - }); - const frag = removeDuplicateUniforms( - preprocessShader_GLSL(vendorInfo, 'frag', fs, null, false), - ); - - const vert = removeDuplicateUniforms( - preprocessShader_GLSL(vendorInfo, 'vert', vs, null, false), - ); - - const drawParams: regl.DrawConfig = { - attributes: reglAttributes, - frag, - uniforms: reglUniforms, - vert, - // @ts-ignore - colorMask: reGl.prop('colorMask'), - lineWidth: 1, - blend: { - // @ts-ignore - enable: reGl.prop('blend.enable'), - // @ts-ignore - func: reGl.prop('blend.func'), - // @ts-ignore - equation: reGl.prop('blend.equation'), - // @ts-ignore - color: reGl.prop('blend.color'), - }, - stencil: { - // @ts-ignore - enable: reGl.prop('stencil.enable'), - // @ts-ignore - mask: reGl.prop('stencil.mask'), - // @ts-ignore - func: reGl.prop('stencil.func'), - // @ts-ignore - opFront: reGl.prop('stencil.opFront'), - // @ts-ignore - opBack: reGl.prop('stencil.opBack'), - }, - primitive: primitiveMap[primitive === undefined ? gl.TRIANGLES : primitive], - }; - if (instances) { - drawParams.instances = instances; - } - - // Tip: - // elements 中可能包含 count，此时不应传入 - // count 和 elements 相比、count 优先 - if (count) { - drawParams.count = count; - } else if (elements) { - drawParams.elements = (elements as ReglElements).get(); - } - - this.initDepthDrawParams({ depth }, drawParams); - // this.initBlendDrawParams({ blend }, drawParams); - // this.initStencilDrawParams({ stencil }, drawParams); - this.initCullDrawParams({ cull }, drawParams); - this.drawCommand = reGl(drawParams); - this.drawParams = drawParams; - } - - public updateAttributesAndElements( - attributes: { [key: string]: IAttribute }, - elements: IElements, - ) { - const reglAttributes: { [key: string]: regl.Attribute } = {}; - Object.keys(attributes).forEach((name: string) => { - reglAttributes[name] = (attributes[name] as ReglAttribute).get(); - }); - this.drawParams.attributes = reglAttributes; - this.drawParams.elements = (elements as ReglElements).get(); - - this.drawCommand = this.reGl(this.drawParams); - } - - public updateAttributes(attributes: { [key: string]: IAttribute }) { - const reglAttributes: { [key: string]: regl.Attribute } = {}; - Object.keys(attributes).forEach((name: string) => { - reglAttributes[name] = (attributes[name] as ReglAttribute).get(); - }); - this.drawParams.attributes = reglAttributes; - this.drawCommand = this.reGl(this.drawParams); - } - - public addUniforms(uniforms: { [key: string]: IUniform }) { - this.uniforms = { - ...this.uniforms, - ...this.extractUniforms(uniforms), - }; - } - - public draw(options: IModelDrawOptions, pick?: boolean) { - if (this.drawParams.attributes && Object.keys(this.drawParams.attributes).length === 0) { - return; - } - const uniforms: { - [key: string]: IUniform; - } = { - ...this.uniforms, - ...this.extractUniforms(options.uniforms || {}), - }; - const reglDrawProps: { - [key: string]: - | regl.Framebuffer - | regl.Texture2D - | number - | number[] - | Partial - | boolean; - } = {}; - Object.keys(uniforms).forEach((uniformName: string) => { - const type = typeof uniforms[uniformName]; - if ( - type === 'boolean' || - type === 'number' || - Array.isArray(uniforms[uniformName]) || - // @ts-ignore - uniforms[uniformName].BYTES_PER_ELEMENT - ) { - reglDrawProps[uniformName] = uniforms[uniformName] as number | number[] | boolean; - } else { - reglDrawProps[uniformName] = ( - uniforms[uniformName] as ReglFramebuffer | ReglTexture2D - ).get(); - } - }); - // 更新 blend - // @ts-ignore - reglDrawProps.blend = pick // picking 操作不应该使用 blend - ? this.getBlendDrawParams({ - blend: { enable: false }, - }) - : this.getBlendDrawParams(options); - - // 更新stentil 配置 - // @ts-ignore - reglDrawProps.stencil = this.getStencilDrawParams(options); - // @ts-ignore - reglDrawProps.colorMask = this.getColorMaskDrawParams(options, pick); - - // 在进行拾取操作的绘制中，不应该使用叠加模式 - picking 根据拾取的颜色作为判断的输入，而叠加模式会产生新的，在 id 序列中不存在的颜色 - this.drawCommand(reglDrawProps); - } - - public destroy() { - // @ts-ignore - this.drawParams?.elements?.destroy(); - if (this.options.attributes) { - Object.values(this.options.attributes).forEach((attr: any) => { - // @ts-ignore - (attr as ReglAttribute)?.destroy(); - }); - } - this.destroyed = true; - } - - /** - * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#depth-buffer - */ - private initDepthDrawParams( - { depth }: Pick, - drawParams: regl.DrawConfig, - ) { - if (depth) { - drawParams.depth = { - enable: depth.enable === undefined ? true : !!depth.enable, - mask: depth.mask === undefined ? true : !!depth.mask, - func: depthFuncMap[depth.func || gl.LESS], - range: depth.range || [0, 1], - }; - } - } - - private getBlendDrawParams({ blend }: Pick) { - const { enable, func, equation, color = [0, 0, 0, 0] } = blend || {}; - // @ts-ignore - return { - enable: !!enable, - func: { - srcRGB: blendFuncMap[(func && func.srcRGB) || gl.SRC_ALPHA], - srcAlpha: blendFuncMap[(func && func.srcAlpha) || gl.SRC_ALPHA], - dstRGB: blendFuncMap[(func && func.dstRGB) || gl.ONE_MINUS_SRC_ALPHA], - dstAlpha: blendFuncMap[(func && func.dstAlpha) || gl.ONE_MINUS_SRC_ALPHA], - }, - equation: { - rgb: blendEquationMap[(equation && equation.rgb) || gl.FUNC_ADD], - alpha: blendEquationMap[(equation && equation.alpha) || gl.FUNC_ADD], - }, - color, - }; - } - /** - * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#stencil - */ - private getStencilDrawParams({ stencil }: Pick) { - const { - enable, - mask = -1, - func = { - cmp: gl.ALWAYS, - ref: 0, - mask: -1, - }, - opFront = { - fail: gl.KEEP, - zfail: gl.KEEP, - zpass: gl.KEEP, - }, - opBack = { - fail: gl.KEEP, - zfail: gl.KEEP, - zpass: gl.KEEP, - }, - } = stencil || {}; - return { - enable: !!enable, - mask, - func: { - ...func, - cmp: stencilFuncMap[func.cmp], - }, - opFront: { - fail: stencilOpMap[opFront.fail], - zfail: stencilOpMap[opFront.zfail], - zpass: stencilOpMap[opFront.zpass], - }, - opBack: { - fail: stencilOpMap[opBack.fail], - zfail: stencilOpMap[opBack.zfail], - zpass: stencilOpMap[opBack.zpass], - }, - }; - } - - private getColorMaskDrawParams( - { stencil }: Pick, - pick: boolean, - ) { - // TODO: 重构相关参数 - // 掩模模式下，颜色通道全部关闭 - const colorMask = - stencil?.enable && stencil.opFront && !pick - ? [false, false, false, false] - : [true, true, true, true]; // 非掩码模式下，颜色通道全部开启 - return colorMask; - } - - /** - * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#culling - */ - private initCullDrawParams( - { cull }: Pick, - drawParams: regl.DrawConfig, - ) { - if (cull) { - const { enable, face = gl.BACK } = cull; - drawParams.cull = { - enable: !!enable, - face: cullFaceMap[face], - }; - } - } - - /** - * 考虑结构体命名, eg: - * a: { b: 1 } -> 'a.b' - * a: [ { b: 1 } ] -> 'a[0].b' - */ - private extractUniforms(uniforms: { [key: string]: IUniform }): { - [key: string]: IUniform; - } { - const extractedUniforms = {}; - Object.keys(uniforms).forEach((uniformName) => { - this.extractUniformsRecursively(uniformName, uniforms[uniformName], extractedUniforms, ''); - }); - - return extractedUniforms; - } - - private extractUniformsRecursively( - uniformName: string, - uniformValue: IUniform, - uniforms: { - [key: string]: IUniform; - }, - prefix: string, - ) { - if ( - uniformValue === null || - typeof uniformValue === 'number' || // u_A: 1 - typeof uniformValue === 'boolean' || // u_A: false - (Array.isArray(uniformValue) && typeof uniformValue[0] === 'number') || // u_A: [1, 2, 3] - isTypedArray(uniformValue) || // u_A: Float32Array - // @ts-ignore - uniformValue === '' || - 'resize' in uniformValue - ) { - uniforms[`${prefix && prefix + '.'}${uniformName}`] = uniformValue; - return; - } - - // u_Struct.a.b.c - if (isPlainObject(uniformValue)) { - Object.keys(uniformValue).forEach((childName) => { - this.extractUniformsRecursively( - childName, - // @ts-ignore - uniformValue[childName], - uniforms, - `${prefix && prefix + '.'}${uniformName}`, - ); - }); - } - - // u_Struct[0].a - if (Array.isArray(uniformValue)) { - uniformValue.forEach((child, idx) => { - Object.keys(child).forEach((childName) => { - this.extractUniformsRecursively( - childName, - // @ts-ignore - child[childName], - uniforms, - `${prefix && prefix + '.'}${uniformName}[${idx}]`, - ); - }); - }); - } - } -} diff --git a/packages/renderer/src/regl/ReglRenderbuffer.ts b/packages/renderer/src/regl/ReglRenderbuffer.ts deleted file mode 100644 index b56eb2f71e0..00000000000 --- a/packages/renderer/src/regl/ReglRenderbuffer.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { IRenderbuffer, IRenderbufferInitializationOptions } from '@antv/l7-core'; -import type regl from 'regl'; -import { formatMap } from './constants'; - -/** - * adaptor for regl.Renderbuffer - * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#renderbuffers - */ -export default class ReglRenderbuffer implements IRenderbuffer { - private renderbuffer: regl.Renderbuffer; - - constructor(reGl: regl.Regl, options: IRenderbufferInitializationOptions) { - const { width, height, format } = options; - this.renderbuffer = reGl.renderbuffer({ - width, - height, - format: formatMap[format] as regl.RenderbufferFormat, - }); - } - - public get() { - return this.renderbuffer; - } - - public destroy() { - this.renderbuffer.destroy(); - } - - public resize({ width, height }: { width: number; height: number }) { - this.renderbuffer.resize(width, height); - } -} diff --git a/packages/renderer/src/regl/ReglTexture2D.ts b/packages/renderer/src/regl/ReglTexture2D.ts deleted file mode 100644 index 5e8408e88cc..00000000000 --- a/packages/renderer/src/regl/ReglTexture2D.ts +++ /dev/null @@ -1,112 +0,0 @@ -import type { ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core'; -import { gl } from '@antv/l7-core'; -import type regl from 'regl'; -import { - colorSpaceMap, - dataTypeMap, - filterMap, - formatMap, - mipmapMap, - wrapModeMap, -} from './constants'; - -/** - * adaptor for regl.Buffer - * @see https://github.com/regl-project/regl/blob/gh-pages/API.md#buffers - */ -export default class ReglTexture2D implements ITexture2D { - private texture: regl.Texture2D; - private width: number; - private height: number; - private isDestroy: boolean = false; - - constructor(reGl: regl.Regl, options: ITexture2DInitializationOptions) { - const { - data, - type = gl.UNSIGNED_BYTE, - width, - height, - flipY = false, - format = gl.RGBA, - mipmap = false, - wrapS = gl.CLAMP_TO_EDGE, - wrapT = gl.CLAMP_TO_EDGE, - aniso = 0, - alignment = 1, - premultiplyAlpha = false, - mag = gl.NEAREST, - min = gl.NEAREST, - colorSpace = gl.BROWSER_DEFAULT_WEBGL, - x = 0, - y = 0, - copy = false, - } = options; - this.width = width; - this.height = height; - - const textureOptions: regl.Texture2DOptions = { - width, - height, - // @ts-ignore - type: dataTypeMap[type], - format: formatMap[format], - wrapS: wrapModeMap[wrapS], - wrapT: wrapModeMap[wrapT], - // @ts-ignore - mag: filterMap[mag], - min: filterMap[min], - alignment, - flipY, - colorSpace: colorSpaceMap[colorSpace], - premultiplyAlpha, - aniso, - - // copy pixels from current bind framebuffer - x, - y, - copy, - }; - - if (data) { - // @ts-ignore - textureOptions.data = data; - } - - if (typeof mipmap === 'number') { - textureOptions.mipmap = mipmapMap[mipmap]; - } else if (typeof mipmap === 'boolean') { - textureOptions.mipmap = mipmap; - } - - this.texture = reGl.texture(textureOptions); - } - - public get() { - return this.texture; - } - public update(props: regl.Texture2DOptions = {}) { - this.texture(props); - } - - public bind() { - // @ts-ignore - this.texture._texture.bind(); - } - - public resize({ width, height }: { width: number; height: number }): void { - this.texture.resize(width, height); - this.width = width; - this.height = height; - } - - public getSize(): [number, number] { - return [this.width, this.height]; - } - - public destroy() { - if (!this.isDestroy) { - this.texture?.destroy(); - } - this.isDestroy = true; - } -} diff --git a/packages/renderer/src/regl/constants.ts b/packages/renderer/src/regl/constants.ts deleted file mode 100644 index a7623c1c48e..00000000000 --- a/packages/renderer/src/regl/constants.ts +++ /dev/null @@ -1,194 +0,0 @@ -/** - * @desc 由于 regl 使用大量字符串而非 WebGL 常量，因此需要映射 - */ -import { gl } from '@antv/l7-core'; -import type regl from 'regl'; - -// @see https://github.com/regl-project/regl/blob/gh-pages/lib/constants/primitives.json -export const primitiveMap: { - [key: string]: - | 'points' - | 'lines' - | 'line loop' - | 'line strip' - | 'triangles' - | 'triangle strip' - | 'triangle fan'; -} = { - [gl.POINTS]: 'points', - [gl.LINES]: 'lines', - [gl.LINE_LOOP]: 'line loop', - [gl.LINE_STRIP]: 'line strip', - [gl.TRIANGLES]: 'triangles', - [gl.TRIANGLE_FAN]: 'triangle fan', - [gl.TRIANGLE_STRIP]: 'triangle strip', -}; - -export const usageMap: { - [key: string]: 'static' | 'dynamic' | 'stream'; -} = { - [gl.STATIC_DRAW]: 'static', - [gl.DYNAMIC_DRAW]: 'dynamic', - [gl.STREAM_DRAW]: 'stream', -}; - -export const dataTypeMap: { - [key: string]: 'int8' | 'int16' | 'int32' | 'uint8' | 'uint16' | 'uint32' | 'float'; -} = { - [gl.BYTE]: 'int8', - // [gl.UNSIGNED_INT]: 'int16', - [gl.INT]: 'int32', - [gl.UNSIGNED_BYTE]: 'uint8', - [gl.UNSIGNED_SHORT]: 'uint16', - [gl.UNSIGNED_INT]: 'uint32', - [gl.FLOAT]: 'float', -}; - -export const formatMap: { - [key: string]: - | 'alpha' - | 'luminance' - | 'luminance alpha' - | 'rgb' - | 'rgba' - | 'rgba4' - | 'rgb5 a1' - | 'rgb565' - | 'depth' - | 'depth stencil'; -} = { - [gl.ALPHA]: 'alpha', - [gl.LUMINANCE]: 'luminance', - [gl.LUMINANCE_ALPHA]: 'luminance alpha', - [gl.RGB]: 'rgb', - [gl.RGBA]: 'rgba', - [gl.RGBA4]: 'rgba4', - [gl.RGB5_A1]: 'rgb5 a1', - [gl.RGB565]: 'rgb565', - [gl.DEPTH_COMPONENT]: 'depth', - [gl.DEPTH_STENCIL]: 'depth stencil', -}; - -export const mipmapMap: { - [key: string]: 'dont care' | 'nice' | 'fast'; -} = { - [gl.DONT_CARE]: 'dont care', - [gl.NICEST]: 'nice', - [gl.FASTEST]: 'fast', -}; - -export const filterMap: { - [key: string]: - | 'nearest' - | 'linear' - | 'mipmap' - | 'nearest mipmap linear' - | 'linear mipmap nearest' - | 'nearest mipmap nearest'; -} = { - [gl.NEAREST]: 'nearest', - [gl.LINEAR]: 'linear', - [gl.LINEAR_MIPMAP_LINEAR]: 'mipmap', - [gl.NEAREST_MIPMAP_LINEAR]: 'nearest mipmap linear', - [gl.LINEAR_MIPMAP_NEAREST]: 'linear mipmap nearest', - [gl.NEAREST_MIPMAP_NEAREST]: 'nearest mipmap nearest', -}; - -export const wrapModeMap: { - [key: string]: 'repeat' | 'clamp' | 'mirror'; -} = { - [gl.REPEAT]: 'repeat', - [gl.CLAMP_TO_EDGE]: 'clamp', - [gl.MIRRORED_REPEAT]: 'mirror', -}; - -export const colorSpaceMap: { - [key: string]: 'none' | 'browser'; -} = { - [gl.NONE]: 'none', - [gl.BROWSER_DEFAULT_WEBGL]: 'browser', -}; - -export const depthFuncMap: { - [key: string]: - | 'never' - | 'always' - | 'less' - | 'lequal' - | 'greater' - | 'gequal' - | 'equal' - | 'notequal'; -} = { - [gl.NEVER]: 'never', - [gl.ALWAYS]: 'always', - [gl.LESS]: 'less', - [gl.LEQUAL]: 'lequal', - [gl.GREATER]: 'greater', - [gl.GEQUAL]: 'gequal', - [gl.EQUAL]: 'equal', - [gl.NOTEQUAL]: 'notequal', -}; - -export const blendEquationMap: { - [key: string]: regl.BlendingEquation; -} = { - [gl.FUNC_ADD]: 'add', - [gl.MIN_EXT]: 'min', - [gl.MAX_EXT]: 'max', - [gl.FUNC_SUBTRACT]: 'subtract', - [gl.FUNC_REVERSE_SUBTRACT]: 'reverse subtract', -}; - -export const blendFuncMap: { - [key: string]: regl.BlendingFunction; -} = { - [gl.ZERO]: 'zero', - [gl.ONE]: 'one', - [gl.SRC_COLOR]: 'src color', - [gl.ONE_MINUS_SRC_COLOR]: 'one minus src color', - [gl.SRC_ALPHA]: 'src alpha', - [gl.ONE_MINUS_SRC_ALPHA]: 'one minus src alpha', - [gl.DST_COLOR]: 'dst color', - [gl.ONE_MINUS_DST_COLOR]: 'one minus dst color', - [gl.DST_ALPHA]: 'dst alpha', - [gl.ONE_MINUS_DST_ALPHA]: 'one minus dst alpha', - [gl.CONSTANT_COLOR]: 'constant color', - [gl.ONE_MINUS_CONSTANT_COLOR]: 'one minus constant color', - [gl.CONSTANT_ALPHA]: 'constant alpha', - [gl.ONE_MINUS_CONSTANT_ALPHA]: 'one minus constant alpha', - [gl.SRC_ALPHA_SATURATE]: 'src alpha saturate', -}; - -export const stencilFuncMap: { - [key: string]: regl.ComparisonOperatorType; -} = { - [gl.NEVER]: 'never', - [gl.ALWAYS]: 'always', - [gl.LESS]: 'less', - [gl.LEQUAL]: 'lequal', - [gl.GREATER]: 'greater', - [gl.GEQUAL]: 'gequal', - [gl.EQUAL]: 'equal', - [gl.NOTEQUAL]: 'notequal', -}; - -export const stencilOpMap: { - [key: string]: regl.StencilOperationType; -} = { - [gl.ZERO]: 'zero', - [gl.KEEP]: 'keep', - [gl.REPLACE]: 'replace', - [gl.INVERT]: 'invert', - [gl.INCR]: 'increment', - [gl.DECR]: 'decrement', - [gl.INCR_WRAP]: 'increment wrap', - [gl.DECR_WRAP]: 'decrement wrap', -}; - -export const cullFaceMap: { - [key: string]: regl.FaceOrientationType; -} = { - [gl.FRONT]: 'front', - [gl.BACK]: 'back', -}; diff --git a/packages/renderer/src/regl/index.ts b/packages/renderer/src/regl/index.ts deleted file mode 100644 index e19a7a94db0..00000000000 --- a/packages/renderer/src/regl/index.ts +++ /dev/null @@ -1,286 +0,0 @@ -/** - * render w/ regl - * @see https://github.com/regl-project/regl/blob/gh-pages/API.md - */ -import type { - IAttribute, - IAttributeInitializationOptions, - IBuffer, - IBufferInitializationOptions, - IClearOptions, - IElements, - IElementsInitializationOptions, - IExtensions, - IFramebuffer, - IFramebufferInitializationOptions, - IModel, - IModelInitializationOptions, - IReadPixelsOptions, - IRenderConfig, - IRendererService, - ITexture2D, - ITexture2DInitializationOptions, -} from '@antv/l7-core'; -import regl from 'regl'; -import ReglAttribute from './ReglAttribute'; -import ReglBuffer from './ReglBuffer'; -import ReglElements from './ReglElements'; -import ReglFramebuffer from './ReglFramebuffer'; -import ReglModel from './ReglModel'; -import ReglTexture2D from './ReglTexture2D'; - -/** - * regl renderer - */ -export default class ReglRendererService implements IRendererService { - uniformBuffers: IBuffer[] = []; - public extensionObject: IExtensions; - private gl: regl.Regl; - private $container: HTMLDivElement | null; - private canvas: HTMLCanvasElement; - private width: number; - private height: number; - private isDirty: boolean; - - queryVerdorInfo = () => { - return 'WebGL1'; - }; - - public async init(canvas: HTMLCanvasElement, cfg: IRenderConfig, gl?: regl.Regl): Promise { - // this.$container = $container; - this.canvas = canvas; - if (gl) { - this.gl = gl; - } else { - // tslint:disable-next-line:typedef - this.gl = await new Promise((resolve, reject) => { - regl({ - canvas: this.canvas, - attributes: { - alpha: true, - // use TAA instead of MSAA - // @see https://www.khronos.org/registry/webgl/specs/1.0/#5.2.1 - antialias: cfg.antialias, - premultipliedAlpha: true, - preserveDrawingBuffer: cfg.preserveDrawingBuffer, - - stencil: cfg.stencil, - }, - // TODO: use extensions - extensions: [ - 'OES_element_index_uint', - 'OES_standard_derivatives', // wireframe - 'ANGLE_instanced_arrays', // VSM shadow map - ], - optionalExtensions: [ - 'oes_texture_float_linear', - 'OES_texture_float', - 'EXT_texture_filter_anisotropic', - 'EXT_blend_minmax', - 'WEBGL_depth_texture', - 'WEBGL_lose_context', - ], - profile: true, - onDone: (err: Error | null, r?: regl.Regl | undefined): void => { - if (err || !r) { - reject(err); - } - // @ts-ignore - resolve(r); - }, - }); - }); - } - - this.extensionObject = { - OES_texture_float: this.testExtension('OES_texture_float'), - }; - } - - public getPointSizeRange() { - return this.gl._gl.getParameter(this.gl._gl.ALIASED_POINT_SIZE_RANGE); - } - - public testExtension(name: string) { - // OES_texture_float - return !!this.getGLContext().getExtension(name); - } - - public createModel = (options: IModelInitializationOptions): IModel => - new ReglModel(this.gl, options); - - public createAttribute = (options: IAttributeInitializationOptions): IAttribute => - new ReglAttribute(this.gl, options); - - public createBuffer = (options: IBufferInitializationOptions): IBuffer => - new ReglBuffer(this.gl, options); - - public createElements = (options: IElementsInitializationOptions): IElements => - new ReglElements(this.gl, options); - - public createTexture2D = (options: ITexture2DInitializationOptions): ITexture2D => - new ReglTexture2D(this.gl, options); - - public createFramebuffer = (options: IFramebufferInitializationOptions) => - new ReglFramebuffer(this.gl, options); - - public useFramebuffer = (framebuffer: IFramebuffer | null, drawCommands: () => void) => { - this.gl({ - framebuffer: framebuffer ? (framebuffer as ReglFramebuffer).get() : null, - })(drawCommands); - }; - - public useFramebufferAsync = async ( - framebuffer: IFramebuffer | null, - drawCommands: () => Promise, - ) => { - this.gl({ - framebuffer: framebuffer ? (framebuffer as ReglFramebuffer).get() : null, - })(drawCommands); - }; - - public clear = (options: IClearOptions) => { - // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clear-the-draw-buffer - const { color, depth, stencil, framebuffer = null } = options; - const reglClearOptions: regl.ClearOptions = { - color, - depth, - stencil, - }; - - reglClearOptions.framebuffer = - framebuffer === null ? framebuffer : (framebuffer as ReglFramebuffer).get(); - - this.gl?.clear(reglClearOptions); - }; - - public viewport = ({ - x, - y, - width, - height, - }: { - x: number; - y: number; - width: number; - height: number; - }) => { - // use WebGL context directly - // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch - this.gl._gl.viewport(x, y, width, height); - this.width = width; - this.height = height; - this.gl._refresh(); - }; - - public readPixels = (options: IReadPixelsOptions) => { - const { framebuffer, x, y, width, height } = options; - const readPixelsOptions: regl.ReadOptions = { - x, - y, - width, - height, - }; - if (framebuffer) { - readPixelsOptions.framebuffer = (framebuffer as ReglFramebuffer).get(); - } - return this.gl.read(readPixelsOptions); - }; - - public readPixelsAsync = async (options: IReadPixelsOptions) => { - return this.readPixels(options); - }; - - public getViewportSize = () => { - return { - width: this.gl._gl.drawingBufferWidth, - height: this.gl._gl.drawingBufferHeight, - }; - }; - - public getContainer = () => { - return this.canvas?.parentElement; - }; - - public getCanvas = () => { - // return this.$container?.getElementsByTagName('canvas')[0] || null; - return this.canvas; - }; - - public getGLContext = () => { - return this.gl._gl; - }; - - // TODO: 临时方法 - public setState() { - this.gl({ - cull: { - enable: false, - face: 'back', - }, - viewport: { - x: 0, - y: 0, - height: this.width, - width: this.height, - }, - blend: { - enable: true, - equation: 'add', - }, - framebuffer: null, - }); - this.gl._refresh(); - } - - public setBaseState() { - this.gl({ - cull: { - enable: false, - face: 'back', - }, - viewport: { - x: 0, - y: 0, - height: this.width, - width: this.height, - }, - blend: { - enable: false, - equation: 'add', - }, - framebuffer: null, - }); - this.gl._refresh(); - } - public setCustomLayerDefaults() { - const gl = this.getGLContext(); - gl.disable(gl.CULL_FACE); - } - - public setDirty(flag: boolean): void { - this.isDirty = flag; - } - - public getDirty(): boolean { - return this.isDirty; - } - - public destroy = () => { - // this.canvas = null 清除对 webgl 实例的引用 - // @ts-ignore - this.canvas = null; - - // make sure release webgl context - this.gl?._gl?.getExtension('WEBGL_lose_context')?.loseContext(); - - // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clean-up - this.gl.destroy(); - - // @ts-ignore - this.gl = null; - }; - - beginFrame(): void {} - endFrame(): void {} -} diff --git a/packages/renderer/src/device/utils/HashMap.ts b/packages/renderer/src/utils/HashMap.ts similarity index 100% rename from packages/renderer/src/device/utils/HashMap.ts rename to packages/renderer/src/utils/HashMap.ts diff --git a/packages/renderer/src/device/utils/pipeline.ts b/packages/renderer/src/utils/pipeline.ts similarity index 100% rename from packages/renderer/src/device/utils/pipeline.ts rename to packages/renderer/src/utils/pipeline.ts diff --git a/packages/renderer/src/device/utils/typedarray.ts b/packages/renderer/src/utils/typedarray.ts similarity index 100% rename from packages/renderer/src/device/utils/typedarray.ts rename to packages/renderer/src/utils/typedarray.ts diff --git a/packages/renderer/src/device/utils/webgl.ts b/packages/renderer/src/utils/webgl.ts similarity index 100% rename from packages/renderer/src/device/utils/webgl.ts rename to packages/renderer/src/utils/webgl.ts diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 39cc35f1f5d..2b7c50d5b42 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -29,7 +29,7 @@ import type { } from '@antv/l7-core'; import { SceneEventList, createLayerContainer, createSceneContainer } from '@antv/l7-core'; import { MaskLayer, TileLayer } from '@antv/l7-layers'; -import { DeviceRendererService, ReglRendererService } from '@antv/l7-renderer'; +import { DeviceRendererService } from '@antv/l7-renderer'; import type { IProtocolHandler } from '@antv/l7-utils'; import { DOM, SceneConifg } from '@antv/l7-utils'; import type ILayerManager from './ILayerManager'; @@ -64,17 +64,13 @@ class Scene implements IPostProcessingPassPluggable, IMapController, ILayerManag private container: L7Container; public constructor(config: ISceneConfig) { - const { id, map, renderer = 'device' } = config; + const { id, map } = config; // 创建场景容器 const sceneContainer = createSceneContainer(); this.container = sceneContainer; // 绑定地图服务 map.setContainer(sceneContainer, id); - if (renderer === 'regl') { - sceneContainer.rendererService = new ReglRendererService(); - } else { - sceneContainer.rendererService = new DeviceRendererService(); - } + sceneContainer.rendererService = new DeviceRendererService(); // 依赖注入 this.sceneService = sceneContainer.sceneService; @@ -121,7 +117,7 @@ class Scene implements IPostProcessingPassPluggable, IMapController, ILayerManag return this.mapService.getMaxZoom(); } public getType(): string { - return this.mapService.getType(); + return this.mapService.type; } public getMapContainer(): HTMLElement | null { return this.mapService.getMapContainer(); diff --git a/packages/three/src/core/baseLayer.ts b/packages/three/src/core/baseLayer.ts index 1d28094bcfd..a78de03c68e 100644 --- a/packages/three/src/core/baseLayer.ts +++ b/packages/three/src/core/baseLayer.ts @@ -172,7 +172,7 @@ export default class ThreeJSLayer // 获取到 L7 的 gl const gl = this.rendererService.getGLContext(); this.rendererService.setCustomLayerDefaults(); - const cullFace = this.mapService.version?.indexOf('GAODE') !== -1 ? gl.BACK : gl.FRONT; + const cullFace = this.mapService.type !== 'AMap' ? gl.BACK : gl.FRONT; gl.cullFace(cullFace); // threejs 的 renderer diff --git a/packages/three/src/core/threeRenderService.ts b/packages/three/src/core/threeRenderService.ts index 168c50455ae..a2ec0aa00c6 100644 --- a/packages/three/src/core/threeRenderService.ts +++ b/packages/three/src/core/threeRenderService.ts @@ -60,10 +60,10 @@ export class ThreeRenderService implements IThreeRenderService { } public getRenderCamera(): Camera { - switch (this.mapService.getType()) { - case 'amap': + switch (this.mapService.type) { + case 'AMap': return this.AMapCamera(); - case 'mapbox': + case 'Mapbox': return this.mapboxCamera(); case 'default': return this.mapboxCamera(); diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 749e3674809..a7ce757177d 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,5 +1,6 @@ packages: # all packages - 'packages/*' + - 'extensions/*' # website - 'site' diff --git a/site/.dumi/global.ts b/site/.dumi/global.ts index b2d129ea8ac..dcc5bfda912 100644 --- a/site/.dumi/global.ts +++ b/site/.dumi/global.ts @@ -7,6 +7,7 @@ if (window) { (window as any).g2 = require('@antv/g2'); (window as any).l7 = require('@antv/l7'); (window as any).l7Maps = require('@antv/l7-maps'); + (window as any).l7ExtensionMaps = require('@antv/l7-extension-maps'); (window as any).l7plot = require('@antv/l7plot'); (window as any).l7CompositeLayers = require('@antv/l7-composite-layers'); (window as any).l7Draw = require('@antv/l7-draw'); diff --git a/site/.dumi/pages/custom/demo/bianjieview.tsx b/site/.dumi/pages/custom/demo/bianjieview.tsx index c192d22eeb4..411fdf92032 100644 --- a/site/.dumi/pages/custom/demo/bianjieview.tsx +++ b/site/.dumi/pages/custom/demo/bianjieview.tsx @@ -1,13 +1,7 @@ -// https://unpkg.com/xinzhengqu@1.0.0/data/2023_xian.pbf - -// @ts-ignore -import { LineLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; +import { LineLayer, Map, Scene } from '@antv/l7'; import { useEffect } from 'react'; export default () => { - // @ts-ignore useEffect(() => { const scene = new Scene({ id: 'map', diff --git a/site/.dumi/pages/custom/demo/china.tsx b/site/.dumi/pages/custom/demo/china.tsx index c192d22eeb4..411fdf92032 100644 --- a/site/.dumi/pages/custom/demo/china.tsx +++ b/site/.dumi/pages/custom/demo/china.tsx @@ -1,13 +1,7 @@ -// https://unpkg.com/xinzhengqu@1.0.0/data/2023_xian.pbf - -// @ts-ignore -import { LineLayer, Scene } from '@antv/l7'; -// @ts-ignore -import { Map } from '@antv/l7-maps'; +import { LineLayer, Map, Scene } from '@antv/l7'; import { useEffect } from 'react'; export default () => { - // @ts-ignore useEffect(() => { const scene = new Scene({ id: 'map', diff --git a/site/.dumi/pages/custom/demo/city.tsx b/site/.dumi/pages/custom/demo/city.tsx index 5bd816b8bd1..4db94a6b673 100644 --- a/site/.dumi/pages/custom/demo/city.tsx +++ b/site/.dumi/pages/custom/demo/city.tsx @@ -3,7 +3,7 @@ // @ts-ignore import { PolygonLayer, Scene } from '@antv/l7'; // @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { RDBSource } from 'district-data'; import React, { useEffect } from 'react'; diff --git a/site/.dumi/pages/custom/demo/zhejiang.tsx b/site/.dumi/pages/custom/demo/zhejiang.tsx index 754b7eb08f3..4faa1f9a1b2 100644 --- a/site/.dumi/pages/custom/demo/zhejiang.tsx +++ b/site/.dumi/pages/custom/demo/zhejiang.tsx @@ -3,7 +3,7 @@ // @ts-ignore import { PolygonLayer, Scene } from '@antv/l7'; // @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { RDBSource } from 'district-data'; import React, { useEffect } from 'react'; diff --git a/site/.dumirc.ts b/site/.dumirc.ts index 7432c2e085e..39593d8ed36 100644 --- a/site/.dumirc.ts +++ b/site/.dumirc.ts @@ -1,21 +1,16 @@ import { defineConfig } from 'dumi'; import path from 'path'; -const env = process.env.NODE_ENV; -const GaodeTokenScript = - env === 'production' - ? [ - ` window._AMapSecurityConfig = { - securityJsCode: '2653011adeb04230b3a26cc9a780a800', - }`, - 'https://webapi.amap.com/maps?v=2.0&key=f59bcf249433f8b05caaee19f349b3d7', - ] - : [ - ` window._AMapSecurityConfig = { - securityJsCode: "290ddc4b0d33be7bc9b354bc6a4ca614" - }`, - 'https://webapi.amap.com/maps?v=2.0&key=6f025e700cbacbb0bb866712d20bb35c', - ]; +const isProduction = process.env.NODE_ENV === 'production'; +const GaodeTokenScript = isProduction + ? [ + `window._AMapSecurityConfig = { securityJsCode: '2653011adeb04230b3a26cc9a780a800' }`, + 'https://webapi.amap.com/maps?v=2.0&key=f59bcf249433f8b05caaee19f349b3d7', + ] + : [ + ` window._AMapSecurityConfig = { securityJsCode: "290ddc4b0d33be7bc9b354bc6a4ca614" }`, + 'https://webapi.amap.com/maps?v=2.0&key=6f025e700cbacbb0bb866712d20bb35c', + ]; export default defineConfig({ locales: [ @@ -23,7 +18,7 @@ export default defineConfig({ { id: 'en', name: 'English' }, ], mfsu: false, - copy: env === 'production' ? ['docs/CNAME'] : [], + copy: isProduction ? ['docs/CNAME'] : [], // ...(process.env.NODE_ENV === 'development' ? {} : { ssr: {} }), metas: [ { @@ -679,7 +674,6 @@ export default defineConfig({ container: '
', dependencies: { '@antv/l7': 'latest', - '@antv/l7-maps': 'latest', }, }, mdPlayground: { @@ -719,5 +713,6 @@ export default defineConfig({ '@antv/l7-scene': path.resolve(__dirname, '../packages/scene/src'), '@antv/l7-source': path.resolve(__dirname, '../packages/source/src'), '@antv/l7-utils': path.resolve(__dirname, '../packages/utils/src'), + '@antv/l7-extension-maps': path.resolve(__dirname, '../extensions/extension-maps/src'), }, }); diff --git a/site/docs/api/experiment/earth.en.md b/site/docs/api/experiment/earth.en.md index 2c85df72e0b..7cc83e41b98 100644 --- a/site/docs/api/experiment/earth.en.md +++ b/site/docs/api/experiment/earth.en.md @@ -12,8 +12,7 @@ l7-maps provides`Earth`Maps, compared to AMap and mapbox maps, are a completely ✨ In order to distinguish from ordinary maps, l7-maps provides a brand new`Earth`Map type, L7 provides corresponding`EarthLayer`Layers ```js -import { EarthLayer } from '@antv/l7'; -import { Earth } from '@antv/l7-maps'; +import { EarthLayer, Earth } from '@antv/l7'; ``` ## Currently supported layer types in Earth mode @@ -38,8 +37,7 @@ import { Earth } from '@antv/l7-maps'; ```javascript // 1. Introduce the corresponding module -import { Scene, Earth } from '@antv/l7-maps'; -import { EarthLayer } from '@antv/l7-layers'; +import { Scene, Earth, EarthLayer } from '@antv/l7-layers'; // 2. Build Earth Map const scene = new Scene({ @@ -89,7 +87,7 @@ As the base map type of l7-maps,`Earth`The camera system of the earth system is - args:**{}** ```js -import { Scene, Earth } from '@antv/l7-maps'; +import { Scene, Earth } from '@antv/l7'; const scene = new Scene({ id: 'map', @@ -106,7 +104,7 @@ Provides a simple method to control the rotation of the earth system (actually c 🌟Unit rotation angle = Math.min(this.earthCameraZoom \* this.earthCameraZoom, 1) ```js -import { Scene, Earth } from '@antv/l7-maps'; +import { Scene, Earth } from '@antv/l7'; const scene = new Scene({ id: 'map', diff --git a/site/docs/api/experiment/earth.zh.md b/site/docs/api/experiment/earth.zh.md index d2ece17e9d9..1cdc86c6ac9 100644 --- a/site/docs/api/experiment/earth.zh.md +++ b/site/docs/api/experiment/earth.zh.md @@ -12,8 +12,7 @@ l7-maps 提供 `Earth` 地图，相较于高德地图、mapbox 地图，是完 ✨ 为了区别普通的地图，l7-maps 提供了全新的 `Earth` 地图类型， L7 提供对应的 `EarthLayer` 图层 ```js -import { EarthLayer } from '@antv/l7'; -import { Earth } from '@antv/l7-maps'; +import { EarthLayer, Earth } from '@antv/l7'; ``` ## 目前在地球模式下支持的图层类型 @@ -38,8 +37,7 @@ import { Earth } from '@antv/l7-maps'; ```javascript // 1、引入对应模块 -import { Scene, Earth } from '@antv/l7-maps'; -import { EarthLayer } from '@antv/l7-layers'; +import { Scene, Earth, EarthLayer } from '@antv/l7-layers'; // 2、构建 Earth Map const scene = new Scene({ @@ -89,7 +87,7 @@ scene.on('loaded', () => { - args: **{}** ```js -import { Scene, Earth } from '@antv/l7-maps'; +import { Scene, Earth } from '@antv/l7'; const scene = new Scene({ id: 'map', @@ -106,7 +104,7 @@ const scene = new Scene({ 🌟 单位旋转角度 = Math.min(this.earthCameraZoom \* this.earthCameraZoom, 1) ```js -import { Scene, Earth } from '@antv/l7-maps'; +import { Scene, Earth } from '@antv/l7'; const scene = new Scene({ id: 'map', diff --git a/site/docs/api/experiment/simple_coordinates.en.md b/site/docs/api/experiment/simple_coordinates.en.md index e77a83431e4..5c56af2b5bd 100644 --- a/site/docs/api/experiment/simple_coordinates.en.md +++ b/site/docs/api/experiment/simple_coordinates.en.md @@ -16,8 +16,7 @@ We usually use longitude and latitude to describe geographical location, but in In order to use a simple coordinate system, we need to use the L7 custom Map map type and specify the version attribute of the map. ```javascript -import { Scene, ImageLayer, PointLayer } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; +import { Scene, ImageLayer, PointLayer, Map } from '@antv/l7'; const scene = new Scene({ id: 'map', diff --git a/site/docs/api/experiment/simple_coordinates.zh.md b/site/docs/api/experiment/simple_coordinates.zh.md index cdb76881801..391135b24d4 100644 --- a/site/docs/api/experiment/simple_coordinates.zh.md +++ b/site/docs/api/experiment/simple_coordinates.zh.md @@ -16,8 +16,7 @@ order: 1 为了使用简单坐标系，我们需要是使用 L7 自定义的 Map 地图类型，同时制定 map 的 version 属性 ```javascript -import { Scene, ImageLayer, PointLayer } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; +import { Scene, ImageLayer, PointLayer, Map } from '@antv/l7'; const scene = new Scene({ id: 'map', diff --git a/site/docs/api/map/bmap.en.md b/site/docs/api/map/bmap.en.md index e71c19f4e23..74452a1e671 100644 --- a/site/docs/api/map/bmap.en.md +++ b/site/docs/api/map/bmap.en.md @@ -22,7 +22,7 @@ Before using Baidu Maps, you need to apply for a Baidu Map key. How to apply for ### import ```javascript -import { BaiduMap } from '@antv/l7-maps'; +import { BaiduMap } from '@antv/l7-extension-maps'; ``` ### Instantiate @@ -34,7 +34,7 @@ It is recommended for new projects to instantiate BaiduMap directly. Existing ma #### BaiduMap instantiation ```js -import { BaiduMap } from '@antv/l7-maps'; +import { BaiduMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/api/map/bmap.zh.md b/site/docs/api/map/bmap.zh.md index fa0a980dca1..645bb452d72 100644 --- a/site/docs/api/map/bmap.zh.md +++ b/site/docs/api/map/bmap.zh.md @@ -22,7 +22,7 @@ L7 目前支持的百度地图是[API GL版本](https://lbsyun.baidu.com/index.p ### import ```javascript -import { BaiduMap } from '@antv/l7-maps'; +import { BaiduMap } from '@antv/l7-extension-maps'; ``` ### 实例化 @@ -34,7 +34,7 @@ L7 提供 BaiduMap直接实例化地图，也可外部传入方式实例化地 #### BaiduMap 实例化 ```js -import { BaiduMap } from '@antv/l7-maps'; +import { BaiduMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/api/map/map.en.md b/site/docs/api/map/map.en.md index 733a81ef107..1be1297bd1e 100644 --- a/site/docs/api/map/map.en.md +++ b/site/docs/api/map/map.en.md @@ -17,14 +17,13 @@ L7 internally resolves the differences between different map basemaps, and at th ## import ```javascript -import { Map } from '@antv/l7-maps'; +import { Map } from '@antv/l7'; ``` ## Map instantiation ```ts -import { Scene, PointLayer } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; +import { Scene, PointLayer, Map } from '@antv/l7'; const scene = new Scene({ id: 'map', diff --git a/site/docs/api/map/map.zh.md b/site/docs/api/map/map.zh.md index c11f9025ae6..20ac8a1c675 100644 --- a/site/docs/api/map/map.zh.md +++ b/site/docs/api/map/map.zh.md @@ -17,14 +17,13 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管 ## import ```javascript -import { Map } from '@antv/l7-maps'; +import { Map } from '@antv/l7'; ``` ## Map 实例化 ```ts -import { Scene, PointLayer } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; +import { Scene, PointLayer, Map } from '@antv/l7'; const scene = new Scene({ id: 'map', diff --git a/site/docs/api/map/mapbox.en.md b/site/docs/api/map/mapbox.en.md index a21e06ed609..5cd5f97f239 100644 --- a/site/docs/api/map/mapbox.en.md +++ b/site/docs/api/map/mapbox.en.md @@ -22,7 +22,7 @@ L7 internally resolves the differences between different map basemaps, and at th ```ts import { Scene, PointLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; +import { Mapbox } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/api/map/mapbox.zh.md b/site/docs/api/map/mapbox.zh.md index 945028720dd..434e57a26ae 100644 --- a/site/docs/api/map/mapbox.zh.md +++ b/site/docs/api/map/mapbox.zh.md @@ -22,7 +22,7 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管 ```ts import { Scene, PointLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; +import { Mapbox } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/api/map/maplibre.en.md b/site/docs/api/map/maplibre.en.md index 6abc4c0a06b..5e3f56386f1 100644 --- a/site/docs/api/map/maplibre.en.md +++ b/site/docs/api/map/maplibre.en.md @@ -18,7 +18,7 @@ L7 internally resolves the differences between different map basemaps, and at th ```ts import { Scene, PointLayer } from '@antv/l7'; -import { MapLibre } from '@antv/l7-maps'; +import { MapLibre } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new MapLibre({ @@ -34,7 +34,7 @@ const scene = new Scene({ ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { MapLibre } from '@antv/l7-maps'; +import { MapLibre } from '@antv/l7-extension-maps'; var map = new maplibregl.Map({ container: 'map', // container id style: 'https://demotiles.maplibre.org/style.json', // style URL diff --git a/site/docs/api/map/maplibre.zh.md b/site/docs/api/map/maplibre.zh.md index 0fcb1a38aa9..c9eb0a38133 100644 --- a/site/docs/api/map/maplibre.zh.md +++ b/site/docs/api/map/maplibre.zh.md @@ -18,7 +18,7 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管 ```ts import { Scene, PointLayer } from '@antv/l7'; -import { MapLibre } from '@antv/l7-maps'; +import { MapLibre } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new MapLibre({ @@ -34,7 +34,7 @@ const scene = new Scene({ ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { MapLibre } from '@antv/l7-maps'; +import { MapLibre } from '@antv/l7-extension-maps'; var map = new maplibregl.Map({ container: 'map', // container id style: 'https://demotiles.maplibre.org/style.json', // style URL diff --git a/site/docs/api/map/tencent.en.md b/site/docs/api/map/tencent.en.md index bb9e9546151..f109652415e 100644 --- a/site/docs/api/map/tencent.en.md +++ b/site/docs/api/map/tencent.en.md @@ -22,14 +22,14 @@ Before using Tencent Map, you need to register a Tencent Map account and apply f ### import ```javascript -import { TencentMap } from '@antv/l7-maps'; +import { TencentMap } from '@antv/l7-extension-maps'; ``` ## Initialize map ```ts import { Scene, PointLayer } from '@antv/l7'; -import { TencentMap } from '@antv/l7-maps'; +import { TencentMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new TencentMap({ diff --git a/site/docs/api/map/tencent.zh.md b/site/docs/api/map/tencent.zh.md index 66af1972d7a..9f9cf4ab885 100644 --- a/site/docs/api/map/tencent.zh.md +++ b/site/docs/api/map/tencent.zh.md @@ -22,14 +22,14 @@ L7 目前支持的腾讯地图是[JavaScript API GL](https://lbs.qq.com/webApi/j ### import ```javascript -import { TencentMap } from '@antv/l7-maps'; +import { TencentMap } from '@antv/l7-extension-maps'; ``` ## 初始化地图 ```ts import { Scene, PointLayer } from '@antv/l7'; -import { TencentMap } from '@antv/l7-maps'; +import { TencentMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new TencentMap({ diff --git a/site/docs/api/other/city_building.en.md b/site/docs/api/other/city_building.en.md index e251f0f42bd..b4000856275 100644 --- a/site/docs/api/other/city_building.en.md +++ b/site/docs/api/other/city_building.en.md @@ -60,7 +60,7 @@ time: time milliseconds ```js import { CityBuildingLayer, Scene } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; +import { Mapbox } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', @@ -92,7 +92,7 @@ scene.on('loaded', () => { ```javascript import { Scene, CityBuildingLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/api/other/city_building.zh.md b/site/docs/api/other/city_building.zh.md index fbd97313ae0..70bd41829e9 100644 --- a/site/docs/api/other/city_building.zh.md +++ b/site/docs/api/other/city_building.zh.md @@ -60,7 +60,7 @@ time : 时间 毫秒 ```js import { CityBuildingLayer, Scene } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; +import { Mapbox } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', @@ -92,7 +92,7 @@ scene.on('loaded', () => { ```javascript import { Scene, CityBuildingLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/heatmap/grid.en.md b/site/docs/tutorial/heatmap/grid.en.md index 3341113c3b7..9dc6061221a 100644 --- a/site/docs/tutorial/heatmap/grid.en.md +++ b/site/docs/tutorial/heatmap/grid.en.md @@ -21,7 +21,7 @@ Let's introduce how to draw a simple grid heat map. ```javascript import { Scene, HeatmapLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/heatmap/grid.zh.md b/site/docs/tutorial/heatmap/grid.zh.md index 1780ee5b18f..c01598c1e45 100644 --- a/site/docs/tutorial/heatmap/grid.zh.md +++ b/site/docs/tutorial/heatmap/grid.zh.md @@ -21,7 +21,7 @@ order: 1 ```javascript import { Scene, HeatmapLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/heatmap/hexagon.en.md b/site/docs/tutorial/heatmap/hexagon.en.md index 2454acdc5d2..d9dd804a879 100644 --- a/site/docs/tutorial/heatmap/hexagon.en.md +++ b/site/docs/tutorial/heatmap/hexagon.en.md @@ -21,7 +21,7 @@ Let’s introduce how to draw a simple cellular heat map. ```javascript import { Scene, HeatmapLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/heatmap/hexagon.zh.md b/site/docs/tutorial/heatmap/hexagon.zh.md index 2c5aac2eb15..d4bc1b66e23 100644 --- a/site/docs/tutorial/heatmap/hexagon.zh.md +++ b/site/docs/tutorial/heatmap/hexagon.zh.md @@ -21,7 +21,7 @@ order: 2 ```javascript import { Scene, HeatmapLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/heatmap/normal.en.md b/site/docs/tutorial/heatmap/normal.en.md index 5c60db5d294..891084de396 100644 --- a/site/docs/tutorial/heatmap/normal.en.md +++ b/site/docs/tutorial/heatmap/normal.en.md @@ -21,7 +21,7 @@ Let's introduce how to draw a classic heat map. ```javascript import { Scene, HeatmapLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/heatmap/normal.zh.md b/site/docs/tutorial/heatmap/normal.zh.md index edfe70b5704..28b5a8c6d52 100644 --- a/site/docs/tutorial/heatmap/normal.zh.md +++ b/site/docs/tutorial/heatmap/normal.zh.md @@ -21,7 +21,7 @@ order: 0 ```javascript import { Scene, HeatmapLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/line/arc.en.md b/site/docs/tutorial/line/arc.en.md index 9ea3c328511..e600d7568c9 100644 --- a/site/docs/tutorial/line/arc.en.md +++ b/site/docs/tutorial/line/arc.en.md @@ -21,7 +21,7 @@ Next we will introduce how to use arcs to draw a simulated wind field. ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/line/arc.zh.md b/site/docs/tutorial/line/arc.zh.md index d0d9268ecfe..28ddf226f74 100644 --- a/site/docs/tutorial/line/arc.zh.md +++ b/site/docs/tutorial/line/arc.zh.md @@ -21,7 +21,7 @@ order: 1 ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/line/greatcircle.en.md b/site/docs/tutorial/line/greatcircle.en.md index 80f3de2a48e..bce21296c50 100644 --- a/site/docs/tutorial/line/greatcircle.en.md +++ b/site/docs/tutorial/line/greatcircle.en.md @@ -21,7 +21,7 @@ Let's introduce how to draw a simple large arc line. ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/line/greatcircle.zh.md b/site/docs/tutorial/line/greatcircle.zh.md index f80f42ebe8f..f473be04242 100644 --- a/site/docs/tutorial/line/greatcircle.zh.md +++ b/site/docs/tutorial/line/greatcircle.zh.md @@ -21,7 +21,7 @@ order: 3 ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/line/path.en.md b/site/docs/tutorial/line/path.en.md index 19211be0197..13cc08ad9dd 100644 --- a/site/docs/tutorial/line/path.en.md +++ b/site/docs/tutorial/line/path.en.md @@ -21,7 +21,7 @@ Let's introduce how to draw a common path diagram. ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/line/path.zh.md b/site/docs/tutorial/line/path.zh.md index 76b0d2a1689..40acf7cd8e7 100644 --- a/site/docs/tutorial/line/path.zh.md +++ b/site/docs/tutorial/line/path.zh.md @@ -21,7 +21,7 @@ order: 0 ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/line/wall.en.md b/site/docs/tutorial/line/wall.en.md index 029be7ab684..a538ace3417 100644 --- a/site/docs/tutorial/line/wall.en.md +++ b/site/docs/tutorial/line/wall.en.md @@ -23,7 +23,7 @@ Let's introduce how to draw a simple geofence. ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/line/wall.zh.md b/site/docs/tutorial/line/wall.zh.md index d33dd2ae109..2409d2e47a7 100644 --- a/site/docs/tutorial/line/wall.zh.md +++ b/site/docs/tutorial/line/wall.zh.md @@ -23,7 +23,7 @@ order: 5 ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/map/offline.en.md b/site/docs/tutorial/map/offline.en.md index ad41aa14db2..a5b3f6ed3c4 100644 --- a/site/docs/tutorial/map/offline.en.md +++ b/site/docs/tutorial/map/offline.en.md @@ -11,7 +11,7 @@ at present`L7`Support Gao Dehe`Mapbox`Two base maps, the AMap map is used online ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; +import { Mapbox } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new Mapbox({ @@ -106,7 +106,7 @@ All service resources have been prepared so that we can use them independently`m ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; +import { Mapbox } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new Mapbox({ diff --git a/site/docs/tutorial/map/offline.zh.md b/site/docs/tutorial/map/offline.zh.md index 756889a138d..ea50890402a 100644 --- a/site/docs/tutorial/map/offline.zh.md +++ b/site/docs/tutorial/map/offline.zh.md @@ -11,7 +11,7 @@ order: 0 ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; +import { Mapbox } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new Mapbox({ @@ -106,7 +106,7 @@ _如果你有新的字体需求可提PR，帮你自动生成在线可用的字 ```javascript import { Scene, LineLayer } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; +import { Mapbox } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new Mapbox({ diff --git a/site/docs/tutorial/map/tianditu.en.md b/site/docs/tutorial/map/tianditu.en.md index 58f8870adb3..9a6cc5cfa24 100644 --- a/site/docs/tutorial/map/tianditu.en.md +++ b/site/docs/tutorial/map/tianditu.en.md @@ -16,8 +16,7 @@ order: 2 Below we will introduce how to quickly create a map of the sky. ```js -import { Scene, RasterLayer } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; +import { Scene, RasterLayer, Map } from '@antv/l7'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/map/tianditu.zh.md b/site/docs/tutorial/map/tianditu.zh.md index 4eba4538ce4..0585c039b9c 100644 --- a/site/docs/tutorial/map/tianditu.zh.md +++ b/site/docs/tutorial/map/tianditu.zh.md @@ -16,8 +16,7 @@ order: 2 下面我们来介绍如何快速创建天地图地图。 ```js -import { Scene, RasterLayer } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; +import { Scene, RasterLayer, Map } from '@antv/l7'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/monitor/layer_init.en.md b/site/docs/tutorial/monitor/layer_init.en.md index 51dc9071269..8f5df704d45 100644 --- a/site/docs/tutorial/monitor/layer_init.en.md +++ b/site/docs/tutorial/monitor/layer_init.en.md @@ -13,7 +13,7 @@ The following describes how to use the capabilities provided by L7 to simply obt ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/monitor/layer_init.zh.md b/site/docs/tutorial/monitor/layer_init.zh.md index 545bcceafa0..0491ea47fd1 100644 --- a/site/docs/tutorial/monitor/layer_init.zh.md +++ b/site/docs/tutorial/monitor/layer_init.zh.md @@ -13,7 +13,7 @@ order: 1 ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/monitor/map_init.en.md b/site/docs/tutorial/monitor/map_init.en.md index 9ab609273bc..ffc77a3b494 100644 --- a/site/docs/tutorial/monitor/map_init.en.md +++ b/site/docs/tutorial/monitor/map_init.en.md @@ -13,7 +13,7 @@ The following describes how to use the capabilities provided by L7 to simply obt ```javascript import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/monitor/map_init.zh.md b/site/docs/tutorial/monitor/map_init.zh.md index a325105a59b..5fd6a45e880 100644 --- a/site/docs/tutorial/monitor/map_init.zh.md +++ b/site/docs/tutorial/monitor/map_init.zh.md @@ -13,7 +13,7 @@ order: 1 ```javascript import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/monitor/render.en.md b/site/docs/tutorial/monitor/render.en.md index 72064297e29..d4e27b86a2c 100644 --- a/site/docs/tutorial/monitor/render.en.md +++ b/site/docs/tutorial/monitor/render.en.md @@ -13,7 +13,7 @@ The following describes how to use the capabilities provided by L7 to simply obt ```javascript import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/monitor/render.zh.md b/site/docs/tutorial/monitor/render.zh.md index 9dee21ee624..d83d18b7079 100644 --- a/site/docs/tutorial/monitor/render.zh.md +++ b/site/docs/tutorial/monitor/render.zh.md @@ -13,7 +13,7 @@ order: 3 ```javascript import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/bubble.en.md b/site/docs/tutorial/point/bubble.en.md index 29e4ba63f72..e8c7f628476 100644 --- a/site/docs/tutorial/point/bubble.en.md +++ b/site/docs/tutorial/point/bubble.en.md @@ -21,7 +21,7 @@ Let’s introduce how to draw a common bubble chart. ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/bubble.zh.md b/site/docs/tutorial/point/bubble.zh.md index 4d1f36d3f6c..282d4166657 100644 --- a/site/docs/tutorial/point/bubble.zh.md +++ b/site/docs/tutorial/point/bubble.zh.md @@ -21,7 +21,7 @@ order: 0 ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/chart.en.md b/site/docs/tutorial/point/chart.en.md index a5ba88065ed..937b4fb9e13 100644 --- a/site/docs/tutorial/point/chart.en.md +++ b/site/docs/tutorial/point/chart.en.md @@ -21,7 +21,7 @@ Let's introduce how to draw a simple map composite chart. ```javascript import { Scene, Marker } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; import * as G2 from '@antv/g2'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/chart.zh.md b/site/docs/tutorial/point/chart.zh.md index d1bb7f8056a..32a701dba7b 100644 --- a/site/docs/tutorial/point/chart.zh.md +++ b/site/docs/tutorial/point/chart.zh.md @@ -21,7 +21,7 @@ order: 8 ```javascript import { Scene, Marker } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; import * as G2 from '@antv/g2'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/cluster.en.md b/site/docs/tutorial/point/cluster.en.md index 5d933a310a1..5e2d8e08606 100644 --- a/site/docs/tutorial/point/cluster.en.md +++ b/site/docs/tutorial/point/cluster.en.md @@ -23,7 +23,7 @@ Let's introduce how to draw a common aggregation chart. ```js import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/cluster.zh.md b/site/docs/tutorial/point/cluster.zh.md index ded44b4a66f..637295116cd 100644 --- a/site/docs/tutorial/point/cluster.zh.md +++ b/site/docs/tutorial/point/cluster.zh.md @@ -23,7 +23,7 @@ order: 2 ```js import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/column.en.md b/site/docs/tutorial/point/column.en.md index 630af34edd1..998d2453c56 100644 --- a/site/docs/tutorial/point/column.en.md +++ b/site/docs/tutorial/point/column.en.md @@ -21,7 +21,7 @@ Below we will introduce how to draw a common`3D`Column chart. ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ diff --git a/site/docs/tutorial/point/column.zh.md b/site/docs/tutorial/point/column.zh.md index 2021fb72585..9905c72f8b5 100644 --- a/site/docs/tutorial/point/column.zh.md +++ b/site/docs/tutorial/point/column.zh.md @@ -21,7 +21,7 @@ order: 1 ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ diff --git a/site/docs/tutorial/point/dot.en.md b/site/docs/tutorial/point/dot.en.md index 2cc52396022..bc5ad5db3b5 100644 --- a/site/docs/tutorial/point/dot.en.md +++ b/site/docs/tutorial/point/dot.en.md @@ -21,7 +21,7 @@ Let's introduce how to draw a simple brightness map. ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/dot.zh.md b/site/docs/tutorial/point/dot.zh.md index 32c76ee8233..ee1578e7d81 100644 --- a/site/docs/tutorial/point/dot.zh.md +++ b/site/docs/tutorial/point/dot.zh.md @@ -21,7 +21,7 @@ order: 4 ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/mark.en.md b/site/docs/tutorial/point/mark.en.md index 96b437d0089..943d0a1f339 100644 --- a/site/docs/tutorial/point/mark.en.md +++ b/site/docs/tutorial/point/mark.en.md @@ -21,7 +21,7 @@ Below we will introduce how to draw a simple`Marker`layers. ```javascript import { Scene, Marker } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/mark.zh.md b/site/docs/tutorial/point/mark.zh.md index d755c71f249..b154aefdeea 100644 --- a/site/docs/tutorial/point/mark.zh.md +++ b/site/docs/tutorial/point/mark.zh.md @@ -21,7 +21,7 @@ order: 8 ```javascript import { Scene, Marker } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/radar.en.md b/site/docs/tutorial/point/radar.en.md index 548cfb4bc69..a5fbe6f88f9 100644 --- a/site/docs/tutorial/point/radar.en.md +++ b/site/docs/tutorial/point/radar.en.md @@ -21,7 +21,7 @@ Let’s introduce how to draw a common radar chart. ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/radar.zh.md b/site/docs/tutorial/point/radar.zh.md index 8f1ccd2f3f7..8067385a183 100644 --- a/site/docs/tutorial/point/radar.zh.md +++ b/site/docs/tutorial/point/radar.zh.md @@ -21,7 +21,7 @@ order: 4 ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/scatter.en.md b/site/docs/tutorial/point/scatter.en.md index 10e30767743..aad0753315d 100644 --- a/site/docs/tutorial/point/scatter.en.md +++ b/site/docs/tutorial/point/scatter.en.md @@ -21,7 +21,7 @@ Let's introduce how to draw a common scatter plot. ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/scatter.zh.md b/site/docs/tutorial/point/scatter.zh.md index e08fb359578..7ca37f017f6 100644 --- a/site/docs/tutorial/point/scatter.zh.md +++ b/site/docs/tutorial/point/scatter.zh.md @@ -21,7 +21,7 @@ order: 2 ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/simple.en.md b/site/docs/tutorial/point/simple.en.md index a7990fd8252..d8d9a712124 100644 --- a/site/docs/tutorial/point/simple.en.md +++ b/site/docs/tutorial/point/simple.en.md @@ -21,7 +21,7 @@ Let's introduce how to draw a simple point layer. ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/simple.zh.md b/site/docs/tutorial/point/simple.zh.md index cf04d830511..f072cca3e64 100644 --- a/site/docs/tutorial/point/simple.zh.md +++ b/site/docs/tutorial/point/simple.zh.md @@ -21,7 +21,7 @@ order: 9 ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/symbol.en.md b/site/docs/tutorial/point/symbol.en.md index c41aa27ecc1..1766f2e63ef 100644 --- a/site/docs/tutorial/point/symbol.en.md +++ b/site/docs/tutorial/point/symbol.en.md @@ -21,7 +21,7 @@ Let's introduce how to draw a common symbol map. ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/symbol.zh.md b/site/docs/tutorial/point/symbol.zh.md index 039406dd9f5..62e7b7e649b 100644 --- a/site/docs/tutorial/point/symbol.zh.md +++ b/site/docs/tutorial/point/symbol.zh.md @@ -21,7 +21,7 @@ order: 5 ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/text.en.md b/site/docs/tutorial/point/text.en.md index d69e09ca9c9..ae8500fc96b 100644 --- a/site/docs/tutorial/point/text.en.md +++ b/site/docs/tutorial/point/text.en.md @@ -21,7 +21,7 @@ Let's introduce how to draw a common text annotation map. ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/text.zh.md b/site/docs/tutorial/point/text.zh.md index a0103d2232e..2442fc9081c 100644 --- a/site/docs/tutorial/point/text.zh.md +++ b/site/docs/tutorial/point/text.zh.md @@ -21,7 +21,7 @@ order: 6 ```javascript import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/point/wave.en.md b/site/docs/tutorial/point/wave.en.md index 84e951d6855..cc9a9c96a0a 100644 --- a/site/docs/tutorial/point/wave.en.md +++ b/site/docs/tutorial/point/wave.en.md @@ -23,7 +23,7 @@ A simple water wave point case can be implemented according to the following cod ```js import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ diff --git a/site/docs/tutorial/point/wave.zh.md b/site/docs/tutorial/point/wave.zh.md index 0e82d880d7e..72433d944bc 100644 --- a/site/docs/tutorial/point/wave.zh.md +++ b/site/docs/tutorial/point/wave.zh.md @@ -23,7 +23,7 @@ order: 3 ```js import { Scene, PointLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ diff --git a/site/docs/tutorial/polygon/extrude.en.md b/site/docs/tutorial/polygon/extrude.en.md index 1a7c4be2089..75e82cd444f 100644 --- a/site/docs/tutorial/polygon/extrude.en.md +++ b/site/docs/tutorial/polygon/extrude.en.md @@ -21,7 +21,7 @@ Below we will introduce how to draw a simple`3D`Fill in the figure. ```javascript import { Scene, PolygonLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/polygon/extrude.zh.md b/site/docs/tutorial/polygon/extrude.zh.md index 7e0a9eada45..dcb0c9cd19e 100644 --- a/site/docs/tutorial/polygon/extrude.zh.md +++ b/site/docs/tutorial/polygon/extrude.zh.md @@ -21,7 +21,7 @@ order: 1 ```javascript import { Scene, PolygonLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/polygon/fill.en.md b/site/docs/tutorial/polygon/fill.en.md index b7cf7e9c421..5873b8c694f 100644 --- a/site/docs/tutorial/polygon/fill.en.md +++ b/site/docs/tutorial/polygon/fill.en.md @@ -21,7 +21,7 @@ Let's introduce how to draw a simple filled diagram. ```javascript import { Scene, PolygonLayer, LineLayer, Popup } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/polygon/fill.zh.md b/site/docs/tutorial/polygon/fill.zh.md index 123fb804a9a..ce98a9f96ad 100644 --- a/site/docs/tutorial/polygon/fill.zh.md +++ b/site/docs/tutorial/polygon/fill.zh.md @@ -21,7 +21,7 @@ order: 0 ```javascript import { Scene, PolygonLayer, LineLayer, Popup } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/quickstart.en.md b/site/docs/tutorial/quickstart.en.md index 4f560a3767f..cad2fdc2b8b 100644 --- a/site/docs/tutorial/quickstart.en.md +++ b/site/docs/tutorial/quickstart.en.md @@ -15,7 +15,7 @@ order: 1 //Install L7 dependencies npm install --save @antv/l7 //Install third-party basemap dependencies -npm install --save @antv/l7-maps +npm install --save @antv/l7-extension-maps ``` ### Imported via CDN @@ -33,7 +33,7 @@ CDN reference obtains and initializes all objects through the L7 namespace when ```javascript import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new L7.Scene({ id: 'map', @@ -58,7 +58,7 @@ const scene = new L7.Scene({ 2. Initialize Gaode map ```javascript -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; //Similarly you can also initialize a Mapbox map const scene = new Scene({ id: 'map', diff --git a/site/docs/tutorial/quickstart.zh.md b/site/docs/tutorial/quickstart.zh.md index 026329e53c0..1b174872e23 100644 --- a/site/docs/tutorial/quickstart.zh.md +++ b/site/docs/tutorial/quickstart.zh.md @@ -15,7 +15,7 @@ order: 1 // 安装L7 依赖 npm install --save @antv/l7 // 安装第三方底图依赖 -npm install --save @antv/l7-maps +npm install --save @antv/l7-extension-maps ``` ### 通过 CDN 引入 @@ -37,7 +37,7 @@ CDN 引用 在使用时通过 L7 命名空间获取所有对象并初始化， ```javascript import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new L7.Scene({ id: 'map', @@ -62,7 +62,7 @@ const scene = new L7.Scene({ 2. 初始化高德地图 ```javascript -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; // 同样你也可以初始化一个 Mapbox 地图 const scene = new Scene({ id: 'map', diff --git a/site/examples/amap-plugin/bus/demo/busstop.js b/site/examples/amap-plugin/bus/demo/busstop.js index 959f5fcdb21..a2dd759e02d 100644 --- a/site/examples/amap-plugin/bus/demo/busstop.js +++ b/site/examples/amap-plugin/bus/demo/busstop.js @@ -1,5 +1,5 @@ import { LineLayer, PointLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/amap-plugin/bus/demo/satellite.js b/site/examples/amap-plugin/bus/demo/satellite.js index 3e2a0b933b8..e66fe12b524 100644 --- a/site/examples/amap-plugin/bus/demo/satellite.js +++ b/site/examples/amap-plugin/bus/demo/satellite.js @@ -1,5 +1,5 @@ import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/amap-plugin/bus/demo/xyztile.js b/site/examples/amap-plugin/bus/demo/xyztile.js index 709f0bc3568..6c814b7ad1e 100644 --- a/site/examples/amap-plugin/bus/demo/xyztile.js +++ b/site/examples/amap-plugin/bus/demo/xyztile.js @@ -1,5 +1,5 @@ import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/choropleth/administrative/delete/china-city.ts b/site/examples/choropleth/administrative/delete/china-city.ts index bc47d61611b..403559ca200 100644 --- a/site/examples/choropleth/administrative/delete/china-city.ts +++ b/site/examples/choropleth/administrative/delete/china-city.ts @@ -1,4 +1,5 @@ -import { GaodeMap, Scene } from '@antv/l7'; +import { Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { Choropleth } from '@antv/l7plot'; const scene = new Scene({ diff --git a/site/examples/choropleth/administrative/delete/china-map.ts b/site/examples/choropleth/administrative/delete/china-map.ts index 061f74ea6a3..f19f5bf452c 100644 --- a/site/examples/choropleth/administrative/delete/china-map.ts +++ b/site/examples/choropleth/administrative/delete/china-map.ts @@ -1,4 +1,5 @@ -import { GaodeMap, Scene } from '@antv/l7'; +import { Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { Choropleth } from '@antv/l7plot'; const scene = new Scene({ diff --git a/site/examples/choropleth/administrative/delete/world-map.ts b/site/examples/choropleth/administrative/delete/world-map.ts index 01d603b4eea..31abf34f36e 100644 --- a/site/examples/choropleth/administrative/delete/world-map.ts +++ b/site/examples/choropleth/administrative/delete/world-map.ts @@ -1,4 +1,5 @@ -import { GaodeMap, Scene } from '@antv/l7'; +import { Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { Choropleth } from '@antv/l7plot'; const scene = new Scene({ diff --git a/site/examples/choropleth/administrative/demo/hangzhou-city.ts b/site/examples/choropleth/administrative/demo/hangzhou-city.ts index 2ed86adf189..b64c965d9f8 100644 --- a/site/examples/choropleth/administrative/demo/hangzhou-city.ts +++ b/site/examples/choropleth/administrative/demo/hangzhou-city.ts @@ -1,4 +1,5 @@ -import { GaodeMap, Scene } from '@antv/l7'; +import { Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { Choropleth } from '@antv/l7plot'; const scene = new Scene({ diff --git a/site/examples/choropleth/administrative/demo/xihu-district.ts b/site/examples/choropleth/administrative/demo/xihu-district.ts index baf547f81a9..8e01f59739e 100644 --- a/site/examples/choropleth/administrative/demo/xihu-district.ts +++ b/site/examples/choropleth/administrative/demo/xihu-district.ts @@ -1,4 +1,5 @@ -import { GaodeMap, Scene } from '@antv/l7'; +import { Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { Choropleth } from '@antv/l7plot'; const scene = new Scene({ diff --git a/site/examples/choropleth/administrative/demo/zhejiang-province-district.ts b/site/examples/choropleth/administrative/demo/zhejiang-province-district.ts index da343f05c72..6feeed22111 100644 --- a/site/examples/choropleth/administrative/demo/zhejiang-province-district.ts +++ b/site/examples/choropleth/administrative/demo/zhejiang-province-district.ts @@ -1,4 +1,5 @@ -import { GaodeMap, Scene } from '@antv/l7'; +import { Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { Choropleth } from '@antv/l7plot'; const scene = new Scene({ diff --git a/site/examples/choropleth/administrative/demo/zhejiang-province.ts b/site/examples/choropleth/administrative/demo/zhejiang-province.ts index 625cd0c5e72..c42b719dc6b 100644 --- a/site/examples/choropleth/administrative/demo/zhejiang-province.ts +++ b/site/examples/choropleth/administrative/demo/zhejiang-province.ts @@ -1,4 +1,5 @@ -import { GaodeMap, Scene } from '@antv/l7'; +import { Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { Choropleth } from '@antv/l7plot'; const scene = new Scene({ diff --git a/site/examples/component/control/demo/exportimage.ts b/site/examples/component/control/demo/exportimage.ts index 87ba11939de..a2660969519 100644 --- a/site/examples/component/control/demo/exportimage.ts +++ b/site/examples/component/control/demo/exportimage.ts @@ -1,4 +1,5 @@ -import { ExportImage, GaodeMap, PolygonLayer, Scene } from '@antv/l7'; +import { ExportImage, PolygonLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/control/demo/fullscreen.ts b/site/examples/component/control/demo/fullscreen.ts index f70e9b1f06e..969982be8b5 100644 --- a/site/examples/component/control/demo/fullscreen.ts +++ b/site/examples/component/control/demo/fullscreen.ts @@ -1,4 +1,5 @@ -import { Fullscreen, GaodeMap, Scene } from '@antv/l7'; +import { Fullscreen, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/control/demo/geolocate.ts b/site/examples/component/control/demo/geolocate.ts index 78f383edd39..ec36d2d8c03 100644 --- a/site/examples/component/control/demo/geolocate.ts +++ b/site/examples/component/control/demo/geolocate.ts @@ -1,4 +1,5 @@ -import { GaodeMap, GeoLocate, Scene } from '@antv/l7'; +import { GeoLocate, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; import gcoord from 'gcoord'; const scene = new Scene({ diff --git a/site/examples/component/control/demo/layerswitch.ts b/site/examples/component/control/demo/layerswitch.ts index d7ddd788daa..ce792b39571 100644 --- a/site/examples/component/control/demo/layerswitch.ts +++ b/site/examples/component/control/demo/layerswitch.ts @@ -1,4 +1,5 @@ -import { GaodeMap, LayerSwitch, LineLayer, PolygonLayer, Scene } from '@antv/l7'; +import { LayerSwitch, LineLayer, PolygonLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/control/demo/layerswitch1.ts b/site/examples/component/control/demo/layerswitch1.ts index 36298076e8c..98d095efda3 100644 --- a/site/examples/component/control/demo/layerswitch1.ts +++ b/site/examples/component/control/demo/layerswitch1.ts @@ -1,4 +1,5 @@ -import { GaodeMap, LayerSwitch, RasterLayer, Scene } from '@antv/l7'; +import { LayerSwitch, RasterLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/control/demo/logo.ts b/site/examples/component/control/demo/logo.ts index c1f927bedae..c45b9d09007 100644 --- a/site/examples/component/control/demo/logo.ts +++ b/site/examples/component/control/demo/logo.ts @@ -1,4 +1,5 @@ -import { GaodeMap, Logo, Scene } from '@antv/l7'; +import { Logo, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/control/demo/maptheme.ts b/site/examples/component/control/demo/maptheme.ts index 2b5d6a3d494..8cd46684bee 100644 --- a/site/examples/component/control/demo/maptheme.ts +++ b/site/examples/component/control/demo/maptheme.ts @@ -1,4 +1,5 @@ -import { GaodeMap, MapTheme, Scene } from '@antv/l7'; +import { MapTheme, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/control/demo/mouselocation.ts b/site/examples/component/control/demo/mouselocation.ts index 018a6b74a19..3ae7f8d3b94 100644 --- a/site/examples/component/control/demo/mouselocation.ts +++ b/site/examples/component/control/demo/mouselocation.ts @@ -1,4 +1,5 @@ -import { GaodeMap, MouseLocation, Scene } from '@antv/l7'; +import { MouseLocation, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/control/demo/scale.ts b/site/examples/component/control/demo/scale.ts index 08e00b422c7..833f1d4b1f2 100644 --- a/site/examples/component/control/demo/scale.ts +++ b/site/examples/component/control/demo/scale.ts @@ -1,4 +1,5 @@ -import { GaodeMap, Scale, Scene } from '@antv/l7'; +import { Scale, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/control/demo/swipe.ts b/site/examples/component/control/demo/swipe.ts index 6e443647e6f..fa4fd468020 100644 --- a/site/examples/component/control/demo/swipe.ts +++ b/site/examples/component/control/demo/swipe.ts @@ -1,4 +1,5 @@ -import { GaodeMap, RasterLayer, Scene, Swipe } from '@antv/l7'; +import { RasterLayer, Scene, Swipe } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/control/demo/syncScene.ts b/site/examples/component/control/demo/syncScene.ts index 3139d423273..36ae9a98af4 100644 --- a/site/examples/component/control/demo/syncScene.ts +++ b/site/examples/component/control/demo/syncScene.ts @@ -1,4 +1,5 @@ -import { GaodeMap, HeatmapLayer, PointLayer, Scene } from '@antv/l7'; +import { HeatmapLayer, PointLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { isNumber } from 'lodash'; // 通过 Scene 获取到地图引擎类型 diff --git a/site/examples/component/control/demo/zoom.ts b/site/examples/component/control/demo/zoom.ts index c74093433fe..7d5ea28ea5b 100644 --- a/site/examples/component/control/demo/zoom.ts +++ b/site/examples/component/control/demo/zoom.ts @@ -1,4 +1,5 @@ -import { GaodeMap, Scene, Zoom } from '@antv/l7'; +import { Scene, Zoom } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/marker/demo/clustermarker.js b/site/examples/component/marker/demo/clustermarker.js index 541cdf71bda..6d873687424 100644 --- a/site/examples/component/marker/demo/clustermarker.js +++ b/site/examples/component/marker/demo/clustermarker.js @@ -1,5 +1,5 @@ import { Marker, MarkerLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/marker/demo/defaultmarker.js b/site/examples/component/marker/demo/defaultmarker.js index 8ccd13c1a7c..cbeb1668b00 100644 --- a/site/examples/component/marker/demo/defaultmarker.js +++ b/site/examples/component/marker/demo/defaultmarker.js @@ -1,5 +1,5 @@ import { Marker, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/marker/demo/marker.js b/site/examples/component/marker/demo/marker.js index 1e714b723bd..70343753196 100644 --- a/site/examples/component/marker/demo/marker.js +++ b/site/examples/component/marker/demo/marker.js @@ -1,5 +1,5 @@ import { Marker, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/marker/demo/markerlayer.js b/site/examples/component/marker/demo/markerlayer.js index b6fc1e427e0..3fe98a112e4 100644 --- a/site/examples/component/marker/demo/markerlayer.js +++ b/site/examples/component/marker/demo/markerlayer.js @@ -1,5 +1,5 @@ import { Marker, MarkerLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/popup/demo/customContent.ts b/site/examples/component/popup/demo/customContent.ts index 4c4d1beb5a5..0893f451daf 100644 --- a/site/examples/component/popup/demo/customContent.ts +++ b/site/examples/component/popup/demo/customContent.ts @@ -1,5 +1,6 @@ import * as G2 from '@antv/g2'; -import { GaodeMap, LayerPopup, PointLayer, Scene } from '@antv/l7'; +import { LayerPopup, PointLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const data: any[] = [ { diff --git a/site/examples/component/popup/demo/layerpopup.ts b/site/examples/component/popup/demo/layerpopup.ts index 536c427b2be..41ced15b751 100644 --- a/site/examples/component/popup/demo/layerpopup.ts +++ b/site/examples/component/popup/demo/layerpopup.ts @@ -1,4 +1,5 @@ -import { GaodeMap, LayerPopup, PointLayer, Scene } from '@antv/l7'; +import { LayerPopup, PointLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/component/popup/demo/popup2.ts b/site/examples/component/popup/demo/popup2.ts index 4fb512d78ae..c2e7a7251f7 100644 --- a/site/examples/component/popup/demo/popup2.ts +++ b/site/examples/component/popup/demo/popup2.ts @@ -1,7 +1,5 @@ -// @ts-ignore import { PointLayer, Popup, Scene } from '@antv/l7'; -// @ts-ignore -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; async function initMap() { const response = await fetch( diff --git a/site/examples/composite-layers/l7plot/demo/flow-layer.js b/site/examples/composite-layers/l7plot/demo/flow-layer.js index 1da9f0794f0..9c69fb06e1f 100644 --- a/site/examples/composite-layers/l7plot/demo/flow-layer.js +++ b/site/examples/composite-layers/l7plot/demo/flow-layer.js @@ -1,11 +1,12 @@ -import { GaodeMapV2, LayerPopup, Scene } from '@antv/l7'; +import { LayerPopup, Scene } from '@antv/l7'; import { FlowLayer } from '@antv/l7-composite-layers'; +import { GaodeMap } from '@antv/l7-extension-maps'; // 详情可见：https://l7plot.antv.antgroup.com/api/composite-layers/flow-layer const scene = new Scene({ id: 'map', - map: new GaodeMapV2({ + map: new GaodeMap({ pitch: 0, style: 'dark', center: [121.458794, 31.205302], diff --git a/site/examples/composite-layers/l7plot/demo/icon-layer.js b/site/examples/composite-layers/l7plot/demo/icon-layer.js index 49b39e833f7..a2e76321cff 100644 --- a/site/examples/composite-layers/l7plot/demo/icon-layer.js +++ b/site/examples/composite-layers/l7plot/demo/icon-layer.js @@ -1,5 +1,6 @@ -import { GaodeMap, Scene } from '@antv/l7'; +import { Scene } from '@antv/l7'; import { IconFontLayer } from '@antv/l7-composite-layers'; +import { GaodeMap } from '@antv/l7-extension-maps'; // 详情可见：https://l7plot.antv.antgroup.com/api/composite-layers/icon-font-layer diff --git a/site/examples/composite-layers/l7plot/demo/image-layer.js b/site/examples/composite-layers/l7plot/demo/image-layer.js index c36f84a061e..86c96aa491c 100644 --- a/site/examples/composite-layers/l7plot/demo/image-layer.js +++ b/site/examples/composite-layers/l7plot/demo/image-layer.js @@ -1,5 +1,6 @@ -import { GaodeMap, Scene } from '@antv/l7'; +import { Scene } from '@antv/l7'; import { IconImageLayer } from '@antv/l7-composite-layers'; +import { GaodeMap } from '@antv/l7-extension-maps'; // 详情可见：https://l7plot.antv.antgroup.com/api/composite-layers/icon-image-layer diff --git a/site/examples/draw/basic/demo/draw_circle.js b/site/examples/draw/basic/demo/draw_circle.js index 3c2ad289bc0..1be28ff5352 100644 --- a/site/examples/draw/basic/demo/draw_circle.js +++ b/site/examples/draw/basic/demo/draw_circle.js @@ -1,6 +1,6 @@ import { Scene } from '@antv/l7'; import { DrawCircle, DrawEvent } from '@antv/l7-draw'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/draw/basic/demo/draw_line.js b/site/examples/draw/basic/demo/draw_line.js index be2d191d176..12ac8de0259 100644 --- a/site/examples/draw/basic/demo/draw_line.js +++ b/site/examples/draw/basic/demo/draw_line.js @@ -1,6 +1,6 @@ import { Scene } from '@antv/l7'; import { DrawEvent, DrawLine } from '@antv/l7-draw'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/draw/basic/demo/draw_point.js b/site/examples/draw/basic/demo/draw_point.js index 838db72bba6..7f505f1ecf3 100644 --- a/site/examples/draw/basic/demo/draw_point.js +++ b/site/examples/draw/basic/demo/draw_point.js @@ -1,6 +1,6 @@ import { Scene } from '@antv/l7'; import { DrawEvent, DrawPoint } from '@antv/l7-draw'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/draw/basic/demo/draw_polygon.js b/site/examples/draw/basic/demo/draw_polygon.js index f0e7122143b..ccda0367bf1 100644 --- a/site/examples/draw/basic/demo/draw_polygon.js +++ b/site/examples/draw/basic/demo/draw_polygon.js @@ -1,6 +1,6 @@ import { Scene } from '@antv/l7'; import { DrawEvent, DrawPolygon } from '@antv/l7-draw'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ diff --git a/site/examples/draw/basic/demo/draw_rect.js b/site/examples/draw/basic/demo/draw_rect.js index 56e14ecbbef..e46fa795d46 100644 --- a/site/examples/draw/basic/demo/draw_rect.js +++ b/site/examples/draw/basic/demo/draw_rect.js @@ -1,6 +1,6 @@ import { Scene } from '@antv/l7'; import { DrawEvent, DrawRect } from '@antv/l7-draw'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/draw/control/demo/amap.js b/site/examples/draw/control/demo/amap.js index 2e7d7bff89c..f789c91d8ef 100644 --- a/site/examples/draw/control/demo/amap.js +++ b/site/examples/draw/control/demo/amap.js @@ -1,7 +1,7 @@ // https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tif import { Scene } from '@antv/l7'; import { ControlEvent, DrawControl } from '@antv/l7-draw'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/earth/arc3d/demo/flyline.js b/site/examples/earth/arc3d/demo/flyline.js index 80bb6b982db..7ac02691701 100644 --- a/site/examples/earth/arc3d/demo/flyline.js +++ b/site/examples/earth/arc3d/demo/flyline.js @@ -1,5 +1,5 @@ -import { EarthLayer, LineLayer, Scene } from '@antv/l7'; -import { Earth } from '@antv/l7-maps'; +import { Earth, EarthLayer, LineLayer, Scene } from '@antv/l7'; + const scene = new Scene({ id: 'map', map: new Earth({}), diff --git a/site/examples/engine/three/demo/amap_ant.js b/site/examples/engine/three/demo/amap_ant.js index 77f886a0a02..ef0314fdf6b 100644 --- a/site/examples/engine/three/demo/amap_ant.js +++ b/site/examples/engine/three/demo/amap_ant.js @@ -1,5 +1,5 @@ import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { ThreeLayer, ThreeRender } from '@antv/l7-three'; import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; diff --git a/site/examples/engine/three/demo/basic_geometry.js b/site/examples/engine/three/demo/basic_geometry.js index 5db23c67cc6..b2630934f99 100644 --- a/site/examples/engine/three/demo/basic_geometry.js +++ b/site/examples/engine/three/demo/basic_geometry.js @@ -1,5 +1,5 @@ import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { ThreeLayer, ThreeRender } from '@antv/l7-three'; import * as THREE from 'three'; diff --git a/site/examples/engine/three/demo/space_click.js b/site/examples/engine/three/demo/space_click.js index 2c55c30514e..aea82389082 100644 --- a/site/examples/engine/three/demo/space_click.js +++ b/site/examples/engine/three/demo/space_click.js @@ -1,5 +1,5 @@ import { Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { ThreeLayer, ThreeRender } from '@antv/l7-three'; import { animate, easeInOut } from 'popmotion'; import * as THREE from 'three'; diff --git a/site/examples/gallery/animate/delete/amap_car.js b/site/examples/gallery/animate/delete/amap_car.js index 187b25c22d4..68745cac766 100644 --- a/site/examples/gallery/animate/delete/amap_car.js +++ b/site/examples/gallery/animate/delete/amap_car.js @@ -1,5 +1,5 @@ import { LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { ThreeLayer, ThreeRender } from '@antv/l7-three'; import { animate, easeInOut } from 'popmotion'; import * as THREE from 'three'; diff --git a/site/examples/gallery/animate/delete/box_select.js b/site/examples/gallery/animate/delete/box_select.js index 75b2cc1bc63..3d278ecc0ac 100644 --- a/site/examples/gallery/animate/delete/box_select.js +++ b/site/examples/gallery/animate/delete/box_select.js @@ -1,5 +1,5 @@ import { LineLayer, PolygonLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const mapWrap = document.getElementById('map'); const { left, top } = mapWrap.getBoundingClientRect(); diff --git a/site/examples/gallery/animate/delete/plane_animate.js b/site/examples/gallery/animate/delete/plane_animate.js index 3ff876a1e04..05858d2209d 100644 --- a/site/examples/gallery/animate/delete/plane_animate.js +++ b/site/examples/gallery/animate/delete/plane_animate.js @@ -1,6 +1,6 @@ /* eslint-disable no-eval */ import { LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/animate/delete/route_line.js b/site/examples/gallery/animate/delete/route_line.js index a14caec50ca..80a8c5aae94 100644 --- a/site/examples/gallery/animate/delete/route_line.js +++ b/site/examples/gallery/animate/delete/route_line.js @@ -1,6 +1,6 @@ /* eslint-disable no-eval */ import { LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7'; // -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/animate/delete/wind.js b/site/examples/gallery/animate/delete/wind.js index 92e771ec642..f3bd41fcfa2 100644 --- a/site/examples/gallery/animate/delete/wind.js +++ b/site/examples/gallery/animate/delete/wind.js @@ -1,5 +1,5 @@ import { Scene, WindLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/animate/demo/3d_base_map.js b/site/examples/gallery/animate/demo/3d_base_map.js index ffed28c2040..8c28b041258 100644 --- a/site/examples/gallery/animate/demo/3d_base_map.js +++ b/site/examples/gallery/animate/demo/3d_base_map.js @@ -1,6 +1,5 @@ /* eslint-disable no-undef */ -import { LineLayer, Marker, PointLayer, PolygonLayer, Scene } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; +import { LineLayer, Map, Marker, PointLayer, PolygonLayer, Scene } from '@antv/l7'; import 'district-data'; const pointData = [ diff --git a/site/examples/gallery/animate/demo/animate_path_texture.js b/site/examples/gallery/animate/demo/animate_path_texture.js index 7df424498a4..4aa0a25bcfa 100644 --- a/site/examples/gallery/animate/demo/animate_path_texture.js +++ b/site/examples/gallery/animate/demo/animate_path_texture.js @@ -1,5 +1,5 @@ import { LineLayer, PolygonLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/animate/demo/build_sweep.js b/site/examples/gallery/animate/demo/build_sweep.js index 74f0657c985..60534d94b92 100644 --- a/site/examples/gallery/animate/demo/build_sweep.js +++ b/site/examples/gallery/animate/demo/build_sweep.js @@ -1,5 +1,5 @@ import { CityBuildingLayer, LineLayer, PolygonLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/animate/demo/grid.js b/site/examples/gallery/animate/demo/grid.js index 31a5ac10e6f..938b45680f6 100644 --- a/site/examples/gallery/animate/demo/grid.js +++ b/site/examples/gallery/animate/demo/grid.js @@ -1,5 +1,5 @@ import { LineLayer, PointLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; import { ThreeLayer, ThreeRender } from '@antv/l7-three'; import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; diff --git a/site/examples/gallery/animate/demo/turin.js b/site/examples/gallery/animate/demo/turin.js index 81352627df2..d18e993f936 100644 --- a/site/examples/gallery/animate/demo/turin.js +++ b/site/examples/gallery/animate/demo/turin.js @@ -1,5 +1,5 @@ import { LineLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/basic/demo/arc-circle.js b/site/examples/gallery/basic/demo/arc-circle.js index 712c752f637..0c6e60910ac 100644 --- a/site/examples/gallery/basic/demo/arc-circle.js +++ b/site/examples/gallery/basic/demo/arc-circle.js @@ -1,5 +1,5 @@ import { LineLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/basic/demo/bus_dark.js b/site/examples/gallery/basic/demo/bus_dark.js index 886b53bbae8..630454ff4e8 100644 --- a/site/examples/gallery/basic/demo/bus_dark.js +++ b/site/examples/gallery/basic/demo/bus_dark.js @@ -1,5 +1,5 @@ import { LineLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/basic/demo/column_dark.js b/site/examples/gallery/basic/demo/column_dark.js index 9b3c0974ff2..1af3de5fbac 100644 --- a/site/examples/gallery/basic/demo/column_dark.js +++ b/site/examples/gallery/basic/demo/column_dark.js @@ -1,5 +1,5 @@ import { PointLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/basic/demo/light.js b/site/examples/gallery/basic/demo/light.js index 1586853f71d..574a45c265e 100644 --- a/site/examples/gallery/basic/demo/light.js +++ b/site/examples/gallery/basic/demo/light.js @@ -1,5 +1,5 @@ import { HeatmapLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/basic/demo/normal.js b/site/examples/gallery/basic/demo/normal.js index 0871ff68329..2a8a754783c 100644 --- a/site/examples/gallery/basic/demo/normal.js +++ b/site/examples/gallery/basic/demo/normal.js @@ -1,5 +1,5 @@ import { PointLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/basic/demo/province_map.ts b/site/examples/gallery/basic/demo/province_map.ts index 6844133637d..ba769132c2e 100644 --- a/site/examples/gallery/basic/demo/province_map.ts +++ b/site/examples/gallery/basic/demo/province_map.ts @@ -1,5 +1,4 @@ -import { PointLayer, PolygonLayer, Scene } from '@antv/l7'; -import { Map } from '@antv/l7-maps'; +import { Map, PointLayer, PolygonLayer, Scene } from '@antv/l7'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/story/demo/gaza.js b/site/examples/gallery/story/demo/gaza.js index 735ef225d05..0170e797707 100644 --- a/site/examples/gallery/story/demo/gaza.js +++ b/site/examples/gallery/story/demo/gaza.js @@ -1,5 +1,5 @@ import { PointLayer, PolygonLayer, RasterLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/story/demo/yidaiyilu.js b/site/examples/gallery/story/demo/yidaiyilu.js index 59921dbba7f..dcc7223115c 100644 --- a/site/examples/gallery/story/demo/yidaiyilu.js +++ b/site/examples/gallery/story/demo/yidaiyilu.js @@ -1,5 +1,5 @@ import { LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const scene = new Scene({ id: 'map', diff --git a/site/examples/gallery/story/demo/yidaiyilu2.js b/site/examples/gallery/story/demo/yidaiyilu2.js index 83e104521e2..59eaa68e252 100644 --- a/site/examples/gallery/story/demo/yidaiyilu2.js +++ b/site/examples/gallery/story/demo/yidaiyilu2.js @@ -1,5 +1,5 @@ import { Control, DOM, LayerPopup, LineLayer, PolygonLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap } from '@antv/l7-extension-maps'; const styleElement = document.createElement('style'); // 在