cesiumjs分屏, CesiumJS
更新:2022-11-21 19:50
本文目录一览:
Cesium指南-自定义vue组件
前面介绍了使用原生的 Widget ,其实现思想也是基于 MVVM ,只是用的 knockout.js 库,大伙都不怎么用这个 js 库,用起来也比较麻烦,这里使用大家主流的 vue 来实现一个放大缩小的组件。 这里跟其它创建组件的方式是一样的,但有一点需要注意的是,引入第三方组件时,如果是在 main.js 中引入的,这里还需要重新引入一次,是因为这里使用的是 createApp 来挂载组件的。 首先引入组件 cesium 中都是采用 appendChild 的方法来添加元素,所以在使用 vue 组件时,可以使用 createApp 来创建组件,并挂载到对应的元素上。如下所示:
Cesium初始化选项
基于cesium开发地图时用到的组件是:new Cesium.Viewer(container, options)
,container
为地图在页面中放置位置的id,options
是初始化设置的选项,包括是否显示homeButton,动画组件,时间轴以及底图等。具体开发过程中用到的选项可参考官方api。
常用的选项如下:
Cesium实战项目
本人所学GIS专业,毕业后一直从事Cesium相关的GIS开发工作,在业余时间将Ceium中常用的一些功能进行封装,形成能够高效复用的组件。实战项目中的多数功能均来源于实际项目,紧贴业务特性,实用性强,能够在最大程度上帮助个人、团队、公司、企业提高工作效率,节省开发成本。 Cesium实战项目目前共111个实例(后面会继续增加),项目基于Cesium1.7.2+VUE 实现,现有实例如下:
基础底图
- ArcGIS在线底图
- 谷歌在线底图
- 高德在线底图
- 天地图在线底图
- 本地单张图片
点状对象
- Cesium点聚合1
- Cesium点聚合2
- Billboard加载Gif图片
- Cesium 闪烁点
- Primitives加载大量图标点
- div文本点
- 动态效果点
- 图标点+文字(primitive方式)
单体化
- 倾斜模型分栋单体化 (基于geoserver)
- 倾斜模型分层单体化(基于geoserver)含教程
- 倾斜模型分户单体化(基于geoserver)含教程
编辑绘制
- 点线面绘制
- 点线面编辑
- 点线面绘制扩展
- 点线面编辑扩展
自定义信息框
- 多字段自适应信息框
- 气泡窗口样式1
- 气泡窗口样式2
标注标绘
- 自定义html标注图层
- 军事标绘
- 军事标绘编辑
- gltf 标绘绘制
- gltf 标绘编辑
- 行政区标注
- 体对象绘制编辑
轨迹漫游
- 轨迹回放
- 跟随视角漫游
- 第一人称漫游
- 上帝视角漫游
分析
- Cesium 2维点转3维点
- Cesium 空间线段等分
- 地表透明(地下模式)
- 通视分析
- 可视域分析
- 缓冲区分析
- 地表开挖(材质贴图)
- 地形开挖(材质贴图)
- 模型裁剪(Planes)
- 矿区岩层效果
- 双屏对比
- 二三维联动(基于openlayers)
场景
- 场景出图(导出图片)
- 自定义天空盒
- 位置信息状态栏控件
- 雨雪雾天气效果
- 限定视角范围
- 绘制反选遮罩
- 自定义空间背景
- 宏观数字地球
- 鹰眼地图(基于openlayers)
- 导航控件
- 云层
- Tooltip鼠标移入信息
- 书签管理
- 旋转的地球
- 绕点旋转
- 场景泛光
工具
- 场景测量工具
- 鼠标位置拾取工具
特效
- 动态线、流动线
- 流向动态线
- 动态水面效果
- 动态扩散圆
- 动态立体墙
- 粒子系统
- 圆形波纹效果
- 矢量白膜自定义shader(不改源码)
- 光晕线
- 动态立体墙(升级)
- 圆形、规则多边形动态围墙
- 围墙扩散动画
- 光柱椎体
- 数字工厂
- 六边形扩散扫描
- 圆形扩散扫描
- 模型热力图
- 动态传输线
- 扫描线
行业应用
- 雷达扫描效果
- 雷达追踪圆锥体
- 雷达追踪四棱锥体
- 雷达遮罩扫描
- 相控阵雷达范围
- 雷达放射波
- 卫星视椎体(四棱锥体)
- 视频贴图参数调整
- 视频融合
- 目标跟踪
- 动态目标检测
- 视频窗口(普通视频)
- 视频窗口(rtmp视频)
- 视频墙(含编辑)
- 动态水域
- 水闸放水效果
Echarts可视化支持
- Echarts 迁徙图1
- Echarts 迁徙图2
- Echarts 散点图
- Echarts 流入线
- Echarts 流出线
MapV可视化支持
- MapV 迁徙图
- MapV 大迁徙图
- MapV 热力图
- MapV 强边界图
其他
- 3dtiles高度调整
- 文字贴图
- 热力图(基于heatmap.js插件) 在线预览地址 在线预览地址 用户名cesium 密码cesium@sz
cesium 和 Three.js有什么区别,以及二者与WebGL 的关系
二者都是基于WebGL技术开发的js库 Threejs受众面比较广,是封装了webgl的一些底层用法,让初学者更容易上手;例如绘制一个立方体,使用webgl原生api可能要写50行代码,包括构建坐标点,顶点组织、着色器等信息;在threejs里面可能只要一句代码就可以构建(实际上也是调用webgl原生api),只是做了更大粒度的封装 Cesium受众面相对较小,是Gis相关的,也是基于WebGL开发的,它主要是三维地球相关的js库,可以展示二维地图服务(百度高德)、倾斜摄影模型;还可以在上面做一些三维分析,可以参考