- 综合排序
- 最热优先
- 最新优先
- 来自专栏Kiba518
使用开源Cesium+Vue实现倾斜摄影三维展示
准备工作 VUE开发工具：Visual studio Code 倾斜摄影转换工具：CesiumLab—下载地址：http://www.cesiumlab.com/ 三维显示：Cesium，api参考网站 处理完成后，系统会把切片的倾斜摄影发布成服务，点击分发服务——3dtiles服务，如下图所示： 显示倾斜摄影 在项目中增加文件——No02-3D.vue，使用我们刚刚发布服务地址，将三维图像展示处理， // eslint-disable-next-line no-unused-vars let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset 最大加载瓦片个数 })); window.viewer.flyTo(tileset) viewer.camera.setView({ destination: Cesium.Cartesian3 +Vue实现倾斜摄影三维展示已经介绍完了。
4.6K20编辑于 2022-09-09 - 来自专栏前端漫步
Cesium入门之四：基于Vue3+Vite+Cesium构建三维地球场景
Cesium官网中提供了基于webpack配置Cesium的方法，但是这种方法太繁琐，而且使用webpack时程序启动没有Vite启动快，因此，这里选择vite创建vue3+cesium构建项目，先看下完成后的效果 vue3-cesium-vite --template vue创建vue3项目，创建成功后，终端中输入cd vue3-cesium-vite进入vue3-cesium-vite文件夹，输入npm install 来快速构建Cesium项目；vite-plugin-cesium是一个基于Vite构建工具的插件，用于在Vue.js应用程序中加载CesiumJS 3D地球和地图WebGL库。 vite来安装Cesium和vite-plugin-cesium插件 创建三维地球 删除无用的组件和代码 删除components文件夹先的HelloWorld.vue文件，删除APP.vue中的代码 important; } </style> 至此，通过vue3+vite+cesium构建三维地球场景成功！
9.8K32编辑于 2023-10-14 【Cesium】二、vite+vue3+cesium 使用，项目中使用cesium 地图，具体步骤。快速搭建Cesium三维地图应用项目
一、准备项目 这里我已经创建好vite+vue3 项目模板了，需要可以直接克隆下来，进行下面步骤。 vite-commit：点击跳转GitHub 二、安装 下载依赖 yarn add cesium vite-plugin-cesium vite -D 或者用npm npm i cesium vite-plugin-cesium vite -D 修改vite.config.js 引入：import cesium from 'vite-plugin-cesium' 并在plugins中添加。 from "cesium"; onMounted(() => { const viewer =new Cesium.Viewer("cesiumContainer") }) </script> 五、消除控件 可以看到初始界面有许多控件，下面我们来隐藏这些控件： 参考文章： 使用Vite快速搭建Cesium三维地图应用项目 cesium(一)vite环境搭建 Cesium在vue3中的安装
1.4K11编辑于 2025-12-15- 来自专栏各类技术文章~
【vue-cesium】在vue上使用cesium开发三维地图（一）
，这个时候就引入了cesium。 ，可二维 ，实际项目中只用过一次，不太熟，传送门 只有写了一篇，【vue与高德地图】加载3D地图，大家感兴趣，可以看下 百度地图的mapv 这个是二维的 ，实际项目中没用到过，本人不熟，传送门 阿里巴巴的 比方说 我(webgis) 需要一个某某区域的数据（geojson数据），那么这个数据就是纯GIS提供的， 我(webgis) 需要在地图上加载出某某区域内的3维模型，像三维沙盘这种的，建模数据 常见的GIS网站，或者，大平台下面的GIS子模块，基本就是 一个大地图，然后地图上，有几个点位，你点击一下某个点位，就会触发一些操作，展示一些东西， 比如，这个点位上方出现一个弹框，这个弹框上就是展示这个点位的详细信息 ， 又比如，这个地图上多出了一个大的面板，面板上展示一系列的信息等等
8.8K51发布于 2021-11-04 - 来自专栏前端漫步
Cesium入门之十：Cesium加载3DTiles数据
3DTiles介绍 3DTiles是一种面向网格化、可展示的大规模三维空间数据格式，专门为流式传输和渲染海量3D地理空间数据而设计的，用于存储和管理基于网格的三维模型数据。 其数据结构基于B3DM和PNTS格式，可以支持多个级别的LOD，并使用Tilesets（瓦片集合）来组织和管理数据。3DTiles具有以下特点： 支持大规模、高精度的三维模型数据展示。 Cesium中与3DTiles相关的类 1.Cesium3DTileset类 Cesium3DTileset类是3DTiles数据的主要管理类，负责加载和渲染Tileset。 3.Cesium3DTileContent类 Cesium3DTileContent是用于表示单个3D瓦片的内容和几何信息的类。 Cesium3DTileFeature类 Cesium3DTileFeature类用于表示3D瓦片中的单个要素（feature）及其相关属性。
10.6K10编辑于 2023-10-14 - 来自专栏前端漫步
Cesium入门之二：引用Cesium并创建第一个三维地球
这一节我们来引入Cesium并创建第一个三维地图程序 Cesium的引入 1、新建一个文件夹，命名为first_cesium,在该文件夹下新建一个Build文件夹，将上一节我们下载的Cesium文件夹下 "width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> 3、 /Build/Widgets/widgets.css); </style> 创建第一个三维地球 1、在html的body标签中新建一个id为cesiumContainer的div，作为Cesium的容器 ，可以看到，我们已经在浏览器里运行了一个三维地球 new Cesium.Viewer(container, options)： 在上面我们通过使用new Cesium.Viewer()实例化了一个 ，Object格式，用来描述初始化对象时的选项参数 3、创建好的三维地球默认提供了很多微件，如下图所示 这些小部件模式是显示的状态，我们可以在代码中设置不使用的，具体如何设置，我们下节再聊，
2.9K41编辑于 2023-10-14 - 来自专栏知识分享
前端调用Cesium加载三维模型全攻略
想象一下，地球在你眼前旋转，上面还有各种3D模型，是不是很酷？Cesium是一个超酷的库，专门用来创建超炫的3D地球和地图。好，言归正传，今天这篇文章就分享一下前端如何使用Cesium加载三维模型。 3D之旅# 二：加载模型要加载一个3D模型，你需要知道模型在哪里，然后告诉Cesium去哪里找它。 let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(-75.628982 ```javascript// 定义轨迹的坐标点数组 var waypoints = [ Cesium.Cartesian3.fromDegrees(116.407, 39.904), // 北京 Cesium.Cartesian3.fromDegrees(121.473, 31.230), // 上海 Cesium.Cartesian3.fromDegrees(104.065
2.1K10编辑于 2024-08-01 - 来自专栏不正经的前端
让GIS三维可视化变得简单-初识Cesium
前言 从去年开始无脑接触 Cesium 三维 GIS 可视化，入坑之后一直到到现在，其实已经写了多个项目了，中间也遇到了很多坑点，很早就想分享其中所获了，只是觉得不太专业而且没有太多时间，拖到现在 =0&mmversion=false 那么接下来话不多说，赶紧来认识下 Cesium 吧 Cesium简介 什么是Cesium Cesium 是一款面向三维地球和地图的，世界级的 JavaScript 等没有本质的区别，只是Cesium支持三维场景等等，做的更漂亮 Cesium可以做什么 支持全球级别的高精度的地形和影像服务 支持 2D、2.5D、3D 形式的地图展示，真正的二三维一体化 支持矢量、 海量模型数据（倾斜，BIM，点云等） 支持基于时间轴的动态数据可视化展示 Cesium的浏览器兼容性 学习和使用 Cesium 前，首先要检查一下你的浏览器是否支持 WebGL，目前，大多数平台和浏览器都支持 /Cesium/Widgets/widgets.css) 「No.3」 在 HTML 的 body 中我们创建一个 div，用来作为三维地球的容器
<5.3K32编辑于 2022-03-28【Cesium】六、实现鹰眼地图（三维）与主图联动效果
一、前言 上一篇文章：【Cesium】五、地图实现鹰眼效果（三维），虽然实现了3D 的鸟瞰图效果，但是只有鸟瞰图跟着 主地图在动，如果 在鸟瞰图上操作 主地图却不会跟着同步。 本文参考文章：cesium实现鹰眼地图（三维）与主图联动效果 二、效果 三、实现方法 2.1 思路 鹰眼地图与主图联动，需要判断是主图在动，还是鹰眼地图在动，即需要判断触发事件，否者会造成循环联动，无法实现效果 2.2 方法 utils 下新建HawkEye3DMap.js 文件，代码如下： import * as Cesium from "cesium"; /** * @description: 三维鹰眼地图及与主图联动 _hawkEyeMap = new Cesium.Viewer('hawkEye3dMap', { infoBox: false, geocoder: false from "cesium"; import { HawkEye3DMap } from "@/utils/HawkEye3DMap.js" const initFn = async () => {
67310编辑于 2025-12-15来自专栏Web行业观察Cesium之b3dm格式
//作者：迷途的小书童 //微信公众号:g0415shenweri b3dm格式 参考文档： https://github.com/CesiumGS/3d-tiles/blob/master/specification /TileFormats/Batched3DModel/README.md 工具设计 计划写一个工具来查看B3dm的格式，顺便了解其原理。 网址一：https://github.com/daniel-hilton/gltf-b3dm-convertor 实现gltf-b3dm-convertor的互相转换。 B3dm格式验证 文件名：lib\validateB3dm.js B3dm例子解读 这里推荐一个json格式化的工具： https://www.bejson.com/explore/index_new/ type：数据类型为三维向量 VEC3 min：max：表示240个vec3的最小和最大值 "bufferViews": [ { "buffer": 0,
7.3K20发布于 2021-05-11来自专栏项目管理政务信息化项目中Cesium的应用
Cesium在政务信息化项目中广泛应用于三维地球展示、地图服务、空间数据管理和实时动态数据可视化。 政务信息化项目中Cesium的应用场景三维地球展示Cesium能够创建高度交互的三维地球和地图，适用于城市规划、环境监测、灾害预警等领域。 例如，广东省交通运输厅利用Cesium构建了智慧航道系统，实现了航道的数字化管理和实时监测。三维地球展示提供了一种直观、沉浸式的数据展示方式，特别适合需要展示复杂地理空间信息的政务项目。 跨平台兼容性是Cesium的重要优势之一，它使得政务信息化项目无需担心不同设备和浏览器的兼容性问题，降低了开发和维护成本。高性能渲染Cesium利用GPU进行3D渲染，确保流畅的用户体验。 其高性能渲染能力特别适合需要展示复杂三维模型和地理信息的项目。高性能渲染是Cesium的核心优势，它能够提供流畅、逼真的三维视觉效果，提升用户体验和项目质量。
88110编辑于 2024-07-30Cesium在GIS项目中的应用技巧与优劣势深度分析
加载城市建筑物模型利用Cesium的3D Tiles格式加载城市建筑物模型，可以为GIS应用增添更加真实的三维场景。3D Tiles是一种高效的三维数据格式，特别适用于大规模三维模型的加载和管理。 通过Cesium的3D Tiles工具，开发者可以轻松地将城市建筑物模型集成到应用中，为用户呈现逼真的城市景观。此外，Cesium还支持多种三维模型格式，如glTF、OBJ等。 例如，开发者可以通过监听点击事件，实现建筑物信息的查询和展示；通过监听移动事件，实现视角的跟随和变换；通过监听缩放事件，实现场景的放大和缩小。 这些动态效果的实现，不仅可以提升应用的美观度，还可以为用户提供更加丰富的信息展示方式。5. 性能优化性能优化是GIS应用开发中不可忽视的一环。 这使得Cesium能够轻松处理各种复杂的地理空间数据，满足不同应用场景的需求。3.
1.5K10编辑于 2024-08-12来自专栏marsgis基于 Cesium 的Web三维地球客户端程序开发框架
MarsGIS for Cesium三维地球框架 是火星科技研发的一个Web三维地图开发平台系统，是火星科技团队成员多年GIS开发和Cesium使用的技术沉淀。 基于Cesium和现代Web技术栈全新构建， 集成了领先的开源地图库、可视化库，提供了全新的大数据可视化、实时流数据可视化功能，通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析。 框架主要目的是升级Cesium的基础功能和编写相关示例，方便快速搭建Cesium地图项目，敏捷开发，可复用，支持各种配置，适合各种场景使用。 在线地址： http://cesium.marsgis.cn/examples.html image.png 应用项目： 提供了一些基于平台框架的应用项目的在线浏览展示，包含基础项目模板和其它demo 1、基础项目 1.jpg 2、基础项目 - SM版 2.jpg 3、电子沙盘系统 3.jpg 4、综合态势展示系统 4.jpg
4.9K10发布于 2018-08-17三维GIS平台架构：从数据到场景的四层体系
Cesium作为开源三维地球引擎，基于WebGL实现海量三维数据的高效加载与动态渲染，支持3D Tiles标准进行倾斜摄影、点云、BIM模型的流式加载与LOD切换。 三、关键代码示例以下片段展示使用Cesium在Web端初始化三维地球并接入本地WMTS地图服务的核心逻辑：import * as Cesium from 'cesium';// 初始化三维地球const tileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ url: 'http://localhost (116.4, 39.9, 5000), duration: 2});该代码片段展示了三维GIS平台前端初始化的核心步骤：创建Viewer实例时配置影像服务与地形数据源，并通过Cesium3DTileset 四、架构演进趋势当前三维GIS架构正从“展示型”向“分析决策型”演进。
29910编辑于 2026-08-22来自专栏点滴积累Cesium基础使用介绍
前言 最近折腾了一下三维地球，本文简单为大家介绍一款开源的三维地球软件——Cesium，以及如何快速上手Cesium。 (pick1.x, pick1.y, pick1.z), new Cesium.Cartesian3(pick3.x, pick3.y, pick3.z) ); //pick1、pick3都是三维坐标系 2.5 加载3D对象（Entity） 通过Cesium可以很清楚的将一个三维模型加载到地球中。 2.7.3 支持的格式 b3dm： Batched 3D Model 用于展示城市建筑等大规模的3D对象 l3dm： Instanced 3D Model 用于展示模型等。 pnts： Point Cloud 用于展示大量的3D点。 vctr： Vector Data 用于展示矢量元素，代替KML（那么CZML呢？动画？）
9K71发布于 2018-04-28来自专栏代码编写世界Cesium案例解析(八)——CesiumWidget简化窗体
正文 Cesium Widget这个案例展示了一个Cesium的简化窗体。在之前的案例中使用的都是Cesium.Viewer这个窗体组件，包含了非常丰富的组件内容。 Cesium.CesiumWidget可以说是其简化版本，不包含动画、图层选择等等其他组件内容，仅仅显示一个三维数字地球。并且，默认情况下也不会包含Cesium地形的图层。 之前网上很多的问题是关于如何在Cesium.Viewer组件中隐藏所有的元素，现在似乎直接用Cesium.CesiumWidget这个组件就可以了。 It is just a widget for the 3D globe; // it does not include the animation, imagery selection, // and 参考 cesium随笔 — 隐藏三维场景下方版权信息
1.3K10发布于 2020-04-13来自专栏不正经的前端让GIS三维可视化变得简单-Cesium地球初始化
的介绍请看 让GIS三维可视化变得简单-初识Cesium 环境搭建 本文及后续文章启动环境皆是基于 Vue-CLI3.X+ 使用我自己写的 CLI 插件 vue-cli-plugin-cesium 2：2D循环 3：3D，默认3 requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率 // 如场景中的元素没有随仿真时间变化 让GIS三维可视化变得简单-Cesium地球初始化 暂定 - 让GIS三维可视化变得简单-Cesium坐标转换 暂定 - 让GIS三维可视化变得简单-Cesium球体自转 暂定 - 让GIS三维可视化变得简单 -Cesium实体Entity及事件 暂定 - 让GIS三维可视化变得简单-Cesium模型数据之3DTiles 暂定 - 让GIS三维可视化变得简单-Cesium模型数据之gltf 暂定 - 让GIS 三维可视化变得简单-Cesium气泡弹窗 暂定 - 让GIS三维可视化变得简单-Cesium粒子系统(火灾、雪花、喷水) 暂定 - 让GIS三维可视化变得简单-Cesium鹰眼图 暂定 - 让GIS三维可视化变得简单
2.9K10编辑于 2022-03-28三维模型在线展示解决方案
前言目前能够免费使用三维模型在线展示服务的平台有sketchfab、乐述云享和51建模网。 他们都可以让3D模型以实时、立体、交互的形态呈现在大众面前，无需安装任何插件或软件，用户即可通过浏览器直接预览3D内容，例如：说明01 权益说明sketchfab和51建模网均提供基础版（体验版）服务， 乐述云享是一个知识库软件，三维模型在线展示功能只是文档中的一个小组件，因此没有也不提供各种复杂的配置功能，其只有一个上传模型的弹窗，当然这并不代表乐述云享无法实现其他功能，其支持在Markdown中进行 第1步：3D建模如果您已有现成的产品3D模型，可省略此步骤，目前平台支持上传的格式为GLB，你可以使用Blender、3ds Max、Maya等软件导出相关格式的文件。 注意： 富文本编辑器只能使用简易版三维模型在线展示组件； Markdown编辑器可以直接DIY三维模型在线展示组件。
2.6K10编辑于 2024-06-27应用Cesium探索三维地理信息系统的无限可能
Cesium，这个在地理信息系统（GIS）领域备受瞩目的开源JavaScript库，正在以其强大的功能和灵活性引领着3D地球和地图应用的潮流。 一、场景创建与基础架构在Cesium的世界里，一切都是从`Cesium.Scene`开始的。这个场景对象是构建3D地球应用的基础，它包含了相机、地球模型以及其他必要的组件。 `Cesium.Globe`类提供了地球的三维模型，支持自定义地形和影像数据。 二、相机控制与交互体验在3D地球应用中，相机的控制至关重要。Cesium提供了多种相机控制器，以满足不同的交互需求。 综上所述，Cesium作为一个开源的JavaScript库，为开发者提供了创建3D地球和地图应用的强大功能和灵活性。
1K10编辑于 2024-08-13来自专栏Edward的专栏Cesium 入门教程（基于 vue3）
Cesium 介绍： Cesium 是一个开源的 JavaScript 库，专门用于创建世界级的三维地球和地图可视化应用。 它提供了强大的工具和功能，使开发者能够轻松地在浏览器中展示高分辨率的地形、影像以及三维模型。 里面有很多案例和教程，可以离线学习： 下载成功后，创建 vue3 项目： vue create cesium-basic 创建完 vue3 项目后，下载 cesium 库： cnpm add cesium var degress = Cesium.Math.toDegrees(2*Math.PI) // 经纬度转换为笛卡尔坐标 var cartesian3 = Cesium.Cartesian3.fromDegrees (Cesium.Math.toRadians(0.1)); } }) 添加物体和3维建筑物 3D建筑教学：【Cesium入门】在3D城市中可视化一个拟建的建筑 - csincs - 博客园用你自己的
11.1K11编辑于 2025-03-12
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号