Browse Source

加载离线地图,离线地图线下拿

wxp
ctw 2 months ago
parent
commit
9109be9903
  1. 2
      ruoyi-ui/package.json
  2. 36
      ruoyi-ui/src/views/cesiumMap/index.vue
  3. 13
      ruoyi-ui/vue.config.js

2
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",

36
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)
// 08 08
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)
// 014 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()
}
},

13
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,

Loading…
Cancel
Save