1

二维码坐标系更改
1
2025-09-22 13:52:59 +08:00 · 2025-09-19 22:26:56 +08:00 · 2025-08-20 22:07:33 +08:00 · 2025-07-20 18:00:43 +08:00 · 2025-07-20 16:11:04 +08:00 · 2025-07-19 22:08:33 +08:00
46 changed files with 3229 additions and 938 deletions
--- a/.env.development
+++ b/.env.development
@ -1,3 +1,3 @@
 NODE_ENV = 'development'
-VUE_APP_API_URL = 'http://114.66.57.139:8088'
+VUE_APP_API_URL = 'http://110.42.57.178:8090'
 VUE_APP_MESSAGE_SDK_DEBUG = true
--- a/package-lock.json
+++ b/package-lock.json
@ -7,18 +7,25 @@
    "": {
      "version": "0.1.0",
      "dependencies": {
+        "@amap/amap-jsapi-loader": "^1.0.1",
+        "@fit-screen/vue": "^1.0.2",
        "@microsoft/signalr": "^8.0.7",
        "@vue-office/docx": "^1.6.2",
        "@vue-office/excel": "^1.7.11",
        "@vue-office/pdf": "^2.0.10",
        "axios": "^1.1.3",
+        "be-full": "^0.1.4",
        "core-js": "^3.8.3",
        "echarts": "^5.5.1",
        "echarts-gl": "^2.0.9",
        "echarts-liquidfill": "^3.1.0",
        "element-ui": "^2.15.10",
        "file-saver": "^2.0.5",
+        "lodash": "^4.17.21",
        "moment": "^2.30.1",
+        "ol": "^10.5.0",
+        "ol-proj-ch": "^1.0.4",
+        "qrcode": "^1.5.4",
        "vue": "^2.7.16",
        "vue-router": "^3.5.1",
        "vueshowpdf": "^1.1.2",
@ -78,6 +85,11 @@
        "node": "8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18"
      }
    },
+    "node_modules/@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
    "node_modules/@ampproject/remapping": {
      "version": "2.2.0",
      "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.0.tgz",
@ -1932,6 +1944,47 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@fit-screen/vue": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@fit-screen/vue/-/vue-1.0.2.tgz",
+      "integrity": "sha512-Byd+yyZhMw4x7kSfbCNG212EZxrGRi6L+dsAZi+JsbIUm6Wb+/xd6d5cfhtPJ/eubLbcKLVOstlRjQaj2NPJdQ==",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.14 || ^3.2.39"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@fit-screen/vue/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@gar/promisify": {
      "version": "1.1.3",
      "resolved": "https://registry.npmmirror.com/@gar/promisify/-/promisify-1.1.3.tgz",
@ -2688,6 +2741,45 @@
      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
      "dev": true
    },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-style-spec": {
+      "version": "13.28.0",
+      "resolved": "https://registry.npmmirror.com/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz",
+      "integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==",
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/unitbezier": "^0.0.0",
+        "csscolorparser": "~1.0.2",
+        "json-stringify-pretty-compact": "^2.0.0",
+        "minimist": "^1.2.6",
+        "rw": "^1.3.3",
+        "sort-object": "^0.3.2"
+      },
+      "bin": {
+        "gl-style-composite": "bin/gl-style-composite.js",
+        "gl-style-format": "bin/gl-style-format.js",
+        "gl-style-migrate": "bin/gl-style-migrate.js",
+        "gl-style-validate": "bin/gl-style-validate.js"
+      }
+    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmmirror.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmmirror.com/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
+    },
    "node_modules/@microsoft/signalr": {
      "version": "8.0.7",
      "resolved": "https://registry.npmmirror.com/@microsoft/signalr/-/signalr-8.0.7.tgz",
@ -2807,6 +2899,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 +3402,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",
@ -4549,7 +4651,6 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@ -5229,6 +5330,11 @@
      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
      "dev": true
    },
+    "node_modules/be-full": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmmirror.com/be-full/-/be-full-0.1.4.tgz",
+      "integrity": "sha512-Nj3yBvk8rxhBhDv6YROxP9ynTA5H0l9lMjU+XqEAY4rTLJ68l2+n0geWCoeTqAxhOFedtbmYCpxFzMxMA8CnUg=="
+    },
    "node_modules/big.js": {
      "version": "5.2.2",
      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
@ -7127,6 +7233,11 @@
        "url": "https://github.com/sponsors/fb55"
      }
    },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
    "node_modules/cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
@ -7369,7 +7480,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -7858,6 +7968,11 @@
        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
      }
    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+    },
    "node_modules/dir-glob": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz",
@ -8155,8 +8270,7 @@
    "node_modules/earcut": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/earcut/-/earcut-3.0.1.tgz",
-      "integrity": "sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==",
-      "dev": true
+      "integrity": "sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw=="
    },
    "node_modules/easy-stack": {
      "version": "1.0.1",
@ -8298,8 +8412,7 @@
    "node_modules/emoji-regex": {
      "version": "8.0.0",
      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
    },
    "node_modules/emojis-list": {
      "version": "3.0.0",
@ -9936,7 +10049,6 @@
      "version": "4.1.0",
      "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz",
      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
      "dependencies": {
        "locate-path": "^5.0.0",
        "path-exists": "^4.0.0"
@ -10232,11 +10344,44 @@
        "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",
      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
      "engines": {
        "node": "6.* || 8.* || >= 10.*"
      }
@ -11374,7 +11519,6 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmmirror.com/ieee754/-/ieee754-1.2.1.tgz",
      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@ -12785,7 +12929,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@ -15777,6 +15920,11 @@
      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
      "dev": true
    },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
+    },
    "node_modules/json-stringify-safe": {
      "version": "5.0.1",
      "resolved": "https://registry.npmmirror.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@ -16259,7 +16407,6 @@
      "version": "5.0.0",
      "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
      "dependencies": {
        "p-locate": "^4.1.0"
      },
@ -16270,8 +16417,7 @@
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "node_modules/lodash.debounce": {
      "version": "4.0.8",
@ -16566,7 +16712,6 @@
      "version": "6.0.0",
      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
      "dependencies": {
        "yallist": "^4.0.0"
      },
@ -16631,6 +16776,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/mapbox-to-css-font": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmmirror.com/mapbox-to-css-font/-/mapbox-to-css-font-2.4.5.tgz",
+      "integrity": "sha512-VJ6nB8emkO9VODI0Fk+TQ/0zKBTqmf/Pkt8Xv0kHstoc0iXRajA00DAid4Kc3K5xeFIOoiZrVxijEzj0GLVO2w=="
+    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@ -16994,7 +17144,6 @@
      "version": "1.2.7",
      "resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.7.tgz",
      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
-      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@ -17655,6 +17804,105 @@
      "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-mapbox-style": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmmirror.com/ol-mapbox-style/-/ol-mapbox-style-8.2.1.tgz",
+      "integrity": "sha512-3kBBuZC627vDL8vnUdfVbCbfkhkcZj2kXPHQcuLhC4JJEA+XkEVEtEde8x8+AZctRbHwBkSiubTPaRukgLxIRw==",
+      "dependencies": {
+        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
+        "mapbox-to-css-font": "^2.4.1"
+      }
+    },
+    "node_modules/ol-proj-ch": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/ol-proj-ch/-/ol-proj-ch-1.0.4.tgz",
+      "integrity": "sha512-+4JzepT/hYII06DSn6uIrDrfAnf8Xg0+69V0gKeLIynaaP3zNG/iMucgdO0rhGJuGtV0YwwO2KLVZVYZUIvJsA==",
+      "dependencies": {
+        "ol": "^6.1.0"
+      },
+      "peerDependencies": {
+        "ol": "^6.1.0"
+      }
+    },
+    "node_modules/ol-proj-ch/node_modules/geotiff": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/geotiff/-/geotiff-2.0.4.tgz",
+      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "dependencies": {
+        "@petamoriken/float16": "^3.4.7",
+        "lerc": "^3.0.0",
+        "lru-cache": "^6.0.0",
+        "pako": "^2.0.4",
+        "parse-headers": "^2.0.2",
+        "web-worker": "^1.2.0",
+        "xml-utils": "^1.0.2"
+      },
+      "engines": {
+        "browsers": "defaults",
+        "node": ">=10.19"
+      }
+    },
+    "node_modules/ol-proj-ch/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/ol-proj-ch/node_modules/ol": {
+      "version": "6.15.1",
+      "resolved": "https://registry.npmmirror.com/ol/-/ol-6.15.1.tgz",
+      "integrity": "sha512-ZG2CKTpJ8Q+tPywYysVwPk+yevwJzlbwjRKhoCvd7kLVWMbfBl1O/+Kg/yrZZrhG9FNXbFH4GeOZ5yVRqo3P4w==",
+      "dependencies": {
+        "geotiff": "2.0.4",
+        "ol-mapbox-style": "^8.0.5",
+        "pbf": "3.2.1",
+        "rbush": "^3.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/openlayers"
+      }
+    },
+    "node_modules/ol-proj-ch/node_modules/pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
+    "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",
@ -17941,7 +18189,6 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz",
      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
      "dependencies": {
        "p-try": "^2.0.0"
      },
@ -17956,7 +18203,6 @@
      "version": "4.1.0",
      "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz",
      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
      "dependencies": {
        "p-limit": "^2.2.0"
      },
@ -18041,7 +18287,6 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz",
      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
      "engines": {
        "node": ">=6"
      }
@ -18049,8 +18294,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==",
-      "dev": true
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
    },
    "node_modules/param-case": {
      "version": "3.0.4",
@ -18074,6 +18318,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",
@ -18145,7 +18394,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@ -18189,6 +18437,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",
@ -18272,6 +18531,14 @@
        "semver-compare": "^1.0.0"
      }
    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/pngquant-bin": {
      "version": "9.0.0",
      "resolved": "https://registry.npmmirror.com/pngquant-bin/-/pngquant-bin-9.0.0.tgz",
@ -19425,6 +19692,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",
@ -19481,6 +19753,121 @@
        "node": ">=6"
      }
    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/qrcode/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/qs": {
      "version": "6.11.0",
      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz",
@ -19546,8 +19933,7 @@
    "node_modules/quickselect": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/quickselect/-/quickselect-2.0.0.tgz",
-      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
-      "dev": true
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
    },
    "node_modules/randombytes": {
      "version": "2.1.0",
@ -19595,7 +19981,6 @@
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/rbush/-/rbush-3.0.1.tgz",
      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
-      "dev": true,
      "dependencies": {
        "quickselect": "^2.0.0"
      }
@ -19905,7 +20290,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -19919,6 +20303,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
    "node_modules/requires-port": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
@ -19979,6 +20368,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",
@ -20090,6 +20487,11 @@
        "queue-microtask": "^1.2.2"
      }
    },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
    "node_modules/rxjs": {
      "version": "7.5.7",
      "resolved": "https://registry.npmmirror.com/rxjs/-/rxjs-7.5.7.tgz",
@ -20498,6 +20900,11 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
    "node_modules/set-cookie-parser": {
      "version": "2.7.0",
      "resolved": "https://registry.npmmirror.com/set-cookie-parser/-/set-cookie-parser-2.7.0.tgz",
@ -20872,6 +21279,22 @@
        "websocket-driver": "^0.7.4"
      }
    },
+    "node_modules/sort-asc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmmirror.com/sort-asc/-/sort-asc-0.1.0.tgz",
+      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-desc": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/sort-desc/-/sort-desc-0.1.1.tgz",
+      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/sort-keys": {
      "version": "1.1.2",
      "resolved": "https://registry.npmmirror.com/sort-keys/-/sort-keys-1.1.2.tgz",
@ -20905,6 +21328,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/sort-object": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/sort-object/-/sort-object-0.3.2.tgz",
+      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
+      "dependencies": {
+        "sort-asc": "^0.1.0",
+        "sort-desc": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/source-list-map": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz",
@ -21200,7 +21635,6 @@
      "version": "4.2.3",
      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
      "dependencies": {
        "emoji-regex": "^8.0.0",
        "is-fullwidth-code-point": "^3.0.0",
@ -21277,7 +21711,6 @@
      "version": "6.0.1",
      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
      "dependencies": {
        "ansi-regex": "^5.0.1"
      },
@ -23427,6 +23860,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",
@ -23951,6 +24389,11 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+    },
    "node_modules/which-typed-array": {
      "version": "1.1.15",
      "resolved": "https://registry.npmmirror.com/which-typed-array/-/which-typed-array-1.1.15.tgz",
@ -24079,6 +24522,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",
@ -24106,8 +24554,7 @@
    "node_modules/yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
    },
    "node_modules/yaml": {
      "version": "1.10.2",
@ -24246,6 +24693,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=="
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -12,18 +12,25 @@
    "start:vite": "vite"
  },
  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@fit-screen/vue": "^1.0.2",
    "@microsoft/signalr": "^8.0.7",
    "@vue-office/docx": "^1.6.2",
    "@vue-office/excel": "^1.7.11",
    "@vue-office/pdf": "^2.0.10",
    "axios": "^1.1.3",
+    "be-full": "^0.1.4",
    "core-js": "^3.8.3",
    "echarts": "^5.5.1",
    "echarts-gl": "^2.0.9",
    "echarts-liquidfill": "^3.1.0",
    "element-ui": "^2.15.10",
    "file-saver": "^2.0.5",
+    "lodash": "^4.17.21",
    "moment": "^2.30.1",
+    "ol": "^10.5.0",
+    "ol-proj-ch": "^1.0.4",
+    "qrcode": "^1.5.4",
    "vue": "^2.7.16",
    "vue-router": "^3.5.1",
    "vueshowpdf": "^1.1.2",
--- a/public/config.js
+++ b/public/config.js
@ -2,12 +2,13 @@ const isCamera = false; // 是否开启相机限制
 const cameraLon = 116.3974; // 相机经度
 const cameraLat = 39.9042; // 相机纬度
 const cameraRadius = 40000; // 相机半径
+const zoom = 12; // 地图缩放级别
 const allPositionLon = 117.278262; // 全部防区跳转经度
 const allPositionLat = 39.036963; // 全部防区跳转纬度
 const allPositionAlt = 4000; // 全部防区跳转高度
 const allPositionPitch = -90; // 全部防区跳转俯仰角

-const currTime = 15; // 左侧无人机消失时间
+const currTime = 60; // 左侧无人机消失时间

 const uavSize = 50; // 无人机大小
 const uaColor = "#ffffff"; // 无人机颜色
@ -20,8 +21,14 @@ window.mapConfig = {
  allPositionLon: allPositionLon,
  allPositionLat: allPositionLat,
  allPositionAlt: allPositionAlt,
+  zoom: zoom,
  allPositionPitch: allPositionPitch,
  currTime: currTime,
  uavSize: uavSize,
-  uaColor: uaColor
+  uaColor: uaColor,
+  vectorLayer: "vec", //白色底图
+  ciatorLayer: "cia", //默认注记
+  // 地图地址配置
+  mapUrl: "http://114.66.59.70:8098/vec/{z}/{x}/{y}.png", // 底图
+  mapUrl1: "http://114.66.59.70:8098/cia/{z}/{x}/{y}.png" // 注记
 };
--- a/public/index.html
+++ b/public/index.html
@ -14,13 +14,14 @@

  <!-- <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> -->

+  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=ca09155e1bad6661625a45fedb6ad595"></script>

  <!-- 线上Mars3d -->
  <!-- <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@ -3,7 +3,7 @@ import request from "@/utils/request";
 // 获取告警列表
 export function alarmList(data) {
  return request({
-    url: "/api/Alarm/list",
+    url: "/api/Alarm/list1",
    method: "get",
    params: data
  });
--- a/src/api/home.js
+++ b/src/api/home.js
@ -8,3 +8,12 @@ export function Homeview(data) {
    params: data
  });
 }
+// 实时位置信息
+export function HomeSyncLocation(data) {
+  let url = "/api/Home/syncLocation";
+  return request({
+    url: url,
+    method: "post",
+    data
+  });
+}
--- a/src/api/login.js
+++ b/src/api/login.js
@ -8,3 +8,12 @@ export function login(data) {
    data
  });
 }
+
+// 登录后 获取当前防区
+export function loginPosition(data) {
+  return request({
+    url: "/api/Position/Details",
+    method: "post",
+    data
+  });
+}
--- a/src/assets/css/element-ui.scss
+++ b/src/assets/css/element-ui.scss
@ -83,7 +83,7 @@
        height: 100%;
        display: flex;
        align-items: center;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
        .el-form-item {
          margin-right: 3%;
          margin-bottom: 13px;
@ -149,7 +149,7 @@
          background-color: #065ad8;
        }
        .el-link--inner {
-          font-size: 0.6vw;
+          font-size: 1vw;
          margin-left: 5px;
        }
        .el-table__body-wrapper {
@ -596,3 +596,60 @@
 .el-picker-panel__icon-btn {
  color: #fff;
 }
+.custom-class {
+  .el-dialog {
+    height: 50% !important;
+    .el-dialog__header {
+      .el-dialog__headerbtn {
+        top: 30px;
+        right: 40px;
+      }
+    }
+    .el-dialog__body {
+      height: calc(100% - 140px);
+      .block {
+        width: 80%;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        .demonstration {
+          width: 100px;
+          color: #fff;
+        }
+        .el-slider {
+          width: calc(100% - 120px);
+        }
+      }
+    }
+    .el-dialog__footer {
+    }
+  }
+}
+.custom-table {
+  .el-dialog {
+    height: 80% !important;
+    .el-dialog__header {
+      .el-dialog__headerbtn {
+        top: 30px;
+        right: 40px;
+      }
+    }
+    .el-dialog__body {
+      height: calc(100% - 110px);
+
+      .table-container {
+        height: calc(100% - 50px);
+        margin-top: 0;
+        padding-top: 0;
+        .table-box {
+          height: 90%;
+          .el-table__body-wrapper {
+            overflow: auto;
+          }
+        }
+      }
+    }
+    .el-dialog__footer {
+    }
+  }
+}
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@ -29,7 +29,7 @@ body {

 // 滚动条样式
 ::-webkit-scrollbar {
-  width: 5px;
+  width: 0px;
  height: 3px;
  background-color: transparent;
 }
@ -84,17 +84,16 @@ body {
      background-position: center;
      padding: 0;
      margin: 0;
+      pointer-events: none;
      .header-left {
+        width: 20%;
        height: 35px;
-        margin-left: 41px;
        margin-top: 13px;
-        .header-logo {
-          width: 290px;
-          height: 100%;
-          background: url(../img/logo.png);
-          background-size: 100% 100%;
-          background-repeat: no-repeat;
-          background-position: center;
+        line-height: 35px;
+        color: #fff;
+        letter-spacing: 2px;
+        span {
+          margin-left: 3%;
        }
      }
      .header-main {
@ -119,215 +118,390 @@ body {
        height: 40px;
        display: flex;
        align-items: center;
-        margin-right: 40px;
+        margin-right: 20px;
        margin-top: 10px;
-        .menuItem {
-          width: 305px;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          margin-right: 10px;
-          .menuFor {
-            width: 41px;
-            height: 41px;
-            text-align: center;
-            margin: 0 auto;
-            .itemIcon {
-              width: 100%;
-              height: 100%;
-              margin-right: 10px;
-              cursor: pointer;
-              img {
-                width: 100%;
-                height: 100%;
-              }
-            }
-          }
-        }
-        .menuItemQuanping {
-          width: 10%;
-          margin-right: 20px;
-          .menuFor {
-            text-align: center;
-            margin: 0 auto;
-            .itemIcon {
-              width: 24px;
-              height: 24px;
-              cursor: pointer;
-              img {
-                width: 100%;
-                height: 100%;
-              }
-            }
-          }
-        }
-        .user {
-          width: 15%;
-          height: 100%;
-          margin-right: 30px;
-          .el-dropdown {
-            cursor: pointer;
-            height: 100%;
-            img {
-              width: 32px;
-              height: 32px;
-              margin-top: 5px;
-            }
-          }
-        }
-        .time {
-          width: 93px;
-          height: 36px;
-          .top {
-            width: 100%;
-            height: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
-            .time_date {
-              width: 50px;
-              text-align: center;
-              color: #fff;
-            }
-            span {
-              border: 0.2px solid #000;
-              background-color: #000;
-            }
-            .weather {
-              width: 50%;
-              display: flex;
-              align-items: center;
-              color: #fff;
-              border-left: 1px solid #ccc;
-              margin-left: 5px;
-              padding-left: 5px;
-              img {
-                width: 10px;
-                height: 10px;
-              }
-              .weather_text {
-                font-size: 12px;
-                margin-left: 2px;
-              }
-            }
-          }
-          .date {
-            width: 100%;
-            height: 50%;
-            text-align: center;
-            font-size: 20px;
-            color: #fff;
-            letter-spacing: 1px;
-          }
-        }
+        color: #61ff3a;
+        justify-content: space-between;
+        font-size: 1vw;
      }
    }
    .left-sidebar {
-      width: 18%;
+      width: 31%;
      height: calc(100% - 90px);
      position: absolute;
      top: 60px;
      left: 0;
-      pointer-events: auto;
      padding: 0;
      margin: 0;
-      background: url(../img/botom-left.png);
-      background-size: 100% 105%;
-      background-repeat: no-repeat;
-      background-position: center;
      padding: 0 40px;
      .stats {
-        width: 80%;
-        height: 280px;
-        margin-top: 15%;
+        width: 60%;
+        height: 100px;
+        margin-top: 5%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
-        color: #fff;
+        color: #0144ef;
        font-size: 20px;
        font-weight: 600;
        .stat-item {
-          width: 50%;
-          height: 50%;
+          width: 45%;
+          height: 100%;
          background: url(../img/bottom-waring.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          // 禁止换行
          white-space: nowrap;
+          margin-left: 2%;
+          margin-right: 3%;
          .stat-name {
            width: 100%;
            height: 50%;
-            line-height: 70px;
+            line-height: 42px;
            text-align: center;
+            span {
+              font-size: 3vw;
+            }
          }
        }
      }
      .drone-list {
-        width: 80%;
-        height: calc(100% - 280px);
+        width: 100%;
+        height: calc(100% - 140px);
        margin-top: 25px;
+        overflow: hidden;
        .title {
          width: 100%;
          height: 40px;
        }
        ul {
          width: 100%;
-          height: calc(75% - 40px);
+          height: 100%;
          padding: 0;
          margin: 0;
-          overflow: auto;
+          overflow-y: auto;
+          -webkit-overflow-scrolling: touch;
+          touch-action: pan-y; /* 允许垂直方向的触摸滑动 */
          margin-top: 10px;
+
          li {
-            width: 100%;
-            height: 83px;
-            border-bottom: 1px dashed #ccc;
-            .top {
-              width: 100%;
-              height: 30%;
-              display: flex;
-              align-items: center;
-              margin-top: 5px;
-              .left {
-                width: 20px;
-                height: 20px;
-                background: url(../img/index.png);
-                background-size: 100% 100%;
-                background-repeat: no-repeat;
-                background-position: center;
-                text-align: center;
-                line-height: 20px;
-                font-size: 10px;
-                color: #fff;
-              }
-              .text {
-                width: calc(100% - 20px);
-                height: 100%;
-                margin-left: 10px;
-                font-size: 14px;
-                font-weight: 400;
-                color: #d1f2ff;
-                text-align: left;
-                line-height: 20px;
-              }
-            }
-            .main {
-              width: calc(100% - 30px);
-              height: 65%;
-              margin-left: 30px;
-              .top_main {
-                width: 100%;
+            width: 95%;
+            padding: 5px;
+            color: #0144ef;
+            margin-left: 2%;
+            margin-top: 3%;
+            position: relative;
+            display: flex;
+            pointer-events: auto;
+            .details-one {
+              width: 60%;
+              height: 100%;
+              background: url(../img/uavBackfff.png);
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              background-position: center;
+              pointer-events: auto;
+              .top {
+                width: 98%;
                height: 50%;
                display: flex;
-                align-items: center;
-                color: #fff;
-                font-size: 12px;
-                font-weight: 400;
-                text-align: left;
+                align-items: baseline;
+                margin-left: 5%;
+                position: relative;
+                .left {
+                  width: 20px;
+                  height: 20px;
+                  background: url(../img/index.png);
+                  background-size: 100% 100%;
+                  background-repeat: no-repeat;
+                  background-position: center;
+                  text-align: center;
+                  font-size: 10px;
+                  position: absolute;
+                  top: 60%;
+                  transform: translateY(-50%);
+                  line-height: 20px;
+                }
                .text {
-                  width: 50%;
+                  width: 68%;
+                  height: 100%;
+                  margin-left: 15%;
+                  font-size: 16px;
+                  font-weight: 400;
+                  text-align: left;
+                  line-height: 35px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                }
+              }
+              .main {
+                width: calc(100% - 30px);
+                height: 50%;
+                margin-left: 20px;
+                .top_main {
+                  width: 100%;
+                  height: 100%;
+                  display: flex;
+                  align-items: center;
+                  font-weight: 400;
+                  text-align: left;
+                  .text {
+                    width: 50%;
+                    .color-ef {
+                      color: #0144ef;
+                      font-size: 1.09vw;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    }
+                    .text-fff {
+                      color: #000;
+                      font-size: 1.09vw;
+                    }
+                  }
+                }
+              }
+            }
+            .details-all {
+              width: 60%;
+              height: 100%;
+              background: url(../img/uavBackfff-big.png);
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              background-position: center;
+              pointer-events: auto;
+              .top {
+                width: 98%;
+                height: 30px;
+                display: flex;
+                align-items: baseline;
+                margin-left: 5%;
+                position: relative;
+                .left {
+                  width: 20px;
+                  height: 20px;
+                  background: url(../img/index.png);
+                  background-size: 100% 100%;
+                  background-repeat: no-repeat;
+                  background-position: center;
+                  text-align: center;
+                  font-size: 10px;
+                  position: absolute;
+                  top: 60%;
+                  transform: translateY(-50%);
+                  line-height: 20px;
+                }
+                .text {
+                  width: 68%;
+                  height: 100%;
+                  margin-left: 15%;
+                  font-size: 16px;
+                  font-weight: 400;
+                  text-align: left;
+                  line-height: 35px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                }
+              }
+              .content-main {
+                width: calc(100% - 20px);
+                height: 92%;
+                margin-left: 20px;
+                .color-ef {
+                  color: #0144ef;
+                  font-size: 1.09vw;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                }
+                .text-fff {
+                  color: #000;
+                  font-size: 1.09vw;
+                }
+                .text-fff-time {
+                  color: #000;
+                  font-size: 1vw;
+                }
+                .content-top {
+                  width: calc(100% - 10px);
+                  height: 30px;
+                  display: flex;
+                  align-items: center;
+                  font-weight: 400;
+                  text-align: left;
+                  .top-left {
+                    width: 50%;
+                  }
+                  .top-right {
+                    width: 50%;
+                  }
+                }
+                .content-serial {
+                  width: 100%;
+                  height: 7%;
+                  text-align: left;
+                  display: flex;
+                  align-items: center;
+                  .text-fff {
+                    // 超出隐藏
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  }
+                  .color-ef-fw {
+                    color: #0144ef;
+                    font-size: 1.09vw;
+                    font-weight: 600;
+                  }
+                  .content-potions {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    p {
+                      padding: 0;
+                      margin: 0;
+                    }
+                    .content-potions-lon {
+                      width: 100%;
+                      display: flex;
+                      flex-wrap: wrap;
+                      align-items: center;
+                      .text {
+                        width: 100%;
+                        font-size: 1.09vw;
+                      }
+                      .characters {
+                        width: 100%;
+                        font-size: 1.09vw;
+                        color: #000;
+                      }
+                    }
+                    .content-potions-bottom {
+                      width: 100%;
+                      display: flex;
+                      text-align: left;
+                      align-items: center;
+                      .content-text {
+                        width: 30%;
+                        display: flex;
+                        flex-wrap: wrap;
+                        text-align: left;
+                        align-items: center;
+                        .text {
+                          width: 100%;
+                          font-size: 1.09vw;
+                        }
+                        .characters {
+                          width: 100%;
+                          font-size: 1.09vw;
+                          color: #000;
+                        }
+                      }
+                    }
+                  }
+                  .content-fs {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    text-align: left;
+                    .content-fs-lon {
+                      width: 100%;
+                      display: flex;
+                      flex-wrap: wrap;
+                      align-items: center;
+                    }
+                    .content-fs-heig {
+                      width: 100%;
+                      display: flex;
+                      flex-wrap: wrap;
+                      align-items: center;
+                      .text {
+                        width: 25%;
+                        font-size: 1.09vw;
+                      }
+                      .characters {
+                        width: 50%;
+                        font-size: 1.09vw;
+                        color: #000;
+                      }
+                    }
+                    p {
+                      padding: 0;
+                      margin: 0;
+                    }
+                    .text {
+                      width: 100%;
+                      font-size: 1.09vw;
+                    }
+                    .characters {
+                      width: 100%;
+                      font-size: 1.09vw;
+                      color: #000;
+                    }
+                  }
+                  .btns {
+                    width: calc(100% - 20px);
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-around;
+                    .el-button--primary {
+                      background-color: #0144ef;
+                      border-color: #0144ef;
+                    }
+                  }
+                }
+              }
+            }
+            .navigation-content {
+              width: 100px;
+              height: 200px;
+              background: url(../img/uavBackfff-big.png);
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              background-position: center;
+              margin-left: 9px;
+              padding: 20px;
+              pointer-events: auto;
+              .navigation-content-text {
+                text-align: left;
+                margin-bottom: 5px;
+                font-size: 1.09vw;
+                .color-ef-fw {
+                  color: #0144ef;
+                  font-size: 1.09vw;
+                  font-weight: 600;
+                }
+                .text-fff {
+                  color: #000;
+                  font-size: 1.09vw;
+                }
+              }
+              .navigation-content-qrcode {
+                width: 80px;
+                height: 80px;
+                margin: 0 auto;
+                margin-top: 5px;
+                margin-bottom: 5px;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+            }
+            .navigation-content-btn {
+              width: 100%;
+              .btns {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+                .el-button--primary {
+                  background-color: #0144ef;
+                  border-color: #0144ef;
                }
              }
            }
@ -728,3 +902,21 @@ body {
    }
  }
 }
+
+.zoom-control {
+  position: absolute;
+  left: 60px;
+  bottom: 10px;
+  z-index: 1000;
+  color: #000;
+  .zoom-control-inner {
+    border: 1px solid #666666;
+    border-top: none;
+    color: #333333;
+    font-size: 13px;
+    text-align: center;
+    margin: 1px;
+    will-change: contents, width;
+    transition: all 0.25s;
+  }
+}
--- a/src/assets/img/Vector.png
+++ b/src/assets/img/Vector.png
--- a/src/assets/img/bottom-waring.png
+++ b/src/assets/img/bottom-waring.png
--- a/src/assets/img/icon_dev.png
+++ b/src/assets/img/icon_dev.png
--- a/src/assets/img/icon_model.png
+++ b/src/assets/img/icon_model.png
--- a/src/assets/img/icon_postions.png
+++ b/src/assets/img/icon_postions.png
--- a/src/assets/img/icon_uav.png
+++ b/src/assets/img/icon_uav.png
--- a/src/assets/img/icon_user.png
+++ b/src/assets/img/icon_user.png
--- a/src/assets/img/mute.png
+++ b/src/assets/img/mute.png
--- a/src/assets/img/query.png
+++ b/src/assets/img/query.png
--- a/src/assets/img/refresh.png
+++ b/src/assets/img/refresh.png
--- a/src/assets/img/setup.png
+++ b/src/assets/img/setup.png
--- a/src/assets/img/sound.png
+++ b/src/assets/img/sound.png
--- a/src/assets/img/top.png
+++ b/src/assets/img/top.png
--- a/src/assets/img/uavBackfff-big.png
+++ b/src/assets/img/uavBackfff-big.png
--- a/src/assets/img/uavBackfff-big.svg
+++ b/src/assets/img/uavBackfff-big.svg
@ -0,0 +1,18 @@
+<svg width="260" height="350" viewBox="0 0 260 350" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_218_536)">
+<path d="M10 18C10 13.5817 13.5817 10 18 10H242C246.418 10 250 13.5817 250 18V332C250 336.418 246.418 340 242 340H18C13.5817 340 10 336.418 10 332V18Z" fill="white"/>
+<path d="M18 11H242C245.866 11 249 14.134 249 18V332C249 335.866 245.866 339 242 339H18C14.134 339 11 335.866 11 332V18C11 14.134 14.134 11 18 11Z" stroke="#0144EF" stroke-width="2"/>
+</g>
+<defs>
+<filter id="filter0_d_218_536" x="0" y="0" width="260" height="350" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.00392157 0 0 0 0 0.266667 0 0 0 0 0.937255 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_218_536"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_218_536" result="shape"/>
+</filter>
+</defs>
+</svg>
--- a/src/assets/img/uavBackfff.png
+++ b/src/assets/img/uavBackfff.png
--- a/src/assets/img/uavBackred-big.png
+++ b/src/assets/img/uavBackred-big.png
--- a/src/assets/img/uavBackred.png
+++ b/src/assets/img/uavBackred.png
--- a/src/assets/img/user.png
+++ b/src/assets/img/user.png
--- a/src/main.js
+++ b/src/main.js
@ -9,10 +9,10 @@ import "@/components/index.js";
 import "@/plugins/element";
 // 样式加载
 import "@/assets/css/index.scss";
-
+import FitScreen from "@fit-screen/vue";
 // 全局事件总线（‌bus）‌
 Vue.prototype.$bus = new Vue({});
-
+Vue.use(FitScreen);
 new Vue({
  router,
  store,
--- a/src/plugins/element.js
+++ b/src/plugins/element.js
@ -32,7 +32,8 @@ import {
  Upload,
  Dropdown,
  DropdownMenu,
-  DropdownItem
+  DropdownItem,
+  Slider
 } from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";

@ -67,6 +68,7 @@ Vue.use(Switch);
 Vue.use(Timeline);
 Vue.use(TimelineItem);
 Vue.use(Upload);
+Vue.use(Slider);

 Vue.prototype.$message = Message;
 Vue.prototype.$confirm = MessageBox.confirm;
--- a/src/router/index.js
+++ b/src/router/index.js
@ -16,6 +16,9 @@ const routes = [
        // 登录已过期，执行自动退出操作
        localStorage.removeItem("setToken");
        localStorage.removeItem("expires");
+        localStorage.removeItem("userId");
+        localStorage.removeItem("isAdmin");
+        localStorage.removeItem("PositionIds");
        next("/login");
      }
      const token = localStorage.getItem("setToken");
--- a/src/store/getters.js
+++ b/src/store/getters.js
@ -6,6 +6,12 @@ const getters = {
  map: (state) => state.map.map,
  adsbisFlag: (state) => state.map.adsbisFlag, //是否显示adsb
  targetCode: (state) => state.chart.targetCode, //防护目标单一点击更改两侧数据
-  airspaceCode: (state) => state.chart.airspaceCode //低空空域单一点击更改两侧数据
+  airspaceCode: (state) => state.chart.airspaceCode, //低空空域单一点击更改两侧数据
+  positionPoint: (state) => state.chart.positionPoint, //实时位置更新
+  isZoomedIn: (state) => state.chart.isZoomedIn, //音频是否打开
+  SliderValue: (state) => state.chart.SliderValue, //音量值
+  checkFlag: (state) => state.chart.checkFlag, //轨迹查看按钮
+  clearTrajectory: (state) => state.chart.clearTrajectory, //清空轨迹
+  lonAndLat: (state) => state.map.lonAndLat // 无人机距离我的位置
 };
 export default getters;
--- a/src/store/modules/chart.js
+++ b/src/store/modules/chart.js
@ -8,7 +8,13 @@ const user = {
      endTime: ""
    },
    targetCode: {},
-    airspaceCode: {}
+    airspaceCode: {},
+
+    positionPoint: false, // 位置上报
+    isZoomedIn: true, // 音频是否打开
+    SliderValue: 0, // 音频滑动条值
+    checkFlag: false, // 轨迹查看按钮
+    clearTrajectory: false // 清除过往轨迹
  },

  mutations: {
@ -29,6 +35,21 @@ const user = {
    },
    SET_AIRSPACECODE: (state, value) => {
      state.airspaceCode = value;
+    },
+    SET_POSITIONPOINT: (state, value) => {
+      state.positionPoint = value;
+    },
+    SET_ISZOOMEDIN: (state, value) => {
+      state.isZoomedIn = value;
+    },
+    SET_SILDERVALUE: (state, value) => {
+      state.SliderValue = value;
+    },
+    SET_CHECKFLAG: (state, value) => {
+      state.checkFlag = value;
+    },
+    SET_CLEARTRAJECTORY: (state, value) => {
+      state.clearTrajectory = value;
    }
  },

--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@ -1,7 +1,8 @@
 const user = {
  state: {
    map: null,
-    adsbisFlag: false
+    adsbisFlag: false,
+    lonAndLat: []
  },

  mutations: {
@ -10,6 +11,9 @@ const user = {
    },
    SET_ADSBIS_FLAG: (state, value) => {
      state.adsbisFlag = value;
+    },
+    SET_LONANDLAT: (state, value) => {
+      state.lonAndLat = value;
    }
  },

--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -33,6 +33,9 @@ service.interceptors.response.use(
      // 登录已过期，执行自动退出操作
      localStorage.removeItem("setToken");
      localStorage.removeItem("expires");
+      localStorage.removeItem("userId");
+      localStorage.removeItem("isAdmin");
+      localStorage.removeItem("PositionIds");
      router.push("/login");
    }
    const res = response.data;
--- a/src/views/contentData/LeftSidebar/index.vue
+++ b/src/views/contentData/LeftSidebar/index.vue
--- a/src/views/contentData/headerTop/index
+++ b/src/views/contentData/headerTop/index
@ -0,0 +1,295 @@
+<template>
+  <div class="header">
+    <div class="header-left">
+      <div class="time_date">
+        {{ currentDate }} <span>{{ currentTime }}</span>
+      </div>
+    </div>
+    <div class="header-main">
+      <div class="textTile"></div>
+    </div>
+    <div class="header-menu">
+      <span>{{ leftText }}</span>
+      <span style="width: 20px"> | </span>
+      <span>{{ rightText }}</span>
+    </div>
+    <div v-if="showPermissionPrompt" class="permission-prompt">
+      <p>请允许地理位置权限以启用定位功能</p>
+      <p>您可以在浏览器地址栏设置中启用位置访问，或点击下方按钮重试</p>
+      <button @click="retryTracking">重试定位</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { HomeSyncLocation } from "@/api/home";
+import Geolocation from "ol/Geolocation";
+import { fromLonLat, transform } from "ol/proj";
+import { Vector as VectorLayer } from "ol/layer";
+import VectorSource from "ol/source/Vector";
+import Point from "ol/geom/Point";
+import { Style, Icon, Stroke } from "ol/style";
+import Feature from "ol/Feature";
+export default {
+  name: "header-top",
+  props: {
+    homeData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      currentTime: "",
+      currentDate: "",
+      isAdmins: false,
+      leftText: "平台已连接",
+      rightText: "定位正常",
+      latitude: "",
+      longitude: "",
+      lastUpdated: "",
+      timer: null,
+      locationTimer: null,
+      geolocation: null,
+      showPermissionPrompt: false,
+      retryCount: 0,
+      positionLayer: null
+    };
+  },
+  computed: {
+    ...mapGetters(["positionPoint"])
+  },
+  mounted() {
+    console.log("组件挂载，启动定位");
+    this.isAdmins = JSON.parse(localStorage.getItem("isAdmin"));
+    this.updateTime();
+
+    this.timer = setInterval(() => {
+      this.updateTime();
+    }, 1000);
+    this.startTracking();
+  },
+  watch: {
+    positionPoint: {
+      handler(newVal) {
+        if (newVal) {
+          // this.$message.success(this.latitude + ", " + this.longitude);
+          console.log("位置更新", newVal, this.latitude, this.longitude);
+          if (newVal && this.latitude && this.longitude && window.olMap) {
+            const newLocation = fromLonLat(
+              [this.longitude, this.latitude],
+              "EPSG:3857"
+            );
+            this.$message.success("定位成功");
+            this.updateMapPosition(this.longitude, this.latitude);
+            const zoomLevel = 13;
+            window.olMap.getView().animate({
+              center: newLocation,
+              zoom: zoomLevel
+            });
+          } else {
+            this.$message.error("定位失败,请稍后重试");
+          }
+          this.$store.commit("SET_POSITIONPOINT", false);
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    updateMapPosition(lng, lat) {
+      // 移除旧的 positionLayer（如果存在）
+      if (this.positionLayer) {
+        window.olMap.removeLayer(this.positionLayer);
+        this.positionLayer = null;
+      }
+      let center = fromLonLat([lng, lat]);
+      var iconFeature = new Feature({
+        geometry: new Point(center),
+        name: "当前位置",
+        population: 4000,
+        rainfall: 500
+      });
+      var iconStyle = new Style({
+        image: new Icon({
+          anchor: [0.5, 46],
+          scale: 0.4,
+          anchorXUnits: "fraction",
+          anchorYUnits: "pixels",
+          src: require("@/assets/img/icon_dev.png")
+        })
+      });
+      iconFeature.setStyle(iconStyle);
+      var vectorSource = new VectorSource({
+        features: [iconFeature]
+      });
+      this.positionLayer = new VectorLayer({
+        source: vectorSource
+      });
+
+      window.olMap.addLayer(this.positionLayer);
+    },
+    updateTime() {
+      const now = new Date();
+      this.currentTime = now.toLocaleTimeString();
+      this.currentDate = now.toLocaleDateString();
+    },
+    startTracking() {
+      if (!window.olMap) {
+        console.error("OpenLayers 地图未传入，延迟重试");
+        setTimeout(() => this.startTracking(), 1000);
+        return;
+      }
+
+      // 清除旧的 locationTimer
+      if (this.locationTimer) {
+        clearInterval(this.locationTimer);
+      }
+
+      // 初始化 Geolocation
+      this.geolocation = new Geolocation({
+        trackingOptions: {
+          enableHighAccuracy: true,
+          timeout: 30000,
+          maximumAge: 10000
+        },
+        projection: window.olMap.getView().getProjection()
+      });
+
+      // 监听定位错误
+      this.geolocation.on("error", (error) => {
+        let message = "";
+        this.retryCount = this.retryCount || 0;
+        switch (error.code) {
+          case error.PERMISSION_DENIED:
+            message = "请允许地理位置权限";
+            this.showPermissionPrompt = true;
+            this.$message.error("请在浏览器设置中启用地理位置权限");
+            break;
+          case error.POSITION_UNAVAILABLE:
+            message = "无法获取位置信息";
+            if (this.retryCount < 3) {
+              this.retryCount++;
+              setTimeout(() => this.startTracking(), 5000);
+            } else {
+              this.$message.error("多次尝试后仍无法定位，请检查设备设置");
+            }
+            break;
+          case error.TIMEOUT:
+            message = "获取位置超时";
+            if (this.retryCount < 3) {
+              this.retryCount++;
+              setTimeout(() => this.startTracking(), 5000);
+            } else {
+              this.$message.error("定位超时，请检查网络或 GPS 信号");
+            }
+            break;
+          default:
+            message = "未知错误";
+        }
+        this.leftText = message;
+        this.rightText = "定位异常";
+      });
+
+      // 开启定位
+      this.geolocation.setTracking(true);
+
+      // 每 2 秒传递一次经纬度
+      this.locationTimer = setInterval(() => {
+        const coordinates = this.geolocation.getPosition();
+        if (coordinates) {
+          this.handleSuccess(coordinates);
+        }
+      }, 2000);
+    },
+    handleSuccess(coordinates) {
+      // 转换为 WGS84 坐标
+      const wgs84 = transform(coordinates, "EPSG:3857", "EPSG:4326");
+      this.longitude = wgs84[0];
+      this.latitude = wgs84[1];
+      this.lastUpdated = new Date().toLocaleString(); //EPSG:3857 转 EPSG:4326
+      this.showPermissionPrompt = false;
+      this.retryCount = 0;
+
+      // 传递经纬度到 API
+      let params = {
+        lat: this.latitude,
+        lon: this.longitude,
+        userId: localStorage.getItem("userId")
+      };
+      this.updateMapPosition(this.longitude, this.latitude);
+      // console.log("触发上报:", {
+      //   latitude: this.latitude,
+      //   longitude: this.longitude,
+      //   time: this.lastUpdated
+      // });
+      HomeSyncLocation(params)
+        .then((res) => {
+          if (res.code === 0) {
+            this.leftText = "平台已连接";
+            this.rightText = "定位正常";
+          } else {
+            this.leftText = "平台连接失败";
+            this.rightText = "定位异常";
+          }
+        })
+        .catch((err) => {
+          this.leftText = "平台连接失败";
+          this.rightText = "定位异常";
+        });
+    },
+    retryTracking() {
+      this.showPermissionPrompt = false;
+      this.retryCount = 0;
+      this.startTracking();
+    }
+  },
+  beforeDestroy() {
+    if (this.geolocation) {
+      this.geolocation.setTracking(false);
+    }
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+    if (this.locationTimer) {
+      clearInterval(this.locationTimer);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.logo {
+  font-size: 20px;
+  font-weight: bold;
+}
+.time {
+  font-size: 14px;
+}
+.actions span {
+  margin-left: 10px;
+  cursor: pointer;
+}
+.permission-prompt {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: #fff;
+  padding: 15px;
+  border: 1px solid #ddd;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 10000;
+  pointer-events: auto;
+}
+.permission-prompt p {
+  margin: 0 0 10px;
+}
+.permission-prompt button {
+  padding: 5px 10px;
+  background: #409eff;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
+</style>
--- a/src/views/contentData/headerTop/index.vue
+++ b/src/views/contentData/headerTop/index.vue
@ -1,129 +1,38 @@
 <template>
  <div class="header">
    <div class="header-left">
-      <div class="header-logo"></div>
+      <div class="time_date">
+        {{ currentDate }} <span>{{ currentTime }}</span>
+      </div>
    </div>
    <div class="header-main">
-      <div class="textTile">
-        <img src="@/assets/img/title.svg" alt="" />
-      </div>
+      <div class="textTile"></div>
    </div>
    <div class="header-menu">
-      <div class="menuItem" v-if="isAdmins">
-        <div
-          class="menuFor"
-          v-for="(item, index) in menuList"
-          :key="index"
-          @click="handleMenuClick(item)"
-        >
-          <div class="itemIcon">
-            <el-tooltip
-              class="item"
-              effect="dark"
-              :content="item.name"
-              placement="bottom"
-            >
-              <img
-                :src="activeId === item.id ? item.iconActive : item.icon"
-                :alt="item.name"
-              />
-            </el-tooltip>
-          </div>
-        </div>
-      </div>
-      <div class="menuItemQuanping">
-        <div
-          class="menuFor"
-          v-for="(item, index) in quanping"
-          :key="index"
-          @click="handlefdClick(item)"
-        >
-          <div class="itemIcon">
-            <el-tooltip
-              class="item"
-              effect="dark"
-              :content="item.name"
-              placement="bottom"
-            >
-              <img :src="item.icon" :alt="item.name" />
-            </el-tooltip>
-          </div>
-        </div>
-      </div>
-      <div class="user">
-        <el-dropdown trigger="click">
-          <img :size="30" src="@/assets/img/menu/iconUser.png" />
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item @click.native="passClick">
-              修改密码
-            </el-dropdown-item>
-            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </div>
-      <div class="time">
-        <div class="top">
-          <div class="time_date">{{ currentTime }}</div>
-          <div class="weather">
-            <img src="@/assets/img/menu/tianqi.png" alt="" />
-            <div class="weather_text">
-              {{ homeView.weather?.now.temperature + "°C" }}
-            </div>
-          </div>
-        </div>
-        <div class="date">{{ currentDate }}</div>
-      </div>
+      <span>{{ leftText }}</span>
+      <span style="width: 20px"> | </span>
+      <span>{{ rightText }}</span>
+    </div>
+    <div v-if="showPermissionPrompt" class="permission-prompt">
+      <p>请允许地理位置权限以启用定位功能</p>
+      <p>您可以在浏览器地址栏设置中启用位置访问，或点击下方按钮重试</p>
+      <button @click="retryTracking">重试定位</button>
    </div>
-    <el-dialog
-      :title="title"
-      :visible.sync="showDialog"
-      :before-close="handleClose"
-      append-to-body
-    >
-      <!-- 对话框组件 -->
-      <component :is="currentDialog"></component>
-    </el-dialog>
-    <el-dialog
-      :title="titleDialog"
-      :visible.sync="dialog"
-      :before-close="handleClose"
-      append-to-body
-      class="el-dialog-center"
-    >
-      <my-form
-        :formNewList="formDrawerList"
-        :fromItem="fromItem"
-        dialogImageUrl
-        @determine="determine"
-        @handleClose="handleClose"
-        labelWidth="120px"
-      >
-      </my-form>
-    </el-dialog>
  </div>
 </template>

 <script>
-// 导入各个对话框组件
-import PermissionDialog from "../../menuData/PermissionDialog.vue"; // ID: 1
-import DeviceDialog from "../../menuData/DeviceDialog.vue"; // ID: 2
-import LogDialog from "../../menuData/LogDialog.vue"; // ID: 3
-import AlertDialog from "../../menuData/AlertDialog.vue"; // ID: 5
-import PositionDialog from "../../menuData/PositionDialog.vue"; // ID: 6
-import AnalysisDialog from "../../menuData/AnalysisDialog.vue"; // ID: 7
-import WhitListDialog from "../../menuData/WhitListDialog.vue"; // ID: 8
-import { userUpdatepwd } from "@/api/user.js";
+import { mapGetters } from "vuex";
+import { HomeSyncLocation } from "@/api/home";
+import { fromLonLat } from "ol/proj";
+import { Vector as VectorLayer } from "ol/layer";
+import VectorSource from "ol/source/Vector";
+import Point from "ol/geom/Point";
+import { Style, Icon } from "ol/style";
+import Feature from "ol/Feature";
+
 export default {
  name: "header-top",
-  components: {
-    PermissionDialog,
-    DeviceDialog,
-    LogDialog,
-    AlertDialog,
-    PositionDialog,
-    AnalysisDialog,
-    WhitListDialog
-  },
  props: {
    homeData: {
      type: Object,
@ -132,211 +41,209 @@ export default {
  },
  data() {
    return {
-      menuList: [
-        {
-          id: 1,
-          name: "人员",
-          icon: require("@/assets/img/menu/xitongquanxian.png"),
-          iconActive: require("@/assets/img/menu/xitongquanxian-hove.png")
-        },
-        {
-          id: 2,
-          name: "设备",
-          icon: require("@/assets/img/menu/shebei.png"),
-          iconActive: require("@/assets/img/menu/shebei-hove.png")
-        },
-        {
-          id: 3,
-          name: "日志",
-          icon: require("@/assets/img/menu/rizhi.png"),
-          iconActive: require("@/assets/img/menu/rizhi-hove.png")
-        },
-        {
-          id: 4,
-          name: "首页",
-          icon: require("@/assets/img/menu/tongji.png"),
-          iconActive: require("@/assets/img/menu/tongji-hove.png")
-        },
-        {
-          id: 5,
-          name: "预警",
-          icon: require("@/assets/img/menu/yujing.png"),
-          iconActive: require("@/assets/img/menu/yujing-hove.png")
-        },
-        {
-          id: 6,
-          name: "防区",
-          icon: require("@/assets/img/menu/zhendi.png"),
-          iconActive: require("@/assets/img/menu/zhendi-hove.png")
-        },
-        {
-          id: 7,
-          name: "统计分析",
-          icon: require("@/assets/img/menu/tjfx.png"),
-          iconActive: require("@/assets/img/menu/tjfx-hove.png")
-        },
-        {
-          id: 8,
-          name: "白名单",
-          icon: require("@/assets/img/menu/bmd.png"),
-          iconActive: require("@/assets/img/menu/bmd-hove.png")
-        }
-      ],
-      quanping: [
-        {
-          id: 8,
-          name: "全屏",
-          icon: require("@/assets/img/menu/quanping.png"),
-          iconActive: require("@/assets/img/menu/quanping.png")
-        }
-      ],
-      activeId: 4,
      currentTime: "",
      currentDate: "",
-      currentDialog: "",
-      showDialog: false,
-      title: "",
-      titleDialog: "",
-      homeView: {
-        weather: {
-          now: {
-            temperature: 0
-          }
-        }
-      },
-      formDrawerList: [
-        {
-          label: "原密码",
-          type: "input",
-          model: "oldPwd",
-          rules: [{ required: true, message: "请输入原密码" }],
-          showPassword: true
-        },
-        {
-          label: "新密码",
-          type: "input",
-          model: "newPwd",
-          rules: [{ required: true, message: "请输入新密码" }],
-          showPassword: true
-        }
-      ],
-      fromItem: {},
-      dialog: false,
-      isAdmins: false
+      isAdmins: false,
+      leftText: "平台已连接",
+      rightText: "定位正常",
+      latitude: "",
+      longitude: "",
+      lastUpdated: "",
+      timer: null,
+      locationTimer: null,
+      showPermissionPrompt: false,
+      retryCount: 0,
+      positionLayer: null
    };
  },
-  created() {},
-  watch: {
-    homeData: {
-      handler(newVal) {
-        this.homeView = newVal;
-      },
-      deep: true
-    }
+  computed: {
+    ...mapGetters(["positionPoint"])
  },
  mounted() {
    this.isAdmins = JSON.parse(localStorage.getItem("isAdmin"));
    this.updateTime();
-    setInterval(this.updateTime, 1000); // 每秒更新一次时间
+    this.timer = setInterval(() => {
+      this.updateTime();
+    }, 1000);
+    this.startTracking();
+  },
+  watch: {
+    positionPoint: {
+      handler(newVal) {
+        if (newVal) {
+          if (newVal && this.latitude && this.longitude && window.olMap) {
+            const newLocation = fromLonLat(
+              [this.longitude, this.latitude],
+              "EPSG:3857"
+            );
+            this.$message.success("定位成功");
+            this.$store.commit("SET_LONANDLAT", newLocation);
+            this.updateMapPosition(this.longitude, this.latitude);
+            window.olMap.getView().animate({
+              center: newLocation,
+              zoom: 13
+            });
+          }
+          if (this.latitude === "" && this.longitude === "") {
+            this.$message.error("定位失败，请稍后重试");
+          }
+          this.$store.commit("SET_POSITIONPOINT", false);
+        }
+      },
+      deep: true
+    }
  },
  methods: {
+    updateMapPosition(lng, lat) {
+      // Remove existing position layer
+      if (this.positionLayer) {
+        window.olMap.removeLayer(this.positionLayer);
+        this.positionLayer = null;
+      }
+
+      const center = fromLonLat([lng, lat], "EPSG:3857");
+      const iconFeature = new Feature({
+        geometry: new Point(center),
+        name: "当前位置"
+      });
+
+      const iconStyle = new Style({
+        image: new Icon({
+          anchor: [0.5, 46],
+          scale: 0.4,
+          anchorXUnits: "fraction",
+          anchorYUnits: "pixels",
+          src: require("@/assets/img/icon_dev.png")
+        })
+      });
+
+      iconFeature.setStyle(iconStyle);
+      const vectorSource = new VectorSource({
+        features: [iconFeature]
+      });
+
+      this.positionLayer = new VectorLayer({
+        source: vectorSource
+      });
+
+      window.olMap.addLayer(this.positionLayer);
+    },
    updateTime() {
      const now = new Date();
-      this.currentTime = now.toLocaleTimeString(); // 获取当前时间，格式为本地时间格式
-      this.currentDate = now.toLocaleDateString(); // 获取当前日期，格式为本地日期格式
+      this.currentTime = now.toLocaleTimeString();
+      this.currentDate = now.toLocaleDateString();
    },
-    passClick() {
-      this.fromItem = {};
-      this.titleDialog = "修改密码";
-      // 修改密码的逻辑
-      this.dialog = true;
-      console.log("修改密码");
-    },
-    logout() {
-      // 退出登录的逻辑
-      localStorage.removeItem("setToken");
-      localStorage.removeItem("userId");
-      localStorage.removeItem("userName");
-      localStorage.removeItem("isAdmin");
-      this.$router.push("/login");
-    },
-    // 确定按钮
-    determine(value) {
-      let params = {};
-      params = value;
-      params.id = localStorage.getItem("userId");
-      userUpdatepwd(params).then((res) => {
-        if (res.code === 0) {
-          this.$message.success("修改成功");
-        }
-      });
-      this.dialog = false;
-    },
-    handlefdClick(value) {
-      if (document.fullscreenElement) {
-        document
-          .exitFullscreen()
-          .then(() => {
-            console.log("退出全屏模式");
-          })
-          .catch((err) => {
-            console.error(`退出全屏模式失败: ${err.message}`);
-          });
-      } else {
-        document.documentElement
-          .requestFullscreen()
-          .then(() => {
-            console.log("进入全屏模式");
-          })
-          .catch((err) => {
-            console.error(`进入全屏模式失败: ${err.message}`);
-          });
+    startTracking() {
+      if (!window.AMap) {
+        console.error("高德地图 SDK 未加载，延迟重试");
+        this.$message.error("高德地图 SDK 加载失败");
+        setTimeout(() => this.startTracking(), 1000);
+        return;
      }
-    },

-    handleMenuClick(value) {
-      this.activeId = value.id; // 点击时更新激活的ID
-      this.title = value.name; // 点击时更新对话框标题
-      // 根据ID决定显示哪个对话框
-      switch (value.id) {
-        case 1:
-          this.currentDialog = "PermissionDialog";
-          this.showDialog = true;
-          break;
-        case 2:
-          this.currentDialog = "DeviceDialog";
-          this.showDialog = true;
-          break;
-        case 3:
-          this.currentDialog = "LogDialog";
-          this.showDialog = true;
-          break;
-        case 4:
-          this.showDialog = false;
-          break;
-        case 5:
-          this.currentDialog = "AlertDialog";
-          this.showDialog = true;
-          break;
-        case 6:
-          this.currentDialog = "PositionDialog";
-          this.showDialog = true;
-          break;
-        case 7:
-          this.currentDialog = "AnalysisDialog";
-          this.showDialog = true;
-          break;
-        case 8:
-          this.currentDialog = "WhitListDialog";
-          this.showDialog = true;
-          break;
+      // Clear existing location timer
+      if (this.locationTimer) {
+        clearInterval(this.locationTimer);
      }
+
+      // Initialize AMap Geolocation
+      AMap.plugin("AMap.Geolocation", () => {
+        const geolocation = new AMap.Geolocation({
+          enableHighAccuracy: true,
+          timeout: 30000,
+          maximumAge: 10000,
+          zoomToAccuracy: true
+        });
+
+        // Handle geolocation errors
+        geolocation.on("error", (error) => {
+          let message = "";
+          this.retryCount = this.retryCount || 0;
+
+          switch (error.info) {
+            case "PERMISSION_DENIED":
+              message = "请允许地理位置权限";
+              this.showPermissionPrompt = true;
+              this.$message.error("请在浏览器设置中启用地理位置权限");
+              break;
+            case "POSITION_UNAVAILABLE":
+              message = "无法获取位置信息";
+              if (this.retryCount < 3) {
+                this.retryCount++;
+                setTimeout(() => this.startTracking(), 5000);
+              } else {
+                this.$message.error("多次尝试后仍无法定位，请检查设备设置");
+              }
+              break;
+            case "TIMEOUT":
+              message = "获取位置超时";
+              if (this.retryCount < 3) {
+                this.retryCount++;
+                setTimeout(() => this.startTracking(), 5000);
+              } else {
+                this.$message.error("定位超时，请检查网络或 GPS 信号");
+              }
+              break;
+            default:
+              message = "未知错误";
+          }
+          this.leftText = message;
+          this.rightText = "定位异常";
+        });
+
+        // Start continuous tracking
+        this.locationTimer = setInterval(() => {
+          geolocation.getCurrentPosition((status, result) => {
+            if (status === "complete") {
+              this.handleSuccess(result.position);
+            }
+          });
+        }, 2000);
+      });
    },
-    handleClose() {
-      // 关闭对话框时清空激活的ID
-      this.activeId = 4;
-      this.showDialog = false;
-      this.dialog = false;
+    handleSuccess(position) {
+      this.longitude = position.lng;
+      this.latitude = position.lat;
+      this.lastUpdated = new Date().toLocaleString();
+      this.showPermissionPrompt = false;
+      this.retryCount = 0;
+
+      this.updateMapPosition(this.longitude, this.latitude);
+
+      const params = {
+        lat: this.latitude,
+        lon: this.longitude,
+        userId: localStorage.getItem("userId")
+      };
+      let newLocation = [this.longitude, this.latitude];
+      this.$store.commit("SET_LONANDLAT", newLocation);
+      HomeSyncLocation(params)
+        .then((res) => {
+          if (res.code === 0) {
+            this.leftText = "平台已连接";
+            this.rightText = "定位正常";
+          } else {
+            this.leftText = "平台连接失败";
+            this.rightText = "定位异常";
+          }
+        })
+        .catch((err) => {
+          this.leftText = "平台连接失败";
+          this.rightText = "定位异常";
+        });
+    },
+    retryTracking() {
+      this.showPermissionPrompt = false;
+      this.retryCount = 0;
+      this.startTracking();
+    }
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+    if (this.locationTimer) {
+      clearInterval(this.locationTimer);
    }
  }
 };
@ -347,13 +254,32 @@ export default {
  font-size: 20px;
  font-weight: bold;
 }
-
 .time {
  font-size: 14px;
 }
-
 .actions span {
  margin-left: 10px;
  cursor: pointer;
 }
+.permission-prompt {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: #fff;
+  padding: 15px;
+  border: 1px solid #ddd;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 10000;
+  pointer-events: auto;
+}
+.permission-prompt p {
+  margin: 0 0 10px;
+}
+.permission-prompt button {
+  padding: 5px 10px;
+  background: #409eff;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
 </style>
--- a/src/views/contentData/index.js
+++ b/src/views/contentData/index.js
@ -1,5 +1,20 @@
 import route from "@/router/index";
 import iconimg from "@/assets/img/dianweidingweiqizi.png";
+
+import { geom, layer, source } from "ol";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import Feature from "ol/Feature";
+import Point from "ol/geom/Point";
+import LineString from "ol/geom/LineString";
+import Style from "ol/style/Style";
+import Icon from "ol/style/Icon";
+import Stroke from "ol/style/Stroke";
+import Fill from "ol/style/Fill";
+import Text from "ol/style/Text";
+import CircleStyle from "ol/style/Circle";
+import { fromLonLat, toLonLat } from "ol/proj";
+
 export function allPositions(options, show, type, value) {
  options.forEach((item, index) => {
    let graphic = window.marsMap.getLayerById(item.id);
@ -344,130 +359,190 @@ function bindLayerPopup(graphicLayer, graphic) {
    );
  }
 }
-
-export function mapUavFiex(options) {
-  let map = window.marsMap; // 记录map
-  let graphicLayer = map.getLayerById("uavFiex");
+export function mapUavFiex(options, map) {
+  // 获取或创建矢量图层（对应 Mars3D 的 GraphicLayer）
+  let graphicLayer = map
+    .getLayers()
+    .getArray()
+    .find((layer) => layer.get("id") === "uavFiex");
  if (!graphicLayer) {
-    // eslint-disable-next-line no-undef
-    graphicLayer = new mars3d.layer.GraphicLayer({ id: "uavFiex" });
+    graphicLayer = new VectorLayer({
+      source: new VectorSource(),
+      zIndex: 10
+    });
+    graphicLayer.set("id", "uavFiex");
    map.addLayer(graphicLayer);
  }
-  if (options.length === 0) {
-    graphicLayer.remove();
-  } else {
-    options.forEach((item) => {
-      if (item.drone_lon !== 0 || item.drone_lat !== 0) {
-        let graphic = graphicLayer.getGraphicById(item.BatchId);
-        // let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点
-        //发现无人机
-        if (!graphic) {
-          // eslint-disable-next-line no-undef
-          graphic = new mars3d.graphic.Route({
-            id: item.BatchId,
-            name: "无人机",
-            maxCacheCount: -1,
-            polyline: {
-              width: 2,
-              opacity: 1,
-              randomColor: true,
-              show: true
-            },
-            // billboard: {
-            //   image: require("@/assets/img/uav.svg"),
-            //   scale: 0.5,
-            //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-            //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM
-            // },
-            model: {
-              scale: window.mapConfig.uavSize || 8,
-              url: "/uav/scene.gltf",
-              // 航向
-              heading: 0,
-              // 俯仰
-              pitch: 0,
-              // 滚转
-              roll: 0.0,
-              color: window.mapConfig.uaColor,
-              show: true
-            },
-            attr: item
-          });
-          graphicLayer.addGraphic(graphic);
-        }

-        graphic.attr = item;
-        bindLayerPopup(graphicLayer, graphic);
-      }
-
-      if (item.app_lon !== 0 || item.app_lat !== 0) {
-        let app_graphic = graphicLayer.getGraphicById(item.BatchId + "_app");
-        // let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点
-        //发现飞手
-        if (!app_graphic) {
-          // eslint-disable-next-line no-undef
-          app_graphic = new mars3d.graphic.Route({
-            id: item.BatchId + "_app",
-            name: "飞手",
-            maxCacheCount: -1,
-            label: {
-              text: "飞手位置",
-              font_size: 14,
-              font_family: "微软雅黑"
-            },
-            polyline: {
-              width: 2,
-              opacity: 1,
-              randomColor: true,
-              show: true
-            },
-            point: {
-              color: "#00ffff",
-              pixelSize: 8,
-              outlineColor: "#ffffff",
-              outlineWidth: 2
-            },
-
-            attr: item
-          });
-          graphicLayer.addGraphic(app_graphic);
-        }
-      }
-      // 更新发现无人机设备的大小
-      let graphicDevice = window.marsMap.getLayerById("devLog");
-      if (graphicDevice) {
-        let deviceGraphic = graphicDevice.getGraphicById(item.DeviceId);
-        if (deviceGraphic !== undefined) {
-          deviceGraphic.setOptions({
-            style: {
-              scale: 2
-            }
-          });
-        }
-      }
+  let graphicLayerGJ = map
+    .getLayers()
+    .getArray()
+    .find((layer) => layer.get("id") === "guiji");
+  if (!graphicLayerGJ) {
+    graphicLayerGJ = new VectorLayer({
+      source: new VectorSource(),
+      zIndex: 10
    });
-    //绑定气泡弹窗
-    graphicLayer.eachGraphic((car) => {
-      // 取出对应无人机的轨迹列表
-      options.map((item) => {
-        if (item.BatchId === car.id) {
-          if (item.drone_lon !== 0 || item.drone_lat !== 0) {
-            // eslint-disable-next-line no-undef
-            const point = new mars3d.LngLatPoint(
-              item.drone_lon,
-              item.drone_lat,
-              item.height || 10
-            );
-            car.addDynamicPosition(point, 0);
-          }
-        } else if (item.BatchId + "_app" === car.id) {
-          if (item.app_lon !== 0 || item.app_lat !== 0) {
-            // eslint-disable-next-line no-undef
-            const point = new mars3d.LngLatPoint(item.app_lon, item.app_lat, 0);
-            car.addDynamicPosition(point, 0);
-          }
+    graphicLayerGJ.set("id", "guiji");
+    map.addLayer(graphicLayerGJ);
+  }
+
+  let graphicLayerFSGJX = map
+    .getLayers()
+    .getArray()
+    .find((layer) => layer.get("id") === "fsguiji");
+  if (!graphicLayerFSGJX) {
+    graphicLayerFSGJX = new VectorLayer({
+      source: new VectorSource(),
+      zIndex: 10
+    });
+    graphicLayerFSGJX.set("id", "fsguiji");
+    map.addLayer(graphicLayerFSGJX);
+  }
+
+  if (options.length === 0) {
+    graphicLayer.getSource().clear();
+  } else {
+    // 处理每个无人机和飞手
+    options.forEach((item) => {
+      // 处理无人机
+      if (item.drone_lon !== 0 || item.drone_lat !== 0) {
+        let graphic = graphicLayer.getSource().getFeatureById(item.BatchId);
+        if (!graphic) {
+          // 创建无人机 Feature
+          graphic = new Feature({
+            geometry: new Point(fromLonLat([item.drone_lon, item.drone_lat])),
+            name: "无人机"
+          });
+          graphic.setId(item.BatchId);
+          let imgUav = require("@/assets/img/icon_uav.png");
+          // 无人机样式（用图标替代 GLTF 模型）
+          graphic.setStyle(
+            new Style({
+              image: new Icon({
+                src: imgUav, // 使用导入的图标
+                scale: 1, // 合理缩放
+                color: window.mapConfig?.uaColor || "#ff0000"
+              })
+            })
+          );
+          // 创建轨迹 Feature
+          let track = new Feature({
+            geometry: new LineString([
+              fromLonLat([item.drone_lon, item.drone_lat])
+            ]),
+            name: "无人机轨迹"
+          });
+          track.setId(item.BatchId + "_track");
+          track.setStyle(
+            new Style({
+              stroke: new Stroke({
+                color: getRandomColor(), // 线条颜色（可自定义）
+                width: 5 // 线条宽度（调整此值以控制粗细，单位为像素）
+              })
+            })
+          );
+          graphicLayer.getSource().addFeature(graphic);
+          graphicLayerGJ.getSource().addFeature(track);
+          // graphicLayerGJ.setStyle(null);
        }
-      });
+
+        // 更新无人机属性和位置
+        graphic.set("attr", item);
+        if (graphic.id_ === item.BatchId) {
+          const point = fromLonLat([item.drone_lon, item.drone_lat]);
+          graphic.getGeometry().setCoordinates(point);
+
+          // 更新轨迹
+          const track = graphicLayerGJ
+            .getSource()
+            .getFeatureById(item.BatchId + "_track");
+          track.getGeometry().appendCoordinate(point);
+          // graphicLayerGJ.setStyle(null);
+        }
+
+        // 绑定弹窗
+        // bindPopup(graphicLayer, graphic, map);
+      }
+
+      // 处理飞手
+      if (item.app_lon !== 0 || item.app_lat !== 0) {
+        let appGraphic = graphicLayer
+          .getSource()
+          .getFeatureById(item.BatchId + "_app");
+        if (!appGraphic) {
+          // 创建飞手 Feature
+          appGraphic = new Feature({
+            geometry: new Point(fromLonLat([item.app_lon, item.app_lat])),
+            name: "飞手",
+            attr: item
+          });
+          appGraphic.setId(item.BatchId + "_app");
+
+          let imgUavfs = require("@/assets/img/icon_user.png");
+          // 飞手样式
+          appGraphic.setStyle(
+            new Style({
+              image: new Icon({
+                src: imgUavfs, // 飞手图标
+                scale: 1, // 合理缩放
+                color: window.mapConfig?.uaColor || "#ff0000"
+              }),
+              text: new Text({
+                text: "飞手位置",
+                font: "14px 微软雅黑",
+                offsetY: -15,
+                fill: new Fill({ color: "#000000" }),
+                stroke: new Stroke({ color: "#ffffff", width: 2 })
+              })
+            })
+          );
+
+          // 创建飞手轨迹 Feature
+          const appTrack = new Feature({
+            geometry: new LineString([
+              fromLonLat([item.app_lon, item.app_lat])
+            ]),
+            name: "飞手轨迹"
+          });
+          appTrack.setId(item.BatchId + "_app_track");
+
+          graphicLayer.getSource().addFeature(appGraphic);
+          graphicLayerFSGJX.getSource().addFeature(appTrack);
+        }
+
+        // 更新飞手位置
+        const pointFS = fromLonLat([item.app_lon, item.app_lat]);
+        appGraphic.getGeometry().setCoordinates(pointFS);
+
+        // 更新飞手轨迹
+        const point = fromLonLat([item.drone_lon, item.drone_lat]);
+        const appTrack = graphicLayerFSGJX
+          .getSource()
+          .getFeatureById(item.BatchId + "_app_track");
+        // const appTrackGeom = appTrack.getGeometry();
+        // appTrackGeom.appendCoordinate(point);
+        appTrack.getGeometry().setCoordinates([
+          fromLonLat([item.app_lon, item.app_lat]), // 飞手位置
+          fromLonLat([item.drone_lon, item.drone_lat]) // 无人机位置
+        ]);
+        graphicLayerFSGJX.setStyle(null);
+        // 绑定弹窗
+        // bindPopup(graphicLayer, appGraphic, map);
+      }
    });
  }
 }
+
+// 随机颜色生成函数
+function getRandomColor() {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  color += "0";
+  color += letters[Math.floor(Math.random() * 4)];
+  color += letters[Math.floor(Math.random() * 16)];
+  color += letters[Math.floor(Math.random() * 16)];
+  color += letters[Math.floor(Math.random() * 16)];
+  color += letters[Math.floor(Math.random() * 16)];
+  return color;
+}
--- a/src/views/contentData/index.vue
+++ b/src/views/contentData/index.vue
@ -3,24 +3,24 @@
  <div class="app-container">
    <headerTop :homeData="homeView" />
    <LeftSidebar :homeData="homeView" :signaData="signaList" />
-    <RightSidebar :homeData="homeView" />
-    <Footer />
+    <!-- <RightSidebar :homeData="homeView" /> -->
+    <!-- <Footer /> -->
  </div>
 </template>

 <script>
 import headerTop from "./headerTop/index.vue";
 import LeftSidebar from "./LeftSidebar/index.vue";
-import RightSidebar from "./RightSidebar/index.vue";
-import Footer from "./Footer/index.vue";
+// import RightSidebar from "./RightSidebar/index.vue";
+// import Footer from "./Footer/index.vue";

 export default {
  name: "App",
  components: {
    headerTop,
-    LeftSidebar,
-    RightSidebar,
-    Footer
+    LeftSidebar
+    // RightSidebar
+    // Footer
  },
  props: {
    homeData: {
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -1,8 +1,10 @@
 <template>
+  <!-- <fit-screen :width="1280" :height="800" mode="fit"> -->
  <div id="home">
    <contentData id="contentData" :signaData="signaData" :homeData="homeData" />
    <map-control id="mapControl" :signaData="signaData" :homeData="homeData" />
  </div>
+  <!-- </fit-screen> -->
 </template>

 <script>
@ -11,6 +13,7 @@ import mapControl from "./mapControl/index.vue";
 import contentData from "./contentData/index.vue";
 import { Homeview } from "@/api/home.js";
 import * as signalR from "@microsoft/signalr";
+import { beFull } from "be-full";
 export default {
  name: "HomeIndex",
  data() {
@ -30,10 +33,100 @@ export default {
    this.initSocket();
  },
  mounted() {
+    // let arr = [
+    //   {
+    //     BatchId: "1938433406643867648",
+    //     serial_number: "JF0102501009",
+    //     device_type: "8",
+    //     device_type_8: 91088,
+    //     app_lat: 39.055,
+    //     app_lon: 117.303466,
+    //     drone_lat: 39.05389348519259,
+    //     drone_lon: 117.3121088583338,
+    //     height: 0.0,
+    //     altitude: 0.0,
+    //     home_lat: 0.0,
+    //     home_lon: 0.0,
+    //     distance: 3299.608332218683,
+    //     centerdistance: 198311.46836461234,
+    //     IsWhitelist: false,
+    //     WhiteListId: "0",
+    //     speed_E: 0.0,
+    //     speed_N: 0.0,
+    //     speed_U: 0.0,
+    //     RSSI: 0.0,
+    //     positionId: "1937905447877087232",
+    //     PostionName: "6号",
+    //     DeviceId: "1937909591555837952",
+    //     DeviceName: "JF0102501007",
+    //     freq: 0.0,
+    //     alarmLevel: 0,
+    //     Time: 1744872277,
+    //     CreateTime: "2025-06-27T11:05:13.1524513+08:00",
+    //     Id: "1938433406669033472"
+    //   }
+    // ];
+    // let arr1 = [
+    //   {
+    //     BatchId: "1938433406643867648",
+    //     serial_number: "JF0102501009",
+    //     device_type: "8",
+    //     device_type_8: 91088,
+    //     app_lat: 39.055,
+    //     app_lon: 117.303466,
+    //     drone_lat: 39.06341517352996,
+    //     drone_lon: 117.31456131738705,
+    //     height: 0.0,
+    //     altitude: 0.0,
+    //     home_lat: 0.0,
+    //     home_lon: 0.0,
+    //     distance: 3299.608332218683,
+    //     centerdistance: 198311.46836461234,
+    //     IsWhitelist: false,
+    //     WhiteListId: "0",
+    //     speed_E: 0.0,
+    //     speed_N: 0.0,
+    //     speed_U: 0.0,
+    //     RSSI: 0.0,
+    //     positionId: "1937905447877087232",
+    //     PostionName: "6号",
+    //     DeviceId: "1937909591555837952",
+    //     DeviceName: "JF0102501007",
+    //     freq: 0.0,
+    //     alarmLevel: 0,
+    //     Time: 1744872277,
+    //     CreateTime: "2025-06-27T11:05:13.1524513+08:00",
+    //     Id: "1938433406669033472"
+    //   }
+    // ];
+    // setInterval(() => {
+    //   this.signaData = arr;
+    // }, 1000);
+    // setInterval(() => {
+    //   this.signaData = arr1;
+    // }, 2000);
+    // setTimeout(() => {
+    //   clearInterval(time);
+    // }, 10000);
    this.initHomeData();
    this.timeInterval = setInterval(() => {
      this.initHomeData();
    }, 2000);
+    // 全屏
+    this.$confirm("是否全屏?", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    })
+      .then(() => {
+        beFull();
+      })
+      .catch(() => {
+        this.$message({
+          type: "info",
+          message: "已取消"
+        });
+      });
  },
  methods: {
    initHomeData() {
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -36,8 +36,7 @@
 </template>

 <script>
-import { login } from "@/api/login.js";
-
+import { login, loginPosition } from "@/api/login.js";
 export default {
  name: "my-Login", // 组件名称
  data() {
@ -48,7 +47,8 @@ export default {
      },
      errors: {},
      value: "",
-      tipShow: false
+      tipShow: false,
+      positionList: []
    };
  },
  mounted() {
@ -85,10 +85,22 @@ export default {
            localStorage.setItem("expires", res.data.expires); // 登录到期时间
            localStorage.setItem("userId", res.data.userid); // 登录id
            localStorage.setItem("isAdmin", res.data.isAdmin); // 权限
-
-            // 注意：Vue 2 中 Pinia 的用法需要调整
-
-            this.$router.push("/"); // Vue 2 中使用 this.$router
+            localStorage.setItem(
+              "PositionIds",
+              JSON.stringify(res.data.positionIds)
+            ); // 阵地权限
+            this.$router.push("/");
+            // loginPosition(res.data.positionIds).then((positionRes) => {
+            //   if (positionRes.code === 0) {
+            //     localStorage.setItem(
+            //       "PositionIds",
+            //       JSON.stringify(positionRes.data)
+            //     ); // 阵地权限
+            //     this.$message.success("登录成功");
+            //   } else {
+            //     this.$message.error(positionRes.msg);
+            //   }
+            // });
          } else {
            this.state.password = this.state.password;
            this.$message.error(res.msg);
--- a/src/views/mapControl/index.vue
+++ b/src/views/mapControl/index.vue
@ -1,146 +1,570 @@
 <template>
-  <div class="HomeMpa">
-    <div class="zoom-level">当前缩放等级: {{ zoomLevel }}</div>
-    <div id="mars3dContainer" ref="MarsMap" class="mars3d-container"></div>
-    <div class="pointingNorth" @click="mapNorth">
-      <img src="@/assets/img/menu/zhibeizhen.png" alt="" />
+  <div class="HomeMap">
+    <div class="zoom-level" @click="soundAndMenu">
+      <img :src="zoomLevelImage" alt="" />
    </div>
+    <div class="zoom-text1">账号：{{ userNames }}</div>
+    <div class="zoom-text">版本号：V1.0</div>
+    <div class="btn-container" v-if="closeBtnVisible">
+      <el-button @click="handleClickClose()">返回</el-button>
+    </div>
+    <div id="map" ref="olMap" class="map-container"></div>
+    <div class="pointingNorth">
+      <img src="@/assets/img/user.png" alt="" @click="userOpen" />
+      <img src="@/assets/img/setup.png" alt="" @click="setupOpen" />
+      <img src="@/assets/img/query.png" alt="" @click="queryOpen" />
+    </div>
+    <div class="configuration">
+      <div class="refresh" @click="refreshClick">
+        <img src="@/assets/img/refresh.png" alt="" />
+      </div>
+      <div class="refresh" @click="positionClick">
+        <img src="@/assets/img/icon_postions.png" alt="" />
+      </div>
+      <div class="refresh" @click="modelClick">
+        <img src="@/assets/img/icon_model.png" alt="" />
+      </div>
+    </div>
+    <el-dialog
+      title="设置"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose"
+      append-to-body
+      class="custom-class"
+    >
+      <div class="block">
+        <span class="demonstration">预警声音设置</span>
+        <el-slider v-model="value2"></el-slider>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="determine"> 确 定 </el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="查询"
+      :visible.sync="dialogQueryVisible"
+      width="90%"
+      :before-close="handleClose"
+      append-to-body
+      class="custom-table"
+    >
+      <AlertDialog />
+    </el-dialog>
  </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, transform } from "ol/proj";
+import XYZ from "ol/source/XYZ";
+import { Feature, Overlay } from "ol";
+import { Point, MultiPolygon } from "ol/geom";
+import { Vector as VectorLayer } from "ol/layer";
+import { Vector as VectorSource } from "ol/source";
+import { Style, Fill, Stroke, Circle } from "ol/style";
+import GeoJSON from "ol/format/GeoJSON";
+import LayerGroup from "ol/layer/Group";
+import { ScaleLine } from "ol/control.js";
+import AlertDialog from "../menuData/AlertDialog.vue";
+import { devPositionList } from "@/api/position.js";
+
 export default {
  name: "HomeMap",
+  components: {
+    AlertDialog
+  },
  data() {
    return {
-      player: null,
-      zoomLevel: null
+      map: null,
+      zoomLevel: null,
+      isZoomedIn: true,
+      isZoomedOut: false,
+      showPermissionPrompt: false,
+      dialogVisible: false,
+      value2: 0,
+      currentBaseMap: "gaode",
+      dialogQueryVisible: false,
+      closeBtnVisible: false,
+      zoomControl: 0,
+      toggleMap: false,
+      userNames: localStorage.getItem("userName")
    };
  },
  created() {
+    // 清空控制台（可选）
    // console.clear();
  },
  mounted() {
-    this.getMapJson();
+    this.initMap();
  },
  computed: {
-    ...mapGetters(["statePage", "cityCode"])
+    ...mapGetters(["statePage", "cityCode", "checkFlag"]),
+    zoomLevelImage() {
+      return this.isZoomedIn
+        ? require("@/assets/img/sound.png")
+        : require("@/assets/img/mute.png");
+    }
+  },
+  watch: {
+    checkFlag: {
+      handler(newVal) {
+        this.closeBtnVisible = newVal;
+        this.dialogQueryVisible = false;
+      },
+      deep: true
+    }
  },
  methods: {
-    getMapJson() {
-      // eslint-disable-next-line no-undef
-      mars3d.Util.fetchJson({
-        // ***_***
-        url: "/configJson/map.json"
-      }).then((res) => {
-        this.initMarsMap({
-          // 合并配置项
-          ...res.map3d
-        });
+    handleClickClose() {
+      this.$store.commit("SET_CHECKFLAG", false);
+      this.$store.commit("SET_CLEARTRAJECTORY", true);
+    },
+    initPositon() {
+      let positionIds = {
+        pageNum: 1,
+        pageSize: 10000
+      };
+      devPositionList(positionIds).then((devRes) => {
+        if (devRes.code === 0) {
+          let positionRes = localStorage.getItem("PositionIds");
+          this.positionList = devRes.data.items;
+          const matchedList = this.positionList.filter((item) =>
+            positionRes.includes(item.id)
+          );
+          this.loadGeoJson(matchedList);
+        }
      });
    },
-    initMarsMap(options) {
-      let map;
-      // eslint-disable-next-line no-undef
-      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;
+
+    // 加载 GeoJSON 数据并绘制
+    loadGeoJson(value) {
+      // 清空已有图层
+      this.clearLayer();
+
+      // 创建矢量源
+      const source = new VectorSource();
+
+      // 解析 GeoJSON 数据
+      const geojsonFormat = new GeoJSON();
+      value.forEach((item) => {
+        // 解析 regionJson 为 OpenLayers 特征
+        const feature = geojsonFormat.readFeature(JSON.parse(item.regionJson), {
+          dataProjection: "EPSG:4326", // 输入数据为 WGS84
+          featureProjection: "EPSG:3857" // 转换为地图投影
+        });
+
+        // 设置多边形样式：透明蓝色填充，蓝色边框
+        feature.setStyle(
+          new Style({
+            fill: new Fill({
+              color: "rgba(0, 0, 255, 0.3)" // 透明蓝色填充
+            }),
+            stroke: new Stroke({
+              color: "#0000FF", // 蓝色边框
+              width: 2
+            })
+          })
+        );
+
+        // 添加多边形到源
+        source.addFeature(feature);
+
+        // 添加中心点
+        const centerFeature = new Feature({
+          geometry: new Point(fromLonLat([item.lon, item.lat]))
+        });
+
+        // 设置中心点样式：红色圆点
+        centerFeature.setStyle(
+          new Style({
+            image: new Circle({
+              radius: 6,
+              fill: new Fill({
+                color: "#FF0000" // 红色填充
+              }),
+              stroke: new Stroke({
+                color: "#FFFFFF", // 白色边框
+                width: 1
+              })
+            })
+          })
+        );
+
+        // 添加中心点到源
+        source.addFeature(centerFeature);
+      });
+
+      // 创建矢量图层
+      this.vectorLayer = new VectorLayer({
+        source: source,
+        zIndex: 10 // 设置图层优先级
+      });
+
+      // 添加到父组件的地图
+      window.olMap.addLayer(this.vectorLayer);
+      // 跳转到 GeoJSON 数据区域
+      if (source.getFeatures().length > 0) {
+        const extent = source.getExtent(); // 获取所有特征的边界框
+        window.olMap.getView().fit(extent, {
+          padding: [50, 50, 50, 50], // 四周留白（像素）
+          maxZoom: 15, // 最大缩放级别
+          duration: 500 // 动画持续时间（毫秒）
+        });
      }
-      // 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) {
-      console.log(event);
+    // 清空图层
+    clearLayer() {
+      if (this.vectorLayer) {
+        window.olMap.removeLayer(this.vectorLayer);
+        this.vectorLayer = null;
+      }
    },
-    map_zoomHandler(event) {
-      let { alt } = window.marsMap.getCameraView();
-      this.zoomLevel = this.estimateZoomLevel(alt);
-      console.log(this.zoomLevel);
+    refreshClick() {
+      // 刷新页面
+      window.location.reload();
    },
-    estimateZoomLevel(height) {
-      const maxZoom = 18;
-      const baseHeight = 1000;
-      const zoom = maxZoom - Math.log2(height / baseHeight);
-      return Math.round(zoom);
+    positionClick() {
+      console.log("位置点击");
+      this.$store.commit("SET_POSITIONPOINT", true);
+    },
+    modelClick() {
+      // 切换底图
+      this.toggleMap = !this.toggleMap;
+      window.olMap.getLayers().forEach((layer) => {
+        if (layer.get("title") === "白色底图组") {
+          layer.setVisible(this.toggleMap);
+        } else if (layer.get("title") === "暗色底图组") {
+          layer.setVisible(!this.toggleMap);
+        }
+      });
+    },
+    soundAndMenu() {
+      this.isZoomedIn = !this.isZoomedIn;
+      this.$store.commit("SET_ISZOOMEDIN", this.isZoomedIn);
+    },
+    initMap() {
+      // 初始化 OpenLayers 地图
+      this.map = new Map({
+        target: "map", // 替换为 this.$refs.olMap 如果在 Vue 中
+        layers: [
+          // 白色底图 + 默认注记
+          new LayerGroup({
+            title: "白色底图组",
+            layers: [
+              this.createTiandituLayer(
+                window.mapConfig.vectorLayer,
+                "天地图矢量底图"
+              ), // 白色底图
+              this.createTiandituLayer(
+                window.mapConfig.ciatorLayer,
+                "天地图默认注记"
+              ) // 默认注记
+            ],
+            visible: true // 默认显示白色底图
+          }),
+          // 暗色底图 + 白色注记
+          new LayerGroup({
+            title: "暗色底图组",
+            layers: [
+              this.createTiandituLayer(
+                window.mapConfig.vectorLayer,
+                "天地图暗色底图",
+                "grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)"
+              ), // 暗色底图
+              this.createTiandituLayer(
+                window.mapConfig.ciatorLayer,
+                "天地图白色注记",
+                "grayscale(100%) brightness(150%) contrast(120%)"
+              ) // 白色注记
+            ],
+            visible: false // 默认隐藏暗色底图
+          })
+        ],
+        view: new View({
+          projection: "EPSG:3857",
+          center: fromLonLat([
+            window.mapConfig.cameraLon,
+            window.mapConfig.cameraLat
+          ]), // 经纬度转投影坐标
+          zoom: window.mapConfig.zoom,
+          minZoom: 0,
+          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);
+    },
+    mapClickHandler(event) {
+      // 处理地图点击事件
+      console.log("地图点击:", event);
+      const mapCoords = event.coordinate;
+      const wgs84Coords = transform(mapCoords, "EPSG:3857", "EPSG:4326");
+      const [longitude, latitude] = wgs84Coords;
+      console.log("地图点击经纬度:", { longitude, latitude });
+    },
+    mapZoomHandler() {
+      // 获取当前缩放等级
+      this.zoomLevel = Math.round(this.map.getView().getZoom());
+    },
+    createTiandituLayer(layerType, title, filter = null) {
+      let tiandituKey = "a78289a00ac2e57e0e7abe1d8560d644";
+      return new TileLayer({
+        visible: true,
+        name: title,
+        source: new XYZ({
+          // url: window.mapConfig.mapUrl,
+          url:
+            layerType === "vec"
+              ? window.mapConfig.mapUrl
+              : layerType === "cia"
+              ? window.mapConfig.mapUrl1
+              : `http://t{0-7}.tianditu.gov.cn/${layerType}_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=${layerType}&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
+          tileLoadFunction: filter
+            ? (imageTile, src) => {
+                const img = new Image();
+                img.setAttribute("crossOrigin", "anonymous");
+                img.onload = function () {
+                  const canvas = document.createElement("canvas");
+                  const w = img.width;
+                  const h = img.height;
+                  canvas.width = w;
+                  canvas.height = h;
+                  const context = canvas.getContext("2d");
+                  context.filter = filter;
+                  context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
+                  imageTile.getImage().src = canvas.toDataURL("image/png");
+                };
+                img.src = src;
+              }
+            : undefined
+        }),
+        title: title
+      });
    },
    onMapLoad(map) {
-      map.changeMouseModel(true);
-      // 在地图初始化后禁用平移
-      let camera = window.mapConfig;
-      console.log(camera, "camera");
+      // setTimeout(() => {
+      //   this.initPositon();
+      // }, 2000);
+      // 地图加载完成后的处理
+      const camera = window.mapConfig || {};
      if (camera.isCamera) {
-        let cameraHistory = new mars3d.thing.CameraHistory({
-          limit: {
-            // 限定视角范围
-            position: Cesium.Cartesian3.fromDegrees(
-              camera.cameraLon,
-              camera.cameraLat,
-              0
-            ),
-            radius: camera.cameraRadius,
-            debugExtent: false
+        // 设置视角约束
+        map
+          .getView()
+          .setCenter(
+            fromLonLat([camera.cameraLon || 0, camera.cameraLat || 0])
+          );
+        map.getView().setMinZoom(0); // 最小缩放等级
+        map.getView().setMaxZoom(18); // 最大缩放等级
+      }
+      // 监听缩放级别变化
+      const view = map.getView();
+      this.zoomControl = view.getZoom();
+      view.on("change:resolution", () => {
+        this.zoomControl = Math.round(view.getZoom());
+        console.log(this.zoomControl, "缩放级别已更改");
+      });
+      var scaleLineControl = new ScaleLine({
+        //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
+        units: "metric",
+        className: "zoom-control" // 设置标尺的样式类名
+      });
+      console.log(scaleLineControl, "scaleLineControl");
+      map.addControl(scaleLineControl);
+    },
+    handleClose() {
+      this.dialogVisible = false;
+      this.dialogQueryVisible = false;
+    },
+    userOpen() {
+      this.$confirm(`确定要退出账号 ${this.userNames} 吗？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.$router.push({ name: "login" });
+          localStorage.removeItem("setToken");
+          localStorage.removeItem("expires");
+          localStorage.removeItem("userId");
+          localStorage.removeItem("isAdmin");
+          localStorage.removeItem("PositionIds");
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消退出登录"
+          });
+        });
+    },
+    setupOpen() {
+      this.dialogVisible = true;
+      const media = this.$refs.uavAudio;
+      const savedVolume = localStorage.getItem("soundValue");
+      if (savedVolume !== null) {
+        this.value2 = Number(savedVolume);
+      } else {
+        this.value2 = media.volume * 100;
+      }
+      localStorage.setItem("soundValue", this.value2);
+    },
+    determine() {
+      // 确定时保存音量到 localStorage
+      localStorage.setItem("soundValue", this.value2);
+      this.$store.commit("SET_SILDERVALUE", this.value2);
+      this.dialogVisible = false; // 可选：关闭弹窗
+    },
+    queryOpen() {
+      this.dialogQueryVisible = true;
+    },
+    headdenForm(value, type) {
+      let params = {};
+      if (type === "search") {
+        params = JSON.parse(JSON.stringify(this.$refs.myForm.ruleForm));
+        if (params.dateRange && params.dateRange.length === 2) {
+          params.strartDate = moment(params.dateRange[0]).format("YYYY-MM-DD");
+          params.endDate = moment(params.dateRange[1]).format("YYYY-MM-DD");
+        }
+        this.$delete(params, "dateRange");
+        params.pageNum = this.paginationParam.currentPage;
+        params.pageSize = this.paginationParam.size;
+        alarmList(params).then((res) => {
+          if (res.code === 0) {
+            this.tableData = res.data.items.map((item) => {
+              const { isWhitelist, duration, frequency, ...rest } = item;
+              return {
+                ...rest,
+                isattacked: item.isattacked ? "是" : "否",
+                duration: String(item.duration),
+                frequency: String(item.frequency)
+              };
+            });
+            this.paginationParam.total = res.data.total;
          }
        });
-        map.addThing(cameraHistory);
-        map.scene.screenSpaceCameraController.minimumZoomDistance = 1000; //相机的高度的最小值
-        map.scene.screenSpaceCameraController.maximumZoomDistance = 500000; //相机高度的最大值
      }
    },
-    mapNorth() {
-      // 1. 获取当前视角
-      const currentView = window.marsMap.getCameraView();
-
-      // 2. 修改视角的heading为0（正北），保留其他参数
-      window.marsMap.setCameraView({
-        lat: currentView.lat,
-        lng: currentView.lng,
-        alt: currentView.alt <= 100 ? 8000 : currentView.alt,
-        heading: 0, // 指北
-        pitch: -90,
-        roll: currentView.roll
-      });
+    handleSizeChange(value) {
+      console.log(value);
+      this.paginationParam.size = value;
+      this.headdenForm({}, "search");
+    },
+    handlePageChange(value) {
+      console.log(value);
+      this.paginationParam.currentPage = value;
+      this.headdenForm({}, "search");
    }
  }
 };
 </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;
+    top: 60px;
+    right: 40px;
+    z-index: 1000;
+    color: #fff;
+    img {
+      width: 48px;
+      height: 48px;
+    }
+  }
+  .zoom-text {
+    position: absolute;
+    top: 18px;
+    right: 180px;
+    z-index: 1000;
+    color: #fff;
+    img {
+      width: 48px;
+      height: 48px;
+    }
+  }
+  .zoom-text1 {
+    position: absolute;
+    top: 18px;
+    right: 295px;
+    z-index: 1000;
+    color: #fff;
+    img {
+      width: 48px;
+      height: 48px;
+    }
+  }
+  .btn-container {
+    position: absolute;
+    top: 70px;
+    right: 100px;
+    z-index: 1000;
    color: #fff;
  }
+  .configuration {
+    position: absolute;
+    bottom: 32px;
+    right: 40px;
+    z-index: 1000;
+    color: #fff;
+    width: 50px;
+    height: 200px;
+    background-color: rgba(209, 242, 255, 0.9);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    .refresh {
+      width: 100%;
+      height: 30%;
+      line-height: 60px;
+      img {
+        width: 32px;
+        height: 32px;
+        margin-top: 30%;
+      }
+    }
+  }

-  #mars3dContainer {
+  .map-container {
    width: 100%;
    height: 100%;
  }
+
  .pointingNorth {
+    width: 236px;
+    height: 52px;
    position: absolute;
-    bottom: 5%;
-    right: 25%;
-    cursor: pointer;
+    bottom: 37px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
    img {
-      width: 35px;
-      height: 35px;
+      width: 52px;
+      height: 52px;
    }
  }
 }
--- a/src/views/menuData/AlertDialog.vue
+++ b/src/views/menuData/AlertDialog.vue
@ -35,7 +35,7 @@
            :underline="false"
            @click="handleClick(data, 'playback')"
          >
-            轨迹回放
+            查看
          </el-link>
        </template>
      </my-table>
@ -57,8 +57,15 @@

 <script>
 "use script";
+import { mapGetters } from "vuex";
 import { alarmList, alarmDetail } from "@/api/alarm.js";
 import moment from "moment";
+import { Map, View, Feature, Overlay } from "ol";
+import { LineString, Point } from "ol/geom";
+import { Vector as VectorLayer } from "ol/layer";
+import { Vector as VectorSource } from "ol/source";
+import { Style, Stroke } from "ol/style";
+import { fromLonLat } from "ol/proj";
 export default {
  name: "webDevice",
  data() {
@ -150,7 +157,7 @@ export default {
          align: "center"
        },
        {
-          label: "持续时间（秒）",
+          label: "持续时间",
          prop: "duration",
          align: "center"
        },
@ -186,9 +193,7 @@ export default {
        // },
        {
          slot: "operate",
-          label: "操作",
-          width: 250,
-          fixed: "right"
+          label: "操作"
        }
      ],
      paginationParam: {
@ -204,6 +209,18 @@ export default {
      historyList: []
    };
  },
+  computed: {
+    ...mapGetters(["clearTrajectory"])
+  },
+  watch: {
+    clearTrajectory(newVal) {
+      if (newVal) {
+        this.clearTrack();
+        this.$store.commit("SET_CLEARTRAJECTORY", false);
+      }
+    },
+    deep: true
+  },
  mounted() {
    this.headdenForm({}, "search");
  },
@ -250,6 +267,77 @@ export default {
      }
      console.log(value);
    },
+    // 绘制轨迹线
+    drawTrack() {
+      // 清空之前的轨迹
+      this.clearTrack();
+
+      // 转换坐标为 OpenLayers 格式 (EPSG:3857)
+      const coordinates = this.historyList.map((item) =>
+        fromLonLat([item.lon, item.lat])
+      );
+      console.log(coordinates, "coordinates");
+      // 创建线条几何
+      const lineFeature = new Feature({
+        geometry: new LineString(coordinates)
+      });
+
+      // 设置线条样式：宽度10，颜色蓝色
+      lineFeature.setStyle(
+        new Style({
+          stroke: new Stroke({
+            color: "#ff0000",
+            width: 7
+          })
+        })
+      );
+
+      // 创建矢量图层
+      const source = new VectorSource({
+        features: [lineFeature]
+      });
+      this.trackLayer = new VectorLayer({
+        source: source,
+        zIndex: 10 // 设置图层优先级
+      });
+
+      // 添加到父组件的地图
+      window.olMap.addLayer(this.trackLayer);
+      window.olMap.getView().animate({
+        center: [coordinates[0][0], coordinates[0][1]],
+        zoom: 15
+      });
+      // 添加点击删除功能
+      // this.addClickToRemove();
+    },
+    // 添加点击删除轨迹功能
+    addClickToRemove() {
+      window.olMap.on("singleclick", (event) => {
+        const feature = window.olMap.forEachFeatureAtPixel(
+          event.pixel,
+          (feat) => feat
+        );
+        if (
+          feature &&
+          this.trackLayer.getSource().getFeatures().includes(feature)
+        ) {
+          // 确认点击的是轨迹线
+          if (confirm("是否关闭该轨迹？")) {
+            this.clearTrack();
+          }
+        }
+      });
+    },
+    handleClickClose() {
+      this.clearTrack();
+    },
+    // 清空轨迹
+    clearTrack() {
+      if (this.trackLayer) {
+        window.olMap.removeLayer(this.trackLayer);
+        this.trackLayer = null;
+      }
+    },
    // 停用 编辑 删除
    handleClick(value, type) {
      let params = { batchid: value.batchId };
@ -259,54 +347,10 @@ export default {
          if (res.code === 0) {
            console.log(res.data, "res.data");
            this.historyList = res.data;
-            // this.historyList = [
-            //   {
-            //     lon: 109.056198,
-            //     lat: 38.674443,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:21",
-            //     alarmLevel: 0
-            //   },
-            //   {
-            //     lon: 109.081454,
-            //     lat: 38.664766,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:22",
-            //     alarmLevel: 0
-            //   },
-            //   {
-            //     lon: 109.101687,
-            //     lat: 38.632524,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:25",
-            //     alarmLevel: 0
-            //   },
-            //   {
-            //     lon: 109.063063,
-            //     lat: 38.622878,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:30",
-            //     alarmLevel: 0
-            //   },
-            //   {
-            //     lon: 109.016034,
-            //     lat: 38.635138,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:35",
-            //     alarmLevel: 0
-            //   },
-            //   {
-            //     lon: 108.991419,
-            //     lat: 38.659515,
-            //     alt: 0,
-            //     createTime: "2025-03-30 03:44:38",
-            //     alarmLevel: 0
-            //   }
-            // ];
+            this.drawTrack();
+            this.$store.commit("SET_CHECKFLAG", true);
          }
        });
-        this.title = "轨迹回放";
-        this.drawer = true;
      }
    },
    handleSizeChange(value) {
--- a/vue.config.js
+++ b/vue.config.js
@ -18,7 +18,7 @@ module.exports = defineConfig({
  productionSourceMap: false,
  transpileDependencies: true,
  devServer: {
-    host: "127.0.0.1",
+    host: "0.0.0.0",
    port: 9997,
    open: true,
    proxy: {}
Author	SHA1	Message	Date
zengmingjie	d8986bd67e	1	2025-09-22 13:52:59 +08:00
zengmingjie	4df9fdf940	二维码坐标系更改	2025-09-19 22:26:56 +08:00
zengmingjie	aa738e917f	1	2025-08-20 22:07:33 +08:00
zengmingjie	c8ce09c5c5	1	2025-07-20 18:00:43 +08:00
zengmingjie	940f7b25c9	更改左侧布局展示	2025-07-20 16:11:04 +08:00
zengmingjie	0519d8c62a	1	2025-07-19 22:08:33 +08:00
zengmingjie	9a6206afbe	增加名称	2025-07-12 23:38:10 +08:00
zengmingjie	bdf4e5148f	线加粗	2025-06-29 20:24:33 +08:00
zengmingjie	a78106da90	增加距离位置、一直显示轨迹	2025-06-29 20:02:30 +08:00
zengmingjie	3068a4cb91	无人机不显示问题	2025-06-27 11:17:41 +08:00
zengmingjie	f925f563fb	1	2025-06-26 23:37:03 +08:00
zengmingjie	ce846cc58f	1	2025-06-26 23:32:16 +08:00
zengmingjie	534baec75d	1	2025-06-26 23:25:40 +08:00
zengmingjie	68aacde426	使用高德定位、区分防区无人机	2025-06-26 22:31:31 +08:00
zengmingjie	27698dbf0b	yanse	2025-06-26 01:43:53 +08:00
zengmingjie	93448483b5	1	2025-06-26 01:25:02 +08:00
zengmingjie	8d44f3a145	1	2025-06-26 01:16:15 +08:00
zengmingjie	0116af0877	1	2025-06-26 00:13:03 +08:00
zengmingjie	2b30e20485	1	2025-06-26 00:08:55 +08:00
zengmingjie	d987bd0d6d	1	2025-06-26 00:08:33 +08:00
zengmingjie	641b7d8675	1	2025-06-26 00:05:02 +08:00
zengmingjie	e321227b96	1	2025-06-25 23:29:21 +08:00
zengmingjie	d98198b40d	切换底图	2025-06-25 22:42:41 +08:00
zengmingjie	5c9ab6cc4c	问题更改	2025-06-25 22:27:05 +08:00
zengmingjie	ff01490947	登录两秒之后更新防区	2025-06-25 00:28:53 +08:00
zengmingjie	3d69411481	删除之前的定位图标\登录获取防区数据	2025-06-25 00:12:35 +08:00
zengmingjie	0be84825b8	跳转到高德app增加设备点位	2025-06-24 23:33:44 +08:00
zengmingjie	0e36765929	更改底图颜色	2025-06-22 17:42:09 +08:00
zengmingjie	d8f87fdf88	无人机显示调试，声音打开，右下角赋值	2025-06-21 20:00:17 +08:00
zengmingjie	7e19706ab9	页面布局完成	2025-06-19 23:41:07 +08:00
zengmingjie	9898cd5bde	导航栏	2025-06-18 23:52:42 +08:00
zengmingjie	f8fe6814d9	左侧更改	2025-06-18 23:08:37 +08:00
zengmingjie	938fca0e2c	更换openlayer	2025-06-16 22:22:14 +08:00