![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Cesium
文章平均质量分 87
GIS 实战
Apple_Coco
一以贯之的努力,不得懈怠的人生,每天的微小积累会决定最终结果,这就是答案。
展开
-
Cesium-Vue3.2配置Cesium踩坑笔记
很早之前,我写过一篇 Cesium-Vue3整合Cesium最简教程 教程,而最近我在学习最新版的 Vue3.2 和 TypeScript,并使用了 Vue Admin Plus 后台框架,发现在这个框架的基础上配置 Cesium 会有一些坑,便在此记录下来,希望能帮助到后面的小伙伴呀~~后续的文章更新会第一时间发布在我自己搭建的 博客小站 上,欢迎小伙伴来访问鸭~~原创 2022-04-21 16:07:27 · 4629 阅读 · 7 评论 -
Cesium-Vue3整合Cesium最简教程
文章目录前言配置创建 Vue3 项目安装 Cesium编写 Vue 组件运行项目可能遇到的问题前言我之前写过一篇博客,关于 Cesium1.74+Vue2.6.12环境搭建,最近在学习 Vue3,又正好了解到有一款 Vue 整合 Cesium 的插件神器,它可以让我们在 vue-cli 中零配置使用 Cesium,简直不要太方便。下面介绍详细的配置过程~配置创建 Vue3 项目全局安装 vue/clinpm install -g @vue/cli创建一个新的 vue 项目vue c原创 2021-07-02 14:46:25 · 4585 阅读 · 3 评论 -
Cesium-通过Shader添加圆形扩散效果
实验效果代码自定义GLSL代码外部调用总结参考链接实验效果代码自定义GLSL代码const DynamicCircle = `uniform sampler2D colorTexture; //颜色纹理uniform sampler2D depthTexture; //深度纹理varying vec2 v_textureCoordinates; //纹理坐标uniform vec4 u_scanCenterEC; //扫描中心uniform v.原创 2020-10-30 16:48:38 · 3697 阅读 · 5 评论 -
Cesium-通过Shader添加雨雪天气效果
前言实验效果代码自定义GLSL代码外部调用总结参考链接前言作为一个三维地球,在场景中来点雨雪效果,貌似可以增加一点真实感。Cesium 官网 Demo 中有天气系统的实例,用的是 Cesium 中的粒子系统做的。效果如下图所示,粒子系统的本质是向场景中添加了很多物体,用 BillBoard 技术展现。这种实现方式有一个麻烦的地方就是当视角变化(拉近、拉远、平移、旋转)时,粒子就会变化,甚至会消失,很影响体验。考虑用 shader 的方式直接模拟雨雪效果,恰好发现了 Catzpaw .原创 2020-10-30 15:06:06 · 3893 阅读 · 2 评论 -
Cesium-坐标系统详解
一图总结Cesium中几个重要的坐标对象世界坐标(Cartesian3:笛卡尔空间直角坐标系)经纬度坐标(Degrees)地理坐标(Cartographic)相互转换经纬度(Degrees)转换为世界坐标(Cartesian3)世界坐标(Cartesian3)转换为经纬度(Degrees)弧度(Cartographic)和经纬度(Degrees)屏幕坐标(Cartesian2)和世界坐标(Cartesian3)相互转换一图总结Cesium中几个重要的坐标对象世界坐标.原创 2020-10-12 11:54:31 · 1868 阅读 · 1 评论 -
Cesium1.74+Vue2.6.12环境搭建
环境介绍创建一个 Vue 项目项目代码结构介绍安装 Cesium 环境设置 webpack 配置项,使其支持 cesium编写 Vue 组件禁用 ESLint 代码检查npm run dev 运行项目环境介绍项目环境版本命令NodeJsv12.18.3node --versionNpmv6.14.6npm -vvue/cliv4.5.6vue --versionvuev2.6.12npm list vuewebpackv3.原创 2020-10-10 15:51:12 · 1561 阅读 · 2 评论 -
Cesium-加载3D飞机模型沿指定路线前进
最终效果相关知识点主要代码最终效果话不多说,先上效果相关知识点主要用到 CZML 相关知识CZML 是一种用来描述动态场景的JSON架构的语言,主要用于 Cesium 在浏览器中的展示。它可以用来描述点、线、布告板、模型以及其他的图元,同时定义他们是怎样随时间变化的。详情可看:CZML介绍我这里就不过多赘述了。主要代码var czml = [ { id: "document", name: "CZML Path", vers.原创 2020-09-30 11:14:02 · 3230 阅读 · 8 评论 -
Cesium-GeoJson数据的显示和隐藏
结果展示相关代码// -------------------------- 加载GeoJson数据 ------------------------------var fireLayer = null;var borderLayer = null;var roadLayer = null;viewer.dataSources.add(Cesium.GeoJsonDataSource.load('Assets/muli/muli_geojson/fire.geojson', { st原创 2020-09-27 12:15:09 · 2872 阅读 · 10 评论 -
Cesium-手拉手教你发布自己的离线三维地形图
最终效果展示软件准备下载高程数据和卫星影像数据下载高程数据下载卫星影像数据(瓦片)通过 cesiumlab 将高程数据转换为地形切片数据在 Cesium 框架中加载自己的地形数据和卫星瓦片数据最终效果展示软件准备LocaSpaceViewer 4下载地址:http://www.locaspace.cn/LSV.jsp说明:这个地图数据下载软件真的是蛮好用的,可以免费、方便的下载到卫星影像数据和 DEM 高程数据。作为同类型的软件还有 BigeMap,下载高程数据要收费.原创 2020-09-25 15:04:07 · 3355 阅读 · 10 评论 -
Cesium-鼠标拾取椭球、地形、模型坐标点详解
前言获取椭球体表面的经纬度坐标(方法一)获取椭球体表面的经纬度坐标(方法二)获取地形表面的经纬度高程坐标(方法一)获取地形表面的经纬度高程坐标(方法二)获取模型表面的经纬度高程坐标(此方法借鉴于官方示例)前言Cesium 中的三维坐标可分为三种情况:椭球表面、地形和模型。获取椭球体表面的经纬度坐标(方法一)var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAc.原创 2020-09-25 12:03:52 · 1346 阅读 · 0 评论