gis

doc/大屏/集中化GIS地图对接技术方案.md

@@ -0,0 +1,126 @@
+# 大屏 — 集中化 GIS 地图对接技术方案
+
+> 依据《中国移动集中化 GIS 平台 JSAPI 接口协议 v1.0》（`集中化GIS系统JSAPI接口文档.docx`）。  
+> 前端引擎为 **cmmap GL JS**（API 形态与 Mapbox GL JS 接近），全局对象 **`cmmapgl`**。
+
+---
+
+## 1. 对接前提（向 GIS 平台申请）
+
+| 项 | 说明 |
+| --- | --- |
+| **GIS 服务根地址** | 文档中的「GIS 服务地址」，如 `https://gis.example.com` |
+| **地图密钥 accessToken** | 文档 §2.2；初始化前赋值 `cmmapgl.accessToken` |
+| **底图样式 style** | Mapbox Style 规范 JSON 或样式 URL（`MapOptions.style`） |
+| **跨域** | 生产由 GIS/Nginx 放行；开发可用 Vite 代理 `/gis-dev-proxy` |
+
+---
+
+## 2. 静态资源引入
+
+文档 §2.1 要求在页面引入（将 `GIS服务地址` 替换为实际根地址）：
+
+```html
+<script src="{GIS_BASE}/agis/resources/v1/tile-server/dist/cmmap-gl/1.0/cmmap-gl.js"></script>
+<link href="{GIS_BASE}/agis/resources/v1/tile-server/dist/cmmap-gl/1.0/cmmap-gl.css" rel="stylesheet" />
+```
+
+`ruoyi-screen` 通过 `src/utils/gisLoader.js` **按需动态加载**，避免未配置 GIS 时阻塞整站。
+
+---
+
+## 3. 初始化流程
+
+```text
+loadGisSdk() → cmmapgl.accessToken = token → new cmmapgl.Map({ container, center, zoom, style })
+```
+
+| 参数 | 说明 |
+| --- | --- |
+| `container` | 地图容器 DOM 或 id |
+| `center` | **`[经度, 纬度]`**（与 GeoJSON 一致，勿写反） |
+| `zoom` | 0–24，默认约 2–9 |
+| `style` | 底图样式 URL 或 JSON |
+| `accessToken` | 也可在 `MapOptions` 中传 `accessToken`，会覆盖全局 `cmmapgl.accessToken` |
+
+巴青县默认中心（可在页面覆盖）：`[94.05, 31.92]`，缩放 `9`。
+
+---
+
+## 4. 常用能力（按大屏场景）
+
+| 文档章节 | 能力 | 大屏典型用途 |
+| --- | --- | --- |
+| §3.1 | `cmmapgl.Map` | 底图展示 |
+| §3.3 | `NavigationControl` / `ScaleControl` | 导航、比例尺（大屏可关闭交互） |
+| §4 | `addSource` + `addLayer` | 矢量/栅格/GeoJSON 业务图层 |
+| §5.1 | `cmmapgl.Marker` | 牧场、检疫站、交易市场点位 |
+| §5.2 | `Popup` | 点位详情气泡 |
+| §7 | 热力图、散点、轨迹等 | 疫病风险、资源分布 |
+| §8 | `agis.turf` | 空间计算（点线面关系） |
+| §10–11 | POI / 路线 | 后续扩展 |
+
+---
+
+## 5. ruoyi-screen 工程约定
+
+### 5.1 环境变量（`.env.development` / `.env.production`）
+
+```bash
+# GIS 服务根地址（勿带末尾 /）
+VITE_GIS_BASE_URL=/gis-dev-proxy
+# 地图密钥（§2.2，由 GIS 平台发放）
+VITE_GIS_ACCESS_TOKEN=
+# 底图样式 URL 或 JSON 路径
+VITE_GIS_MAP_STYLE=
+# 默认中心：经度,纬度
+VITE_GIS_DEFAULT_CENTER=94.05,31.92
+VITE_GIS_DEFAULT_ZOOM=9
+```
+
+开发环境在 `vite.config.js` 将 `/gis-dev-proxy` 代理到真实 GIS 服务（`VITE_GIS_PROXY_TARGET`）。
+
+### 5.2 代码入口
+
+| 文件 | 职责 |
+| --- | --- |
+| `src/utils/gisLoader.js` | 动态加载 cmmap-gl.js/css、读取 env |
+| `src/components/GisMap.vue` | 通用地图容器，`@ready` 抛出 `map` 实例 |
+
+### 5.3 页面使用示例
+
+```vue
+<GisMap
+  class="my-map"
+  :interactive="false"
+  @ready="onMapReady"
+  @error="onMapError"
+/>
+```
+
+```javascript
+function onMapReady(map) {
+  // map 为 cmmapgl.Map 实例
+  // map.addSource / addLayer / Marker 等见文档 §4–§5
+}
+```
+
+---
+
+## 6. 注意事项
+
+1. **坐标顺序**：一律 `[lng, lat]`。
+2. **容器尺寸**：父级须有明确宽高（大屏组件内 `width/height: 100%`）。
+3. **销毁**：路由离开须 `map.remove()`（`GisMap.vue` 已在 `onUnmounted` 处理）。
+4. **resize**：大屏 `screenFit` 缩放后若地图空白，在布局稳定后调用 `map.resize()`。
+5. **token 缺失**：未配置 `VITE_GIS_ACCESS_TOKEN` 时组件展示占位提示，不抛白屏。
+
+---
+
+## 7. 交付清单
+
+- [x] `gisLoader.js` 动态加载 SDK
+- [x] `GisMap.vue` 基础地图组件
+- [x] Vite 开发代理占位
+- [x] 业务页嵌入地图（`ScreenLayout` 中间栏共用底图，各子页左右面板叠在两侧）
+- [ ] 业务点位/GeoJSON 与后端接口联调

ruoyi-screen/.env.development

@@ -15,5 +15,13 @@ VITE_WEATHER_APP_ID=36793262
 VITE_WEATHER_APP_SECRET=t6a6z0H8
 VITE_WEATHER_CITY=巴青
 
-# 大屏免密登录（获取公钥 + RSA 加密 UUID）
-VITE_SCREEN_AUTO_LOGIN=true
+# 集中化 GIS（浏览器直连 GIS 服务）
+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 高清图（若服务支持）
+VITE_GIS_TILE_SIZE=256
+VITE_GIS_DEFAULT_CENTER=94.046223,31.920382
+VITE_GIS_DEFAULT_ZOOM=14
+VITE_GIS_MIN_ZOOM=6
+VITE_GIS_MAX_ZOOM=17

ruoyi-screen/.env.production

@@ -15,6 +15,16 @@ VITE_WEATHER_APP_ID=36793262
 VITE_WEATHER_APP_SECRET=t6a6z0H8
 VITE_WEATHER_CITY=巴青
 
+# 集中化 GIS
+VITE_GIS_BASE_URL=https://bqxm.alafarms.com/agis-api
+VITE_GIS_ACCESS_TOKEN=8XughK9JVapV1pqaE7HnxfHiKGrLy21L9LbsKskL
+VITE_GIS_WMTS_LAYER=baqing_wp
+VITE_GIS_TILE_SIZE=256
+VITE_GIS_DEFAULT_CENTER=94.046223,31.920382
+VITE_GIS_DEFAULT_ZOOM=14
+VITE_GIS_MIN_ZOOM=6
+VITE_GIS_MAX_ZOOM=17
+
 # 大屏免密登录（生产需后端 bigscreen.login.enabled=true 且配置 RSA 密钥）
 VITE_SCREEN_AUTO_LOGIN=true
 

ruoyi-screen/src/components/GisMap.vue

@@ -0,0 +1,234 @@
+<script setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import {
+  getGisAccessToken,
+  getGisDefaultCenter,
+  getGisDefaultZoom,
+  getGisMaxZoom,
+  getGisMinZoom,
+  isGisConfigured,
+  loadGisSdk,
+  resolveGisMapStyle,
+  createGisTransformRequest
+} from '@/utils/gisLoader'
+import { getMapPixelRatio } from '@/utils/screenFit'
+
+const props = defineProps({
+  center: {
+    type: Array,
+    default: null
+  },
+  zoom: {
+    type: Number,
+    default: null
+  },
+  interactive: {
+    type: Boolean,
+    default: true
+  },
+  showNav: {
+    type: Boolean,
+    default: false
+  },
+  showScale: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['ready', 'click'])
+
+const containerRef = ref(null)
+
+let map = null
+let cmmapglRef = null
+let zoomLogTimer = null
+let lastMouseZoomLogAt = 0
+
+function formatLngLat(lngLat) {
+  if (!lngLat) {
+    return '—'
+  }
+  const lng = Number(lngLat.lng ?? lngLat[0])
+  const lat = Number(lngLat.lat ?? lngLat[1])
+  if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
+    return '—'
+  }
+  return `[${lng.toFixed(6)}, ${lat.toFixed(6)}]`
+}
+
+function logMapState(source, cursorLngLat) {
+  if (!map || typeof map.getZoom !== 'function') {
+    return
+  }
+  const z = map.getZoom()
+  const zoomText = Number.isFinite(z) ? z.toFixed(2) : String(z)
+  const center = typeof map.getCenter === 'function' ? map.getCenter() : null
+  const parts = [
+    `[GIS] ${source}`,
+    `zoom: ${zoomText}`,
+    `center: ${formatLngLat(center)}`
+  ]
+  if (cursorLngLat) {
+    parts.push(`point: ${formatLngLat(cursorLngLat)}`)
+  }
+  console.log(parts.join(' | '))
+}
+
+function bindZoomDebugListeners() {
+  if (!map) {
+    return
+  }
+  map.on('load', () => logMapState('load'))
+  map.on('zoomend', () => logMapState('zoomend'))
+  map.on('moveend', () => logMapState('moveend'))
+  map.on('wheel', () => {
+    if (zoomLogTimer) {
+      clearTimeout(zoomLogTimer)
+    }
+    zoomLogTimer = setTimeout(() => logMapState('wheel'), 80)
+  })
+  map.on('mousemove', (e) => {
+    const now = Date.now()
+    if (now - lastMouseZoomLogAt < 300) {
+      return
+    }
+    lastMouseZoomLogAt = now
+    logMapState('mousemove', e.lngLat)
+  })
+  map.on('click', (e) => {
+    logMapState('click', e.lngLat)
+  })
+}
+
+function destroyMap() {
+  if (zoomLogTimer) {
+    clearTimeout(zoomLogTimer)
+    zoomLogTimer = null
+  }
+  lastMouseZoomLogAt = 0
+  if (map) {
+    map.remove()
+    map = null
+  }
+}
+
+function resolveCenter() {
+  if (Array.isArray(props.center) && props.center.length >= 2) {
+    return [Number(props.center[0]), Number(props.center[1])]
+  }
+  return getGisDefaultCenter()
+}
+
+function resolveZoom() {
+  if (props.zoom != null && Number.isFinite(Number(props.zoom))) {
+    return Number(props.zoom)
+  }
+  return getGisDefaultZoom()
+}
+
+function applyMapSharpness() {
+  if (!map) {
+    return
+  }
+  const ratio = getMapPixelRatio()
+  if (typeof map.setPixelRatio === 'function') {
+    map.setPixelRatio(ratio)
+  }
+  if (typeof map.resize === 'function') {
+    map.resize()
+  }
+}
+
+async function initMap() {
+  destroyMap()
+  if (!isGisConfigured()) {
+    return
+  }
+  try {
+    const cmmapgl = await loadGisSdk()
+    cmmapglRef = cmmapgl
+    const token = getGisAccessToken()
+    if (token) {
+      cmmapgl.accessToken = token
+    }
+    const style = resolveGisMapStyle()
+    map = new cmmapgl.Map({
+      container: containerRef.value,
+      center: resolveCenter(),
+      zoom: resolveZoom(),
+      minZoom: getGisMinZoom(),
+      maxZoom: getGisMaxZoom(),
+      style,
+      interactive: props.interactive,
+      accessToken: token || undefined,
+      collectResourceTiming: false,
+      pixelRatio: getMapPixelRatio(),
+      transformRequest: createGisTransformRequest(getMapPixelRatio)
+    })
+    if (props.showNav) {
+      map.addControl(new cmmapgl.NavigationControl(), 'top-right')
+    }
+    if (props.showScale) {
+      map.addControl(new cmmapgl.ScaleControl({ unit: 'metric' }), 'bottom-left')
+    }
+    bindZoomDebugListeners()
+    map.on('load', () => {
+      applyMapSharpness()
+      emit('ready', map)
+    })
+    map.on('click', (e) => emit('click', e))
+    // 瓦片/遥测等非致命错误不向页面报错
+    map.on('error', () => {})
+  } catch {
+    /* 静默失败，不遮挡大屏 */
+  }
+}
+
+function resizeMap() {
+  applyMapSharpness()
+}
+
+watch(
+  () => [props.center, props.zoom],
+  () => {
+    if (!map || !cmmapglRef) return
+    map.jumpTo({
+      center: resolveCenter(),
+      zoom: resolveZoom()
+    })
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  initMap()
+})
+
+onUnmounted(() => {
+  destroyMap()
+})
+
+defineExpose({ resizeMap, getMap: () => map })
+</script>
+
+<template>
+  <div class="gis-map">
+    <div ref="containerRef" class="gis-map__canvas" />
+  </div>
+</template>
+
+<style scoped>
+.gis-map {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 120px;
+  overflow: hidden;
+}
+
+.gis-map__canvas {
+  width: 100%;
+  height: 100%;
+}
+</style>

ruoyi-screen/src/components/ScreenNavBar.vue

@@ -114,6 +114,8 @@ function onLogout() {
   height: 100px;
   position: relative;
   font-family: inherit;
+  pointer-events: none;
+  background: url("../assets/header.png") no-repeat center center;
 }
 .screen-nav-left {
   position: absolute;
@@ -131,6 +133,7 @@ function onLogout() {
   padding: 5px 10px;
   cursor: pointer;
   margin-right: 10px;
+  pointer-events: auto;
 }
 .screen-nav-left-item:hover {
   background: url("../assets/nav/btn_active.png") no-repeat center center;
@@ -156,6 +159,7 @@ function onLogout() {
   padding: 5px 10px;
   cursor: pointer;
   margin-right: 10px;
+  pointer-events: auto;
 }
 .screen-nav-right-item:hover {
   background: url("../assets/nav/btn_active.png") no-repeat center center;

ruoyi-screen/src/layout/ScreenLayout.vue

@@ -1,17 +1,26 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from "vue"
+import { 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"
 
-/** 视口根节点，供 screenFit 写入 --screen-scale */
 const viewportRef = ref(null)
+const gisMapRef = ref(null)
+provide("screenGisMap", gisMapRef)
+
 let unbindScale = null
 
+function resizeGisMap() {
+  gisMapRef.value?.resizeMap?.()
+}
+
 onMounted(() => {
-  unbindScale = bindScreenScale(viewportRef.value)
+  unbindScale = bindScreenScale(viewportRef.value, resizeGisMap)
+  window.addEventListener("resize", resizeGisMap)
 })
 
 onUnmounted(() => {
+  window.removeEventListener("resize", resizeGisMap)
   if (typeof unbindScale === "function") {
     unbindScale()
   }
@@ -19,15 +28,19 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <!-- 外层铺满窗口，内层舞台按 21:9 等比缩放 -->
   <div ref="viewportRef" class="screen-viewport">
     <div
       class="screen-stage"
       :style="{ width: DESIGN_WIDTH + 'px', height: DESIGN_HEIGHT + 'px' }"
     >
-      <ScreenNavBar />
-      <div class="screen-body">
-        <router-view />
+      <div class="screen-map-layer">
+        <GisMap ref="gisMapRef" :interactive="true" />
+      </div>
+      <div class="screen-chrome">
+        <ScreenNavBar />
+        <div class="screen-body">
+          <router-view />
+        </div>
       </div>
     </div>
   </div>
@@ -41,10 +54,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  /* background: var(--screen-bg); */
   box-sizing: border-box;
-  /* background: url('@/assets/bg.png') no-repeat center center;
-  background-size: cover; */
 }
 
 .screen-stage {
@@ -52,17 +62,51 @@ onUnmounted(() => {
   flex-shrink: 0;
   transform: scale(var(--screen-scale, 1));
   transform-origin: center center;
-  display: flex;
-  flex-direction: column;
   box-sizing: border-box;
   overflow: hidden;
-  /* background: var(--screen-bg-stage); */
-  background: url('../assets/bg.png') no-repeat center center;
+}
+
+.screen-map-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.screen-chrome {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.screen-chrome::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 > * {
+  position: relative;
+  z-index: 1;
 }
 
 .screen-body {
-  width: 100%;
-  height: calc(100% - 100px);
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  pointer-events: none;
+}
+
+.screen-body > :deep(.screen-page) {
+  position: relative;
+  z-index: 1;
+  height: 100%;
 }
 </style>

ruoyi-screen/src/style.css

@@ -51,4 +51,10 @@ body {
   min-height: 0;
   display: flex;
   flex-direction: column;
+  /* 中间地图区域无面板，点击穿透到底图 */
+  pointer-events: none;
+}
+
+.screen-page > * {
+  pointer-events: auto;
 }

ruoyi-screen/src/utils/gisLoader.js

@@ -0,0 +1,331 @@
+const CMMAP_GL_VERSION = '1.0'
+
+let loadPromise = null
+
+function trimSlash(url) {
+  return String(url || '').replace(/\/$/, '')
+}
+
+/** GIS 服务根地址，浏览器直连，如 http://117.180.211.5:8074 */
+export function getGisBaseUrl() {
+  return trimSlash(import.meta.env.VITE_GIS_BASE_URL)
+}
+
+export function getGisAssetUrls() {
+  const base = getGisBaseUrl()
+  const dist = `/agis/resources/v1/tile-server/dist/cmmap-gl/${CMMAP_GL_VERSION}`
+  return {
+    js: `${base}${dist}/cmmap-gl.js`,
+    css: `${base}${dist}/cmmap-gl.css`
+  }
+}
+
+export function getGisAccessToken() {
+  return (import.meta.env.VITE_GIS_ACCESS_TOKEN || '').trim()
+}
+
+export function getGisMapStyle() {
+  const style = (import.meta.env.VITE_GIS_MAP_STYLE || '').trim()
+  return style || undefined
+}
+
+/** WMTS 图层名，如 baqing_wp */
+export function getGisWmtsLayer() {
+  return (import.meta.env.VITE_GIS_WMTS_LAYER || '').trim()
+}
+
+/** 瓦片边长（256 或 512）；512 时向 WMTS 追加 WIDTH/HEIGHT 请求高清瓦片 */
+export function getGisTileSize() {
+  const n = Number(import.meta.env.VITE_GIS_TILE_SIZE)
+  return Number.isFinite(n) && n > 0 ? n : 256
+}
+
+function getGisWmtsTileMatrixSet() {
+  return (import.meta.env.VITE_GIS_WMTS_TILEMATRIXSET || 'EPSG:3857_base').trim()
+}
+
+/** TileMatrix 模板，{z} 由地图替换，如 {z} 或 EPSG:3857_base:{z} */
+function getGisWmtsTileMatrixTemplate() {
+  return (import.meta.env.VITE_GIS_WMTS_TILE_MATRIX || '{z}').trim()
+}
+
+function getGisWmtsZoomOffset() {
+  const n = Number(import.meta.env.VITE_GIS_WMTS_ZOOM_OFFSET)
+  return Number.isFinite(n) ? n : 0
+}
+
+function buildWmtsTileUrl() {
+  const base = getGisBaseUrl()
+  const layer = getGisWmtsLayer()
+  const key = getGisAccessToken()
+  const tileSize = getGisTileSize()
+  const matrix = getGisWmtsTileMatrixTemplate()
+  const matrixSet = encodeURIComponent(getGisWmtsTileMatrixSet())
+  let url =
+    `${base}/agis/maps/v1/wmts` +
+    `?LAYER=${encodeURIComponent(layer)}` +
+    '&SERVICE=WMTS&REQUEST=GetTile' +
+    `&TileMatrix=${matrix}` +
+    '&TileCol={x}&TileRow={y}' +
+    '&Version=1.0.0&FORMAT=image/png&style=' +
+    `&tilematrixset=${matrixSet}` +
+    `&key=${encodeURIComponent(key)}`
+  if (tileSize !== 256) {
+    url += `&WIDTH=${tileSize}&HEIGHT=${tileSize}`
+  }
+  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
+ */
+export function createGisTransformRequest(getPixelRatio) {
+  const zoomOffset = getGisWmtsZoomOffset()
+  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)
+    }
+    return { url: next }
+  }
+}
+
+/** 由 WMTS GetTile 模板生成 Mapbox Style（raster 源） */
+export function buildWmtsMapStyle() {
+  const base = getGisBaseUrl()
+  const layer = getGisWmtsLayer()
+  const key = getGisAccessToken()
+  if (!base || !layer || !key) {
+    return null
+  }
+  const tileSize = getGisTileSize()
+  const tileUrl = buildWmtsTileUrl()
+  return {
+    version: 8,
+    sources: {
+      'gis-wmts': {
+        type: 'raster',
+        tiles: [tileUrl],
+        tileSize,
+        scheme: 'xyz'
+      }
+    },
+    layers: [
+      {
+        id: 'gis-wmts-layer',
+        type: 'raster',
+        source: 'gis-wmts',
+        minzoom: getGisMinZoom(),
+        maxzoom: getGisMaxZoom()
+      }
+    ]
+  }
+}
+
+/** 优先使用 VITE_GIS_MAP_STYLE URL；否则按 WMTS 图层拼装样式对象 */
+export function resolveGisMapStyle() {
+  const explicit = getGisMapStyle()
+  if (explicit) {
+    return explicit
+  }
+  return buildWmtsMapStyle()
+}
+
+export function getGisDefaultCenter() {
+  const raw = (import.meta.env.VITE_GIS_DEFAULT_CENTER || '94.05,31.92').trim()
+  const parts = raw.split(',').map((n) => Number(n.trim()))
+  if (parts.length >= 2 && parts.every((n) => Number.isFinite(n))) {
+    return [parts[0], parts[1]]
+  }
+  return [94.05, 31.92]
+}
+
+export function getGisDefaultZoom() {
+  const z = Number(import.meta.env.VITE_GIS_DEFAULT_ZOOM)
+  return Number.isFinite(z) ? z : 17
+}
+
+export function getGisMinZoom() {
+  const z = Number(import.meta.env.VITE_GIS_MIN_ZOOM)
+  return Number.isFinite(z) ? z : 6
+}
+
+export function getGisMaxZoom() {
+  const z = Number(import.meta.env.VITE_GIS_MAX_ZOOM)
+  return Number.isFinite(z) ? z : 17
+}
+
+export function isGisConfigured() {
+  return !!(getGisBaseUrl() && getGisAccessToken() && resolveGisMapStyle())
+}
+
+/** 关闭 cmmap 遥测，避免 events.cmmap.com SSL 报错刷控制台 */
+export function disableCmmapTelemetry(cmmapgl) {
+  if (!cmmapgl) {
+    return
+  }
+  try {
+    if (typeof cmmapgl.setTelemetryEnabled === 'function') {
+      cmmapgl.setTelemetryEnabled(false)
+    }
+  } catch {
+    /* ignore */
+  }
+  try {
+    if (cmmapgl.config) {
+      cmmapgl.config.EVENTS_URL = ''
+      if ('FEEDBACK_URL' in cmmapgl.config) {
+        cmmapgl.config.FEEDBACK_URL = ''
+      }
+    }
+  } catch {
+    /* ignore */
+  }
+}
+
+let telemetryBlocked = false
+
+function blockCmmapTelemetryRequests() {
+  if (telemetryBlocked || typeof window === 'undefined') {
+    return
+  }
+  telemetryBlocked = true
+  const shouldBlock = (url) => {
+    const s = String(url || '')
+    return s.includes('events.cmmap.com')
+  }
+  const nativeFetch = window.fetch
+  if (typeof nativeFetch === 'function') {
+    window.fetch = function blockedFetch(input, init) {
+      const url = typeof input === 'string' ? input : input?.url
+      if (shouldBlock(url)) {
+        return Promise.resolve(new Response(null, { status: 204 }))
+      }
+      return nativeFetch.call(this, input, init)
+    }
+  }
+  const XHR = window.XMLHttpRequest
+  if (XHR && XHR.prototype) {
+    const open = XHR.prototype.open
+    XHR.prototype.open = function blockedOpen(method, url, ...rest) {
+      this.__gisBlockedTelemetry = shouldBlock(url)
+      return open.call(this, method, url, ...rest)
+    }
+    const send = XHR.prototype.send
+    XHR.prototype.send = function blockedSend(...args) {
+      if (this.__gisBlockedTelemetry) {
+        return
+      }
+      return send.apply(this, args)
+    }
+  }
+}
+
+function loadCss(href) {
+  return new Promise((resolve, reject) => {
+    if (document.querySelector(`link[data-gis-sdk="cmmap-gl-css"]`)) {
+      resolve()
+      return
+    }
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = href
+    link.dataset.gisSdk = 'cmmap-gl-css'
+    link.onload = () => resolve()
+    link.onerror = () => reject(new Error('GIS 样式加载失败'))
+    document.head.appendChild(link)
+  })
+}
+
+function loadScript(src) {
+  return new Promise((resolve, reject) => {
+    if (window.cmmapgl) {
+      resolve(window.cmmapgl)
+      return
+    }
+    const existing = document.querySelector(`script[data-gis-sdk="cmmap-gl-js"]`)
+    if (existing) {
+      existing.addEventListener('load', () => resolve(window.cmmapgl))
+      existing.addEventListener('error', () => reject(new Error('GIS 脚本加载失败')))
+      return
+    }
+    const script = document.createElement('script')
+    script.src = src
+    script.async = true
+    script.dataset.gisSdk = 'cmmap-gl-js'
+    script.onload = () => resolve(window.cmmapgl)
+    script.onerror = () => reject(new Error('GIS 脚本加载失败'))
+    document.head.appendChild(script)
+  })
+}
+
+/** 动态加载 cmmap GL JS SDK，返回全局 cmmapgl */
+export function loadGisSdk() {
+  if (window.cmmapgl) {
+    blockCmmapTelemetryRequests()
+    disableCmmapTelemetry(window.cmmapgl)
+    return Promise.resolve(window.cmmapgl)
+  }
+  if (!getGisBaseUrl()) {
+    return Promise.reject(new Error('未配置 VITE_GIS_BASE_URL'))
+  }
+  if (!loadPromise) {
+    const { js, css } = getGisAssetUrls()
+    loadPromise = loadCss(css)
+      .then(() => loadScript(js))
+      .then((cmmapgl) => {
+        if (!cmmapgl) {
+          throw new Error('cmmapgl 未挂载到 window')
+        }
+        blockCmmapTelemetryRequests()
+        disableCmmapTelemetry(cmmapgl)
+        return cmmapgl
+      })
+      .catch((err) => {
+        loadPromise = null
+        throw err
+      })
+  }
+  return loadPromise
+}

ruoyi-screen/src/utils/screenFit.js

@@ -14,7 +14,7 @@ export const DESIGN_HEIGHT = (DESIGN_WIDTH * 9) / 21
  * @param {HTMLElement} root 包住舞台的节点（一般占满视口）
  * @returns {function} 取消监听用的函数，在组件卸载时调用
  */
-export function bindScreenScale(root) {
+export function bindScreenScale(root, onScaleChange) {
   function update() {
     if (!root) {
       return
@@ -23,6 +23,9 @@ export function bindScreenScale(root) {
     const sy = window.innerHeight / DESIGN_HEIGHT
     const scale = Math.min(sx, sy)
     root.style.setProperty("--screen-scale", String(scale))
+    if (typeof onScaleChange === "function") {
+      requestAnimationFrame(onScaleChange)
+    }
   }
   update()
   window.addEventListener("resize", update)
@@ -30,3 +33,20 @@ export function bindScreenScale(root) {
     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)
+}

ruoyi-screen/vite.config.js

@@ -1,65 +1,74 @@
-import { defineConfig, loadEnv } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import path from 'path'
-import { fileURLToPath } from 'url'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-/** 与 ruoyi-ui vue.config.js publicPath 一致：生产 /screen，开发 / */
-function resolvePublicPath(mode, env) {
-  if (mode !== 'production') {
-    return '/'
-  }
-  const raw = String(env.VITE_APP_PUBLIC_PATH || '/screen').trim()
-  if (!raw || raw === '/') {
-    return '/'
-  }
-  return `/${raw.replace(/^\/+|\/+$/g, '')}/`
-}
-
-// https://vite.dev/config/
-export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), '')
-  const base = resolvePublicPath(mode, env)
-
-  const baseApi = env.VITE_APP_BASE_API || '/dev-api'
-  const proxyTarget = (env.VITE_PROXY_TARGET || 'http://192.168.1.6:8010').replace(/\/$/, '')
-
-  const proxy = {
-    [baseApi]: {
-      target: proxyTarget,
-      changeOrigin: true,
-      rewrite: (path) => path.replace(new RegExp(`^${baseApi}`), '')
-    },
-    '^/v3/api-docs/(.*)': {
-      target: proxyTarget,
-      changeOrigin: true
-    }
-  }
-
-  const llmTarget = env.LLM_PROXY_TARGET
-  if (llmTarget) {
-    proxy['^/llm-dev-proxy'] = {
-      target: llmTarget.replace(/\/$/, ''),
-      changeOrigin: true,
-      rewrite: (path) => path.replace(/^\/llm-dev-proxy/, '')
-    }
-  }
-
-  return {
-    base,
-    plugins: [vue()],
-    resolve: {
-      alias: {
-        '@': path.resolve(__dirname, 'src')
-      }
-    },
-    server: {
-      host: true,
-      port: 5188,
-      strictPort: false,
-      proxy
-    }
-  }
-})
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+/** 与 ruoyi-ui vue.config.js publicPath 一致：生产 /screen，开发 / */
+function resolvePublicPath(mode, env) {
+  if (mode !== 'production') {
+    return '/'
+  }
+  const raw = String(env.VITE_APP_PUBLIC_PATH || '/screen').trim()
+  if (!raw || raw === '/') {
+    return '/'
+  }
+  return `/${raw.replace(/^\/+|\/+$/g, '')}/`
+}
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  const base = resolvePublicPath(mode, env)
+
+  const baseApi = env.VITE_APP_BASE_API || '/dev-api'
+  const proxyTarget = (env.VITE_PROXY_TARGET || 'http://192.168.1.6:8010').replace(/\/$/, '')
+
+  const proxy = {
+    [baseApi]: {
+      target: proxyTarget,
+      changeOrigin: true,
+      rewrite: (path) => path.replace(new RegExp(`^${baseApi}`), '')
+    },
+    '^/v3/api-docs/(.*)': {
+      target: proxyTarget,
+      changeOrigin: true
+    }
+  }
+
+  const llmTarget = env.LLM_PROXY_TARGET
+  if (llmTarget) {
+    proxy['^/llm-dev-proxy'] = {
+      target: llmTarget.replace(/\/$/, ''),
+      changeOrigin: true,
+      rewrite: (path) => path.replace(/^\/llm-dev-proxy/, '')
+    }
+  }
+
+  const gisTarget = env.VITE_GIS_PROXY_TARGET
+  if (gisTarget) {
+    proxy['^/gis-dev-proxy'] = {
+      target: gisTarget.replace(/\/$/, ''),
+      changeOrigin: true,
+      rewrite: (path) => path.replace(/^\/gis-dev-proxy/, '')
+    }
+  }
+
+  return {
+    base,
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src')
+      }
+    },
+    server: {
+      host: true,
+      port: 5188,
+      strictPort: false,
+      proxy
+    }
+  }
+})
 

scripts/extract-docx-text.mjs

@@ -0,0 +1,9 @@
+import fs from 'fs'
+import path from 'path'
+import os from 'os'
+
+const raw = path.join(os.tmpdir(), 'gis-doc-raw.xml')
+let x = fs.readFileSync(raw, 'utf8')
+x = x.replace(/<\/w:p>/g, '\n').replace(/<[^>]+>/g, '')
+x = x.replace(/\n{2,}/g, '\n')
+process.stdout.write(x)

scripts/extract-gis-body.mjs

@@ -0,0 +1,42 @@
+import fs from 'fs'
+import path from 'path'
+import os from 'os'
+
+const x = fs.readFileSync(path.join(os.tmpdir(), 'gis-doc-raw.xml'), 'utf8')
+
+function strip(chunk) {
+  return chunk
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&amp;/g, '&')
+    .replace(/<w:tab[^>]*\/>/g, '\t')
+    .replace(/<\/w:p>/g, '\n')
+    .replace(/<[^>]+>/g, '')
+    .replace(/\n{3,}/g, '\n\n')
+}
+
+const anchors = [
+  '部署在GIS服务上',
+  'cmmapgl.accessToken',
+  '地图密钥',
+  '2.3 地图组件',
+  '构造一个地图对象',
+  'new cmmapgl.Map',
+  'cmmapgl.Marker',
+  'addSource',
+  'addLayer',
+  'CMMapDrawControl',
+  'DistrictCluster',
+  '路线规划'
+]
+
+for (const a of anchors) {
+  const i = x.indexOf(a)
+  if (i < 0) {
+    console.log(`\n[MISS] ${a}`)
+    continue
+  }
+  console.log(`\n######## ${a} ########`)
+  console.log(strip(x.slice(i, i + 6000)))
+}

scripts/extract-gis-paragraphs.mjs

@@ -0,0 +1,62 @@
+import fs from 'fs'
+import path from 'path'
+import os from 'os'
+
+const x = fs.readFileSync(path.join(os.tmpdir(), 'gis-doc-raw.xml'), 'utf8')
+
+function decodeEntities(s) {
+  return s
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&amp;/g, '&')
+}
+
+function stripXml(chunk) {
+  return decodeEntities(chunk)
+    .replace(/<w:tab[^>]*\/>/g, '\t')
+    .replace(/<\/w:p>/g, '\n')
+    .replace(/<[^>]+>/g, '')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim()
+}
+
+// Collect paragraphs that look like doc body (skip TOC hyperlinks)
+const paras = []
+for (const m of x.matchAll(/<w:p[\s\S]*?<\/w:p>/g)) {
+  const t = stripXml(m[0])
+  if (!t || t.length < 4) continue
+  if (t.includes('PAGEREF') || t.includes('HYPERLINK \\l')) continue
+  if (t.startsWith('TOC ')) continue
+  paras.push(t)
+}
+
+const out = []
+const keywords = /GIS|cmmap|Map|token|密钥|Marker|GeoJSON|图层|地图|script|container|accessToken|NavigationControl|MouseTool|路线|POI/i
+let inSection = false
+for (let i = 0; i < paras.length; i++) {
+  const p = paras[i]
+  if (/^2[\.\s]/.test(p) || /^[0-9]+\s/.test(p) || keywords.test(p)) {
+    inSection = true
+  }
+  if (inSection && keywords.test(p)) {
+    out.push(p)
+    // include next few lines if code-like
+    for (let j = 1; j <= 3 && i + j < paras.length; j++) {
+      const n = paras[i + j]
+      if (n.includes('{') || n.includes('cmmap') || n.includes('map.') || n.includes('<')) {
+        out.push(n)
+      }
+    }
+  }
+}
+
+const unique = [...new Set(out)]
+const target = path.resolve('doc/大屏/集中化GIS系统JSAPI接口文档-提取.txt')
+fs.writeFileSync(target, unique.join('\n\n'), 'utf8')
+console.log('written', target, 'lines', unique.length)
+
+// Also dump section 2.x headings
+const headings = paras.filter((p) => /^[0-9]+(\.[0-9]+)*\s/.test(p) && p.length < 80)
+fs.writeFileSync(path.resolve('doc/大屏/集中化GIS系统JSAPI-目录.txt'), headings.join('\n'), 'utf8')
+console.log('headings', headings.length)

scripts/extract-gis-sections.mjs

@@ -0,0 +1,45 @@
+import fs from 'fs'
+import path from 'path'
+import os from 'os'
+
+const x = fs.readFileSync(path.join(os.tmpdir(), 'gis-doc-raw.xml'), 'utf8')
+
+function strip(chunk) {
+  return chunk
+    .replace(/<w:tab[^>]*\/>/g, '\t')
+    .replace(/<\/w:p>/g, '\n')
+    .replace(/<[^>]+>/g, '')
+}
+
+const terms = [
+  'cmmapgl.accessToken',
+  'setAccessToken',
+  '地图密钥',
+  '2.3 地图组件',
+  'new cmmapgl.Map',
+  'NavigationControl',
+  'GeoJSON',
+  '准备步骤',
+  '基本准备'
+]
+
+for (const t of terms) {
+  let idx = 0
+  let n = 0
+  while (n < 3) {
+    const found = x.indexOf(t, idx)
+    if (found < 0) break
+    console.log(`\n==== ${t} #${n + 1} ====`)
+    console.log(strip(x.slice(found, found + 2000)))
+    idx = found + t.length
+    n++
+  }
+}
+
+const markers = ['2.2 地图密钥', '2.3 地图组件', '准备步骤', '基本准备', 'cmmapgl.Map']
+for (const m of markers) {
+  const i = x.indexOf(m)
+  if (i < 0) continue
+  console.log(`\n######## SECTION ${m} ########`)
+  console.log(strip(x.slice(i, i + 12000)))
+}

scripts/find-gis-snippets.mjs

@@ -0,0 +1,34 @@
+import fs from 'fs'
+import path from 'path'
+import os from 'os'
+
+const x = fs.readFileSync(path.join(os.tmpdir(), 'gis-doc-raw.xml'), 'utf8')
+
+function snippet(k, len = 1800) {
+  const i = x.indexOf(k)
+  if (i < 0) return `${k}: NOT FOUND`
+  return x
+    .slice(Math.max(0, i - 200), i + len)
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/<w:tab[^>]*\/>/g, ' ')
+    .replace(/<\/w:p>/g, '\n')
+    .replace(/<[^>]+>/g, '')
+}
+
+const keys = [
+  'cmmap-gl.js',
+  'cmmap-gl.css',
+  'cmmapgl.accessToken',
+  '地图密钥',
+  '地图组件',
+  'script src',
+  'style:',
+  'agis/resources'
+]
+
+for (const k of keys) {
+  console.log('\n========', k, '========\n')
+  console.log(snippet(k))
+}