From 9109be99034e8b2fe719dede76853b268ea6581b Mon Sep 17 00:00:00 2001 From: ctw <1051735452@qq.com> Date: Fri, 30 Jan 2026 13:57:42 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=A6=BB=E7=BA=BF=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=EF=BC=8C=E7=A6=BB=E7=BA=BF=E5=9C=B0=E5=9B=BE=E7=BA=BF?= =?UTF-8?q?=E4=B8=8B=E6=8B=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/package.json | 2 ++ ruoyi-ui/src/views/cesiumMap/index.vue | 36 +++++++++++++++++++++++----------- ruoyi-ui/vue.config.js | 13 +++++++++++- 3 files changed, 39 insertions(+), 12 deletions(-) diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json index 915ace5..69c61bb 100644 --- a/ruoyi-ui/package.json +++ b/ruoyi-ui/package.json @@ -6,6 +6,7 @@ "license": "MIT", "scripts": { "dev": "vue-cli-service serve", + "move-tiles": "node scripts/move-tiles-out-of-public.js", "build:prod": "vue-cli-service build", "build:stage": "vue-cli-service build --mode staging", "preview": "node build/index.js --preview" @@ -50,6 +51,7 @@ "vuex": "3.6.0" }, "devDependencies": { + "express": "^4.18.2", "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6", "@babel/plugin-transform-optional-chaining": "^7.28.6", "@open-wc/webpack-import-meta-loader": "^0.4.7", diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index 0e746b8..c7dede2 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -384,8 +384,9 @@ export default { this.viewer.cesiumWidget.creditContainer.style.display = "none" this.loadOfflineMap() this.setup2DConstraints() + // 初始视野：中国中心（仅中国瓦片时无需世界瓦片，国外区域会无瓦片显示为空白） this.viewer.camera.setView({ - destination: Cesium.Cartesian3.fromDegrees(116.3974, 39.9093, 5000000), + destination: Cesium.Cartesian3.fromDegrees(116.3974, 39.9093, 12000000), orientation: { heading: 0, pitch: -Cesium.Math.PI_OVER_TWO, @@ -563,19 +564,32 @@ export default { loadOfflineMap() { this.viewer.imageryLayers.removeAll() try { - // 修改部分：将原来的 ArcGIS 卫星图替换为高德矢量行政图 - const administrativeMap = new Cesium.UrlTemplateImageryProvider({ - // 高德地图矢量瓦片服务（纯 2D 行政图风格） - url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', + // 使用本地瓦片（tiles 目录，结构：z/x/y.png）替代高德在线地图 + const origin = typeof window !== 'undefined' ? window.location.origin : '' + const tilesUrl = origin + '/tiles/{z}/{x}/{reverseY}.png' + const tilingScheme = new Cesium.WebMercatorTilingScheme() + const chinaRect = Cesium.Rectangle.fromDegrees(73.5, 18.0, 135.0, 53.5) + // 底层：全球 0–8 级（境外和中国在 0–8 级都显示） + const worldTiles = new Cesium.UrlTemplateImageryProvider({ + url: tilesUrl, minimumLevel: 0, - maximumLevel: 18, - // 高德不需要专门的 TilingScheme，默认即可，或者使用 WebMercator - tilingScheme: new Cesium.WebMercatorTilingScheme() + maximumLevel: 8, + tilingScheme, + credit: '' }) - this.viewer.imageryLayers.addImageryProvider(administrativeMap) - // 如果需要叠加路网或注记，可以在这里再 add 一个图层 + this.viewer.imageryLayers.addImageryProvider(worldTiles) + // 顶层：仅中国范围 0–14 级（中国内可缩放到 14 级，境外不请求） + const chinaTiles = new Cesium.UrlTemplateImageryProvider({ + url: tilesUrl, + minimumLevel: 0, + maximumLevel: 14, + rectangle: chinaRect, + tilingScheme, + credit: '' + }) + this.viewer.imageryLayers.addImageryProvider(chinaTiles) } catch (error) { - console.error('加载地图失败:', error) + console.error('加载本地瓦片失败:', error) this.showGridLayer() } }, diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js index 25854e2..fa4cddd 100644 --- a/ruoyi-ui/vue.config.js +++ b/ruoyi-ui/vue.config.js @@ -1,16 +1,21 @@ 'use strict' const path = require('path') +const fs = require('fs') function resolve(dir) { return path.join(__dirname, dir) } +// 离线瓦片目录：放在 public 外避免构建时复制导致 EMFILE（too many open files） +const tilesDir = path.join(__dirname, 'tiles') +const tilesInPublic = path.join(__dirname, 'public', 'tiles') + const CompressionPlugin = require('compression-webpack-plugin') // 引入 CopyWebpackPlugin 用于复制 Cesium 静态资源 const CopyWebpackPlugin = require('copy-webpack-plugin') const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题 -const baseUrl = 'http://127.0.0.1:8080' // 后端接口 +const baseUrl = 'http://192.168.50.145:8080' // 后端接口 const port = process.env.port || process.env.npm_config_port || 80 // 端口 // 定义 Cesium 源码路径 @@ -37,6 +42,12 @@ module.exports = { host: '0.0.0.0', port: port, open: true, + // 从 public 外提供 /tiles，避免 2 万+ 瓦片参与 public 复制触发 EMFILE + before(app) { + const express = require('express') + const serveAt = fs.existsSync(tilesDir) ? tilesDir : tilesInPublic + app.use('/tiles', express.static(serveAt)) + }, proxy: { [process.env.VUE_APP_BASE_API]: { target: baseUrl,