| @@ -3,9 +3,9 @@ | |||
| "colors": true, | |||
| "header-increment": false, | |||
| "line-length": false, | |||
| "no-trailing-punctuation": { "punctuation": ".,;:" }, | |||
| "no-trailing-punctuation": {"punctuation": ".,;:"}, | |||
| "no-duplicate-header": false, | |||
| "no-inline-html": false, | |||
| "no-hard-tabs": false, | |||
| "whitespace": false | |||
| } | |||
| } | |||
| @@ -0,0 +1,127 @@ | |||
| base: '/dc-docs/' | |||
| head: [['link', { rel: 'icon', href: 'favicon.png' }]] | |||
| locales: { | |||
| '/': { | |||
| lang: 'en-US', | |||
| title: 'DC-SDK Docs', | |||
| description: 'Cesium-based WebGis development platform for 2D and 3D', | |||
| }, | |||
| '/zh/': { | |||
| lang: 'zh-CN', | |||
| title: 'DC-SDK 开发文档', | |||
| description: '基于 Cesium 构建二、三维一体 WebGis 开发平台', | |||
| }, | |||
| } | |||
| themeConfig: { | |||
| locales: { | |||
| '/': { | |||
| selectText: 'Languages', | |||
| label: 'English', | |||
| nav: [ | |||
| { text: 'Introduction', link: '/introduction/' }, | |||
| { | |||
| text: 'Modules', | |||
| items: [ | |||
| { text: 'Base', link: '/base/' }, | |||
| { text: 'Map', link: '/tile/' }, | |||
| { text: 'Layers', link: '/layer/' }, | |||
| { text: 'Overlays', link: '/overlay/' }, | |||
| { text: 'Materials', link: '/material/' }, | |||
| { text: 'Effects', link: '/effect/' }, | |||
| { text: 'Tools', link: '/tools/' }, | |||
| { text: 'Analysis', link: '/analysis/' }, | |||
| { text: 'ThirdPart', link: '/third-part/' }, | |||
| ], | |||
| }, | |||
| { | |||
| text: 'Integration Vue', | |||
| items: [ | |||
| { text: 'dc-ui', link: 'http://ui.dvgis.cn/dc-ui' }, | |||
| { text: 'dc-vue', link: 'https://github.com/dvgis/dc-vue' }, | |||
| { | |||
| text: 'dc-vue-next', | |||
| link: 'https://github.com/dvgis/dc-vue-next', | |||
| }, | |||
| ], | |||
| }, | |||
| { | |||
| text: 'CesiumJS', | |||
| items: [ | |||
| { | |||
| text: 'Cesium', | |||
| items: [ | |||
| { | |||
| text: 'Github', | |||
| link: 'https://github.com/CesiumGS/cesium', | |||
| }, | |||
| { | |||
| text: 'Cesiumjs API', | |||
| link: 'https://cesium.com/docs/cesiumjs-ref-doc/', | |||
| }, | |||
| { | |||
| text: 'Fabric', | |||
| link: 'https://github.com/CesiumGS/cesium/wiki/Fabric', | |||
| }, | |||
| ], | |||
| }, | |||
| ], | |||
| }, | |||
| ], | |||
| }, | |||
| '/zh/': { | |||
| selectText: '选择语言', | |||
| label: '简体中文', | |||
| nav: [ | |||
| { text: '教程', link: '/zh/introduction/' }, | |||
| { | |||
| text: '功能模块', | |||
| items: [ | |||
| { text: '基础构成', link: '/zh/base/' }, | |||
| { text: '地图地形', link: '/zh/tile/' }, | |||
| { text: '业务图层', link: '/zh/layer/' }, | |||
| { text: '覆盖元素', link: '/zh/overlay/' }, | |||
| { text: '材质属性', link: '/zh/material/' }, | |||
| { text: '效果动画', link: '/zh/effect/' }, | |||
| { text: '实用工具', link: '/zh/tools/' }, | |||
| { text: '场景分析', link: '/zh/analysis/' }, | |||
| { text: '第三方集成', link: '/zh/third-part/' }, | |||
| ], | |||
| }, | |||
| { | |||
| text: '集成Vue', | |||
| items: [ | |||
| { text: 'dc-ui', link: 'http://ui.dvgis.cn/dc-ui' }, | |||
| { text: 'dc-vue', link: 'https://github.com/dvgis/dc-vue' }, | |||
| { | |||
| text: 'dc-vue-next', | |||
| link: 'https://github.com/dvgis/dc-vue-next', | |||
| }, | |||
| ], | |||
| }, | |||
| { | |||
| text: 'CesiumJS', | |||
| items: [ | |||
| { | |||
| text: 'Cesium', | |||
| items: [ | |||
| { | |||
| text: 'Github', | |||
| link: 'https://github.com/CesiumGS/cesium', | |||
| }, | |||
| { | |||
| text: 'API文档', | |||
| link: 'https://cesium.com/docs/cesiumjs-ref-doc/', | |||
| }, | |||
| { | |||
| text: '材质文档', | |||
| link: 'https://github.com/CesiumGS/cesium/wiki/Fabric', | |||
| }, | |||
| ], | |||
| }, | |||
| ], | |||
| }, | |||
| ], | |||
| }, | |||
| }, | |||
| } | |||
 
							 
							| @@ -0,0 +1,19 @@ | |||
| .theme-default-content:not(.custom){ | |||
| max-width:900px !important; | |||
| } | |||
| .theme-default-content code{ | |||
| color: #e96900 !important; | |||
| } | |||
| .theme-default-content li a:has(> code){ | |||
| color: #e96900 !important; | |||
| } | |||
| .theme-default-content > img{ | |||
| width:200px; | |||
| height:200px; | |||
| } | |||
| .hiden{ | |||
| hight: 0; | |||
| } | |||
| @@ -0,0 +1,7 @@ | |||
| --- | |||
| home: true | |||
| heroImage: /doc.png | |||
| actionText: GET START → | |||
| actionLink: /introduction/ | |||
| footer: Copyright © 2019 - present Digital Visual | |||
| --- | |||
| @@ -0,0 +1,478 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # Analysis 🌎 | |||
| ## DC.Measure | |||
| > viewer measure | |||
| ### example | |||
| ```js | |||
| viewer.use(new DC.Measure()) | |||
| ``` | |||
| ### creation | |||
| - **_constructor()_** | |||
| - returns `measure` | |||
| ### methods | |||
| - **_angle([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `this` | |||
| - **_area([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `this` | |||
| - **_areaSurface([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `this` | |||
| - **_distance([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `this` | |||
| - **_distanceSurface([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `this` | |||
| - **_heading([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `this` | |||
| - **_height([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `this` | |||
| - **_triangleHeight([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `this` | |||
| - **_activate(type,[options])_** | |||
| - parameters | |||
| - `{String} type` | |||
| - `{Object} options` | |||
| - returns `this` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "icon_center": "**.png", | |||
| "icon_anchor": "**.png", | |||
| "icon_midAnchor": "**.png", | |||
| "icon_size": [12, 12], | |||
| "clampToModel": false | |||
| } | |||
| ``` | |||
| - **_deactivate()_** | |||
| - returns `this` | |||
| ## DC.Analysis | |||
| > Viewer analysis | |||
| ### example | |||
| ```js | |||
| viewer.use(new DC.Analysis()) | |||
| ``` | |||
| ### creation | |||
| - **_constructor()_** | |||
| - returns `analysis` | |||
| ### methods | |||
| - **_contourLine(lineColor, lineWidth, lineSpacing)_** | |||
| Contour Line Analysis | |||
| - parameters | |||
| - `{Color} lineColor` | |||
| - `{Number} lineWidth` | |||
| - `{Number} lineSpacing` | |||
| - returns `this` | |||
| - **_shadows(startTime, multiplier)_** | |||
| Daylight Analysis | |||
| - parameters | |||
| - `{Date} startTime` | |||
| - `{Number} multiplier` | |||
| - returns `this` | |||
| - **_sightLine(startPosition, endPosition, excludes, lerpNum)_** | |||
| Through-view analysis (line) | |||
| - parameters | |||
| - `{Position|Array|String|Object} startPosition` | |||
| - `{Position|Array|String|Object} endPosition` | |||
| - `{Array<Overlay>} excludes` | |||
| - `{Number} lerpNum`: Number of Interpolation, default: 10, the larger the number the more accurate, and at the same time the amount of calculation will increase | |||
| - returns `this` | |||
| - **_sightCircle(center, radius, excludes, lerpNum)_** | |||
| Through-view analysis (circle) | |||
| - parameters | |||
| - `{Position|Array|String|Object} center` | |||
| - `{Number} radius` | |||
| - `{Array<Overlay>} excludes` | |||
| - `{Number} lerpNum`: Number of Interpolation, default: 10, the larger the number the more accurate, and at the same time the amount of calculation will increase | |||
| - returns `this` | |||
| - **_viewshed(position, radius, fov, aspectRatio, options)_** | |||
| View-Shed Analysis | |||
| - parameters | |||
| - `{Position|Array|String|Object} position` | |||
| - `{Number} radius` | |||
| - `{Number} fov` | |||
| - `{Number} aspectRatio` | |||
| - `{Object} options` | |||
| - returns `this` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "mixNum":1, | |||
| "visibleColor":DC.Color.GREEN, | |||
| "disVisibleColor":DC.Color.RED, | |||
| "showHelp": false, | |||
| "gridColor": DC.Color.YELLOW, | |||
| "lineColor": DC.Color.YELLOW.withAlpha(0.3) | |||
| } | |||
| ``` | |||
| - **_deactivate([type])_** | |||
| - parameters | |||
| - `{String} type`:Refer to `DC.AnalysisType`. When the type is empty, all analyses will be deactivated | |||
| - returns `this` | |||
| ## DC.CameraVideoLayer | |||
| > Inherited from [Layer](../layer/#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.CameraVideoLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| - parameters | |||
| - `{String} id` | |||
| - returns `videoLayer` | |||
| ### methods | |||
| - **_showHelp(show, videoOverlay, color)_** | |||
| - parameters | |||
| - `{Boolean} show` | |||
| - `{Overlay} videoOverlay` | |||
| - `{Color} color` | |||
| - returns `this` | |||
| ## DC.CameraVideo | |||
| > Inherited from [Overlay](../overlay/#overlay) | |||
| ### example | |||
| ```js | |||
| let position = new DC.Position(120, 20, 200, -20, 19) | |||
| let videoEl = new document.getElementById('video') | |||
| let cameraVideo = new DC.CameraVideo(position, videoEl) | |||
| layer.addOverlay(cameraVideo) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(position, video,[maskUrl])_** | |||
| - parameters | |||
| - `{Position} position` | |||
| - `{Element} video` | |||
| - `{String} [maskUrl]` | |||
| - returns `cameraVideo` | |||
| ### properties | |||
| - `{Position} position` | |||
| - `{Element} video` | |||
| - `{String} maskUrl` | |||
| ### methods | |||
| - **_setStyle(style)_** | |||
| - parameters | |||
| - `{Object} style` | |||
| - returns `this` | |||
| ```json | |||
| // style(optional) | |||
| { | |||
| "fov": 60, | |||
| "near": 1, | |||
| "far": 5000, | |||
| "aspectRatio": 1, | |||
| "alpha": 1, | |||
| "clearBlack": true, | |||
| "disViewColor": DC.Color.WHITE | |||
| } | |||
| ``` | |||
| ## DC.PlaneVideoLayer | |||
| > Inherited from [Layer](../layer/#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.PlaneVideoLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| - parameters | |||
| - `{String} id` | |||
| - returns `videoLayer` | |||
| ### methods | |||
| - **_showHelp(show, videoOverlay, color)_** | |||
| - parameters | |||
| - `{Boolean} show` | |||
| - `{Overlay} videoOverlay` | |||
| - `{Color} color` | |||
| - returns `this` | |||
| ## DC.PlaneVideo | |||
| > Inherited from [Overlay](../overlay/#overlay) | |||
| ### example | |||
| ```js | |||
| let position = new DC.Position(120, 20, 200, -20, 19) | |||
| let videoEl = new document.getElementById('video') | |||
| let cameraVideo = new DC.PlaneVideo(position, videoEl) | |||
| layer.addOverlay(cameraVideo) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(position, video)_** | |||
| - parameters | |||
| - `{Position} position` | |||
| - `{Element} video` | |||
| - returns `cameraVideo` | |||
| ### properties | |||
| - `{Position} position` | |||
| - `{Element} video` | |||
| ### methods | |||
| - **_setStyle(style)_** | |||
| - parameters | |||
| - `{Object} style` | |||
| - returns `this` | |||
| ```json | |||
| // style(optional) | |||
| { | |||
| "fov": 60, | |||
| "near": 1, | |||
| "far": 5000, | |||
| "aspectRatio": 1 | |||
| } | |||
| ``` | |||
| ## DC.GeoTools | |||
| > Geometry Tool | |||
| ### example | |||
| ```js | |||
| let coords = DC.GeoTools.pointBuffer( | |||
| '120.71259021075333,31.22148081085083', | |||
| 100 | |||
| ) | |||
| let coords1 = DC.GeoTools.polygonBuffer( | |||
| '120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343', | |||
| 150 | |||
| ) | |||
| ``` | |||
| ### static methods | |||
| - **_pointBuffer(position, radius, steps)_** | |||
| - parameters | |||
| - `{Array|String|Position} position` | |||
| - `{Number} radius` | |||
| - `{Number} steps` default:8 | |||
| - returns `array` | |||
| - **_polylineBuffer(positions, radius, steps)_** | |||
| - parameters | |||
| - `{Array|String|Array<Position>} positions` | |||
| - `{Number} radius` | |||
| - `{Number} steps` default:8 | |||
| - returns `array` | |||
| - **_polygonBuffer(positions, radius, steps)_** | |||
| - parameters | |||
| - `{Array|String|Array<Position>} positions` | |||
| - `{Number} radius` | |||
| - `{Number} steps` default:8 | |||
| - returns `array` | |||
| - **_transformPolylineScale(positions, factor)_** | |||
| - parameters | |||
| - `{Array|String|Array<Position>} positions` | |||
| - `{Number} factor` | |||
| - returns `array` | |||
| - **_transformPolygonScale(positions, factor)_** | |||
| - parameters | |||
| - `{Array|String|Array<Position>} positions` | |||
| - `{Number} factor` | |||
| - returns `array` | |||
| - **_transformPolylineRotate(positions, angle)_** | |||
| - parameters | |||
| - `{Array|String|Array<Position>} positions` | |||
| - `{Number} angle` | |||
| - returns `array` | |||
| - **_transformPolygonRotate(positions, angle)_** | |||
| - parameters | |||
| - `{Array|String|Array<Position>} positions` | |||
| - `{Number} angle` | |||
| - returns `array` | |||
| ## DC.GlobClipping | |||
| > Glob Clipping | |||
| ### example | |||
| ```js | |||
| let globClipping = new DC.GlobClipping(viewer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,[options])_** | |||
| - parameters | |||
| - `{Viewer} viewer` | |||
| - `{Object} options` | |||
| - returns `globClipping` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "edgeWidth": 0, | |||
| "edgeColor": DC.Color.WHITE | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{Array<Position>} positions` | |||
| - `{Number} distance` | |||
| - `{Boolean} enable` | |||
| - `{String} state` **_`readonly`_** | |||
| ## DC.TerrainClipping | |||
| > Terrain Clipping | |||
| ### example | |||
| ```js | |||
| let terrainClipping = new DC.TerrainClipping(viewer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,[options])_** | |||
| - parameters | |||
| - `{Viewer} viewer` | |||
| - `{Object} options` | |||
| - returns `terrainClipping` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "edgeWidth": 0, | |||
| "edgeColor": DC.Color.WHITE, | |||
| "lerpInterval": 50, | |||
| "bottomImage": "", | |||
| "sideImage": "" | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{Array<Position>} positions` | |||
| - `{Number} height` | |||
| - `{Boolean} enable` | |||
| - `{String} state` **_`readonly`_** | |||
| @@ -0,0 +1,727 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # Effects 🌎 | |||
| Add dynamic elements to the 3D scene to allow the scene to move and run more closely to the real world | |||
| ## DC.Weather | |||
| ### example | |||
| ```js | |||
| let weather = new DC.Weather() | |||
| viewer.use(weather) | |||
| ``` | |||
| ### creation | |||
| - **_constructor()_** | |||
| - Returns `weather` | |||
| ### properties | |||
| - [`{Rain} rain`](#rain)**_`readonly`_** | |||
| - [`{Snow} snow`](#snow) **_`readonly`_** | |||
| - [`{Fog} snow`](#fog) **_`readonly`_** | |||
| - [`{Cloud} cloud`](#cloud) **_`readonly`_** | |||
| ## Rain | |||
| ### example | |||
| ```js | |||
| viewer.weather.rain.enable = true | |||
| viewer.weather.rain.speed = 2 | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable` | |||
| - `{Number} speed` | |||
| ## Snow | |||
| ### example | |||
| ```js | |||
| viewer.weather.snow.enable = true | |||
| viewer.weather.snow.speed = 2 | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable` | |||
| - `{Number} speed` | |||
| ## Fog | |||
| ### example | |||
| ```js | |||
| viewer.weather.fog.enable = true | |||
| viewer.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 | |||
| viewer.weather.cloud.enable = true | |||
| viewer.weather.cloud.rotateAmount = 0.02 | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable` | |||
| - `{Number} rotateAmount` | |||
| ## DC.Effect | |||
| ### example | |||
| ```js | |||
| let effect = new DC.Effect() | |||
| viewer.use(effect) | |||
| ``` | |||
| ### creation | |||
| - **_constructor()_** | |||
| - Returns `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 | |||
| viewer.effect.blackAndWhite.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable` | |||
| - `{Number} gradations` | |||
| - `{Array} selected` | |||
| ## Bloom | |||
| ### example | |||
| ```js | |||
| viewer.effect.bloom.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable` | |||
| - `{Number} contrast` | |||
| - `{Number} brightness` | |||
| - `{Number} glowOnly` | |||
| - `{Number} delta` | |||
| - `{Number} sigma` | |||
| - `{Number} stepSize` | |||
| - `{Array} selected` | |||
| ## Brightness | |||
| ### example | |||
| ```js | |||
| viewer.effect.brightness.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable` | |||
| - `{Number} intensity` | |||
| - `{Array} selected` | |||
| ## DepthOfField | |||
| ### example | |||
| ```js | |||
| viewer.effect.depthOfField.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable` | |||
| - `{Number}} focalDistance` | |||
| - `{Number} delta` | |||
| - `{Number} sigma` | |||
| - `{Number} stepSize` | |||
| - `{Array} selected` | |||
| ## LensFlare | |||
| ### example | |||
| ```js | |||
| viewer.effect.lensFlare.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable` | |||
| - `{Number}} intensity` | |||
| - `{Number} distortion` | |||
| - `{Number} dirtAmount` | |||
| - `{Number} haloWidth` | |||
| - `{Array} selected` | |||
| ## Night | |||
| ### example | |||
| ```js | |||
| viewer.effect.night.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable` | |||
| - `{Array} selected` | |||
| ## Silhouette | |||
| ### example | |||
| ```js | |||
| viewer.effect.silhouette.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable` | |||
| - `{Color} color` | |||
| - `{Number} length` | |||
| - `{Array} selected` | |||
| ## Animation | |||
| > Animation base class | |||
| :::warning | |||
| The class cannot be instantiated | |||
| ::: | |||
| ### methods | |||
| - **_start()_** | |||
| - returns `this` | |||
| - **_stop()_** | |||
| - returns `this` | |||
| ## DC.AroundPoint | |||
| > Inherited from [Animation](#animation) | |||
| ### example | |||
| ```js | |||
| let aroundPoint = new DC.AroundPoint(viewer, '120.121, 31.12') | |||
| aroundPoint.start() | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,position,[options])_** | |||
| - parameters | |||
| - `{Viewer} viewer` | |||
| - `{Position|String|Array} position` | |||
| - `{Object} options` | |||
| - returns `aroundPoint` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "heading": 0, | |||
| "pitch": 0, | |||
| "range": 0, | |||
| "duration": 0, | |||
| "callback": null, | |||
| "context": null | |||
| } | |||
| ``` | |||
| ## DC.AroundView | |||
| > Inherited from [Animation](#animation) | |||
| ### example | |||
| ```js | |||
| let aroundView = new DC.AroundView(viewer) | |||
| aroundView.start() | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,options)_** | |||
| - parameters | |||
| - `{Viewer} viewer` | |||
| - `{Object} options` | |||
| - returns `aroundView` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "heading": 0, | |||
| "duration": 0, | |||
| "pitch": 0, | |||
| "roll": 0, | |||
| "callback": null, | |||
| "context": null | |||
| } | |||
| ``` | |||
| ## DC.CircleScan | |||
| > Inherited from [Animation](#animation) | |||
| ### example | |||
| ```js | |||
| let circleScan = new DC.CircleScan(viewer, '120, 20', 200) | |||
| circleScan.start() | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,position,radius,[options])_** | |||
| - parameters | |||
| - `{Viewer} viewer`:场景 | |||
| - `{DC.Position} position`:位置 | |||
| - `{Number} radius`:半径 | |||
| - `{Object} options`:属性 | |||
| - returns `circleScan` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "color": DC.Color.BLUE, | |||
| "speed": 5 | |||
| } | |||
| ``` | |||
| ## DC.Flying | |||
| > Inherited from [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)_** | |||
| - parameters | |||
| - `{Viewer} viewer`:场景 | |||
| - `{Object} options`:options | |||
| - returns `flying` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "loop": false, | |||
| "dwellTime": 3, | |||
| "callback": null | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{Array} positions` | |||
| - `{Array} durations`: The flight interval of each point, when the length of the array is 1, each interval is the same, if not 1, the length must be equal to the length of the point | |||
| ### methods | |||
| - **_start()_** | |||
| - returns `this` | |||
| - **_pause()_** | |||
| - returns `this` | |||
| - **_restore()_** | |||
| - returns `this` | |||
| ## DC.GlobeRotate | |||
| > Inherited from [Animation](#animation) | |||
| ### example | |||
| ```js | |||
| let globeRotate = new DC.GlobeRotate(viewer, { | |||
| duration: 5, | |||
| speed: 1000, | |||
| callback: () => {}, | |||
| }) | |||
| globeRotate.start() | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,[options])_** | |||
| - parameters | |||
| - `{DC.Viewer} viewer` | |||
| - `{Object} options` | |||
| - returns `globeRotate` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "speed": 12 * 1000, | |||
| "duration": 0, | |||
| "callback": null, | |||
| "context": null | |||
| } | |||
| ``` | |||
| ## DC.RadarScan | |||
| > Inherited from [Animation](#animation) | |||
| ### example | |||
| ```js | |||
| let radarScan = new DC.RadarScan(viewer, '120, 20', 200) | |||
| radarScan.start() | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,position,radius,options)_** | |||
| - parameters | |||
| - `{Viewer} viewer` | |||
| - `{DC.Position} position` | |||
| - `{Number} radius` | |||
| - `{Object} options` | |||
| - returns `radarScan` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "color": DC.Color.BLUE, | |||
| "speed": 5 | |||
| } | |||
| ``` | |||
| ## DC.RoamingController | |||
| ### example | |||
| ```js | |||
| let rc = new DC.RoamingController(viewer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer)_** | |||
| - parameters | |||
| - `{Viewer} viewer` | |||
| - returns `roamingController` | |||
| ### methods | |||
| - **_addPath(path)_** | |||
| - parameters | |||
| - `{RoamingPath} path` | |||
| - returns `this` | |||
| - **_addPaths(paths)_** | |||
| - parameters | |||
| - `{Array<RoamingPath>} paths` | |||
| - returns `this` | |||
| - **_removePath(path)_** | |||
| - parameters | |||
| - `{RoamingPath} path` | |||
| - returns `path` | |||
| - **_getPath(id)_** | |||
| - parameters | |||
| - `{String} id` | |||
| - returns `path` | |||
| - **_getPaths()_** | |||
| - returns `array` | |||
| - **_activate(path, viewOption)_** | |||
| - parameters | |||
| - `{RoamingPath} path` | |||
| - `{String} viewOption` | |||
| - returns `this` | |||
| ```json | |||
| // options (optional) | |||
| { | |||
| "pitch": 0, | |||
| "range": 1000 | |||
| } | |||
| ``` | |||
| - **_deactivate()_** | |||
| - returns `this` | |||
| - **_clear()_** | |||
| - returns `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])_** | |||
| - parameters | |||
| - `{String|Array<Position|Number|String|Object>} positions` | |||
| - `{Number} duration` | |||
| - `{String} pathMode` speed / time | |||
| - returns `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)_** | |||
| - parameters | |||
| - `{Viewer} viewer` | |||
| - returns `keyboardRoaming` | |||
| ### properties | |||
| - `{Boolean} enable` | |||
| - `{Number} moveRate` default: 100 | |||
| - `{Number} rotateRate` default: 0.01 | |||
| ## DC.TrackController | |||
| ### example | |||
| ```js | |||
| let tc = new DC.TrackController(viewer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer)_** | |||
| - parameters | |||
| - `{Viewer} viewer` | |||
| - returns `trackController` | |||
| ### methods | |||
| - **_addTrack(track)_** | |||
| - parameters | |||
| - `{Track} track` | |||
| - returns `this` | |||
| - **_addTracks(tracks)_** | |||
| - parameters | |||
| - `{Array<Track>} tracks` | |||
| - returns `this` | |||
| - **_removeTrack(track)_** | |||
| - parameters | |||
| - `{Track} track` | |||
| - returns `path` | |||
| - **_getTrack(id)_** | |||
| - parameters | |||
| - `{String} id` | |||
| - returns `track` | |||
| - **_getTracks()_** | |||
| - returns `array` | |||
| - **_play()_** | |||
| - returns `this` | |||
| - **_pause()_** | |||
| - returns `this` | |||
| - **_restore()_** | |||
| - returns `this` | |||
| - **_viewTrack(track, viewOption)_** | |||
| - parameters | |||
| - `{Track} track` | |||
| - `{String} viewOption` | |||
| - returns `this` | |||
| ```json | |||
| // options (optional) | |||
| { | |||
| "mode": null, // DC.TrackViewMode | |||
| "pitch": 0, | |||
| "range": 1000 | |||
| } | |||
| ``` | |||
| - **_releaseTrack(track)_** | |||
| - parameters | |||
| - `{Track} track`:路径 | |||
| - returns `this` | |||
| - **_clear()_** | |||
| - returns `this` | |||
| ## DC.Track | |||
| ### example | |||
| ```js | |||
| let track = new DC.Track('120.121,32.1213;121.132,32.1213', 20) | |||
| rc.addTrack(track) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(positions, duration, [callback], [options])_** | |||
| - parameters | |||
| - `{String|Array<Position|Number|String|Object>} positions` | |||
| - `{Number} duration` | |||
| - `{Function} callback`:Each point arrival callback function, parameters are: position, isLast | |||
| - `{Object} options` | |||
| - returns `track` | |||
| ```json | |||
| // options (optional) | |||
| { | |||
| "clampToGround": false, | |||
| "clampToTileset": false, | |||
| "interpolationType": "Linear", // Linear、Hermite、Lagrange | |||
| "interpolationDegree": 2, | |||
| "endDelayTime": 0.5 // End time extension time, unit:second | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{String} trackId` **_`readonly`_** | |||
| - `{String} id` | |||
| - `{String|Array<Position|Number|String|Object>} positions` | |||
| - `{Number} duration` | |||
| - `{Date} startTime` | |||
| - `{String} state` **_`readonly`_** | |||
| ### methods | |||
| - **_addPosition(position,duration)_** | |||
| - parameters | |||
| - `{Position|Array|String|Object} position` | |||
| - `{Number} duration` | |||
| - returns `this` | |||
| - **_setModel(modelUrl,style)_** | |||
| - parameters | |||
| - `{String} modelPath` | |||
| - `{Object} style` [DC.Model](../dc-sdk/#dc-model) | |||
| - returns `this` | |||
| - **_setBillboard(icon,style)_** | |||
| - parameters | |||
| - `{String} icon` | |||
| - `{Object} style` [DC.Billboard](../dc-sdk/#dc-billboard) | |||
| - returns `this` | |||
| - **_setLabel(text,style)_** | |||
| - parameters | |||
| - `{String} text` | |||
| - `{Object} style` [DC.Label](../dc-sdk/#dc-label) | |||
| - returns `this` | |||
| - **_setPath(visible,style)_** | |||
| - parameters | |||
| - `{Boolean}} visible` | |||
| - `{Object} style` [DC.Polyline](../dc-sdk/#dc-polyline) | |||
| - returns `this` | |||
| @@ -0,0 +1,362 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # Tutorials 🌎 | |||
| ## Introduction | |||
| ### What is DC-SDK | |||
| **_`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. | |||
| ### What DC-SDK can do | |||
| - `Two and three dimensional scene visualization` | |||
| Support seamless switching between two and three dimensions, a set of code with multiple styles. The framework allows you to add maps, all kinds of vector data and models to the scene, making the scene closer to the real world. | |||
| - `Map management of major manufacturers` | |||
| Support Gaode, Baidu, Tencent, Sky Map, Google, MapBox and other manufacturers' map access, for some domestic maps can be offset processing. | |||
| - `Uniform management of various types of data` | |||
| The framework provides overlays corresponding to the layer management operation, through the layer can be targeted screening and overall control of the overlay. | |||
| - `All kinds of data animation and special effects` | |||
| Provide lines, surfaces, circles, models and other material effects and detailed animation, so that the material of the overlay can change over time. | |||
| - `Special effects for post 3D scenes` | |||
| Provide weather functions such as clouds, rain, snow, fog, etc. and some animations including surround around point, surround around ground, scan circle (radar), video fusion, floodlight, night vision, etc. and post effects. | |||
| - `Path roaming and fixed-point cruising` | |||
| Provide automatic roaming and cruising function according to the set route, which is convenient to locate and view multiple key areas. | |||
| - `Spatial analysis capability` | |||
| Provide various measurement functions such as distance, area and height, as well as 3D scene analysis functions such as view-shed and through-view. | |||
| - `Compatible with third-party map tool libraries` | |||
| Provide functional access to turf, heatmap, mapv, echarts and other common visualization libraries and open source libraries to avoid repeated learning and cost investment by users. | |||
| ## Preparation | |||
| `Running Env` | |||
| DC-SDK is a development platform that relies on [`WebGL`](#webgl), which requires a `discrete graphics card` and a browser that supports `WebGL` on the development or running terminal. Recommended to use **_Chrome_**、**_Firefox_** | |||
| `Static File Server` | |||
| Static file servers are mainly used to publish map tiles, terrain, model data and other data services, such as: **_Apache Http Sever_**、**_Tomcat_** 、**_Nginx_**. Recommended to use **_Nginx_** | |||
| `Hardware Configuration` | |||
| > Hardware configuration description, the following hardware configuration is recommended for 3D scene viewing and development. | |||
| <table style="width:100%"> | |||
| <tr><td colspan=3 style="text-align:center;background:#3eaf7c;">PC Side</td></tr> | |||
| <tr><td>Project</td><td>Standard</td><td>Recommended</td></tr> | |||
| <tr><td>CPU</td><td>2.6GHz 64-bit processor</td><td>3.0GHz 64-bit processor</td></tr> | |||
| <tr><td>RAM</td><td>8GB</td><td>32GB</td></tr> | |||
| <tr><td>Graphics card model</td><td>NVIDIA GTX 1660 (or equivalent)</td><td>NVIDIA RTX 2080 (or equivalent)</td></tr> | |||
| <tr><td>Video Memory</td><td>4GB</td><td>16G</td></tr> | |||
| <tr><td>Optimal Resolution</td><td>FHD - 1920 * 1080</td><td>4K QFHD - 3840 * 2160</td></tr> | |||
| <tr><td>Operating System</td><td colspan=2>64-bit Windows 8/10/11 or 64-bit Linux desktop distribution, or macOS 10.12.1 or higher</td></tr> | |||
| <tr><td>Browser</td><td colspan=2>Google Chrome or Firefox latest version</td></tr> | |||
| </table | |||
| <table style="width:70%"> | |||
| <tr><td colspan=3 style="text-align:center;background:#3eaf7c;">Mobile devices</td></tr> | |||
| <tr><td width="16%">Platform</td><td>Android</td><td>Apple</td></tr> | |||
| <tr><td>Devices</td><td>Mobile devices compatible with Android OS, 2019 and up for mid-range and high-end models</td><td>IPhone 11 and above, IPad Pro 2019 and above</td></tr> | |||
| <tr><td>OS</td><td>Android</td><td>IOS or IPadOS</td></tr> | |||
| <tr><td>Browser</td><td colspan=2>WebGL-enabled browsers</td></tr> | |||
| </table> | |||
| ### Installation | |||
| `NPM / YARN` **_`(Recommend)`_** | |||
| Installing with NPM or YARN is recommended and it works seamlessly with webpack. | |||
| ```shell | |||
| yarn add @dvgis/dc-sdk | |||
| ------------------------- | |||
| npm install @dvgis/dc-sdk | |||
| ``` | |||
| ```js | |||
| import DC from '@dvgis/dc-sdk/dist/dc.base.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 '@dvgis/dc-sdk/dist/dc.core.min.css' | |||
| ``` | |||
| `NPM / YARN` **_`(On-demand)`_** | |||
| ```shell | |||
| yarn add @dvgis/dc-base | |||
| yarn add @dvgis/dc-core | |||
| yarn add @dvgis/dc-chart | |||
| yarn add @dvgis/dc-mapv | |||
| ------------------------- | |||
| npm install @dvgis/dc-base | |||
| npm install @dvgis/dc-core | |||
| npm install @dvgis/dc-chart | |||
| npm install @dvgis/dc-mapv | |||
| ``` | |||
| ```js | |||
| import DC from '@dvgis/dc-base' | |||
| import DcCore from '@dvgis/dc-core' | |||
| import DcChart from '@dvgis/dc-chart' | |||
| import DcMapv from '@dvgis/dc-mapv' | |||
| import '@dvgis/dc-core/dist/dc.core.min.css' | |||
| ``` | |||
| `CDN` | |||
| [Resources](https://github.com/dvgis/dc-sdk/releases) | |||
| ```html | |||
| <script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.base.min.js"></script> | |||
| <script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.core.min.js"></script> | |||
| <script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.chart.min.js"></script> | |||
| <script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.mapv.min.js"></script> | |||
| <link | |||
| href="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.core.min.css" | |||
| rel="stylesheet" | |||
| type="text/css" | |||
| /> | |||
| ``` | |||
| ::: danger | |||
| Please put the resources in the project root directory libs/dc-sdk, if you put it in other directory, the framework will not run properly. | |||
| ::: | |||
| ### Configuration | |||
| Since the DC framework sets `CESIUM_BASE_URL` to `. /libs/dc-sdk/resources/`, you need to copy `Cesium` related static resources files: `Assets`, `Workers`, `ThirdParty` to `libs/dc-sdk/resources` directory of the project to ensure that the 3D scene can be rendered properly. You can also use `DC.baseUrl` to set the static resource base related to `Cesium`. | |||
| > `NPM / YARN` | |||
| `Webpack` [Project Template](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` [Project Template](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` [Project Template](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'), | |||
| }, | |||
| ], | |||
| }, | |||
| ]) | |||
| }, | |||
| } | |||
| ``` | |||
| `CDN` | |||
| Download the current version of the resource file directly through the [website](https://github.com/dvgis/dc-sdk/releases) | |||
| ### Code hinting | |||
| By installing the code hinting toolkit, you can prompt and automate the framework's internal interfaces during development to better improve development efficiency | |||
| ```shell | |||
| npm install @dvgis/types -D | |||
| ------------------------- | |||
| yarn add @dvgis/types -D | |||
| ``` | |||
| ### Get Started | |||
| > [Installation](#installation) and [Configuration](#configuration), then you can develop your own **_`WebGis`_** application | |||
| `Create container` | |||
| ```html | |||
| <div class="viewer-container" id="viewer-container"></div> | |||
| <!-- The id attribute must be assigned a value, otherwise the 3D scene cannot be created --> | |||
| ``` | |||
| `Create viewer` | |||
| ```js | |||
| global.DC = DC | |||
| DC.use(DcCore) // install core package | |||
| DC.use(DcChart) // install chart package | |||
| DC.use(DcMapv) // install mapv package | |||
| //The above code is not needed when using CDN method, it will be installed automatically. | |||
| DC.ready(() => { | |||
| let viewer = new DC.Viewer('viewer-container') | |||
| }) | |||
| ``` | |||
| `Result` [more](http://dc.dvgis.cn/#/examples) | |||
| <iframe src="https://dc.dvgis.cn/#/editor?type=info&example=start" frameborder="0" height="500px" width="100%" > | |||
| </iframe> | |||
| ## Structure | |||
| > DC structure, it is recommended to be familiar with the overall structure diagram before use so that you can use it quickly.[view image](http://dc.dvgis.cn/examples/images/base/dc2.x.png) | |||
| <img src="http://dc.dvgis.cn/examples/images/base/dc2.x.png" style="width:100%;height:800px"> | |||
| ## Technology | |||
| ### WebGL | |||
| WebGL is a JavaScript API for rendering interactive 2D and 3D graphics in any compatible web browser without the use of plug-ins. WebGL is fully integrated into all web standards of the browser and allows for the use of GPU acceleration of image processing and effects as part of the web Canvas. WebGL elements can be added to other HTML elements and blended with other parts of the web page or web page background. WebGL programs consist of handles written in JavaScript and shader code written in OpenGL Shading Language (**`GLSL`**). | |||
| ### 3D Data Format | |||
| **`glb/gltf`** | |||
| GLTF stands for Graphics Language Transmission Format. This cross-platform format has become the standard for 3D objects on the Web. It was defined by Khronos, the 3D graphics standards organization behind OpenGL and Vulkan, making GLTF essentially a JPG format for 3D models: a common standard for Web exports. | |||
| **`OSGB`** | |||
| Open Scene Gragh Binary is the full name of OSGB, where Binary means binary. These data files are fragmented, numerous, and have large high-level pyramid files, making it difficult to form an efficient and standard web publishing scheme, and thus impossible to share data between different geographic regions and departments. | |||
| **`3dtiles`** | |||
| 3D Tiles is an open specification for streaming large scale heterogeneous 3D geospatial datasets. 3D Tiles data can be generated from shp, osgb (oblique photography), 3dmax, and other data. | |||
| **`geojson`** | |||
| GeoJSON is a format for encoding various geographic data structures, based on the Javascript object representation of geospatial information data interchange format. | |||
| GeoJSON objects can represent geometry, features or feature collections.GeoJSON supports the following geometry types: point, line, surface, multipoint, polyline, polysurface and geometry collections. A feature in GeoJSON contains a geometric object and other attributes, and a feature set represents a set of features. | |||
| **`kml/czml`** | |||
| KML/CZML is a JSON format data describing time-dynamic graphic scenes, which describes lines, points, billboards (markers), models, and other graphic primitives, and specifies how they change over time. | |||
| :::tip | |||
| Data conversion can be done with the help of [CesiumLab](http://www.cesiumlab.com) or some other conversion tools.[view image](http://dc.dvgis.cn/examples/images/base/data_transform.png) | |||
| ::: | |||
| <img src="http://dc.dvgis.cn/examples/images/base/data_transform.png" style="width:100%;height:500px"> | |||
| ### Coordinates | |||
| **`World coordinates (Cartesian3)`** | |||
| Cartesian coordinates, the coordinates of a point in a right-angle coordinate system in space with the center of the ellipsoid as the origin. | |||
| **`Geographic coordinates(Cartographic)`** | |||
| Geographical coordinate system with the origin of the coordinates at the center of mass of the ellipsoid. | |||
| Longitude: The two-sided angle between the geodetic meridian plane and the prime meridian plane at a point on the reference ellipsoid. East positive and west negative. | |||
| Latitude : The angle between the normal and the equatorial plane at a point on the reference ellipsoid. North positive and south negative. | |||
| **`Position`** | |||
| The geographic coordinate system with the origin of the coordinates at the center of mass of the ellipsoid. `DC extension` | |||
| Longitude: The angle between the geodetic meridian plane and the prime meridian plane at a point on the reference ellipsoid. East is positive and west is negative. | |||
| Latitude : The angle between the normal and the equatorial plane at a point on the reference ellipsoid. North is positive and south is negative. | |||
| Altitude : The distance from the surface of the Earth. | |||
| **`Screen coordinates (Cartesian2)`** | |||
| Browser window coordinates or windowPosition in mouse events | |||
| :::tip | |||
| The framework can use `DC.T` for all kinds of coordinate conversions | |||
| ::: | |||
| ### CRS | |||
| `WGS84` | |||
| An internationally adopted geocentric coordinate system. The coordinate origin is the center of mass of the Earth, and the Z-axis of its geocentric space-rectangular coordinate system points to the direction of the agreed Earth pole (CTP) defined by BIH (International Time Service) 1984.O. The X-axis points to the intersection of the zero meridian plane of BIH 1984.0 and the CTP equator, and the Y-axis is perpendicular to the Z-axis and X-axis to form a right-handed coordinate system, which is called the 1984 World Geodetic Coordinate System. | |||
| `CGCS2000` | |||
| 2000 China Geodetic Coordinate System 2000 (CGCS2000), also called 2000 National Geodetic Coordinate System, is a new generation of geodetic coordinate system in China, which has been officially implemented in China at the beginning of 21st century. It is not much different from `WGS84`, which is used in domestic sky maps. | |||
| `GCJ02` | |||
| GCJ-02 is a coordinate system for GIS developed by the State Bureau of Surveying and Mapping of China (G for Guojia State, C for Cehui Surveying and Mapping, and J for Ju Bureau). It is actually an artificial bias processing of the real coordinate system, which encrypts the real coordinates into false coordinates according to a special algorithm, and this bias is not a linear bias, so the bias will be different from place to place. The encrypted coordinates are often called "Mars coordinate system". | |||
| `BD09` | |||
| BD09 latitude and longitude projection belongs to Baidu coordinate system, which is based on the standard latitude and longitude with GCJ-02 bias and Baidu's own bias algorithm, that is, it is biased twice on top of the standard latitude and longitude. | |||
| [ref](http://www.rivermap.cn/docs/show-1829.html) | |||
| :::tip | |||
| The framework can use `DC.CoordTransform` for all kinds of coordinate system conversion | |||
| ::: | |||
| ## Support | |||
| > If dc-sdk can bring you benefits, please support it! | |||
| <p style="display:flex"> | |||
| <a href="https://www.paypal.com/paypalme/cavencj" target="_blank"> | |||
| <img src="https://www.paypalobjects.com/images/shared/paypal-logo-129x32.svg" style="margin-top:10px;margin-right:20px" /> | |||
| </a> | |||
| <img src="http://dc.dvgis.cn/examples/images/base/sponsor.jpg?v=2" title="数字视觉"/> | |||
| </p> | |||
| @@ -0,0 +1,671 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # Layers 🌎 | |||
| Categorize overlay elements with the same business logic or attributes for the same management | |||
| ## Layer | |||
| > The base class of the layer, its subclasses are instantiated and need to be added to the 3D scene in order to display all kinds of 3D data | |||
| :::warning | |||
| This basic class cannot be instantiated | |||
| ::: | |||
| ### properties | |||
| - `{String} id` **_`readonly`_** | |||
| - `{Boolean} show` | |||
| - `{Object} attr`:Business Properties | |||
| - `{String} state` **_`readonly`_** | |||
| - `{String} type` **_`readonly`_** | |||
| ### methods | |||
| - **_addOverlay(overlay)_** | |||
| - parameters | |||
| - `{Overlay} overlay` | |||
| - returns `this` | |||
| - **_addOverlays(overlays)_** | |||
| - parameters | |||
| - `{Array<Overlay>} overlays` | |||
| - returns `this` | |||
| - **_removeOverlay(overlay)_** | |||
| - parameters | |||
| - `{Overlay} overlay` | |||
| - returns `this` | |||
| - **_getOverlay(overlayId)_** | |||
| - parameters | |||
| - `{String} overlayId` | |||
| - returns `overlay` | |||
| - **_getOverlayById(Id)_** | |||
| - parameters | |||
| - `{String} Id` | |||
| - returns `overlay` | |||
| - **_getOverlaysByAttr(attrName, attrVal)_** | |||
| - parameters | |||
| - `{String} attrName` | |||
| - `{Object} attrVal` | |||
| - returns `array` | |||
| ```js | |||
| overlay.attr.name = 'test' | |||
| let arr = layer.getOverlaysByAttr('name', 'test') | |||
| ``` | |||
| - **_getOverlays()_** | |||
| - returns `array` | |||
| - **_eachOverlay(method, context)_** | |||
| - parameters | |||
| - `{Function} method`:Callback function with parameters for overlay | |||
| - `{Object} context` | |||
| - returns `this` | |||
| ```js | |||
| layer.eachOverlay((item) => {}) | |||
| ``` | |||
| - **_clear()_** | |||
| - returns `this` | |||
| - **_remove()_** | |||
| - returns `this` | |||
| - **_addTo(viewer)_** | |||
| - parameters | |||
| - `{Viewer|World} viewer`:场景 | |||
| - returns `this` | |||
| - **_on(type, callback, context)_** | |||
| Event Subscription | |||
| - parameters | |||
| - `{Object} type` | |||
| - `{Function} callback` | |||
| - `{Object} context` | |||
| - returns `this` | |||
| - **_off(type, callback, context)_** | |||
| Event Unsubscribe | |||
| - parameters | |||
| - `{Object} type` | |||
| - `{Function} callback` | |||
| - `{Object} context` | |||
| - returns `this` | |||
| - **_fire(type,params)_** | |||
| - parameters | |||
| - `{Object} type` | |||
| - `{Object} params` | |||
| - returns `this` | |||
| ### static methods | |||
| - **_registerType(type)_** | |||
| - parameters | |||
| - `{String} type` | |||
| - **_getLayerType()_** | |||
| - returns `string` | |||
| ## DC.LayerGroup | |||
| > Layer groups, grouping layers according to a certain logic to facilitate unified management | |||
| ### example | |||
| ```js | |||
| let layerGroup = new DC.LayerGroup('id') | |||
| viewer.addLayerGroup(layerGroup) | |||
| let layer = new DC.VectorLayer('layer') | |||
| layerGroup.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| - parameters | |||
| - `{String} id` | |||
| - returns `layerGroup` | |||
| ### properties | |||
| - `{String} id` **_`readonly`_** | |||
| - `{Boolean} show` | |||
| - `{String} type` **_`readonly`_** | |||
| ### methods | |||
| - **_addLayer(layer)_** | |||
| - parameters | |||
| - `{Layer} layer` | |||
| - returns `this` | |||
| - **_removeLayer(layer)_** | |||
| - parameters | |||
| - `{Layer} layer` | |||
| - returns `this` | |||
| - **_getLayer(id)_** | |||
| - parameters | |||
| - `{String} id` | |||
| - returns `layer` | |||
| - **_getLayers()_** | |||
| - returns `layer` | |||
| - **_remove()_** | |||
| - returns `this` | |||
| - **_addTo(viewer)_** | |||
| - parameters | |||
| - `{Viewer|World} viewer`:场景 | |||
| - returns `this` | |||
| ## DC.VectorLayer | |||
| > Vector layer, used to add all kinds of vector data (points, lines, surfaces, etc.), grouping vector data according to a certain logic to facilitate unified management, inherited from [Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.VectorLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| - parameters | |||
| - `{String} id` | |||
| - returns `vectorLayer` | |||
| ## DC.DynamicLayer | |||
| > Dynamic layer, used to add all kinds of dynamic data (billboard、model etc.), grouping vector data according to a certain logic to facilitate unified management, inherited from [Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.DynamicLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| - parameters | |||
| - `{String} id` | |||
| - returns `vectorLayer` | |||
| ## DC.PrimitiveLayer | |||
| > The primitive layer, which is used to add all kinds of primitive data, group the primitive data in a certain logic to facilitate unified management, inherited from [Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.PrimitiveLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| - parameters | |||
| - `{String} id` | |||
| - returns `primitiveLayer` | |||
| ## DC.GroundPrimitiveLayer | |||
| > The ground primitive layer, which is used to add all kinds of ground primitive data, group the ground primitive data in a certain logic to facilitate unified management, inherited from [Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.GroundPrimitiveLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| - parameters | |||
| - `{String} id` | |||
| - returns `groundPrimitiveLayer` | |||
| ## DC.TilesetLayer | |||
| > 3dTiles layer, used to add 3dTiles model data, inherits from[Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.TilesetLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| - parameters | |||
| - `{String} id` | |||
| - returns `tilesetLayer` | |||
| ## DC.GeoJsonLayer | |||
| > GeoJson layer, used to load GeoJson data, inherited from [Layer](#layer), | |||
| ### example | |||
| ```js | |||
| let layer = new DC.GeoJsonLayer('id', '**/**.geojson') | |||
| layer.eachOverlay((item) => { | |||
| // item is an 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])_** | |||
| - parameters | |||
| - `{String} id` | |||
| - `{String} url` | |||
| - `{Object} options` [GeoJsonDataSource](http://resource.dvgis.cn/cesium-docs/GeoJsonDataSource.html) | |||
| - returns `geoJsonLayer` | |||
| ### methods | |||
| - **_toVectorLayer()_** | |||
| - returns `vectorLayer` | |||
| - **_toModelLayer(modelUrl)_** | |||
| - parameters | |||
| - `{String} modelUrl` | |||
| - returns `vectorLayer` | |||
| ## DC.TopoJsonLayer | |||
| > TopoJson layer, used to load TopoJson data, inherited from [Layer](#layer), | |||
| ### example | |||
| ```js | |||
| let layer = new DC.GeoJsonLayer('id', '**/**.geojson') | |||
| layer.eachOverlay((item) => { | |||
| // item is an 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])_** | |||
| - parameters | |||
| - `{String} id` | |||
| - `{String} url` | |||
| - `{Object} options` [GeoJsonDataSource](http://resource.dvgis.cn/cesium-docs/GeoJsonDataSource.html) | |||
| - returns `topoJsonLayer` | |||
| ### methods | |||
| - **_toVectorLayer()_** | |||
| - returns `vectorLayer` | |||
| - **_toModelLayer(modelUrl)_** | |||
| - parameters | |||
| - `{String} modelUrl` | |||
| - returns `vectorLayer` | |||
| ## DC.HtmlLayer | |||
| > Html layer for loading DivIcon nodes, inherited from [Layer](#layer), | |||
| ### example | |||
| ```js | |||
| let layer = new DC.HtmlLayer('dom') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| DC.HtmlLayer 构造函数 | |||
| - parameters | |||
| - `{String} id`:图层唯一标识 | |||
| - returns `htmlLayer` | |||
| ## DC.CzmlLayer | |||
| > Czml layer for loading Czml data, inherited from [Layer](#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])_** | |||
| - parameters | |||
| - `{String} id` | |||
| - `{String} url` | |||
| - `{Object} options` [CzmlDataSource](http://resource.dvgis.cn/cesium-docs/CzmlDataSource.html) | |||
| - returns `czmlLayer` | |||
| ## DC.KmlLayer | |||
| > Kml layer for loading Kml data, inherited from [Layer](#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])_** | |||
| - parameters | |||
| - `{String} id` | |||
| - `{String} url` | |||
| - `{Object} options` [KmlDataSource](http://resource.dvgis.cn/cesium-docs/KmlDataSource.html) | |||
| - returns `kmlLayer` | |||
| ## DC.GpxLayer | |||
| > Gpx layer for loading gpx data, inherited from [Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.GpxLayer('id', '**/**.gpx') | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id,url,[options])_** | |||
| - parameters | |||
| - `{String} id` | |||
| - `{String} url` | |||
| - `{Object} options` [GpxDataSource](http://resource.dvgis.cn/cesium-docs/GpxDataSource.html) | |||
| - returns `gpxLayer` | |||
| ## DC.ClusterLayer | |||
| > Inherited from [Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.ClusterLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id,[options])_** | |||
| - parameters | |||
| - `{String} id` | |||
| - `{Object} options` | |||
| - returns `clusterLayer` | |||
| ```json | |||
| { | |||
| "size": 48, | |||
| "pixelRange": 40, | |||
| "gradient": { | |||
| "0.0001": DC.Color.DEEPSKYBLUE, | |||
| "0.001": DC.Color.GREEN, | |||
| "0.01": DC.Color.ORANGE, | |||
| "0.1": DC.Color.RED | |||
| }, | |||
| "style": "circle", // circle or clustering | |||
| "fontSize": 12, | |||
| "fontColor": DC.Color.BLACK | |||
| } | |||
| ``` | |||
| ## DC.HeatLayer | |||
| > Inherited from [Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.HeatLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id,[options])_** | |||
| - parameters | |||
| - `{String} id` | |||
| - `{Object} options` | |||
| - returns `heatLayer` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "gradient": { | |||
| "0.5": "green", | |||
| "0.6": "orange", | |||
| "0.95": "red" | |||
| }, | |||
| "height": 0, | |||
| "radius": 30, | |||
| "useGround": false, | |||
| "classificationType": 2 // only use for "useGround" is true | |||
| } | |||
| ``` | |||
| ### methods | |||
| - **_setPositions(positions)_** | |||
| - parameters | |||
| - `{Array<Object>} positions` | |||
| - returns `heatLayer` | |||
| ```json | |||
| { | |||
| "lng": "", | |||
| "lat": "", | |||
| "value": 1 | |||
| } | |||
| ``` | |||
| - **_addPosition(position)_** | |||
| - parameters | |||
| - `{Object} position` | |||
| - returns `heatLayer` | |||
| ```json | |||
| { | |||
| "lng": "", | |||
| "lat": "", | |||
| "value": 1 | |||
| } | |||
| ``` | |||
| ## DC.WindLayer | |||
| > Inherited from [Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.WindLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id,[options])_** | |||
| - parameters | |||
| - `{String} id` | |||
| - `{Object} options` | |||
| - returns `windLayer` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "globalAlpha": 0.9, | |||
| "lineWidth": 1, | |||
| "colorScale": "#fff", | |||
| "velocityScale": 1 / 25, | |||
| "maxAge": 90, | |||
| "paths": 800, | |||
| "frameRate": 20, | |||
| "useCoordsDraw": true, | |||
| "gpet": true | |||
| } | |||
| ``` | |||
| ### methods | |||
| - **_setData(data,[options])_** | |||
| - parameters | |||
| - `{Object} data` | |||
| - `{Object} options` | |||
| - returns `windLayer` | |||
| - **_setOptions(options)_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `windLayer` | |||
| ## DC.S3MLayer | |||
| > SInherited from [Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.S3MLayer('id','**.scp') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id,url,[options])_** | |||
| - parameters | |||
| - `{String} id` | |||
| - `{String} url` | |||
| - `{Object} options` | |||
| - returns `windLayer` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "maxVisibleDistance":Number.MAX_VALUE, | |||
| "minVisibleDistance":0, | |||
| } | |||
| ``` | |||
| @@ -0,0 +1,858 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # Material 🌎 | |||
| In the real world, each object would react differently to light. Steel looks more shiny than a ceramic vase, and a wooden box would not reflect light as strongly as a steel box. Each object also reacts differently to specular highlights. Some objects don't scatter a lot of light but reflect a lot of light, resulting in a smaller highlight, and some objects scatter a lot and they produce a larger radius highlight. If we want to simulate multiple types of objects in OpenGL, we must define the Material property for each object separately. | |||
| ## DC.ColorMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.ColorMaterialProperty(DC.Color.RED) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(color)_** | |||
| - parameters | |||
| - `{DC.Color} color` | |||
| - returns `material` | |||
| ## DC.ImageMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.ImageMaterialProperty({ | |||
| image: '**/**.png', | |||
| transparent: true, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `material` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "image": "", | |||
| "repeat": { "x": 1, "y": 1 }, | |||
| "color": DC.Color.WHITE, | |||
| "transparent": false | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{String} image` | |||
| - `{Object} repeat` | |||
| - `{DC.Color} color` | |||
| - `{Boolean} transparent` | |||
| ## DC.CircleBlurMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleBlurMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.CircleDiffuseMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleDiffuseMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.CircleFadeMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleFadeMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.CirclePulseMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.CirclePulseMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.CircleScanMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleScanMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `material` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.CircleSpiralMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleSpiralMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.CircleVaryMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleVaryMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `material` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.CircleWaveMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleWaveMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `material` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10, | |||
| "count": 5, | |||
| "gradient": 0.1 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{Color} color` | |||
| - `{Number} speed` | |||
| - `{Number} count` | |||
| - `{Number} gradient` | |||
| ## DC.EllipsoidElectricMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.EllipsoidElectricMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.EllipsoidTrailMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.EllipsoidTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.PolylineDashMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineDashMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "gapColor": DC.Color.TRANSPARENT, | |||
| "dashLength": 16.0 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{DC.Color} gapColor` | |||
| - `{Number} dashLength` | |||
| ## DC.PolylineArrowMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineArrowMaterialProperty(DC.Color.WHITE) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(color)_** | |||
| - parameters | |||
| - `{DC.Color} color` | |||
| - returns `materialProperty` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| ## DC.PolylineOutlineMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineOutlineMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| outlineColor: DC.Color.BLACK, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "outlineColor": DC.Color.BLACK, | |||
| "outlineWidth": 1 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{DC.Color} outlineColor` | |||
| - `{Number} outlineWidth` | |||
| ## DC.PolylineGlowMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineGlowMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| glowPower: 0.25, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "glowPower": 0.25, | |||
| "taperPower": 1 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} glowPower` | |||
| - `{Number} taperPower` | |||
| ## DC.PolylineFlickerMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineFlickerMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.PolylineFlowMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineFlowMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10, | |||
| "percent": 0.3, | |||
| "gradient": 0.1 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| - `{Number} percent` | |||
| - `{Number} gradient` | |||
| ## DC.PolylineImageTrailMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineImageTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| image: '**/*.png', | |||
| repeat: { x: 10, y: 1 }, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10, | |||
| "image": "**/*.png", | |||
| "repeat": { "x": 10, "y": 1 } | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| - `{String} image` | |||
| - `{Object} repeat` | |||
| ## DC.PolylineLightingMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineLightingMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| ## DC.PolylineLightingTrailMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineLightingTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.PolylineTrailMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.RadarLineMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.RadarLineMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.RadarWaveMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.RadarWaveMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.WallImageTrailMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.WallImageTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| image: '**/*.png', | |||
| repeat: { x: 10, y: 1 }, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `materialProperty` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10, | |||
| "image": "**/*.png", | |||
| "repeat": { "x": 10, "y": 1 } | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| - `{String} image` | |||
| - `{Object} repeat` | |||
| ## DC.WallTrailMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.WallTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `material` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "color": DC.Color.WHITE, | |||
| "speed": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color` | |||
| - `{Number} speed` | |||
| ## DC.WaterMaterialProperty | |||
| ### example | |||
| ```js | |||
| let material = new DC.WaterMaterialProperty({ | |||
| baseWaterColor: DC.Color.WHITE, | |||
| normalMap: '**/**.png', | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `material` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "baseWaterColor": DC.Color.WHITE, | |||
| "blendColor": DC.Color.WHITE, | |||
| "specularMap": "", | |||
| "normalMap": "", | |||
| "frequency": 1000, | |||
| "animationSpeed": 0.03, | |||
| "amplitude": 10, | |||
| "specularIntensity": 10 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} baseWaterColor` | |||
| - `{DC.Color} blendColor` | |||
| - `{String} normalMap` | |||
| - `{String} specularMap` | |||
| @@ -0,0 +1,190 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # Third Part 🌎 | |||
| Adding a third-party map library to a 3D scene | |||
| ## DC.ChartLayer | |||
| > Inherited from [Layer](../layer/#layer) | |||
| ### example | |||
| ```js | |||
| let chartLayer = new DC.ChartLayer('layer') | |||
| viewer.addLayer(chartLayer) | |||
| ``` | |||
| :::warning | |||
| The chart layer depends on the echarts library, please make sure that echarts is available in the global variables before using it. | |||
| ::: | |||
| ### creation | |||
| - **_constructor([id],[option])_** | |||
| - parameters | |||
| - `{String} id` | |||
| - `{Object} option` [echarts](https://www.echartsjs.com/zh/option.html#title) | |||
| - returns `chartLayer` | |||
| ```json | |||
| // options | |||
| { | |||
| "animation": false, //required | |||
| "GLMap": {}, | |||
| "series": [ | |||
| { | |||
| "coordinateSystem": "GLMap" | |||
| } | |||
| ] | |||
| } | |||
| ``` | |||
| ### methods | |||
| - **_setOption(option)_** | |||
| - parameters | |||
| - `{Object} option` [echarts](https://www.echartsjs.com/zh/option.html#title) | |||
| - returns `this` | |||
| ## DC.MapvDataSet | |||
| ### example | |||
| ```js | |||
| let geoCoordMap = { | |||
| 上海: [121.4648, 31.2891], | |||
| 东莞: [113.8953, 22.901], | |||
| 东营: [118.7073, 37.5513], | |||
| 中山: [113.4229, 22.478], | |||
| 临汾: [111.4783, 36.1615], | |||
| } | |||
| let data = [] | |||
| for (let key in geoCoordMap) { | |||
| let geoCoord = geoCoordMap[key] | |||
| data.push({ | |||
| geometry: { | |||
| type: 'Point', | |||
| coordinates: [ | |||
| geoCoord[0] - 2 + Math.random() * 4, | |||
| geoCoord[1] - 2 + Math.random() * 4, | |||
| ], | |||
| }, | |||
| count: 30 * Math.random(), | |||
| }) | |||
| } | |||
| let dataset = new DC.MapvDataSet(data) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(data)_** | |||
| - parameters | |||
| - `{Array<Object>} data` [DataSet](https://github.com/huiyan-fe/mapv/blob/master/src/data/DataSet.md) | |||
| - returns `dataset` | |||
| ```json | |||
| { | |||
| "geometry": { | |||
| "type": "Point", | |||
| "coordinates": [123, 23] | |||
| }, | |||
| "count": 30, | |||
| "time": 100 * Math.random() | |||
| } | |||
| ``` | |||
| ## DC.MapvLayer | |||
| > Inherited from [Layer](../layer/#layer) | |||
| ### example | |||
| ```js | |||
| let options = { | |||
| fillStyle: 'rgba(55, 50, 250, 0.8)', | |||
| shadowColor: 'rgba(255, 250, 50, 1)', | |||
| shadowBlur: 20, | |||
| size: 40, | |||
| globalAlpha: 0.5, | |||
| label: { | |||
| show: true, | |||
| fillStyle: 'white', | |||
| }, | |||
| animation: { | |||
| type: 'time', | |||
| stepsRange: { | |||
| start: 0, | |||
| end: 100, | |||
| }, | |||
| trails: 10, | |||
| duration: 4, | |||
| }, | |||
| gradient: { | |||
| 0.25: 'rgb(0,0,255)', | |||
| 0.55: 'rgb(0,255,0)', | |||
| 0.85: 'yellow', | |||
| 1.0: 'rgb(255,0,0)', | |||
| }, | |||
| draw: 'grid', | |||
| } | |||
| let layer = new DC.MapvLayer('layer', options) | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id,[options])_** | |||
| - parameters | |||
| - `{String} id` | |||
| - `{Object} options` | |||
| - returns `mapvLayer` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "fillStyle": "rgba(55, 50, 250, 0.8)", | |||
| "shadowColor": "rgba(255, 250, 50, 1)", | |||
| "shadowBlur": 20, | |||
| "size": 40, | |||
| "globalAlpha": 0.5, | |||
| "globalCompositeOperation": "lighter", | |||
| "label": { | |||
| "show": true, | |||
| "fillStyle": "white" | |||
| }, | |||
| "animation": { | |||
| "type": "time", | |||
| "stepsRange": { | |||
| "start": 0, | |||
| "end": 100 | |||
| }, | |||
| "trails": 10, | |||
| "duration": 4 | |||
| }, | |||
| "lineWidth": 0.7, | |||
| "lineDash": [15], | |||
| "gradient": { | |||
| 0.25: "rgb(0,0,255)", | |||
| 0.55: "rgb(0,255,0)", | |||
| 0.85: "yellow", | |||
| 1.0: "rgb(255,0,0)" | |||
| }, | |||
| "draw": "grid" | |||
| } | |||
| ``` | |||
| ### methods | |||
| - **_setDataSet(dataset)_** | |||
| - parameters | |||
| - `{MapvDataSet} dataset` | |||
| - returns `this` | |||
| @@ -0,0 +1,198 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # Map 🌎 | |||
| Construct topography and pictures of the earth's surface to show the real state of the earth's surface | |||
| ## DC.ImageryLayerFactory | |||
| > For creating all kinds of map tiles | |||
| ### example | |||
| ```js | |||
| let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({ | |||
| style: 'img', | |||
| }) | |||
| viewer.addBaseLayer(baseLayer, { | |||
| name: 'map', | |||
| iconUrl: '../preview.png', | |||
| }) | |||
| ``` | |||
| ### static methods | |||
| - **_createAmapImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `baseLayer` | |||
| - **_createBaiduImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `baseLayer` | |||
| - **_createGoogleImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `baseLayer` | |||
| - **_createTdtImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `baseLayer` | |||
| - **_createTencentImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `baseLayer` | |||
| - **_createArcGisImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` [ArcGis](http://resource.dvgis.cn/cesium-docs/ArcGisMapServerImageryProvider.html#.ConstructorOptions) | |||
| - returns `baseLayer` | |||
| - **_createSingleTileImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` [Single](http://resource.dvgis.cn/cesium-docs/SingleTileImageryProvider.html#.ConstructorOptions) | |||
| - returns `baseLayer` | |||
| - **_createWMSImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` [WMS](http://resource.dvgis.cn/cesium-docs/WebMapServiceImageryProvider.html#.ConstructorOptions) | |||
| - returns `baseLayer` | |||
| - **_createWMTSImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` [WMTS](http://resource.dvgis.cn/cesium-docs/WebMapTileServiceImageryProvider.html#.ConstructorOptions) | |||
| - returns `baseLayer` | |||
| - **_createXYZImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` [X/Y/Z](http://resource.dvgis.cn/cesium-docs/UrlTemplateImageryProvider.html#.ConstructorOptions) | |||
| - returns `baseLayer` | |||
| - **_createCoordImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `baseLayer` | |||
| - **_createGridImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` [Grid](http://resource.dvgis.cn/cesium-docs/GridImageryProvider.html#.ConstructorOptions) | |||
| - returns `baseLayer` | |||
| - **_createMapboxImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` [Mapbox](http://resource.dvgis.cn/cesium-docs/MapboxImageryProvider.html#.ConstructorOptions) | |||
| - returns `baseLayer` | |||
| - **_createMapboxStyleImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` [Mapbox Style](http://resource.dvgis.cn/cesium-docs/MapboxStyleImageryProvider.html#.ConstructorOptions) | |||
| - returns `baseLayer` | |||
| - **_createTMSImageryLayer(options)_** | |||
| - parameters | |||
| - `{Object} options` [TMS](http://resource.dvgis.cn/cesium-docs/TileMapServiceImageryProvider.html#.ConstructorOptions) | |||
| - returns `baseLayer` | |||
| - **_createImageryLayer(type, options)_** | |||
| - parameters | |||
| - `{String} type`,DC.ImageryType | |||
| - `{Object} options` | |||
| - returns `baseLayer` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "url": "", | |||
| "style": "img", //img、elec、ter。baidu:normal、middlenight、dark,tencent:img,1、4 | |||
| "key": "", //Valid only for TDT | |||
| "subdomains": [], | |||
| "crs":"WGS84",// WGS84 、BD09 、GCJ02, Valid only for BAIDU and AMAP | |||
| "protocol":null,// http、https | |||
| "tilingScheme":null, // GeographicTilingScheme , WebMercatorTilingScheme | |||
| "rectangle": { | |||
| "west": 0, | |||
| "south": 0, | |||
| "east": 0, | |||
| "north": | |||
| } | |||
| } | |||
| ``` | |||
| ## DC.TerrainFactory | |||
| > For creating terrain | |||
| ### example | |||
| ```js | |||
| let terrain = DC.TerrainFactory.createUrlTerrain({ | |||
| url: '****/***', | |||
| }) | |||
| viewer.addTerrain(terrain) | |||
| ``` | |||
| ### static methods | |||
| - **_createEllipsoidTerrain()_** | |||
| - returns `terrain` | |||
| - **_createUrlTerrain(options)_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `terrain` | |||
| - **_createGoogleTerrain(options)_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `terrain` | |||
| - **_createArcgisTerrain(options)_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `terrain` | |||
| - **_createVRTerrain(options)_** | |||
| - parameters | |||
| - `{Object} options` | |||
| - returns `terrain` | |||
| - **_createTerrain(type,options)_** | |||
| - parameters | |||
| - `{String} type`: DC.TerrainType | |||
| - `{Object} options` | |||
| - returns `terrain` | |||
| ```json | |||
| //options(optional) | |||
| { | |||
| "url": "" | |||
| } | |||
| ``` | |||
| @@ -0,0 +1,165 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # Tools 🌎 | |||
| Auxiliary tools in 3D scenes to facilitate various measurements and markings in the scene | |||
| ## DC.Plot | |||
| > PLot Tool | |||
| ### example | |||
| ```js | |||
| let plot = new DC.Plot(viewer, {}) | |||
| plot.draw(DC.OverlayType.POINT, (overlay) => {}, {}) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,[options])_** | |||
| - parameters | |||
| - `{Viewer} viewer`:场景 | |||
| - `{Object} options`:属性 | |||
| - returns `plot` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "icon_center": "**.png", | |||
| "icon_anchor": "**.png", | |||
| "icon_midAnchor": "**.png", | |||
| "icon_size": [12, 12], | |||
| "clampToModel":false | |||
| } | |||
| ``` | |||
| ### methods | |||
| - **_draw(type,callback,[style],[clampToModel])_** | |||
| - parameters | |||
| - `{String} type` [OverlayType](../base/#overlaytype) | |||
| - `{Function} callback` | |||
| - `{Object} style` | |||
| - `{Boolean} clampToModel`: Whether the point gets the surface coordinates, if false, it will get the current 3D coordinates of the mouse | |||
| - returns `this` | |||
| - **_edit(overlay,callback,[clampToModel])_** | |||
| - parameters | |||
| - `{Overlay} overlay` | |||
| - `{Function} callback` | |||
| - `{Boolean} clampToModel`: Whether the point gets the surface coordinates, if false, it will get the current 3D coordinates of the mouse | |||
| - returns `this` | |||
| - **_stop()_** | |||
| - returns `this` | |||
| ## DC.PositionEditor | |||
| > Position Editor Tool | |||
| ### example | |||
| ```js | |||
| let positionEditor = new DC.PositionEditor(viewer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,[options])_** | |||
| - parameters | |||
| - `{Viewer} viewer` | |||
| - `{Object} options` | |||
| - returns `positionEditor` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "arrow": true, // whether the auxiliary axis is an arrow | |||
| "width": 8, // auxiliary axis width | |||
| "depthFail": true, // whether the auxiliary axis supports depth test | |||
| "axisLineScale": 1 // auxiliary axis scale | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{Overlay} overlay` **_`readonly`_** | |||
| ### methods | |||
| - **_activate(type, callback)_** | |||
| - parameters | |||
| - `{String} type` | |||
| - `{Function} callback` parameter :position | |||
| - returns `this` | |||
| - **_deactivate()_** | |||
| - returns `this` | |||
| ## DC.ModelManager | |||
| > Model Manager Tool | |||
| ### example | |||
| ```js | |||
| let manager = new DC.ModelManager(viewer, layer.getOverlays()) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,models,[options])_** | |||
| - parameters | |||
| - `{Viewer} viewer` | |||
| - `{Array} models` | |||
| - `{Object} options` | |||
| - returns `manager` | |||
| ```json | |||
| // options(optional) | |||
| { | |||
| "disappearHeight": 1000, | |||
| "disappearSeconds": 0.5, | |||
| "appearSeconds": 0.5 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{Array} models` | |||
| ### methods | |||
| - **_spread(height, seconds)_** | |||
| - parameters | |||
| - `{Number} height` | |||
| - `{Number} seconds` | |||
| - returns `this` | |||
| - **_combine(seconds)_** | |||
| - parameters | |||
| - `{Number} seconds` | |||
| - returns `this` | |||
| - **_showModel(modelIndex)_** | |||
| - parameters | |||
| - `{Number} modelIndex` | |||
| - returns `this` | |||
| - **_restore()_** | |||
| - returns `this` | |||
| @@ -0,0 +1,7 @@ | |||
| --- | |||
| home: true | |||
| heroImage: /doc.png | |||
| actionText: 快速上手 → | |||
| actionLink: /zh/introduction/ | |||
| footer: 版权所有 © 2019 - 2021 数字视觉(Digital Visual) | |||
| --- | |||
| @@ -0,0 +1,538 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # 场景分析 🌎 | |||
| ## DC.Measure | |||
| > 三维空间分析 | |||
| ### example | |||
| ```js | |||
| let measure = new DC.Measure(viewer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor()_** | |||
| 构造函数 | |||
| - 返回值 `measure` | |||
| ### methods | |||
| - **_angle([options])_** | |||
| 角度 | |||
| - 参数 | |||
| - `{Object} options`:配置 | |||
| - 返回值 `this` | |||
| - **_area([options])_** | |||
| 面积 | |||
| - 参数 | |||
| - `{Object} options`:配置 | |||
| - 返回值 `this` | |||
| - **_areaSurface([options])_** | |||
| 表面面积 | |||
| - 参数 | |||
| - `{Object} options`:配置 | |||
| - 返回值 `this` | |||
| - **_distance([options])_** | |||
| 距离 | |||
| - 参数 | |||
| - `{Object} options`:配置 | |||
| - 返回值 `this` | |||
| - **_distanceSurface([options])_** | |||
| 表面距离 | |||
| - 参数 | |||
| - `{Object} options`:配置 | |||
| - 返回值 `this` | |||
| - **_heading([options])_** | |||
| 偏航角 | |||
| - 参数 | |||
| - `{Object} options`:配置 | |||
| - 返回值 `this` | |||
| - **_height([options])_** | |||
| 高度 | |||
| - 参数 | |||
| - `{Object} options`:配置 | |||
| - 返回值 `this` | |||
| - **_triangleHeight([options])_** | |||
| 三角测量 | |||
| - 参数 | |||
| - `{Object} options`:配置 | |||
| - 返回值 `this` | |||
| - **_activate(type,[options])_** | |||
| 根据类型分析 | |||
| - 参数 | |||
| - `{String} type`:分析类型,参考 `DC.MeasureType`, | |||
| - `{Object} options`:配置 | |||
| - 返回值 `this` | |||
| ```json | |||
| //属性参数(可选) | |||
| { | |||
| "icon_center": "**.png", // 自定义的中心点图标 | |||
| "icon_anchor": "**.png", //自定义的锚点图标 | |||
| "icon_midAnchor": "**.png", //自定义的中心锚点图标 | |||
| "icon_size": [12, 12], //自定义的中心锚点大小 | |||
| "clampToModel": false //点位是否获取模型表面坐标 | |||
| } | |||
| ``` | |||
| - **_deactivate()_** | |||
| 释放空间分析 | |||
| - 返回值 `this` | |||
| ## DC.Analysis | |||
| > 三维场景分析 | |||
| ### example | |||
| ```js | |||
| let analysis = new DC.Analysis(viewer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor()_** | |||
| 构造函数 | |||
| - 返回值 `analysis` | |||
| ### methods | |||
| - **_contourLine(lineColor, lineWidth, lineSpacing)_** | |||
| 等高线 | |||
| - 参数 | |||
| - `{Color} lineColor`:颜色 | |||
| - `{Number} lineWidth`:宽度 | |||
| - `{Number} lineSpacing`:间隔 | |||
| - 返回值 `this` | |||
| - **_shadows(startTime, multiplier)_** | |||
| 日照分析 | |||
| - 参数 | |||
| - `{Date} startTime`:日期 | |||
| - `{Number} multiplier`:倍率 | |||
| - 返回值 `this` | |||
| - **_sightLine(startPosition, endPosition, excludes, lerpNum)_** | |||
| 通视分析(线) | |||
| - 参数 | |||
| - `{Position|Array|String|Object} startPosition`:起点 | |||
| - `{Position|Array|String|Object} endPosition`:终点 | |||
| - `{Array<Overlay>} excludes`:非包含覆盖物 | |||
| - `{Number} lerpNum`:插值数量,默认:10,数量越大越准确,同时计算量也会增加 | |||
| - 返回值 `this` | |||
| - **_sightCircle(center, radius, excludes, lerpNum)_** | |||
| 通视分析(圆) | |||
| - 参数 | |||
| - `{Position|Array|String|Object} center`:圆心 | |||
| - `{Number} radius`:半径 | |||
| - `{Array<Overlay>} excludes`:非包含覆盖物 | |||
| - `{Number} lerpNum`:插值数量,默认:10,数量越大越准确,同时计算量也会增加 | |||
| - 返回值 `this` | |||
| - **_viewshed(position, radius, fov, aspectRatio, options)_** | |||
| 可视域分析 | |||
| - 参数 | |||
| - `{Position|Array|String|Object} position`:视点 | |||
| - `{Number} radius`:半径 | |||
| - `{Number} fov`:横向视角 | |||
| - `{Number} aspectRatio`:横纵比例 | |||
| - `{Object} options`:属性设置 | |||
| - 返回值 `this` | |||
| ```json | |||
| //属性参数 | |||
| { | |||
| "mixNum":1, // 混合度 | |||
| "visibleColor":DC.Color.GREEN,//可见颜色 | |||
| "disVisibleColor":DC.Color.RED,//不可见颜色 | |||
| "showHelp": false, //显示辅助覆盖物 | |||
| "gridColor": DC.Color.YELLOW, //辅助覆盖物格子颜色 | |||
| "lineColor": DC.Color.YELLOW.withAlpha(0.3) //辅助覆盖物边线颜色 | |||
| } | |||
| ``` | |||
| - **_deactivate([type])_** | |||
| 释放分析 | |||
| - 参数 | |||
| - `{String} type`:分析类型,参考 `DC.AnalysisType`。类型为空时,将清除所有分析 | |||
| - 返回值 `this` | |||
| ## DC.CameraVideoLayer | |||
| > 视频图层,继承于[Layer](../layer/#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.CameraVideoLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - 返回值 `videoLayer` | |||
| ### methods | |||
| - **_showHelp(show, videoOverlay, color)_** | |||
| 是否显示辅助视锥 | |||
| - 参数 | |||
| - `{Boolean} show`:是否显示 | |||
| - `{Overlay} videoOverlay`:视频覆盖物 | |||
| - `{Color} color`:边线颜色 | |||
| - 返回值 `this` | |||
| ## DC.CameraVideo | |||
| > 视频融合要素,继承于[Overlay](../overlay/#overlay) | |||
| ### example | |||
| ```js | |||
| let position = new DC.Position(120, 20, 200, -20, 19) | |||
| let videoEl = new document.getElementById('video') | |||
| let cameraVideo = new DC.CameraVideo(position, videoEl) | |||
| layer.addOverlay(cameraVideo) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(position, video,[maskUrl])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Position} position`:坐标 | |||
| - `{Element} video`:视频节点 | |||
| - `{String} [maskUrl]`: 羽化图片地址 | |||
| - 返回值 `cameraVideo` | |||
| ### properties | |||
| - `{Position} position`:坐标 | |||
| - `{Element} video`:视频节点 | |||
| - `{String} maskUrl`: 羽化图片地址 | |||
| ### methods | |||
| - **_setStyle(style)_** | |||
| 设置样式 | |||
| - 参数 | |||
| - `{Object} style`:样式 | |||
| - 返回值 `this` | |||
| ```json | |||
| // 样式参数(可选) | |||
| { | |||
| "fov": 60, //视场角 | |||
| "near": 1, //近平面的距离 | |||
| "far": 5000, //远平面的距离 | |||
| "aspectRatio": 1, //视锥的宽度与高度的纵横比 | |||
| "alpha": 1, //透明度 | |||
| "clearBlack": true, //清除空白 | |||
| "disViewColor": DC.Color.WHITE //设置视频不可见颜色 | |||
| } | |||
| ``` | |||
| ## DC.PlaneVideoLayer | |||
| > 平面视频图层,继承于[Layer](../layer/#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.PlaneVideoLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - 返回值 `videoLayer` | |||
| ### methods | |||
| - **_showHelp(show, videoOverlay, color)_** | |||
| 是否显示辅助视锥 | |||
| - 参数 | |||
| - `{Boolean} show`:是否显示 | |||
| - `{Overlay} videoOverlay`:视频覆盖物 | |||
| - `{Color} color`:边线颜色 | |||
| - 返回值 `this` | |||
| ## DC.PlaneVideo | |||
| > 平面视频要素,继承于[Overlay](../overlay/#overlay) | |||
| ### example | |||
| ```js | |||
| let position = new DC.Position(120, 20, 200, -20, 19) | |||
| let videoEl = new document.getElementById('video') | |||
| let cameraVideo = new DC.PlaneVideo(position, videoEl) | |||
| layer.addOverlay(cameraVideo) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(position, video)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Position} position`:坐标 | |||
| - `{Element} video`:视频节点 | |||
| - 返回值 `cameraVideo` | |||
| ### properties | |||
| - `{Position} position`:坐标 | |||
| - `{Element} video`:视频节点 | |||
| ### methods | |||
| - **_setStyle(style)_** | |||
| 设置样式 | |||
| - 参数 | |||
| - `{Object} style`:样式 | |||
| - 返回值 `this` | |||
| ```json | |||
| // 样式参数(可选) | |||
| { | |||
| "fov": 60, //视场角 | |||
| "near": 1, //近平面的距离 | |||
| "far": 5000, //远平面的距离 | |||
| "aspectRatio": 1 //视锥的宽度与高度的纵横比 | |||
| } | |||
| ``` | |||
| ## DC.GeoTools | |||
| > 要素工具 | |||
| ### example | |||
| ```js | |||
| let coords = DC.GeoTools.pointBuffer( | |||
| '120.71259021075333,31.22148081085083', | |||
| 100 | |||
| ) | |||
| let coords1 = DC.GeoTools.polygonBuffer( | |||
| '120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343', | |||
| 150 | |||
| ) | |||
| ``` | |||
| ### static methods | |||
| - **_pointBuffer(position, radius, steps)_** | |||
| 点缓冲 | |||
| - 参数 | |||
| - `{Array|String|Position} position`:坐标 | |||
| - `{Number} radius`:半径 | |||
| - `{Number} steps`:步数,默认:8 | |||
| - 返回值 `array` | |||
| - **_polylineBuffer(positions, radius, steps)_** | |||
| 线缓冲 | |||
| - 参数 | |||
| - `{Array|String|Array<Position>} positions`:坐标串 | |||
| - `{Number} radius`:半径 | |||
| - `{Number} steps`:步数,默认:8 | |||
| - 返回值 `array` | |||
| - **_polygonBuffer(positions, radius, steps)_** | |||
| 面缓冲 | |||
| - 参数 | |||
| - `{Array|String|Array<Position>} positions`:坐标串 | |||
| - `{Number} radius`:半径 | |||
| - `{Number} steps`:步数,默认:8 | |||
| - 返回值 `array` | |||
| - **_transformPolylineScale(positions, factor)_** | |||
| 比例线 | |||
| - 参数 | |||
| - `{Array|String|Array<Position>} positions`:坐标串 | |||
| - `{Number} factor`:比例 | |||
| - 返回值 `array` | |||
| - **_transformPolygonScale(positions, factor)_** | |||
| 比例面 | |||
| - 参数 | |||
| - `{Array|String|Array<Position>} positions`:坐标串 | |||
| - `{Number} factor`:比例 | |||
| - 返回值 `array` | |||
| - **_transformPolylineRotate(positions, angle)_** | |||
| 旋转线 | |||
| - 参数 | |||
| - `{Array|String|Array<Position>} positions`:坐标串 | |||
| - `{Number} angle`:角度 | |||
| - 返回值 `array` | |||
| - **_transformPolygonRotate(positions, angle)_** | |||
| 旋转面 | |||
| - 参数 | |||
| - `{Array|String|Array<Position>} positions`:坐标串 | |||
| - `{Number} angle`:角度 | |||
| - 返回值 `array` | |||
| ## DC.GlobClipping | |||
| > 地球裁剪 | |||
| ### example | |||
| ```js | |||
| let globClipping = new DC.GlobClipping(viewer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,[options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Viewer} viewer`:场景 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `globClipping` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "edgeWidth": 0, // 边缘宽度 | |||
| "edgeColor": DC.Color.WHITE // 边缘颜色 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{Array<Position>} positions`:坐标串 | |||
| - `{Number} distance`: 距离 | |||
| - `{Boolean} enable`: 是否启用 | |||
| - `{String} state`: 状态 **_`readonly`_** | |||
| ## DC.TerrainClipping | |||
| > 地形裁剪 | |||
| ### example | |||
| ```js | |||
| let terrainClipping = new DC.TerrainClipping(viewer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,[options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Viewer} viewer`:场景 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `terrainClipping` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "edgeWidth": 0, // 边缘宽度 | |||
| "edgeColor": DC.Color.WHITE, // 边缘颜色 | |||
| "lerpInterval": 50, // 插值数量 | |||
| "bottomImage": "", // 底部图片 | |||
| "sideImage": "" // 侧边图片 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{Array<Position>} positions`:坐标串 | |||
| - `{Number} height`: 高度 | |||
| - `{Boolean} enable`: 是否启用 | |||
| - `{String} state`: 状态 **_`readonly`_** | |||
| @@ -0,0 +1,849 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # 效果动画 🌎 | |||
| 在三维场景中添加动态要素,让场景能够动起来,更加贴近真实世界的运行 | |||
| ## DC.Weather | |||
| > 天气效果 | |||
| ### example | |||
| ```js | |||
| let weather = new DC.Weather() | |||
| viewer.use(weather) | |||
| ``` | |||
| ### creation | |||
| - **_constructor()_** | |||
| 构造函数 | |||
| - 返回值 `weather` | |||
| ### properties | |||
| - [`{Rain} rain`](#rain):雨天 **_`readonly`_** | |||
| - [`{Snow} snow`](#snow):雪天 **_`readonly`_** | |||
| - [`{Fog} snow`](#fog):雾天 **_`readonly`_** | |||
| - [`{Cloud} cloud`](#cloud):云 **_`readonly`_** | |||
| ## Rain | |||
| > 雨天效果 | |||
| ### example | |||
| ```js | |||
| viewer.weather.rain.enable = true | |||
| viewer.weather.rain.speed = 2 | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable`:是否启用 | |||
| - `{Number} speed`:速度 | |||
| ## Snow | |||
| > 雪天效果 | |||
| ### example | |||
| ```js | |||
| viewer.weather.snow.enable = true | |||
| viewer.weather.snow.speed = 2 | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable`:是否启用 | |||
| - `{Number} speed`:速度 | |||
| ## Fog | |||
| > 雾天效果 | |||
| ### example | |||
| ```js | |||
| viewer.weather.fog.enable = true | |||
| viewer.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 | |||
| viewer.weather.cloud.enable = true | |||
| viewer.weather.cloud.rotateAmount = 0.02 | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable`:是否启用 | |||
| - `{Number} rotateAmount`:移动增量,可为负数 | |||
| ## DC.Effect | |||
| > 效果类 | |||
| ### example | |||
| ```js | |||
| let effect = new DC.Effect() | |||
| viewer.use(effect) | |||
| ``` | |||
| ### creation | |||
| - **_constructor()_** | |||
| 构造函数 | |||
| - 返回值 `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 | |||
| viewer.effect.blackAndWhite.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable`:是否启用 | |||
| - `{Number} gradations`:强度 | |||
| - `{Array} selected`:设置后期作用的覆盖物 | |||
| ## Bloom | |||
| > 泛光效果 | |||
| ### example | |||
| ```js | |||
| viewer.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 | |||
| viewer.effect.brightness.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable`:是否启用 | |||
| - `{Number} intensity`:强度 | |||
| - `{Array} selected`:设置后期作用的覆盖物 | |||
| ## DepthOfField | |||
| > 景深效果 | |||
| ### example | |||
| ```js | |||
| viewer.effect.depthOfField.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable`:是否启用 | |||
| - `{Number}} focalDistance`:焦距 | |||
| - `{Number} delta`:Delta | |||
| - `{Number} sigma`:Sigma | |||
| - `{Number} stepSize`:StepSize | |||
| - `{Array} selected`:设置后期作用的覆盖物 | |||
| ## LensFlare | |||
| > 镜头耀斑效果 | |||
| ### example | |||
| ```js | |||
| viewer.effect.lensFlare.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable`:是否启用 | |||
| - `{Number}} intensity`:强度 | |||
| - `{Number} distortion`:扭曲度 | |||
| - `{Number} dirtAmount`:分散度 | |||
| - `{Number} haloWidth`:光圈宽度 | |||
| - `{Array} selected`:设置后期作用的覆盖物 | |||
| ## Night | |||
| > 夜视效果 | |||
| ### example | |||
| ```js | |||
| viewer.effect.night.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable`:是否启用 | |||
| - `{Array} selected`:设置后期作用的覆盖物 | |||
| ## Silhouette | |||
| > 描边效果 | |||
| ### example | |||
| ```js | |||
| viewer.effect.silhouette.enable = true | |||
| ``` | |||
| ### properties | |||
| - `{Boolean} enable`:是否启用 | |||
| - `{Color} color`:颜色 | |||
| - `{Number} length`:长度 | |||
| - `{Array} selected`:设置后期作用的覆盖物 | |||
| ## 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.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.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.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 // 速度 | |||
| } | |||
| ``` | |||
| ## 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` | |||
| @@ -0,0 +1,345 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # 教程 🌎 | |||
| ## 简介 | |||
| ### DC-SDK 是什么 | |||
| **_`DC-SDK`_** 是基于开源项目 **_`Cesium`_** 进行二次开发的二三维一体的 **_`WebGis`_** 应用框架,该框架优化了部分 **_`Cesium`_** 的使用方式和增添一些通用功能,旨在为开发者快速构建 **_`WebGis`_** 应用。 | |||
| ### DC-SDK 能做什么 | |||
| - `二、三维场景可视化` | |||
| 支持二三维无缝切换,一套代码多种风格。通过框架可以添加地图、各类矢量数据和模型到场景中,使场景更加贴近真实世界。 | |||
| - `各大厂商的地图管理` | |||
| 支持高德、百度、腾讯、天地图、Google、MapBox 等厂商的地图接入,对于国内部分地图可进行偏移处理。 | |||
| - `各类数据的统一管理` | |||
| 框架提供覆盖物对应的图层管理操作,通过图层可对覆盖物进行针对性的筛选和整体的控制。 | |||
| - `各类数据动画和特效` | |||
| 提供线、面、圆、模型等的材质效果和细节动画,让覆盖物的材质能够随着时间变化。 | |||
| - `三维场景后期的特效` | |||
| 提供云、雨、雪、雾等天气功能和包括绕点环绕、绕地环绕、扫描圈(雷达)、视频融合、泛光、夜视等一些动画以及后期特效。 | |||
| - `路径漫游和定点巡航` | |||
| 提供根据设定的路线进行自动漫游和巡航功能,方便重点区域定位查看。 | |||
| - `空间分析能力` | |||
| 提供测距、面积、高度等各种量算功能以及可视域、通视等三维场景分析功能。 | |||
| - `兼容第三方地图工具库` | |||
| 提供对 turf、heatmap、mapv、echarts 等常用可视化库和开源库的功能接入集成,避免用户的重复学习和成本投入。 | |||
| ## 准备工作 | |||
| `运行环境` | |||
| DC-SDK 是依赖于[`WebGL`](#webgl)运行的一套开发平台,需要开发或运行终端配置 `独立显卡` 和安装支持 `WebGL` 的浏览器,推荐使用 **_Chrome(谷歌)_**、**_Firefox(火狐)_** | |||
| `静态服务器` | |||
| 静态服务器主要用于发布地图瓦片、地形、模型数据等数据服务,如:**_Apache Http Sever_**、**_Tomcat_** 、**_Nginx_**,推荐使用 **_Nginx_** | |||
| `硬件配置` | |||
| > 硬件配置说明,建议使用如下的硬件配置进行三维场景的浏览和开发。 | |||
| <table style="width:100%"> | |||
| <tr><td colspan=3 style="text-align:center;background:#3eaf7c;">PC端</td></tr> | |||
| <tr><td>项目</td><td>标准配置</td><td>推荐配置</td></tr> | |||
| <tr><td>CPU</td><td>2.6GHz 64位 处理器</td><td>3.0GHz 64位 处理器</td></tr> | |||
| <tr><td>内存</td><td>8GB</td><td>32GB</td></tr> | |||
| <tr><td>显卡型号</td><td>NVIDIA GTX 1660 (或同级别)</td><td>NVIDIA RTX 2080 (或同级别)</td></tr> | |||
| <tr><td>显存</td><td>4GB</td><td>16G</td></tr> | |||
| <tr><td>最优分辨率</td><td>FHD - 1920 * 1080</td><td>4K QFHD - 3840 * 2160</td></tr> | |||
| <tr><td>操作系统</td><td colspan=2>64 位 Windows 8/10/11 或 64 位 Linux 桌面发行版,或 macOS 10.12.1以上版本</td></tr> | |||
| <tr><td>浏览器</td><td colspan=2>Google Chrome 或 Firefox 当前最新版本</td></tr> | |||
| </table> | |||
| <table style="width:78.7%"> | |||
| <tr><td colspan=3 style="text-align:center;background:#3eaf7c;">移动设备</td></tr> | |||
| <tr><td width="16%">平台</td><td>Android</td><td>Apple</td></tr> | |||
| <tr><td>设备</td><td>兼容 Android 操作系统的移动设备,2019年及以上的中高端型号</td><td>IPhone 11 及以上型号,IPad Pro 2019 及以上型号</td></tr> | |||
| <tr><td>操作系统</td><td>Android</td><td>IOS 或 IPadOS</td></tr> | |||
| <tr><td>浏览器</td><td colspan=2>支持 WebGL 的浏览器</td></tr> | |||
| </table> | |||
| ### 框架安装 | |||
| `NPM / YARN` **_`(推荐使用)`_** | |||
| NPM / YARN 的方式安装,它能更好地和 `webpack` 打包工具配合使用。 | |||
| ```shell | |||
| npm install @dvgis/dc-sdk | |||
| ------------------------- | |||
| yarn 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" | |||
| /> | |||
| ``` | |||
| ### 应用配置 | |||
| 由于 DC 框架中将 `CESIUM_BASE_URL` 设置为 `./libs/dc-sdk/resources/`,这样需将 `Cesium` 相关的静态资源文件: `Assets`、`Workers` 、`ThirdParty` 复制到工程的 `libs/dc-sdk/resources` 目录下以保证三维场景能够正常呈现,也可通过 `DC.baseUrl` 进行 `Cesium` 相关的静态资源路基设置 | |||
| > `NPM / YARN` | |||
| `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'), | |||
| }, | |||
| ], | |||
| }, | |||
| ]) | |||
| }, | |||
| } | |||
| ``` | |||
| `CDN` | |||
| 直接通过[网站](https://github.com/dvgis/dc-sdk/releases)下载当前版本的资源文件 | |||
| ### 代码提示 | |||
| 通过安装代码提示工具包,能够在开发过程中提示和自动完成框架内部的接口,更好地提高开发效率 | |||
| ```shell | |||
| npm install @dvgis/types -D | |||
| ------------------------- | |||
| yarn add @dvgis/types -D | |||
| ``` | |||
| ### 快速上手 | |||
| > [框架安装](#框架安装) 和 [配置](#应用配置) 后,就可以开发属于自己的 **_`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=info&example=start" frameborder="0" height="500px" width="100%" > | |||
| </iframe> | |||
| ## 总架构图 | |||
| > DC 架构图,建议使用前先熟悉整体架构图,以便能够快速使用。[查看大图](http://dc.dvgis.cn/examples/images/base/dc2.x.png) | |||
| <img src="http://dc.dvgis.cn/examples/images/base/dc2.x.png" style="width:100%;height:800px"> | |||
| ## 技术扩展 | |||
| ### WebGL | |||
| WebGL 是一种 JavaScript API,用于在不使用插件的情况下在任何兼容的网页浏览器中呈现交互式 2D 和 3D 图形。WebGL 完全集成到浏览器的所有网页标准中,可将影像处理和效果的 GPU 加速使用方式当做网页 Canvas 的一部分。WebGL 元素可以加入其他 HTML 元素之中并与网页或网页背景的其他部分混合。WebGL 程序由 JavaScript 编写的句柄和 OpenGL Shading Language( **`GLSL`** )编写的着色器代码组成。 | |||
| ### 三维数据格式 | |||
| **`glb/gltf`** | |||
| GLTF 代表 Graphics Language Transmission Format(图形语言传输格式)。这种跨平台格式已成为 Web 上的 3D 对象标准。它由 OpenGL 和 Vulkan 背后的 3D 图形标准组织 Khronos 所定义,这使得 GLTF 基本上成为 3D 模型的 JPG 格式:Web 导出的通用标准。 | |||
| **`OSGB`** | |||
| 倾斜摄影三维模型数据的组织方式一般是二进制存贮的、带有嵌入式链接纹理数据(.jpg)的 OSGB 格式。Open Scene Gragh Binary 是 OSGB 的全称,这里的 Binary 是二进制的意思。此类数据文件碎、数量多、高级别金字塔文件大等特点难以形成高效、标准的网络发布方案,从而无法实现不同地域、不同部门之间数据共享。 | |||
| **`3d-tiles`** | |||
| 3D Tiles 是用于流式传输大规模异构 3D 地理空间数据集的开放规范。3D Tiles 数据可以通过 shp、osgb(倾斜摄影)、3dmax 等数据生成。 | |||
| **`GeoJson`** | |||
| GeoJSON 是一种对各种地理数据结构进行编码的格式,基于 Javascript 对象表示法的地理空间信息数据交换格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型:点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。 | |||
| **`kml/czml`** | |||
| KML/CZML 是一个 JSON 格式的数据,描述 time-dynamic(时间、动态)图形场景,它描述了线、点、广告牌(标记)、模型、和其他图形原语,并指定他们如何随时间变化。 | |||
| :::tip | |||
| 数据转换可借助于 [CesiumLab](http://www.cesiumlab.com) 或者其他一些转换工具。[查看大图](http://dc.dvgis.cn/examples/images/base/data_transform.png) | |||
| ::: | |||
| <img src="http://dc.dvgis.cn/examples/images/base/data_transform.png" style="width:100%;height:500px"> | |||
| ### 三维坐标 | |||
| **`世界坐标(Cartesian3)`** | |||
| 笛卡尔坐标,以椭球中心为原点的空间直角坐标系中的一个点的坐标。 | |||
| **`地理坐标(Cartographic)`** | |||
| 地理坐标系,坐标原点在椭球的质心。 | |||
| 经度:参考椭球面上某点的大地子午面与本初子午面间的两面角。东正西负。 | |||
| 纬度 :参考椭球面上某点的法线与赤道平面的夹角。北正南负。 | |||
| **`地理坐标(Position)`** | |||
| 地理坐标系,坐标原点在椭球的质心。`DC扩展` | |||
| 经度:参考椭球面上某点的大地子午面与本初子午面间的两面角。东正西负。 | |||
| 纬度 :参考椭球面上某点的法线与赤道平面的夹角。北正南负。 | |||
| 高度 :和地球表面的距离 | |||
| **`屏幕坐标(Cartesian2)`** | |||
| 浏览器窗口坐标或者鼠标事件中 windowPosition | |||
| :::tip | |||
| 框架中可以使用 `DC.T` 进行各类坐标的转换 | |||
| ::: | |||
| ### 地理坐标系 | |||
| `WGS84` | |||
| 一种国际上采用的地心坐标系。坐标原点为地球质心,其地心空间直角坐标系的 Z 轴指向 BIH (国际时间服务机构)1984.O 定义的协议地球极(CTP)方向,X 轴指向 BIH 1984.0 的零子午面和 CTP 赤道的交点,Y 轴与 Z 轴、X 轴垂直构成右手坐标系,称为 1984 年世界大地坐标系统。 | |||
| `CGCS2000` | |||
| 2000 中国大地坐标系(China Geodetic Coordinate System 2000,CGCS2000),又称之为 2000 国家大地坐标系,是中国新一代大地坐标系,21 世纪初已在中国正式实施。其与 `WGS84` 相差不大,国内天地图就是采用该坐标系。 | |||
| `GCJ02` | |||
| GCJ-02 是由中国国家测绘局(G 表示 Guojia 国家,C 表示 Cehui 测绘,J 表示 Ju 局)制订的地理信息系统的坐标系统。它其实就是对真实坐标系统进行人为的加偏处理,按照特殊的算法,将真实的坐标加密成虚假的坐标,而这个加偏并不是线性的加偏,所以各地的偏移情况都会有所不同。而加密后的坐标也常被大家称为“火星坐标系统”。 | |||
| `BD09` | |||
| BD09 经纬度投影属于百度坐标系,它是在标准经纬度的基础上进行 GCJ-02 加偏之后,再加上百度自身的加偏算法,也就是在标准经纬度的基础之上进行了两次加偏。 | |||
| [参考](http://www.rivermap.cn/docs/show-1829.html) | |||
| :::tip | |||
| 框架中可以使用 `DC.CoordTransform` 进行各类坐标系的转换 | |||
| ::: | |||
| ## 群聊 | |||
| <p> | |||
| <img src="http://dc.dvgis.cn/examples/images/base/q3.png?v=1" title="数字视觉" width="240px" height="332px"/> | |||
| <img src="http://dc.dvgis.cn/examples/images/base/q1.png?v=2" title="数字视觉(已满)" width="240px" height="332px"/> | |||
| <img src="http://dc.dvgis.cn/examples/images/base/q2.png?v=6" title="Cesium开心农场" width="240px" height="332px"/> | |||
| </p> | |||
| ## 感谢 | |||
| > 以下列表为 DC 平台的赞助或打赏人员,排名不分先后,如果有什么隐私问题,请联系我 | |||
| `donkie` `Wchino` `莫慌` `凌风` `老戴` `蔺星` | |||
| ## 支持 | |||
| > 如果 dc-sdk 能够给您带来效益,请支持一下呗~ | |||
| <p style="display:flex"> | |||
| <a href="https://www.paypal.com/paypalme/cavencj" target="_blank"> | |||
| <img src="https://www.paypalobjects.com/images/shared/paypal-logo-129x32.svg" style="margin-top:10px;margin-right:20px" /> | |||
| </a> | |||
| <img src="http://dc.dvgis.cn/examples/images/base/sponsor.jpg?v=2" title="数字视觉"/> | |||
| </p> | |||
| @@ -0,0 +1,761 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # 业务图层 🌎 | |||
| 将具有相同业务逻辑或属性的覆盖元素进行分类,以便于同一管理 | |||
| ## 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](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.VectorLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - 返回值 `vectorLayer` | |||
| ## DC.DynamicLayer | |||
| > 动态图层,用于添加各类动态矢量数据(图标、模型等),将矢量数据按一定的逻辑分组,方便统一管理,继承于[Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.DynamicLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - 返回值 `dynamicLayer` | |||
| ## DC.PrimitiveLayer | |||
| > 图元图层,用于添加各类图元数据,将图元数据按一定的逻辑分组,方便统一管理,继承于[Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.PrimitiveLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - 返回值 `primitiveLayer` | |||
| ## DC.GroundPrimitiveLayer | |||
| > 贴地图元图层,用于添加各类贴地图元数据,将贴地图元数据按一定的逻辑分组,方便统一管理,继承于[Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.GroundPrimitiveLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - 返回值 `groundPrimitiveLayer` | |||
| ## DC.TilesetLayer | |||
| > 3dTiles 图层,用于添加 3dTiles 模型数据, 继承于[Layer](#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.TilesetLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - 返回值 `tilesetLayer` | |||
| ## DC.GeoJsonLayer | |||
| > GeoJson 图层,用于加载 GeoJson 格式数据,继承于[Layer](#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](#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](#layer), | |||
| ### example | |||
| ```js | |||
| let layer = new DC.HtmlLayer('dom') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - 返回值 `htmlLayer` | |||
| ## DC.CzmlLayer | |||
| > Czml 图层,用于加载 Czml 数据,继承于[Layer](#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](#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](#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') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id,[options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - `{Object} options`:属性配置 | |||
| - 返回值 `clusterLayer` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "size": 48, //聚合的尺寸 | |||
| "pixelRange": 40, //像素范围 | |||
| "gradient": { | |||
| "0.0001": DC.Color.DEEPSKYBLUE, | |||
| "0.001": DC.Color.GREEN, | |||
| "0.01": DC.Color.ORANGE, | |||
| "0.1": DC.Color.RED | |||
| }, // 幅度颜色设置 | |||
| "style": "circle", // circle 和 clustering | |||
| "fontSize": 12, // 字体大小 | |||
| "fontColor": DC.Color.BLACK // 字体颜色 | |||
| } | |||
| ``` | |||
| ## DC.HeatLayer | |||
| > 热区图层,继承于[Layer](../dc-sdk/#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.HeatLayer('id') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id,bounds,[options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - `{Object} options`:属性配置 | |||
| - 返回值 `heatLayer` | |||
| ```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 | |||
| - **_setPositions(positions)_** | |||
| 设置点位 | |||
| - 参数 | |||
| - `{Array<Object>} positions`:点位信息 | |||
| - 返回值 `heatLayer` | |||
| ```json | |||
| //点位信息参数 | |||
| { | |||
| "lng": "", //经度 | |||
| "lat": "", //纬度 | |||
| "value": 10 //强度 | |||
| } | |||
| ``` | |||
| - **_addPosition(position)_** | |||
| 添加点位 | |||
| - 参数 | |||
| - `{Object} position`:点位信息 | |||
| - 返回值 `heatLayer` | |||
| ```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.S3MLayer | |||
| > S3M图层,继承于[Layer](../dc-sdk/#layer) | |||
| ### example | |||
| ```js | |||
| let layer = new DC.S3MLayer('id','**.scp') | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id,url,[options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - `{String} url`:数据地址 | |||
| - `{Object} options`:属性配置 | |||
| - 返回值 `windLayer` | |||
| ```json | |||
| //属性参数(可选) | |||
| { | |||
| "maxVisibleDistance":Number.MAX_VALUE, //最大可见距离 | |||
| "minVisibleDistance":0,//最小可见距离, | |||
| "heightOffset":0,//高度偏移 | |||
| } | |||
| ``` | |||
| @@ -0,0 +1,966 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # 材质属性 🌎 | |||
| 在真实世界里,每个物体会对光产生不同的反应。钢看起来比陶瓷花瓶更闪闪发光,一个木头箱子不会像钢箱子一样对光产生很强的反射。每个物体对镜面高光也有不同的反应。有些物体不会散射(Scatter)很多光却会反射(Reflect)很多光,结果看起来就有一个较小的高光点(Highlight),有些物体散射了很多,它们就会产生一个半径更大的高光。如果我们想要在 OpenGL 中模拟多种类型的物体,我们必须为每个物体分别定义材质(Material)属性。 | |||
| ## DC.ColorMaterialProperty | |||
| > 颜色材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.ColorMaterialProperty(DC.Color.RED) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(color)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{DC.Color} color`:颜色 | |||
| - 返回值 `material` | |||
| ## DC.ImageMaterialProperty | |||
| > 图片材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.ImageMaterialProperty({ | |||
| image: '**/**.png', | |||
| transparent: true, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `material` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "image": "", // 图片地址 | |||
| "repeat": { "x": 1, "y": 1 }, // 图片重复 | |||
| "color": DC.Color.WHITE, // 图片颜色 | |||
| "transparent": false // 材质是否透明 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{String} image`:图片地址 | |||
| - `{Object} repeat`:图片重复 | |||
| - `{DC.Color} color`:图片颜色 | |||
| - `{Boolean} transparent`:材质是否透明 | |||
| ## DC.CircleBlurMaterialProperty | |||
| > 模糊圆材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleBlurMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.CircleDiffuseMaterialProperty | |||
| > 扩散圆材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleDiffuseMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.CircleFadeMaterialProperty | |||
| > 逐渐消逝圆材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleFadeMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.CirclePulseMaterialProperty | |||
| > 脉冲圆材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.CirclePulseMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.CircleScanMaterialProperty | |||
| > 扫描圆材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleScanMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.CircleSpiralMaterialProperty | |||
| > 螺旋圆材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleSpiralMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.CircleVaryMaterialProperty | |||
| > 多彩圆材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleVaryMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.CircleWaveMaterialProperty | |||
| > 波纹圆材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.CircleWaveMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10, // 速度 | |||
| "count": 5, //数量 | |||
| "gradient": 0.1 //强度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| - `{Number} count`:数量 | |||
| - `{Number} gradient`:强度 | |||
| ## DC.EllipsoidElectricMaterialProperty | |||
| > 电弧球材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.EllipsoidElectricMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.EllipsoidTrailMaterialProperty | |||
| > 轨迹球材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.EllipsoidTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.PolylineDashMaterialProperty | |||
| > 虚线材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineDashMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 虚线颜色 | |||
| "gapColor": DC.Color.TRANSPARENT, // 间隔颜色 | |||
| "dashLength": 16.0 // 虚线片段长度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:虚线颜色 | |||
| - `{DC.Color} gapColor`:间隔颜色 | |||
| - `{Number} dashLength`:虚线片段长度 | |||
| ## DC.PolylineArrowMaterialProperty | |||
| > 箭头材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineArrowMaterialProperty(DC.Color.WHITE) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(color)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{DC.Color} color`:箭头颜色 | |||
| - 返回值 `materialProperty` | |||
| ### properties | |||
| - `{DC.Color} color`:箭头颜色 | |||
| ## DC.PolylineOutlineMaterialProperty | |||
| > 边线材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineOutlineMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| outlineColor: DC.Color.BLACK, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "outlineColor": DC.Color.BLACK, // 边线颜色 | |||
| "outlineWidth": 1 // 边线宽度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{DC.Color} outlineColor`:边线颜色 | |||
| - `{Number} outlineWidth`:边线宽度 | |||
| ## DC.PolylineGlowMaterialProperty | |||
| > 光晕材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineGlowMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| glowPower: 0.25, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "glowPower": 0.25, // 发光强度,以总线宽的百分比表示 | |||
| "taperPower": 1 // 渐缩效果的强度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} glowPower`:发光强度 | |||
| - `{Number} taperPower`:渐缩效果的强度 | |||
| ## DC.PolylineFlickerMaterialProperty | |||
| > 闪烁线材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineFlickerMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.PolylineFlowMaterialProperty | |||
| > 流动线材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineFlowMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10, // 速度, | |||
| "percent": 0.3, // 比例 | |||
| "gradient": 0.1 // 透明程度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| - `{Number} percent`:比例, | |||
| - `{Number} gradient`:透明程度, | |||
| ## DC.PolylineImageTrailMaterialProperty | |||
| > 图片轨迹线材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineImageTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| image: '**/*.png', | |||
| repeat: { x: 10, y: 1 }, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10, // 速度 | |||
| "image": "**/*.png", // 图片地址 | |||
| "repeat": { "x": 10, "y": 1 } //重复规则 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| - `{String} image`:图片地址 | |||
| - `{Object} repeat`:重复规则 | |||
| ## DC.PolylineLightingMaterialProperty | |||
| > 发光线材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineLightingMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE // 颜色 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| ## DC.PolylineLightingTrailMaterialProperty | |||
| > 颜色轨迹线材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineLightingTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.PolylineTrailMaterialProperty | |||
| > 颜色轨迹线材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.PolylineTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.RadarLineMaterialProperty | |||
| > 雷达线材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.RadarLineMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.RadarWaveMaterialProperty | |||
| > 波纹雷达材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.RadarWaveMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.WallImageTrailMaterialProperty | |||
| > 图片轨迹墙体材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.WallImageTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| image: '**/*.png', | |||
| repeat: { x: 10, y: 1 }, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10, // 速度 | |||
| "image": "**/*.png", // 图片地址 | |||
| "repeat": { "x": 10, "y": 1 } //重复规则 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| - `{String} image`:图片地址 | |||
| - `{Object} repeat`:重复规则 | |||
| ## DC.WallTrailMaterialProperty | |||
| > 流动墙材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.WallTrailMaterialProperty({ | |||
| color: DC.Color.WHITE, | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "color": DC.Color.WHITE, // 颜色 | |||
| "speed": 10 // 速度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} color`:颜色 | |||
| - `{Number} speed`:速度 | |||
| ## DC.WaterMaterialProperty | |||
| > 流动水材质 | |||
| ### example | |||
| ```js | |||
| let material = new DC.WaterMaterialProperty({ | |||
| baseWaterColor: DC.Color.WHITE, | |||
| normalMap: '**/**.png', | |||
| }) | |||
| ``` | |||
| ### creation | |||
| - **_constructor([options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `materialProperty` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "baseWaterColor": DC.Color.WHITE, // 水体颜色 | |||
| "blendColor": DC.Color.WHITE, // 混合颜色 | |||
| "specularMap": "", // 镜面图 | |||
| "normalMap": "", // 法线图 | |||
| "frequency": 1000, //波纹数量 | |||
| "animationSpeed": 0.03, // 动画速度 | |||
| "amplitude": 10, //水波振幅 | |||
| "specularIntensity": 10 //镜面反射强度 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{DC.Color} baseWaterColor`:颜色 | |||
| - `{DC.Color} blendColor`:混合颜色 | |||
| - `{String} normalMap`:法线图 | |||
| - `{String} specularMap`:镜面图 | |||
| @@ -0,0 +1,201 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # 第三方集成 🌎 | |||
| 在三维场景中添加第三方的地图库 | |||
| ## 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.MapvDataSet | |||
| ### example | |||
| ```js | |||
| let geoCoordMap = { | |||
| 上海: [121.4648, 31.2891], | |||
| 东莞: [113.8953, 22.901], | |||
| 东营: [118.7073, 37.5513], | |||
| 中山: [113.4229, 22.478], | |||
| 临汾: [111.4783, 36.1615], | |||
| } | |||
| let data = [] | |||
| for (let key in geoCoordMap) { | |||
| let geoCoord = geoCoordMap[key] | |||
| data.push({ | |||
| geometry: { | |||
| type: 'Point', | |||
| coordinates: [ | |||
| geoCoord[0] - 2 + Math.random() * 4, | |||
| geoCoord[1] - 2 + Math.random() * 4, | |||
| ], | |||
| }, | |||
| count: 30 * Math.random(), | |||
| }) | |||
| } | |||
| let dataset = new DC.MapvDataSet(data) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(data)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Array<Object>} data`:数据数组,详情参考:[DataSet](https://github.com/huiyan-fe/mapv/blob/master/src/data/DataSet.md) | |||
| - 返回值 `dataset` | |||
| ```json | |||
| // 数据说明 | |||
| { | |||
| "geometry": { | |||
| "type": "Point", // 类别,有:Point、Polygon、LineString | |||
| "coordinates": [123, 23] // 坐标,线和面是二位数组 | |||
| }, | |||
| "count": 30, // 用于阈值计算 | |||
| "time": 100 * Math.random() // 步长 用于动画 | |||
| } | |||
| ``` | |||
| ## DC.MapvLayer | |||
| > 数据可视化图层,继承于[Layer](../layer/#layer) | |||
| ### example | |||
| ```js | |||
| let options = { | |||
| fillStyle: 'rgba(55, 50, 250, 0.8)', | |||
| shadowColor: 'rgba(255, 250, 50, 1)', | |||
| shadowBlur: 20, | |||
| size: 40, | |||
| globalAlpha: 0.5, | |||
| label: { | |||
| show: true, | |||
| fillStyle: 'white', | |||
| }, | |||
| animation: { | |||
| type: 'time', | |||
| stepsRange: { | |||
| start: 0, | |||
| end: 100, | |||
| }, | |||
| trails: 10, | |||
| duration: 4, | |||
| }, | |||
| gradient: { | |||
| 0.25: 'rgb(0,0,255)', | |||
| 0.55: 'rgb(0,255,0)', | |||
| 0.85: 'yellow', | |||
| 1.0: 'rgb(255,0,0)', | |||
| }, | |||
| draw: 'grid', | |||
| } | |||
| let layer = new DC.MapvLayer('layer', options) | |||
| viewer.addLayer(layer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(id,options)_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{String} id`:图层唯一标识 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `mapvLayer` | |||
| ```json | |||
| // 属性参数(可选) | |||
| { | |||
| "fillStyle": "rgba(55, 50, 250, 0.8)", //颜色 | |||
| "shadowColor": "rgba(255, 250, 50, 1)", // 阴影颜色 | |||
| "shadowBlur": 20, // 阴影扩散 | |||
| "size": 40, // 点大小 | |||
| "globalAlpha": 0.5, // | |||
| "globalCompositeOperation": "lighter", | |||
| "label": { | |||
| "show": true, | |||
| "fillStyle": "white" | |||
| }, // 文字 | |||
| "animation": { | |||
| "type": "time", | |||
| "stepsRange": { | |||
| "start": 0, | |||
| "end": 100 | |||
| }, | |||
| "trails": 10, | |||
| "duration": 4 | |||
| }, //动画 | |||
| "lineWidth": 0.7, // 线宽 | |||
| "lineDash": [15], // 虚线 | |||
| "gradient": { | |||
| 0.25: "rgb(0,0,255)", | |||
| 0.55: "rgb(0,255,0)", | |||
| 0.85: "yellow", | |||
| 1.0: "rgb(255,0,0)" | |||
| }, //渐变 | |||
| "draw": "grid" //展现方式 有:simple:简单、intensity:强度、honeycomb:蜂巢、grid:格子等 | |||
| } | |||
| ``` | |||
| ### methods | |||
| - **_setDataSet(dataset)_** | |||
| 设置点位 | |||
| - 参数 | |||
| - `{MapvDataSet} dataset`: 数据配置 | |||
| - 返回值 `this` | |||
| @@ -0,0 +1,242 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # 地图地形 🌎 | |||
| 构建地球表面的地形和图片,展现地球表面的真实状态 | |||
| ## DC.ImageryLayerFactory | |||
| > 地图工厂, 用于创建各类地图瓦片 | |||
| ### example | |||
| ```js | |||
| let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({ | |||
| style: 'img', | |||
| }) | |||
| viewer.addBaseLayer(baseLayer, { | |||
| name: '地图', | |||
| iconUrl: '../preview.png', | |||
| }) | |||
| ``` | |||
| ### static methods | |||
| - **_createAmapImageryLayer(options)_** | |||
| 创建高德地图 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `baseLayer` | |||
| - **_createBaiduImageryLayer(options)_** | |||
| 创建百度地图 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `baseLayer` | |||
| - **_createGoogleImageryLayer(options)_** | |||
| 创建谷歌地图 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `baseLayer` | |||
| - **_createTdtImageryLayer(options)_** | |||
| 创建天地图 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `baseLayer` | |||
| - **_createTencentImageryLayer(options)_** | |||
| 创建腾讯地图 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `baseLayer` | |||
| - **_createArcGisImageryLayer(options)_** | |||
| 创建 Arcgis 地图 | |||
| - 参数 | |||
| - `{Object} options`:属性,详情参考 [ArcGis](http://resource.dvgis.cn/cesium-docs/ArcGisMapServerImageryProvider.html#.ConstructorOptions) | |||
| - 返回值 `baseLayer` | |||
| - **_createSingleTileImageryLayer(options)_** | |||
| 创建单图片地图 | |||
| - 参数 | |||
| - `{Object} options`:属性,详情参考 [Single](http://resource.dvgis.cn/cesium-docs/SingleTileImageryProvider.html#.ConstructorOptions) | |||
| - 返回值 `baseLayer` | |||
| - **_createWMSImageryLayer(options)_** | |||
| 创建 WMS 地图 | |||
| - 参数 | |||
| - `{Object} options`:属性,详情参考 [WMS](http://resource.dvgis.cn/cesium-docs/WebMapServiceImageryProvider.html#.ConstructorOptions) | |||
| - 返回值 `baseLayer` | |||
| - **_createWMTSImageryLayer(options)_** | |||
| 创建 WMTS 地图 | |||
| - 参数 | |||
| - `{Object} options`:属性,详情参考 [WMTS](http://resource.dvgis.cn/cesium-docs/WebMapTileServiceImageryProvider.html#.ConstructorOptions) | |||
| - 返回值 `baseLayer` | |||
| - **_createXYZImageryLayer(options)_** | |||
| 创建 X/Y/Z 地图 | |||
| - 参数 | |||
| - `{Object} options`:属性,详情参考 [X/Y/Z](http://resource.dvgis.cn/cesium-docs/UrlTemplateImageryProvider.html#.ConstructorOptions) | |||
| - 返回值 `baseLayer` | |||
| - **_createCoordImageryLayer(options)_** | |||
| 创建坐标系地图 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `baseLayer` | |||
| - **_createGridImageryLayer(options)_** | |||
| 创建网格地图 | |||
| - 参数 | |||
| - `{Object} options`:属性,详情参考 [Grid](http://resource.dvgis.cn/cesium-docs/GridImageryProvider.html#.ConstructorOptions) | |||
| - 返回值 `baseLayer` | |||
| - **_createMapboxImageryLayer(options)_** | |||
| 创建 Mapbox 地图 | |||
| - 参数 | |||
| - `{Object} options`:属性,详情参考 [Mapbox](http://resource.dvgis.cn/cesium-docs/MapboxImageryProvider.html#.ConstructorOptions) | |||
| - 返回值 `baseLayer` | |||
| - **_createMapboxStyleImageryLayer(options)_** | |||
| 创建 Mapbox 样式地图 | |||
| - 参数 | |||
| - `{Object} options`:属性,详情参考 [Mapbox Style](http://resource.dvgis.cn/cesium-docs/MapboxStyleImageryProvider.html#.ConstructorOptions) | |||
| - 返回值 `baseLayer` | |||
| - **_createTMSImageryLayer(options)_** | |||
| 创建 TMS 地图 | |||
| - 参数 | |||
| - `{Object} options`:属性,详情参考 [TMS](http://resource.dvgis.cn/cesium-docs/TileMapServiceImageryProvider.html#.ConstructorOptions) | |||
| - 返回值 `baseLayer` | |||
| - **_createImageryLayer(type, options)_** | |||
| 根据类型创建地图 | |||
| - 参数 | |||
| - `{String} type`:类型,参考:DC.ImageryType | |||
| - `{Object} options`:属性 | |||
| - 返回值 `baseLayer` | |||
| ```json | |||
| //属性参数(可选) | |||
| { | |||
| "url": "", //地址:arcgis/wmts/xyx/single 有效 | |||
| "style": "img", //样式:img、elec、ter。百度:normal、middlenight、dark,腾讯:img,1、4 | |||
| "key": "", //认证,仅天地图有效 | |||
| "subdomains": [], | |||
| "crs":"WGS84",// 坐标系: WGS84 、BD09 、GCJ02,仅百度、高德有效 | |||
| "protocol":null,// http、https | |||
| "tilingScheme":null, // 瓦片切片模式:GeographicTilingScheme , WebMercatorTilingScheme | |||
| "rectangle": { | |||
| "west": 0, | |||
| "south": 0, | |||
| "east": 0, | |||
| "north": | |||
| } // 瓦片范围,有west,south,east,north 单位为: 弧度,使用经纬度时需将转为弧度 | |||
| } | |||
| ``` | |||
| ## DC.TerrainFactory | |||
| > 地形工厂, 用于创建地形 | |||
| ### example | |||
| ```js | |||
| let terrain = DC.TerrainFactory.createUrlTerrain({ | |||
| url: '****/***', | |||
| }) | |||
| viewer.addTerrain(terrain) | |||
| ``` | |||
| ### static methods | |||
| - **_createEllipsoidTerrain()_** | |||
| 创建默认地形 | |||
| returns `terrain` | |||
| - **_createUrlTerrain(options)_** | |||
| 根据 url 创建地形 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `terrain` | |||
| - **_createGoogleTerrain(options)_** | |||
| 创建谷歌地形 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `terrain` | |||
| - **_createArcgisTerrain(options)_** | |||
| 创建 Arcgis 地形 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `terrain` | |||
| - **_createVRTerrain(options)_** | |||
| 创建 VR 地形 | |||
| - 参数 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `terrain` | |||
| - **_createTerrain(type,options)_** | |||
| 根据类型创建地形 | |||
| - 参数 | |||
| - `{String} type`:类型,参考:DC.TerrainType | |||
| - `{Object} options`:属性 | |||
| - 返回值 `terrain` | |||
| ```json | |||
| //属性参数(可选) | |||
| { | |||
| "url": "" // 服务地址 | |||
| } | |||
| ``` | |||
| @@ -0,0 +1,189 @@ | |||
| --- | |||
| sidebar: auto | |||
| --- | |||
| # 实用工具 🌎 | |||
| 三维场景中的辅助工具,方便在场景中进行各种测量、标绘、位置编辑 | |||
| ## DC.Plot | |||
| > 标绘类 | |||
| ### example | |||
| ```js | |||
| let plot = new DC.Plot(viewer, {}) | |||
| plot.draw(DC.OverlayType.POINT, (overlay) => {}, {}) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,[options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Viewer} viewer`:场景 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `plot` | |||
| ```json | |||
| //属性参数(可选) | |||
| { | |||
| "icon_center": "**.png", // 自定义的中心点图标 | |||
| "icon_anchor": "**.png", //自定义的锚点图标 | |||
| "icon_midAnchor": "**.png", //自定义的中心锚点图标 | |||
| "icon_size": [12, 12],//自定义的中心锚点大小 | |||
| "clampToModel":false // 点位是否获取模型表面坐标 | |||
| } | |||
| ``` | |||
| ### methods | |||
| - **_draw(type,callback,[style],[clampToModel])_** | |||
| 标绘 | |||
| - 参数 | |||
| - `{String} type`:覆盖物类型,参照 [OverlayType](../base/#overlaytype) | |||
| - `{Function} callback`:标绘完成的回调函数,参数为覆盖物 | |||
| - `{Object} style`:标绘的覆盖物样式设置 | |||
| - `{Boolean} clampToModel`:点位是否获取模型表面坐标 | |||
| - 返回值 `this` | |||
| - **_edit(overlay,callback,[clampToModel])_** | |||
| 编辑 | |||
| - 参数 | |||
| - `{Overlay} overlay`:覆盖物 | |||
| - `{Function} callback`:编辑完成的回调函数,参数为覆盖物 | |||
| - `{Boolean} clampToModel`:点位是否获取模型表面坐标 | |||
| - 返回值 `this` | |||
| - **_stop()_** | |||
| 停止 | |||
| - 返回值 `this` | |||
| ## DC.PositionEditor | |||
| > 位置编辑工具 | |||
| ### example | |||
| ```js | |||
| let coords = new DC.PositionEditor(viewer) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,[options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Viewer} viewer`:场景 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `plot` | |||
| ```json | |||
| //属性参数(可选) | |||
| { | |||
| "arrow": true, // 辅助轴线是否为箭头 | |||
| "width": 8, // 辅助轴线宽度 | |||
| "depthFail": true, // 辅助轴线是否支持深度检测 | |||
| "axisLineScale": 1 // 辅助轴线比例 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{Overlay} overlay`:覆盖物 **_`writeOnly`_** | |||
| ### methods | |||
| - **_activate(type, callback)_** | |||
| 激活 | |||
| - 参数 | |||
| - `{String} type`:类型,`DC.PositionEditorType` | |||
| - `{Function} callback`:回调函数,参数为:position | |||
| - 返回值 `this` | |||
| - **_deactivate()_** | |||
| 失效 | |||
| - 返回值 `this` | |||
| ## DC.ModelManager | |||
| > 模型管理工具 | |||
| ### example | |||
| ```js | |||
| let manager = new DC.ModelManager(viewer, layer.getOverlays()) | |||
| ``` | |||
| ### creation | |||
| - **_constructor(viewer,models,[options])_** | |||
| 构造函数 | |||
| - 参数 | |||
| - `{Viewer} viewer`:场景 | |||
| - `{Array} models`:覆盖物 | |||
| - `{Object} options`:属性 | |||
| - 返回值 `manager` | |||
| ```json | |||
| //属性参数(可选) | |||
| { | |||
| "disappearHeight": 1000, // 消失高度 | |||
| "disappearSeconds": 0.5, // 消失时间 | |||
| "appearSeconds": 0.5 // 出现时间 | |||
| } | |||
| ``` | |||
| ### properties | |||
| - `{Array} models`:覆盖物 | |||
| ### methods | |||
| - **_spread(height, seconds)_** | |||
| 展开 | |||
| - 参数 | |||
| - `{Number} height`:高度 | |||
| - `{Number} seconds`:时间 | |||
| - 返回值 `this` | |||
| - **_combine(seconds)_** | |||
| 合并 | |||
| - 参数 | |||
| - `{Number} seconds`:时间 | |||
| - 返回值 `this` | |||
| - **_showModel(modelIndex)_** | |||
| 展示模型 | |||
| - 参数 | |||
| - `{Number} modelIndex`:模型索引,和数组索引一致 | |||
| - 返回值 `this` | |||
| - **_restore()_** | |||
| 还原 | |||
| - 返回值 `this` | |||
| @@ -25,7 +25,9 @@ | |||
| "build:iife": "rimraf dist && gulp buildIIFE", | |||
| "build:release": "rimraf dist && gulp buildRelease", | |||
| "prepublishOnly": "yarn run build:release", | |||
| "server": "gulp server" | |||
| "server": "gulp server", | |||
| "docs:dev": "vuepress dev docs", | |||
| "docs:build": "vuepress build docs" | |||
| }, | |||
| "devDependencies": { | |||
| "@babel/core": "^7.21.4", | |||
| @@ -63,7 +65,8 @@ | |||
| "sass": "^1.62.1", | |||
| "shelljs": "^0.8.5", | |||
| "supercluster": "^8.0.1", | |||
| "vinyl-sourcemaps-apply": "^0.2.1" | |||
| "vinyl-sourcemaps-apply": "^0.2.1", | |||
| "vuepress": "^1.9.9" | |||
| }, | |||
| "files": [ | |||
| "dist" | |||