gis

ruoyi-screen/.env.development

@@ -1,5 +1,5 @@
 # 页面标题（对应 ruoyi-ui 的 VUE_APP_TITLE）
-VITE_APP_TITLE=数字畜牧一张图
+VITE_APP_TITLE=牧业大脑-数字畜牧一张图
 
 # 开发环境
 ENV=development
@@ -25,6 +25,6 @@ VITE_GIS_DEFAULT_CENTER=94.046223,31.920382
 VITE_GIS_DEFAULT_ZOOM=14
 VITE_GIS_MIN_ZOOM=7
 # 地图最大缩放；建议与瓦片最高级别一致，避免放到顶过采样缺图
-VITE_GIS_MAX_ZOOM=17
+VITE_GIS_MAX_ZOOM=20
 # 瓦片请求最高 TileMatrix；与 MAX_ZOOM 相同则每级都请求新瓦片，低 1 级则顶级用放大显示
-VITE_GIS_TILE_MAX_ZOOM=16
+VITE_GIS_TILE_MAX_ZOOM=19

ruoyi-screen/.env.production

@@ -1,5 +1,5 @@
 # 页面标题（对应 ruoyi-ui 的 VUE_APP_TITLE）
-VITE_APP_TITLE=数字畜牧一张图
+VITE_APP_TITLE=牧业大脑-数字畜牧一张图
 
 # 生产环境
 ENV=production
@@ -23,8 +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=17
-VITE_GIS_TILE_MAX_ZOOM=16
+VITE_GIS_MAX_ZOOM=20
+VITE_GIS_TILE_MAX_ZOOM=19
 
 # 大屏免密登录（生产需后端 bigscreen.login.enabled=true 且配置 RSA 密钥）
 VITE_SCREEN_AUTO_LOGIN=true

ruoyi-screen/src/components/GisMap.vue

@@ -11,6 +11,7 @@ import {
   resolveGisMapStyle,
   createGisTransformRequest
 } from '@/utils/gisLoader'
+import { parsePoiLngLat, searchNearbyPois } from '@/utils/gisPoiSearch'
 
 const props = defineProps({
   center: {
@@ -32,6 +33,11 @@ const props = defineProps({
   showScale: {
     type: Boolean,
     default: false
+  },
+  /** 是否在地图加载后展示周边 POI Marker */
+  showPoiMarkers: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -53,6 +59,7 @@ const WHEEL_ZOOM_RATE = 0.0022
 let wheelDeltaAccum = 0
 let wheelDebounceTimer = null
 let lastWheelAround = null
+let poiMarkers = []
 
 function formatLngLat(lngLat) {
   if (!lngLat) {
@@ -113,6 +120,105 @@ function bindZoomDebugListeners() {
   })
 }
 
+function clearPoiMarkers() {
+  poiMarkers.forEach((marker) => {
+    try {
+      marker.remove()
+    } catch {
+      /* ignore */
+    }
+  })
+  poiMarkers = []
+}
+
+function escapeHtml(text) {
+  return String(text || '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function buildPoiPopupHtml(poi) {
+  const name = escapeHtml(poi.name || '未知地点')
+  const address = poi.address ? escapeHtml(poi.address) : ''
+  const distance = poi.distance ? `${escapeHtml(poi.distance)}m` : ''
+  const parts = [`<div style="font-weight:600;margin-bottom:4px">${name}</div>`]
+  if (address) {
+    parts.push(`<div style="font-size:12px;opacity:0.85">${address}</div>`)
+  }
+  if (distance) {
+    parts.push(`<div style="font-size:12px;opacity:0.7;margin-top:4px">距中心 ${distance}</div>`)
+  }
+  return parts.join('')
+}
+
+/** 自定义 Marker：图标下方常驻显示 POI 名称 */
+function createPoiMarkerElement(name) {
+  const wrap = document.createElement('div')
+  wrap.className = 'gis-poi-marker'
+  wrap.style.pointerEvents = 'auto'
+
+  const label = document.createElement('div')
+  label.className = 'gis-poi-marker__label'
+  label.textContent = String(name || '未知地点')
+  label.title = label.textContent
+
+  const dot = document.createElement('div')
+  dot.className = 'gis-poi-marker__dot'
+
+  wrap.appendChild(label)
+  wrap.appendChild(dot)
+  return wrap
+}
+
+async function renderNearbyPoiMarkers() {
+  if (!props.showPoiMarkers || !map || !cmmapglRef) {
+    return
+  }
+  clearPoiMarkers()
+
+  const center = resolveCenter()
+  let pois = []
+  try {
+    pois = await searchNearbyPois({
+      center,
+      radius: 5000,
+      pageSize: 50,
+      pageNum: 1
+    })
+  } catch {
+    return
+  }
+
+  const Marker = cmmapglRef.Marker
+  const Popup = cmmapglRef.Popup
+  if (typeof Marker !== 'function') {
+    return
+  }
+
+  pois.forEach((poi) => {
+    const lngLat = parsePoiLngLat(poi.location)
+    if (!lngLat) {
+      return
+    }
+    const markerOpts = {
+      element: createPoiMarkerElement(poi.name),
+      anchor: 'bottom'
+    }
+    const marker = new Marker(markerOpts).setLngLat(lngLat)
+    if (typeof Popup === 'function') {
+      marker.setPopup(
+        new Popup({ offset: 20, closeOnClick: true, maxWidth: '260px' }).setHTML(
+          buildPoiPopupHtml(poi)
+        )
+      )
+    }
+    marker.addTo(map)
+    poiMarkers.push(marker)
+  })
+}
+
 function destroyMap() {
   if (zoomLogTimer) {
     clearTimeout(zoomLogTimer)
@@ -126,6 +232,7 @@ function destroyMap() {
   lastWheelAround = null
   lastMouseZoomLogAt = 0
   clampingZoom = false
+  clearPoiMarkers()
   if (map) {
     map.remove()
     map = null
@@ -363,6 +470,7 @@ async function initMap() {
       configureScrollZoom()
       snapZoomToLimits()
       resizeMap()
+      renderNearbyPoiMarkers()
       emit('ready', map)
     })
     map.on('click', (e) => emit('click', e))
@@ -381,10 +489,25 @@ watch(
       center: resolveCenter(),
       zoom: resolveZoom()
     })
+    if (props.showPoiMarkers) {
+      renderNearbyPoiMarkers()
+    }
   },
   { deep: true }
 )
 
+watch(
+  () => props.showPoiMarkers,
+  (show) => {
+    if (!map || !cmmapglRef) return
+    if (show) {
+      renderNearbyPoiMarkers()
+    } else {
+      clearPoiMarkers()
+    }
+  }
+)
+
 onMounted(() => {
   initMap()
 })
@@ -416,3 +539,42 @@ defineExpose({ resizeMap, getMap: () => map })
   height: 100%;
 }
 </style>
+
+<!-- Marker DOM 由地图 SDK 挂载，需非 scoped 样式 -->
+<style>
+.gis-poi-marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  transform: translateY(-2px);
+}
+
+.gis-poi-marker__label {
+  max-width: 108px;
+  margin-bottom: 3px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(8, 28, 24, 0.82);
+  border: 1px solid rgba(240, 180, 41, 0.45);
+  color: #eef8f4;
+  font-size: 11px;
+  line-height: 1.35;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+  pointer-events: none;
+}
+
+.gis-poi-marker__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #f0b429;
+  border: 2px solid #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+  flex-shrink: 0;
+}
+</style>

ruoyi-screen/src/utils/gisPoiSearch.js

@@ -0,0 +1,61 @@
+import { getGisAccessToken, getGisBaseUrl, getGisDefaultCenter } from './gisLoader'
+
+/** GIS POI 接口成功状态码 */
+const POI_STATUS_OK = 2000
+
+/**
+ * 解析 POI location 字段（文档格式：纬度,经度）为地图坐标 [经度, 纬度]
+ */
+export function parsePoiLngLat(location) {
+  if (!location || typeof location !== 'string') {
+    return null
+  }
+  const parts = location.split(',').map((n) => Number(String(n).trim()))
+  if (parts.length < 2 || !parts.every((n) => Number.isFinite(n))) {
+    return null
+  }
+  const [lat, lng] = parts
+  return [lng, lat]
+}
+
+/**
+ * 周边搜索（GIS 接口文档 §2.2 /agis/search/v1/pois/region）
+ * @param {{ center?: [number, number], radius?: number, pageNum?: number, pageSize?: number }} [options]
+ */
+export async function searchNearbyPois(options = {}) {
+  const base = getGisBaseUrl()
+  const key = getGisAccessToken()
+  if (!base || !key) {
+    return []
+  }
+
+  const center = options.center || getGisDefaultCenter()
+  const [longitude, latitude] = center
+  const radius = options.radius ?? 3000
+  const pageNum = options.pageNum ?? 1
+  const pageSize = options.pageSize ?? 20
+
+  const params = new URLSearchParams({
+    longitude: String(longitude),
+    latitude: String(latitude),
+    radius: String(radius),
+    page_num: String(pageNum),
+    page_size: String(pageSize),
+    key
+  })
+
+  const url = `${base}/agis/search/v1/pois/region?${params.toString()}`
+  const res = await fetch(url)
+  if (!res.ok) {
+    return []
+  }
+
+  const data = await res.json()
+  if (data?.status !== POI_STATUS_OK || !Array.isArray(data?.body?.pois)) {
+    return []
+  }
+
+  return data.body.pois
+    .map((row) => row?.poi || row)
+    .filter((poi) => poi && typeof poi === 'object')
+}

ruoyi-ui/.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 巴青牧业大脑
+VUE_APP_TITLE = 行业数字服务链
 
 # 开发环境配置
 ENV = 'development'

ruoyi-ui/.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 巴青牧业大脑
+VUE_APP_TITLE = 行业数字服务链
 
 # 生产环境配置
 ENV = 'production'

ruoyi-ui/vue.config.js

@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || '巴青牧业大脑' // 网页标题
+const name = process.env.VUE_APP_TITLE || '行业数字服务链' // 网页标题
 
 const baseUrl = 'http://192.168.1.6:8010' // 后端接口
 

scripts/parse-gis-api-doc.mjs

@@ -0,0 +1,36 @@
+import fs from 'fs'
+import os from 'os'
+import path from 'path'
+
+const xmlPath = path.join(os.tmpdir(), 'gis-doc-raw.xml')
+const x = fs.readFileSync(xmlPath, '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 text = strip(x)
+const keys = ['周边', '2.2', 'longitude', 'latitude', 'radius', 'page_size', 'pageSize', 'POI', '搜索', 'nearby', 'agis']
+
+for (const k of keys) {
+  const i = text.indexOf(k)
+  if (i >= 0) {
+    console.log(`\n######## ${k} @ ${i} ########`)
+    console.log(text.slice(Math.max(0, i - 150), i + 1200))
+  }
+}
+
+// dump section around "2.2"
+const i22 = text.indexOf('2.2')
+if (i22 >= 0) {
+  console.log('\n######## FULL 2.2 SECTION ########')
+  console.log(text.slice(i22, i22 + 4000))
+}