Caven Chen
2 年前
+ 8
- 0
README.md
查看文件
| </a> | </a> | ||||
| </p> | </p> | ||||
| ## Run examples | |||||
| ```shell | |||||
| yarn run build | |||||
| yarn run server | |||||
| ``` | |||||
| [**🇨🇳 中文**](./README_zh.md) | [**🇬🇧English**](./README.md) | [**🇨🇳 中文**](./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. | `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
查看文件
| # DC-SDK | # DC-SDK | ||||
| <p> | <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"/> | <img src="https://img.shields.io/badge/license-Apache%202-blue"/> | ||||
| <a href="https://www.npmjs.com/package/@dvgis/dc-sdk" target="_blank"> | <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" /> | <img src="https://img.shields.io/npm/v/@dvgis/dc-sdk?color=orange&logo=npm" /> | ||||
| Tips：本框架是 JS+GIS 的框架包。开发者需要有一定的前端技术和 GIS 相关技术 | Tips：本框架是 JS+GIS 的框架包。开发者需要有一定的前端技术和 GIS 相关技术 | ||||
| ``` | ``` | ||||
| ## 运行示例 | |||||
| ```shell | |||||
| yarn run build | |||||
| yarn run server | |||||
| ``` | |||||
| ## 安装 | ## 安装 | ||||
| `NPM / YARN` **_`(推荐使用)`_** | `NPM / YARN` **_`(推荐使用)`_** |
+ 58
- 0
examples/tileset-custom-style.html
查看文件
| <!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
查看文件
| return this | return this | ||||
| } | } | ||||
| /** | |||||
| * | |||||
| * @param customShader | |||||
| * @return {Tileset} | |||||
| */ | |||||
| setCustomShader(customShader) { | |||||
| this.readyPromise.then(tileset => { | |||||
| tileset.customShader = customShader | |||||
| }) | |||||
| return this | |||||
| } | |||||
| /** | /** | ||||
| * Sets style | * Sets style | ||||
| * @param style | * @param style |
+ 1
- 3
packages/types/DC.d.ts
查看文件
| setProperties(properties: JSON): Tileset | setProperties(properties: JSON): Tileset | ||||
| setCustomShader(fragmentShader: String): Tileset | |||||
| replaceFS(fragmentShader: String): Tileset | |||||
| setCustomShader(CustomShader: Object): Tileset | |||||
| setSplitDirection(splitDirection: Number): Tileset | setSplitDirection(splitDirection: Number): Tileset | ||||
| } | } |
正在加载...