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博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/71314.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安全运营的“黄金4小时“：如何突破告警疲劳困局

安全运营的“黄金4小时“：如何突破告警疲劳困局

在当今复杂多变的网络安全环境中&#xff0c;安全团队面临着前所未有的挑战。尤其是面对高级持续性威胁&#xff08;APT&#xff09;时&#xff0c;最初的“黄金4小时”成为决定成败的关键窗口。在这段时间内&#xff0c;快速而准确地响应可以极大地降低损失&#xff0c;然而&a…
阅读更多...
HTML AI 编程助手

HTML AI 编程助手

HTML AI 编程助手 引言 随着人工智能技术的飞速发展&#xff0c;编程领域也迎来了新的变革。HTML&#xff0c;作为网页制作的基础语言&#xff0c;与AI技术的结合&#xff0c;为开发者带来了前所未有的便利。本文将探讨HTML AI编程助手的功能、应用场景以及如何利用它提高编程…
阅读更多...
Oracle 数据库基础入门（五）：限制查询与范式三约定深度解析

Oracle 数据库基础入门（五）：限制查询与范式三约定深度解析

在 Oracle 数据库的学习进程中&#xff0c;限制查询与范式三约定是两个极为重要的概念。限制查询帮助我们精准获取特定范围的数据&#xff0c;而范式三约定则为数据库设计提供了科学的指导框架。对于 Java 全栈开发者而言&#xff0c;掌握这些知识不仅有助于高效地从数据库中提…
阅读更多...
[BUUCTF]web--wp（持续更新中）

[BUUCTF]web--wp（持续更新中）

ps:文章所引用知识点链接&#xff0c;如有侵权&#xff0c;请联系删除 [极客大挑战 2019]EasySQL 题目类型&#xff1a;简单SQL注入 发现是登录页面&#xff0c;用万能登录方法测试&#xff0c;两种语句均能解出flag [极客大挑战 2019]Havefun 题目类型&#xff1a;代码审计…
阅读更多...
MySQL数据库的数据类型

MySQL数据库的数据类型

1.设置MySQL服务器的默认储存引擎 set default_storage_engineMYISAM2. 数值类型 整数类型 TINYINT&#xff1a;1字节&#xff0c;范围&#xff1a;-128~127&#xff08;有符号&#xff09;&#xff0c;0~255&#xff08;无符号&#xff09;。适用于状态码、布尔值&#xff08…
阅读更多...
探秘基带算法：从原理到5G时代的通信变革【四】Polar 编解码（二）

探秘基带算法：从原理到5G时代的通信变革【四】Polar 编解码（二）

文章目录 2.3.3 极化编码巴氏参数与信道可靠性比特混合生成矩阵编码举例 2.3.4 极化译码最小单元译码串行抵消译码&#xff08;SC译码&#xff09;算法SCL译码算法 2.3.5 总结**Polar 码的优势****Polar 码的主要问题****Polar 码的应用前景** 2.3.6 **参考文档** 本博客为系列…
阅读更多...
迁移过程中，hive元数据字段校对

迁移过程中，hive元数据字段校对

有时候在迁移过程中&#xff0c;源端字段可能被修改了&#xff0c;这些都存储在元数据库里&#xff0c;通常我们一般配置的hive元数据库都是mysql。所以我们最快的速度查出结果&#xff0c;就是在mysql里查。 然后对比2端表的md5就可以找到哪个表有问题了&#xff0c;再针对这…
阅读更多...
计算机基础面试（数据结构）

计算机基础面试（数据结构）

1. 数组和链表的区别是什么&#xff1f;各自的优缺点是什么&#xff1f; 专业解答&#xff1a; 数组内存连续&#xff0c;支持随机访问&#xff0c;但插入删除效率低&#xff1b;链表内存离散&#xff0c;插入删除高效&#xff0c;但访问需遍历。 初中生版&#xff1a; 数组像…
阅读更多...
DeepSeek vs Grok vs ChatGPT：大模型三强争霸，谁将引领AI未来？

DeepSeek vs Grok vs ChatGPT：大模型三强争霸，谁将引领AI未来？

DeepSeek vs. Grok vs. ChatGPT&#xff1a;大模型三强争霸&#xff0c;谁将引领AI未来&#xff1f; 在人工智能领域&#xff0c;生成式模型的竞争已进入白热化阶段。DeepSeek、Grok和ChatGPT作为三大代表性工具&#xff0c;凭借独特的技术路径和应用优势&#xff0c;正在重塑…
阅读更多...
解决寻找两个正序数组中位数问题：C语言实现与解析

解决寻找两个正序数组中位数问题：C语言实现与解析

在算法学习和实际编程应用中&#xff0c;处理数组相关的问题是很常见的。其中&#xff0c;寻找两个正序数组的中位数就是一个经典的题目&#xff0c;不仅考验对数组操作的熟悉程度&#xff0c;还涉及到对算法效率的考量。今天&#xff0c;我们就来深入探讨如何使用C语言解决这一…
阅读更多...
【二分答案 C/C++】洛谷P1182 数列分段 Section II

【二分答案 C/C++】洛谷P1182 数列分段 Section II

2025 - 03 - 02 - 第 66 篇 Author: 郑龙浩 / 仟濹 【二分搜索/二分答案】 文章目录 洛谷P1182 数列分段 Section II题目描述输入格式输出格式输入输出样例 #1输入 #1输出 #1 说明/提示思路1 每段和的最大值最小 什么意思&#xff1f;&#xff1f;2 大体思路代码 洛谷P1182 数…
阅读更多...
vue3项目中使用Arco Design的Table表格组件expandable展开行属性结合h()函数生成表格嵌套表格效果

vue3项目中使用Arco Design的Table表格组件expandable展开行属性结合h()函数生成表格嵌套表格效果

文章目录 需求实现方式方式一方式二 操作父元素时默认收起当前展开行 需求 vue3项目中使用Arco Design - Table结合 vue3-h()函数实现表格嵌套表格的效果 实现方式 方式一 1、给Table组件设置表格的“展开行配置”参数&#xff1a;expandable <a-table :expandable&quo…
阅读更多...
pytorch 模型测试

pytorch 模型测试

在使用 PyTorch 进行模型测试时，一般包含加载测试数据、加载训练好的模型、进行推理以及评估模型性能等步骤。以下为你详细介绍每个步骤及对应的代码示例。 1. 导入必要的库 import torch import torch.nn as nn import torchvision import torchvision.transforms as trans…
阅读更多...
VirtualBox虚拟机转VM虚拟机

VirtualBox虚拟机转VM虚拟机

前言&#xff1a;部分靶机只适用于VirtualBox&#xff0c;VM打不开VirtualBox的文件&#xff0c;所以需要进行转换 前置条件&#xff1a;本机已经下载VM和VirtualBox 第一步&#xff1a;文件转换 找到VirtualBox.exe所在位置&#xff0c;启动cmd窗口 文件转换的命令&#xf…
阅读更多...
【零基础C语言】第四节 数组

【零基础C语言】第四节 数组

【零基础C语言系列】 【零基础C语言】第一节 C语言概述【数制进制码制】-CSDN博客 【零基础C语言】第二节 数据类型、运算符、表达式-CSDN博客 【零基础C语言】第三节 控制结构-CSDN博客 一、一维数组
阅读更多...
DeepSeek API使用及私有化部署

DeepSeek API使用及私有化部署

DeepSeek 大模型概述 DeepSeek 是一款参数量高达 671B 的大语言模型&#xff0c;其模型参数文件规模庞大&#xff0c;即使是经过优化的版本&#xff0c;参数文件也有数十 GB。这种庞大的参数量赋予了 DeepSeek 强大的自然语言处理能力&#xff0c;使其能够处理复杂的语言任务&…
阅读更多...
动态扩缩容引发的JVM堆内存震荡：从原理到实践的GC调优指南

动态扩缩容引发的JVM堆内存震荡：从原理到实践的GC调优指南

目录 一、典型案例&#xff1a;系统发布后的GC雪崩事件 &#xff08;一&#xff09;故障现象 1. 刚刚启动时 GC 次数较多 2. 堆内存锯齿状波动 3. GC日志特征&#xff1a;Allocation Failure &#xff08;二&#xff09;问题定位 二、原理深度解析&#xff1a;JVM内存弹…
阅读更多...
IDEA 使用codeGPT+deepseek

IDEA 使用codeGPT+deepseek

一、环境准备 1、IDEA 版本要求 安装之前确保 IDEA 处于 2023.x 及以上的较新版本。 2、Python 环境 安装 Python 3.8 或更高版本 为了确保 DeepSeek 助手能够顺利运行&#xff0c;您需要在操作系统中预先配置 Python 环境。具体来说&#xff0c;您需要安装 Python 3.8 或更高…
阅读更多...
C++（蓝桥杯常考点）

C++（蓝桥杯常考点）

前言&#xff1a;这个是针对于蓝桥杯竞赛常考的C内容&#xff0c;容器这些等下棋期再讲 C 在DEVC中注释和取消注释的方法&#xff1a;ctrl/ ASCII值&#xff08;常用的&#xff09;&#xff1a; A-Z:65-90 a-z:97-122 0-9:48-57 换行/n:10科学计数法&#xff1a;eg&#xff1a…
阅读更多...
vue These dependencies were not found

vue These dependencies were not found

These dependencies were not found: * vxe-table in ./src/main.js * vxe-table/lib/style.css in ./src/main.js To install them, you can run: npm install --save vxe-table vxe-table/lib/style.css 解决&#xff1a; nodejs执行以下语句 npm install --save vxe-t…
阅读更多...
最新文章

Copyright @ 2022~2023