Cesium
文章平均质量分 71
申小璇
努力学习的小伙汁
展开
-
cesium模型爆炸案例
ceisum模型爆炸主着色器代码原创 2022-09-14 21:42:51 · 2737 阅读 · 12 评论 -
Cesium 视频融合,边缘模糊
之前做视频投影或者叫视频融合,摄像头视角如果是俯视,就好比路口的监控,就可以直接投影在模型上,甚至拼接也好弄,可是摄像头角度是个问题,如果是平时的角度,投影在地上就会完全变形于是乎就想到了通过分析视锥把视频塞在视线前面,当然这种方法很简陋????这就只需要知道监控的位置,姿态,然后把相机设置成那些值便可以了,但是这样效果不好,如果能加上渐变虚化或者边界模糊的话,效果就会好很多。先说说怎么将视频加进来把,写到这,突然想到为什么不直接用div加载视频呢。。。。待会试试这里就直接简单粗暴用pr原创 2021-02-04 14:27:21 · 6920 阅读 · 10 评论 -
Cesium人工模型图层或分楼层
之前用超图的API所有关于图层可以直接调用s3m图层,关于图层管理和信息查询都一条龙包了,现在用原生的Cesium开发,才发现模型的切图层、转格式、发布、加载、处理等等是一堆麻烦事,刚好想弄一个3dtiles的图层管理出了,思路就是获取所有图层的feature,然后我以为事情就这样结束了。结果一个三层楼的模型里面就一百多个feature,一个个去处理肯定不行,那么有没有办法往里面加属性字段呢?打开cesiumlab,在进行模型转换的时候可以往里面添加属性字段,这个在cesiumlab的官网文档有说明,我原创 2021-01-26 17:24:56 · 1971 阅读 · 2 评论 -
Cesium(九) 角度量算工具 (一)
之前在用超图的进行现在开发,现在用原生的Cesium之后发现量算工具还是个小麻烦。。。关于距离,面积,高度网上都有例子了,但是现在有个角度测量的需求,就自己写了一下。这个是在正北方向做一条辅助线,然后求与正北方向的夹角,过几天做自己画两条线夹角的。———tool工具类:———— graphic.js效果图:const radiansPerDegree = Math.PI / 180.0;//角度转化为弧度(rad) const degreesPerRadian = 180.0 / Math.原创 2021-01-07 19:10:36 · 2659 阅读 · 4 评论 -
Cesium 关于3dtileset纠偏
关于位置纠偏,之前尝试了很多办法,有个很复杂的方法可以修改高度,然后发现3dtileset其实就是primitive…为什么不试试矩阵呢?Cesium.Cartesian3.fromDegrees()------ 将经纬度坐标转化成世界坐标Cesium.Transforms.eastNorthUpToFixedFrame()--------- 计算一个从4x4变换矩阵到从以提供的原点为中心的东北向上轴(东北天坐标系)的参考框架到提供的椭球的固定参考框架。Cesium.Matrix4.multiplyB原创 2020-12-24 15:48:07 · 1225 阅读 · 0 评论 -
Cesium笔记----关于viewer的配置及常用东西
关于viewervar viewer = new Cesium.Viewer('cesiumContainer', { animation: false, //左下角的动画仪表盘 baseLayerPicker: false, //右上角的图层选择按钮 geocoder: false, //搜索框 homeButton: false, //home按钮 sceneModePicker: false, //模式切换按钮 timeline原创 2020-12-24 08:49:26 · 3844 阅读 · 5 评论 -
Cesium(八)小地图与实时显示位置
之前搜罗一堆资料,发现有个老哥用两个viewer实现了类似小地图的功能,但是我尝试了一下发现性能方面好像不太友好。而且里面是个球体,就算可以隐藏地球,但是一切都变得复杂了,而我只需要一个二维地图就行了。思路1.创建小地图2.小地图上绘制点3.根据坐标修改点的位置4.如何监听坐标的改变创建小地图我这里使用的mapboxgl,我很喜欢里面的自定义地图样式,用别的应该可以可以的,比如leaflet,但是我就没去试了。 mapboxgl.accessToken = '.原创 2020-12-02 09:33:27 · 1851 阅读 · 0 评论 -
Cesium(七)点击对象播放视频
这个功能还是很实用的,不管是当作静态的广告牌播放视频,还是连接物联网来播放视频流都可以用。html我这里用的是mp4的视频,要接视频流的话下次再发。<video id="video" style="display:none" controls loop autoplay> <source src="/static/video/zm.mp4" type="video/mp4"></video>这里的实现思路是用墙做底,把视频作为材质本来是想调用方法来控制原创 2020-11-26 14:43:15 · 1465 阅读 · 5 评论 -
Cesium(六)图层弹窗信息展示
这个例子借鉴了超图官方的例子,加入一些自己的理解,那就在这里写详细一点。思路先写出html,加上取消的按键创建弹窗的方法调用2的方法html<div id="bubble" class="bubble" v-show="showBuble"> <div id="tools" style="text-align: right"> <span style=" padding: 5px; position: absolute; left: 1原创 2020-11-26 14:21:56 · 2661 阅读 · 1 评论 -
Cesium(五)键盘控制镜头漫游
这个东西网上很多博客都写了,我这也不做过多叙说,写了一下我的方法,本来想讲镜头移动做成csgo那样,直接用mouse_move来控制镜头移动,可惜效果不太好,所以还是放弃了。1.禁用镜头移动旋转等2.设置移动标志3.添加鼠标监听4.添加键盘监听5.定义时间轴// 自由镜头or漫游 freeden(){ var ellipsoid = viewer.scene.globe.ellipsoid; scene.screenSpaceCameraControlle原创 2020-11-14 11:45:15 · 1834 阅读 · 0 评论 -
Cesium(四)自定义飞行站点飞行
看了超图的例子,飞行路线是通过导入kml文件来实现的,这也适用于单个场景,但是我搭建的是一个平台,用的vue的组件化开发,就想做一能在各个场景都能用的飞行工具,让用户自己定义几个站点,来实现飞行功能。思路1.渲染飞行的工具栏2.添加和删除站点功能3.飞行路线的显示与隐藏4.开始、暂停、停止功能飞行工具栏<div id='toolbar' class="fly" v-if="isShow==='3'" position="top-left"> <a type="原创 2020-11-14 11:26:32 · 1746 阅读 · 4 评论 -
Cesium(补充)三人称漫游模拟FPS游戏
前面有两篇文章关于控制小车来实现漫游的 Cesium开发实践(一) ,但是我觉得还是没那味,想研究一下能不能实现类似FPS游戏那样的感觉。这就是实现后的效果,代码没有太多改动,主要是关于GLFT格式的模型引入问题。目前我仅用过GLTF格式和GLB格式,两种格式都可以实现动画,只是这两个格式的文件不好找。我给大家推荐两个。GLTF:https://sketchfab.com/feedGLB:https://www.kenney.nl/思路刚开始是使用了两个模型,一个带动画一个静态,然后监听键盘原创 2020-11-11 10:52:48 · 1923 阅读 · 7 评论 -
Cesium(三)图层控制组件结合vue开发
前言这篇文章给大家介绍一下我是如何实现三维场景的图层控制的,并使用树组件来显示,方便操作。思路1.创建树组件2.遍历图层信息3.控制显示隐藏创建树组件我用的是antd的组件库,具体的使用方法大家可以参照ant—design官网的文档<template> <div id="alllayers" position="top-left" style="display:block;overflow:auto" v-if="isShow==='1'"> &原创 2020-11-07 10:25:15 · 3120 阅读 · 3 评论 -
Cesium(二)通过Entities添加可控制模型
上一篇文章结尾说到能通过entities类来创建小车模型并实现键盘控制,这篇就来演示一下。关于上一篇文章 Cesium开发实践(一)控制小车并视角跟随 大家也可以看看。效果图区别上一篇创建模型的方法:let carPrimitive = scene.primitives.add(Cesium.Model.fromGltf({ id:'mycar', url:"你的URL地址", modelMatri原创 2020-11-07 09:46:14 · 3036 阅读 · 0 评论 -
Cesium(一)控制小车并视角跟随
本人是一个前端实习生,最近公司业务需要所有学习了cesium,想记录一下。如果觉得还可以就点个赞,或者有啥要改进的也可以提出来交流一下。效果图实现思路1、添加模型2、监听键盘按键3、计算坐标4、设置相机位置和角度5、移动小车初始化因为我是用的vue结合的sesium开发,里面一下其他功能就不在这里细说,是通过点击屏幕,确定小车坐标来生成的小车。 let newStr =[parseFloat(str[0].substring(2)),parseFloat(str[1].sub原创 2020-11-06 09:02:33 · 5856 阅读 · 6 评论