gis/xian_vue_new
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加遮罩效果

Browse Source
This commit is contained in:
wzy-warehouse
2026-04-12 22:07:00 +08:00
parent 5cfda702a1
commit 83f8fec3a4
8 changed files with 234 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+9 -3
View File
@@ -7,14 +7,20 @@ import { RouterView } from 'vue-router'
import { ElLoading } from 'element-plus'
import { watch } from 'vue';
import { useViewerStore } from './stores/useViewerStore';
const loadingInstanve = ElLoading.service({
const loadingOption = {
fullscreen: true,
text: '正在加载配置相关资源中...'
})
}
let loadingInstanve = ElLoading.service(loadingOption)
watch(() => useViewerStore().getViewerLoadingCompleted(), (val) => {
if (val == true) {
if (val) {
loadingInstanve.close()
} else {
loadingInstanve = ElLoading.service(loadingOption)
}
})
</script>
src/component/map/Map.vue
+17 -7
View File
@@ -12,7 +12,9 @@ import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import AdministrativeDivision from './AdministrativeDivision.vue';
import { useViewerStore } from '@/stores/useViewerStore';
import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
import Xian from '@/assets/json/XiAn.json'
import xiAnGeoJSON from '@/assets/json/XiAn.json'
import type { GeoJsonFileType } from '@/types/cesium/GeoJsonFileType';
import { Color } from 'cesium';
onBeforeMount(() => {
// 初始化为false
@@ -22,10 +24,20 @@ onBeforeMount(() => {
useLoadingInformationStore().resetStatue()
})
onMounted(() => {
CesiumUtilsSingleton.initCesiumViewer({
containerId: 'map-container'
})
onMounted(async() => {
await CesiumUtilsSingleton.initCesiumViewer({
containerId: 'map-container',
mark: {
include: true,
geoJson: xiAnGeoJSON as GeoJsonFileType,
color: Color.BLACK.withAlpha(0.8),
border: {
width: 3
}
}
},)
useViewerStore().setViewerLoadingCompleted(true)
// 注册全局点击监听器
CesiumUtilsSingleton.clickLayer((pickedObject: any) => {
@@ -59,8 +71,6 @@ onMounted(() => {
}
})
// 更新完成状态
useViewerStore().setViewerLoadingCompleted(true)
CesiumUtilsSingleton.viewToTarget(config.defaultPosition as [number, number, number]);
})
src/config/config.json
+1 -1
View File
@@ -12,7 +12,7 @@
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ZDBjZjAxOS0wMDhhLTRmZjEtYjNmOC1iNmM2ZmY2ZmQ1N2IiLCJpZCI6MjAxMDI1LCJpYXQiOjE3MTAxNTgxNjJ9.mdbJYEzXQkBnHNqpozz7MvZjJ_X9a3JZRGPA-ytGhLI",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNjczZTVlMy1kNDEwLTRhZWItYWM0NS1mNjYxMzJjODMwYTQiLCJpZCI6MzIxMzI2LCJpYXQiOjE3NzU2NDU1OTd9._MPcZQsxK1dGPl8IMVhKHV3PIPu4-TaOUgzsUUOP6WE"
],
"defaultPosition": [108.948024, 34.263161, 300000],
"defaultPosition": [108.948024, 34.263161, 250000],
"prefix": {
"hiddenDangerPointId": "hidden-danger-point-",
"riskPointId": "risk-point-"
src/types/cesium/CesiumInitOptions.ts
+24
View File
@@ -1,3 +1,6 @@
import type { Color } from "cesium"
import type { GeoJsonFileType } from "./GeoJsonFileType"
/**
* Cesium 公共配置选项
* 用于初始化时统一配置 Viewer 参数
@@ -19,4 +22,25 @@ export interface CesiumInitOptions {
geocoder?: boolean // 搜索（默认：false）
sceneMode?: number // 初始场景模式（默认：3D，可选：2D=1, COLUMBUS_VIEW=2）
// 遮罩配置
mark?: {
// 是否包含遮罩，默认false
include?: boolean
// GeoJSON 数据，如果要突出显示某一区域，就传递改值
geoJson?: GeoJsonFileType
// 孔属于半球，默认东半球
belongingHemisphere?: 'east' | 'west'
// 遮罩颜色，默认黑色
color?: Color
// 边框
border?: {
// 是否显示边框，默认true
show?: boolean
// 边框颜色，默认白色
color?: Color
// 边框宽度，默认1
width?: number
}
}
}
src/types/cesium/GeoJsonFileType.ts
+8
View File
@@ -0,0 +1,8 @@
export interface GeoJsonFileType {
type: "FeatureCollection";
features: {
geometry: {
coordinates: number[][][][];
};
}[];
}
src/utils/cesium/CesiumUtils.ts
+4 -3
View File
@@ -3,13 +3,14 @@ import type { EntityOptions } from '@/types/cesium/EntityOptions'
import type { PrimitiveOptions } from '@/types/cesium/PrimitiveOptions'
import type { LayerConfig } from '@/types/cesium/LayerConfig'
import type { CustomizeGeoJsonDataSource, GeoJsonOptions } from '@/types/cesium/GeoJsonOptions'
import { Viewer, Entity, DataSource, ImageryLayer, Primitive, BillboardCollection, Cartesian3, ScreenSpaceEventHandler, ScreenSpaceEventType, Cartesian2, SceneTransforms } from 'cesium'
import { Viewer, Entity, DataSource, ImageryLayer, Primitive, BillboardCollection, Cartesian3, ScreenSpaceEventHandler, ScreenSpaceEventType, Cartesian2, SceneTransforms, Color } from 'cesium'
import { CesiumViewerManager } from './CesiumViewerManager'
import { EntityManager } from './EntityManager'
import { PrimitiveManager } from './PrimitiveManager'
import { LayerManager } from './LayerManager'
import { GeoJsonManager, type ClearType } from './GeoJsonManager'
import { CameraController } from './CameraController'
import type { GeoJsonFileType } from '@/types/cesium/GeoJsonFileType'
// 导出 ClearType 类型
export type { ClearType }
@@ -36,8 +37,8 @@ export class CesiumUtils {
* @param type - 底图类型：0=影像图，1=矢量图（默认 0）
* @param tdMapToken - 天地图 Token 数组（可选）
*/
initCesiumViewer(options: CesiumInitOptions, type: number = 0, tdMapToken?: string[]): void {
this.#viewerManager.initCesiumViewer(options, type, tdMapToken)
async initCesiumViewer(options: CesiumInitOptions, type: number = 0, tdMapToken?: string[]): Promise<void> {
await this.#viewerManager.initCesiumViewer(options, type, tdMapToken)
const viewer = this.#viewerManager.getViewer()
if (viewer) {
src/utils/cesium/CesiumViewerManager.ts
+166 -3
View File
@@ -4,6 +4,15 @@ import {
Ion,
WebMapTileServiceImageryProvider,
ImageryProvider,
PolygonHierarchy,
Cartesian3,
PolygonGeometry,
ArcType,
GeometryInstance,
Color,
Material,
MaterialAppearance,
GroundPrimitive,
} from 'cesium'
import type { CesiumInitOptions } from '@/types/cesium/CesiumInitOptions'
import config from '@/config/config.json'
@@ -50,7 +59,6 @@ export class CesiumViewerManager {
if (!this.#failedTokens.has(nextIndex)) {
this.#currentTokenIndex = nextIndex
Ion.defaultAccessToken = tokens[nextIndex]
console.log(`已切换到 Cesium Ion Token #${nextIndex + 1}`)
return true
}
}
@@ -65,7 +73,7 @@ export class CesiumViewerManager {
* @param type - 底图类型：0=影像图，1=矢量图（默认 0）
* @param tdMapToken - 天地图 Token 数组（可选）
*/
initCesiumViewer(options: CesiumInitOptions, type: number = 0, tdMapToken?: string[]): void {
async initCesiumViewer(options: CesiumInitOptions, type: number = 0, tdMapToken?: string[]): Promise<void> {
const defaultOptions: CesiumInitOptions = {
containerId: options.containerId,
shouldAnimate: true,
@@ -80,9 +88,32 @@ export class CesiumViewerManager {
sceneModePicker: false,
geocoder: false,
sceneMode: SceneMode.SCENE3D,
mark: {
include: false,
belongingHemisphere: 'east',
color: Color.BLACK,
border: {
show: true,
color: Color.WHITE,
width: 1
}
}
}
// 合并选项
const finalOptions: CesiumInitOptions = {
...defaultOptions,
...options,
mark: options.mark ? {
...defaultOptions.mark,
...options.mark,
border: options.mark.border ? {
...defaultOptions.mark!.border,
...options.mark.border
} : defaultOptions.mark!.border
} : defaultOptions.mark
}
const finalOptions = { ...defaultOptions, ...options }
const container = document.getElementById(finalOptions.containerId)
if (!container) {
@@ -125,6 +156,11 @@ export class CesiumViewerManager {
})
this.#viewer = viewer
// 是否突出显示指定区域
if (options.mark?.include) {
await this.#highlight(finalOptions)
}
}
/**
@@ -184,4 +220,131 @@ export class CesiumViewerManager {
return [vectorProvider]
}
}
/**
* 高亮指定区域
* @param options - 高亮选项
*/
async #highlight(options: CesiumInitOptions): Promise<void> {
if (!this.#viewer) {
throw new Error('请先初始化 Cesium Viewer')
}
if(!options.mark || !options.mark.geoJson) {
throw new Error('请提供 GeoJSON 数据')
}
// 解析边界坐标和孔洞位置
const parseCoordinates = () => {
const holes: PolygonHierarchy[] = [];
const boundaryCoords: number[] = [];
const polygons = options.mark?.geoJson!.features[0].geometry.coordinates;
polygons!.forEach((polygon, index) => {
const flatCoords: number[] = [];
polygon[0].forEach((point) => {
flatCoords.push(point[0], point[1]);
});
// 第一个是多边形外边界
if (index === 0) {
boundaryCoords.push(...flatCoords);
}
// 坐标反转（用于挖孔）
const positions = Cartesian3.fromDegreesArray(flatCoords).reverse();
holes.push(new PolygonHierarchy(positions));
});
return { holes, boundaryCoords };
};
const { holes, boundaryCoords } = parseCoordinates();
// 东西半球标准坐标
const westPositions = Cartesian3.fromDegreesArray([
-0.00001, 85, -0.00001, -85, -180, -85, -180, 85, -0.00001, 85,
]);
const eastPositions = Cartesian3.fromDegreesArray([
0.00001, 85, 0.00001, -85, 180, -85, 180, 85, 0.00001, 85,
]);
// 西半球
const westOption = {
polygonHierarchy: new PolygonHierarchy(westPositions),
arcType: ArcType.GEODESIC,
};
if (options.mark.belongingHemisphere === 'west') {
westOption.polygonHierarchy = new PolygonHierarchy(westPositions, holes);
}
const westGeometry = new PolygonGeometry(westOption);
const westInstance = new GeometryInstance({ geometry: westGeometry });
// 东半球
const eastOption = {
polygonHierarchy: new PolygonHierarchy(eastPositions),
arcType: ArcType.GEODESIC,
}
if (options.mark.belongingHemisphere === 'east') {
eastOption.polygonHierarchy = new PolygonHierarchy(eastPositions, holes);
}
const eastGeometry = new PolygonGeometry(eastOption);
const eastInstance = new GeometryInstance({ geometry: eastGeometry });
// 添加遮罩
const maskMaterial = new Material({
fabric: {
type: "Color",
uniforms: {
color: options.mark.color,
},
},
});
const appearance = new MaterialAppearance({
material: maskMaterial,
closed: true,
});
// 合并渲染
const globalMask = new GroundPrimitive({
geometryInstances: [westInstance, eastInstance],
appearance: appearance,
});
this.#viewer.scene.primitives.add(globalMask);
// 添加边界线
if (options.mark.border?.show) {
const boundaryPositions = Cartesian3.fromDegreesArray(boundaryCoords);
// 闭合边界线
boundaryPositions.push(boundaryPositions[0]);
this.#viewer.entities.add({
id: 'holeLine',
polyline: {
positions: boundaryPositions,
width: options.mark.border.width,
material: options.mark.border.color,
clampToGround: true,
},
});
}
// 等待完成渲染
return new Promise<void>((resolve) => {
const removeListener = this.#viewer!.scene.postRender.addEventListener(() => {
if (globalMask.ready) {
removeListener();
resolve();
}
});
// 设置超时保护，避免无限等待
setTimeout(() => {
removeListener();
resolve();
}, 6000);
});
}
}
src/views/Index.vue
+3 -3
View File
@@ -6,9 +6,9 @@
<img :src="mainLogo" alt="西安应急智慧logo" id="main_logo" />
</div>
<div class="nav-list">
<router-link v-for="(item, index) in topNavMap" :key="index"
:to="{ name: item.name, query: item.query }" class="nav-item"
:class="{ 'active': isActive(item.query.identification) }">
<router-link @click="useViewerStore().setViewerLoadingCompleted(false)"
v-for="(item, index) in topNavMap" :key="index" :to="{ name: item.name, query: item.query }"
class="nav-item" :class="{ 'active': isActive(item.query.identification) }">
{{ item.title }}
</router-link>
</div>