-
Cesium技术栈剖析
(1)初始化理解
(2)数据文件理解
(3)Map影像瓦片文件夹的理解
（将影响瓦片类比拼图，首先是有很多层的拼图，然后根据x、y去定位拼图所在位置）：
里面含有0，1，2（分别代表每一层z）
0，1，2文件夹底下再分为0，1，2（代表这层的x）
再下一层为对应的0.png（代表这层的y）
通过z、x、y去读取每一块图片
读取方式如下：
2.离线部署解决报错问题
(1)开发环境如下
(2)环境初始化报错解决：
(3)网页资源报错解决（离线部署所需）：
成功图如下：
3.离线数据来源
(1)下载软件：
全能电子地图下载器MapTileDownloader（该软件可提供地图瓦片图）的安装和使用-CSDN博客
(2)下载说明：
1.选择对应的层级
2.选择对应的区域（目前理解是全球的地图在Z为0的文件夹，剩下的为框选内容，我们只需要中国，故框选中国地图即可）
3.资源引用与代码使用如下
完整代码如下，包含特效，连线效果：
<template><div><div id="cesiumContainer" class="fullSize"></div><div id="loadingOverlay"><h1>加载中...</h1></div><div id="toolbar"></div></div>
</template><script setup lang="js">
import "cesium/Build/Cesium/Widgets/widgets.css";
import {onMounted, ref} from "vue";
import * as Cesium from "cesium";onMounted(() => {//初始化地球initCesium()// 添加标识addChinaMarker();addDynamicSignalEffect(tianxianFirst, carFirst);addDynamicSignalEffect(tianxianFirst, carSecond);addDynamicSignalEffect(tianxianFirst, carThird);addDynamicSignalEffect(phoneFirst, airplaneThird);addDynamicSignalEffect(phoneFirst, boatFirst);addDynamicSignalEffect(phoneSecond, airplaneFirst);addDynamicSignalEffect(phoneSecond, boatFourth);addDynamicSignalEffect(boatFirst, boatSecond);addDynamicSignalEffect(boatThird, boatFourth);
})
//初始化地球
const viewer = ref();
const initCesium = () => {//Viewer默认为自带一个球体viewer.value = new Cesium.Viewer('cesiumContainer', {infoBox: false, // 禁用沙箱，解决控制台报错// 是否显示图层选择器baseLayerPicker: false,// 是否显示全屏按钮fullscreenButton: true,// 是否显示右上角的查询按钮geocoder: false,// 是否显示HOME按钮homeButton: false,// 是否显示场景控制按钮sceneModePicker: false,// 是否显示帮助按钮navigationHelpButton: false,// 是否显示选择框selectionIndicator: false,//粒子效果shouldAnimate: true,//禁用图像提供模式 解决报错imageryProvider: false,timeline: false, // 禁用时间轴animation: false});// 使用自定义的瓦片服务viewer.value.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url : "/testMap/{z}/{x}/{y}.jpg", // 这里的 URL 相对路径指向 public 目录}));// 添加自定义 overlay 图层（标注）viewer.value.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url: "/testOverlay/{z}/{x}/{y}.png", // 替换为您的 overlay 路径alpha: 0.5, // 设置 overlay 图层的透明度}));// 隐藏cesiumLogoviewer.value.cesiumWidget.creditContainer.style.display = "none";// 监听瓦片加载进度const loadingOverlay = document.getElementById("loadingOverlay");loadingOverlay.style.display = "block"; // 显示加载提示viewer.value.scene.globe.tileLoadProgressEvent.addEventListener((event) => {if (event === 0) {loadingOverlay.style.display = "none"; // 加载完成后隐藏}});
}//经 纬（水平 垂直）
const boatThird = Cesium.Cartesian3.fromDegrees(140, 20);
const boatFourth = Cesium.Cartesian3.fromDegrees(143, 15);
const boatFirst = Cesium.Cartesian3.fromDegrees(160, 30);
const boatSecond = Cesium.Cartesian3.fromDegrees(163, 24);const carFirst = Cesium.Cartesian3.fromDegrees(73, 40);
const carSecond = Cesium.Cartesian3.fromDegrees(77, 47);
const carThird = Cesium.Cartesian3.fromDegrees(75, 30);const airplaneFirst = Cesium.Cartesian3.fromDegrees(130, 25);
const airplaneThird = Cesium.Cartesian3.fromDegrees(135, 30);//乌鲁木齐
const tianxianFirst = Cesium.Cartesian3.fromDegrees(100, 49.7928);
//韩国
const phoneFirst = Cesium.Cartesian3.fromDegrees(138, 35.9078);
//菲律宾
const phoneSecond = Cesium.Cartesian3.fromDegrees(120.9842, 14.5995);
const addChinaMarker = () => {// 添加船标记viewer.value.entities.add({position: boatFirst,billboard: {image: 'images/5.png',width: 110,height: 110}});// 添加船标记viewer.value.entities.add({position: boatSecond,billboard: {image: 'images/7.png',width: 150,height: 150}});// 添加船标记viewer.value.entities.add({position: boatThird,billboard: {image: 'images/5.png',width: 110,height: 110}});viewer.value.entities.add({position: boatFourth,billboard: {image: 'images/7.png',width: 150,height: 150}});//飞机标识viewer.value.entities.add({position: airplaneFirst,billboard: {image: 'images/4.png',width: 100,height: 100}});viewer.value.entities.add({position: airplaneThird,billboard: {image: 'images/4.png',width: 100,height: 100}});//车标识viewer.value.entities.add({position: carFirst,billboard: {image: 'images/3.png',width: 110,height: 110}});viewer.value.entities.add({position: carSecond,billboard: {image: 'images/3.png',width: 110,height: 110}});viewer.value.entities.add({position: carThird,billboard: {image: 'images/3.png',width: 110,height: 110}});//天线viewer.value.entities.add({position: tianxianFirst,billboard: {image: 'images/1.png',width: 110,height: 110}});viewer.value.entities.add({position: phoneFirst,billboard: {image: 'images/6.png',width: 80,height: 80}});viewer.value.entities.add({position: phoneSecond,billboard: {image: 'images/6.png',width: 80,height: 80}});
};//添加特效
const addDynamicSignalEffect = (startCoords, endCoords) => {// 生成弧线const getArcPositions = (start, end, heightFactor = 0.2, granularity = 50) => {const startCartographic = Cesium.Cartographic.fromCartesian(start);const endCartographic = Cesium.Cartographic.fromCartesian(end);const positions = [];for (let i = 0; i <= granularity; i++) {const t = i / granularity;const longitude = Cesium.Math.lerp(startCartographic.longitude, endCartographic.longitude, t);const latitude = Cesium.Math.lerp(startCartographic.latitude, endCartographic.latitude, t);const height =Cesium.Math.lerp(startCartographic.height, endCartographic.height, t) +Cesium.Cartesian3.distance(start, end) * heightFactor * Math.sin(Math.PI * t);positions.push(Cesium.Cartesian3.fromRadians(longitude, latitude, height));}return positions;};// 弧线的动态位置const positions = getArcPositions(startCoords, endCoords);// 动态效果的点const addWaveEffect = () => {const wavePointCount = 15; // 控制波浪点的数量const pointSpacing = positions.length / wavePointCount;for (let i = 0; i < wavePointCount; i++) {const dynamicPosition = new Cesium.CallbackProperty(() => {const time = Cesium.JulianDate.now().secondsOfDay * 7 ; // 控制波浪运动速度，这里增加了速度const index = (Math.floor(time + i * pointSpacing) % positions.length);const heightOffset = Math.sin((time + i * pointSpacing) * 0.5) * 10; // 波浪高度偏移const position = positions[index];return new Cesium.Cartesian3(position.x, position.y, position.z + heightOffset);}, false);viewer.value.entities.add({position: dynamicPosition,point: {pixelSize: 2,color: Cesium.Color.YELLOW,outlineWidth: 2,outlineColor: Cesium.Color.WHITE,},});}};// 添加波浪效果的点addWaveEffect();
};</script><style>
body {margin: 0;
}#cesiumContainer {height: 100vh;width: 100%;
}/* Loading overlay 样式 */
#loadingOverlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);color: white;display: flex;justify-content: center;align-items: center;font-size: 24px;z-index: 9999;
}#toolbar {position: absolute;top: 10px;right: 10px;background-color: rgba(0, 0, 0, 0.6);color: white;padding: 10px;border-radius: 5px;
}
</style>
)
