Caven Chen
2 years ago
6 changed files with 258 additions and 9 deletions
+ 4
- 4
examples/effect/black_and_white.html
View File
| crs:'WGS84' | crs:'WGS84' | ||||
| }) | }) | ||||
| viewer.addBaseLayer(baseLayer) | viewer.addBaseLayer(baseLayer) | ||||
| effect = new DC.Effect(viewer) | |||||
| effect.blackAndWhite.enable= true | |||||
| effect.blackAndWhite.gradations=4 | |||||
| effect = new DC.Effect(viewer) | |||||
| effect.blackAndWhite.enable= true | |||||
| effect.blackAndWhite.gradations=4 | |||||
| addGuiController() // add controller | addGuiController() // add controller | ||||
| } | } | ||||
| effect.blackAndWhite.gradations=value | effect.blackAndWhite.gradations=value | ||||
| }) | }) | ||||
| } | } | ||||
| DC.ready({ | |||||
| DC.ready({ | |||||
| baseUrl:'../libs/dc-sdk/resources/' | baseUrl:'../libs/dc-sdk/resources/' | ||||
| }).then(initViewer) | }).then(initViewer) | ||||
| </script> | </script> |
+ 122
- 0
examples/effect/bounds_clip.html
View File
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||||
| <title>dc-example</title> | |||||
| <script src='/libs/dc-sdk/dc.min.js'></script> | |||||
| <script src="../dat.gui.min.js"></script> | |||||
| <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'> | |||||
| <link href='../index.css' type='text/css' rel='stylesheet'> | |||||
| </head> | |||||
| <body> | |||||
| <div id="viewer-container" class="viewer-container" style=""></div> | |||||
| <script> | |||||
| let viewer = undefined | |||||
| let effect = undefined | |||||
| function initViewer() { | |||||
| viewer = new DC.Viewer('viewer-container',{ | |||||
| orderIndependentTranslucency:false, | |||||
| contextOptions:{ | |||||
| webgl:{ | |||||
| alpha:true | |||||
| } | |||||
| } | |||||
| }).setOptions({ | |||||
| showMoon: false, | |||||
| showSun: false, | |||||
| skyBox: { | |||||
| show:false | |||||
| }, | |||||
| showAtmosphere:false, | |||||
| globe: { | |||||
| showGroundAtmosphere:false, | |||||
| depthTestAgainstTerrain: true // 当前示例中的Shader渲染需要开启深度检测，并在无地形时效果好些。 | |||||
| } | |||||
| }) | |||||
| let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{ | |||||
| style:'img', | |||||
| crs:'WGS84' | |||||
| }) | |||||
| viewer.addBaseLayer(baseLayer) | |||||
| let Cesium = DC.getLib('Cesium') | |||||
| const fs =` | |||||
| uniform sampler2D colorTexture; | |||||
| uniform sampler2D depthTexture; | |||||
| uniform vec3 centerWC; | |||||
| uniform vec3 normalWC; | |||||
| uniform float radius; | |||||
| in vec2 v_textureCoordinates; | |||||
| float getDepth(){ | |||||
| float z_window = czm_unpackDepth(texture(depthTexture, v_textureCoordinates)); | |||||
| z_window = czm_reverseLogDepth(z_window); | |||||
| float n_range = czm_depthRange.near; | |||||
| float f_range = czm_depthRange.far; | |||||
| return (2.0 * z_window - n_range - f_range) / (f_range - n_range); | |||||
| } | |||||
| vec4 toEye(in vec2 uv, in float depth){ | |||||
| vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0)); | |||||
| vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0); | |||||
| posInCamera = posInCamera / posInCamera.w; | |||||
| return posInCamera; | |||||
| } | |||||
| vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point){ | |||||
| vec3 v01 = point - planeOrigin; | |||||
| float d = dot(planeNormal, v01) ; | |||||
| return (point - planeNormal * d); | |||||
| } | |||||
| void main() { | |||||
| float depth = getDepth(); | |||||
| vec4 color = texture(colorTexture, v_textureCoordinates); | |||||
| vec4 viewPos = toEye(v_textureCoordinates, depth); | |||||
| vec4 center = czm_view * vec4(centerWC,1); | |||||
| vec4 planeNormal = czm_view * vec4(normalWC,0); | |||||
| vec3 prjOnPlane = pointProjectOnPlane(planeNormal.xyz, center.xyz, viewPos.xyz); | |||||
| float dis = length(prjOnPlane.xyz - center.xyz); | |||||
| if(color.rgb !=vec3(0.0) && dis <= radius && depth < 1.0){ | |||||
| out_FragColor = vec4(color.rgb, 1.0); | |||||
| } | |||||
| }`; | |||||
| let center = Cesium.Cartesian3.fromDegrees(120,31) | |||||
| let up = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal( | |||||
| center, | |||||
| new Cesium.Cartesian3() | |||||
| ) | |||||
| viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({ | |||||
| fragmentShader : fs, | |||||
| uniforms : { | |||||
| centerWC: function () { | |||||
| return center | |||||
| }, | |||||
| normalWC:function () { | |||||
| return up | |||||
| }, | |||||
| radius : function () { | |||||
| return 10000 | |||||
| }, | |||||
| } | |||||
| })); | |||||
| addGuiController() // add controller | |||||
| } | |||||
| function addGuiController(){ | |||||
| } | |||||
| DC.ready({ | |||||
| baseUrl:'../libs/dc-sdk/resources/' | |||||
| }).then(initViewer) | |||||
| </script> | |||||
| </body> | |||||
| </html> |
+ 14
- 1
examples/list.js
View File
| { | { | ||||
| name: '地形设置', | name: '地形设置', | ||||
| folder: 'terrain', | folder: 'terrain', | ||||
| children: [], | |||||
| children: [ | |||||
| { | |||||
| name: '地形（中国）', | |||||
| page: 'ter_ch.html', | |||||
| }, | |||||
| { | |||||
| name: '地形（夸张）', | |||||
| page: 'ter_exaggeration.html', | |||||
| }, | |||||
| ], | |||||
| }, | }, | ||||
| { | { | ||||
| name: '要素图层', | name: '要素图层', | ||||
| name: '雷达扫描', | name: '雷达扫描', | ||||
| page: 'radar_scan.html', | page: 'radar_scan.html', | ||||
| }, | }, | ||||
| { | |||||
| name: '区域切割', | |||||
| page: 'bounds_clip.html', | |||||
| }, | |||||
| { | { | ||||
| name: '泛光', | name: '泛光', | ||||
| page: 'bloom.html', | page: 'bloom.html', |
+ 48
- 0
examples/terrain/ter_ch.html
View File
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||||
| <title>dc-example</title> | |||||
| <script src='/libs/dc-sdk/dc.min.js'></script> | |||||
| <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'> | |||||
| <link href='../index.css' type='text/css' rel='stylesheet'> | |||||
| </head> | |||||
| <body> | |||||
| <div id="viewer-container" class="viewer-container"></div> | |||||
| <script> | |||||
| let viewer = undefined | |||||
| function initViewer() { | |||||
| viewer = new DC.Viewer('viewer-container') | |||||
| let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{ | |||||
| style:'img', | |||||
| crs:'WGS84' | |||||
| }) | |||||
| viewer.addBaseLayer(baseLayer) | |||||
| let terrain = DC.TerrainFactory.createTerrain(DC.TerrainType.XYZ,{ | |||||
| url: 'http://data.marsgis.cn/terrain' | |||||
| }) | |||||
| viewer.addTerrain(terrain) | |||||
| viewer.flyToPosition( | |||||
| new DC.Position( | |||||
| 96.70456483909693, | |||||
| 28.883444927447762, | |||||
| 48977.26981733466, | |||||
| 0, | |||||
| -31 | |||||
| ) | |||||
| ) | |||||
| } | |||||
| DC.ready({ | |||||
| baseUrl:'../libs/dc-sdk/resources/' | |||||
| }).then(initViewer) | |||||
| </script> | |||||
| </body> | |||||
| </html> |
+ 63
- 0
examples/terrain/ter_exaggeration.html
View File
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||||
| <title>dc-example</title> | |||||
| <script src='/libs/dc-sdk/dc.min.js'></script> | |||||
| <script src="../dat.gui.min.js"></script> | |||||
| <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'> | |||||
| <link href='../index.css' type='text/css' rel='stylesheet'> | |||||
| </head> | |||||
| <body> | |||||
| <div id="viewer-container" class="viewer-container"></div> | |||||
| <script> | |||||
| let viewer = undefined | |||||
| function initViewer() { | |||||
| viewer = new DC.Viewer('viewer-container') | |||||
| let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{ | |||||
| style:'img', | |||||
| crs:'WGS84' | |||||
| }) | |||||
| viewer.addBaseLayer(baseLayer) | |||||
| let terrain = DC.TerrainFactory.createTerrain(DC.TerrainType.XYZ,{ | |||||
| url: 'http://data.marsgis.cn/terrain' | |||||
| }) | |||||
| viewer.addTerrain(terrain) | |||||
| viewer.flyToPosition( | |||||
| new DC.Position( | |||||
| 96.70456483909693, | |||||
| 28.883444927447762, | |||||
| 48977.26981733466, | |||||
| 0, | |||||
| -31 | |||||
| ) | |||||
| ) | |||||
| addGuiController() // add controller | |||||
| } | |||||
| function addGuiController(){ | |||||
| let controls = { | |||||
| exaggeration:0, | |||||
| } | |||||
| let gui = new dat.GUI() | |||||
| gui.add(controls,'exaggeration',0,10).step(1).onChange(value=>{ | |||||
| viewer.setOptions({ | |||||
| globe:{ | |||||
| terrainExaggeration: +value | |||||
| } | |||||
| }) | |||||
| }) | |||||
| } | |||||
| DC.ready({ | |||||
| baseUrl:'../libs/dc-sdk/resources/' | |||||
| }).then(initViewer) | |||||
| </script> | |||||
| </body> | |||||
| </html> |
+ 7
- 4
gulpfile.js
View File
| file: options.node ? 'dist/namespace.cjs' : 'dist/namespace.js', | file: options.node ? 'dist/namespace.cjs' : 'dist/namespace.js', | ||||
| format: options.node ? 'cjs' : 'umd', | format: options.node ? 'cjs' : 'umd', | ||||
| sourcemap: false, | sourcemap: false, | ||||
| banner: options.node ? '(function(){' : '', | |||||
| footer: options.node ? '})()' : '', | |||||
| }) | }) | ||||
| } | } | ||||
| await fse.outputFile( | await fse.outputFile( | ||||
| dcPath, | dcPath, | ||||
| ` | ` | ||||
| ${content} | |||||
| ${exportVersion} | |||||
| ${exportCmdOut} | |||||
| ${exportVersion} | |||||
| ${exportCmdOut} | |||||
| ${content} | |||||
| `, | `, | ||||
| { | { | ||||
| encoding: 'utf8', | encoding: 'utf8', | ||||
| await fse.outputFile( | await fse.outputFile( | ||||
| dcPath, | dcPath, | ||||
| ` | ` | ||||
| ${content} | |||||
| ${exportNamespace} | ${exportNamespace} | ||||
| ${exportVersion} | ${exportVersion} | ||||
| ${exportCmdOut} | ${exportCmdOut} | ||||
| ${content} | |||||
| `, | `, | ||||
| { | { | ||||
| encoding: 'utf8', | encoding: 'utf8', |
Loading…