Caven Chen
2 years ago
5 changed files with 87 additions and 4 deletions
+ 8
- 0
README.md
View File
| @@ -15,6 +15,14 @@ | |||
| </a> | |||
| </p> | |||
| ## Run examples | |||
| ```shell | |||
| yarn run build | |||
| yarn run server | |||
| ``` | |||
| [**🇨🇳 中文**](./README_zh.md) | [**🇬🇧English**](./README.md) | |||
| `DC-SDK` is based on the open source project `Cesium` for the second development of two three-dimensional `WebGis` application framework , the framework optimizes the use of `Cesium` and adds some additional features , designed for developers to quickly build `WebGis` application. | |||
+ 8
- 1
README_zh.md
View File
| @@ -1,7 +1,7 @@ | |||
| # DC-SDK | |||
| <p> | |||
| <img src="https://img.shields.io/github/workflow/status/dvgis/dc-sdk/build"/> | |||
| <img src="https://img.shields.io/github/actions/workflow/status/dvgis/dc-sdk/build.yml"/> | |||
| <img src="https://img.shields.io/badge/license-Apache%202-blue"/> | |||
| <a href="https://www.npmjs.com/package/@dvgis/dc-sdk" target="_blank"> | |||
| <img src="https://img.shields.io/npm/v/@dvgis/dc-sdk?color=orange&logo=npm" /> | |||
| @@ -25,6 +25,13 @@ | |||
| Tips：本框架是 JS+GIS 的框架包。开发者需要有一定的前端技术和 GIS 相关技术 | |||
| ``` | |||
| ## 运行示例 | |||
| ```shell | |||
| yarn run build | |||
| yarn run server | |||
| ``` | |||
| ## 安装 | |||
| `NPM / YARN` **_`(推荐使用)`_** | |||
+ 58
- 0
examples/tileset-custom-style.html
View File
| @@ -0,0 +1,58 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <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.base.min.js'></script> | |||
| <script src='/libs/dc-sdk/dc.core.min.js'></script> | |||
| <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'> | |||
| <style> | |||
| *{ | |||
| margin: 0; | |||
| padding: 0; | |||
| } | |||
| html,body,#viewer-container{ | |||
| width: 100%; | |||
| height: 100%; | |||
| overflow: hidden; | |||
| } | |||
| </style> | |||
| </head> | |||
| <body> | |||
| <div id="viewer-container" class='viewer-container'></div> | |||
| </body> | |||
| <script> | |||
| let viewer = undefined | |||
| function initViewer() { | |||
| viewer = new DC.Viewer('viewer-container') | |||
| let layer = new DC.TilesetLayer('layer') | |||
| viewer.addLayer(layer) | |||
| let tileset = new DC.Tileset( | |||
| '//resource.dvgis.cn/data/3dtiles/ljz/tileset.json' | |||
| ) | |||
| let customShader = new DC.CustomShader({ | |||
| fragmentShaderText:` | |||
| void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) { | |||
| vec4 position = czm_inverseModelView * vec4(fsInput.attributes.positionEC,1); // 位置 | |||
| float glowRange = 100.0; // 光环的移动范围(高度) | |||
| vec4 temp = vec4(0.2, 0.5, 1.0, 1.0); // 颜色 | |||
| temp *= vec4(vec3(position.z / 100.0), 1.0); // 渐变 | |||
| // 动态光环 | |||
| float time = fract(czm_frameNumber / 360.0); | |||
| time = abs(time - 0.5) * 2.0; | |||
| float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time)); | |||
| material.diffuse = vec3(temp.rgb + temp.rgb * (1.0 - diff)) ; | |||
| } | |||
| ` | |||
| }) | |||
| tileset.setCustomShader(customShader) | |||
| layer.addOverlay(tileset) | |||
| viewer.flyTo(tileset) | |||
| } | |||
| DC.ready(initViewer) | |||
| </script> | |||
| </html> | |||
+ 12
- 0
modules/overlay/model/Tileset.js
View File
| @@ -228,6 +228,18 @@ class Tileset extends Overlay { | |||
| return this | |||
| } | |||
| /** | |||
| * | |||
| * @param customShader | |||
| * @return {Tileset} | |||
| */ | |||
| setCustomShader(customShader) { | |||
| this.readyPromise.then(tileset => { | |||
| tileset.customShader = customShader | |||
| }) | |||
| return this | |||
| } | |||
| /** | |||
| * Sets style | |||
| * @param style | |||
+ 1
- 3
packages/types/DC.d.ts
View File
| @@ -659,9 +659,7 @@ declare module 'dc' { | |||
| setProperties(properties: JSON): Tileset | |||
| setCustomShader(fragmentShader: String): Tileset | |||
| replaceFS(fragmentShader: String): Tileset | |||
| setCustomShader(CustomShader: Object): Tileset | |||
| setSplitDirection(splitDirection: Number): Tileset | |||
| } | |||
Loading…