gis

ruoyi-screen/.env.development

@@ -19,9 +19,12 @@ VITE_WEATHER_CITY=巴青
 VITE_GIS_BASE_URL=https://bqxm.alafarms.com/agis-api
 VITE_GIS_ACCESS_TOKEN=8XughK9JVapV1pqaE7HnxfHiKGrLy21L9LbsKskL
 VITE_GIS_WMTS_LAYER=baqing_wp
-# 瓦片边长：512 可向 WMTS 请求 WIDTH/HEIGHT=512 高清图（若服务支持）
+# 瓦片边长：256 
 VITE_GIS_TILE_SIZE=256
 VITE_GIS_DEFAULT_CENTER=94.046223,31.920382
 VITE_GIS_DEFAULT_ZOOM=14
 VITE_GIS_MIN_ZOOM=7
-VITE_GIS_MAX_ZOOM=19
+# 地图最大缩放；建议与瓦片最高级别一致，避免放到顶过采样缺图
+VITE_GIS_MAX_ZOOM=17
+# 瓦片请求最高 TileMatrix；与 MAX_ZOOM 相同则每级都请求新瓦片，低 1 级则顶级用放大显示
+VITE_GIS_TILE_MAX_ZOOM=16

ruoyi-screen/.env.production

@@ -23,7 +23,8 @@ VITE_GIS_TILE_SIZE=256
 VITE_GIS_DEFAULT_CENTER=94.046223,31.920382
 VITE_GIS_DEFAULT_ZOOM=14
 VITE_GIS_MIN_ZOOM=7
-VITE_GIS_MAX_ZOOM=19
+VITE_GIS_MAX_ZOOM=17
+VITE_GIS_TILE_MAX_ZOOM=16
 
 # 大屏免密登录（生产需后端 bigscreen.login.enabled=true 且配置 RSA 密钥）
 VITE_SCREEN_AUTO_LOGIN=true

ruoyi-screen/src/components/GisMap.vue

@@ -11,7 +11,6 @@ import {
   resolveGisMapStyle,
   createGisTransformRequest
 } from '@/utils/gisLoader'
-import { getMapPixelRatio } from '@/utils/screenFit'
 
 const props = defineProps({
   center: {
@@ -44,6 +43,16 @@ let map = null
 let cmmapglRef = null
 let zoomLogTimer = null
 let lastMouseZoomLogAt = 0
+let clampingZoom = false
+let unbindWheelZoom = null
+
+/** 滚轮缩放防抖：停止滚动后再合并应用，减少瓦片 canceled */
+const WHEEL_ZOOM_DEBOUNCE_MS = 150
+const WHEEL_ZOOM_RATE = 0.0022
+
+let wheelDeltaAccum = 0
+let wheelDebounceTimer = null
+let lastWheelAround = null
 
 function formatLngLat(lngLat) {
   if (!lngLat) {
@@ -80,7 +89,10 @@ function bindZoomDebugListeners() {
     return
   }
   map.on('load', () => logMapState('load'))
-  map.on('zoomend', () => logMapState('zoomend'))
+  map.on('zoomend', () => {
+    snapZoomToLimits()
+    logMapState('zoomend')
+  })
   map.on('moveend', () => logMapState('moveend'))
   map.on('wheel', () => {
     if (zoomLogTimer) {
@@ -106,7 +118,14 @@ function destroyMap() {
     clearTimeout(zoomLogTimer)
     zoomLogTimer = null
   }
+  if (typeof unbindWheelZoom === 'function') {
+    unbindWheelZoom()
+    unbindWheelZoom = null
+  }
+  wheelDeltaAccum = 0
+  lastWheelAround = null
   lastMouseZoomLogAt = 0
+  clampingZoom = false
   if (map) {
     map.remove()
     map = null
@@ -127,13 +146,173 @@ function resolveZoom() {
   return getGisDefaultZoom()
 }
 
-function applyMapSharpness() {
+function applyMapLimits() {
+  if (!map) {
+    return
+  }
+  const minZ = getGisMinZoom()
+  const maxZ = getGisMaxZoom()
+  if (typeof map.setMinZoom === 'function') {
+    map.setMinZoom(minZ)
+  }
+  if (typeof map.setMaxZoom === 'function') {
+    map.setMaxZoom(maxZ)
+  }
+}
+
+/** 任何越界立即拉回（不用 0.01 容差，否则 17.005 时图层会被 style maxzoom 隐藏） */
+function snapZoomToLimits() {
+  if (!map || clampingZoom) {
+    return
+  }
+  const minZ = getGisMinZoom()
+  const maxZ = getGisMaxZoom()
+  const z = map.getZoom()
+  if (!Number.isFinite(z)) {
+    return
+  }
+  if (z <= maxZ && z >= minZ) {
+    return
+  }
+  const next = Math.min(maxZ, Math.max(minZ, z))
+  clampingZoom = true
+  try {
+    map.jumpTo({ zoom: next })
+  } finally {
+    clampingZoom = false
+  }
+}
+
+function bindZoomClampListener() {
+  if (!map) {
+    return
+  }
+  map.on('zoom', () => {
+    if (clampingZoom || !map) {
+      return
+    }
+    const maxZ = getGisMaxZoom()
+    const minZ = getGisMinZoom()
+    const z = map.getZoom()
+    if (!Number.isFinite(z) || (z <= maxZ && z >= minZ)) {
+      return
+    }
+    snapZoomToLimits()
+  })
+}
+
+/** 滚轮防抖缩放：拦截原生 scrollZoom，停止滚动后一次性应用累计 delta */
+function bindDebouncedWheelZoom() {
+  const el = containerRef.value
+  if (!el || !map) {
+    return () => {}
+  }
+
+  const flushWheelZoom = () => {
+    wheelDebounceTimer = null
+    if (!map || wheelDeltaAccum === 0) {
+      return
+    }
+    const minZ = getGisMinZoom()
+    const maxZ = getGisMaxZoom()
+    const z = map.getZoom()
+    if (!Number.isFinite(z)) {
+      wheelDeltaAccum = 0
+      return
+    }
+
+    const delta = wheelDeltaAccum
+    wheelDeltaAccum = 0
+
+    let targetZ = z - delta * WHEEL_ZOOM_RATE
+    targetZ = Math.min(maxZ, Math.max(minZ, targetZ))
+    if (Math.abs(targetZ - z) < 0.001) {
+      return
+    }
+
+    const around = lastWheelAround || (typeof map.getCenter === 'function' ? map.getCenter() : null)
+    lastWheelAround = null
+
+    const nearLimit = targetZ >= maxZ - 0.05 || targetZ <= minZ + 0.05
+    if (nearLimit && typeof map.jumpTo === 'function') {
+      map.jumpTo(around ? { zoom: targetZ, around } : { zoom: targetZ })
+      return
+    }
+
+    if (around && typeof map.easeTo === 'function') {
+      map.easeTo({
+        zoom: targetZ,
+        around,
+        duration: 180,
+        essential: true
+      })
+    } else if (typeof map.setZoom === 'function') {
+      map.setZoom(targetZ)
+    }
+  }
+
+  const onWheel = (e) => {
+    if (!map || !props.interactive) {
+      return
+    }
+
+    e.preventDefault()
+    e.stopImmediatePropagation()
+
+    const minZ = getGisMinZoom()
+    const maxZ = getGisMaxZoom()
+    const z = map.getZoom()
+    if (!Number.isFinite(z)) {
+      return
+    }
+    if (e.deltaY < 0 && z >= maxZ - 0.01) {
+      return
+    }
+    if (e.deltaY > 0 && z <= minZ + 0.01) {
+      return
+    }
+
+    const rect = el.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    if (typeof map.unproject === 'function') {
+      lastWheelAround = map.unproject([x, y])
+    }
+
+    wheelDeltaAccum += e.deltaY
+    if (wheelDebounceTimer) {
+      clearTimeout(wheelDebounceTimer)
+    }
+    wheelDebounceTimer = setTimeout(flushWheelZoom, WHEEL_ZOOM_DEBOUNCE_MS)
+  }
+
+  el.addEventListener('wheel', onWheel, { passive: false, capture: true })
+  return () => {
+    if (wheelDebounceTimer) {
+      clearTimeout(wheelDebounceTimer)
+      wheelDebounceTimer = null
+    }
+    wheelDeltaAccum = 0
+    lastWheelAround = null
+    el.removeEventListener('wheel', onWheel, { capture: true })
+  }
+}
+
+function configureScrollZoom() {
+  if (!map?.scrollZoom) {
+    return
+  }
+  if (typeof map.scrollZoom.disable === 'function') {
+    map.scrollZoom.disable()
+  }
+}
+
+function resizeMap() {
   if (!map) {
     return
   }
-  const ratio = getMapPixelRatio()
   if (typeof map.setPixelRatio === 'function') {
-    map.setPixelRatio(ratio)
+    map.setPixelRatio(1)
   }
   if (typeof map.resize === 'function') {
     map.resize()
@@ -147,6 +326,9 @@ async function initMap() {
   }
   try {
     const cmmapgl = await loadGisSdk()
+    if (typeof cmmapgl.setMaxParallelImageRequests === 'function') {
+      cmmapgl.setMaxParallelImageRequests(64)
+    }
     cmmapglRef = cmmapgl
     const token = getGisAccessToken()
     if (token) {
@@ -163,8 +345,8 @@ async function initMap() {
       interactive: props.interactive,
       accessToken: token || undefined,
       collectResourceTiming: false,
-      pixelRatio: getMapPixelRatio(),
-      transformRequest: createGisTransformRequest(getMapPixelRatio)
+      pixelRatio: 1,
+      transformRequest: createGisTransformRequest()
     })
     if (props.showNav) {
       map.addControl(new cmmapgl.NavigationControl(), 'top-right')
@@ -173,8 +355,14 @@ async function initMap() {
       map.addControl(new cmmapgl.ScaleControl({ unit: 'metric' }), 'bottom-left')
     }
     bindZoomDebugListeners()
+    bindZoomClampListener()
+    unbindWheelZoom = bindDebouncedWheelZoom()
+    configureScrollZoom()
     map.on('load', () => {
-      applyMapSharpness()
+      applyMapLimits()
+      configureScrollZoom()
+      snapZoomToLimits()
+      resizeMap()
       emit('ready', map)
     })
     map.on('click', (e) => emit('click', e))
@@ -185,10 +373,6 @@ async function initMap() {
   }
 }
 
-function resizeMap() {
-  applyMapSharpness()
-}
-
 watch(
   () => [props.center, props.zoom],
   () => {

ruoyi-screen/src/layout/ScreenLayout.vue

@@ -1,21 +1,30 @@
 <script setup>
-import { onMounted, onUnmounted, provide, ref } from "vue"
+import { computed, onMounted, onUnmounted, provide, ref } from "vue"
 import GisMap from "../components/GisMap.vue"
 import ScreenNavBar from "../components/ScreenNavBar.vue"
 import { bindScreenScale, DESIGN_HEIGHT, DESIGN_WIDTH } from "../utils/screenFit.js"
 
 const viewportRef = ref(null)
 const gisMapRef = ref(null)
+const stageScale = ref(1)
 provide("screenGisMap", gisMapRef)
 
+const stageWidth = computed(() => Math.round(DESIGN_WIDTH * stageScale.value))
+const stageHeight = computed(() => Math.round(DESIGN_HEIGHT * stageScale.value))
+
 let unbindScale = null
 
 function resizeGisMap() {
   gisMapRef.value?.resizeMap?.()
 }
 
+function onScreenScaleChange(scale) {
+  stageScale.value = scale
+  resizeGisMap()
+}
+
 onMounted(() => {
-  unbindScale = bindScreenScale(viewportRef.value, resizeGisMap)
+  unbindScale = bindScreenScale(viewportRef.value, onScreenScaleChange)
   window.addEventListener("resize", resizeGisMap)
 })
 
@@ -29,17 +38,27 @@ onUnmounted(() => {
 
 <template>
   <div ref="viewportRef" class="screen-viewport">
+    <!-- 舞台用真实像素尺寸，不用 CSS scale，避免 WebGL 地图在 transform 下放大时整屏发黑 -->
     <div
       class="screen-stage"
-      :style="{ width: DESIGN_WIDTH + 'px', height: DESIGN_HEIGHT + 'px' }"
+      :style="{ width: stageWidth + 'px', height: stageHeight + 'px' }"
     >
       <div class="screen-map-layer">
         <GisMap ref="gisMapRef" :interactive="true" />
       </div>
       <div class="screen-chrome">
-        <ScreenNavBar />
-        <div class="screen-body">
-          <router-view />
+        <div
+          class="screen-chrome-inner"
+          :style="{
+            width: DESIGN_WIDTH + 'px',
+            height: DESIGN_HEIGHT + 'px',
+            transform: `scale(${stageScale})`,
+          }"
+        >
+          <ScreenNavBar />
+          <div class="screen-body">
+            <router-view />
+          </div>
         </div>
       </div>
     </div>
@@ -60,8 +79,6 @@ onUnmounted(() => {
 .screen-stage {
   position: relative;
   flex-shrink: 0;
-  transform: scale(var(--screen-scale, 1));
-  transform-origin: center center;
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -73,26 +90,30 @@ onUnmounted(() => {
 }
 
 .screen-chrome {
-  position: relative;
+  position: absolute;
+  inset: 0;
   z-index: 1;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.screen-chrome-inner {
+  transform-origin: 0 0;
   display: flex;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
   pointer-events: none;
 }
 
-.screen-chrome::before {
+.screen-chrome-inner::before {
   content: "";
   position: absolute;
   inset: 0;
-  /* background: url("../assets/bg.png") no-repeat center center; */
   background-size: cover;
   pointer-events: none;
   z-index: 0;
 }
 
-.screen-chrome > * {
+.screen-chrome-inner > * {
   position: relative;
   z-index: 1;
 }

ruoyi-screen/src/utils/gisLoader.js

@@ -76,57 +76,23 @@ function buildWmtsTileUrl() {
   return url
 }
 
-/** 高 DPI 时提升一级瓦片并同步 x/y，避免只改 TileMatrix 导致错位 */
-function boostWmtsTileUrl(url, boost) {
-  if (boost <= 0) {
-    return url
-  }
-  const zm = url.match(/TileMatrix=([^&]+)/)
-  const xc = url.match(/TileCol=(\d+)/)
-  const yr = url.match(/TileRow=(\d+)/)
-  if (!zm || !xc || !yr) {
-    return url
-  }
-  const matrixRaw = decodeURIComponent(zm[1])
-  const zMatch = matrixRaw.match(/(\d+)$/)
-  if (!zMatch) {
-    return url
-  }
-  let z = parseInt(zMatch[1], 10)
-  let x = parseInt(xc[1], 10)
-  let y = parseInt(yr[1], 10)
-  const maxZ = getGisMaxZoom()
-  for (let i = 0; i < boost && z < maxZ; i += 1) {
-    z += 1
-    x *= 2
-    y *= 2
-  }
-  const nextMatrix = matrixRaw.replace(/\d+$/, String(z))
-  return url
-    .replace(/TileMatrix=[^&]+/, `TileMatrix=${encodeURIComponent(nextMatrix)}`)
-    .replace(/TileCol=\d+/, `TileCol=${x}`)
-    .replace(/TileRow=\d+/, `TileRow=${y}`)
-}
-
 /**
- * 瓦片请求改写：zoom 偏移 + 高 DPI 时请求更高级别瓦片（更清晰）
- * @param {() => number} getPixelRatio
+ * 瓦片请求改写：仅处理 zoom 偏移。
+ * TileMatrix 上限由 style 里 source.maxzoom 控制，勿在此改写 col/row，否则易与引擎缓存键不一致导致 canceled。
  */
-export function createGisTransformRequest(getPixelRatio) {
+export function createGisTransformRequest() {
   const zoomOffset = getGisWmtsZoomOffset()
+  if (!zoomOffset) {
+    return undefined
+  }
   return (url, resourceType) => {
     if (resourceType !== 'Tile' || !String(url).includes('/wmts')) {
       return { url }
     }
-    let next = url
-    if (zoomOffset) {
-      next = next.replace(/TileMatrix=(\d+)/, (_, z) => `TileMatrix=${parseInt(z, 10) + zoomOffset}`)
-    }
-    const ratio = typeof getPixelRatio === 'function' ? getPixelRatio() : 1
-    const boost = ratio >= 2 ? 1 : 0
-    if (boost > 0) {
-      next = boostWmtsTileUrl(next, boost)
-    }
+    const next = url.replace(
+      /TileMatrix=(\d+)/,
+      (_, z) => `TileMatrix=${parseInt(z, 10) + zoomOffset}`
+    )
     return { url: next }
   }
 }
@@ -148,16 +114,30 @@ export function buildWmtsMapStyle() {
         type: 'raster',
         tiles: [tileUrl],
         tileSize,
-        scheme: 'xyz'
+        scheme: 'xyz',
+        minzoom: getGisMinZoom(),
+        maxzoom: getGisTileMaxZoom()
       }
     },
     layers: [
+      {
+        id: 'gis-bg',
+        type: 'background',
+        paint: {
+          'background-color': '#1a3a32'
+        }
+      },
       {
         id: 'gis-wmts-layer',
         type: 'raster',
         source: 'gis-wmts',
         minzoom: getGisMinZoom(),
-        maxzoom: getGisMaxZoom()
+        // 勿与 VITE_GIS_MAX_ZOOM 绑死：zoom 略大于 max 时（easeTo 过冲）图层会被引擎整层隐藏
+        maxzoom: 24,
+        paint: {
+          'raster-fade-duration': 300,
+          'raster-resampling': 'linear'
+        }
       }
     ]
   }
@@ -196,6 +176,17 @@ export function getGisMaxZoom() {
   return Number.isFinite(z) ? z : 17
 }
 
+/** 瓦片源最高级别；默认比地图 maxZoom 低 1，最高级用低级瓦片放大，避免放到顶整屏发黑 */
+export function getGisTileMaxZoom() {
+  const explicit = Number(import.meta.env.VITE_GIS_TILE_MAX_ZOOM)
+  if (Number.isFinite(explicit)) {
+    return explicit
+  }
+  const max = getGisMaxZoom()
+  const min = getGisMinZoom()
+  return max > min ? max - 1 : max
+}
+
 export function isGisConfigured() {
   return !!(getGisBaseUrl() && getGisAccessToken() && resolveGisMapStyle())
 }

ruoyi-screen/src/utils/screenFit.js

@@ -24,7 +24,7 @@ export function bindScreenScale(root, onScaleChange) {
     const scale = Math.min(sx, sy)
     root.style.setProperty("--screen-scale", String(scale))
     if (typeof onScaleChange === "function") {
-      requestAnimationFrame(onScaleChange)
+      requestAnimationFrame(() => onScaleChange(scale))
     }
   }
   update()
@@ -33,20 +33,3 @@ export function bindScreenScale(root, onScaleChange) {
     window.removeEventListener("resize", update)
   }
 }
-
-/** 读取 screenFit 写入的 --screen-scale（舞台 CSS 缩放比） */
-export function getScreenScale(root = document.querySelector(".screen-viewport")) {
-  if (!root) {
-    return 1
-  }
-  const raw = getComputedStyle(root).getPropertyValue("--screen-scale").trim()
-  const scale = parseFloat(raw)
-  return Number.isFinite(scale) && scale > 0 ? scale : 1
-}
-
-/** 地图像素比：补偿舞台 scale 放大，避免 WebGL 画布被拉伸发糊 */
-export function getMapPixelRatio(root) {
-  const scale = getScreenScale(root)
-  const dpr = window.devicePixelRatio || 1
-  return Math.min(dpr * scale, 3)
-}