- 综合排序
- 最热优先
- 最新优先
- 来自专栏Kiba518
使用开源Cesium+Vue实现倾斜摄影三维展示
准备工作 VUE开发工具：Visual studio Code 倾斜摄影转换工具：CesiumLab—下载地址：http://www.cesiumlab.com/ 三维显示：Cesium，api参考网站 然后安装cesium的插件——vue-cli-plugin-cesium（只支持 VueCLI3.0+ 版本）。 Cesium源码—下载地址：https://github.com/CesiumGS/cesium。 处理完成后，系统会把切片的倾斜摄影发布成服务，点击分发服务——3dtiles服务，如下图所示： 显示倾斜摄影 在项目中增加文件——No02-3D.vue，使用我们刚刚发布服务地址，将三维图像展示处理， +Vue实现倾斜摄影三维展示已经介绍完了。
4.6K20编辑于 2022-09-09 - 来自专栏各类技术文章~
【vue-cesium】在vue上使用cesium开发三维地图（一）
前言 作为一个WebGIS开发，从前端往GIS靠拢，虽说不是纯GIS，但是也了解到一些相关GIS上的东西 平常时候接触到的都是在二维上进行开发工作，但是在这个岗位上继续下去，免不了要接触到三维相关的东西 ，这个时候就引入了cesium。 全名 叫 地理信息系统（Geographic Information System或 Geo－Information system，GIS）有时又称为“地学信息系统 常用到的地图开发框架 高德地图 可三维 常见的GIS网站，或者，大平台下面的GIS子模块，基本就是 一个大地图，然后地图上，有几个点位，你点击一下某个点位，就会触发一些操作，展示一些东西， 比如，这个点位上方出现一个弹框，这个弹框上就是展示这个点位的详细信息 ， 又比如，这个地图上多出了一个大的面板，面板上展示一系列的信息等等
8.8K51发布于 2021-11-04 【Cesium】二、vite+vue3+cesium 使用，项目中使用cesium 地图，具体步骤。快速搭建Cesium三维地图应用项目
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中的安装 from "cesium"; const initalize = async () => { const viewer = new Cesium.Viewer("cesiumContainer"
1.4K11编辑于 2025-12-15- 来自专栏前端漫步
Cesium入门之四：基于Vue3+Vite+Cesium构建三维地球场景
Cesium官网中提供了基于webpack配置Cesium的方法，但是这种方法太繁琐，而且使用webpack时程序启动没有Vite启动快，因此，这里选择vite创建vue3+cesium构建项目，先看下完成后的效果 ，输入npm run dev 启动项目 安装Cesium和vite-plugin-cesium插件 在vite创建的vue项目中，我们可以借助vite-plugin-cesium来快速构建Cesium项目 vite来安装Cesium和vite-plugin-cesium插件 创建三维地球 删除无用的组件和代码 删除components文件夹先的HelloWorld.vue文件，删除APP.vue中的代码 /components/CesiumViewer.vue'; </script> <style scoped> </style> 刷新浏览器，发现一个三维地球已经渲染到页面上了 删除默认的小部件 important; } </style> 至此，通过vue3+vite+cesium构建三维地球场景成功！
9.8K32编辑于 2023-10-14 - 来自专栏前端漫步
Cesium入门之二：引用Cesium并创建第一个三维地球
这一节我们来引入Cesium并创建第一个三维地图程序 Cesium的引入 1、新建一个文件夹，命名为first_cesium,在该文件夹下新建一个Build文件夹，将上一节我们下载的Cesium文件夹下 Build文件夹---->Cesium文件夹下的文件全部拷贝到first_cesium---->Build文件夹。 /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加载三维模型全攻略
Cesium是一个超酷的库，专门用来创建超炫的3D地球和地图。好，言归正传，今天这篇文章就分享一下前端如何使用Cesium加载三维模型。# 一：准备工作首先，确保你已经安装了Cesium库。 可以从Cesium官网下载最新版本的库文件，或者使用npm进行安装：```javascriptnpm install cesium或者yarn add cesium```然后，找一个舒服的地方坐下，准备好开始你的 ```javascript// 创建你的Cesium Viewer let viewer = new Cesium.Viewer('cesiumContainer'); // 定义模型的坐标和大小 viewer.scene.primitives.add(new Cesium.Model(modelOptions));```我们首先创建了一个Cesium Viewer实例，然后定义了模型的路径和选项 具体可参考Cesium官方文档。
2.1K10编辑于 2024-08-01 - 来自专栏不正经的前端
让GIS三维可视化变得简单-初识Cesium
前言 从去年开始无脑接触 Cesium 三维 GIS 可视化，入坑之后一直到到现在，其实已经写了多个项目了，中间也遇到了很多坑点，很早就想分享其中所获了，只是觉得不太专业而且没有太多时间，拖到现在 吧 Cesium简介 什么是Cesium Cesium 是一款面向三维地球和地图的，世界级的 JavaScript 开源产品，它提供了基于 JavaScript 语言的开发包，方便用户快速搭建一款零插件的虚拟地球 ，只是单纯做可视化，其实在我看来， Cesium 与 Leaflet 以及 OpenLayer 等没有本质的区别，只是Cesium支持三维场景等等，做的更漂亮 Cesium可以做什么 支持全球级别的高精度的地形和影像服务 支持 2D、2.5D、3D 形式的地图展示，真正的二三维一体化 支持矢量、海量模型数据（倾斜，BIM，点云等） 支持基于时间轴的动态数据可视化展示 Cesium的浏览器兼容性 学习和使用 Cesium /Cesium/Widgets/widgets.css) 「No.3」 在 HTML 的 body 中我们创建一个 div，用来作为三维地球的容器
<5.3K32编辑于 2022-03-28来自专栏烤包子【Cesium】Cesium坐标转换
2.2 坐标转换 Cesium其实是一个封装好的WebGL库，当然这里面就牵扯到好几套坐标问题：屏幕坐标、三维空间坐标、投影坐标。 new Cesium.Cartesian2(1,1) //表示一个二维笛卡尔坐标系，也就是直角坐标系（屏幕坐标系） new Cesium.Cartesian3(1,1,1) //表示一个三维笛卡尔坐标系 2.2.3 三维坐标到地理坐标的转换 var geoPt1= scene.globe.ellipsoid.cartesianToCartographic(pick1) //其中pick1是一个Cesium.Cartesian3 .fromDegree(point) 2.2.7 计算两个三维坐标系之间的距离 var d = Cesium.Cartesian3.distance( new Cesium.Cartesian3 (pick1.x, pick1.y, pick1.z), new Cesium.Cartesian3(pick3.x, pick3.y, pick3.z) ); //pick1、pick3都是三维坐标系
4.5K40发布于 2021-11-10【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 _hawkEyeMap.scene.backgroundColor = Cesium.Color.TRANSPARENT; this.
67310编辑于 2025-12-15来自专栏项目管理政务信息化项目中Cesium的应用
Cesium在政务信息化项目中广泛应用于三维地球展示、地图服务、空间数据管理和实时动态数据可视化。 政务信息化项目中Cesium的应用场景三维地球展示Cesium能够创建高度交互的三维地球和地图，适用于城市规划、环境监测、灾害预警等领域。 例如，广东省交通运输厅利用Cesium构建了智慧航道系统，实现了航道的数字化管理和实时监测。三维地球展示提供了一种直观、沉浸式的数据展示方式，特别适合需要展示复杂地理空间信息的政务项目。 其高性能渲染能力特别适合需要展示复杂三维模型和地理信息的项目。高性能渲染是Cesium的核心优势，它能够提供流畅、逼真的三维视觉效果，提升用户体验和项目质量。 Cesium在政务信息化项目中具有广泛的应用前景，特别是在三维地球展示、地图服务、空间数据管理和实时动态数据可视化方面。
88110编辑于 2024-07-30来自专栏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来自专栏前端博客Cesium笔记(1)：在项目中使用Cesium—Vue整合Cesium
项目中引入Cesium，普通项目，按照官方文档照做就可https://cesium.com/docs/tutorials/getting-started/常规引入很多人说需要require.js,我是没有使用 ，/Cesium-1.40/Build/CesiumUnminified/Cesium.js/Cesium-1.40/Build/CesiumUnminified/Widgets/widgets.css 当然，也可以手工导入 improt 导入，这个不需要修改webpack 配置整合入webpack首先npm i cesium，如果按照不成功(再次fuck GFW)，直接下载cesium包（https: 放到全局对象当中之前做maptalks地图的时候，maptalks.ui.UIMarker，把创建的marker 放到一个 vue data 定义的数组中MarkersList（Vue View 中，通过数组做一些页面展示逻辑 Cesium》,请注明出处：https://www.zhoulujun.cn/html/GIS/cesium/8321.html
2.7K20编辑于 2023-05-14三维GIS平台架构：从数据到场景的四层体系
企业级部署中，服务层采用微服务架构设计，将Cesium渲染引擎与地图服务解耦，支持横向扩展以承载高并发访问。应用层聚焦业务逻辑的实现。它集成三维可视化、数据管理、空间分析、用户权限等核心功能模块。 Cesium作为开源三维地球引擎，基于WebGL实现海量三维数据的高效加载与动态渲染，支持3D Tiles标准进行倾斜摄影、点云、BIM模型的流式加载与LOD切换。 三、关键代码示例以下片段展示使用Cesium在Web端初始化三维地球并接入本地WMTS地图服务的核心逻辑：import * as Cesium from 'cesium';// 初始化三维地球const .fromDegrees(116.4, 39.9, 5000), duration: 2});该代码片段展示了三维GIS平台前端初始化的核心步骤：创建Viewer实例时配置影像服务与地形数据源，并通过 四、架构演进趋势当前三维GIS架构正从“展示型”向“分析决策型”演进。
29910编辑于 2026-08-22来自专栏前端漫步Cesium入门之一：Cesium本地运行
Cesium简介 Cesium是一个开源的、面向三维地球和地图的JavaScript库，它是基于Apache2.0许可的开源程序，可以免费的用于商业用途； Cesium下载 Cesium的官网地址是：https ://cesium.com/platform/cesiumjs/，由于Cesium的服务器在国外，我们访问会比较慢，所以，我们可以将Cesium下载到本地，在本机上运行，后面查看Cesium的帮助文档和示例程序就比较方便了 打开官网地址，在Platform菜单下找到Downloads，打开下载页面 当前Cesium的最新版本是1.105.1，在下载页面点击DOWNLOAD CESIUMJS 1.105.1，将Cesium 下载到本地 Cesium目录结构 下载后的Cesium是一个压缩文件，解压该压缩文件，通过VSCode打开该文件夹，其目录结构如下： 本地运行Cesium 我们可以将Cesium发布到本机服务器 Sandcastle文件可以查看所有的示例程序代码，也可以在这里编写测试代码，方便我们学习 至此，我们就完成了Cesium在本地运行环境的搭建，下一节我们来引用Cesium并创建第一个三维地球，今天就到这里了
7.4K43编辑于 2023-10-14来自专栏不正经的前端让GIS三维可视化变得简单-Cesium地球初始化
前言 开发中我们通常会需要一个干净的三维地球实例，本文将介绍 Cesium 如何初始化一个地球，包括地图控件的显示隐藏以及一些常用影像和标注的加载 预览Demo[1] Cesium 是一款面向三维地球和地图的 知道了影像图层基础的体系结构，那么影像加载就简单了，上面我们也可以看到 ImageryProvider 类种类非常多，列举出来是为了给大家展示下它可以加载什么影像，但是一一演示不现实，所以接下来我们就来看几个常见影像加载 让GIS三维可视化变得简单-Cesium地球初始化 暂定 - 让GIS三维可视化变得简单-Cesium坐标转换 暂定 - 让GIS三维可视化变得简单-Cesium球体自转 暂定 - 让GIS三维可视化变得简单 三维可视化变得简单-Cesium模型数据之geojson 暂定 - 让GIS三维可视化变得简单-Cesium模型数据之czml 暂定 - 让GIS三维可视化变得简单-Cesium流动线绘制 暂定让GIS 三维可视化变得简单-Cesium气泡弹窗 暂定 - 让GIS三维可视化变得简单-Cesium粒子系统(火灾、雪花、喷水) 暂定 - 让GIS三维可视化变得简单-Cesium鹰眼图 暂定 - 让GIS三维可视化变得简单
2.9K10编辑于 2022-03-28Cesium在GIS项目中的应用技巧与优劣势深度分析
在这一背景下，Cesium作为一款开源的、基于WebGL的三维地球渲染引擎，因其强大的功能和灵活的扩展性，在GIS项目中得到了广泛的应用。 加载城市建筑物模型利用Cesium的3D Tiles格式加载城市建筑物模型，可以为GIS应用增添更加真实的三维场景。3D Tiles是一种高效的三维数据格式，特别适用于大规模三维模型的加载和管理。 通过Cesium的3D Tiles工具，开发者可以轻松地将城市建筑物模型集成到应用中，为用户呈现逼真的城市景观。此外，Cesium还支持多种三维模型格式，如glTF、OBJ等。 例如，开发者可以通过监听点击事件，实现建筑物信息的查询和展示；通过监听移动事件，实现视角的跟随和变换；通过监听缩放事件，实现场景的放大和缩小。 这些动态效果的实现，不仅可以提升应用的美观度，还可以为用户提供更加丰富的信息展示方式。5. 性能优化性能优化是GIS应用开发中不可忽视的一环。
1.5K10编辑于 2024-08-12三维模型在线展示解决方案
前言目前能够免费使用三维模型在线展示服务的平台有sketchfab、乐述云享和51建模网。 02 功能说明sketchfab是国外软件，其商业版支持更换背景、限制摄像头并提供模型格式转换，其最大的优点就是拥有全球最大的模型分享社区，所有作品都可以自由分享，不限制内嵌展示次数，优质案例：雕塑笔记 乐述云享是一个知识库软件，三维模型在线展示功能只是文档中的一个小组件，因此没有也不提供各种复杂的配置功能，其只有一个上传模型的弹窗，当然这并不代表乐述云享无法实现其他功能，其支持在Markdown中进行 注意： 富文本编辑器只能使用简易版三维模型在线展示组件； Markdown编辑器可以直接DIY三维模型在线展示组件。 Markdown编辑器程序开发使用Markdown编辑器需要自己编写ThreeJS代码，以下是一个在线展示的案例，你只需要更改glbUrl的网络地址就可以了，这代表模型甚至都可以不用上传平台，有一定编程基础的用户还可以基于当前程序做二次开发
2.6K10编辑于 2024-06-27应用Cesium探索三维地理信息系统的无限可能
`Cesium.Globe`类提供了地球的三维模型，支持自定义地形和影像数据。 `Cesium.OrbitCameraController`允许用户通过鼠标或触摸屏环绕地球进行平移和旋转，这种控制方式非常适合于展示地球的全貌。 除了基本的图层管理功能外，Cesium还支持数据的动态加载和实时更新。这意味着开发者可以随时从服务器获取最新的地理数据，并将其展示在地图上。 四、几何图形与实体展示在Cesium中，几何图形和实体是构建复杂地理信息系统应用的基本元素。`Cesium.Geometry`类定义了几何图形的基本类，如点、线、面等。 无论是场景创建、相机控制、图层管理还是几何图形展示、标注标签、时间动态等方面，Cesium都展现出了卓越的性能和易用性。
1K10编辑于 2024-08-13来自专栏服务器运维笔记让GIS三维可视化变得简单-Cesium地球初始化
前言 开发中我们通常会需要一个干净的三维地球实例，本文将介绍 Cesium 如何初始化一个地球，包括地图控件的显示隐藏以及一些常用影像和标注的加载 预览Demo[1] Cesium 是一款面向三维地球和地图的 知道了影像图层基础的体系结构，那么影像加载就简单了，上面我们也可以看到 ImageryProvider 类种类非常多，列举出来是为了给大家展示下它可以加载什么影像，但是一一演示不现实，所以接下来我们就来看几个常见影像加载 让GIS三维可视化变得简单-Cesium地球初始化 暂定 - 让GIS三维可视化变得简单-Cesium坐标转换 暂定 - 让GIS三维可视化变得简单-Cesium球体自转 暂定 - 让GIS三维可视化变得简单 三维可视化变得简单-Cesium模型数据之geojson 暂定 - 让GIS三维可视化变得简单-Cesium模型数据之czml 暂定 - 让GIS三维可视化变得简单-Cesium流动线绘制 暂定让GIS 三维可视化变得简单-Cesium气泡弹窗 暂定 - 让GIS三维可视化变得简单-Cesium粒子系统(火灾、雪花、喷水) 暂定 - 让GIS三维可视化变得简单-Cesium鹰眼图 暂定 - 让GIS三维可视化变得简单
4.1K30发布于 2021-04-07来自专栏点滴积累Cesium基础使用介绍
前言 最近折腾了一下三维地球，本文简单为大家介绍一款开源的三维地球软件——Cesium，以及如何快速上手Cesium。 2.5 加载3D对象（Entity） 通过Cesium可以很清楚的将一个三维模型加载到地球中。 2.6.3 CZML CZML是Cesium中很重要的一个概念，也是一个亮点，CZML使得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
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号