| import { defineConfig } from 'vitepress' | |||||
| import zhConfig from './locales/zh.config.js' | |||||
| import enConfig from './locales/en.config.js' | |||||
| export default defineConfig({ | |||||
| base: '/docs/', | |||||
| cleanUrls: 'without-subfolders', | |||||
| head: [['link', { rel: 'icon', href: '/assets/favicon.png' }]], | |||||
| locales: { | |||||
| root: zhConfig, | |||||
| // en: enConfig, | |||||
| }, | |||||
| themeConfig: { | |||||
| logo: '/assets/favicon.png', | |||||
| search: { | |||||
| provider: 'local', | |||||
| }, | |||||
| socialLinks: [{ icon: 'github', link: 'https://github.com/dvgis/dc-sdk' }], | |||||
| footer: { | |||||
| copyright: '版权所有 © 2019 - 2023 数字视觉(Digital Visual)', | |||||
| }, | |||||
| }, | |||||
| }) |
| export default { | |||||
| label: 'English', | |||||
| lang: 'en', | |||||
| link: '/en/', | |||||
| title: 'DC-SDK Docs', | |||||
| } |
| --- | |||||
| layout: home | |||||
| hero: | |||||
| name: DC-SDK | |||||
| text: Make <code>WebGis</code> development easier | |||||
| image: | |||||
| src: /assets/doc.gif | |||||
| alt: VitePress | |||||
| actions: | |||||
| - theme: brand | |||||
| text: Quick Start | |||||
| link: /zh/guide/introduction | |||||
| features: | |||||
| - title: Simpler | |||||
| details: Build a 3D WebGis application with just a div and a few lines of code! | |||||
| - title: Easy-use | |||||
| details: Using standard development classes, a simple new operation can be used to get the scene elements | |||||
| - title: Expandable | |||||
| details: Supports custom cesium and gis algorithm libraries; provides base classes and element lifecycle hooks | |||||
| --- |
| # 效果动画 🌎 | |||||
| ## Animation | |||||
| > 场景动画基类 | |||||
| :::warning | |||||
| 该类无法实例化 | |||||
| ::: | |||||
| ### methods | |||||
| - **_start()_** | |||||
| 开始动画 | |||||
| - 返回值 `this` | |||||
| - **_stop()_** | |||||
| 停止动画 | |||||
| - 返回值 `this` | |||||
| ## DC.AroundPoint | |||||
| > 点位环绕,继承于[Animation](#animation) | |||||
| ### example | |||||
| ```js | |||||
| let aroundPoint = new DC.AroundPoint(viewer, '120.121, 31.12') | |||||
| aroundPoint.start() | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(viewer,position,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{Viewer} viewer`:3D 场景 | |||||
| - `{Position|String|Array} position`:点位 | |||||
| - `{Object} options`:options | |||||
| - 返回值 `aroundPoint` | |||||
| ```json | |||||
| //options(optional) | |||||
| { | |||||
| "heading": 0, //偏移角度 | |||||
| "pitch": 0, //翻转角度 | |||||
| "range": 0, //距离 | |||||
| "duration": 0, //间隔,单位:秒,当此值大于0时,callback才会生效 | |||||
| "callback": null, //完成回调函数 | |||||
| "context": null //回调函数执行上下文 | |||||
| } | |||||
| ``` | |||||
| ## DC.AroundView | |||||
| > 相机环绕,继承于[Animation](#animation) | |||||
| ### example | |||||
| ```js | |||||
| let aroundView = new DC.AroundView(viewer) | |||||
| aroundView.start() | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(viewer,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{Viewer} viewer`:3D 场景 | |||||
| - `{Object} options`:options | |||||
| - 返回值 `aroundView` | |||||
| ```json | |||||
| //options(optional) | |||||
| { | |||||
| "heading": 0, //偏移角度 | |||||
| "pitch": 0, //俯仰角度 | |||||
| "roll": 0, //翻转角度 | |||||
| "duration": 0, //间隔,单位:秒,当此值大于0时,callback才会生效 | |||||
| "callback": null, //完成回调函数 | |||||
| "context": null //回调函数执行上下文 | |||||
| } | |||||
| ``` | |||||
| ## DC.Flying | |||||
| > 定点巡航,继承于[Animation](#animation) | |||||
| ### example | |||||
| ```js | |||||
| let flying = new DC.Flying(viewer) | |||||
| flying.positions = ['121.234,21.212,0,-29', '121.435,21.212,0,-29'] | |||||
| flying.start() | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(viewer,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{Viewer} viewer`:场景 | |||||
| - `{Object} options`:options | |||||
| - 返回值 `flying` | |||||
| ```json | |||||
| // 属性参数(optional) | |||||
| { | |||||
| "loop": false, //是否循环, | |||||
| "dwellTime": 3, //驻留时间 | |||||
| "callback": null //回调函数 | |||||
| } | |||||
| ``` | |||||
| ### properties | |||||
| - `{Array} positions`:点位 | |||||
| - `{Array} durations`:每个点位的飞行间隔时间,当数组长度为 1 时,每个间隔时间相同,如果不为 1 时,长度必须和点位长度相等 | |||||
| ### methods | |||||
| - **_start()_** | |||||
| 开始动画 | |||||
| - 返回值 `this` | |||||
| - **_pause()_** | |||||
| 暂停 | |||||
| - 返回值 `this` | |||||
| - **_restore()_** | |||||
| 继续 | |||||
| - 返回值 `this` | |||||
| ## DC.GlobeRotate | |||||
| > 地球自转,继承于[Animation](#animation) | |||||
| ### example | |||||
| ```js | |||||
| let globeRotate = new DC.GlobeRotate(viewer, { | |||||
| duration: 5, | |||||
| speed: 1000, | |||||
| callback: () => {}, | |||||
| }) | |||||
| globeRotate.start() | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(viewer,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{DC.Viewer} viewer`:3D 场景 | |||||
| - `{Object} options`:options | |||||
| - 返回值 `globeRotate` | |||||
| ```json | |||||
| //options(optional) | |||||
| { | |||||
| "speed": 12 * 1000, //速度 | |||||
| "duration": 0, //持续时间,当此值大于0时,callback才会生效 | |||||
| "callback": null, //执行完成的回调函数 | |||||
| "context": null //回调函数执行上下文 | |||||
| } | |||||
| ``` | |||||
| ## DC.RoamingController | |||||
| > 漫游控制 | |||||
| ### example | |||||
| ```js | |||||
| let rc = new DC.RoamingController(viewer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(viewer)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{Viewer} viewer`:3D 场景 | |||||
| - 返回值 `roamingController` | |||||
| ### methods | |||||
| - **_addPath(path)_** | |||||
| 添加路径 | |||||
| - 参数 | |||||
| - `{RoamingPath} path`:路径 | |||||
| - 返回值 `this` | |||||
| - **_addPaths(paths)_** | |||||
| 添加路径数组 | |||||
| - 参数 | |||||
| - `{Array<RoamingPath>} paths`:路径数组 | |||||
| - 返回值 `this` | |||||
| - **_removePath(path)_** | |||||
| 移除路径 | |||||
| - 参数 | |||||
| - `{RoamingPath} path`:路径 | |||||
| - 返回值 `path` | |||||
| - **_getPath(id)_** | |||||
| 根据唯一标识获取路径 | |||||
| - 参数 | |||||
| - `{String} id`:唯一标识 | |||||
| - 返回值 `path` | |||||
| - **_getPaths()_** | |||||
| 获取所有路径 | |||||
| - 返回值 `array` | |||||
| - **_activate(path, viewOption)_** | |||||
| 激活漫游 | |||||
| - 参数 | |||||
| - `{RoamingPath} path`:路径 | |||||
| - `{String} viewOption`:漫游参数 | |||||
| - 返回值 `this` | |||||
| ```json | |||||
| // 漫游参数(可选) | |||||
| { | |||||
| "pitch": 0, // 俯仰角 | |||||
| "range": 1000 // 距离 | |||||
| } | |||||
| ``` | |||||
| - **_deactivate()_** | |||||
| 结束漫游 | |||||
| - 返回值 `this` | |||||
| - **_clear()_** | |||||
| 移除所有路径 | |||||
| - 返回值 `this` | |||||
| ## DC.RoamingPath | |||||
| > 漫游路径 | |||||
| ### example | |||||
| ```js | |||||
| let path = new DC.RoamingPath('120.121,32.1213;121.132,32.1213', 20) | |||||
| rc.addPath(path) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(positions, duration, [pathMode])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String|Array<Position|Number|String|Object>} positions`:坐标串 | |||||
| - `{Number} duration`:间隔时间,单位:秒 | |||||
| - `{String} pathMode`:路径模式:speed(匀速) / time(等时) | |||||
| - 返回值 `roamingPath` | |||||
| ### properties | |||||
| - `{String} pathId`:唯一标识 **_`readonly`_** | |||||
| - `{String} id`:业务唯一标识 | |||||
| - `{String|Array<Position|Number|String>} positions`:坐标串 | |||||
| - `{Number} duration`:间隔时间,单位:秒 | |||||
| - `{String} pathMode`:路径模式:speed(匀速) / time(等时) | |||||
| - `{String} state`:状态 **_`readonly`_** | |||||
| ## DC.KeyboardRoaming | |||||
| > 键盘漫游 | |||||
| ### example | |||||
| ```js | |||||
| let kr = new DC.KeyboardRoaming(viewer) | |||||
| kr.enable = true | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(viewer)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{Viewer} viewer`:3D 场景 | |||||
| - 返回值 `keyboardRoaming` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Number} moveRate`:移动变化率:100 | |||||
| - `{Number} rotateRate`:旋转变化率:0.01 | |||||
| ## DC.TrackController | |||||
| > 历史轨迹控制 | |||||
| ### example | |||||
| ```js | |||||
| let tc = new DC.TrackController(viewer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(viewer)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{Viewer} viewer`:3D 场景 | |||||
| - 返回值 `trackController` | |||||
| ### methods | |||||
| - **_addTrack(track)_** | |||||
| 添加轨迹 | |||||
| - 参数 | |||||
| - `{Track} track`:轨迹 | |||||
| - 返回值 `this` | |||||
| - **_addTracks(tracks)_** | |||||
| 添加轨迹数组 | |||||
| - 参数 | |||||
| - `{Array<Track>} tracks`:轨迹数组 | |||||
| - 返回值 `this` | |||||
| - **_removeTrack(track)_** | |||||
| 移除轨迹 | |||||
| - 参数 | |||||
| - `{Track} track`:轨迹 | |||||
| - 返回值 `path` | |||||
| - **_getTrack(id)_** | |||||
| 根据业务唯一标识获取轨迹 | |||||
| - 参数 | |||||
| - `{String} id`:业务唯一标识 | |||||
| - 返回值 `track` | |||||
| - **_getTracks()_** | |||||
| 获取所有轨迹 | |||||
| - 返回值 `array` | |||||
| - **_play()_** | |||||
| 播放 | |||||
| - 返回值 `this` | |||||
| - **_pause()_** | |||||
| 暂停 | |||||
| - 返回值 `this` | |||||
| - **_restore()_** | |||||
| 继续播放 | |||||
| - 返回值 `this` | |||||
| - **_viewTrack(track, viewOption)_** | |||||
| 跟踪某一条路径 | |||||
| - 参数 | |||||
| - `{Track} track`:路径 | |||||
| - `{String} viewOption`:配置信息 | |||||
| - 返回值 `this` | |||||
| ```json | |||||
| // 属性参数(可选) | |||||
| { | |||||
| "mode": null, // 视角模式:DC.TrackViewMode | |||||
| "pitch": 0, // 俯仰角,第一视角有效 | |||||
| "range": 1000 // 距离 | |||||
| } | |||||
| ``` | |||||
| - **_releaseTrack(track)_** | |||||
| 取消跟踪某一条轨迹 | |||||
| - 参数 | |||||
| - `{Track} track`:路径 | |||||
| - 返回值 `this` | |||||
| - **_clear()_** | |||||
| 移除所有路径 | |||||
| - 返回值 `this` | |||||
| ## DC.Track | |||||
| > 轨迹 | |||||
| ### example | |||||
| ```js | |||||
| let tc = new DC.TrackController(viewer) | |||||
| let track = new DC.Track('120.121,32.1213;121.132,32.1213', 20) | |||||
| tc.addTrack(track) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(positions, duration, [callback], [options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String|Array<Position|Number|String|Object>} positions`:坐标串 | |||||
| - `{Number} duration`:间隔时间,单位:秒 | |||||
| - `{Function} callback`:每一个点位到达回调函数,参数有:position(位置信息),isLast(是否为最后的点位) | |||||
| - `{Object} options`: 配置参数 | |||||
| - 返回值 `track` | |||||
| ```json | |||||
| //配置参数(可选) | |||||
| { | |||||
| "clampToGround": false, // 是否贴地 | |||||
| "clampToTileset": false, // 是否贴物 | |||||
| "interpolationType": "Linear", // 插值类型:Linear、Hermite、Lagrange | |||||
| "interpolationDegree": 2, // 插值度数 | |||||
| "endDelayTime": 0.5,// 结束时间延长时间,单位:秒, | |||||
| "headingOffset":0,//旋转偏移 | |||||
| } | |||||
| ``` | |||||
| ### properties | |||||
| - `{String} trackId`:唯一标识 **_`readonly`_** | |||||
| - `{String} id`:业务唯一标识 | |||||
| - `{String|Array<Position|Number|String|Object>} positions`:坐标串 | |||||
| - `{Number} duration`:间隔时间,单位:秒 | |||||
| - `{Date} startTime`:开始时间,设置后会独立于控制器的开始时间 | |||||
| - `{String} state`:状态 **_`readonly`_** | |||||
| ### methods | |||||
| - **_addPosition(position,duration)_** | |||||
| 添加点位 | |||||
| - 参数 | |||||
| - `{Position|Array|String|Object} position`:点位 | |||||
| - `{Number} duration`:间隔,单位:秒 | |||||
| - 返回值 `this` | |||||
| - **_setModel(modelUrl,style)_** | |||||
| 设置模型 | |||||
| - 参数 | |||||
| - `{String} modelPath`:模型路径 | |||||
| - `{Object} style`:样式,详情参考:[DC.Model](../overlay/#dc-model) | |||||
| - 返回值 `this` | |||||
| - **_setBillboard(icon,style)_** | |||||
| 设置图标 | |||||
| - 参数 | |||||
| - `{String} icon`:图标路径 | |||||
| - `{Object} style`:样式,参考:[DC.Billboard](../overlay/#dc-billboard) | |||||
| - 返回值 `this` | |||||
| - **_setLabel(text,style)_** | |||||
| 设置文本 | |||||
| - 参数 | |||||
| - `{String} text`:文本 | |||||
| - `{Object} style`:样式,参考:[DC.Label](../overlay/#dc-label) | |||||
| - 返回值 `this` | |||||
| - **_setPath(visible,style)_** | |||||
| 设置路径 | |||||
| - 参数 | |||||
| - `{Boolean}} visible`:是否可见 | |||||
| - `{Object} style`:样式,参考:[DC.Polyline](../overlay/#dc-polyline) | |||||
| - 返回值 `this` |
| # 场景效果 🌎 | |||||
| ## DC.Weather | |||||
| > 天气效果 | |||||
| ### example | |||||
| ```js | |||||
| let weather = new DC.Weather(viewer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(viewer)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{Viewer} viewer`:3D 场景 | |||||
| - 返回值 `weather` | |||||
| ### properties | |||||
| - [`{Rain} rain`](#rain):雨天 **_`readonly`_** | |||||
| - [`{Snow} snow`](#snow):雪天 **_`readonly`_** | |||||
| - [`{Fog} snow`](#fog):雾天 **_`readonly`_** | |||||
| - [`{Cloud} cloud`](#cloud):云 **_`readonly`_** | |||||
| ## Rain | |||||
| > 雨天效果 | |||||
| ### example | |||||
| ```js | |||||
| weather.rain.enable = true | |||||
| weather.rain.speed = 2 | |||||
| ``` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Number} speed`:速度 | |||||
| ## Snow | |||||
| > 雪天效果 | |||||
| ### example | |||||
| ```js | |||||
| weather.snow.enable = true | |||||
| weather.snow.speed = 2 | |||||
| ``` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Number} speed`:速度 | |||||
| ## Fog | |||||
| > 雾天效果 | |||||
| ### example | |||||
| ```js | |||||
| weather.fog.enable = true | |||||
| weather.fog.fogColor = DC.Color.BLACK | |||||
| ``` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Color} fogColor`:颜色, | |||||
| - `{Object} fogByDistance`:距离可见,默认: `{ near: 10, nearValue: 0, far: 2000, farValue: 1.0 }` | |||||
| ## Cloud | |||||
| > 云效果 | |||||
| ### example | |||||
| ```js | |||||
| weather.cloud.enable = true | |||||
| weather.cloud.rotateAmount = 0.02 | |||||
| ``` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Number} rotateAmount`:移动增量,可为负数 | |||||
| ## DC.Effect | |||||
| > 效果类 | |||||
| ### example | |||||
| ```js | |||||
| let effect = new DC.Effect(viewer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(viewer)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{Viewer} viewer`:3D 场景 | |||||
| - 返回值 `effect` | |||||
| ### properties | |||||
| - [`{BlackAndWhite} blackAndWhite`](#blackandwhite):黑白 **_`readonly`_** | |||||
| - [`{Bloom} bloom`](#bloom):泛光 **_`readonly`_** | |||||
| - [`{Brightness} brightness`](#brightness):明亮 **_`readonly`_** | |||||
| - [`{DepthOfField} depthOfField`](#depthoffield):景深 **_`readonly`_** | |||||
| - [`{LensFlare} lensFlare`](#lensflare):镜头耀斑 **_`readonly`_** | |||||
| - [`{Night} night`](#night):夜视 **_`readonly`_** | |||||
| - [`{Silhouette} silhouette`](#silhouette):描边 **_`readonly`_** | |||||
| ## BlackAndWhite | |||||
| > 黑白效果 | |||||
| ### example | |||||
| ```js | |||||
| effect.blackAndWhite.enable = true | |||||
| ``` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Number} gradations`:强度 | |||||
| - `{Array} selected`:设置后期作用的覆盖物 | |||||
| ## Bloom | |||||
| > 泛光效果 | |||||
| ### example | |||||
| ```js | |||||
| effect.bloom.enable = true | |||||
| ``` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Number} contrast`:对比度 | |||||
| - `{Number} brightness`:亮度 | |||||
| - `{Number} glowOnly`:只发光 | |||||
| - `{Number} delta`:Delta | |||||
| - `{Number} sigma`:Sigma | |||||
| - `{Number} stepSize`:StepSize | |||||
| - `{Array} selected`:设置后期作用的覆盖物 | |||||
| ## Brightness | |||||
| > 明亮效果 | |||||
| ### example | |||||
| ```js | |||||
| effect.brightness.enable = true | |||||
| ``` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Number} intensity`:强度 | |||||
| - `{Array} selected`:设置后期作用的覆盖物 | |||||
| ## DepthOfField | |||||
| > 景深效果 | |||||
| ### example | |||||
| ```js | |||||
| effect.depthOfField.enable = true | |||||
| ``` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Number}} focalDistance`:焦距 | |||||
| - `{Number} delta`:Delta | |||||
| - `{Number} sigma`:Sigma | |||||
| - `{Number} stepSize`:StepSize | |||||
| - `{Array} selected`:设置后期作用的覆盖物 | |||||
| ## LensFlare | |||||
| > 镜头耀斑效果 | |||||
| ### example | |||||
| ```js | |||||
| effect.lensFlare.enable = true | |||||
| ``` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Number}} intensity`:强度 | |||||
| - `{Number} distortion`:扭曲度 | |||||
| - `{Number} dirtAmount`:分散度 | |||||
| - `{Number} haloWidth`:光圈宽度 | |||||
| - `{Array} selected`:设置后期作用的覆盖物 | |||||
| ## Night | |||||
| > 夜视效果 | |||||
| ### example | |||||
| ```js | |||||
| effect.night.enable = true | |||||
| ``` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Array} selected`:设置后期作用的覆盖物 | |||||
| ## Silhouette | |||||
| > 描边效果 | |||||
| ### example | |||||
| ```js | |||||
| effect.silhouette.enable = true | |||||
| ``` | |||||
| ### properties | |||||
| - `{Boolean} enable`:是否启用 | |||||
| - `{Color} color`:颜色 | |||||
| - `{Number} length`:长度 | |||||
| - `{Array} selected`:设置后期作用的覆盖物 | |||||
| ## DC.CircleScan | |||||
| > 扫描圈,继承于[Animation](#animation) | |||||
| ### example | |||||
| ```js | |||||
| let circleScan = new DC.CircleScan(viewer, '120, 20', 200) | |||||
| circleScan.start() | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(viewer,position,radius,options)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{Viewer} viewer`:场景 | |||||
| - `{DC.Position} position`:位置 | |||||
| - `{Number} radius`:半径 | |||||
| - `{Object} options`:属性 | |||||
| - 返回值 `circleScan` | |||||
| ```json | |||||
| // 属性参数(optional) | |||||
| { | |||||
| "color": DC.Color.BLUE, // 颜色 | |||||
| "speed": 5 // 速度 | |||||
| } | |||||
| ``` | |||||
| ## DC.RadarScan | |||||
| > 雷达扫描,继承于[Animation](#animation) | |||||
| ### example | |||||
| ```js | |||||
| let radarScan = new DC.RadarScan(viewer, '120, 20', 200) | |||||
| radarScan.start() | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(viewer,position,radius,options)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{Viewer} viewer`:场景 | |||||
| - `{DC.Position} position`:位置 | |||||
| - `{Number} radius`:半径 | |||||
| - `{Object} options`:属性 | |||||
| - 返回值 `radarScan` | |||||
| ```json | |||||
| // 属性参数(optional) | |||||
| { | |||||
| "color": DC.Color.BLUE, // 颜色 | |||||
| "speed": 5 // 速度 | |||||
| } | |||||
| ``` |
| # 全局 API 🌎 | |||||
| ## ready() | |||||
| > 框架主入口函数,使用框架时必须以其开始,否则使用框架 | |||||
| ```js | |||||
| DC.ready({}).then(()=>{}) | |||||
| ``` | |||||
| - 参数 | |||||
| - `{Object} config`:配置参数 | |||||
| - 返回值 `Promise` | |||||
| ```json | |||||
| //属性参数(可选) | |||||
| { | |||||
| "Cesium": '<自定义的Cesium库,如果未设置,将使用框架内部默认Cesium框架>', | |||||
| "echarts": '<echarts库,设置后将加载echarts图层>', | |||||
| "baseUrl": '<Cesium 静态资源路径,默认值为:“./libs/dc-sdk/resources/” >' | |||||
| } | |||||
| ``` | |||||
| ## registerLib() | |||||
| > 框架中注册第三放框架包, | |||||
| ```js | |||||
| DC.registerLib("turf",turf) | |||||
| console.log(DC.__namspace.turf) | |||||
| ``` | |||||
| - 参数 | |||||
| - `{String} name`:名称 | |||||
| - `{Object} lib`: 库模块 | |||||
| ## getLib() | |||||
| > 获取框架中注册的第三方框架包, | |||||
| ```js | |||||
| let turf = DC.getLib("turf") | |||||
| ``` | |||||
| - 参数 | |||||
| - `{String} name`:名称 | |||||
| - 返回值 `Object` | |||||
| ## 常量 | |||||
| > 框架内部默认常量 | |||||
| ::: warning | |||||
| 开发时请使用默认常量进行开发 | |||||
| ::: | |||||
| ### MouseEventType | |||||
| **_`DC.MouseEventType.LEFT_DOWN`_**: (场景、图层、覆盖物)鼠标左键按下事件 | |||||
| **_`DC.MouseEventType.LEFT_UP`_**: (场景、图层、覆盖物)鼠标左键抬升事件 | |||||
| **_`DC.MouseEventType.CLICK`_**: (场景、图层、覆盖物)鼠标点击事件 | |||||
| **_`DC.MouseEventType.RIGHT_DOWN`_**: (场景、图层、覆盖物)鼠标右键按下事件 | |||||
| **_`DC.MouseEventType.RIGHT_UP`_**: (场景、图层、覆盖物)鼠标右键按下事件 | |||||
| **_`DC.MouseEventType.RIGHT_CLICK`_**: (场景、图层、覆盖物)鼠标右击事件 | |||||
| **_`DC.MouseEventType.DB_CLICK`_**: (场景、图层、覆盖物)鼠标双击事件 | |||||
| **_`DC.MouseEventType.MOUSE_MOVE`_**: 场景鼠标移动事件 | |||||
| **_`DC.MouseEventType.WHEEL`_**: 场景鼠标滚轮事件 | |||||
| **_`DC.MouseEventType.MOUSE_OVER`_**: 覆盖物鼠标移入事件 | |||||
| **_`DC.MouseEventType.MOUSE_OUT`_**: 覆盖物鼠标移出事件 | |||||
| ### SceneEventType | |||||
| **_`DC.SceneEventType.CAMERA_MOVE_END`_**: 相机移动完成 | |||||
| **_`DC.SceneEventType.CAMERA_CHANGED`_**: 相机位置完成 | |||||
| **_`DC.SceneEventType.PRE_UPDATE`_**: 场景更新前 | |||||
| **_`DC.SceneEventType.POST_UPDATE`_**: 场景更新后 | |||||
| **_`DC.SceneEventType.PRE_RENDER`_**: 场景渲染前 | |||||
| **_`DC.SceneEventType.POST_RENDER`_**: 场景渲染后 | |||||
| **_`DC.SceneEventType.MORPH_COMPLETE`_**: 场景模式变换完成 | |||||
| **_`DC.SceneEventType.CLOCK_TICK`_**: 时钟跳动 | |||||
| **_`DC.SceneEventType.RENDER_ERROR`_**: 渲染错误 | |||||
| ### MouseMode | |||||
| **_`DC.MouseMode.LEFT_MIDDLE`_**: 左键拖动,中键翻转(默认) | |||||
| **_`DC.MouseMode.LEFT_RIGHT`_**: 左键拖动,右键翻转 | |||||
| ### ImageryType | |||||
| **_`DC.ImageryType.ARCGIS`_**: arcgis 地图 | |||||
| **_`DC.ImageryType.SINGLE_TILE`_**: 单图片地图 | |||||
| **_`DC.ImageryType.WMS`_**: WMS 地图 | |||||
| **_`DC.ImageryType.WMTS`_**: WMTS 地图 | |||||
| **_`DC.ImageryType.XYZ`_**: xyz 格式地图 | |||||
| **_`DC.ImageryType.COORD`_**: 瓦片坐标地图 | |||||
| **_`DC.ImageryType.AMAP`_**: 高德地图 | |||||
| **_`DC.ImageryType.BAIDU`_**: 百度地图 | |||||
| **_`DC.ImageryType.GOOGLE`_**: 谷歌地图 | |||||
| **_`DC.ImageryType.TDT`_**: 天地图 | |||||
| **_`DC.ImageryType.TENCENT`_**: 腾讯地图 | |||||
| **_`DC.ImageryType.GEO_VIS`_**: 星图地图 | |||||
| ### TerrainType | |||||
| **_`DC.TerrainType.NONE`_**: 无地形 | |||||
| **_`DC.TerrainType.XYZ`_**: xyz 格式地形 | |||||
| **_`DC.TerrainType.GOOGLE`_**: 谷歌地形 | |||||
| **_`DC.TerrainType.ARCGIS`_**: arcgis 地形 | |||||
| **_`DC.TerrainType.VR`_**: VR 地形 | |||||
| ### LayerType | |||||
| **_`DC.LayerType.VECTOR`_**: 矢量图层 | |||||
| **_`DC.LayerType.PRIMITIVE`_**: 图元图层 | |||||
| **_`DC.LayerType.TILESET`_**: 3dtiles 图层 | |||||
| **_`DC.LayerType.HTML`_**: html 图层 | |||||
| **_`DC.LayerType.GEOJSON`_**: GeoJson 图层 | |||||
| **_`DC.LayerType.CLUSTER`_**: 聚合图层 | |||||
| **_`DC.LayerType.KML`_**: kml 图层 | |||||
| **_`DC.LayerType.CZML`_**: czml 图层 | |||||
| **_`DC.LayerType.HEAT`_**: 热区图层 | |||||
| **_`DC.LayerType.CHART`_**: echarts 图层 | |||||
| ### OverlayType | |||||
| **_`DC.OverlayType.POINT`_**: 点 **_`可标绘`_** | |||||
| **_`DC.OverlayType.POLYLINE`_**: 线 **_`可标绘`_** | |||||
| **_`DC.OverlayType.POLYGON`_**: 面 **_`可标绘`_** | |||||
| **_`DC.OverlayType.MODEL`_**: 模型 | |||||
| **_`DC.OverlayType.BILLBOARD`_**: 图标点 **_`可标绘`_** | |||||
| **_`DC.OverlayType.RECTANGLE`_**: 矩形 **_`可标绘`_** | |||||
| **_`DC.OverlayType.CIRCLE`_**: 圆 **_`可标绘`_** | |||||
| **_`DC.OverlayType.LABEL`_**: 标签 | |||||
| **_`DC.OverlayType.TILESET`_**: 3DTiles | |||||
| **_`DC.OverlayType.BOX`_**: 盒 | |||||
| **_`DC.OverlayType.CORRIDOR`_**: 走廊 | |||||
| **_`DC.OverlayType.CYLINDER`_**: 圆柱 | |||||
| **_`DC.OverlayType.ELLIPSE`_**: 椭圆 | |||||
| **_`DC.OverlayType.ELLIPSOID`_**: 球体 | |||||
| **_`DC.OverlayType.PLANE`_**: 面板 | |||||
| **_`DC.OverlayType.POLYLINE_VOLUME`_**: 管道 | |||||
| **_`DC.OverlayType.WALL`_**: 墙体 | |||||
| **_`DC.OverlayType.DYNAMIC_BILLBOARD`_**: 动态图标点 | |||||
| **_`DC.OverlayType.DYNAMIC_MODEL`_**: 动态模型点 | |||||
| **_`DC.OverlayType.CUSTOM_BILLBOARD`_**: 自定义图标 | |||||
| **_`DC.OverlayType.CUSTOM_LABEL`_**: 自定义标签 | |||||
| **_`DC.OverlayType.ATTACK_ARROW`_**: 攻击箭头 **_`可标绘`_** | |||||
| **_`DC.OverlayType.DOUBLE_ARROW`_**: 双箭头 **_`可标绘`_** | |||||
| **_`DC.OverlayType.FINE_ARROW`_**: 直箭头 **_`可标绘`_** | |||||
| **_`DC.OverlayType.GATHERING_PLACE`_**: 聚集地 **_`可标绘`_** | |||||
| **_`DC.OverlayType.TAILED_ATTACK_ARROW`_**: 燕尾攻击箭头 **_`可标绘`_** | |||||
| **_`DC.OverlayType.BILLBOARD_PRIMITIVE`_**: 图标图元 | |||||
| **_`DC.OverlayType.DIFFUSE_WALL_PRIMITIVE`_**: 扩散墙图元 | |||||
| **_`DC.OverlayType.ELEC_ELLIPSOID_PRIMITIVE`_**: 电弧球图元 | |||||
| **_`DC.OverlayType.FLOW_LINE_PRIMITIVE`_**: 流动线图元 | |||||
| **_`DC.OverlayType.LABEL_PRIMITIVE`_**: 文本图元 | |||||
| **_`DC.OverlayType.MODEL_PRIMITIVE`_**: 模型图元 | |||||
| **_`DC.OverlayType.POINT_PRIMITIVE`_**: 点图元 | |||||
| **_`DC.OverlayType.POLYLINE_PRIMITIVE`_**: 线图元 | |||||
| **_`DC.OverlayType.SCAN_CIRCLE_PRIMITIVE`_**: 扫描圆图元 | |||||
| **_`DC.OverlayType.TRAIL_LINE_PRIMITIVE`_**: 轨迹线图元 | |||||
| **_`DC.OverlayType.WATER_PRIMITIVE`_**: 水面图元 | |||||
| **_`DC.OverlayType.VIDEO_PRIMITIVE`_**: 视频图元 | |||||
| ### TrackViewMode | |||||
| **_`DC.TrackViewMode.FP`_**: 第一人称视角 | |||||
| **_`DC.TrackViewMode.TP`_**: 第三人称视角 | |||||
| **_`DC.TrackViewMode.TRACKED`_**: 跟随视角 | |||||
| **_`DC.TrackViewMode.FREE`_**: 自由视角 |
| # 图层 API 🌎 | |||||
| 将具有相同业务逻辑或属性的覆盖元素进行分类,以便于同一管理 | |||||
| ## DC.Layer | |||||
| > 图层的基类,其子类是实例化后需添加到三维场景中方可展示各类三维数据 | |||||
| :::warning | |||||
| 该基本类无法实例化,既视实例化后也无法使用 | |||||
| ::: | |||||
| ### properties | |||||
| - `{String} id`:唯一标识 **_`readonly`_** | |||||
| - `{Boolean} show`:是否显示 | |||||
| - `{Object} attr`:业务属性 | |||||
| - `{String} state`:图层状态 **_`readonly`_** | |||||
| - `{String} type`:图层类型 **_`readonly`_** | |||||
| ### methods | |||||
| - **_addOverlay(overlay)_** | |||||
| 添加覆盖物 | |||||
| - 参数 | |||||
| - `{Overlay} overlay`:覆盖物 | |||||
| - 返回值 `this` | |||||
| - **_addOverlays(overlays)_** | |||||
| 添加覆盖物数组 | |||||
| - 参数 | |||||
| - `{Array<Overlay>} overlays`:覆盖物数组 | |||||
| - 返回值 `this` | |||||
| - **_removeOverlay(overlay)_** | |||||
| 删除覆盖物 | |||||
| - 参数 | |||||
| - `{Overlay} overlay`:覆盖物 | |||||
| - 返回值 `this` | |||||
| - **_getOverlay(overlayId)_** | |||||
| 根据 Id 获取覆盖物`(不推荐用)` | |||||
| - 参数 | |||||
| - `{String} overlayId`:覆盖物唯一标识(默认产生) | |||||
| - 返回值 `overlay` | |||||
| - **_getOverlayById(Id)_** | |||||
| 根据业务 Id 获取覆盖物`(推荐用)` | |||||
| - 参数 | |||||
| - `{String} Id`:覆盖物业务唯一标识 | |||||
| - 返回值 `overlay` | |||||
| - **_getOverlaysByAttr(attrName, attrVal)_** | |||||
| 根据覆盖物属性获取覆盖物 | |||||
| - 参数 | |||||
| - `{String} attrName`:属性名称 | |||||
| - `{Object} attrVal`:属性值 | |||||
| - 返回值 `array` | |||||
| ```js | |||||
| overlay.attr.name = 'test' //设置覆盖物的属性 | |||||
| let arr = layer.getOverlaysByAttr('name', 'test') //根据属性获取覆盖物 | |||||
| ``` | |||||
| - **_getOverlays()_** | |||||
| 获取所有覆盖物 | |||||
| - 返回值 `array` | |||||
| - **_eachOverlay(method, context)_** | |||||
| 遍历覆盖物 | |||||
| - 参数 | |||||
| - `{Function} method`:回调函数,参数为每一个覆盖物 | |||||
| - `{Object} context`:上下文 | |||||
| - 返回值 `this` | |||||
| ```js | |||||
| layer.eachOverlay((item) => {}) | |||||
| ``` | |||||
| - **_clear()_** | |||||
| 清空图层 | |||||
| - 返回值 `this` | |||||
| - **_remove()_** | |||||
| 删除图层 | |||||
| - 返回值 `this` | |||||
| - **_addTo(viewer)_** | |||||
| 添加图层到场景 | |||||
| - 参数 | |||||
| - `{Viewer|World} viewer`:场景 | |||||
| - 返回值 `this` | |||||
| - **_on(type, callback, context)_** | |||||
| 事件订阅 | |||||
| - 参数 | |||||
| - `{Object} type` :订阅类型 | |||||
| - `{Function} callback` :订阅回调 | |||||
| - `{Object} context` :上下文 | |||||
| - 返回值 `this` | |||||
| - **_off(type, callback, context)_** | |||||
| 取消事件订阅 | |||||
| - 参数 | |||||
| - `{Object} type` :订阅类型 | |||||
| - `{Function} callback` :订阅回调 | |||||
| - `{Object} context` :上下文 | |||||
| - 返回值 `this` | |||||
| - **_fire(type,params)_** | |||||
| 触发事件 | |||||
| - 参数 | |||||
| - `{Object} type` :订阅类型 | |||||
| - `{Object} params` :参数 | |||||
| - 返回值 `this` | |||||
| ### static methods | |||||
| - **_registerType(type)_** | |||||
| 注册图层类型 | |||||
| - 参数 | |||||
| - `{String} type`:图层类型 | |||||
| - **_getLayerType()_** | |||||
| 获取图层类型 | |||||
| - 返回值 `string` | |||||
| ## DC.LayerGroup | |||||
| > 图层组,将图层按一定的逻辑分组,方便统一管理 | |||||
| ### example | |||||
| ```js | |||||
| let layerGroup = new DC.LayerGroup('id') | |||||
| viewer.addLayerGroup(layerGroup) | |||||
| let layer = new DC.VectorLayer('layer') | |||||
| layerGroup.addLayer(layer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层组唯一标识 | |||||
| - 返回值 `layerGroup` | |||||
| ### properties | |||||
| - `{String} id`:唯一标识 **_`readonly`_** | |||||
| - `{Boolean} show`:是否显示 | |||||
| - `{String} type`:图层类型 **_`readonly`_** | |||||
| ### methods | |||||
| - **_addLayer(layer)_** | |||||
| 添加图层 | |||||
| - 参数 | |||||
| - `{Layer} layer`:图层 | |||||
| - 返回值 `this` | |||||
| - **_removeLayer(layer)_** | |||||
| 删除图层 | |||||
| - 参数 | |||||
| - `{Layer} layer`:图层 | |||||
| - 返回值 `this` | |||||
| - **_getLayer(id)_** | |||||
| 获取图层 | |||||
| - 参数 | |||||
| - `{String} id`:图层 ID | |||||
| - 返回值 `layer` | |||||
| - **_getLayers()_** | |||||
| 获取所有图层,不包括地图 | |||||
| - 返回值 `layer` | |||||
| - **_remove()_** | |||||
| 删除图层组 | |||||
| - 返回值 `this` | |||||
| - **_addTo(viewer)_** | |||||
| 添加图层到场景 | |||||
| - 参数 | |||||
| - `{Viewer|World} viewer`:场景 | |||||
| - 返回值 `this` | |||||
| ## DC.VectorLayer | |||||
| > 矢量图层,用于添加各类矢量数据(点、线、面等),将矢量数据按一定的逻辑分组,方便统一管理,继承于[Layer](#dc-layer) | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.VectorLayer('id') | |||||
| viewer.addLayer(layer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - 返回值 `vectorLayer` | |||||
| ## DC.DynamicLayer | |||||
| > 动态图层,用于添加各类动态矢量数据(图标、模型等),将矢量数据按一定的逻辑分组,方便统一管理,继承于[Layer](#dc-layer) | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.DynamicLayer('id') | |||||
| viewer.addLayer(layer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - 返回值 `dynamicLayer` | |||||
| ## DC.PrimitiveLayer | |||||
| > 图元图层,用于添加各类图元数据,将图元数据按一定的逻辑分组,方便统一管理,继承于[Layer](#dc-layer) | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.PrimitiveLayer('id') | |||||
| viewer.addLayer(layer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - 返回值 `primitiveLayer` | |||||
| ## DC.GroundPrimitiveLayer | |||||
| > 贴地图元图层,用于添加各类贴地图元数据,将贴地图元数据按一定的逻辑分组,方便统一管理,继承于[Layer](#dc-layer) | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.GroundPrimitiveLayer('id') | |||||
| viewer.addLayer(layer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - 返回值 `groundPrimitiveLayer` | |||||
| ## DC.TilesetLayer | |||||
| > 3dTiles 图层,用于添加 3dTiles 模型数据, 继承于[Layer](#dc-layer) | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.TilesetLayer('id') | |||||
| viewer.addLayer(layer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - 返回值 `tilesetLayer` | |||||
| ## DC.GeoJsonLayer | |||||
| > GeoJson 图层,用于加载 GeoJson 格式数据,继承于[Layer](#dc-layer), | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.GeoJsonLayer('id', '**/**.geojson') | |||||
| layer.eachOverlay((item) => { | |||||
| // item 为一个entity, | |||||
| if (item.polyline) { | |||||
| //todo | |||||
| let polyline = DC.Polyline.fromEntity(item) | |||||
| } | |||||
| if (item.polygon) { | |||||
| //todo | |||||
| let polygon = DC.Polygon.fromEntity(item) | |||||
| } | |||||
| if (item.billboard) { | |||||
| //todo | |||||
| let point = DC.Point.fromEntity(item) | |||||
| let divIcon = DC.DivIcon.fromEntity(item) | |||||
| let billboard = DC.Billboard.fromEntity(item) | |||||
| } | |||||
| }) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id,url,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - `{String} url`:数据地址 | |||||
| - `{Object} options`:属性配置,详情参考:[GeoJsonDataSource](http://resource.dvgis.cn/cesium-docs/GeoJsonDataSource.html) | |||||
| - 返回值 `geoJsonLayer` | |||||
| ### methods | |||||
| - **_toVectorLayer()_** | |||||
| 转换为矢量图层 | |||||
| - 返回值 `vectorLayer` | |||||
| - **_toModelLayer(modelUrl)_** | |||||
| 转换为模型图层 | |||||
| - 参数 | |||||
| - `{String} modelUrl`:模型地址 | |||||
| - 返回值 `vectorLayer` | |||||
| ## DC.TopoJsonLayer | |||||
| > TopoJson 图层,用于加载 TopoJson 格式数据,继承于[Layer](#dc-layer), | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.GeoJsonLayer('id', '**/**.geojson') | |||||
| layer.eachOverlay((item) => { | |||||
| // item 为一个entity, | |||||
| if (item.polyline) { | |||||
| //todo | |||||
| let polyline = DC.Polyline.fromEntity(item) | |||||
| } | |||||
| if (item.polygon) { | |||||
| //todo | |||||
| let polygon = DC.Polygon.fromEntity(item) | |||||
| } | |||||
| if (item.billboard) { | |||||
| //todo | |||||
| let point = DC.Point.fromEntity(item) | |||||
| let divIcon = DC.DivIcon.fromEntity(item) | |||||
| let billboard = DC.Billboard.fromEntity(item) | |||||
| } | |||||
| }) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id,url,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - `{String} url`:数据地址 | |||||
| - `{Object} options`:属性配置,详情参考:[GeoJsonDataSource](http://resource.dvgis.cn/cesium-docs/GeoJsonDataSource.html) | |||||
| - 返回值 `topoJsonLayer` | |||||
| ### methods | |||||
| - **_toVectorLayer()_** | |||||
| 转换为矢量图层 | |||||
| - 返回值 `vectorLayer` | |||||
| - **_toModelLayer(modelUrl)_** | |||||
| 转换为模型图层 | |||||
| - 参数 | |||||
| - `{String} modelUrl`:模型地址 | |||||
| - 返回值 `vectorLayer` | |||||
| ## DC.HtmlLayer | |||||
| > Html 图层,用于加载 DivIcon 节点,继承于[Layer](#dc-layer), | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.HtmlLayer('dom') | |||||
| viewer.addLayer(layer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id)_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - 返回值 `htmlLayer` | |||||
| ## DC.CzmlLayer | |||||
| > Czml 图层,用于加载 Czml 数据,继承于[Layer](#dc-layer) | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.CzmlLayer('id', '**/**.czml') | |||||
| layer.eachOverlay((item) => { | |||||
| if (item.polyline) { | |||||
| //todo | |||||
| } | |||||
| if (item.polygon) { | |||||
| //todo | |||||
| } | |||||
| if (item.billboard) { | |||||
| //todo | |||||
| } | |||||
| }) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id,url,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - `{String} url`:数据地址 | |||||
| - `{Object} options`:属性配置,详情参考:[CzmlDataSource](http://resource.dvgis.cn/cesium-docs/CzmlDataSource.html) | |||||
| - 返回值 `czmlLayer` | |||||
| ## DC.KmlLayer | |||||
| > Kml 图层,用于加载 Kml 数据,继承于[Layer](#dc-layer) | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.KmlLayer('id', '**/**.kml') | |||||
| layer.eachOverlay((item) => { | |||||
| if (item.polyline) { | |||||
| //todo | |||||
| } | |||||
| if (item.polygon) { | |||||
| //todo | |||||
| } | |||||
| if (item.billboard) { | |||||
| //todo | |||||
| } | |||||
| }) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id,url,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - `{String} url`:数据地址 | |||||
| - `{Object} options`:属性配置,详情参考:[KmlDataSource](http://resource.dvgis.cn/cesium-docs/KmlDataSource.html) | |||||
| - 返回值 `kmlLayer` | |||||
| ## DC.GpxLayer | |||||
| > GPX 图层,用于加载 gpx 数据,继承于[Layer](#dc-layer) | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.GpxLayer('id', '**/**.gpx') | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id,url,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - `{String} url`:数据地址 | |||||
| - `{Object} options`:属性配置,详情参考:[GpxDataSource](http://resource.dvgis.cn/cesium-docs/GpxDataSource.html) | |||||
| - 返回值 `gpxLayer` | |||||
| ## DC.ClusterLayer | |||||
| > 聚合图层,继承于[Layer](../dc-sdk/#layer) | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.ClusterLayer('id',{image:''}) | |||||
| viewer.addLayer(layer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - `{Object} options`:属性配置 | |||||
| - 返回值 `clusterLayer` | |||||
| ```js | |||||
| // 属性参数(可选) | |||||
| { | |||||
| "radius": 40,//像素范围 | |||||
| "maxZoom": 25, | |||||
| "image": "<单个点图片地址>", | |||||
| "style": "circle", // circle 、 clustering 、custom | |||||
| "gradientColors": { | |||||
| "0.0001": DC.Color.DEEPSKYBLUE, | |||||
| "0.001": DC.Color.GREEN, | |||||
| "0.01": DC.Color.ORANGE, | |||||
| "0.1": DC.Color.RED | |||||
| },//幅度颜色设置 | |||||
| "gradientImages": {},//幅度图片设置,仅当style为custom有效 | |||||
| "clusterSize":16//集合图标尺寸 | |||||
| "fontSize": 12, | |||||
| // 字体大小 | |||||
| "fontColor": DC.Color.BLACK //字体颜色 | |||||
| "getCountOffset": (count)=>{return {x:0,y:0}} //字体偏移函数 | |||||
| } | |||||
| ``` | |||||
| ### methods | |||||
| - **_setPoints(points)_** | |||||
| 设置点位 | |||||
| - 参数 | |||||
| - `{Array<Object>} points`:点位信息 | |||||
| - 返回值 `clusterLayer` | |||||
| ## DC.HeatMapLayer | |||||
| > 热区图层,继承于[Layer](../dc-sdk/#layer) | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.HeatMapLayer('layer') | |||||
| viewer.addLayer(layer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id,bounds,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - `{Object} options`:属性配置 | |||||
| - 返回值 `heatMapLayer` | |||||
| ```json | |||||
| //属性参数(可选) | |||||
| { | |||||
| "gradient": { | |||||
| "0.5": "green", | |||||
| "0.6": "orange", | |||||
| "0.95": "red" | |||||
| }, //颜色设置 | |||||
| "height": 0, // 高度 | |||||
| "radius": 30, // 半径 | |||||
| "useGround": false, //是否使用贴地模式 | |||||
| "classificationType": 2 //分类 是否影响地形,3D切片或同时影响这两者。0:地形、1:3D切片、2:两者。贴地模式下生效 | |||||
| } | |||||
| ``` | |||||
| ### methods | |||||
| - **_setPoints(points)_** | |||||
| 设置点位 | |||||
| - 参数 | |||||
| - `{Array<Object>} points`:点位信息 | |||||
| - 返回值 `heatMapLayer` | |||||
| ```json | |||||
| //点位信息参数 | |||||
| { | |||||
| "lng": "", //经度 | |||||
| "lat": "", //纬度 | |||||
| "value": 10 //强度 | |||||
| } | |||||
| ``` | |||||
| ## DC.WindLayer | |||||
| > 风向图层,继承于[Layer](../dc-sdk/#layer) | |||||
| ### example | |||||
| ```js | |||||
| let layer = new DC.WindLayer('id') | |||||
| viewer.addLayer(layer) | |||||
| ``` | |||||
| ### creation | |||||
| - **_constructor(id,[options])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:图层唯一标识 | |||||
| - `{Object} options`:属性配置 | |||||
| - 返回值 `windLayer` | |||||
| ```json | |||||
| //属性参数(可选) | |||||
| { | |||||
| "globalAlpha": 0.9, //透明度 | |||||
| "lineWidth": 1, // 线宽 | |||||
| "colorScale": "#fff", //颜色 | |||||
| "velocityScale": 1 / 25, | |||||
| "maxAge": 90, | |||||
| "paths": 800, // 路径数 | |||||
| "frameRate": 20, | |||||
| "useCoordsDraw": true, | |||||
| "gpet": true | |||||
| } | |||||
| ``` | |||||
| ### methods | |||||
| - **_setData(data,[options])_** | |||||
| 设置风向数据 | |||||
| - 参数 | |||||
| - `{Object} data`:风向数据 | |||||
| - `{Object} options`:配置信息,参考构造函数的配置信息 | |||||
| - 返回值 `windLayer` | |||||
| - **_setOptions(options)_** | |||||
| 设置风向数据 | |||||
| - 参数 | |||||
| - `{Object} options`:配置信息,参考构造函数的配置信息 | |||||
| - 返回值 `windLayer` | |||||
| ## DC.ChartLayer | |||||
| > 图表图层,继承于[Layer](../layer/#layer) | |||||
| ### example | |||||
| ```js | |||||
| let chartLayer = new DC.ChartLayer('layer') | |||||
| viewer.addLayer(chartLayer) | |||||
| ``` | |||||
| :::warning | |||||
| 图表图层依赖于 echarts 库,使用前请确保全局变量中能够获取到 echarts | |||||
| ::: | |||||
| ### creation | |||||
| - **_constructor([id],[option])_** | |||||
| 构造函数 | |||||
| - 参数 | |||||
| - `{String} id`:唯一标识 | |||||
| - `{Object} option`:echarts 配置,详情参考:[echarts](https://www.echartsjs.com/zh/option.html#title) | |||||
| - 返回值 `chartLayer` | |||||
| ```json | |||||
| // options,其他的参数参考 echarts | |||||
| { | |||||
| "animation": false, // 必须要加 | |||||
| "GLMap": {}, //地图 | |||||
| "series": [ | |||||
| { | |||||
| "coordinateSystem": "GLMap" // 坐标系统 | |||||
| } | |||||
| ] | |||||
| } | |||||
| ``` | |||||
| ### methods | |||||
| - **_setOption(option)_** | |||||
| 设置点位 | |||||
| - 参数 | |||||
| - `{Object} option`:echarts 配置,详情参考:[echarts](https://www.echartsjs.com/zh/option.html#title) | |||||
| - 返回值 `this` |
| # 赞助 | |||||
| > DC-SDK 使用Apache 2.0的作为开源协议,完全自助研发;如果 DC-SDK 能够给您带来效益,请支持一下呗~` | |||||
| ## 感谢 | |||||
| > 以下列表为 DC 平台的赞助或打赏人员,排名不分先后,如果有什么隐私问题,请联系我 | |||||
| `donkie` `Wchino` `莫慌` `凌风` `老戴` `蔺星` | |||||
| ## 找到我们 | |||||
| <p style='display: flex;justify-content:space-between'> | |||||
| <img src="http://dc.dvgis.cn/examples/assets/images/base/q3.png?v=2" title="数字视觉" width="240px" height="332px" style='margin-right: 15px'/> | |||||
| <img src="http://dc.dvgis.cn/examples/assets/images/base/q1.png?v=2" title="数字视觉(已满)" width="240px" height="332px" style='margin-right: 15px'/> | |||||
| <img src="http://dc.dvgis.cn/examples/assets/images/base/q2.png?v=6" title="Cesium开心农场" width="240px" height="332px"/> | |||||
| </p> |
| --- | |||||
| next: | |||||
| text: '快速上手' | |||||
| link: '/zh/guide/get-start' | |||||
| --- | |||||
| # 简介 | |||||
| ## DC-SDK 是什么 | |||||
| **_`DC-SDK`_** 是基于开源项目 **_`Cesium`_** 进行二次开发的二三维一体的 **_`WebGis`_** 应用框架,该框架优化了部分 **_`Cesium`_** 的使用方式和增添一些通用功能,旨在为开发者快速构建 **_`WebGis`_** 应用。 | |||||
| ## DC-SDK 能做什么 | |||||
| - `二、三维场景可视化` | |||||
| 支持二三维无缝切换,一套代码多种风格。通过框架可以添加地图、各类矢量数据和模型到场景中,使场景更加贴近真实世界。 | |||||
| - `各大厂商的地图管理` | |||||
| 支持高德、百度、腾讯、天地图、Google、MapBox 等厂商的地图接入,对于国内部分地图可进行偏移处理。 | |||||
| - `各类数据的统一管理` | |||||
| 框架提供覆盖物对应的图层管理操作,通过图层可对覆盖物进行针对性的筛选和整体的控制。 | |||||
| - `各类数据动画和特效` | |||||
| 提供线、面、圆、模型等的材质效果和细节动画,让覆盖物的材质能够随着时间变化。 | |||||
| - `三维场景后期的特效` | |||||
| 提供云、雨、雪、雾等天气功能和包括绕点环绕、绕地环绕、扫描圈(雷达)、视频融合、泛光、夜视等一些动画以及后期特效。 | |||||
| - `路径漫游和定点巡航` | |||||
| 提供根据设定的路线进行自动漫游和巡航功能,方便重点区域定位查看。 | |||||
| - `空间分析能力` | |||||
| 提供测距、面积、高度等各种量算功能以及可视域、通视等三维场景分析功能。 | |||||
| - `兼容第三方地图工具库` | |||||
| 提供对 turf、heatmap、echarts 等常用可视化库和开源库的功能接入集成,避免用户的重复学习和成本投入。 |
| # 架构图 | |||||
| > DC 架构图,建议使用前先熟悉整体架构图,以便能够快速使用。[查看大图](https://dc.dvgis.cn/examples/assets/images/base/dc2.x.png) | |||||
| <img src="https://dc.dvgis.cn/examples/assets/images/base/dc2.x.png" style="width:100%;height:800px"> |
| # 从 2.x 迁移 | |||||
| ## 修改框架引入方式修改 | |||||
| ```js | |||||
| // import DC from '@dvgis/dc-sdk/dist/dc.02.基础.min' | |||||
| // import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' | |||||
| // import DcChart from '@dvgis/dc-sdk/dist/dc.chart.min' | |||||
| // import DcMapv from '@dvgis/dc-sdk/dist/dc.mapv.min' | |||||
| // import DcS3M from '@dvgis/dc-sdk/dist/dc.s3m.min' | |||||
| // import '@dvgis/dc-sdk/dist/dc.core.min.css' | |||||
| import * as DC from '@dvgis/dc-sdk' | |||||
| import '@dvgis/dc-sdk/dist/dc.min.css' | |||||
| ``` | |||||
| ## 修改框架初始函数 | |||||
| ```js | |||||
| // DC.ready(initViewer) | |||||
| DC.ready().then(initViewer) | |||||
| ``` |
| # 快速开始 | |||||
| ## 框架安装 | |||||
| `npm / yarn / pnpm` | |||||
| npm / yarn / pnpm 的方式安装,它能更好地和 `webpack` 打包工具配合使用。 | |||||
| ```shell | |||||
| npm install @dvgis/dc-sdk | |||||
| # yarn add @dvgis/dc-sdk | |||||
| # pnpm add @dvgis/dc-sdk | |||||
| ``` | |||||
| ```js | |||||
| import * as DC from '@dvgis/dc-sdk' | |||||
| import '@dvgis/dc-sdk/dist/dc.core.min.css' | |||||
| ``` | |||||
| `CDN` | |||||
| [下载链接](https://github.com/dvgis/dc-sdk/releases) | |||||
| ```html | |||||
| <script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.min.js"></script> | |||||
| <link | |||||
| href="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.min.css" | |||||
| rel="stylesheet" | |||||
| type="text/css" | |||||
| /> | |||||
| ``` | |||||
| ## 创建应用 | |||||
| > [框架安装](#框架安装) 和 [配置](#应用配置) 后,就可以开发属于自己的 **_`WebGis`_** 应用了 | |||||
| `构建三维容器` | |||||
| ```html | |||||
| <div class="viewer-container" id="viewer-container"></div> | |||||
| <!-- id属性必须赋值,否则无法创建三维场景 --> | |||||
| ``` | |||||
| `构建三维场景` | |||||
| ```js | |||||
| DC.ready().then(() => { | |||||
| let viewer = new DC.Viewer('viewer-container') | |||||
| }) | |||||
| ``` | |||||
| `运行效果` [更多示例](http://dc.dvgis.cn/#/examples) | |||||
| <iframe src="https://dc.dvgis.cn/#/editor?type=start&subType=create&example=create" frameborder="0" height="500px" width="100%" > | |||||
| </iframe> | |||||
| ## 应用配置 | |||||
| 由于 DC 框架将Cesium静态资源默认路径设置为 `./libs/dc-sdk/resources/`,这样需将 `Cesium` 相关的静态资源文件: `Assets`、`Workers` 、`ThirdParty` 复制到工程的 `libs/dc-sdk/resources` 目录下以保证三维场景能够正常呈现,也可通过全局函数进行 `Cesium` 相关的静态资源路基设置 | |||||
| > `npm / yarn / pnpm` | |||||
| `Webpack` [工程模板](https://github.com/cavencj/dc-vue-app) | |||||
| ```js | |||||
| // webpack.config.js | |||||
| const path = require('path') | |||||
| const CopywebpackPlugin = require('copy-webpack-plugin') | |||||
| const dvgisDist = './node_modules/@dvgis' | |||||
| module.exports = { | |||||
| plugins: [ | |||||
| new CopyWebpackPlugin([ | |||||
| { | |||||
| from: path.join(dvgisDist, 'dc-sdk/dist/resources'), | |||||
| to: 'libs/dc-sdk/resources', | |||||
| }, | |||||
| ]), | |||||
| ], | |||||
| } | |||||
| ``` | |||||
| `Vue2.x` [工程模板](https://github.com/dvgis/dc-vue) | |||||
| ```js | |||||
| // vue.config.js | |||||
| const path = require('path') | |||||
| const CopywebpackPlugin = require('copy-webpack-plugin') | |||||
| const dvgisDist = './node_modules/@dvgis' | |||||
| module.exports = { | |||||
| // 其他配置 | |||||
| chainWebpack: (config) => { | |||||
| config.plugin('copy').use(CopywebpackPlugin, [ | |||||
| [ | |||||
| { | |||||
| from: path.join(dvgisDist, 'dc-sdk/dist/resources'), | |||||
| to: 'libs/dc-sdk/resources', | |||||
| }, | |||||
| ], | |||||
| ]) | |||||
| }, | |||||
| } | |||||
| ``` | |||||
| `Vue3.x` [工程模板](https://github.com/dvgis/dc-vue-next) | |||||
| ```js | |||||
| // vue.config.js | |||||
| const path = require('path') | |||||
| const CopywebpackPlugin = require('copy-webpack-plugin') | |||||
| const dvgisDist = './node_modules/@dvgis' | |||||
| module.exports = { | |||||
| // 其他配置 | |||||
| chainWebpack: (config) => { | |||||
| config.plugin('copy').use(CopywebpackPlugin, [ | |||||
| { | |||||
| patterns: [ | |||||
| { | |||||
| from: path.join(dvgisDist, 'dc-sdk/dist/resources'), | |||||
| to: path.join(__dirname, 'dist', 'libs/dc-sdk/resources'), | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| ]) | |||||
| }, | |||||
| } | |||||
| ``` | |||||
| `Vite` [工程模板](https://github.com/dvgis/dc-vite) | |||||
| ```shell | |||||
| npm install @dvgis/vite-plugin-dc | |||||
| # yarn add @dvgis/vite-plugin-dc | |||||
| # pnpm add @dvgis/vite-plugin-dc | |||||
| ``` | |||||
| ```js | |||||
| // vite.config.js | |||||
| import { defineConfig } from "vite"; | |||||
| import DC from "@dvgis/vite-plugin-dc"; | |||||
| export default defineConfig({ | |||||
| plugins: [DC()], | |||||
| }); | |||||
| ``` | |||||
| `CDN` | |||||
| 直接通过[网站](https://github.com/dvgis/dc-sdk/releases)下载当前版本的资源文件 | |||||
| :::danger | |||||
| CDN 模式下开发时尽量不要使用 DC 为变量名或者命名空间,避免框架无法正常使用。 | |||||
| ::: | |||||
| ## 代码提示 | |||||
| 通过安装代码提示工具包,能够在开发过程中提示和自动完成框架内部的接口,更好地提高开发效率 | |||||
| ```shell | |||||
| npm install @dvgis/types -D | |||||
| # yarn add @dvgis/types -D | |||||
| # pnpm add @dvgis/types -D | |||||
| ``` |
| --- | |||||
| layout: home | |||||
| hero: | |||||
| name: DC-SDK | |||||
| text: 让 <code>WebGis</code> 开发更简单 | |||||
| image: | |||||
| src: /assets/doc.gif | |||||
| alt: VitePress | |||||
| actions: | |||||
| - theme: brand | |||||
| text: 快速开始 | |||||
| link: /zh/guide/introduction | |||||
| features: | |||||
| - title: 简单 | |||||
| details: 仅仅一个div和几行代码就能构建一个三维WebGis应用 | |||||
| - title: 易用 | |||||
| details: 采用标准的开发类,一个简单new操作即可得到场景要素 | |||||
| - title: 可扩展 | |||||
| details: 支持自定义cesium和gis算法库吗;提供基础类和要素生命周期hooks | |||||
| --- |