123

ruoyi-screen/.env.development

@@ -19,6 +19,9 @@ VITE_WEATHER_CITY=巴青
 VITE_GIS_BASE_URL=https://bqxm.alafarms.com/agis-api
 VITE_GIS_ACCESS_TOKEN=8XughK9JVapV1pqaE7HnxfHiKGrLy21L9LbsKskL
 VITE_GIS_WMTS_LAYER=baqing_wp
+VITE_GIS_WMTS_LAYER2=baqing_wp2
+# wp 为底层；zoom > 16 时 wp2 叠加在 wp 上方（不替换 wp）
+# VITE_GIS_WMTS_LAYER_SWITCH_ZOOM=16
 # 瓦片边长：256 
 VITE_GIS_TILE_SIZE=256
 VITE_GIS_DEFAULT_CENTER=94.054094,31.920244
@@ -28,3 +31,5 @@ VITE_GIS_MIN_ZOOM=7
 VITE_GIS_MAX_ZOOM=20
 # 瓦片请求最高 TileMatrix；与 MAX_ZOOM 相同则每级都请求新瓦片，低 1 级则顶级用放大显示
 VITE_GIS_TILE_MAX_ZOOM=19
+# POI 查询方式：1=中心点周边，2=多边形区域（默认 2）
+VITE_GIS_POI_SEARCH_MODE=1

ruoyi-screen/.env.production

@@ -19,12 +19,16 @@ VITE_WEATHER_CITY=巴青
 VITE_GIS_BASE_URL=https://bqxm.alafarms.com/agis-api
 VITE_GIS_ACCESS_TOKEN=8XughK9JVapV1pqaE7HnxfHiKGrLy21L9LbsKskL
 VITE_GIS_WMTS_LAYER=baqing_wp
+VITE_GIS_WMTS_LAYER2=baqing_wp2
+# VITE_GIS_WMTS_LAYER_SWITCH_ZOOM=16
 VITE_GIS_TILE_SIZE=256
-VITE_GIS_DEFAULT_CENTER=94.052462,31.921188
+VITE_GIS_DEFAULT_CENTER=94.054094,31.920244
 VITE_GIS_DEFAULT_ZOOM=14
 VITE_GIS_MIN_ZOOM=7
 VITE_GIS_MAX_ZOOM=20
 VITE_GIS_TILE_MAX_ZOOM=19
+# POI 查询方式：1=中心点周边，2=多边形区域（默认 2）
+VITE_GIS_POI_SEARCH_MODE=1
 
 # 大屏免密登录（生产需后端 bigscreen.login.enabled=true 且配置 RSA 密钥）
 VITE_SCREEN_AUTO_LOGIN=true

ruoyi-screen/src/components/GisMap.vue

@@ -9,9 +9,15 @@ import {
   isGisConfigured,
   loadGisSdk,
   resolveGisMapStyle,
-  createGisTransformRequest
+  createGisTransformRequest,
+  syncWmtsLayerVisibility
 } from '@/utils/gisLoader'
-import { parsePoiLngLat, searchNearbyPois } from '@/utils/gisPoiSearch'
+import {
+  GIS_POI_SEARCH_MODE,
+  getGisPoiSearchMode,
+  parsePoiLngLat,
+  searchPois
+} from '@/utils/gisPoiSearch'
 
 const props = defineProps({
   center: {
@@ -79,6 +85,10 @@ function bindMapListeners() {
   }
   map.on('zoomend', () => {
     snapZoomToLimits()
+    syncWmtsLayerVisibility(map)
+  })
+  map.on('zoom', () => {
+    syncWmtsLayerVisibility(map)
   })
   map.on('click', (e) => {
     logClickCoordinate(e.lngLat)
@@ -146,7 +156,7 @@ async function renderPoiMarkers() {
 
   let pois = []
   try {
-    pois = await searchNearbyPois({
+    pois = await searchPois({
       center: resolveCenter()
     })
   } catch {
@@ -426,6 +436,7 @@ async function initMap() {
       applyMapLimits()
       configureScrollZoom()
       snapZoomToLimits()
+      syncWmtsLayerVisibility(map)
       resizeMap()
       renderPoiMarkers()
       emit('ready', map)
@@ -445,7 +456,7 @@ watch(
       center: resolveCenter(),
       zoom: resolveZoom()
     })
-    if (props.showPoiMarkers) {
+    if (props.showPoiMarkers && getGisPoiSearchMode() === GIS_POI_SEARCH_MODE.NEARBY) {
       renderPoiMarkers()
     }
   },

ruoyi-screen/src/utils/gisLoader.js

@@ -34,6 +34,22 @@ export function getGisWmtsLayer() {
   return (import.meta.env.VITE_GIS_WMTS_LAYER || '').trim()
 }
 
+/** 高 zoom 时切换的 WMTS 图层，如 baqing_wp2 */
+export function getGisWmtsLayer2() {
+  return (import.meta.env.VITE_GIS_WMTS_LAYER2 || '').trim()
+}
+
+/** zoom 大于该值时叠加显示 VITE_GIS_WMTS_LAYER2（wp 始终保留在底层） */
+export function getGisWmtsLayerSwitchZoom() {
+  const z = Number(import.meta.env.VITE_GIS_WMTS_LAYER_SWITCH_ZOOM)
+  return Number.isFinite(z) ? z : 16
+}
+
+export const GIS_WMTS_LAYER_IDS = {
+  primary: 'gis-wmts-layer',
+  secondary: 'gis-wmts-layer-2'
+}
+
 /** 瓦片边长（256 或 512）；512 时向 WMTS 追加 WIDTH/HEIGHT 请求高清瓦片 */
 export function getGisTileSize() {
   const n = Number(import.meta.env.VITE_GIS_TILE_SIZE)
@@ -54,16 +70,15 @@ function getGisWmtsZoomOffset() {
   return Number.isFinite(n) ? n : 0
 }
 
-function buildWmtsTileUrl() {
+function buildWmtsTileUrlForLayer(layerName) {
   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)}` +
+    `?LAYER=${encodeURIComponent(layerName)}` +
     '&SERVICE=WMTS&REQUEST=GetTile' +
     `&TileMatrix=${matrix}` +
     '&TileCol={x}&TileRow={y}' +
@@ -76,6 +91,34 @@ function buildWmtsTileUrl() {
   return url
 }
 
+function buildWmtsRasterSource(layerName) {
+  return {
+    type: 'raster',
+    tiles: [buildWmtsTileUrlForLayer(layerName)],
+    tileSize: getGisTileSize(),
+    scheme: 'xyz',
+    minzoom: getGisMinZoom(),
+    maxzoom: getGisTileMaxZoom()
+  }
+}
+
+function buildWmtsRasterLayer(id, sourceId, visible = true) {
+  return {
+    id,
+    type: 'raster',
+    source: sourceId,
+    layout: {
+      visibility: visible ? 'visible' : 'none'
+    },
+    minzoom: getGisMinZoom(),
+    maxzoom: 24,
+    paint: {
+      'raster-fade-duration': 300,
+      'raster-resampling': 'linear'
+    }
+  }
+}
+
 /**
  * 瓦片请求改写：仅处理 zoom 偏移。
  * TileMatrix 上限由 style 里 source.maxzoom 控制，勿在此改写 col/row，否则易与引擎缓存键不一致导致 canceled。
@@ -97,49 +140,64 @@ export function createGisTransformRequest() {
   }
 }
 
-/** 由 WMTS GetTile 模板生成 Mapbox Style（raster 源） */
+/** 由 WMTS GetTile 模板生成 Mapbox Style（raster 源；可选双图层） */
 export function buildWmtsMapStyle() {
   const base = getGisBaseUrl()
   const layer = getGisWmtsLayer()
+  const layer2 = getGisWmtsLayer2()
   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',
-        minzoom: getGisMinZoom(),
-        maxzoom: getGisTileMaxZoom()
+
+  const sources = {
+    'gis-wmts': buildWmtsRasterSource(layer)
+  }
+  const layers = [
+    {
+      id: 'gis-bg',
+      type: 'background',
+      paint: {
+        'background-color': '#1a3a32'
       }
     },
-    layers: [
-      {
-        id: 'gis-bg',
-        type: 'background',
-        paint: {
-          'background-color': '#1a3a32'
-        }
-      },
-      {
-        id: 'gis-wmts-layer',
-        type: 'raster',
-        source: 'gis-wmts',
-        minzoom: getGisMinZoom(),
-        // 勿与 VITE_GIS_MAX_ZOOM 绑死：zoom 略大于 max 时（easeTo 过冲）图层会被引擎整层隐藏
-        maxzoom: 24,
-        paint: {
-          'raster-fade-duration': 300,
-          'raster-resampling': 'linear'
-        }
-      }
-    ]
+    buildWmtsRasterLayer(GIS_WMTS_LAYER_IDS.primary, 'gis-wmts', true)
+  ]
+
+  if (layer2) {
+    sources['gis-wmts-2'] = buildWmtsRasterSource(layer2)
+    layers.push(buildWmtsRasterLayer(GIS_WMTS_LAYER_IDS.secondary, 'gis-wmts-2', false))
+  }
+
+  return {
+    version: 8,
+    sources,
+    layers
+  }
+}
+
+/** 根据 zoom 控制 wp2 叠加层显隐：wp 始终在底层，zoom > 16 时 wp2 叠在上方 */
+export function syncWmtsLayerVisibility(map) {
+  if (!map || typeof map.getZoom !== 'function') {
+    return
+  }
+  const layer2 = getGisWmtsLayer2()
+  if (!layer2 || typeof map.getLayer !== 'function') {
+    return
+  }
+  if (!map.getLayer(GIS_WMTS_LAYER_IDS.secondary)) {
+    return
+  }
+
+  const z = map.getZoom()
+  const showOverlay = Number.isFinite(z) && z > getGisWmtsLayerSwitchZoom()
+
+  if (typeof map.setLayoutProperty === 'function') {
+    map.setLayoutProperty(
+      GIS_WMTS_LAYER_IDS.secondary,
+      'visibility',
+      showOverlay ? 'visible' : 'none'
+    )
   }
 }
 

ruoyi-screen/src/utils/gisPoiSearch.js

@@ -3,6 +3,28 @@ import { getGisAccessToken, getGisBaseUrl, getGisDefaultCenter } from './gisLoad
 /** GIS POI 接口成功状态码 */
 const POI_STATUS_OK = 2000
 
+/** POI 查询方式：1=中心点周边，2=多边形区域（默认） */
+export const GIS_POI_SEARCH_MODE = {
+  NEARBY: 1,
+  POLYGON: 2
+}
+
+/** 巴青大屏 POI 多边形范围（[经度, 纬度]） */
+export const BA_QING_POI_POLYGON = [
+  [94.039551, 31.927503],
+  [94.061348, 31.922841],
+  [94.058913, 31.916612],
+  [94.038479, 31.922559]
+]
+
+/**
+ * 读取 POI 搜索模式（VITE_GIS_POI_SEARCH_MODE：1 中心点，2 多边形，默认 2）
+ */
+export function getGisPoiSearchMode() {
+  const n = Number(import.meta.env.VITE_GIS_POI_SEARCH_MODE)
+  return n === GIS_POI_SEARCH_MODE.NEARBY ? GIS_POI_SEARCH_MODE.NEARBY : GIS_POI_SEARCH_MODE.POLYGON
+}
+
 /**
  * 解析 POI location 字段（文档格式：纬度,经度）为地图坐标 [经度, 纬度]
  */
@@ -18,6 +40,22 @@ export function parsePoiLngLat(location) {
   return [lng, lat]
 }
 
+/**
+ * 将 [lng, lat] 顶点列表转为接口 polygon 参数（纬度,经度；首尾闭合）
+ */
+export function formatPolygonParam(points) {
+  if (!Array.isArray(points) || points.length < 3) {
+    return ''
+  }
+  const ring = points.map(([lng, lat]) => [Number(lng), Number(lat)])
+  const [firstLng, firstLat] = ring[0]
+  const [lastLng, lastLat] = ring[ring.length - 1]
+  if (firstLng !== lastLng || firstLat !== lastLat) {
+    ring.push([firstLng, firstLat])
+  }
+  return ring.map(([lng, lat]) => `${lat},${lng}`).join(';')
+}
+
 function normalizePoiList(data) {
   if (data?.status !== POI_STATUS_OK || !Array.isArray(data?.body?.pois)) {
     return []
@@ -62,10 +100,46 @@ export async function searchNearbyPois(options = {}) {
   return normalizePoiList(await res.json())
 }
 
-/*
- * 多边形区域搜索（GIS 接口文档 §2.3）— 暂不使用
- *
- * export const BA_QING_POI_POLYGON = [...]
- * export function formatPolygonParam(points) { ... }
- * export async function searchPolygonPois(options = {}) { ... }
+/**
+ * 多边形区域搜索（GIS 接口文档 §2.3 /agis/search/v1/pois/polygon）
+ * @param {{ polygon?: [number, number][], pageNum?: number, pageSize?: number }} [options]
  */
+export async function searchPolygonPois(options = {}) {
+  const base = getGisBaseUrl()
+  const key = getGisAccessToken()
+  if (!base || !key) {
+    return []
+  }
+
+  const points = options.polygon || BA_QING_POI_POLYGON
+  const polygon = formatPolygonParam(points)
+  if (!polygon) {
+    return []
+  }
+
+  const params = new URLSearchParams({
+    polygon,
+    page_num: String(options.pageNum ?? 1),
+    page_size: String(options.pageSize ?? 1000),
+    key
+  })
+
+  const url = `${base}/agis/search/v1/pois/polygon?${params.toString()}`
+  const res = await fetch(url)
+  if (!res.ok) {
+    return []
+  }
+
+  return normalizePoiList(await res.json())
+}
+
+/**
+ * 按 VITE_GIS_POI_SEARCH_MODE 自动选择 POI 搜索方式
+ * @param {{ center?: [number, number], polygon?: [number, number][], radius?: number, pageNum?: number, pageSize?: number }} [options]
+ */
+export async function searchPois(options = {}) {
+  if (getGisPoiSearchMode() === GIS_POI_SEARCH_MODE.NEARBY) {
+    return searchNearbyPois(options)
+  }
+  return searchPolygonPois(options)
+}