首页适配

src/App.vue

@@ -7,7 +7,7 @@
 
 <script>
 import ThemePicker from "@/components/ThemePicker";
-// import autofit from "autofit.js";
+import autofit from "autofit.js";
 export default {
   name: "App",
   components: { ThemePicker },
@@ -26,13 +26,12 @@ export default {
   methods: {},
   created() {},
   mounted() {
-    // console.log(window.innerWidth);
+    autofit.init({
-    // autofit.init({
+      designHeight: window.innerHeight,
-    //   designHeight: window.innerHeight,
+      designWidth: 6656,
-    //   designWidth: window.innerWidth,
+      renderDom: "#app",
-    //   renderDom: "#app",
+      resize: true,
-    //   resize: true,
+    });
-    // });
   },
 };
 </script>

src/assets/styles/ItemIndex.scss

@@ -0,0 +1,181 @@
+.map-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.mars-four-color {
+  position: relative;
+  cursor: pointer;
+}
+.four-color_name {
+  width: 100%;
+  background: url("../images/areaName.png");
+  background-size: 100% 100%;
+  font-weight: bold;
+  color: #fff250;
+  text-align: center;
+  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
+}
+
+.screen-list {
+  position: absolute;
+  top: 0;
+  & > div {
+    display: none;
+  }
+  .lable-value {
+    background: url("../images/screen-list.png");
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    .lable-data {
+      width: 50%;
+      color: #612500;
+      font-weight: bold;
+    }
+    .value-data {
+      flex: 1;
+      text-align: center;
+
+      color: #f7c75d;
+      font-family: "DIN-Regular-2";
+      span {
+        font-size: 16px;
+        color: #ffffff;
+      }
+    }
+  }
+  & > div:last-child {
+    margin: 0;
+  }
+}
+
+.multiple {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-image: url("../images/multipleList.png");
+  background-size: 100% 100%;
+  .checkbox {
+    cursor: pointer;
+    text-align: center;
+    color: #ffffff;
+    background: linear-gradient(180deg, #072853 0%, #0079ff 100%);
+    border: 1px solid #0084ff;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+  }
+  .checked {
+    opacity: 0.5;
+  }
+  .btn-icon {
+    width: 15px;
+    height: 16px;
+    margin-right: 10px;
+  }
+}
+
+@media screen and (max-width: 1920px) {
+  .mars-four-color {
+    top: -50px;
+    left: -50px;
+  }
+  .four-color_name {
+    width: 100px;
+    height: 100px;
+    font-size: 16px;
+    line-height: 37px;
+  }
+  .screen-list {
+    width: 233px;
+    right: -235px;
+    .lable-value {
+      height: 41px;
+      width: 234px;
+      margin-bottom: 3px;
+      padding: 0 6px;
+      .lable-data,
+      span {
+        font-size: 16px;
+      }
+      .value-data {
+        font-size: 20px;
+      }
+    }
+  }
+  .multiple {
+    width: 880px;
+    height: 87px;
+    padding: 0 180px;
+
+    .checkbox {
+      width: 112px;
+      height: 32px;
+      line-height: 32px;
+      font-size: 14px;
+      border-radius: 16px;
+    }
+    .btn-icon {
+      width: 15px;
+      height: 16px;
+      margin-right: 10px;
+    }
+  }
+}
+@media screen and (min-width: 2500px) {
+  .mars-four-color {
+    top: -80px;
+    left: -75px;
+  }
+  .four-color_name {
+    width: 150px;
+    height: 155px;
+    font-size: 24px;
+    line-height: 55px;
+  }
+  .screen-list {
+    width: 330px;
+    right: -340px;
+
+    .lable-value {
+      height: 65px;
+      width: 100%;
+      margin-bottom: 10px;
+      padding: 0 12px;
+      .lable-data,
+      span {
+        font-size: 24px;
+      }
+      .value-data {
+        font-size: 44px;
+      }
+    }
+  }
+  .multiple {
+    width: 1800px;
+    height: 178px;
+    padding: 0 360px;
+    .checkbox {
+      width: 228px;
+      height: 64.8px;
+      line-height: 64.8px;
+      font-size: 23px;
+      border-radius: 32px;
+    }
+    .btn-icon {
+      width: 29.47px;
+      height: 31.2px;
+      margin-right: 22px;
+    }
+  }
+}

src/assets/styles/map.scss

@@ -13,25 +13,6 @@
   color: #3c71ac;
   text-align: center;
 }
-.mars-four-color {
-  width: 100px;
-  position: relative;
-  top: -60px;
-  left: -50px;
-  cursor: pointer;
-}
-.four-color_name {
-  width: 100%;
-  height: 100px;
-  line-height: 37px;
-  background: url("../images/areaName.png");
-  background-size: 100% 100%;
-  font-size: 16px;
-  font-weight: bold;
-  color: #fff250;
-  text-align: center;
-  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-}
 
 .mars3d-animation {
   position: relative;
@@ -47,47 +28,6 @@
   }
 }
 
-.screen-list {
-  position: absolute;
-  top: 0;
-  right: -240px;
-  // transform: translateY(50%);
-  min-width: 60px;
-  & > div {
-    display: none;
-  }
-  .lable-value {
-    height: 41px;
-    width: 234px;
-    background: url("../images/screen-list.png");
-    background-size: 100% 100%;
-    margin-bottom: 3px;
-    display: flex;
-    align-items: center;
-    padding: 0 6px;
-    .lable-data {
-      width: 50%;
-      font-size: 16px;
-      color: #612500;
-      font-weight: bold;
-    }
-    .value-data {
-      flex: 1;
-      text-align: center;
-      font-size: 20px;
-      color: #f7c75d;
-      font-family: "DIN-Regular-2";
-      span {
-        font-size: 16px;
-        color: #ffffff;
-      }
-    }
-  }
-  & > div:last-child {
-    margin: 0;
-  }
-}
-
 .carIcon {
   cursor: pointer;
   width: 210px;

src/components/mars-work/mars-map.vue

@@ -82,7 +82,7 @@ export default {
 
 <style>
 .mars3d-container {
-  height: calc(100% + 25px);
+  height: calc(100% + 50px);
   overflow: hidden;
 }
 

src/views/index.vue

@@ -22,43 +22,13 @@
 <script>
 import MarsMap from "@/components/mars-map";
 import { getAreaData } from "@/api/yunkun/index.js";
-
+import mapOption from "./mapOption.js";
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
       map: null,
-      options: {
+      options: mapOption,
-        scene: {},
-        control: {
-          contextmenu: { preventDefault: false, hasDefault: false },
-        },
-        terrain: {
-          show: false,
-        },
-        basemaps: [
-          {
-            name: "影像地图",
-            type: "xyz",
-            url: process.env.VUE_APP_BASE_API2 + "/{z}/{y}/{x}.png",
-            minimumLevel: 1,
-            maximumLevel: 16,
-            show: true,
-          },
-          // {
-          //   name: "mapbox影像图",
-          //   icon: "img/basemaps/mapboxSatellite.png",
-          //   type: "mapbox",
-          //   username: "sharealex",
-          //   styleId: "cly5i21fn00e901prgq643t4r",
-          //   token:
-          //     "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
-          //   tilesize: 256,
-          //   scaleFactor: false,
-          //   show: true,
-          // },
-        ],
-      },
       mapLayer: {},
       rongheUrl: basePathUrl + "lib/ronghe.json",
       suzhouUrl: basePathUrl + "lib/suzhou.json",
@@ -159,7 +129,7 @@ export default {
       //苏州融合图层
       this.addRonghe();
       this.addScale();
-      //周边
+      // //周边
       this.initRimcity();
     },
     createMapLayer() {
@@ -215,7 +185,6 @@ export default {
       for (let i = 0; i < arr.length; i++) {
         const item = arr[i];
         const index = i + 1;
-
         const polygonEntity = new mars3d.graphic.PolygonEntity({
           id: index,
           positions: item.positions,
@@ -266,7 +235,7 @@ export default {
     },
     addMarker(lng, lat, name, id) {
       let areaItem = this.list.filter((item) => item.area == name);
-      console.log(areaItem);
+
       if (areaItem.length <= 0) return;
       // 水波动态效果
       const circleGraphic = new mars3d.graphic.CircleEntity({
@@ -322,7 +291,7 @@ export default {
           horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
           verticalOrigin: Cesium.VerticalOrigin.CENTER,
           clampToGround: true,
-          scaleByDistance: true,
+          scaleByDistance: false,
         },
         show: true,
       });
@@ -411,50 +380,6 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style>
-.map-container {
+@import url("../assets/styles/ItemIndex.scss");
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  .multiple {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 100;
-    width: 880px;
-    height: 80px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: url("../assets/images/multipleList.png");
-    background-size: 100% 100%;
-    padding: 0 180px;
-    .checkbox {
-      cursor: pointer;
-      width: 112px;
-      height: 32px;
-      line-height: 32px;
-      text-align: center;
-      font-size: 14px;
-      color: #ffffff;
-      background: linear-gradient(180deg, #072853 0%, #0079ff 100%);
-      border: 1px solid #0084ff;
-      border-radius: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 1;
-    }
-    .checked {
-      opacity: 0.5;
-    }
-    .btn-icon {
-      width: 15px;
-      height: 16px;
-      margin-right: 10px;
-    }
-  }
-}
 </style>

src/views/mapOption.js

@@ -0,0 +1,25 @@
+const mapOption = {
+  scene: {
+    resolutionScale: 0.5,
+    scene3DOnly: true,
+    requestRenderMode: true,
+  },
+  control: {
+    // contextmenu: { preventDefault: false, hasDefault: false },
+  },
+  terrain: {
+    show: false,
+  },
+  basemaps: [
+    {
+      name: "影像地图",
+      type: "xyz",
+      url: process.env.VUE_APP_BASE_API2 + "/{z}/{y}/{x}.png",
+      minimumLevel: 1,
+      maximumLevel: 16,
+      show: true,
+    },
+  ],
+};
+
+export default mapOption;