- 博客(208)
- 资源 (5)
- 收藏
- 关注
RSS订阅
原创 关于Three.js实现智慧城市我实现的一些特效
1、OD线（着色器实现）2、透明墙3、地面扩散粒子4、地震波5、发光扩散半球6、发光旋转四棱锥7、流动线8、上升粒子9、建筑线框10、圆扩散11、建筑物纹理流动12、建筑流动着色器版本13、粒子地面...
2020-07-24 18:05:19
16927
37
原创 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
5812
原创 GEngine一个基于WebGPU的渲染引擎
2019年时候就有写一个渲染引擎想法，一直到现在才真正意义上算给实现了当初的想法，写了好几个月了和小伙伴这才有个初版（虽然里面还有一堆bug哈，没时间改啊）。说在前面GEngine借鉴了其他渲染引擎思路与代码（毕竟要站在巨人肩膀上，别在那说你就是抄别人代码，我就抄了咋了气死你，有本事你也抄，不接受反驳），你要让我说GEngine的优势是啥？
2023-06-09 16:38:49
1551
原创 关于Tween的chain方法由于浅拷贝出现不能启用一个tween的bug
昨天由于版本升级把tween18.6.0升级到18.6.4结果封装的动画无法使用，究其原因是为了浅拷贝的问题出现问题的代码示例： this.tween = new TWEEN.Tween(this.startParms).to(this.targetParms, options.duartion); this.tween.easing(TWEEN.Easing.Linear.None); this.tweenback =
2020-11-26 10:54:45
1199
原创 如何保证切线空间矩阵正确
针对复杂模型时，切线往往是经过许多顶点计算的，这样就可以得到一个平均值来获得平滑的结果，这样会造成一个问题，那就是T、B、N三个向量可能不会相互垂直了，也就是TBN矩阵不是正交的了。 针对这一问题，我们可以使用格拉姆施密特方法来重新正交化TBN矩阵，在顶点着色器中这么做：vec3 T = normalize(vec3(model * vec4(aTangent, 0.0)));vec3 N = normalize(vec3(model * vec4(aNormal, 0.0)));// 使用N正交
2020-10-08 15:42:02
697
原创 Three.js在不改变原有材质的基础之上，增加额外的着色器逻辑
有时候在做特效的时候，我们想在原有着色器渲染之上来增加特效。不想使用ShaderMaterail材质类，如果使用该类书写着色器逻辑，会改变原有的渲染效果。原理利用着色器是字符串的本质，将原有的main函数提取，替换掉，重新定义main函数，将替换掉的main函数在新的main函数中执行。1、替换之前2、替换之后（看末尾逻辑）一、主要代码封装/* * @Author: gjw * @Date: 2020-07-30 16:09:32 * @LastEditTime: 2020-07-30.
2020-08-03 20:06:37
1132
原创 TypeScript中集成Tween.js踩坑
首选，采用的是webpack的架构，在ts中使用tween.js，非常麻烦，配置教程少的可怜，浪费了我一个下午，在这里记录一下，往有缘人别踩坑。tween.js版本为18.6.0一、安装npm i @tweenjs/tween.jsNote：必须这么安装二、更改配置原配置：更改为：Note:将’='改为default三、引用import * as TWEEN from '@tweenjs/tween.js';Note：调用tween.start(undefined)或者TWEEN.
2020-07-28 20:47:40
2198
原创 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
6599
22
原创 Cesium对3dtile单个feature进行特效处理
cesium中对3dtile做特效处理的时候，目前只能对所有3dtile处理或者小区域内的3dtile（例如3dtile挖洞，淹没分析等）进行处理，本身上还是对drawcommand进行着色器的部分的改动。通常所作我们只能对选中的featrue进行更改颜色，无法做到更大限度去更改当前选中的feature，本文介绍一种方法对单个feature进行特效处理。
2020-07-02 18:35:52
5843
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
1080
原创 关于three.js的WebGLRender源码解析（待补充）
最近这半年一直在整毕业的事情，这个毕业真的支配了我三年，说实在我这个硕士确实有点水，我本身测绘工程出身的，研究生选的三维可视化方向，毕业论文却写的遥感方向，找的工作又是三维开发，兜兜转转又回到了原点，这一切应该就是所谓的缘分，最近看了一些three.js的源码，与cesium的源码的相比three的源码通俗易懂，前提你对webgl熟悉，准备用业余时间写一套基于webgl底层的自己的三维引擎。先写一点关于three的WebGLRender基本渲染东西后续的再次补充。一、两个重要的渲染函数1、renderB
2020-06-18 20:36:19
664
1
原创 关于WebGL报错l-value required (can't modify a uniform "color")
报错原因：uniform只读,不可修改解决方式，可以声明vec3、float进行替代赋值
2020-04-20 19:02:35
936
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
492
原创 cesium源码研究关于ShaderSource的replaceMain方法巧妙用处
在做底层扩展开发的时候，有时候我们想从外部传入一段shader代码，那该如何将该段shader代码加入main函数中呢？最笨的方法就是利用正则表达去截取字符串，然后加上需要添加的shader代码，最后将所有的字符串拼装到一起。下面利用cesiun自带的功能去处理这个问题。1、如何使用第一步shader = ShaderSource.replaceMain(shader, 'czm_lig...
2020-02-20 20:03:34
1078
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
1264
原创 cesium源码研究之uniformMap的自动更新机制
在利用drawcommand绘制图形的时候，会通过uniformMap传递变量到着色器，如果用到异步加载图片生成纹理再传递给uniformMap,这个时候需要需要注意return的方式。应先判断需要传值的纹理是否为null或者undefined,然后根据判断结果是return 所传的纹理，还是context的默认纹理。即使此时Resource异步加载图片生成纹理没有完成，此时应传入context的...
2019-11-21 18:45:58
2057
2
原创 推荐关于python与开源GIS的书很不错良心著作！！！
封面是这样的作者简历：卜坤（1980-），男，山东省日照人，博士毕业于2008年，高级工程师，研究方向：地图学与地理信息系统，工作单位：中国科学院东北地理与农业生态研究所（长春）。工作内容涉及开源GIS应用、WebGIS开发、地理信息科学数据共享。多年来致力于推广开源GIS应用，推广在国内的应用。共发表学术论文10余篇，获得软件知识产权授权10余项。近几年工作重点包括开源WebGIS系统的设...
2019-11-21 17:54:08
3126
原创 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
5031
3
原创 Cesium之天空盒对应方位
下文讲解一下关于Cesium的天空盒具体方位。天空盒对应图一个立方体展开图,相当于一个站在negz的位置，背对电脑屏幕，对应关系如下negz→downposx→rightnegx→leftposy→backposz→upnegy→front分享一个天空盒网址www.custommapmakers.org/skyboxes.php网址下载的图片需要进行适当的旋转，旋转关系如...
2019-10-29 20:52:43
5051
5
翻译 倾斜摄影测量单体化思路
摘自:聂赞,文琳,黄山,李凤华.倾斜摄影的单体化建模研究[J].地理空间信息,2019,17(03):113-114+122+11.倾斜摄影模型单体化主要包括矢量切割单体化、矢量叠加单体化和模型重建单体化 3 种方式。思路一矢量切割单体化是一种最直观的思路，即用建筑物、道路、树木等对应的矢量面，对倾斜摄影模型进行切割，从物理上把连续的三角面片网分割开，实现单体化。该方法可从物理意义上把连片...
2019-10-25 17:37:17
3150
原创 关于postgis创建表指定geom类型的问题
今天在群里看到一位同学,在问为啥创建表格空间字段类型为geometry,而查询出来的却是point类型?以至于在udig中不能配色,下面说一下原因1 udig中无法配色原因所在?由于在表中geometry的类型选择为Geometry,没有指定特定的空间类型(点 线 面等类型),这样造成该表中可以存储点 线 面等空间要素,由于要素混杂为geometry类型,自然无法在udi...
2019-10-25 11:29:04
1831
原创 OpenLayers中的图片信息跨域你了解么？
或许你都没有听说过图片信息跨域，不是都是请求跨域？图片跨域几个意思？？？当你加载第三方的切片时候想通过点击获取该点击处图层，这时候就会给你报一个图片信息跨域错误，错误如下图：错误这样的：用了啥方法报了该错误？？使用了以下该方法 map.on('pointermove', function (evt) { if (evt.dragging) { ...
2019-08-28 20:20:49
1381
原创 Cesium（十三）封装路径漫游类
主要封装漫游类，不涉及绘制路线，绘制路线需要另外封装，以后会贴出代码，下面给出封装的类，以及调用示例：一、调用示例1、初始化 let roaming=new Roaming(this.viewer,{ 'modeluri':'model3D/CesiumAir/CesiumAir.gltf', 'time':360, 'Lines':Lines, 'is...
2019-08-21 17:53:51
6432
7
原创 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
6570
原创 Cesium(十二)webpack+vue+cesium加载gltf(不推荐)
最近一直在用webpack+vue+cesium，有时感觉很方便，但是有些东西确实感觉很恶心。对于我这么一个webpack+vue用的不怎么熟练的人，报错总是很头疼。这还不是令人无语的。最令人无语的是它不报错，也没有预期的效果。前天遇到加载gltf，结果就是报错json语法错误，查遍全网一点头绪。最终有幸在一篇文章找到思路，下面介绍在webpack+vue如何用gltf一、配置webpack...
2019-08-15 19:42:47
1907
2
原创 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
3901
5
原创 WebGL关于着色器传值的几种方式总结
最近两周都在看WebGL，至于为什么要看WebGL？？?我是想看Cesium源码，发现要想看懂Cesium的源码。需要WebGL知识储备，因为Cesium是基于WebGL开发的三维api封装，但是如果想完全弄懂Cesium,仅靠学习WebGL是无法做到的，需要了解OpenGL、计算机图形学、数字地球等。关于webgis发展认为未来三维GIS应该比较火，二维方面的发展已经相当成熟了，虽然三维现在发...
2019-07-31 20:36:13
986
1
原创 分享一个根据csv表格有地名和权重值的时候如何通过python生成百度热力图所要求的数据格式
import pandas as pdimport jsonimport csvfrom urllib.request import urlopen, quoteimport requests#获取城市的地理编码def getlnglat(address): url = 'http://api.map.baidu.com/geocoder/v2/' output =...
2019-07-31 14:52:33
407
转载 头疼又有趣的坐标系
原文地址：https://mp.csdn.net/mdeditor/97896549作者：大地测量从第一次上地图学的课开始，对GIS最基本的地图坐标系统就很迷。也难怪，我那时候并不是GIS专业的学生，仅仅是一门开卷考试的专业选修课，就没怎么在意。等我真正接触到了各种空间数据产品，我才知道万里长征第一步就是：处理坐标系统。想必多多少少都会听说过几个名词，也许悠远，也许模糊。高斯克吕格，北京5...
2019-07-31 11:00:18
713
原创 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
2763
原创 Openlayer加载切片地图改变地图样式
数据是GIS的灵魂，没有数据GIS一无用处。在我国对地理数据管控极为严格，购买数据也是及其昂贵的，在webgis开发的过程种，为了节省成本一般选择加载第三方的底图，力图天地图、谷歌、OSM等。但是这些底图已经渲染成样式了。我们如何在改变这些切片的样式。接下来讲一下实现的原理及其过程：一、原理及其实现过程1、原理逐像素获取切片的rgba值进行赋值，从而改变切片底图的样式。2、如何实现在...
2019-07-18 20:18:24
1788
1
原创 Cesium关于ellipse中的semiMinorAxis和semiMajorAxis使用回调属性&&Vue中使用图片
Cesium中使用圆的扩散，可以采用回调函数来进行绘制，这样可以可以获得动态扩散的效果。但是做的过程中遇到一个长半轴小于短半轴的报错，在下面给出报错以及解决方案报错图片：错误代码：错误原因：semiMinorAxis和semiMajorAxis使用同一个回调函数，并且semiMajorAxis属性要早于semiMinorAxis属性，所以造成长半轴小于短半轴。解决方案：semi...
2019-07-15 21:16:02
5092
1
原创 Cesium（九）鹰眼功能
Cesium鹰眼实现的功能，有两种方式：一种声明两个viewer，另一种就是通过Leaflet。这里我们采用第二种方式，用到一位道友自定义鹰眼插件，这里我们稍微改进一下（ES6方式），下面我们来介绍一下如何实现一、效果图...
2019-07-11 19:15:45
4407
1
原创 OpenLayer使用css3滤镜效果改变切片地图的样式
css3有一个属性很好玩，filter(滤镜属性)，可以做一些图片的滤镜和ps相同的效果，但是还和ps效果有些差距，如何将filter滤镜属性用到OpenLayer中？下面讲一下如何让通过滤镜的效果来改变地图底图切片样式。一、效果图1、滤镜前2、滤镜后看了上面是不是感觉好神奇，我们竟然可以改变切片地图样式。二、css3的filter属性值1 grayscale灰度2 s...
2019-07-09 15:26:20
3238
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
8525
2
原创 Openlayer3专题地图另一种表述
在webgis中如果遇到这样一种需求：同时展现一点的某一要素某一属性的大小和属于哪一类，这里面涉及两个属性值的表述，该如何去直观的表述出来，下面介绍一种表述方式。效果图：一、原理将要素的符号大小通过属性A的值表现出来，将要素填充的颜色按着属性B归类（下面代码为了方便只通过一个属性来控制）。二、ol.style.RegularShape 类介绍这里面几个中的参数fill:就是填充颜...
2019-06-27 21:39:43
696
2
原创 Cesium（八）动态拖动entity（解决拖动闪烁问题）
在图上加载的Entity，有时想要能够拖动Entity，下面给出实现的代码：效果：demo：在这里插入代码片
2019-06-25 17:47:07
8441
16
原创 Cesium（七）源码编译&&端口号修改
为什么要编译源码？昨天我突然发现自己经过编译得Cesium要比官网发行版本，多了一部分内容（demo多了），这就是我为什么要编译得原因，个人目前得水平还不达不到看源码得水平，下面介绍Cesium源码编译得过程：一、安装node环境1、node下载官网地址：https://nodejs.org/en/download/打开网址如下图这里选择得LTS（稳定版本）选择Windows Inst...
2019-06-21 21:35:26
1788
1
原创 Cesium(六)淹没分析（polygon版本）
淹没分析是三维分析常用的的其中一种分析，本文借鉴已有资料通过在地形图上动态拉伸polygon达到淹没分析的效果，下面给出淹没分析的主要代码：效果：一、容器创建&添加地形服务、 var currentHeight = null, maxValue=null; //创建地形图层 var rectangle = new Cesium.Re...
2019-06-16 20:44:34
8567
3
原创 Cesium（五）剖面分析（仿火星科技）
剖面分析是三维分析的一种，仅在地形图状态下方可使用。作为一个测绘人员剖面分析，大多在地形的状态下高程变化，本文采用Ceisum和echart结合，下面讲解剖面分析的实现过程。效果图：一、实现原理1、根据点击事件绘制剖面线段（贴地形），并获取start、end两点，为线段空间插值做数据准备，采用viewer.scene.pickPosition(click.position);2、线段插...
2019-06-13 21:11:20
8651
11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人