mapbox-performance-tool\/\n\u251c\u2500\u2500 src\/\n\u2502 \u251c\u2500\u2500 index.ts # \u5e94\u7528\u5165\u53e3\u70b9\n\u2502 \u251c\u2500\u2500 core\/\n\u2502 \u2502 \u2514\u2500\u2500 PerformanceMonitor.ts # \u4e3b\u6027\u80fd\u76d1\u6d4b\u7c7b\n\u2502 \u251c\u2500\u2500 metrics\/\n\u2502 \u2502 \u251c\u2500\u2500 mapConstructorTime.ts # \u5f00\u56fe\u65f6\u95f4\u76f8\u5173\u6307\u6807\n\u2502 \u2502 \u251c\u2500\u2500 FrameMetric.ts # \u5e27\u76f8\u5173\u6307\u6807\n\u2502 \u2502 \u251c\u2500\u2500 UserActionMetric.ts # \u7528\u6237\u64cd\u4f5c\u6307\u6807\n\u2502 \u2502 \u251c\u2500\u2500 MapStateMetric.ts # \u5730\u56fe\u72b6\u6001\u6307\u6807\n\u2502 \u2502 \u251c\u2500\u2500 DataLoadMetric.ts # \u6570\u636e\u52a0\u8f7d\u6307\u6807\n\u2502 \u2502 \u2514\u2500\u2500 SystemMetric.ts # \u7cfb\u7edf\u8d44\u6e90\u6307\u6807\n\u2502 \u251c\u2500\u2500 recorder\/\n\u2502 \u2502 \u2514\u2500\u2500 DataRecorder.ts # \u6570\u636e\u8bb0\u5f55\u5668\n\u2502 \u2514\u2500\u2500 simulator\/\n\u2502 \u2502 \u2514\u2500\u2500 InputSimulator.ts # \u8f93\u5165\u6a21\u62df\u5668\n\u2502 \u2514\u2500\u2500 hooker\/\n\u2502 \u2502 \u2514\u2500\u2500 hooker.ts # \u94a9\u5b50\u7c7b\uff0c\u7528\u4e8e\u57cb\u70b9\n\u251c\u2500\u2500 webpack.config.js # Webpack\u914d\u7f6e\n\u251c\u2500\u2500 dist\/ # \u6784\u5efa\u8f93\u51fa\u76ee\u5f55\n\u251c\u2500\u2500 index.html # \u4e3bHTML\u6587\u4ef6\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 tsconfig.json<\/code><\/pre>\n\n\n\n\u6307\u6807\u76d1\u6d4b\u65b9\u6cd5<\/h2>\n\n\n\n\u5f00\u56fe\u65f6\u95f4\u76d1\u6d4b<\/h3>\n\n\n\n
\u5148\u4ee5\u5f00\u56fe\u65f6\u95f4\u8fd9\u4e2a\u6700\u7b80\u5355\u7684\u6307\u6807\u5f00\u59cb\u6a21\u5757\u7684\u5f00\u53d1
\u9996\u5148\u6211\u4eec\u5c3d\u53ef\u80fd\u4e0d\u53bb\u4f9d\u8d56\u4e8e\u5165\u53e3\u7c7b\uff0c\u56e0\u4e3a\u4f5c\u4e3a\u4e00\u4e2a\u6027\u80fd\u76d1\u63a7\u63d2\u4ef6\uff0c\u6211\u4eec\u4e0d\u80fd\u6bcf\u6b21\u90fd\u80fd\u5e72\u6d89\u5230\u7528\u6237\u9879\u76ee\u7684\u5165\u53e3\u7c7b\uff0c\u6700\u597d\u80fd\u505a\u5230\uff0c\u53ea\u5728\u5165\u53e3\u7c7bnew\u4e00\u4e0b\u6211\u4eec\u7684PerformanceMonitor\u7c7b\uff0c\u5c31\u53ef\u4ee5\u8fdb\u884c\u76d1\u63a7\u3002\u90a3\u4e48\u7b2c\u4e00\u4e2a\u95ee\u9898\u5c31\u662f\u600e\u4e48\u83b7\u53d6map\u7c7b\u7684\u5f00\u59cb\u521b\u5efa\u65f6\u95f4\uff0c\u56e0\u4e3amap\u6709\u4e8b\u4ef6\u673a\u5236\u6765\u83b7\u53d6\u6570\u636e\u52a0\u8f7d\uff08load\uff09\u548c\u6e32\u67d3\u5b8c\u6bd5\u5730\u56fe\u7a7a\u95f2(idle)\u7684\u65f6\u95f4\u3002\u6700\u4f18\u96c5\u7684\u65b9\u6cd5\u5c31\u662f\u7528hook\u53bb\u5728map\u6784\u9020\u51fd\u6570\u524d\u540e\u52a0\u4e0a\u4e8b\u4ef6\uff0c\u5b9e\u73b0\u5982\u4e0b\uff1a<\/p>\n\n\n\n
\/\/\u94a9\u5b50\u65b9\u6cd5\u7c7b\uff0c\u7528\u4e8e\u5728mapbox\u6e90\u7801\u4e2d\u57cb\u70b9\nimport { BlobOptions } from 'buffer';\nimport mapboxgl from 'mapbox-gl'\n\n\/\/ \u5b9a\u4e49\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u63a5\u53e3\ninterface MapConstructStartEvent extends CustomEvent {\n detail: {\n timestamp: number;\n };\n}\n\ninterface MapConstructCompleteEvent extends CustomEvent {\n detail: {\n map: mapboxgl.Map;\n timestamp: number;\n };\n}\n\n\/\/ \u6269\u5c55Window\u63a5\u53e3\u4ee5\u5305\u542b\u81ea\u5b9a\u4e49\u4e8b\u4ef6\ndeclare global {\n interface Window {\n addEventListener(\n type: 'mapConstructStart',\n listener: (event: MapConstructStartEvent) => void,\n options?: boolean | AddEventListenerOptions\n ): void;\n addEventListener(\n type: 'mapConstructComplete',\n listener: (event: MapConstructCompleteEvent) => void,\n options?: boolean | AddEventListenerOptions\n ): void;\n dispatchEvent(event: MapConstructStartEvent | MapConstructCompleteEvent): boolean;\n }\n}\n\n\/\/\u5355\u4f8b\u7c7b\nexport class Hooker{\n \/\/ \u997f\u6c49\u6a21\u5f0f\uff1a\u76f4\u63a5\u5728\u7c7b\u52a0\u8f7d\u65f6\u5c31\u521d\u59cb\u5316\u5b9e\u4f8b\n private static instance: Hooker = new Hooker();\n\n private originalMapConstructor : any;\/\/ \u539f\u59cbmap\u6784\u9020\u51fd\u6570\n private isMapConstructorHooked : boolean = false;\n\n \/\/ \u6784\u9020\u51fd\u6570\u79c1\u6709\u5316\uff0c\u9632\u6b62\u5916\u90e8\u76f4\u63a5\u5b9e\u4f8b\u5316\n private constructor() {\n this.sendMapConstructTime()\n }\n\n \/\/ \u83b7\u53d6\u5355\u4f8b\u5b9e\u4f8b\n public static getInstance(): Hooker {\n return Hooker.instance;\n }\n\n \/\/\u5728mapbox.map\u6784\u9020\u51fd\u6570\u57cb\u70b9\uff0c\u83b7\u53d6\u5f00\u59cb\u521b\u5efa\u65f6\u95f4\u53ca\u4f20\u51famap\n public sendMapConstructTime(){\n if (this.isMapConstructorHooked) {\n return;\n }\n this.originalMapConstructor = mapboxgl.Map;\n \n \/\/ \u91cd\u5199Map\u6784\u9020\u51fd\u6570\n const self = this;\n mapboxgl.Map = function(...args: any[]) {\n \/\/ \u53d1\u9001\u6784\u9020\u5f00\u59cb\u4e8b\u4ef6\n window.dispatchEvent(new CustomEvent('mapConstructStart', {\n detail: { timestamp: performance.now() }\n }));\n \n \/\/ \u8c03\u7528\u539f\u59cb\u6784\u9020\u51fd\u6570\n const mapInstance = new self.originalMapConstructor(...args);\n\n \/\/ \u53d1\u9001\u6784\u9020\u5b8c\u6210\u4e8b\u4ef6\uff0c\u5305\u542bmap\u5b9e\u4f8b\n window.dispatchEvent(new CustomEvent('mapConstructComplete', {\n detail: { map: mapInstance, timestamp: performance.now() }\n }));\n\n return mapInstance;\n } as any;\n\n \/\/ \u590d\u5236\u539f\u578b\u94fe\u4ee5\u786e\u4fdd\u529f\u80fd\u5b8c\u6574\n mapboxgl.Map.prototype = this.originalMapConstructor.prototype;\n \n \/\/ \u590d\u5236\u9759\u6001\u5c5e\u6027\n Object.keys(this.originalMapConstructor).forEach(key => {\n (mapboxgl.Map as any)[key] = (this.originalMapConstructor as any)[key];\n });\n \n this.isMapConstructorHooked = true;\n }\n}<\/code><\/pre>\n\n\n\n\u7279\u522b\u6ce8\u610f\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u58f0\u660e\u3002<\/p>\n\n\n\n
\u4e4b\u540e\u662fPerformanceMonitor\uff0c\u521d\u6b65\u8bbe\u8ba1\u6210\u8fd9\u6837\uff0c\u540e\u7eed\u6162\u6162\u6539\u8fdb<\/p>\n\n\n\n
import mapboxgl from 'mapbox-gl'\nimport { Hooker } from '..\/hooker\/hooker'\nimport { MapConstructorMonitor } from '..\/metrics\/mapConstructorTime';\n\n\/\/ \u5b9a\u4e49\u4e8b\u4ef6\u7c7b\u578b\ninterface MapConstructCompleteEvent extends CustomEvent {\n detail: {\n map: mapboxgl.Map;\n timestamp: number;\n };\n}\n\ninterface MonitorConfig{\n enableMonitorMapConstructTime : boolean;\n}\n\nconst DEFAULT_CONFIG: MonitorConfig = {\n enableMonitorMapConstructTime : true\n}\n\n\nexport class PerformanceMonitor {\n private _config : MonitorConfig;\n private _map : mapboxgl.Map| null = null;\n private _hook : Hooker;\n public _mapConstructorMonitor : MapConstructorMonitor | null = null;\n\n constructor(config?:Partial<MonitorConfig>){\n console.log(\"PerformanceMonitor\u521b\u5efa\");\n\n \/\/ \u5408\u5e76\u9ed8\u8ba4\u914d\u7f6e\u548c\u7528\u6237\u914d\u7f6e\n this._config = { ...DEFAULT_CONFIG, ...config };\n\n \/\/\u521d\u59cb\u5316\n if(this._config.enableMonitorMapConstructTime){\n this._mapConstructorMonitor = new MapConstructorMonitor();\n }\n\n \/\/\u521b\u5efahook,\u5e76\n this._hook = Hooker.getInstance();\n\n \/\/\u76d1\u542c\u5730\u56fe\u521b\u5efa\u5b8c\u6210\u4e8b\u4ef6\uff0c\u7ed1\u5b9amap\n this.setupMapListeners();\n }\n\n private setupMapListeners() {\n \/\/ \u76d1\u542cmap\u6784\u9020\u5b8c\u6210\u4e8b\u4ef6\n window.addEventListener('mapConstructComplete', (event: Event) => {\n const customEvent = event as MapConstructCompleteEvent;\n this._map = customEvent.detail.map;\n console.log(\"PerformanceMonitor\u83b7\u53d6\u5230mapConstructComplete\u4e8b\u4ef6\");\n });\n }\n}<\/code><\/pre>\n\n\n\n\u8fd8\u662f\u8981\u6ce8\u610f\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u7533\u660e\u548c\u65ad\u8a00\uff0c\u6b64\u5916\u5c31\u662fmap\u7684\u7ed1\u5b9a\u65f6\u673a\uff0c\u7c7b\u7684\u521b\u59cb\u65f6\u95f4\u662f\u4e00\u5b9a\u6bd4map\u6784\u9020\u65e9\u7684\u3002<\/p>\n\n\n\n
\u4e4b\u540e\u662fMapConstructorMonitor\u7c7b\uff0c\u6ce8\u610f\u70b9\u540c\u4e0a\u3002<\/p>\n\n\n\n
import { Map } from \"mapbox-gl\";\n\ninterface MapConstructStartEvent extends CustomEvent {\n detail: {\n timestamp: number;\n };\n}\n\ninterface MapConstructCompleteEvent extends CustomEvent {\n detail: {\n map: mapboxgl.Map;\n timestamp: number;\n };\n}\n\nexport class MapConstructorMonitor{\n private _map : mapboxgl.Map | null = null;\n private mapConsturctTime : number | null = null;\n private mapLoadTIme : number | null = null;\n private mapFisrtIdleTime : number | null = null;\n\n constructor(){\n this.setupListener();\n }\n\n private setupListener(){\n \/\/ \u76d1\u542cmap\u6784\u9020\u5f00\u59cb\u4e8b\u4ef6\n window.addEventListener('mapConstructStart', (event: Event) => {\n const customEvent = event as MapConstructStartEvent;\n this.mapConsturctTime = customEvent.detail.timestamp;\n console.log(\"MapConstructorMonitor\u83b7\u53d6\u5230MapConstructStartEvent\u4e8b\u4ef6\");\n });\n \/\/ \u76d1\u542cmap\u6784\u9020\u5b8c\u6210\u4e8b\u4ef6\n window.addEventListener('mapConstructComplete', (event: Event) => {\n const customEvent = event as MapConstructCompleteEvent;\n this.mapConsturctTime = customEvent.detail.timestamp;\n this._map = customEvent.detail.map;\n this.setupMapListener();\n console.log(\"MapConstructorMonitor\u83b7\u53d6\u5230MapConstructCompleteEvent\u4e8b\u4ef6\");\n });\n }\n\n private setupMapListener(){\n \/\/ \u76d1\u542cmap\u6570\u636e\u52a0\u8f7d\u5b8c\u6bd5\u4e8b\u4ef6\n let map = this._map as mapboxgl.Map;\n map.on('load',()=>{\n this.mapLoadTIme = performance.now();\n console.log(\"MapConstructorMonitor\u83b7\u53d6\u5230map-load\u4e8b\u4ef6\");\n })\n map.once('idle',()=>{\n this.mapFisrtIdleTime = performance.now();\n console.log(\"MapConstructorMonitor\u83b7\u53d6\u5230map-fisrt-idle\u4e8b\u4ef6\");\n })\n }\n}<\/code><\/pre>\n\n\n\n\u6700\u540e\u662findex.ts\uff0c\u4e3a\u4e86\u6d4b\u8bd5\u65b9\u4fbf\u628aperformanceMonitor\u4f5c\u4e3awindow\u7684\u53d8\u91cf<\/p>\n\n\n\n
\/\/ \u5f15\u5165\u5fc5\u8981\u7684\u6a21\u5757\nimport mapboxgl from 'mapbox-gl'\nimport { PerformanceMonitor } from '.\/core\/performanceMonitor';\n\n\/\/ \u8bbe\u7f6eMapbox\u8bbf\u95ee\u4ee4\u724c\nmapboxgl.accessToken = '';\n\n\/\/ \u521b\u5efa\u6027\u80fd\u76d1\u6d4b\u5668\u5b9e\u4f8b\nconst _performanceMonitor = new PerformanceMonitor();\n(window as any)._performanceMonitor = _performanceMonitor;\n\n\/\/ \u521d\u59cb\u5316\u5730\u56fe\nconst map = new mapboxgl.Map({\n container: 'map',\n style: 'mapbox:\/\/styles\/mapbox\/streets-v11',\n center: [116.46, 39.92], \/\/ \u9ed8\u8ba4\u4e2d\u5fc3\u70b9\uff08\u5317\u4eac\uff09\n zoom: 10\n});<\/code><\/pre>\n\n\n\n\u4f46\u662f\u73b0\u5728\u8bb0\u5f55\u8fd8\u6ca1\u89c4\u5219\u5316\u5b58\u50a8\uff0c\u4e8e\u662f\u6211\u4eec\u518d\u5efa\u4e00\u4e2arecorder\u7c7b<\/p>\n\n\n\n
\/\/ \u5f00\u56fe\u8bb0\u5f55\uff0c\u4ec5\u53d1\u751f\u4e00\u6b21\nexport interface MapConstructRecord{\n constructStartTime?: number;\n loadTime?: number;\n firstIdleTime?: number;\n}\n\n\/\/ \u5e27\u8bb0\u5f55\uff0c\u9ad8\u9891\u6570\u636e\nexport interface FrameRecord{\n frameID : number;\n cpuTime : number;\n gpuTime : number;\n timeStamp : number;\n}\n\n\/\/ fps\u8bb0\u5f55\uff0c\u6bcf\u79d2\u4e00\u6b21\nexport interface FpsRecord{\n fps : number;\n timestamp : number;\n}\n\n\/\/ \u7528\u6237\u64cd\u4f5c\u7c7b\u578b\nexport type UserActionType = \n | 'zoom' \n | 'pan' \n | 'rotate' \n | 'click' \n\n\/\/ \u7528\u6237\u64cd\u4f5c\u8bb0\u5f55\nexport interface UserActionRecord{\n type: UserActionType;\n timestamp: number;\n duration?: number; \/\/ \u64cd\u4f5c\u6301\u7eed\u65f6\u95f4\uff08\u5982\u62d6\u62fd\uff09\n details?: {\n fromZoom?: number;\n toZoom?: number;\n fromCenter?: [number, number];\n toCenter?: [number, number];\n fromBearing?: number;\n toBearing?: number;\n fromPitch?: number;\n toPitch?: number;\n target?: string; \/\/ \u70b9\u51fb\u7684\u76ee\u6807\u5143\u7d20\n };\n}\n\n\n\/\/ \u8d44\u6e90\u52a0\u8f7d\u8bb0\u5f55\nexport interface ResourceLoadRecord {\n url: string;\n type: 'style' | 'source' | 'tile' | 'image' | 'glyph' | 'sprite';\n startTime: number;\n endTime: number;\n duration: number;\n success: boolean;\n error?: string;\n size?: number; \/\/ \u8d44\u6e90\u5927\u5c0f\uff08\u5b57\u8282\uff09\n}\n\n\/\/ \u5730\u56fe\u72b6\u6001\u8bb0\u5f55\nexport interface MapStateRecord {\n timestamp: number;\n zoom: number;\n center: [number, number];\n bearing: number;\n pitch: number;\n bounds?: mapboxgl.LngLatBounds; \/\/ \u5f53\u524d\u89c6\u53e3\u8fb9\u754c\n}\n\nexport interface Records{\n mapConstructRecord : MapConstructRecord;\n frameRecords : FrameRecord[];\n fpsRecords: FpsRecord[];\n userActionRecords: UserActionRecord[];\n resourceLoadRecords: ResourceLoadRecord[];\n mapStateRecords: MapStateRecord[];\n metadata?: {\n mapboxVersion?: string;\n browserInfo?: {\n name?: string;\n version?: string;\n userAgent?: string;\n };\n webglInfo?: {\n renderer?: string;\n vendor?: string;\n };\n startTime?: number;\n endTime?: number;\n duration?: number; \/\/ \u603b\u76d1\u6d4b\u65f6\u957f\n };\n}\n\n\/\/ \u6570\u636e\u8bb0\u5f55\u7c7b\nexport class Recorder{\n \/\/\u997f\u6c49\u6a21\u5f0f\n private static instance: Recorder = new Recorder();\n\n private records : Records | undefined;\n\n private constructor(){\n this.reset();\n }\n\n public static getInstance():Recorder{\n return this.instance;\n }\n\n \/\/ \u91cd\u7f6e\u6240\u6709\u8bb0\u5f55\n public reset(): void {\n this.records = {\n mapConstructRecord: {},\n frameRecords: [],\n fpsRecords: [],\n userActionRecords: [],\n resourceLoadRecords: [],\n mapStateRecords: [],\n metadata: {\n \/\/mapboxVersion: (mapboxgl as any).version || 'unknown',\n \/\/browserInfo: this.getBrowserInfo(),\n \/\/webglInfo: this.getWebGLInfo(),\n \/\/startTime: Date.now()\n }\n }\n }\n\n public recordMapConstructTime(mapConstructRecord:MapConstructRecord){\n if (this.records) {\n this.records.mapConstructRecord = mapConstructRecord;\n } \n else {\n console.error('Records object is not initialized.');\n }\n }\n}<\/code><\/pre>\n\n\n\n\u8fd9\u662f\u6dfb\u52a0\u53d1\u9001\u8bb0\u5f55\u529f\u80fd\u7684mapConstructorTime\u7c7b<\/p>\n\n\n\n
import { Map } from \"mapbox-gl\";\nimport { MapConstructStartEvent,MapConstructCompleteEvent } from \"..\/hooker\/hooker\";\nimport { Recorder } from \"..\/recorder\/recorder\";\n\n\/\/ \u5f00\u56fe\u8bb0\u5f55\uff0c\u4ec5\u53d1\u751f\u4e00\u6b21\nexport interface MapConstructRecord{\n constructStartTime?: number;\n loadTime?: number;\n firstIdleTime?: number;\n}\n\n\nexport class MapConstructorMonitor{\n private map : Map | null = null;\n private mapConstructTime : number | null = null;\n private mapLoadTime : number | null = null;\n private mapFirstIdleTime : number | null = null;\n private recordSent: boolean = false; \/\/ \u9632\u6b62\u91cd\u590d\u53d1\u9001\n\n constructor(){\n this.setupListener();\n }\n\n private setupListener(){\n \/\/ \u76d1\u542cmap\u6784\u9020\u5f00\u59cb\u4e8b\u4ef6\n window.addEventListener('mapConstructStart', (event: Event) => {\n const customEvent = event as MapConstructStartEvent;\n this.mapConstructTime = customEvent.detail.timestamp;\n \/\/ console.log(\"MapConstructorMonitor\u83b7\u53d6\u5230MapConstructStartEvent\u4e8b\u4ef6\");\n });\n \/\/ \u76d1\u542cmap\u6784\u9020\u5b8c\u6210\u4e8b\u4ef6\n \/\/ window.addEventListener('mapConstructComplete', (event: Event) => {\n \/\/ const customEvent = event as MapConstructCompleteEvent;\n \/\/ this._map = customEvent.detail.map;\n \/\/ this.setupMapListener();\n \/\/ console.log(\"MapConstructorMonitor\u83b7\u53d6\u5230MapConstructCompleteEvent\u4e8b\u4ef6\");\n \/\/ });\n }\n\n \/\/ \u7ed1\u5b9amap\u5e76\u5f00\u542f\u76d1\u542c\n public bindMap(map : Map){\n this.map = map;\n this.setupMapListener();\n }\n\n private setupMapListener(){\n console.log(\"[mapConstructor] \u5f00\u59cb\u76d1\u6d4b\u5f00\u56fe\u65f6\u95f4\");\n \/\/ \u76d1\u542cmap\u6570\u636e\u52a0\u8f7d\u5b8c\u6bd5\u4e8b\u4ef6\n let map = this.map as Map;\n map.on('load',()=>{\n this.mapLoadTime = performance.now();\n \/\/ console.log(\"MapConstructorMonitor\u83b7\u53d6\u5230map-load\u4e8b\u4ef6\");\n })\n map.once('idle',()=>{\n this.mapFirstIdleTime = performance.now();\n \/\/ console.log(\"MapConstructorMonitor\u83b7\u53d6\u5230map-fisrt-idle\u4e8b\u4ef6\");\n this.sendMCTRecord();\/\/\u53d1\u9001\u5b8c\u6574\u7684\u5f00\u56fe\u8bb0\u5f55\u6570\u636e\n })\n }\n\n private sendMCTRecord(){\n \/\/ \u9632\u6b62\u91cd\u590d\u53d1\u9001\u8bb0\u5f55\n if (this.recordSent) {\n console.warn('Map construct record already sent');\n return;\n }\n \/\/ \u6784\u9020\u5f00\u56fe\u8bb0\u5f55\u5bf9\u8c61\n const mapConstructRecord: MapConstructRecord = {\n constructStartTime: this.mapConstructTime|| undefined,\n loadTime: this.mapLoadTime || undefined, \/\/ \u5982\u679c\u4e3anull\u5219\u8bbe\u4e3aundefined\n firstIdleTime: this.mapFirstIdleTime || undefined\n };\n try {\n const recorder = Recorder.getInstance();\n recorder.recordMapConstructTime(mapConstructRecord);\n this.recordSent = true; \/\/ \u6807\u8bb0\u5df2\u53d1\u9001\n \/\/console.log('Map construct monitoring completete');\n } catch (error) {\n console.error('Failed to send map construct record:', error);\n } \n }\n}<\/code><\/pre>\n\n\n\n\u5e27\u6307\u6807\u76d1\u6d4b<\/h3>\n\n\n\nimport { Map } from \"mapbox-gl\";\nimport { Recorder } from \"..\/recorder\/recorder\";\nimport { BoundedQueue } from \"..\/utils\/queue\";\n\nexport interface MonitorFrameConfig{ \/\/\u5e27\u6027\u80fd\u76d1\u6d4b\u7ec6\u5219\n enableFPS : boolean; \/\/\u662f\u5426\u5f00\u542ffps\u76d1\u6d4b\n enableFrameTime : boolean; \/\/\u662f\u5426\u5f00\u542f\u5e27\u8017\u65f6\u76d1\u6d4b\uff08cpu+gpu\uff09\n enableLayerTime :boolean; \/\/\u662f\u5426\u5f00\u542f\u6bcf\u4e2a\u56fe\u5c42\u8017\u65f6\u76d1\u6d4b\n}\n\nexport interface Frame{\n frameID : number;\n frameStartTime : number; \/\/\u89e6\u53d1\u8be5\u5e27\u7684\u65f6\u95f4,\u5e27\u6709\u53ef\u80fd\u88ab\u4e22\u5f03\uff0c\u4e0d\u4e00\u5b9a\u5b9e\u9645\u6267\u884c\u7ed8\u5236\n frameRenderTime : number | null; \/\/\u5f00\u59cb\u7ed8\u5236\u7684\u65f6\u95f4\n frameCPUTime : number | null; \/\/cpu\u8017\u65f6\n frameGPUTime : number | null; \/\/gpu\u8017\u65f6\n frameLayerTime : {[layerName: string]:number} | null \/\/\u6bcf\u4e2a\u56fe\u5c42\u7684\u8017\u65f6\uff08\u56fe\u5c42\u540d\uff1a\u65f6\u95f4\uff09\n}\n\nexport interface FPSRecord{\n index : number;\n startTime : number;\n fps : number;\n}\n\nexport class FrameMetric{\n private map : Map | null = null;\n private config : MonitorFrameConfig;\n private frameID : number;\n private tempFrameID : BoundedQueue<number>;\n private tempStartTime : BoundedQueue<number>;\n private tempRenderTime : BoundedQueue<number>;\n private tempCpuTime : BoundedQueue<number>;\n private tempGpuTime : BoundedQueue<number>;\n private frames : Frame[];\n private frameAbort : boolean; \/\/\u5e27\u662f\u5426\u88ab\u4e22\u5f03\uff0c\u5373\u89e6\u53d1renderstart\u540e\u672a\u89e6\u53d1render\n private lastSecondTime : number | null = null; \/\/\u4e00\u79d2\u5185\u7b2c\u4e00\u5e27\u7684\u65f6\u95f4\uff0c\u7528\u4e8e\u8ba1\u7b97\u5e27\u7387\uff0c\u521d\u59cb\u6216idle\u65f6\u8bbe\u4e3anull\n private lastSecondFrameID : number | null = null; \/\/\u4e00\u79d2\u5185\u7b2c\u4e00\u5e27\u7684ID\uff0c\u7528\u4e8e\u8ba1\u7b97\u5e27\u7387\n private FPSRecordIndex : number;\n\n constructor(config : MonitorFrameConfig){\n this.config = config;\n this.frameID = 0;\n this.tempFrameID = new BoundedQueue<number>(50);\n this.tempStartTime = new BoundedQueue<number>(50);\n this.tempRenderTime = new BoundedQueue<number>(50);\n this.tempCpuTime = new BoundedQueue<number>(50);\n this.tempGpuTime = new BoundedQueue<number>(50);\n this.frames = [];\n this.frameAbort = false;\n this.FPSRecordIndex = 0;\n this.handleRenderStart = this.handleRenderStart.bind(this);\n this.handleRender = this.handleRender.bind(this);\n this.handleGpuTiming = this.handleGpuTiming.bind(this);\n this.handleIdle = this.handleIdle.bind(this);\n }\n\n public bindMap(map : Map){\n if (this.map !== null) {\n throw new Error(\"[FrameMetric] bindMap() \u5df2\u7ecf\u7ed1\u5b9a\u8fc7 Map \u5b9e\u4f8b\u3002\u8bf7\u5148\u8c03\u7528 unbindMap() \u518d\u6b21\u7ed1\u5b9a\u3002\");\n }\n if (!map) {\n throw new Error(\"[FrameMetric] bindMap() \u9700\u8981\u4f20\u5165\u6709\u6548\u7684 Map \u5b9e\u4f8b\u3002\");\n }\n this.map = map;\n this.startMonitor();\n this.lastSecondTime = performance.now();\n }\n\n public startMonitor(){\n this.resetFrames();\n this.map?.on('renderstart',this.handleRenderStart);\n this.map?.on('render',this.handleRender);\n this.map?.on('idle',this.handleIdle);\n if(this.config.enableFrameTime){\n this.map?.on('gpu-timing-frame', this.handleGpuTiming);\/\/gpu\u67e5\u8be2\u4f1a\u670950ms\u5ef6\u8fdf\uff0c\u6ce8\u610f\u5f02\u6b65\u5904\u7406\n }\n if(this.config.enableLayerTime){\n \/\/mapbox3.15\u8be5\u4e8b\u4ef6\u4e0d\u80fd\u6b63\u5e38\u67e5\u8be2\uff0c2.15\u7248\u672c\u53ef\u4ee5\uff0c\u53bb\u5b9e\u9645\u9879\u76ee\u73af\u5883\u4e2d\u518d\u5b9e\u73b0\n \/\/this.map?.on('gpu-timing-layer', this.handleLayerTiming);\n }\n console.log(\"[FrameMetric] \u5f00\u59cb\u76d1\u6d4b\u5e27\u6027\u80fd\");\n }\n\n public stopMonitor(){\n if (!this.map) return;\n this.map.off('renderstart', this.handleRenderStart);\n this.map.off('render', this.handleRender);\n this.map.off('idle', this.handleIdle);\n if (this.config.enableFrameTime) {\n this.map.off('gpu-timing-frame', this.handleGpuTiming);\n }\n this.resetFrames();\n this.lastSecondTime = null;\n this.lastSecondFrameID = null;\n }\n\n private handleRenderStart(){\n \/\/console.log(\"renderstart!\");\n \/\/let _frameId : number = (this.map as Map)._frameId;\n let _frameStartTime : number = performance.now();\n if(this.frameAbort){ \/\/ \u5982\u679c\u4e0a\u4e00\u5e27\u88ab\u4e22\u5f03\uff0c\u5c31\u53ea\u8bb0\u5f55\u5e27id\u548c\u5f00\u59cb\u65f6\u95f4\n this.frames.push({\n frameID : this.tempFrameID.dequeue() as number ,\n frameStartTime : this.tempStartTime.dequeue() as number,\n frameRenderTime : null,\n frameCPUTime : null,\n frameGPUTime : null,\n frameLayerTime : null \n }\n );\n }\n this.frameAbort = true;\n this.tempFrameID.enqueue(this.frameID++);\n this.tempStartTime.enqueue(_frameStartTime)\n if(this.lastSecondTime && this.lastSecondFrameID){\n if(_frameStartTime-this.lastSecondTime>=1000){\n if(this.config.enableFPS){\n this.calFPS(); \n }\n Recorder.getInstance().recordFrames(this.frames);\n this.resetFrames();\n } \n }\n else{\n this.lastSecondFrameID = this.frameID;\n this.lastSecondTime = performance.now();\n }\n }\n\n private handleRender(){\n \/\/console.log(\"renderFinish!\");\n let _frameRenderTime = performance.now();\n this.frameAbort = false;\n if(!this.config.enableFrameTime && !this.config.enableLayerTime){\n \/\/\u5982\u679c\u4e0d\u68c0\u6d4bcpu\u3001gpu\u65f6\u95f4\u53ca\u56fe\u5c42\u6e32\u67d3\u65f6\u95f4\uff0c\u5c31\u76f4\u63a5\u52a0\u5165\u8bb0\u5f55\n this.frames.push({\n frameID : this.tempFrameID.dequeue() as number ,\n frameStartTime : this.tempStartTime.dequeue() as number,\n frameRenderTime : _frameRenderTime,\n frameCPUTime : null,\n frameGPUTime : null,\n frameLayerTime : null \n }\n );\n }\n \/\/\u5426\u5219\u52a0\u5165\u961f\u5217\n else{\n this.tempRenderTime.enqueue(_frameRenderTime);\n }\n }\n\n private handleIdle(){\n \/\/\u89e6\u53d1Idle\u65f6\u8fdb\u884c\u5e27\u7387\u8ba1\u7b97\u4ee5\u5904\u7406\u7279\u6b8a\u60c5\u51b5\n if(this.config.enableFPS){\n this.calFPSWithIdle(); \n }\n Recorder.getInstance().recordFrames(this.frames);\n this.resetFrames();\n }\n\n private handleGpuTiming(e:{cpuTime:number; gpuTime:number}){\n \/\/console.log(\"timeCalFinish!\");\n \/\/if(this.config.enableLayerTime){ \/\/\u5982\u679c\u8fd8\u8981\u7edf\u8ba1\u5404\u56fe\u5c42\u6e32\u67d3\u65f6\u95f4\uff0c\u5c31\u52a0\u5165\u961f\u5217\n if(this.config.enableLayerTime && false){ \/\/\u73b0\u5728\u8fd8\u6ca1\u652f\u6301\u56fe\u5c42\u65f6\u95f4\u7edf\u8ba1\uff0c\u5148\u5f3a\u5236\u8df3\u8fc7\n this.tempCpuTime.enqueue(e.cpuTime);\n this.tempGpuTime.enqueue(e.gpuTime);\n }\n else{\n this.frames.push({\n frameID : this.tempFrameID.dequeue() as number ,\n frameStartTime : this.tempStartTime.dequeue() as number,\n frameRenderTime : this.tempRenderTime.dequeue() as number,\n frameCPUTime : e.cpuTime,\n frameGPUTime : e.gpuTime,\n frameLayerTime : null \n }\n );\n }\n }\n\n private calFPS(){\n let _fps = this.frameID - (this.lastSecondFrameID as number) - 1;\n \/\/console.log(\"fps:\",_fps);\n let _fpsRecord = {\n index : this.FPSRecordIndex++,\n startTime : this.lastSecondTime as number,\n fps : _fps \n };\n Recorder.getInstance().recordFPS(_fpsRecord);\n this.lastSecondFrameID = this.frameID;\n this.lastSecondTime = performance.now();\n }\n\n private calFPSWithIdle(){\n let _fps = Math.round((this.frameID - (this.lastSecondFrameID as number))\n \/(performance.now() - (this.lastSecondTime as number)) * 1000);\/\/\u89e6\u53d1idle\u65f6\u4e0d\u8db31\u79d2\n if(_fps == 0){\/\/\u5982\u679c\u89e6\u53d1idle\u65f6\u521a\u597d\u8ba1\u7b97\u5b8c\u4e00\u6b21\u5e27\u7387\uff0c\u4e00\u4e2a\u65b0\u5e27\u90fd\u6ca1\u6709\uff0c\u5c31\u8df3\u8fc7\u8bb0\u5f55\n this.lastSecondFrameID = null;\n this.lastSecondTime = null;\n return;\n }\n \/\/console.log(\"fps:\",_fps)\n let _fpsRecord = {\n index : this.FPSRecordIndex++,\n startTime : this.lastSecondTime as number,\n fps : _fps \n };\n Recorder.getInstance().recordFPS(_fpsRecord);\n this.lastSecondFrameID = null;\n this.lastSecondTime = null;\n }\n\n\n private resetFrames(){\n this.frames = [];\n }\n}<\/code><\/pre>\n\n\n\n\u7528\u6237\u8f93\u5165\u76d1\u6d4b<\/h3>\n\n\n\nimport { Map } from \"mapbox-gl\";\nimport { Recorder } from \"..\/recorder\/recorder\";\n\nexport type UserActionType = \n | 'zoom' \n | 'drag' \n | 'rotate' \n | 'pitch'\n\n \/\/ \u7528\u6237\u64cd\u4f5c\u8bb0\u5f55\nexport interface UserActionRecord{\n type: UserActionType;\n startTime: number;\n endTime : number;\n details?: {\n fromZoom?: number;\n toZoom?: number;\n fromCenter?: [number, number];\n toCenter?: [number, number];\n fromBearing?: number;\n toBearing?: number;\n fromPitch?: number;\n toPitch?: number;\n };\n}\n\ninterface ActionBase{\n startTime: number;\n endTime : number;\n}\n\ninterface DragAction{\n base : ActionBase;\n fromCenter : [number,number];\n toCenter : [number,number];\n}\n\ninterface ZoomAction{\n base : ActionBase;\n fromZoom : number;\n toZoom : number;\n}\n\ninterface RotateAction{\n base : ActionBase;\n fromBearing : number;\n toBearing : number;\n}\n\ninterface PitchAction{\n base : ActionBase;\n fromPitch : number;\n toPitch : number;\n}\n\ninterface CurrentActions{\n drag : DragAction | null;\n zoom : ZoomAction | null;\n rotate : RotateAction | null;\n pitch : PitchAction | null;\n}\n\nexport class UserActionMetric{\n private map: Map | null = null;\n private currentActions : CurrentActions;\n private isMonitoring : boolean;\n\n constructor(){\n this.currentActions = {\n drag : null,\n zoom : null,\n rotate : null,\n pitch : null\n }\n this.isMonitoring = false;\n \n this.handleDragStart = this.handleDragStart.bind(this);\n this.handleDragMove = this.handleDragMove.bind(this);\n this.handleDragEnd = this.handleDragEnd.bind(this);\n this.handleZoomStart = this.handleZoomStart.bind(this);\n this.handleZoomMove = this.handleZoomMove.bind(this);\n this.handleZoomEnd = this.handleZoomEnd.bind(this); \n this.handleRotateStart = this.handleRotateStart.bind(this);\n this.handleRotateMove = this.handleRotateMove.bind(this);\n this.handleRotateEnd = this.handleRotateEnd.bind(this);\n this.handlePitchStart = this.handlePitchStart.bind(this);\n this.handlePitchMove = this.handlePitchMove.bind(this);\n this.handlePitchEnd = this.handlePitchEnd.bind(this);\n }\n\n public bindMap(map : Map){\n if (this.map !== null) {\n throw new Error(\"[UserActionMetric] bindMap() \u5df2\u7ecf\u7ed1\u5b9a\u8fc7 Map \u5b9e\u4f8b\u3002\");\n }\n if (!map) {\n throw new Error(\"[UserActionMetric] bindMap() \u9700\u8981\u4f20\u5165\u6709\u6548\u7684 Map \u5b9e\u4f8b\u3002\");\n }\n this.map = map;\n this.startMonitor();\n }\n\n public startMonitor(){\n if(!this.map)\n throw new Error(\"[UserActionMetric] startMonitor() \u672a\u7ed1\u5b9a\u6709\u6548map\u5bf9\u8c61\u3002\")\n if(this.isMonitoring){\n console.log(\"\u7528\u6237\u64cd\u4f5c\u5df2\u5728\u8bb0\u5f55\uff0c\u8bf7\u52ff\u591a\u6b21\u542f\u52a8\");\n return;\n }\n \/\/ \u6ce8\u518c\u6240\u6709\u4e8b\u4ef6\u76d1\u542c\n this.map.on('dragstart', this.handleDragStart);\n \/\/this.map.on('drag', this.handleDragMove);\n this.map.on('dragend', this.handleDragEnd);\n \n this.map.on('zoomstart', this.handleZoomStart);\n \/\/this.map.on('zoom', this.handleZoomMove);\n this.map.on('zoomend', this.handleZoomEnd);\n \n this.map.on('rotatestart', this.handleRotateStart);\n \/\/this.map.on('rotate', this.handleRotateMove);\n this.map.on('rotateend', this.handleRotateEnd);\n \n this.map.on('pitchstart', this.handlePitchStart);\n \/\/this.map.on('pitch', this.handlePitchMove);\n this.map.on('pitchend', this.handlePitchEnd);\n this.isMonitoring = true;\n\n console.log(\"[UserActionMetric] \u5f00\u59cb\u76d1\u63a7\u7528\u6237\u64cd\u4f5c\");\n }\n\n public stopMonitor(){\n if(!this.map)\n throw new Error(\"[UserActionMetric] stopMonitor() \u672a\u7ed1\u5b9a\u6709\u6548map\u5bf9\u8c61\u3002\")\n if(!this.isMonitoring){\n console.log(\"\u7528\u6237\u64cd\u4f5c\u672a\u5728\u8bb0\u5f55\uff0c\u65e0\u6cd5\u5173\u95ed\");\n return;\n }\n this.map.off('dragstart', this.handleDragStart);\n \/\/this.map.off('drag', this.handleDragMove);\n this.map.off('dragend', this.handleDragEnd);\n \n this.map.off('zoomstart', this.handleZoomStart);\n \/\/this.map.off('zoom', this.handleZoomMove);\n this.map.off('zoomend', this.handleZoomEnd);\n \n this.map.off('rotatestart', this.handleRotateStart);\n \/\/this.map.off('rotate', this.handleRotateMove);\n this.map.off('rotateend', this.handleRotateEnd);\n \n this.map.off('pitchstart', this.handlePitchStart);\n \/\/this.map.off('pitch', this.handlePitchMove);\n this.map.off('pitchend', this.handlePitchEnd);\n\n this.isMonitoring = false;\n }\n\n private handleDragStart(){\n \/\/ \u6539\u4e3a\u8b66\u544a\u800c\u4e0d\u662f\u629b\u51fa\u9519\u8bef\uff0c\u907f\u514d\u4e2d\u65ad\u5e94\u7528\n if (this.currentActions.drag) {\n console.warn(\"[UserActionMetric] \u6709\u672a\u7ed3\u675f\u7684Drag\u64cd\u4f5c\uff0c\u5c06\u8986\u76d6\u4e4b\u524d\u7684\u64cd\u4f5c\");\n this.currentActions.drag = null;\n }\n const center = this.map?.getCenter();\n if (!center) {\n throw new Error(\"\u65e0\u6cd5\u83b7\u53d6\u5730\u56fe\u4e2d\u5fc3\u70b9\");\n }\n const centerArray: [number, number] = [center.lng, center.lat];\n this.currentActions.drag = {\n base: {\n startTime: performance.now(),\n endTime: 0 \/\/ \u5148\u8bbe\u7f6e\u4e3a0\uff0c\u7ed3\u675f\u7684\u65f6\u5019\u518d\u8bbe\u7f6e\n },\n fromCenter: centerArray,\n toCenter: centerArray \/\/ \u521d\u59cb\u5316\u4e3a\u76f8\u540c\u503c\uff0c\u5728dragEnd\u65f6\u66f4\u65b0\n };\n }\n private handleDragMove(){\n \/\/\u5148\u4e0d\u8bb0\u4e1c\u897f\n }\n private handleDragEnd(){\n if(!this.currentActions.drag){\n throw new Error(\"[UserActionMetric] handleDragStart() \u4e0d\u5b58\u5728\u5df2\u5f00\u59cb\u7684Drag\u64cd\u4f5c\u3002\")\n }\n const center = this.map?.getCenter();\n if (!center) {\n throw new Error(\"\u65e0\u6cd5\u83b7\u53d6\u5730\u56fe\u4e2d\u5fc3\u70b9\");\n }\n const centerArray: [number, number] = [center.lng, center.lat];\n this.currentActions.drag.toCenter = centerArray;\n this.currentActions.drag.base.endTime = performance.now();\n \/\/ \u8bb0\u5f55\u81f3recorder\n let dragAction : UserActionRecord = {\n type: 'drag',\n startTime: this.currentActions.drag.base.startTime,\n endTime : this.currentActions.drag.base.endTime,\n details: {\n fromCenter: this.currentActions.drag.fromCenter,\n toCenter: this.currentActions.drag.toCenter,\n }\n }\n Recorder.getInstance().recordUserAction(dragAction);\n this.currentActions.drag = null;\n }\n\n private handleZoomStart() {\n if (this.currentActions.zoom) {\n console.warn(\"[UserActionMetric] \u6709\u672a\u7ed3\u675f\u7684Zoom\u64cd\u4f5c\uff0c\u5c06\u8986\u76d6\u4e4b\u524d\u7684\u64cd\u4f5c\");\n this.currentActions.zoom = null;\n }\n \n const zoom = this.map?.getZoom();\n if (zoom === undefined) {\n console.error(\"\u65e0\u6cd5\u83b7\u53d6\u5730\u56fe\u7f29\u653e\u7ea7\u522b\");\n return;\n }\n \n this.currentActions.zoom = {\n base: {\n startTime: performance.now(),\n endTime: 0\n },\n fromZoom: zoom,\n toZoom: zoom\n };\n }\n\n private handleZoomMove(){\n\n }\n\n private handleZoomEnd() {\n if (!this.currentActions.zoom) {\n console.warn(\"[UserActionMetric] \u4e0d\u5b58\u5728\u5df2\u5f00\u59cb\u7684Zoom\u64cd\u4f5c\");\n return;\n }\n \n const zoom = this.map?.getZoom();\n if (zoom === undefined) {\n console.error(\"\u65e0\u6cd5\u83b7\u53d6\u5730\u56fe\u7f29\u653e\u7ea7\u522b\");\n this.currentActions.zoom = null;\n return;\n }\n \n this.currentActions.zoom.toZoom = zoom;\n this.currentActions.zoom.base.endTime = performance.now();\n \n const zoomAction: UserActionRecord = {\n type: 'zoom',\n startTime: this.currentActions.zoom.base.startTime,\n endTime: this.currentActions.zoom.base.endTime,\n details: {\n fromZoom: this.currentActions.zoom.fromZoom,\n toZoom: this.currentActions.zoom.toZoom\n }\n };\n \n Recorder.getInstance().recordUserAction(zoomAction);\n this.currentActions.zoom = null;\n }\n\n private handleRotateStart() {\n if (this.currentActions.rotate) {\n console.warn(\"[UserActionMetric] \u6709\u672a\u7ed3\u675f\u7684Rotate\u64cd\u4f5c\uff0c\u5c06\u8986\u76d6\u4e4b\u524d\u7684\u64cd\u4f5c\");\n this.currentActions.rotate = null;\n }\n \n const bearing = this.map?.getBearing();\n if (bearing === undefined) {\n console.error(\"\u65e0\u6cd5\u83b7\u53d6\u5730\u56fe\u65b9\u4f4d\u89d2\");\n return;\n }\n \n this.currentActions.rotate = {\n base: {\n startTime: performance.now(),\n endTime: 0\n },\n fromBearing: bearing,\n toBearing: bearing\n };\n }\n\n private handleRotateMove(){\n\n }\n\n private handleRotateEnd() {\n if (!this.currentActions.rotate) {\n console.warn(\"[UserActionMetric] \u4e0d\u5b58\u5728\u5df2\u5f00\u59cb\u7684Rotate\u64cd\u4f5c\");\n return;\n }\n \n const bearing = this.map?.getBearing();\n if (bearing === undefined) {\n console.error(\"\u65e0\u6cd5\u83b7\u53d6\u5730\u56fe\u65b9\u4f4d\u89d2\");\n this.currentActions.rotate = null;\n return;\n }\n \n this.currentActions.rotate.toBearing = bearing;\n this.currentActions.rotate.base.endTime = performance.now();\n \n const rotateAction: UserActionRecord = {\n type: 'rotate',\n startTime: this.currentActions.rotate.base.startTime,\n endTime: this.currentActions.rotate.base.endTime,\n details: {\n fromBearing: this.currentActions.rotate.fromBearing,\n toBearing: this.currentActions.rotate.toBearing\n }\n };\n \n Recorder.getInstance().recordUserAction(rotateAction);\n this.currentActions.rotate = null;\n }\n\n\n private handlePitchStart() {\n if (this.currentActions.pitch) {\n console.warn(\"[UserActionMetric] \u6709\u672a\u7ed3\u675f\u7684Pitch\u64cd\u4f5c\uff0c\u5c06\u8986\u76d6\u4e4b\u524d\u7684\u64cd\u4f5c\");\n this.currentActions.pitch = null;\n }\n \n const pitch = this.map?.getPitch();\n if (pitch === undefined) {\n console.error(\"\u65e0\u6cd5\u83b7\u53d6\u5730\u56fe\u503e\u659c\u89d2\u5ea6\");\n return;\n }\n \n this.currentActions.pitch = {\n base: {\n startTime: performance.now(),\n endTime: 0\n },\n fromPitch: pitch,\n toPitch: pitch\n };\n }\n\n private handlePitchMove(){\n\n }\n\n private handlePitchEnd() {\n if (!this.currentActions.pitch) {\n console.warn(\"[UserActionMetric] \u4e0d\u5b58\u5728\u5df2\u5f00\u59cb\u7684Pitch\u64cd\u4f5c\");\n return;\n }\n \n const pitch = this.map?.getPitch();\n if (pitch === undefined) {\n console.error(\"\u65e0\u6cd5\u83b7\u53d6\u5730\u56fe\u503e\u659c\u89d2\u5ea6\");\n this.currentActions.pitch = null;\n return;\n }\n \n this.currentActions.pitch.toPitch = pitch;\n this.currentActions.pitch.base.endTime = performance.now();\n \n const pitchAction: UserActionRecord = {\n type: 'pitch',\n startTime: this.currentActions.pitch.base.startTime,\n endTime: this.currentActions.pitch.base.endTime,\n details: {\n fromPitch: this.currentActions.pitch.fromPitch,\n toPitch: this.currentActions.pitch.toPitch\n }\n };\n \n Recorder.getInstance().recordUserAction(pitchAction);\n this.currentActions.pitch = null;\n }\n\n public getMonitoringStatus(): boolean {\n return this.isMonitoring;\n }\n\n public resetCurrentActions(): void {\n this.currentActions = {\n drag: null,\n zoom: null,\n rotate: null,\n pitch: null\n };\n }\n}<\/code><\/pre>\n\n\n\n\u7528\u6237\u8f93\u5165\u6a21\u62df<\/h3>\n\n\n\nimport { Map } from \"mapbox-gl\";\n\nexport type SimulateInput = \n | 'zoom' \n | 'drag' \n | 'rotate' \n | 'pitch'\n\nexport interface SimulateActionConfig{ \/\/\u5e27\u6027\u80fd\u76d1\u6d4b\u7ec6\u5219\n actionSequenceID : number; \/\/\u6267\u884c\u961f\u5217ID\uff0c\u6839\u636eID\u8bf7\u6c42\u4e0d\u540c\u7684\u6a21\u62df\u64cd\u4f5c\u6570\u7ec4\n delayTime : number; \/\/\u5ef6\u8fdf\u65f6\u95f4\uff0c\u5728\u5730\u56feidle\u4e8b\u4ef6\u540e\u591a\u4e45\u5f00\u59cb\u6267\u884c\u4e0b\u4e00\u4e2a\u52a8\u4f5c\n durationTime : number; \/\/\u9ed8\u8ba4\u52a8\u4f5c\u7684\u6301\u7eed\u65f6\u95f4\n}\n\nexport interface SimulateAction{\n type : SimulateInput;\n wheelAmount? : number; \/\/zoom\u6a21\u62df\uff0c\u6eda\u8f6e\u7684\u8f6c\u52a8\u91cf\n centerPosition? : [number,number]; \/\/zoom\u6a21\u62df\uff0c\u7f29\u653e\u7684\u4e2d\u5fc3\u70b9\n startPosition? : [number,number]; \/\/drag\u3001rotate\u3001pitch\u901a\u7528\uff0c\u76f8\u5bf9\u4f4d\u7f6e \n endPosition? : [number,number]; \/\/drag\u3001rotate\u3001pitch\u901a\u7528\uff0c\u76f8\u5bf9\u4f4d\u7f6e\n duration? : number; \/\/\u52a8\u4f5c\u6301\u7eed\u7684\u65f6\u95f4(ms)\n}\n\nexport class ActionSimulator{\n private map : Map | null = null;\n private config : SimulateActionConfig;\n private currentActionIndex : number; \/\/\u5f53\u524d\u6a21\u62df\u64cd\u4f5c\u7684\u5e8f\u53f7\n private actionSequence : SimulateAction[];\/\/\u6a21\u62df\u64cd\u4f5c\u5e8f\u5217\n private actionSequenceNum : number;\/\/\u6a21\u62df\u64cd\u4f5c\u603b\u6570\n private delayTime : number;\/\/\u5ef6\u8fdf\u65f6\u95f4\n private maxFPS : number;\/\/\u6700\u5927\u5e27\u7387\uff0c\u4e0e\u6a21\u62df\u64cd\u4f5c\u7684\u65f6\u95f4\u63a7\u5236\u6709\u5173\u3002\n private perFlameTime : number;\/\/\u6bcf\u4e00\u5e27\u7406\u8bba\u95f4\u9694\uff08ms\uff09\n private durationTime : number;\/\/\u9ed8\u8ba4\u52a8\u4f5c\u6301\u7eed\u7684\u65f6\u95f4(ms)\n\n constructor(config:SimulateActionConfig , maxFPS : number){\n this.config = config;\n this.currentActionIndex = 0;\n this.actionSequence = this.requestActions(this.config.actionSequenceID);\n this.actionSequenceNum = this.actionSequence.length;\n this.delayTime = this.config.delayTime;\n this.executeNextAction = this.executeNextAction.bind(this);\n this.executeAction = this.executeAction.bind(this);\n this.maxFPS = maxFPS;\n this.perFlameTime = 1000 \/ this.maxFPS;\n this.durationTime = config.durationTime;\n }\n \n \/\/ \u8bf7\u6c42\u6a21\u62df\u64cd\u4f5c\u961f\u5217\uff0c\u76ee\u524d\u5148\u6a21\u62df\n private requestActions(actionSequenceID:number):SimulateAction[]{\n return actionSequence;\n }\n\n public bindMap(map:Map){\n if (this.map !== null) {\n throw new Error(\"[actionSimulator] bindMap() \u5df2\u7ecf\u7ed1\u5b9a\u8fc7 Map \u5b9e\u4f8b\u3002\");\n }\n if (!map) {\n throw new Error(\"[actionSimulator] bindMap() \u9700\u8981\u4f20\u5165\u6709\u6548\u7684 Map \u5b9e\u4f8b\u3002\");\n }\n this.map = map;\n this.startSimulate();\n }\n\n public startSimulate(){\n console.log(\"[ActionSimulator] \u5f00\u59cb\u6a21\u62df\u7528\u6237\u64cd\u4f5c\");\n if(!this.map)\n throw new Error(\"[actionSimulator] startSimulate() \u65e0\u6709\u6548\u7684 Map \u5b9e\u4f8b\u3002\");\n this.map.on('idle',this.executeNextAction);\n }\n\n private executeNextAction(){\n \/\/console.log(\"idle,excute next action\");\n setTimeout(() => {\n if(this.currentActionIndex>=this.actionSequenceNum){\n this.map?.off('idle',this.executeNextAction);\n return;\n }\n this.executeAction(this.currentActionIndex++);\n }, this.delayTime);\n }\n\n private executeAction(actionIndex : number){\n let targetAction = this.actionSequence[actionIndex];\n switch (targetAction.type) {\n case 'zoom':\n this.executeZoom(targetAction);\n break;\n case 'drag':\n this.executeDrag(targetAction);\n break;\n case 'rotate':\n this.executeRotate(targetAction);\n break;\n case 'pitch':\n this.executePitch(targetAction);\n break;\n default:\n \/\/ \u5904\u7406\u672a\u77e5\u7c7b\u578b\u6216\u63d0\u4f9b\u7c7b\u578b\u4fdd\u62a4\n const exhaustiveCheck: never = targetAction.type;\n throw new Error(`\u672a\u77e5\u7684\u64cd\u4f5c\u7c7b\u578b: ${targetAction.type}`);\n }\n }\n\n private executeZoom(action:SimulateAction){\n if (!this.map || action.wheelAmount === undefined) return;\n const canvas = this.map.getCanvas();\n const durationTime = action.duration ? action.duration : this.durationTime;\n const totalSteps = durationTime \/ this.perFlameTime;\n \/\/ \u83b7\u53d6\u753b\u5e03\u76f8\u5bf9\u4e8e\u89c6\u53e3\u7684\u4f4d\u7f6e\u548c\u5c3a\u5bf8\n const rect = canvas.getBoundingClientRect();\n \/\/ \u8ba1\u7b97\u753b\u5e03\u4e2d\u5fc3\u70b9\u5750\u6807\uff08\u76f8\u5bf9\u4e8e\u89c6\u53e3\uff09\n const clientX = rect.left + rect.width * (action.centerPosition?action.centerPosition?.[0] : 0.5);\n const clientY = rect.top + rect.height * (action.centerPosition?action.centerPosition?.[1] : 0.5);\n let step = 0;\n const wheelAmountStep = action.wheelAmount \/ totalSteps;\n\n const interval = setInterval(() => {\n if (step < totalSteps) {\n const wheelEvent = new WheelEvent('wheel', {\n bubbles: true,\n cancelable: true,\n deltaY: wheelAmountStep,\n clientX: clientX,\n clientY: clientY,\n deltaMode: WheelEvent.DOM_DELTA_PIXEL,\n });\n canvas.dispatchEvent(wheelEvent);\n step++;\n } else {\n clearInterval(interval); \/\/ \u7ed3\u675f\u65f6\u6e05\u9664interval\n }\n }, this.perFlameTime);\n }\n\n private executeDrag(action:SimulateAction){\n if (!this.map || action.startPosition === undefined || action.endPosition === undefined) return;\n const canvas = this.map.getCanvas();\n const durationTime = action.duration ? action.duration : this.durationTime;\n const totalSteps = durationTime \/ this.perFlameTime;\n \/\/ \u83b7\u53d6\u753b\u5e03\u76f8\u5bf9\u4e8e\u89c6\u53e3\u7684\u4f4d\u7f6e\u548c\u5c3a\u5bf8\n const rect = canvas.getBoundingClientRect();\n \/\/ \u8ba1\u7b97\u753b\u5e03\u8d77\u59cb\u70b9\u5750\u6807\uff08\u76f8\u5bf9\u4e8e\u89c6\u53e3\uff09\n const startX = rect.left + rect.width * (action.startPosition?action.startPosition?.[0] : 0.5);\n const startY = rect.top + rect.height * (action.startPosition?action.startPosition?.[1] : 0.5);\n const endX = rect.left + rect.width * (action.endPosition?action.endPosition?.[0] : 0.5);\n const endY = rect.top + rect.height * (action.endPosition?action.endPosition?.[1] : 0.5);\n\n let step = 0;\n \/\/ 1. \u9f20\u6807\u6309\u4e0b\n const mousedown = new MouseEvent('mousedown', {\n bubbles: true,\n cancelable: true,\n clientX: startX,\n clientY: startY,\n button: 0,\n buttons: 1\n });\n canvas.dispatchEvent(mousedown);\n\n \/\/ 2. \u62d6\u62fd\u79fb\u52a8\u8fc7\u7a0b\n const interval = setInterval(() => {\n step++;\n if (step <=totalSteps) {\n const progress = step \/ totalSteps;\n const currentX = startX + (endX - startX) * progress;\n const currentY = startY + (endY - startY) * progress;\n const mouseMoveEvent = new MouseEvent('mousemove', {\n bubbles: true,\n clientX: currentX,\n clientY: currentY,\n button: 0,\n buttons: 1\n });\n canvas.dispatchEvent(mouseMoveEvent);\n } else {\n \/\/ 3. \u9f20\u6807\u91ca\u653e\n const mouseup = new MouseEvent('mouseup', {\n bubbles: true,\n clientX: endX,\n clientY: endY,\n button: 0,\n buttons: 0\n });\n canvas.dispatchEvent(mouseup);\n \/\/console.log(\"\u677e\u5f00\u9f20\u6807\u5de6\u952e\");\n clearInterval(interval); \/\/ \u7ed3\u675f\u65f6\u6e05\u9664interval\n }\n }, this.perFlameTime);\n }\n \n private executeRotate(action:SimulateAction){\n if (!this.map || action.startPosition === undefined || action.endPosition === undefined) return;\n const canvas = this.map.getCanvas();\n const durationTime = action.duration ? action.duration : this.durationTime;\n const totalSteps = durationTime \/ this.perFlameTime;\n \/\/ \u83b7\u53d6\u753b\u5e03\u76f8\u5bf9\u4e8e\u89c6\u53e3\u7684\u4f4d\u7f6e\u548c\u5c3a\u5bf8\n const rect = canvas.getBoundingClientRect();\n \/\/ \u8ba1\u7b97\u753b\u5e03\u8d77\u59cb\u70b9\u5750\u6807\uff08\u76f8\u5bf9\u4e8e\u89c6\u53e3\uff09\n const startX = rect.left + rect.width * (action.startPosition?action.startPosition?.[0] : 0.5);\n const endX = rect.left + rect.width * (action.endPosition?action.endPosition?.[0] : 0.5);\n\n let step = 0;\n \/\/ 1. \u9f20\u6807\u6309\u4e0b\n const mousedown = new MouseEvent('mousedown', {\n bubbles: true,\n cancelable: true,\n clientX: startX,\n clientY: rect.height\/2, \/\/\u65cb\u8f6c\uff0c\u5c4f\u853dy\u8f74\n button: 2,\n buttons: 2\n });\n canvas.dispatchEvent(mousedown);\n\n \/\/ 2. \u62d6\u62fd\u79fb\u52a8\u8fc7\u7a0b\n const interval = setInterval(() => {\n step++;\n if (step <=totalSteps) {\n const progress = step \/ totalSteps;\n const currentX = startX + (endX - startX) * progress;\n const currentY = rect.height\/2; \/\/\u65cb\u8f6c\uff0c\u5c4f\u853dy\u8f74\n const mouseMoveEvent = new MouseEvent('mousemove', {\n bubbles: true,\n clientX: currentX,\n clientY: currentY,\n button: 2,\n buttons: 2\n });\n canvas.dispatchEvent(mouseMoveEvent);\n } else {\n \/\/ 3. \u9f20\u6807\u91ca\u653e\n const mouseup = new MouseEvent('mouseup', {\n bubbles: true,\n clientX: endX,\n clientY: rect.height\/2, \/\/\u65cb\u8f6c\uff0c\u5c4f\u853dy\u8f74\n button: 0,\n buttons: 0\n });\n \/\/console.log(\"\u677e\u5f00\u9f20\u6807\u53f3\u952e\");\n canvas.dispatchEvent(mouseup);\n \/\/\u6643\u52a8\u4e00\u4e0b\uff0c\u9632\u6b62\u4e0d\u89e6\u53d1idle\n const mouseMoveEvent = new MouseEvent('mousemove', {\n bubbles: true,\n clientX: 0,\n clientY: 0,\n button: 0,\n buttons: 0\n });\n canvas.dispatchEvent(mouseMoveEvent);\n clearInterval(interval); \/\/ \u7ed3\u675f\u65f6\u6e05\u9664interval\n }\n }, this.perFlameTime);\n }\n\n private executePitch(action:SimulateAction){\n if (!this.map || action.startPosition === undefined || action.endPosition === undefined) return;\n const canvas = this.map.getCanvas();\n const durationTime = action.duration ? action.duration : this.durationTime;\n const totalSteps = durationTime \/ this.perFlameTime;\n \/\/ \u83b7\u53d6\u753b\u5e03\u76f8\u5bf9\u4e8e\u89c6\u53e3\u7684\u4f4d\u7f6e\u548c\u5c3a\u5bf8\n const rect = canvas.getBoundingClientRect();\n \/\/ \u8ba1\u7b97\u753b\u5e03\u8d77\u59cb\u70b9\u5750\u6807\uff08\u76f8\u5bf9\u4e8e\u89c6\u53e3\uff09\n const startY = rect.top + rect.height * (action.startPosition?action.startPosition?.[1] : 0.5);\n const endY = rect.top + rect.height * (action.endPosition?action.endPosition?.[1] : 0.5);\n\n let step = 0;\n \/\/ 1. \u9f20\u6807\u6309\u4e0b\n const mousedown = new MouseEvent('mousedown', {\n bubbles: true,\n cancelable: true,\n clientX: rect.width\/2, \/\/ \u4fef\u4ef0\uff0c\u5c4f\u853dx\u8f74\n clientY: startY,\n button: 2,\n buttons: 2\n });\n canvas.dispatchEvent(mousedown);\n\n \/\/ 2. \u62d6\u62fd\u79fb\u52a8\u8fc7\u7a0b\n const interval = setInterval(() => {\n step++;\n if (step <=totalSteps) {\n const progress = step \/ totalSteps;\n const currentX = rect.width\/2; \/\/ \u4fef\u4ef0\uff0c\u5c4f\u853dx\u8f74\n const currentY = startY + (endY - startY) * progress;\n const mouseMoveEvent = new MouseEvent('mousemove', {\n bubbles: true,\n clientX: currentX,\n clientY: currentY,\n button: 2,\n buttons: 2\n });\n canvas.dispatchEvent(mouseMoveEvent);\n } else {\n \/\/ 3. \u9f20\u6807\u91ca\u653e\n const mouseup = new MouseEvent('mouseup', {\n bubbles: true,\n clientX: rect.width\/2, \/\/ \u4fef\u4ef0\uff0c\u5c4f\u853dx\u8f74\n clientY: endY, \/\/\u65cb\u8f6c\uff0c\u5c4f\u853dy\u8f74\n button: 0,\n buttons: 0\n });\n \/\/console.log(\"\u677e\u5f00\u9f20\u6807\u53f3\u952e\");\n \/\/\u6643\u52a8\u4e00\u4e0b\uff0c\u9632\u6b62\u4e0d\u89e6\u53d1idle\n canvas.dispatchEvent(mouseup);\n const mouseMoveEvent = new MouseEvent('mousemove', {\n bubbles: true,\n clientX: 0,\n clientY: 0,\n button: 0,\n buttons: 0\n });\n canvas.dispatchEvent(mouseMoveEvent);\n clearInterval(interval); \/\/ \u7ed3\u675f\u65f6\u6e05\u9664interval\n }\n }, this.perFlameTime);\n }\n}\n\nconst actionSequence : SimulateAction[] = [\n {\n type : \"zoom\",\n wheelAmount : -200, \n centerPosition: [0.5,0.5],\n duration : 2000,\n },\n {\n type : \"drag\",\n startPosition : [0.2,0.2],\n endPosition : [0.8,0.8],\n duration : 2000,\n },\n {\n type : \"drag\",\n startPosition : [0.5,0.5],\n endPosition : [0.3,0.6],\n duration : 2000,\n },\n {\n type : \"rotate\",\n startPosition : [0.5,0.5],\n endPosition : [0.6,0.5],\n duration : 2000,\n },\n {\n type : \"pitch\",\n startPosition : [0.5,0.5],\n endPosition : [0.5,0.4],\n duration : 2000,\n },\n {\n type : \"rotate\",\n startPosition : [0.5,0.5],\n endPosition : [0.6,0.5],\n duration : 2000,\n },\n {\n type : \"pitch\",\n startPosition : [0.5,0.5],\n endPosition : [0.5,0.4],\n duration : 2000,\n },\n]<\/code><\/pre>\n\n\n\n\u5730\u56fe\u72b6\u6001\u76d1\u63a7<\/h3>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u987a\u7740\u4e0a\u4e00\u7bc7\u8bbe\u8ba1\u601d\u8def\uff0c\u5f00\u59cb\u505ademo\u3002 mapbox\u7248\u672c\u9009\u62e92.15\uff0c\u5c3d\u91cf\u4e0d\u4fb5\u5165\u5f0f\u4fee\u6539\u6e90\u7801\u3002\u9879\u76ee\u9009\u7528ts+webpack\u6846\u67b6\u3002 \u9879\u76ee …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1457","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gislxz.com\/index.php\/wp-json\/wp\/v2\/posts\/1457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gislxz.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gislxz.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gislxz.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gislxz.com\/index.php\/wp-json\/wp\/v2\/comments?post=1457"}],"version-history":[{"count":7,"href":"https:\/\/www.gislxz.com\/index.php\/wp-json\/wp\/v2\/posts\/1457\/revisions"}],"predecessor-version":[{"id":1468,"href":"https:\/\/www.gislxz.com\/index.php\/wp-json\/wp\/v2\/posts\/1457\/revisions\/1468"}],"wp:attachment":[{"href":"https:\/\/www.gislxz.com\/index.php\/wp-json\/wp\/v2\/media?parent=1457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gislxz.com\/index.php\/wp-json\/wp\/v2\/categories?post=1457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gislxz.com\/index.php\/wp-json\/wp\/v2\/tags?post=1457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}