feat: initialize mini program map engine

miniprogram/pages/map/map.ts

@@ -0,0 +1,173 @@
+import { MapEngine, type MapEngineStageRect, type MapEngineViewState } from '../../engine/map/mapEngine'
+
+const INTERNAL_BUILD_VERSION = 'map-build-58'
+
+let mapEngine: MapEngine | null = null
+
+function getFallbackStageRect(): MapEngineStageRect {
+  const systemInfo = wx.getSystemInfoSync()
+  const width = Math.max(320, systemInfo.windowWidth - 20)
+  const height = Math.max(280, Math.floor(systemInfo.windowHeight * 0.66))
+
+  return {
+    width,
+    height,
+    left: 10,
+    top: 0,
+  }
+}
+
+Page({
+  data: {} as MapEngineViewState,
+
+  onLoad() {
+    mapEngine = new MapEngine(INTERNAL_BUILD_VERSION, {
+      onData: (patch) => {
+        this.setData(patch)
+      },
+    })
+
+    this.setData(mapEngine.getInitialData())
+  },
+
+  onReady() {
+    this.measureStageAndCanvas()
+  },
+
+  onUnload() {
+    if (mapEngine) {
+      mapEngine.destroy()
+      mapEngine = null
+    }
+  },
+
+  measureStageAndCanvas() {
+    const page = this
+    const applyStage = (rawRect?: Partial<WechatMiniprogram.BoundingClientRectCallbackResult>) => {
+      const fallbackRect = getFallbackStageRect()
+      const rect: MapEngineStageRect = {
+        width: rawRect && typeof rawRect.width === 'number' ? rawRect.width : fallbackRect.width,
+        height: rawRect && typeof rawRect.height === 'number' ? rawRect.height : fallbackRect.height,
+        left: rawRect && typeof rawRect.left === 'number' ? rawRect.left : fallbackRect.left,
+        top: rawRect && typeof rawRect.top === 'number' ? rawRect.top : fallbackRect.top,
+      }
+
+      const currentEngine = mapEngine
+      if (!currentEngine) {
+        return
+      }
+
+      currentEngine.setStage(rect)
+
+      const canvasQuery = wx.createSelectorQuery().in(page)
+      canvasQuery.select('#mapCanvas').fields({ node: true, size: true })
+      canvasQuery.exec((canvasRes) => {
+        const canvasRef = canvasRes[0] as any
+        if (!canvasRef || !canvasRef.node) {
+          page.setData({
+            statusText: `WebGL 引擎初始化失败 (${INTERNAL_BUILD_VERSION})`,
+          })
+          return
+        }
+
+        const dpr = wx.getSystemInfoSync().pixelRatio || 1
+        try {
+          currentEngine.attachCanvas(canvasRef.node, rect.width, rect.height, dpr)
+        } catch (error) {
+          page.setData({
+            statusText: `WebGL 初始化失败 (${INTERNAL_BUILD_VERSION})`,
+          })
+        }
+      })
+    }
+
+    const query = wx.createSelectorQuery().in(page)
+    query.select('.map-stage').boundingClientRect()
+    query.exec((res) => {
+      const rect = res[0] as WechatMiniprogram.BoundingClientRectCallbackResult | undefined
+      applyStage(rect)
+    })
+  },
+
+  handleTouchStart(event: WechatMiniprogram.TouchEvent) {
+    if (mapEngine) {
+      mapEngine.handleTouchStart(event)
+    }
+  },
+
+  handleTouchMove(event: WechatMiniprogram.TouchEvent) {
+    if (mapEngine) {
+      mapEngine.handleTouchMove(event)
+    }
+  },
+
+  handleTouchEnd(event: WechatMiniprogram.TouchEvent) {
+    if (mapEngine) {
+      mapEngine.handleTouchEnd(event)
+    }
+  },
+
+  handleTouchCancel() {
+    if (mapEngine) {
+      mapEngine.handleTouchCancel()
+    }
+  },
+
+  handleRecenter() {
+    if (mapEngine) {
+      mapEngine.handleRecenter()
+    }
+  },
+
+  handleRotateStep() {
+    if (mapEngine) {
+      mapEngine.handleRotateStep()
+    }
+  },
+
+  handleRotationReset() {
+    if (mapEngine) {
+      mapEngine.handleRotationReset()
+    }
+  },
+
+  handleSetManualMode() {
+    if (mapEngine) {
+      mapEngine.handleSetManualMode()
+    }
+  },
+
+  handleSetNorthUpMode() {
+    if (mapEngine) {
+      mapEngine.handleSetNorthUpMode()
+    }
+  },
+
+  handleSetHeadingUpMode() {
+    if (mapEngine) {
+      mapEngine.handleSetHeadingUpMode()
+    }
+  },
+
+  handleAutoRotateCalibrate() {
+    if (mapEngine) {
+      mapEngine.handleAutoRotateCalibrate()
+    }
+  },
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+