OpenSource
/
dc-sdk
mirror of https://github.com/dvt3d/dc-sdk
Watch 4
Star 0
Fork 0
Code Issues 0 Releases 92 Wiki Activity
Browse Source

add i3s layer

tags/4.0.0
cavencj 1 year ago
parent
3f10a24b78
commit
c20644ad46
13 changed files with 301 additions and 92 deletions
Split View Show Diff Stats
  1. 50
    0
      examples/layer/i3s.html
  2. 36
    37
      examples/layer/tileset.html
  3. 6
    0
      examples/list.js
  4. 49
    48
      examples/model/3dtiles_shp.html
  5. 50
    0
      examples/model/i3s.html
  6. 2
    0
      src/modules/index.js
  7. 1
    0
      src/modules/layer/index.js
  8. 37
    0
      src/modules/layer/type/I3SLayer.js
  9. 6
    6
      src/modules/overlay/Overlay.js
  10. 1
    1
      src/modules/overlay/index.js
  11. 43
    0
      src/modules/overlay/model/I3S.js
  12. 11
    0
      src/modules/overlay/model/Tileset.js
  13. 9
    0
      src/modules/utils/Util.js

+ 50
- 0
examples/layer/i3s.html View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>dc-example</title>
<script src="/libs/dc-sdk/dc.min.js"></script>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84',
}
)
viewer.addBaseLayer(baseLayer)
let layer = new DC.I3SLayer('layer')
viewer.addLayer(layer)

let i3s = new DC.I3S(
'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/Frankfurt2017_vi3s_18/SceneServer/layers/0',
{
cesium3dTilesetOptions: {
skipLevelOfDetail: true,
maximumScreenSpaceError: 128,
},
}
)
layer.addOverlay(i3s)

viewer.flyToPosition(
'8.667785654590075,50.10358812638023,806.0017044941886,17.973378573231702,-37.940813171994996'
)
}
DC.ready({
baseUrl: '../libs/dc-sdk/resources/',
}).then(initViewer)
</script>
</body>
</html>

+ 36
- 37
examples/layer/tileset.html View File

@@ -1,42 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>dc-example</title>
<script src="/libs/dc-sdk/dc.min.js"></script>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>dc-example</title>
<script src='/libs/dc-sdk/dc.min.js'></script>
<link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
<link href='../index.css' type='text/css' rel='stylesheet'>
</head>

<body>

<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined
let tileset = undefined
function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,
{
style:'img',
crs:'WGS84'
<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined
let tileset = undefined
function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84',
}
)
viewer.addBaseLayer(baseLayer)
let layer = new DC.TilesetLayer('layer')
viewer.addLayer(layer)
tileset = new DC.Tileset(
'//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
)
tileset.setHeight(-420)
layer.addOverlay(tileset)
viewer.flyTo(tileset)
}
)
viewer.addBaseLayer( baseLayer)
let layer = new DC.TilesetLayer('layer')
viewer.addLayer(layer)
tileset = new DC.Tileset(
'//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
)
tileset.setHeight(-420)
layer.addOverlay(tileset)
viewer.flyTo(tileset)
}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
DC.ready({
baseUrl: '../libs/dc-sdk/resources/',
}).then(initViewer)
</script>
</body>
</html>

+ 6
- 0
examples/list.js View File

@@ -261,6 +261,10 @@ const EXAMPLE_LIST = [
name: '栅格瓦片图层(数据图层)',
page: 'raster_tile.html',
},
{
name: 'i3s模型图层',
page: 'i3s.html',
},
],
},
{
@@ -539,6 +543,8 @@ const EXAMPLE_LIST = [
name: '3dtiles-样式和自定shader',
page: '3dtiles_style_and_shader.html',
},

{ name: 'i3s', page: 'i3s.html' },
],
},
{

+ 49
- 48
examples/model/3dtiles_shp.html View File

@@ -1,53 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>dc-example</title>
<script src="/libs/dc-sdk/dc.min.js"></script>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>dc-example</title>
<script src='/libs/dc-sdk/dc.min.js'></script>
<link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
<link href='../index.css' type='text/css' rel='stylesheet'>
</head>
<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined

<body>

<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
style:'img',
crs:'WGS84'
})
viewer.addBaseLayer( baseLayer)
let layer = new DC.TilesetLayer('layer')
viewer.addLayer(layer)
let tileset = new DC.Tileset(
'//resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
)
let style = new DC.TilesetStyle()
style.color = {
conditions: [
['${Height} >= 300', 'rgba(45, 0, 75, 0.5)'],
['${Height} >= 200', 'rgb(102, 71, 151)'],
['${Height} >= 100', 'rgb(170, 162, 204)'],
['${Height} >= 50', 'rgb(224, 226, 238)'],
['${Height} >= 25', 'rgb(252, 230, 200)'],
['${Height} >= 10', 'rgb(248, 176, 87)'],
['${Height} >= 5', 'rgb(198, 106, 11)'],
['true', 'rgb(127, 59, 8)']
]
}
tileset.setStyle(style)
layer.addOverlay(tileset)
viewer.flyTo(tileset)
}
DC.ready({
baseUrl:'../libs/dc-sdk/resources/'
}).then(initViewer)
</script>
</body>
function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84',
}
)
viewer.addBaseLayer(baseLayer)
let layer = new DC.TilesetLayer('layer')
viewer.addLayer(layer)
let tileset = new DC.Tileset(
'//resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
)
let style = new DC.TilesetStyle()
style.color = {
conditions: [
['${Height} >= 300', 'rgba(45, 0, 75, 0.5)'],
['${Height} >= 200', 'rgb(102, 71, 151)'],
['${Height} >= 100', 'rgb(170, 162, 204)'],
['${Height} >= 50', 'rgb(224, 226, 238)'],
['${Height} >= 25', 'rgb(252, 230, 200)'],
['${Height} >= 10', 'rgb(248, 176, 87)'],
['${Height} >= 5', 'rgb(198, 106, 11)'],
['true', 'rgb(127, 59, 8)'],
],
}
tileset.setStyle(style)
layer.addOverlay(tileset)
viewer.flyTo(tileset)
}
DC.ready({
baseUrl: '../libs/dc-sdk/resources/',
}).then(initViewer)
</script>
</body>
</html>

+ 50
- 0
examples/model/i3s.html View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>dc-example</title>
<script src="/libs/dc-sdk/dc.min.js"></script>
<link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
<link href="../index.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="viewer-container" class="viewer-container"></div>
<script>
let viewer = undefined

function initViewer() {
viewer = new DC.Viewer('viewer-container')
let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
DC.ImageryType.AMAP,
{
style: 'img',
crs: 'WGS84',
}
)
viewer.addBaseLayer(baseLayer)
let layer = new DC.I3SLayer('layer')
viewer.addLayer(layer)

let i3s = new DC.I3S(
'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/Frankfurt2017_vi3s_18/SceneServer/layers/0',
{
cesium3dTilesetOptions: {
skipLevelOfDetail: true,
maximumScreenSpaceError: 128,
},
}
)
layer.addOverlay(i3s)

viewer.flyToPosition(
'8.667785654590075,50.10358812638023,806.0017044941886,17.973378573231702,-37.940813171994996'
)
}
DC.ready({
baseUrl: '../libs/dc-sdk/resources/',
}).then(initViewer)
</script>
</body>
</html>

+ 2
- 0
src/modules/index.js View File

@@ -45,6 +45,7 @@ export {
GraticuleLayer,
GroundPrimitiveLayer,
HtmlLayer,
I3SLayer,
KmlLayer,
LabelLayer,
PrimitiveLayer,
@@ -66,6 +67,7 @@ export {
DivIcon,
Model,
Tileset,
I3S,
AttackArrow,
DoubleArrow,
FineArrow,

+ 1
- 0
src/modules/layer/index.js View File

@@ -18,6 +18,7 @@ export { default as GpxLayer } from './type/GpxLayer'
export { default as GraticuleLayer } from './type/GraticuleLayer'
export { default as GroundPrimitiveLayer } from './type/GroundPrimitiveLayer'
export { default as HtmlLayer } from './type/HtmlLayer'
export { default as I3SLayer } from './type/I3SLayer'
export { default as KmlLayer } from './type/KmlLayer'
export { default as LabelLayer } from './type/LabelLayer'
export { default as PrimitiveLayer } from './type/PrimitiveLayer'

+ 37
- 0
src/modules/layer/type/I3SLayer.js View File

@@ -0,0 +1,37 @@
/**
* @Author : Caven Chen
*/

import { Cesium } from '../../../namespace'
import State from '../../state/State'
import Layer from '../Layer'

/**
* I3SLayer is used to add various I3S
*/
class I3SLayer extends Layer {
constructor(id) {
super(id)
this._delegate = new Cesium.PrimitiveCollection()
this._state = State.INITIALIZED
}

get type() {
return Layer.getLayerType('i3s')
}

/**
* Clear all tileset
* @returns {I3SLayer}
*/
clear() {
this._delegate.removeAll()
this._cache = {}
this._state = State.CLEARED
return this
}
}

Layer.registerType('i3s')

export default I3SLayer

+ 6
- 6
src/modules/overlay/Overlay.js View File

@@ -43,11 +43,11 @@ class Overlay {

set show(show) {
this._show = show
if(this._delegate && this._delegate.then){
if (Util.isPromise(this._delegate)) {
this._delegate.then((obj) => {
obj.show = this._show
})
}else {
} else {
this._delegate && (this._delegate.show = this._show)
}
}
@@ -185,8 +185,8 @@ class Overlay {
if (this['update'] && this['destroy']) {
this._layer.delegate.add(this)
}
} else if (this._delegate && this._delegate.then) {
// for 3dtiles
} else if (Util.isPromise(this._delegate)) {
// for 3d-tiles and i3s
this._delegate.then((obj) => {
this._layer.delegate.add(obj)
})
@@ -221,8 +221,8 @@ class Overlay {
if (this['update'] && this['destroy']) {
this._layer.delegate.remove(this)
}
} else if (this._delegate && this._delegate.then) {
// for 3dtiles
} else if (Util.isPromise(this._delegate)) {
// for 3d-tiles and i3s
this._delegate.then((obj) => {
this._layer.delegate.remove(obj)
})

+ 1
- 1
src/modules/overlay/index.js View File

@@ -26,6 +26,7 @@ export { default as DivIcon } from './html/DivIcon'
* model
*/
export { default as Model } from './model/Model'
export { default as I3S } from './model/I3S'
export { default as Tileset } from './model/Tileset'

/**
@@ -49,7 +50,6 @@ export { default as ElecEllipsoidPrimitive } from './primitive/ElecEllipsoidPrim
export { default as FlowLinePrimitive } from './primitive/FlowLinePrimitive'
export { default as LabelPrimitive } from './primitive/LabelPrimitive'
export { default as LightCylinderPrimitive } from './primitive/LightCylinderPrimitive'
// export { default as ModelCollectionPrimitive } from './primitive/ModelCollectionPrimitive'
export { default as ModelPrimitive } from './primitive/ModelPrimitive'
export { default as PointPrimitive } from './primitive/PointPrimitive.js'
export { default as PolylinePrimitive } from './primitive/PolylinePrimitive.js'

+ 43
- 0
src/modules/overlay/model/I3S.js View File

@@ -0,0 +1,43 @@
/**
* @Author : Caven Chen
*/

import { Cesium } from '../../../namespace'
import Overlay from '../Overlay'
import State from '../../state/State'

class I3S extends Overlay {
constructor(url, options = {}) {
super()
this._delegate = Cesium.I3SDataProvider.fromUrl(url, options)
this._state = State.INITIALIZED
}

get type() {
return Overlay.getOverlayType('i3s')
}

/**
*
* @param {*} callback
* @returns
*/
ready(callback) {
this._delegate.then(callback)
return this
}

/**
*
* @param {*} text
* @param {*} textStyle
*/
setLabel(text, textStyle) {
console.warn('not support this function')
return this
}
}

Overlay.registerType('i3s')

export default I3S

+ 11
- 0
src/modules/overlay/model/Tileset.js View File

@@ -66,6 +66,16 @@ class Tileset extends Overlay {
}
}

/**
*
* @param {*} callback
* @returns
*/
ready(callback) {
this._delegate.then(callback)
return this
}

/**
* Sets position
* @param position
@@ -123,6 +133,7 @@ class Tileset extends Overlay {
* @param {*} textStyle
*/
setLabel(text, textStyle) {
console.warn('not support this function')
return this
}


+ 9
- 0
src/modules/utils/Util.js View File

@@ -170,6 +170,15 @@ class Util {
}
return new Blob([u8Arr], { type: mime })
}

/**
*
* @param {*} obj
* @returns
*/
static isPromise(obj) {
return Promise.resolve(obj) == obj
}
}

export default Util

Write Preview
Loading…
Cancel
Save