| }, | }, | ||||
| socialLinks: [{ icon: 'github', link: 'https://github.com/dvgis/dc-sdk' }], | socialLinks: [{ icon: 'github', link: 'https://github.com/dvgis/dc-sdk' }], | ||||
| footer: { | footer: { | ||||
| copyright: '版权所有 © 2019 - 2023 数字视觉(Digital Visual)', | |||||
| copyright: '版权所有 © 2019 - 2023 数字视界科技(Digital Visual)', | |||||
| }, | }, | ||||
| }, | }, | ||||
| }) | }) |
| { text: '快速上手', link: '/zh/guide/get-start' }, | { text: '快速上手', link: '/zh/guide/get-start' }, | ||||
| { text: '运行环境', link: '/zh/guide/run-env' }, | { text: '运行环境', link: '/zh/guide/run-env' }, | ||||
| { text: '架构图', link: '/zh/guide/framework-chart' }, | { text: '架构图', link: '/zh/guide/framework-chart' }, | ||||
| { text: '从 2.x 迁移', link: '/zh/guide/from-v2' }, | |||||
| { text: '从旧版本迁移', link: '/zh/guide/from-old-version' }, | |||||
| { text: '技术扩展', link: '/zh/guide/tec-ext' }, | { text: '技术扩展', link: '/zh/guide/tec-ext' }, | ||||
| ], | ], | ||||
| }, | }, |
| - `{Object} options`:属性 | - `{Object} options`:属性 | ||||
| - 返回值 `viewer` | - 返回值 `viewer` | ||||
| ```json | |||||
| ```js | |||||
| //属性参数(可选) | //属性参数(可选) | ||||
| { | |||||
| const config = { | |||||
| "contextOptions": { | "contextOptions": { | ||||
| "webgl": { | "webgl": { | ||||
| "alpha": false, | |||||
| //背景 | |||||
| "alpha": false, //背景 | |||||
| "depth": true, | "depth": true, | ||||
| "stencil": false, | "stencil": false, | ||||
| "antialias": true, | "antialias": true, | ||||
| - `{Object} options`:属性对象 | - `{Object} options`:属性对象 | ||||
| - 返回值 `this` | - 返回值 `this` | ||||
| ```json | |||||
| ```js | |||||
| // 属性参数(可选) | // 属性参数(可选) | ||||
| { | |||||
| "shadows": false, | |||||
| // 是否开启阴影 | |||||
| "resolutionScale": 1, | |||||
| // 设置渲染分辨率的缩放比例 | |||||
| "showAtmosphere": true, | |||||
| //是否显示大气层 | |||||
| "showSun": true, | |||||
| //是否显示太阳 | |||||
| "showMoon": true, | |||||
| //是否显示月亮 | |||||
| "enableFxaa": true, | |||||
| //是否开启抗锯齿 | |||||
| "msaaSamples": 1, | |||||
| //msaa抗拒出取样度 | |||||
| "cameraController": { | |||||
| // 相机控制 | |||||
| "enableRotate": true, | |||||
| // 是否可以旋转 | |||||
| "enableTilt": true, | |||||
| // 是否可以翻转 | |||||
| "enableTranslate": true, | |||||
| // 是否可以平移 | |||||
| "enableZoom": true, | |||||
| // 是否可以缩放 | |||||
| "enableCollisionDetection": true, | |||||
| // 是否支持碰撞检测 | |||||
| "minimumZoomDistance": 1.0, | |||||
| // 最小缩放距离 | |||||
| "maximumZoomDistance": 40489014.0 | |||||
| // 最大缩放距离 | |||||
| const config = { | |||||
| "shadows": false,// 是否开启阴影 | |||||
| "resolutionScale": 1,// 设置渲染分辨率的缩放比例 | |||||
| "showAtmosphere": true,//是否显示大气层 | |||||
| "showSun": true,//是否显示太阳 | |||||
| "showMoon": true, //是否显示月亮 | |||||
| "enableFxaa": true,//是否开启抗锯齿 | |||||
| "msaaSamples": 1,//msaa抗拒出取样度 | |||||
| "cameraController": { // 相机控制 | |||||
| "enableRotate": true,// 是否可以旋转 | |||||
| "enableTilt": true,// 是否可以翻转 | |||||
| "enableTranslate": true,// 是否可以平移 | |||||
| "enableZoom": true,// 是否可以缩放 | |||||
| "enableCollisionDetection": true,// 是否支持碰撞检测 | |||||
| "minimumZoomDistance": 1.0,// 最小缩放距离 | |||||
| "maximumZoomDistance": 40489014.0// 最大缩放距离 | |||||
| }, | }, | ||||
| "globe": { | "globe": { | ||||
| "show": true, | |||||
| // 是否显示地球 | |||||
| "showGroundAtmosphere": true, | |||||
| // 显示地面大气 | |||||
| "enableLighting": false, | |||||
| //是否开启灯光,开启后地球会根据当前时间启用灯光 | |||||
| "depthTestAgainstTerrain": false, | |||||
| //是否开启深度检测 | |||||
| "tileCacheSize": 100, | |||||
| // 默认瓦片缓存大小 | |||||
| "preloadSiblings": false, | |||||
| //是否应预加载渲染同级图块 | |||||
| "terrainExaggeration": 1, | |||||
| //地形夸张系数 | |||||
| "terrainExaggerationRelativeHeight": 1, | |||||
| //地形相对高度夸张系数 | |||||
| "baseColor": new | |||||
| DC.Color(0, | |||||
| 0, | |||||
| 0.5, | |||||
| 1), | |||||
| //地球默认底色 | |||||
| "filterColor": new | |||||
| DC.Color(0, | |||||
| 0, | |||||
| 0, | |||||
| 0), | |||||
| //瓦片过滤色,设置后不可逆 | |||||
| "translucency": { | |||||
| //地表透明 | |||||
| "enabled": false, | |||||
| // 是否开启地表透明 | |||||
| "backFaceAlpha": 1, | |||||
| // 地球背面透明度 | |||||
| "backFaceAlphaByDistance": null, | |||||
| //根据距离设置地球背面透明度: {near:400,nearValue:0.2,far:800,farValue:1} | |||||
| "frontFaceAlpha": 1, | |||||
| // 地球正面透明度 | |||||
| "frontFaceAlphaByDistance": null | |||||
| //根据距离设置地球正面透明度: {near:400,nearValue:0.2,far:800,farValue:1} | |||||
| "show": true,// 是否显示地球 | |||||
| "showGroundAtmosphere": true,// 显示地面大气 | |||||
| "enableLighting": false,//是否开启灯光,开启后地球会根据当前时间启用灯光 | |||||
| "depthTestAgainstTerrain": false, //是否开启深度测试 | |||||
| "tileCacheSize": 100, // 默认瓦片缓存大小 | |||||
| "preloadSiblings": false,//是否应预加载渲染同级图块 | |||||
| "terrainExaggeration": 1,//地形夸张系数 | |||||
| "terrainExaggerationRelativeHeight": 1,//地形相对高度夸张系数 | |||||
| "baseColor": new DC.Color(0, 0, 0.5, 1), //地球默认底色 | |||||
| "filterColor": newDC.Color(0, 0, 0, 0),//瓦片过滤色,设置后不可逆 | |||||
| "translucency": { //地表透明 | |||||
| "enabled": false, // 是否开启地表透明 | |||||
| "backFaceAlpha": 1, // 地球背面透明度 | |||||
| "backFaceAlphaByDistance": null, //根据距离设置地球背面透明度: {near:400,nearValue:0.2,far:800,farValue:1} | |||||
| "frontFaceAlpha": 1, // 地球正面透明度 | |||||
| "frontFaceAlphaByDistance": null //根据距离设置地球正面透明度: {near:400,nearValue:0.2,far:800,farValue:1} | |||||
| } | } | ||||
| }, | }, | ||||
| "skyBox": { | "skyBox": { | ||||
| "sources": {}, | |||||
| // 六个面的贴图 | |||||
| "show": true, | |||||
| //是否显示 | |||||
| "offsetAngle": 0 | |||||
| //旋转角度 | |||||
| "sources": {}, // 六个面的贴图 | |||||
| "show": true, //是否显示 | |||||
| "offsetAngle": 0 //旋转角度 | |||||
| } | } | ||||
| } | } | ||||
| ``` | ``` | ||||
| - `{Object} options`:属性 | - `{Object} options`:属性 | ||||
| - 返回值 `this` | - 返回值 `this` | ||||
| ```json | |||||
| ```js | |||||
| //属性参数 (可选) | //属性参数 (可选) | ||||
| { | |||||
| "name": "电子地图", | |||||
| //名称 | |||||
| "iconUrl": "../preview.png" | |||||
| //缩略图 | |||||
| const options = { | |||||
| "name": "电子地图",//名称 | |||||
| "iconUrl": "../preview.png",//缩略图 | |||||
| "alpha": 1.0, | "alpha": 1.0, | ||||
| "nightAlpha": 1.0, | "nightAlpha": 1.0, | ||||
| "dayAlpha": 1.0, | "dayAlpha": 1.0, | ||||
| - `{String} state`:状态 **_`readonly`_** | - `{String} state`:状态 **_`readonly`_** | ||||
| - `{Object} config`:配置 **_`writeOnly`_** | - `{Object} config`:配置 **_`writeOnly`_** | ||||
| ```json | |||||
| // 配置(可选) | |||||
| // 配置后会影响全局的popup的显示样式,请慎重。 | |||||
| { | |||||
| "position": "center", | |||||
| // popup的位于鼠标的点击位置的方向,有:center,left ,right | |||||
| "customClass": "custom" | |||||
| // 添加自定义的Css 类名到popup中,多个用空格隔开 | |||||
| ```js | |||||
| // 配置(可选),配置后会影响全局的popup的显示样式,请慎重。 | |||||
| const config = { | |||||
| "position": "center",// popup的位于鼠标的点击位置的方向,有:center,left ,right | |||||
| "customClass": "custom"// 添加自定义的Css 类名到popup中,多个用空格隔开 | |||||
| } | } | ||||
| ``` | ``` | ||||
| - `{Object} options`:配置 | - `{Object} options`:配置 | ||||
| - 返回值 `skyBox` | - 返回值 `skyBox` | ||||
| ```json | |||||
| ```js | |||||
| //options(可选) | //options(可选) | ||||
| { | |||||
| "sources": {}, | |||||
| // 六个面的贴图 | |||||
| "show": true | |||||
| //显示 | |||||
| const options = { | |||||
| "sources": {},// 六个面的贴图 | |||||
| "show": true//显示 | |||||
| } | } | ||||
| ``` | ``` | ||||
| # 全局 API 🌎 | # 全局 API 🌎 | ||||
| ## ready() | |||||
| ## config | |||||
| > 框架主入口函数,使用框架时必须以其开始,否则使用框架 | |||||
| > 框架全局配置,用于配置资源文件以及AccessToken | |||||
| ```js | ```js | ||||
| DC.ready({}).then(() => {}) | |||||
| DC.config. | |||||
| ``` | ``` | ||||
| - 参数 | - 参数 | ||||
| ```json | ```json | ||||
| //属性参数(可选) | //属性参数(可选) | ||||
| { | { | ||||
| "baseUrl": "<Cesium 静态资源路径,默认值为:“./libs/dc-sdk/resources/” >", | |||||
| "echarts": "<echarts库,设置后用于ChartLayer>" | |||||
| "baseUrl": "<Cesium 静态资源路径,默认值为:“./libs/dc-sdk/resources/” >" | |||||
| } | } | ||||
| ``` | ``` | ||||
| # 从 2.x 迁移 | |||||
| # 从旧版本迁移 | |||||
| ## 修改框架引入方式修改 | |||||
| ## 从 2.x 迁移 | |||||
| ### 修改框架引入方式修改 | |||||
| ```js | ```js | ||||
| // import DC from '@dvgis/dc-sdk/dist/dc.02.基础.min' | // import DC from '@dvgis/dc-sdk/dist/dc.02.基础.min' | ||||
| import '@dvgis/dc-sdk/dist/dc.min.css' | import '@dvgis/dc-sdk/dist/dc.min.css' | ||||
| ``` | ``` | ||||
| ## 修改框架初始函数 | |||||
| ### 修改框架初始函数 | |||||
| ```js | ```js | ||||
| // DC.ready(initViewer) | |||||
| DC.ready().then(initViewer) | |||||
| let viewer = new DC.Viewer("viewer-container") | |||||
| ``` | ``` | ||||
| ## 从 3.x 和 4.x 迁移 | |||||
| ### 修改框架初始函数 | |||||
| ```js | |||||
| // DC.ready().then(initViewer) | |||||
| let viewer = new DC.Viewer("viewer-container") | |||||
| ``` | |||||
| # 从 2.x 迁移 | |||||
| ## 修改框架引入方式修改 | |||||
| ```js | |||||
| import * as DC from '@dvgis/dc-sdk' | |||||
| import '@dvgis/dc-sdk/dist/dc.min.css' | |||||
| ``` | |||||
| ## 修改框架初始函数 | |||||
| ```js | |||||
| // DC.ready().then(initViewer) | |||||
| let viewer = new DC.Viewer("viewer-container") | |||||
| ``` |
| [下载链接](https://github.com/dvgis/dc-sdk/releases) | [下载链接](https://github.com/dvgis/dc-sdk/releases) | ||||
| ```html | ```html | ||||
| <script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.min.js"></script> | <script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.min.js"></script> | ||||
| <link | <link | ||||
| href="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.min.css" | href="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.min.css" | ||||
| `构建三维容器` | `构建三维容器` | ||||
| ```html | ```html | ||||
| <div class="viewer-container" id="viewer-container"></div> | <div class="viewer-container" id="viewer-container"></div> | ||||
| <!-- id属性必须赋值,否则无法创建三维场景 --> | <!-- id属性必须赋值,否则无法创建三维场景 --> | ||||
| ``` | ``` | ||||
| `构建三维场景` | `构建三维场景` | ||||
| ```js | ```js | ||||
| DC.ready().then(() => { | |||||
| let viewer = new DC.Viewer('viewer-container') | |||||
| }) | |||||
| let viewer = new DC.Viewer('viewer-container') | |||||
| ``` | ``` | ||||
| `运行效果` [更多示例](http://dc.dvgis.cn/#/examples) | `运行效果` [更多示例](http://dc.dvgis.cn/#/examples) | ||||
| ## 应用配置 | ## 应用配置 | ||||
| 由于 DC 框架将 Cesium 静态资源默认路径设置为 `./libs/dc-sdk/resources/`,这样需将 `Cesium` 相关的静态资源文件: `Assets`、`Workers` 、`ThirdParty` 复制到工程的 `libs/dc-sdk/resources` 目录下以保证三维场景能够正常呈现,也可通过全局函数进行 `Cesium` 相关的静态资源路基设置 | |||||
| 由于 DC 框架将 Cesium 静态资源默认路径设置为 `./libs/dc-sdk/resources/`,这样需将 `Cesium` 相关的静态资源文件: `Assets`、 | |||||
| `Workers` 、`ThirdParty` 复制到工程的 `libs/dc-sdk/resources` 目录下以保证三维场景能够正常呈现,也可通过全局函数进行 | |||||
| `Cesium` 相关的静态资源路基设置 | |||||
| > `npm / yarn / pnpm` | > `npm / yarn / pnpm` | ||||
| // vite.config.js | // vite.config.js | ||||
| import { defineConfig } from 'vite' | import { defineConfig } from 'vite' | ||||
| import DC from '@dvgis/vite-plugin-dc' | import DC from '@dvgis/vite-plugin-dc' | ||||
| export default defineConfig({ | export default defineConfig({ | ||||
| plugins: [DC()], | plugins: [DC()], | ||||
| }) | }) |
| DC-SDK 是依赖于[`WebGL`](#webgl)运行的一套开发平台,需要开发或运行终端配置 `独立显卡` 和安装支持 `WebGL` 的浏览器,推荐使用 **_Chrome(谷歌)_**、**_Firefox(火狐)_** | |||||
| # 运行环境 | # 运行环境 | ||||
| DC-SDK 是依赖于[`WebGL`](#webgl)运行的一套开发平台,需要开发或运行终端配置 `独立显卡` 和安装支持 `WebGL` 的浏览器,推荐使用 | |||||
| **_Chrome(谷歌)_**、**_Firefox(火狐)_** | |||||
| ## 静态服务器 | ## 静态服务器 | ||||
| 静态服务器主要用于发布地图瓦片、地形、模型数据等数据服务,如:**_Apache Http Sever_**、**_Tomcat_** 、**_Nginx_**,推荐使用 **_Nginx_** | |||||
| 静态服务器主要用于发布地图瓦片、地形、模型数据等数据服务,如:**_Apache Http Sever_**、**_Tomcat_** 、**_Nginx_**,推荐使用 * | |||||
| *_Nginx_** | |||||
| ## 硬件配置 | ## 硬件配置 | ||||
| "sass": "^1.62.1", | "sass": "^1.62.1", | ||||
| "shelljs": "^0.8.5", | "shelljs": "^0.8.5", | ||||
| "vinyl-sourcemaps-apply": "^0.2.1", | "vinyl-sourcemaps-apply": "^0.2.1", | ||||
| "vitepress": "^1.4.1" | |||||
| "vitepress": "^1.6.4" | |||||
| }, | }, | ||||
| "files": [ | "files": [ | ||||
| "dist" | "dist" |