Add animated orienteering course overlays and labels

miniprogram/pages/map/map.ts

@@ -191,8 +191,10 @@ Page({
 
       const canvasQuery = wx.createSelectorQuery().in(page)
       canvasQuery.select('#mapCanvas').fields({ node: true, size: true })
+      canvasQuery.select('#routeLabelCanvas').fields({ node: true, size: true })
       canvasQuery.exec((canvasRes) => {
         const canvasRef = canvasRes[0] as any
+        const labelCanvasRef = canvasRes[1] as any
         if (!canvasRef || !canvasRef.node) {
           page.setData({
             statusText: `WebGL 寮曟搸鍒濆鍖栧け璐?(${INTERNAL_BUILD_VERSION})`,
@@ -202,7 +204,13 @@ Page({
 
         const dpr = wx.getSystemInfoSync().pixelRatio || 1
         try {
-          currentEngine.attachCanvas(canvasRef.node, rect.width, rect.height, dpr)
+          currentEngine.attachCanvas(
+            canvasRef.node,
+            rect.width,
+            rect.height,
+            dpr,
+            labelCanvasRef && labelCanvasRef.node ? labelCanvasRef.node : undefined,
+          )
         } catch (error) {
           page.setData({
             statusText: `WebGL 鍒濆鍖栧け璐?(${INTERNAL_BUILD_VERSION})`,
@@ -369,6 +377,8 @@ Page({
 
 
 
+
+
 
 
 

miniprogram/pages/map/map.wxml

@@ -13,6 +13,12 @@
         canvas-id="mapCanvas"
         class="map-canvas map-canvas--base"
       ></canvas>
+      <canvas
+        id="routeLabelCanvas"
+        type="2d"
+        canvas-id="routeLabelCanvas"
+        class="map-canvas map-canvas--labels"
+      ></canvas>
     </view>
 
     <view class="map-stage__crosshair"></view>
@@ -283,3 +289,5 @@
 
 
 
+
+

miniprogram/pages/map/map.wxss

@@ -30,6 +30,11 @@
   z-index: 1;
 }
 
+.map-canvas--labels {
+  z-index: 2;
+  pointer-events: none;
+}
+
 .map-stage__crosshair {
   position: absolute;
   left: 50%;
@@ -974,5 +979,6 @@
 
 
 
+