左下鼠标经纬度

src/views/poDogElectron/components/lonLatBox.vue

+<template>
+  <div class="lonLatClass">
+    东经: {{ lonAndLat.lon }}&nbsp;&nbsp;&nbsp;&nbsp;北纬: {{ lonAndLat.lat }}&nbsp;&nbsp;&nbsp;&nbsp;层级: {{ mapzoom }}
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "lonLatBox",
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+  computed: {
+    ...mapState("homemap", ["lonAndLat", "mapzoom"]),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+.lonLatClass {
+  position: absolute;
+  width: 300px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 0px 8px 0px 0px;
+  left: 0;
+  bottom: 0;
+  font-size: 14px;
+  color: #5e5e5e;
+  font-weight: 400;
+}
+</style>

src/views/poDogElectron/index.vue

@@ -12,6 +12,8 @@
       <xzqhSelect></xzqhSelect>
       <!-- 右上工具箱 -->
       <toolCase></toolCase>
+      <!-- 左下鼠标经纬度 -->
+      <lonLatBox></lonLatBox>
     </template>
   </div>
 </template>
@@ -23,6 +25,7 @@ import resize from "vue-resize-directive";
 import toolCase from "./components/toolCase.vue";
 import baseMap from "./components/baseMap.vue";
 import xzqhSelect from "./components/xzqhSelect.vue";
+import lonLatBox from "./components/lonLatBox.vue";
 
 export default {
   name: "poDogElectron",
@@ -33,6 +36,7 @@ export default {
     toolCase,
     baseMap,
     xzqhSelect,
+    lonLatBox,
   },
   data() {
     return {
@@ -74,6 +78,20 @@ export default {
         if (this.showSpaceBox) this.$store.commit("homemap/CHANGE_SPACE_STATE");
         if (this.jihuoXuanDian) this.openInfo(e.lngLat);
       });
+
+      window.map.on("mousemove", (e) => {
+        this.$store.commit("homemap/CHANGE_LONLAT", {
+          lon: e.lngLat.lng ? e.lngLat.lng.toFixed(3) : 0,
+          lat: e.lngLat.lat ? e.lngLat.lat.toFixed(3) : 0,
+        });
+      });
+
+      window.map.on("zoomend", () => {
+        this.$store.commit(
+          "homemap/CHANGE_MAPZOOM",
+          window.map.getZoom().toFixed()
+        );
+      });
     },
     openInfo(val) {
       let popup = new mapboxgl.Popup({