mc

package-lock.json

@@ -428,6 +428,55 @@
         "local-pkg": "^0.4.1"
       }
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
+      }
+    },
     "@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
@@ -3873,6 +3922,14 @@
       "resolved": "https://registry.npmmirror.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
       "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
     },
+    "json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "requires": {
+        "minimist": "^1.2.0"
+      }
+    },
     "jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -3944,23 +4001,13 @@
       "dev": true
     },
     "loader-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
         "json5": "^1.0.1"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        }
       }
     },
     "local-pkg": {
@@ -5250,9 +5297,9 @@
       }
     },
     "rollup": {
-      "version": "2.70.1",
-      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-2.70.1.tgz",
-      "integrity": "sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA==",
+      "version": "2.77.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.77.3.tgz",
+      "integrity": "sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -6044,28 +6091,22 @@
       "dev": true
     },
     "terser": {
-      "version": "5.12.1",
-      "resolved": "https://registry.npmmirror.com/terser/-/terser-5.12.1.tgz",
-      "integrity": "sha512-NXbs+7nisos5E+yXwAD+y7zrcTkMqb0dEJxIGtSKPdCBzopf7ni4odPul2aechpV7EXNvOudYOX2bb5tln1jbQ==",
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
+      "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
       "dev": true,
       "requires": {
+        "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"
       },
       "dependencies": {
         "commander": {
           "version": "2.20.3",
-          "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
           "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
           "dev": true
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
         }
       }
     },
@@ -6115,9 +6156,9 @@
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
     },
     "tinymce": {
-      "version": "5.10.5",
-      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.5.tgz",
-      "integrity": "sha512-nFKtLhmoRtExBxUfv06JlkbQWux5D+d115vxSRAqUmccZdrtpFvOIYwZmikvulLdM9pfEpvO0B+RQ2qFV/+R7w=="
+      "version": "5.10.7",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.10.7.tgz",
+      "integrity": "sha512-9UUjaO0R7FxcFo0oxnd1lMs7H+D0Eh+dDVo5hKbVe1a+VB0nit97vOqlinj+YwgoBDt6/DSCUoWqAYlLI8BLYA=="
     },
     "to-arraybuffer": {
       "version": "1.0.1",
@@ -6545,16 +6586,35 @@
       "dev": true
     },
     "vite": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-2.9.1.tgz",
-      "integrity": "sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ==",
+      "version": "2.9.15",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
+      "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
       "dev": true,
       "requires": {
         "esbuild": "^0.14.27",
         "fsevents": "~2.3.2",
-        "postcss": "^8.4.12",
+        "postcss": "^8.4.13",
         "resolve": "^1.22.0",
-        "rollup": "^2.59.0"
+        "rollup": ">=2.59.0 <2.78.0"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "3.3.4",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+          "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "8.4.20",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
+          "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
+          "dev": true,
+          "requires": {
+            "nanoid": "^3.3.4",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        }
       }
     },
     "vite-plugin-html": {
@@ -6638,9 +6698,9 @@
       }
     },
     "vm2": {
-      "version": "3.9.10",
-      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.10.tgz",
-      "integrity": "sha512-AuECTSvwu2OHLAZYhG716YzwodKCIJxB6u1zG7PgSQwIgAlEaoXH52bxdcvT8GkGjnYK7r7yWDW0m0sOsPuBjQ==",
+      "version": "3.9.13",
+      "resolved": "https://registry.npmjs.org/vm2/-/vm2-3.9.13.tgz",
+      "integrity": "sha512-0rvxpB8P8Shm4wX2EKOiMp7H2zq+HUE/UwodY0pCZXs9IffIKZq6vUti5OgkVCTakKo9e/fgO4X1fkwfjWxE3Q==",
       "requires": {
         "acorn": "^8.7.0",
         "acorn-walk": "^8.2.0"

package.json

@@ -19,7 +19,7 @@
     "ol": "^6.15.1",
     "pinia": "^2.0.13",
     "pinia-plugin-persist": "^1.0.0",
-    "tinymce": "^5.10.2",
+    "tinymce": "^5.10.7",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue": "^3.2.16",
     "vue-router": "^4.0.14",
@@ -44,7 +44,7 @@
     "sass": "^1.49.11",
     "unocss": "^0.16.4",
     "unplugin-vue-components": "^0.18.5",
-    "vite": "^2.6.4",
+    "vite": "^2.9.15",
     "vite-plugin-html": "^2.1.2",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-svg-icons": "^2.0.1",

src/views/dashboard/components/OneMap.vue

@@ -26,7 +26,6 @@
     <air-info :data="airDetail" />
   </div>
   <div
-    v-show="problemPopupShow"
     id="problemOverlay"
     class="problem-overlay"
   >
@@ -223,16 +222,7 @@ import { useMessage, useDialog } from 'naive-ui'
 import { implement } from '@/api/task/index.js'
 import { get as getProjection } from 'ol/proj.js'
 import { getTopLeft, getWidth } from 'ol/extent.js'
-const projection = getProjection('EPSG:4326')
-const projectionExtent = projection.getExtent()
-const size = getWidth(projectionExtent) / 256
-const resolutions = new Array(19)
-const matrixIds = new Array(19)
-for (let z = 0; z < 19; ++z) {
-  // generate resolutions and matrixIds arrays for this WMTS
-  resolutions[z] = size / Math.pow(2, z)
-  matrixIds[z] = z
-}
+
 var message = useMessage()
 export default {
   name: 'OneMap',
@@ -308,12 +298,40 @@ export default {
             url: 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=f634525a82da65f715d168d7ba1899c0'
           })
         })
-      var wmsSource = new Tile({
-        source: new TileWMS({
-          url: 'https://geoserver.t-aaron.com:4080/geoserver/jiangning/wms',
-          params: { 'LAYERS': 'jiangning:town' }
-        })
+
+      const projection = getProjection('EPSG:900913')
+      const projectionExtent = projection.getExtent()
+      const width = getWidth(projectionExtent) / 256
+      const resolutions = []
+      const matrixIds = []
+      for (let z = 0; z < 17; z++) {
+        resolutions[z] = width / Math.pow(2, z)
+        matrixIds[z] = 'EPSG:4326' + z
+      }
+
+      const wmtsTileGrid = new WMTSTileGrid({
+        tileSize: [256, 256],
+        extent: [-180.0, -90.0, 180.0, 90.0],
+        origin: [-180.0, 90.0],
+        // origin: getTopLeft(projectionExtent), // 原点（左上角）
+        resolutions: resolutions, // 瓦片地图分辨率
+        matrixIds: matrixIds // 矩阵ID，就是瓦片坐标系z维度各个层级的标识
       })
+
+      // WMTS数据源与地图
+      const wmtsSource = new WMTS({
+        url: 'https://geoserver.t-aaron.com:4080/geoserver/gwc/service/wmts',
+        layer: 'jiangning:town', // 对应的图层
+        matrixSet: 'EPSG:4326', // 投影坐标系参数矩阵集
+        format: 'image/png', // 图片格式
+        projection: projection, // 投影坐标系
+        // 投影坐标系
+        tileGrid: wmtsTileGrid
+      })
+      const wmtsLayer = new Tile({
+        source: wmtsSource
+      })
+
       data.map = new Map({
         // 地图容器
         target: props.id,
@@ -323,8 +341,8 @@ export default {
           maxZoom: 17
         }),
         layers: [
-          tdtImgMap
-
+          tdtImgMap,
+          wmtsLayer
         ],
         controls: control.defaults({
           attribution: false,
@@ -333,8 +351,6 @@ export default {
         })
 
       })
-      data.map.addLayer(wmsSource)
-      wmsSource.setOpacity(0.3)
     }
 
     /**
@@ -429,6 +445,14 @@ export default {
         offset: [10, 10]
       })
 
+      // 问题详情弹窗 初始化
+      data.problemOverlay = new Overlay({
+        id: 'problem_overlay',
+        element: document.getElementById('problemOverlay'),
+        autoPan: true,
+        offset: [10, 10]
+      })
+
       // 点击事件
       data.map.on('click', (evt) => {
         showAirInfo(evt)
@@ -463,7 +487,7 @@ export default {
           // console.log(data.problemDetail, '详情')
           const coord = feature.getProperties().coordinate
           data.problemOverlay.setPosition(coord)
-          data.problemPopupShow = true
+          // data.problemPopupShow = true
           data.map.addOverlay(data.problemOverlay)
 
           // data.problemOverlay.setPosition(coord)
@@ -487,7 +511,7 @@ export default {
     const hideProblemInfo = () => {
       if (data.map.getOverlayById('problem_overlay')) {
         data.problemDetail = {}
-        data.problemPopupShow = false
+        // data.problemPopupShow = false
         data.map.removeOverlay(data.problemOverlay)
       }
     }
@@ -548,13 +572,6 @@ export default {
     }
     // 添加问题图层
     const addproblemLayer = (narr) => {
-      data.problemOverlay = new Overlay({
-        id: 'problem_overlay',
-        element: document.getElementById('problemOverlay'),
-        autoPan: true,
-        offset: [10, 10]
-
-      })
       narr.map((item) => {
         const Features = []
         if (item.fraction.length > 0) {