add i3s layer

dvgis · Oct 18, 2024 · c20644a · c20644a
1 parent 3f10a24
commit c20644a
Show file tree

Hide file tree

Showing 13 changed files with 301 additions and 92 deletions.
diff --git a/examples/layer/i3s.html b/examples/layer/i3s.html
@@ -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>
diff --git a/examples/layer/tileset.html b/examples/layer/tileset.html
@@ -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>
diff --git a/examples/list.js b/examples/list.js
@@ -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' },
     ],
   },
   {

diff --git a/examples/model/3dtiles_shp.html b/examples/model/3dtiles_shp.html
@@ -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>
diff --git a/examples/model/i3s.html b/examples/model/i3s.html
@@ -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>
diff --git a/src/modules/index.js b/src/modules/index.js
@@ -45,6 +45,7 @@ export {
   GraticuleLayer,
   GroundPrimitiveLayer,
   HtmlLayer,
+  I3SLayer,
   KmlLayer,
   LabelLayer,
   PrimitiveLayer,
@@ -66,6 +67,7 @@ export {
   DivIcon,
   Model,
   Tileset,
+  I3S,
   AttackArrow,
   DoubleArrow,
   FineArrow,

diff --git a/src/modules/layer/index.js b/src/modules/layer/index.js
@@ -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'

diff --git a/src/modules/layer/type/I3SLayer.js b/src/modules/layer/type/I3SLayer.js
@@ -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