1

src/views/HomeView.vue

@@ -32,6 +32,11 @@
         label="show fog"
         size="large"
       />
+      <el-checkbox
+        v-model="isAutoRotate"
+        label="auto rotate"
+        size="large"
+      />
     </div>
   </div>
 </template>
@@ -54,12 +59,8 @@ onMounted(() => {
   map = new mapboxgl.Map({
     container: 'map', // container ID
     center: [2.294444, 48.858056], // starting position [lng, lat]
-    zoom: 16, // starting zoom
-    pitch: 65,
-    maxBounds: [
-      [2.25, 48.80, ], // 西南角
-      [2.35, 48.92, ], // 东北角
-    ]
+    zoom: 15.6, // starting zoom
+    pitch: 72,
   })
   map.on('style.load', () => {
     // 隐藏标签。
@@ -77,22 +78,6 @@ onMounted(() => {
     })
   })
 
-  // todo: 自动旋转开关
-  // map.on('idle', () => {
-  //   let lastFrameTime = 0.0
-  //   let animationTotalTime = 0.0
-  //   const initialBearing = map.getBearing()
-
-  //   function frameTask(timeStamp) {
-  //     animationTotalTime += ((timeStamp - lastFrameTime) / 1000.0)
-  //     const rotation = initialBearing + animationTotalTime * 2.0
-  //     map.setBearing(rotation % 360)
-  //     lastFrameTime = timeStamp
-  //     window.requestAnimationFrame(frameTask)
-  //   }
-  //   window.requestAnimationFrame(frameTask)
-  // })
-
   map.on('click', (e) => {
     console.log(e.lngLat.wrap())
   })
@@ -352,6 +337,32 @@ watch(isShowFog, (v) => {
   }
 })
 
+// 自动旋转开关
+const isAutoRotate = ref(false)
+let lastFrameTime = 0.0
+let animationTotalTime = 0.0
+let initialBearing = null
+
+function frameTask(timeStamp) {
+  if (isAutoRotate.value) {
+    animationTotalTime += ((timeStamp - lastFrameTime) / 1000.0)
+    const rotation = initialBearing + animationTotalTime * 2.0
+    map.setBearing(rotation % 360)
+    lastFrameTime = timeStamp
+    window.requestAnimationFrame(frameTask)
+  }
+}
+
+watch(isAutoRotate, (v) => {
+  if (v) {
+    lastFrameTime = 0.0
+    animationTotalTime = 0.0
+    initialBearing = map.getBearing()
+    window.requestAnimationFrame(frameTask)
+  }
+})
+
+
 
 
 
@@ -393,6 +404,7 @@ watch(isShowFog, (v) => {
     padding: 10px;
     display: flex;
     flex-direction: column;
+    background-color: rgba(255, 255, 255, 0.5);
   }
 }
 </style>