Cesium实现规划地图区域（五）

Cesium 作为开源的三维地球可视化引擎，能够高效实现地理空间数据的可视化展示。本文基于 Vue3 + Cesium 技术栈，以江苏省地理区域可视化为例，详细讲解地图区域功能的实现流程、核心参数及完整代码案例，能快速掌握三维地图区域渲染的关键技术。

目录

一、功能实现核心思路

二、核心参数说明

1. Cesium.Viewer 初始化参数

2. 相机视角配置参数

3. GeoJSON 加载样式参数

三、完整实现案例

一、功能实现核心思路

地图区域可视化的核心是将 GeoJSON 格式的地理边界数据加载到 Cesium 三维场景中，并根据业务需求定制区域样式，同时支持动态切换样式。整体实现流程可概括为：

1. 初始化 Cesium 地图实例，配置基础视图参数；

2. 加载 GeoJSON 格式的区域边界数据，定制不同业务场景下的渲染样式；

3. 监听业务参数变化，实现区域样式的动态切换；

4. 做好基础的资源管理，保证地图渲染的稳定性。

二、核心参数说明

在 Cesium 地图区域功能实现中，以下核心参数直接决定了地图的展示效果和交互体验，是开发过程中必须掌握的关键配置：

1. Cesium.Viewer 初始化参数

Viewer 是 Cesium 的核心容器，通过配置其初始化参数可定制地图基础交互能力：

2. 相机视角配置参数

通过Cesium.GeoJsonDataSource.load()加载地理数据时，样式参数决定区域的视觉呈现，这个在这里就不再阐述，详情请见该篇文章：https://blog.csdn.net/qq_53541336/article/details/157100351?spm=1001.2014.3001.5502

3. GeoJSON 加载样式参数

通过Cesium.GeoJsonDataSource.load()加载地理数据时，样式参数决定区域的视觉呈现：

三、完整实现案例

以下是基于 Vue3 + Cesium 实现江苏省地图区域可视化的完整代码，包含地图初始化、GeoJSON 加载、样式动态切换等核心功能：

<template> <div class="map-wrapper"> <div id="cesiumContainer"></div> </div> </template> <script setup> import { ref, onMounted, watch } from 'vue' import * as Cesium from 'cesium' import jsuGeojson from '@/utils/jsu-geo.json'//这个JSON数据可以在网上找到 const props = defineProps({ mapType: { type: String, default: 'perception', // perception（感知） 或 forecast（预报） validator: val => ['perception', 'forecast'].includes(val) } }) let viewer = null let currentDataSource = null // 设置Cesium Ion Token（必填，用于加载Cesium资源） Cesium.Ion.defaultAccessToken = '你的token' /** * 初始化Cesium地图实例 */ const initMapCesium = () => { // 创建Cesium Viewer实例 viewer = new Cesium.Viewer('cesiumContainer', { infoBox: false, // 关闭默认信息弹窗 geocoder: false, // 关闭位置查找工具 homeButton: false, // 关闭首页按钮 sceneModePicker: false, // 关闭视角模式切换工具 baseLayerPicker: false, // 关闭底图切换工具 navigationHelpButton: false, // 关闭导航帮助工具 animation: false, // 关闭动画控制条 timeline: false, // 关闭时间轴 fullscreenButton: false // 关闭全屏按钮 }) // 隐藏Cesium默认版权信息，优化视觉效果 viewer.cesiumWidget.creditContainer.style.display = 'none' // 设置初始视角为江苏省区域 viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(119.8, 32.9, 1000000), // 江苏省中心经纬度，高度1000公里 orientation: { heading: 0, // 航向：正北 pitch: -1.57, // 俯仰角：垂直俯视（-π/2） roll: 0 // 翻滚角：水平 } }) // 加载初始地图内容 loadMapContent(props.mapType) } /** * 根据地图类型加载对应的区域样式 * @param {String} type - 地图类型：perception/forecast */ const loadMapContent = (type) => { // 清除已加载的数据源，避免重复渲染 if (currentDataSource && viewer) { viewer.dataSources.remove(currentDataSource) currentDataSource = null } let styleConfig = {} // 根据业务类型配置不同的样式 if (type === 'perception') { // 感知页面样式：蓝色系 styleConfig = { stroke: Cesium.Color.fromCssColorString('#28569F'), // 深蓝色轮廓 strokeWidth: 3, // 轮廓宽度3px fill: Cesium.Color.fromCssColorString('#409EFF').withAlpha(0.3), // 浅蓝色填充，透明度30% clampToGround: false // 不贴地显示 } } else if (type === 'forecast') { // 预报页面样式：橙色系 styleConfig = { stroke: Cesium.Color.fromCssColorString('#FF6B35'), // 橙色轮廓 strokeWidth: 3, // 轮廓宽度3px fill: Cesium.Color.fromCssColorString('#FFA500').withAlpha(0.3), // 浅橙色填充，透明度30% clampToGround: false // 不贴地显示 } } // 加载江苏省GeoJSON数据并应用样式 Cesium.GeoJsonDataSource.load(jsuGeojson, styleConfig) .then((ds) => { // 将数据源添加到地图容器 viewer.dataSources.add(ds) // 保存当前数据源引用，便于后续清理 currentDataSource = ds }) .catch(error => { // 捕获加载异常，便于调试 console.error('加载GeoJSON数据失败:', error) }) } // 监听mapType属性变化，动态切换地图样式 watch(() => props.mapType, (newType) => { if (viewer) { loadMapContent(newType) } }, { immediate: false }) // 组件挂载后初始化地图 onMounted(() => { initMapCesium() }) </script> <style lang="less" scoped> .map-wrapper { position: relative; width: 100%; height: 100%; } #cesiumContainer { overflow: hidden; width: 100%; height: 100%; } </style>