更换openlayer

package-lock.json

@@ -19,6 +19,7 @@
         "element-ui": "^2.15.10",
         "file-saver": "^2.0.5",
         "moment": "^2.30.1",
+        "ol": "^10.5.0",
         "vue": "^2.7.16",
         "vue-router": "^3.5.1",
         "vueshowpdf": "^1.1.2",
@@ -2807,6 +2808,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/@petamoriken/float16": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmmirror.com/@petamoriken/float16/-/float16-3.9.2.tgz",
+      "integrity": "sha512-VgffxawQde93xKxT3qap3OH+meZf7VaSB5Sqd4Rqc+FP5alWbpOyan/7tRbOAvynjpG3GpdtAuGU/NdhQpmrog=="
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.21",
       "resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.21.tgz",
@@ -3305,6 +3311,11 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
       "dev": true
     },
+    "node_modules/@types/rbush": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/@types/rbush/-/rbush-4.0.0.tgz",
+      "integrity": "sha512-+N+2H39P8X+Hy1I5mC6awlTX54k3FhiUmvt7HWzGJZvF+syUAAxP/stwppS8JE84YHqFgRMv6fCy31202CMFxQ=="
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmmirror.com/@types/retry/-/retry-0.12.0.tgz",
@@ -8155,8 +8166,7 @@
     "node_modules/earcut": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/earcut/-/earcut-3.0.1.tgz",
-      "integrity": "sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==",
+      "integrity": "sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw=="
-      "dev": true
     },
     "node_modules/easy-stack": {
       "version": "1.0.1",
@@ -10232,6 +10242,40 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geotiff": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/geotiff/-/geotiff-2.1.3.tgz",
+      "integrity": "sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==",
+      "dependencies": {
+        "@petamoriken/float16": "^3.4.7",
+        "lerc": "^3.0.0",
+        "pako": "^2.0.4",
+        "parse-headers": "^2.0.2",
+        "quick-lru": "^6.1.1",
+        "web-worker": "^1.2.0",
+        "xml-utils": "^1.0.2",
+        "zstddec": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10.19"
+      }
+    },
+    "node_modules/geotiff/node_modules/lerc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/lerc/-/lerc-3.0.0.tgz",
+      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
+    },
+    "node_modules/geotiff/node_modules/quick-lru": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmmirror.com/quick-lru/-/quick-lru-6.1.2.tgz",
+      "integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -17655,6 +17699,35 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true
     },
+    "node_modules/ol": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmmirror.com/ol/-/ol-10.5.0.tgz",
+      "integrity": "sha512-nHFx8gkGmvYImsa7iKkwUnZidd5gn1XbMZd9GNOorvm9orjW9gQvT3Naw/MjIasVJ3cB9EJUdCGR2EFAulMHsQ==",
+      "dependencies": {
+        "@types/rbush": "4.0.0",
+        "earcut": "^3.0.0",
+        "geotiff": "^2.1.3",
+        "pbf": "4.0.1",
+        "rbush": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/openlayers"
+      }
+    },
+    "node_modules/ol/node_modules/quickselect": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
+    },
+    "node_modules/ol/node_modules/rbush": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/rbush/-/rbush-4.0.1.tgz",
+      "integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
+      "dependencies": {
+        "quickselect": "^3.0.0"
+      }
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmmirror.com/on-finished/-/on-finished-2.4.1.tgz",
@@ -18049,8 +18122,7 @@
     "node_modules/pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/pako/-/pako-2.1.0.tgz",
-      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
-      "dev": true
     },
     "node_modules/param-case": {
       "version": "3.0.4",
@@ -18074,6 +18146,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-headers": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.6.tgz",
+      "integrity": "sha512-Tz11t3uKztEW5FEVZnj1ox8GKblWn+PvHY9TmJV5Mll2uHEwRdR/5Li1OlXoECjLYkApdhWy44ocONwXLiKO5A=="
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmmirror.com/parse-json/-/parse-json-5.2.0.tgz",
@@ -18189,6 +18266,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/pbf": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/pbf/-/pbf-4.0.1.tgz",
+      "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
+      "dependencies": {
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/pend/-/pend-1.2.0.tgz",
@@ -19425,6 +19513,11 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmmirror.com/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -19979,6 +20072,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "node_modules/resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmmirror.com/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -23427,6 +23528,11 @@
         "defaults": "^1.0.3"
       }
     },
+    "node_modules/web-worker": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/web-worker/-/web-worker-1.5.0.tgz",
+      "integrity": "sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw=="
+    },
     "node_modules/webidl-conversions": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
@@ -24079,6 +24185,11 @@
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
       "dev": true
     },
+    "node_modules/xml-utils": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmmirror.com/xml-utils/-/xml-utils-1.10.2.tgz",
+      "integrity": "sha512-RqM+2o1RYs6T8+3DzDSoTRAUfrvaejbVHcp3+thnAtDKo8LskR+HomLajEy5UjTz24rpka7AxVBRR3g2wTUkJA=="
+    },
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/xmlchars/-/xmlchars-2.2.0.tgz",
@@ -24246,6 +24357,11 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
+    "node_modules/zstddec": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmmirror.com/zstddec/-/zstddec-0.1.0.tgz",
+      "integrity": "sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg=="
     }
   }
 }

package.json

@@ -24,6 +24,7 @@
     "element-ui": "^2.15.10",
     "file-saver": "^2.0.5",
     "moment": "^2.30.1",
+    "ol": "^10.5.0",
     "vue": "^2.7.16",
     "vue-router": "^3.5.1",
     "vueshowpdf": "^1.1.2",
@@ -71,4 +72,4 @@
   "gitHooks": {
     "pre-commit": "lint-staged"
   }
-}
+}

public/index.html

@@ -14,12 +14,12 @@
 
   <!-- <link rel="stylesheet" href="/dep/mars3d/mars3d/divGraphic.css" /> -->
   <!-- ***_*** -->
-  <link href="/dep/mars3d/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
+  <!-- <link href="/dep/mars3d/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
   <script src="/dep/mars3d/Cesium/Cesium.js" type="text/javascript"></script>
   <link rel="stylesheet" href="/dep/mars3d/mars3d/mars3d.css" />
   <script type="text/javascript" src="/dep/mars3d/mars3d/mars3d.js"></script>
   <script type="text/javascript" src="/dep/mars3d/turf/turf.min.js"></script>
-  <script type="text/javascript" src="/dep/localforage.min.js"></script>
+  <script type="text/javascript" src="/dep/localforage.min.js"></script> -->
 
 
   <!-- 线上Mars3d -->

src/router/index.js

@@ -9,22 +9,23 @@ const routes = [
     name: "home",
     component: index,
     beforeEnter: (to, from, next) => {
-      const expires = localStorage.getItem("expires");
+      next(); // 继续导航到/dashboard
-      const expiresTimestamp = new Date(expires).getTime();
+      // const expires = localStorage.getItem("expires");
-      const now = new Date().getTime();
+      // const expiresTimestamp = new Date(expires).getTime();
-      if (expiresTimestamp && now > expiresTimestamp) {
+      // const now = new Date().getTime();
-        // 登录已过期，执行自动退出操作
+      // if (expiresTimestamp && now > expiresTimestamp) {
-        localStorage.removeItem("setToken");
+      //   // 登录已过期，执行自动退出操作
-        localStorage.removeItem("expires");
+      //   localStorage.removeItem("setToken");
-        next("/login");
+      //   localStorage.removeItem("expires");
-      }
+      //   next("/login");
-      const token = localStorage.getItem("setToken");
+      // }
-      // 在导航到/dashboard路由之前执行的操作
+      // const token = localStorage.getItem("setToken");
-      if (!token) {
+      // // 在导航到/dashboard路由之前执行的操作
-        next("/login"); // 如果非管理员用户访问/dashboard，则重定向到登录页面
+      // if (!token) {
-      } else {
+      //   next("/login"); // 如果非管理员用户访问/dashboard，则重定向到登录页面
-        next(); // 继续导航到/dashboard
+      // } else {
-      }
+      //   next(); // 继续导航到/dashboard
+      // }
     }
   },
   {

src/views/login/index.vue

@@ -71,30 +71,31 @@ export default {
       }
     },
     loginClick() {
-      let params = {};
+      this.$router.push("/"); // Vue 2 中使用 this.$router
-      params.username = this.state.username;
+      // let params = {};
-      localStorage.setItem("userName", params.username);
+      // params.username = this.state.username;
-      params.password = this.state.password;
+      // localStorage.setItem("userName", params.username);
+      // params.password = this.state.password;
 
-      if (!this.state.username || !this.state.password) {
+      // if (!this.state.username || !this.state.password) {
-        return;
+      //   return;
-      } else {
+      // } else {
-        login(params).then((res) => {
+      //   login(params).then((res) => {
-          if (res.code === 1 && res.data) {
+      //     if (res.code === 1 && res.data) {
-            localStorage.setItem("setToken", res.data.token);
+      //       localStorage.setItem("setToken", res.data.token);
-            localStorage.setItem("expires", res.data.expires); // 登录到期时间
+      //       localStorage.setItem("expires", res.data.expires); // 登录到期时间
-            localStorage.setItem("userId", res.data.userid); // 登录id
+      //       localStorage.setItem("userId", res.data.userid); // 登录id
-            localStorage.setItem("isAdmin", res.data.isAdmin); // 权限
+      //       localStorage.setItem("isAdmin", res.data.isAdmin); // 权限
 
-            // 注意：Vue 2 中 Pinia 的用法需要调整
+      //       // 注意：Vue 2 中 Pinia 的用法需要调整
 
-            this.$router.push("/"); // Vue 2 中使用 this.$router
+      //       this.$router.push("/"); // Vue 2 中使用 this.$router
-          } else {
+      //     } else {
-            this.state.password = this.state.password;
+      //       this.state.password = this.state.password;
-            this.$message.error(res.msg);
+      //       this.$message.error(res.msg);
-          }
+      //     }
-        });
+      //   });
-      }
+      // }
     }
   }
 };

src/views/mapControl/index.vue

@@ -1,143 +1,144 @@
 <template>
-  <div class="HomeMpa">
+  <div class="HomeMap">
     <div class="zoom-level">当前缩放等级: {{ zoomLevel }}</div>
-    <div id="mars3dContainer" ref="MarsMap" class="mars3d-container"></div>
+    <div id="map" ref="olMap" class="map-container"></div>
     <div class="pointingNorth" @click="mapNorth">
-      <img src="@/assets/img/menu/zhibeizhen.png" alt="" />
+      <img src="@/assets/img/menu/zhibeizhen.png" alt="指北" />
     </div>
   </div>
 </template>
 
 <script>
-"use script";
 import { mapGetters } from "vuex";
+import Map from "ol/Map";
+import View from "ol/View";
+import TileLayer from "ol/layer/Tile";
+import { fromLonLat } from "ol/proj";
+import XYZ from "ol/source/XYZ";
+
 export default {
   name: "HomeMap",
   data() {
     return {
-      player: null,
+      map: null,
       zoomLevel: null
     };
   },
   created() {
+    // 清空控制台（可选）
     // console.clear();
   },
   mounted() {
-    this.getMapJson();
+    this.initMap();
   },
   computed: {
     ...mapGetters(["statePage", "cityCode"])
   },
   methods: {
-    getMapJson() {
+    initMap() {
-      // eslint-disable-next-line no-undef
+      // 初始化 OpenLayers 地图
-      mars3d.Util.fetchJson({
+
-        // ***_***
+      this.map = new Map({
-        url: "/configJson/map.json"
+        target: this.$refs.olMap,
-      }).then((res) => {
+        layers: [
-        this.initMarsMap({
+          new TileLayer({
-          // 合并配置项
+            visible: true,
-          ...res.map3d
+            source: new XYZ({
-        });
+              visible: true,
+              url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8"
+            })
+          })
+        ],
+        view: new View({
+          projection: "EPSG:4326",
+          center: [116.4, 39.9], // 经纬度转投影坐标
+          zoom: 10,
+          minZoom: 3,
+          maxZoom: 18,
+          constrainRotation: false // 允许旋转
+        })
       });
+
+      // 保存地图实例到全局（与 Mars3D 的 window.marsMap 类似）
+      window.olMap = this.map;
+
+      // 处理地图加载完成后的逻辑
+      this.onMapLoad(this.map);
+
+      // 绑定点击事件
+      this.map.on("click", this.mapClickHandler);
+
+      // 绑定缩放/移动结束事件
+      this.map.getView().on("change:resolution", this.mapZoomHandler);
+      this.map.getView().on("change:center", this.mapZoomHandler);
     },
-    initMarsMap(options) {
+    mapClickHandler(event) {
-      let map;
+      // 处理地图点击事件
-      // eslint-disable-next-line no-undef
+      console.log("地图点击:", event);
-      map = new mars3d.Map(this.$refs.MarsMap, options);
-      // eslint-disable-next-line no-unused-vars
-      window.marsMap = map;
-      // 禁止右键菜单
-      // map.unbindContextMenu();
-      //禁用切换动画效果
-      if (map.viewer.sceneModePicker) {
-        map.viewer.sceneModePicker.viewModel.duration = 0.0;
-      }
-      // map构造完成后的一些处理
-      this.onMapLoad(map);
-      // eslint-disable-next-line no-undef
-      map.on(mars3d.EventType.click, this.map_clickHandler, map);
-      map.on(mars3d.EventType.cameraMoveEnd, this.map_zoomHandler, map);
-      // map.scene.screenSpaceCameraController.enableTranslate = false;
-      // map.scene.screenSpaceCameraController.enableRotate = false; // 禁用旋转
-      // map.scene.screenSpaceCameraController.enableTilt = false; // 禁用倾斜
-      // map.scene.screenSpaceCameraController.enableZoom = false; // 禁用缩放
     },
-    map_clickHandler(event) {
+    mapZoomHandler() {
-      console.log(event);
+      // 获取当前缩放等级
-    },
+      this.zoomLevel = Math.round(this.map.getView().getZoom());
-    map_zoomHandler(event) {
-      let { alt } = window.marsMap.getCameraView();
-      this.zoomLevel = this.estimateZoomLevel(alt);
-      console.log(this.zoomLevel);
-    },
-    estimateZoomLevel(height) {
-      const maxZoom = 18;
-      const baseHeight = 1000;
-      const zoom = maxZoom - Math.log2(height / baseHeight);
-      return Math.round(zoom);
     },
     onMapLoad(map) {
-      map.changeMouseModel(true);
+      // 地图加载完成后的处理
-      // 在地图初始化后禁用平移
+      const camera = window.mapConfig || {};
-      let camera = window.mapConfig;
-      console.log(camera, "camera");
       if (camera.isCamera) {
-        let cameraHistory = new mars3d.thing.CameraHistory({
+        // 设置视角约束
-          limit: {
+        map
-            // 限定视角范围
+          .getView()
-            position: Cesium.Cartesian3.fromDegrees(
+          .setCenter(
-              camera.cameraLon,
+            fromLonLat([camera.cameraLon || 0, camera.cameraLat || 0])
-              camera.cameraLat,
+          );
-              0
+        map.getView().setMinZoom(3); // 最小缩放等级
-            ),
+        map.getView().setMaxZoom(18); // 最大缩放等级
-            radius: camera.cameraRadius,
-            debugExtent: false
-          }
-        });
-        map.addThing(cameraHistory);
-        map.scene.screenSpaceCameraController.minimumZoomDistance = 1000; //相机的高度的最小值
-        map.scene.screenSpaceCameraController.maximumZoomDistance = 500000; //相机高度的最大值
       }
     },
     mapNorth() {
-      // 1. 获取当前视角
+      // 指北：将地图旋转角度重置为 0
-      const currentView = window.marsMap.getCameraView();
+      const view = this.map.getView();
-
+      const currentCenter = view.getCenter();
-      // 2. 修改视角的heading为0（正北），保留其他参数
+      const currentZoom = view.getZoom();
-      window.marsMap.setCameraView({
+      view.animate({
-        lat: currentView.lat,
+        center: currentCenter,
-        lng: currentView.lng,
+        zoom: currentZoom < 3 ? 10 : currentZoom, // 确保最小缩放等级
-        alt: currentView.alt <= 100 ? 8000 : currentView.alt,
+        rotation: 0, // 指北
-        heading: 0, // 指北
+        duration: 500 // 动画持续时间
-        pitch: -90,
-        roll: currentView.roll
       });
     }
   }
 };
 </script>
+
 <style scoped lang="scss">
-.HomeMpa {
+.HomeMap {
   width: 100%;
   height: 100%;
+  position: relative;
+
   .zoom-level {
     position: absolute;
     bottom: 0.8%;
     left: 1%;
-    z-index: 5;
+    z-index: 1000;
     color: #fff;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 5px;
+    border-radius: 3px;
   }
 
-  #mars3dContainer {
+  .map-container {
     width: 100%;
     height: 100%;
   }
+
   .pointingNorth {
     position: absolute;
     bottom: 5%;
     right: 25%;
     cursor: pointer;
+    z-index: 1000;
+
     img {
       width: 35px;
       height: 35px;