map change

package-lock.json

     },
     "@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmmirror.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
       "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ=="
     },
     "@mapbox/mapbox-gl-style-spec": {
-      "version": "13.27.0",
-      "resolved": "https://registry.npmmirror.com/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.27.0.tgz",
-      "integrity": "sha512-wQSJCGRyf7pWknQgeGBArHEk8898UcI1BnAam7IRa3AGmHRFzlJ6DzoU24Hld9zJ0tgkNQ7OP5sJT/9hKHzavg==",
+      "version": "13.28.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz",
+      "integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==",
       "requires": {
         "@mapbox/jsonlint-lines-primitives": "~2.0.2",
         "@mapbox/point-geometry": "^0.1.0",
     },
     "@mapbox/point-geometry": {
       "version": "0.1.0",
-      "resolved": "https://registry.npmmirror.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
       "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
     },
     "@mapbox/unitbezier": {
       "version": "0.0.0",
-      "resolved": "https://registry.npmmirror.com/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
       "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
     },
     "@node-ipc/js-queue": {
       }
     },
     "@petamoriken/float16": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmmirror.com/@petamoriken/float16/-/float16-3.7.0.tgz",
-      "integrity": "sha512-g7w35q4bt7MoM3nZKrk5COiIO+qevZjjS7bJO5pYrB0ZKABUXFBOgr2VBY66LmeI3FzkH5AZ+1uNmNHYjeuUjQ=="
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.0.tgz",
+      "integrity": "sha512-AhVAm6SQ+zgxIiOzwVdUcDmKlu/qU39FiYD2UD6kQQaVenrn0dGZewIghWAENGQsvC+1avLCuT+T2/3Gsp/W3w=="
     },
     "@polka/url": {
       "version": "1.0.0-next.21",
     },
     "csscolorparser": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
       "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
     },
     "csso": {
       }
     },
     "geotiff": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmmirror.com/geotiff/-/geotiff-2.0.4.tgz",
-      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.7.tgz",
+      "integrity": "sha512-FKvFTNowMU5K6lHYY2f83d4lS2rsCNdpUC28AX61x9ZzzqPNaWFElWv93xj0eJFaNyOYA63ic5OzJ88dHpoA5Q==",
       "requires": {
         "@petamoriken/float16": "^3.4.7",
         "lerc": "^3.0.0",
-        "lru-cache": "^6.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"
       }
     },
     "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",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
       "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
     },
     "json5": {
     },
     "lerc": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/lerc/-/lerc-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
       "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
     },
     "levn": {
       "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,
       "requires": {
         "yallist": "^4.0.0"
       }
       }
     },
     "mapbox-to-css-font": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmmirror.com/mapbox-to-css-font/-/mapbox-to-css-font-2.4.1.tgz",
-      "integrity": "sha512-QQ/iKiM43DM9+aujTL45Iz5o7gDeSFmy4LPl3HZmNcwCE++NxGazf+yFpY+wCb+YS23sDa1ghpo3zrNFOcHlow=="
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.2.tgz",
+      "integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA=="
     },
     "mdn-data": {
       "version": "2.0.14",
       }
     },
     "ol": {
-      "version": "6.15.1",
-      "resolved": "https://registry.npmmirror.com/ol/-/ol-6.15.1.tgz",
-      "integrity": "sha512-ZG2CKTpJ8Q+tPywYysVwPk+yevwJzlbwjRKhoCvd7kLVWMbfBl1O/+Kg/yrZZrhG9FNXbFH4GeOZ5yVRqo3P4w==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-7.3.0.tgz",
+      "integrity": "sha512-08vJE4xITKPazQ9qJjeqYjRngnM9s+1eSv219Pdlrjj3LpLqjEH386ncq+76Dw1oGPGR8eLVEePk7FEd9XqqMw==",
       "requires": {
-        "geotiff": "2.0.4",
-        "ol-mapbox-style": "^8.0.5",
+        "earcut": "^2.2.3",
+        "geotiff": "^2.0.7",
+        "ol-mapbox-style": "^9.2.0",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       }
     },
     "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==",
+      "version": "9.7.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.7.0.tgz",
+      "integrity": "sha512-YX3u8FBJHsRHaoGxmd724Mp5WPTuV7wLQW6zZhcihMuInsSdCX1EiZfU+8IAL7jG0pbgl5YgC0aWE/MXJcUXxg==",
       "requires": {
         "@mapbox/mapbox-gl-style-spec": "^13.23.1",
         "mapbox-to-css-font": "^2.4.1"
     },
     "pako": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/pako/-/pako-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
       "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
     },
     "param-case": {
     },
     "parse-headers": {
       "version": "2.0.5",
-      "resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
       "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
     },
     "parse-json": {
     },
     "pbf": {
       "version": "3.2.1",
-      "resolved": "https://registry.npmmirror.com/pbf/-/pbf-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
       "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
       "requires": {
         "ieee754": "^1.1.12",
     },
     "protocol-buffers-schema": {
       "version": "3.6.0",
-      "resolved": "https://registry.npmmirror.com/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
       "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
     },
     "proxy-agent": {
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "quick-lru": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.1.tgz",
+      "integrity": "sha512-S27GBT+F0NTRiehtbrgaSE1idUAJ5bX8dPAQTdylEyNlrdcH5X4Lz7Edz3DYzecbsCluD5zO8ZNEe04z3D3u6Q=="
+    },
     "quickselect": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/quickselect/-/quickselect-2.0.0.tgz",
     },
     "resolve-protobuf-schema": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
       "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
       "requires": {
         "protocol-buffers-schema": "^3.3.1"
     },
     "rw": {
       "version": "1.3.3",
-      "resolved": "https://registry.npmmirror.com/rw/-/rw-1.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
       "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
     },
     "safe-buffer": {
     },
     "sort-asc": {
       "version": "0.1.0",
-      "resolved": "https://registry.npmmirror.com/sort-asc/-/sort-asc-0.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
       "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw=="
     },
     "sort-desc": {
       "version": "0.1.1",
-      "resolved": "https://registry.npmmirror.com/sort-desc/-/sort-desc-0.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
       "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw=="
     },
     "sort-object": {
       "version": "0.3.2",
-      "resolved": "https://registry.npmmirror.com/sort-object/-/sort-object-0.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
       "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
       "requires": {
         "sort-asc": "^0.1.0",
     },
     "web-worker": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/web-worker/-/web-worker-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
       "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA=="
     },
     "webidl-conversions": {
     },
     "xml-utils": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmmirror.com/xml-utils/-/xml-utils-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.3.0.tgz",
       "integrity": "sha512-i4PIrX33Wd66dvwo4syicwlwmnr6wuvvn4f2ku9hA67C2Uk62Xubczuhct+Evnd12/DV71qKNeDdJwES8HX1RA=="
     },
     "xml2js": {
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "yocto-queue": {
       "version": "0.1.0",

package.json

     "dayjs": "^1.11.2",
     "echarts": "^5.4.1",
     "mockjs": "^1.1.0",
-    "ol": "^6.15.1",
+    "ol": "^7.3.0",
     "pinia": "^2.0.13",
     "pinia-plugin-persist": "^1.0.0",
     "tinymce": "^5.10.2",

src/views/task-manage/all-task/components/LiveDrawer.vue

 </template>
 
 <script>
-import { defineComponent, computed, ref, reactive, toRefs, watch, nextTick, onBeforeUnmount } from 'vue'
+import { defineComponent, computed, ref, reactive, toRefs, watch, nextTick, onBeforeUnmount, onMounted } from 'vue'
 import { Map, View, Feature } from 'ol'
 import 'ol/ol.css'
 import { Tile, Vector as VectorLayer } from 'ol/layer'
             initOriginPlayer()
           }
           if (!data.mapData) {
-            initMap()
             // 加载机场航线
             getLineData().then(({ trackList }) => {
               if (trackList.length > 0) {
       data.videoShow = value
     }
 
+    onMounted(() => {
+      initMap()
+    })
+
     onBeforeUnmount(() => {
       liveStore.resetList()
       originRef.value?.disposeVideo()