Ceisum
hpugisers
每天进步一点点,美滋滋
展开
-
Cesium绘制一个旋转发光的四棱锥
直接上代码吧/* * @Author: gjw * @Date: 2020-05-23 13:58:53 * @LastEditTime: 2020-06-30 19:28:04 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \dtglobesdk\Source\DTSDKTests\DTPyramid\TetrahedronGeometry .js */i原创 2020-07-11 16:47:09 · 6785 阅读 · 22 评论 -
Cesium对3dtile单个feature进行特效处理
cesium中对3dtile做特效处理的时候,目前只能对所有3dtile处理或者小区域内的3dtile(例如3dtile挖洞,淹没分析等)进行处理,本身上还是对drawcommand进行着色器的部分的改动。通常所作我们只能对选中的featrue进行更改颜色,无法做到更大限度去更改当前选中的feature,本文介绍一种方法对单个feature进行特效处理。原创 2020-07-02 18:35:52 · 6059 阅读 · 6 评论 -
关于对数深度的一些知识
这些知识忘了在哪粘贴的,希望原作者看到可以留言OpenGL渲染时,顶点着色器输出的w值为是W = -Z;而深度值是 D = Z * ( n + f ) / ( n - f ) + 2.0 * f * n / (n-f)顶点着色器中的值通过除以w转换为归一化的设备坐标,因此深度值变成了:Dndc=D / W = D / -Z = -D / Z = (f+n)/(f-n) + 2.0 *f*n/(f-n) / Z;让 a = 2.0 *f*n/(f-n) ; b = (f+翻译 2020-06-18 20:41:23 · 1148 阅读 · 0 评论 -
关于WebGL报错l-value required (can't modify a uniform "color")
报错原因:uniform只读,不可修改解决方式,可以声明vec3、float进行替代赋值原创 2020-04-20 19:02:35 · 1052 阅读 · 1 评论 -
关于Cesium拖json文件上传的插件
代码:/* * @Author: your name * @Date: 2020-01-09 10:13:45 * @LastEditTime : 2020-01-14 10:31:46 * @LastEditors : Please set LastEditors * @Description: In User Settings Edit * @FilePath: \cesium...原创 2020-03-12 20:48:39 · 524 阅读 · 0 评论 -
cesium源码研究关于ShaderSource的replaceMain方法巧妙用处
在做底层扩展开发的时候,有时候我们想从外部传入一段shader代码,那该如何将该段shader代码加入main函数中呢?最笨的方法就是利用正则表达去截取字符串,然后加上需要添加的shader代码,最后将所有的字符串拼装到一起。下面利用cesiun自带的功能去处理这个问题。1、如何使用第一步shader = ShaderSource.replaceMain(shader, 'czm_lig...原创 2020-02-20 20:03:34 · 1117 阅读 · 1 评论 -
cesium源码研究之VertexArray(VAO对象)生成的两种方式
1、方式(利用内置primitive图元) var polygon = new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray(degreesArray) ...原创 2019-11-21 19:15:08 · 1366 阅读 · 0 评论 -
cesium源码研究之uniformMap的自动更新机制
在利用drawcommand绘制图形的时候,会通过uniformMap传递变量到着色器,如果用到异步加载图片生成纹理再传递给uniformMap,这个时候需要需要注意return的方式。应先判断需要传值的纹理是否为null或者undefined,然后根据判断结果是return 所传的纹理,还是context的默认纹理。即使此时Resource异步加载图片生成纹理没有完成,此时应传入context的...原创 2019-11-21 18:45:58 · 2232 阅读 · 2 评论 -
Cesium分屏对比实现
不向现实低头,不服输,永不放弃学习 送给每一位战斗的工程师,这几天写了一个简单的分屏效果,在这记录一下,希望能帮到有缘人,原理很简单就是两个Viewer,话不多说直接上代码/* * @Author: your name * @Date: 2019-11-07 09:00:17 * @LastEditTime: 2019-11-07 20:22:04 * @LastEditors: ...原创 2019-11-07 20:27:35 · 5164 阅读 · 3 评论 -
Cesium之天空盒对应方位
下文讲解一下关于Cesium的天空盒具体方位。天空盒对应图一个立方体展开图,相当于一个站在negz的位置,背对电脑屏幕,对应关系如下negz→downposx→rightnegx→leftposy→backposz→upnegy→front分享一个天空盒网址www.custommapmakers.org/skyboxes.php网址下载的图片需要进行适当的旋转,旋转关系如...原创 2019-10-29 20:52:43 · 5245 阅读 · 5 评论 -
倾斜摄影测量单体化思路
摘自:聂赞,文琳,黄山,李凤华.倾斜摄影的单体化建模研究[J].地理空间信息,2019,17(03):113-114+122+11.倾斜摄影模型单体化主要包括矢量切割单体化、矢量叠加单体化和模型重建单体化 3 种方式。思路一矢量切割单体化是一种最直观的思路,即用建筑物、道路、树木等对应的矢量面,对倾斜摄影模型进行切割,从物理上把连续的三角面片网分割开,实现单体化。该方法可从物理意义上把连片...翻译 2019-10-25 17:37:17 · 3443 阅读 · 0 评论 -
Cesium(十三)封装路径漫游类
主要封装漫游类,不涉及绘制路线,绘制路线需要另外封装,以后会贴出代码,下面给出封装的类,以及调用示例:一、调用示例1、初始化 let roaming=new Roaming(this.viewer,{ 'modeluri':'model3D/CesiumAir/CesiumAir.gltf', 'time':360, 'Lines':Lines, 'is...原创 2019-08-21 17:53:51 · 6521 阅读 · 7 评论 -
Cesium(十一)计算近似当前层级(2D地图概念)&&计算当前Extent
下面分享两个计算层级和Extent的代码,废话不多说直接上代码:一、计算当前Extent(前提一定要有tile图层)viewer.clock.onTick.addEventListener(function () { west = south = 999; east = north = -999;// 获取要渲染切片封装对象,一个切片封装对象有多个切片 var t...原创 2019-08-14 15:15:52 · 4192 阅读 · 5 评论 -
webpack+vue+cesium加载glTF或者glb(推荐)
一、webpack.dev.conf配置new CopyWebpackPlugin([ { from: path.join('./static', 'model'), to: 'model3D'}])二、目录树结构三、调用实例let entity = this.viewer.entities.add({ // 位置 position: Lines[0], ...原创 2019-08-18 18:23:31 · 6705 阅读 · 0 评论 -
Cesium(二)加载Cesium3DTileset&Cesium3DTileFeature模型高亮显示&实时显示经纬度以及高度
下面是三个示例,分别是加载Cesium3DTileset、点击模型,使得模型高亮、实时显示经纬度,所有代码均借鉴网上已有的代码,这里只做演示。效果gif一、加载Cesium3DTileset//加载三维模型灰模var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: "http://...原创 2019-05-29 20:35:46 · 19921 阅读 · 11 评论 -
Cesium(三)在Terrain动态绘制线和面
在绘制线和面在Ceisum中GitHub中以有轮子(drawhelper),该轮子仅能绘制在2D层次,在Terrain上则不能绘制。在Terrain上绘制线和面,是进行淹没分析和剖面分析的第一步,在这里在展示如何在Terrain上绘制线和面(主要来源于官方demo)效果:demo示例:<!DOCTYPE html><html><head> ...原创 2019-06-02 15:08:04 · 3126 阅读 · 9 评论 -
Cesium(五)剖面分析(仿火星科技)
剖面分析是三维分析的一种,仅在地形图状态下方可使用。作为一个测绘人员剖面分析,大多在地形的状态下高程变化,本文采用Ceisum和echart结合,下面讲解剖面分析的实现过程。效果图:一、实现原理1、根据点击事件绘制剖面线段(贴地形),并获取start、end两点,为线段空间插值做数据准备,采用viewer.scene.pickPosition(click.position);2、线段插...原创 2019-06-13 21:11:20 · 9142 阅读 · 12 评论 -
Cesium(四)常用代码总结
1、阴影效果viewer.shadows = true;2、取消左键双击事件viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);3、定位飞到某处viewer.scene.camera.flyTo({ destinatio...原创 2019-06-10 22:04:32 · 5966 阅读 · 0 评论 -
Cesium(六)淹没分析(polygon版本)
淹没分析是三维分析常用的的其中一种分析,本文借鉴已有资料通过在地形图上动态拉伸polygon达到淹没分析的效果,下面给出淹没分析的主要代码:效果:一、容器创建&添加地形服务、 var currentHeight = null, maxValue=null; //创建地形图层 var rectangle = new Cesium.Re...原创 2019-06-16 20:44:34 · 8742 阅读 · 3 评论 -
Cesium(七)源码编译&&端口号修改
为什么要编译源码?昨天我突然发现自己经过编译得Cesium要比官网发行版本,多了一部分内容(demo多了),这就是我为什么要编译得原因,个人目前得水平还不达不到看源码得水平,下面介绍Cesium源码编译得过程:一、安装node环境1、node下载官网地址:https://nodejs.org/en/download/打开网址如下图这里选择得LTS(稳定版本)选择Windows Inst...原创 2019-06-21 21:35:26 · 1852 阅读 · 1 评论 -
Cesium(八)动态拖动entity(解决拖动闪烁问题)
在图上加载的Entity,有时想要能够拖动Entity,下面给出实现的代码:效果:demo:在这里插入代码片原创 2019-06-25 17:47:07 · 8717 阅读 · 16 评论 -
Cesium小记之加载暗黑色地图&&蓝色透明模型
一效果图``二、demoimport Vue from 'vue'import App from './App'import router from './router'import Cesium from 'cesium/Cesium'import MeasureTool from '../src/js/MeasureTools'Vue.config.productionTip ...原创 2019-07-07 22:05:13 · 8781 阅读 · 2 评论 -
Cesium关于ellipse中的semiMinorAxis和semiMajorAxis使用回调属性&&Vue中使用图片
Cesium中使用圆的扩散,可以采用回调函数来进行绘制,这样可以可以获得动态扩散的效果。但是做的过程中遇到一个长半轴小于短半轴的报错,在下面给出报错以及解决方案报错图片:错误代码:错误原因:semiMinorAxis和semiMajorAxis使用同一个回调函数,并且semiMajorAxis属性要早于semiMinorAxis属性,所以造成长半轴小于短半轴。解决方案:semi...原创 2019-07-15 21:16:02 · 5336 阅读 · 1 评论 -
Cesium(九)鹰眼功能
Cesium鹰眼实现的功能,有两种方式:一种声明两个viewer,另一种就是通过Leaflet。这里我们采用第二种方式,用到一位道友自定义鹰眼插件,这里我们稍微改进一下(ES6方式),下面我们来介绍一下如何实现一、效果图...原创 2019-07-11 19:15:45 · 4598 阅读 · 1 评论 -
Cesium(十)通过加载geoserver发布的数据进行渲染水面(Primitive方式)
本文主要是通过加载geoserver的geojson数据来获取Primitive的坐标来渲染水面,我将效果封装一个类,方面调用一、效果二、封装类import Cesium from 'cesium/Cesium'export default class PrimitiveWaterFace { constructor (viewer, options) { this.vie...原创 2019-07-24 18:04:55 · 2838 阅读 · 0 评论 -
Cesium&&helloCesium(一)
在今后的一段时间准备写一系列关于Ceisum的学习教程,Ceisum是一款开源的前端三维api,近几年比较火。在这里首先介绍以下如何学习一个新的地图api,只要是地图一类的api有一个特点需要一个容器,例如OL或者leaflet等都有一个map容器map中的构造参数,也就是整个地图框架的核心,其他子类都是为地图框架服务,这样只通过学习map就能快速掌握该地图api的大概框架,并且抓住重点。在Ceisum中容器就是viewer,下面通过helloCeisum来介绍Viewer容器原创 2019-04-30 21:14:59 · 839 阅读 · 0 评论