cesium+vue3自定义HTML实体弹窗、加高德路网、防实体漂浮、让用户画圆、鹰眼

一、基础使用：Cesium.js基础使用（vue）-CSDN博客

 1、基础路径

为 Cesium 库设置一个全局变量 CESIUM_BASE_URL，用于指定 Cesium 的资源文件（如 WebGL shaders、纹理、字体等）的

示例场景：假设你在开发一个基于 Cesium 的 3D 地球应用，但不想将 Cesium 的资源文件打包到项目中，而是希望通过 CDN 加载资源。

  window.CESIUM_BASE_URL = 'https://cesium.com/downloads/cesiumjs/releases/1.97/Build/Cesium/';

2、Cesium Ion的默认访问令牌

Cesium.Ion.defaultAccessToken = '';  // 赋值你的访问令牌

二、其他配置

 1、HTML自定义实体弹窗

    // 以下代码都在onMounted钩子函数里// 函数用于创建一个新的小点实体和对应的HTML弹窗const createPoint = (id, position, info) => {// 创建小点实体var point = viewer.entities.add({position: position, // 位置point: {// 点的样式pixelSize: 10, // 像素大小},show: false, // 默认隐藏实体});// 创建HTML弹窗元素let element = document.createElement('div');element.className = 'locator';element.innerHTML = `<h3>${info.title}</h3><p>名称：${info.name}</p><p>类型：${info.type}</p><p>时间：${info.time}</p>`;// 设置初始可见性element.style.display = state.eventVisible ? 'block' : 'none';// 将HTML弹窗元素添加到Cesium Viewer容器中viewer.container.appendChild(element);//为弹窗添加点击事件element.addEventListener('click', () => {state.eventModalVisible = true;state.eventId = id;});// 将小点实体和HTML弹窗元素存入相应的集合state.points.push(point);state.pointElements[point.id] = element;return point;};//获取事件点数据const getEventPoint = async () => {state.pointsData = [];let res = await getEventTaskList();if (res.code === 200) {res.data.list.forEach(item => {if (item.f_lng !== null && item.f_lat !== null) {state.pointsData.push({id: item.id,position: Cesium.Cartesian3.fromDegrees(parseFloat(item.f_lng), parseFloat(item.f_lat), 0),info: { title: item.f_leve, name: item.f_name, type: item.f_from_type, time: item.f_create_time },});}});state.pointsData.forEach(function (data) {createPoint(data.id, data.position, data.info);});} else {console.log(res.msg);}};getEventPoint();//当鼠标拖动地图或放大缩小地图时，更新所有HTML弹窗的位置function updateAllElementPositions() {var scene = viewer.scene;// 如果场景模式不是MORPHING，则更新所有HTML弹窗的位置if (scene.mode !== Cesium.SceneMode.MORPHING) {// 遍历所有小点实体，更新对应的HTML弹窗的位置state.points.forEach(function (point) {var canvas = scene.canvas;// 获取小点实体的位置var cartesian = Cesium.Property.getValueOrUndefined(point.position, scene.lastRenderTime);// 将笛卡尔坐标转换为屏幕坐标var pixelPosition = scene.cartesianToCanvasCoordinates(cartesian);// 如果屏幕坐标存在，则更新HTML弹窗的位置if (pixelPosition) {// 获取HTML弹窗元素var element = state.pointElements[point.id];// 设置HTML弹窗元素的位置element.style.left = pixelPosition.x + 'px';element.style.top = pixelPosition.y + 'px';// 检查可见性element.style.display = state.eventVisible ? 'flex' : 'none';}});}}// 监听Cesium场景更新事件，以便在每次渲染时更新所有HTML弹窗的位置viewer.scene.postRender.addEventListener(updateAllElementPositions);// 函数用于更新所有弹窗的可见性function updatePopupVisibility() {Object.values(state.pointElements).forEach(element => {element.style.display = state.eventVisible ? 'block' : 'none';});}//更新弹框显隐watch(() => state.eventVisible,newVal => {updatePopupVisibility();},);

  onUnmounted(() => {//页面卸载时清除事件监听器window.removeEventListener('unload', function () {viewer.scene.postRender.removeEventListener(updateAllElementPositions);});}

    :deep(.locator) {display: flex;flex-direction: column;align-items: center;position: absolute;width: 236px;height: 207px;margin-top: -190px;margin-left: -118px;background: url('/src/assets/images/screen/locator.png') no-repeat center center;padding: 23px 0;cursor: pointer;}

 2、让弹框和相关区域同时显隐

    //该函数用于输入多边形顶点坐标，能够绘制多边形在视图上，多边形背景颜色为红色，边框为黄色function drawPolygon(points, isShow, entities) {let color;if (entities === state.irrigationEntities) {color = Cesium.Color.BLUE.withAlpha(0.5);};var polygon = viewer.entities.add({polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray(points),material: color,outline: true,},show: isShow,});//将多边形实体ID存入相应的集合entities.push(polygon.id);}//监听showIrrigation,为true时绘制灌区，否则隐藏watch(() => state.showIrrigation,newVal => {if (newVal) {//移除灌区多边形state.irrigationEntities.forEach(id => {viewer.entities.removeById(id);});state.irrigationEntities = [];state.irrigationAreaData.forEach(area => {drawPolygon(area, true, state.irrigationEntities);});} else {//移除灌区多边形state.irrigationEntities.forEach(id => {viewer.entities.removeById(id);});state.irrigationEntities = [];}},);

 3、设置地形关闭，防止漂浮

• 启用地形：适用于需要展示真实地形的应用场景（如山脉、峡谷等）。
• 关闭地形：适用于需要简化渲染、提升性能或避免地形干扰的场景。

// 设置地形，关闭
viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();

注：不关闭地形的话，鼠标拖拽地图移动时，实体会出现类似漂浮的效果（鼠标拖拽一下，实体移动出去更远）

4、鹰眼

    // 创建鹰眼地图的Viewerconst overviewViewer = new Cesium.Viewer(overviewContainer.value, {animation: false, // 禁用动画控件geocoder: false, // 开启地理编码控件homeButton: false, // 禁用主视图控件sceneModePicker: false, // 禁用场景模式切换控件// baseLayerPicker: false, // 禁用底图切换控件navigationHelpButton: false, // 禁用导航帮助按钮timeline: false, // 禁用时间轴控件});// 隐藏底部版权信息overviewViewer._cesiumWidget._creditContainer.style.display = 'none';// 添加高德地图路网overviewViewer.imageryLayers.addImageryProvider(gaodeLayer);// 同步两个地图的视角function syncView(longitude, latitude, height) {// 确保参数是数值类型longitude = parseFloat(longitude);latitude = parseFloat(latitude);height = parseFloat(height);overviewViewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),orientation: {heading: Cesium.Math.toRadians(0), // 方向角度，单位为弧度pitch: Cesium.Math.toRadians(-90), // 俯仰角度，单位为弧度roll: 0, // 翻滚角度，单位为弧度},duration: 1, // 动画持续时间，单位为秒});}// 设置中心点同样的经纬度syncView(state.longitude, state.latitude, state.height * 5);

 5、添加高德地图路网

显示道路和中文的区域名字：

const gaodeLayer = new Cesium.UrlTemplateImageryProvider({url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',maximumLevel: 18,});
viewer.imageryLayers.addImageryProvider(gaodeLayer);

 6、让用户画圆

    //开始画圆const startDrawingCircle = () => {//监听鼠标，后一次点击的位置与前一次点击的位置之间的直线为圆的直径。let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);let positions = [];handler.setInputAction(movement => {//获取鼠标点击的位置的笛卡尔坐标let cartesian = viewer.scene.pickPosition(movement.position);//如果cartesian存在且与positions数组中的第一个元素不相等，则将其添加到positions数组中if (cartesian && (!positions.length || !Cesium.Cartesian3.equals(cartesian, positions[0]))) {positions.push(cartesian);if (positions.length === 2) {let center = Cesium.Cartesian3.midpoint(positions[0], positions[1], new Cesium.Cartesian3());let radius = Cesium.Cartesian3.distance(center, positions[0]);var circle = viewer.entities.add({position: center,ellipse: {semiMinorAxis: radius,semiMajorAxis: radius,material: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.BLACK,},});positions = [];state.circleEntities.push(circle.id);}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK); //监听state.drawingCircle，当其值为false时,移除handlerwatch(() => state.drawingCircle,value => {if (value) {startDrawingCircle();} else {handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);}},);};

7、让用户画多边形

    //开始画多边形const startDrawingPolygon = () => {let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);let positions = [];let polygon = null;handler.setInputAction(movement => {let cartesian = viewer.scene.pickPosition(movement.position);if (cartesian) {positions.push(cartesian);if (positions.length === 1) {polygon = viewer.entities.add({polygon: {hierarchy: new Cesium.CallbackProperty(() => {return new Cesium.PolygonHierarchy(positions);}, false),material: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.BLACK,},});state.polygonEntities.push(polygon.id);} else {polygon.polygon.hierarchy = new Cesium.CallbackProperty(() => {return new Cesium.PolygonHierarchy(positions);}, false);}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);watch(() => state.drawingPolygon,value => {if (value) {startDrawingPolygon();} else {handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);}},);};

8、隐藏底部版权信息

viewer._cesiumWidget._creditContainer.style.display = 'none';

注：创建Cesium Viewer要在onMounted钩子函数内

9、地图深度检测

确保 3D 场景中物体的遮挡关系正确，避免出现物体穿插或遮挡错误的问题。它是实现真实感渲染的关键技术之一，在地形、建筑、飞行器等场景中尤为重要。

viewer.scene.globe.depthTestAgainstTerrain = true;

10、地图颜色

官方本来提供了多种主题，但是仍然想自定义颜色可如下设置：

viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#00115F');
let baseLayer = viewer.imageryLayers.get(0);
baseLayer.show = false;

11、禁用双击事件

双击地图上的某个位置，通常会放大视图并聚焦到该点。

viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

12、添加动画效果，飞向指定位置

// 添加动画效果，飞向指定位置，写成函数，方便调用function flyToLocation(longitude, latitude, height) {viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),orientation: {heading: Cesium.Math.toRadians(0), // 方向角度，单位为弧度pitch: Cesium.Math.toRadians(-90), // 俯仰角度，单位为弧度roll: 0, // 翻滚角度，单位为弧度},duration: 1, // 动画持续时间，单位为秒});}flyToLocation(104.69, 30.2183873102, 5000);

三、学习资料参考（感谢大佬分享）：

1、cesium中文网

Animation - Cesium Documentation

2、cesium编程入门 | cesium中文网

3、3.Cesium中实体Entity创建(超详细)_new cesium.entity-CSDN博客