处理大尺寸地图卡顿问题

package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
+    "autofit.js": "^3.2.1",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",

postcss.config.js

@@ -1,10 +1,10 @@
-module.exports = {
+// module.exports = {
-  plugins: {
+//   plugins: {
-    "postcss-px-to-viewport": {
+//     "postcss-px-to-viewport": {
-      viewportWidth: 1920,
+//       // viewportWidth: 1920,
 
 //       viewportWidth: 6656,
 //       viewportHeight: 1792,
-    },
+//     },
-  },
+//   },
-};
+// };

src/App.vue

@@ -7,7 +7,7 @@
 
 <script>
 import ThemePicker from "@/components/ThemePicker";
-
+import autofit from "autofit.js";
 export default {
   name: "App",
   components: { ThemePicker },
@@ -25,6 +25,14 @@ export default {
   },
   methods: {},
   created() {},
+  mounted() {
+    autofit.init({
+      designHeight: 1792,
+      designWidth: 6656,
+      renderDom: "#app",
+      resize: true,
+    });
+  },
 };
 </script>
 <style lang="scss" scoped>

src/views/car.vue

@@ -582,8 +582,10 @@ export default {
 .albuginea {
   cursor: pointer;
   position: absolute;
-  top: 103px;
+  // top: 103px;
-  left: calc(554px + 24px);
+  top: 15%;
+  // left: calc(554px + 24px);
+  left: 33%;
   z-index: 100;
   width: 80px;
   height: 32px;
@@ -601,7 +603,8 @@ export default {
 }
 .input-search {
   position: absolute;
-  top: 103px;
+  // top: 103px;
+  top: 15%;
   left: 50%;
   transform: translateX(-50%);
   z-index: 100;

src/views/carInfo.vue

@@ -392,9 +392,11 @@ export default {
 .albuginea {
   cursor: pointer;
   position: absolute;
-  top: 103px;
+  // top: 103px;
+  top: 15%;
+  left: 33%;
 
-  left: calc(554px + 24px);
+  // left: calc(554px + 24px);
   z-index: 100;
   width: 80px;
   height: 32px;
@@ -408,14 +410,16 @@ export default {
   color: #ffffff;
 }
 .backBtn {
-  top: 145px;
+  // top: 145px;
+  top: 17%;
 }
 .albuginea:hover {
   background: #0084ff;
 }
 .container-top {
   position: fixed;
-  top: 100px;
+  // top: 100px;
+  top: 15%;
   left: 50%;
   transform: translateX(-50%);
   z-index: 100;

src/views/index.vue

@@ -29,15 +29,7 @@ export default {
     return {
       map: null,
       options: {
-        scene: {
+        scene: {},
-          center: {
-            lat: 29.689932,
-            lng: 120.127589,
-            alt: 146960.4,
-            heading: 9.5,
-            pitch: -46.2,
-          },
-        },
         control: {
           contextmenu: { preventDefault: false, hasDefault: false },
         },
@@ -89,6 +81,25 @@ export default {
     MarsMap,
   },
   created() {
+    const screenWidth = window.innerWidth;
+    console.log(screenWidth);
+    if (screenWidth > 3000) {
+      this.options.scene.center = {
+        lat: 28.990656,
+        lng: 119.98416,
+        alt: 238186.6,
+        heading: 9.5,
+        pitch: -46.2,
+      };
+    } else {
+      this.options.scene.center = {
+        lat: 29.689932,
+        lng: 120.127589,
+        alt: 146960.4,
+        heading: 9.5,
+        pitch: -46.2,
+      };
+    }
     this.getAreaData();
   },
   methods: {
@@ -130,6 +141,7 @@ export default {
     },
     mapLoad(map) {
       this.map = map;
+
       if (process.env.NODE_ENV === "production") {
         map.setSceneOptions({
           cameraController: {
@@ -140,6 +152,7 @@ export default {
           },
         });
       }
+
       //创建地图图层
       this.createMapLayer();
       //六区

vue.config.js

@@ -18,8 +18,8 @@ module.exports = {
   // 部署生产环境和开发环境下的URL。
   // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
   // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-  // publicPath: process.env.NODE_ENV === "production" ? "/demo/yunkunPc" : "/",
+  publicPath: process.env.NODE_ENV === "production" ? "/demo/yunkunPc" : "/",
-  publicPath: process.env.NODE_ENV === "production" ? "/yunkunPc" : "/",
+  // publicPath: process.env.NODE_ENV === "production" ? "/yunkunPc" : "/",
   // publicPath: process.env.NODE_ENV === "production" ? "/yunkunPc-big" : "/",
   // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和 baseUrl 的生产环境路径一致）（默认dist）
   outputDir: "dist",