add skyline

examples/info/custom.html

@@ -4,8 +4,8 @@
     <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>
     <script src="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js"></script>
+    <script src="/libs/dc-sdk/dc.min.js"></script>
     <link
       href="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css"
       rel="stylesheet"
@@ -27,20 +27,8 @@
     <script>
       let viewer = undefined
       function initViewer() {
-        let CesiumViewer = new Cesium.Viewer('viewer-container', {
-          baseLayerPicker: false,
+        let CesiumViewer = new Cesium.CesiumWidget('viewer-container', {
           baseLayer: false,
-          animation: false,
-          fullscreenButton: false,
-          geocoder: false,
-          homeButton: false,
-          infoBox: false,
-          sceneModePicker: false,
-          selectionIndicator: false,
-          timeline: false,
-          navigationHelpButton: false,
-          navigationInstructionsInitiallyVisible: false,
-          creditContainer: undefined,
           shouldAnimate: true,
         })
         viewer = new DC.Viewer(CesiumViewer)

examples/list.js

@@ -661,6 +661,44 @@ const EXAMPLE_LIST = [
         name: '镜头眩光',
         page: 'lens_flare.html',
       },
+      {
+        name: '天际线',
+        page: 'sky_line.html',
+      },
+    ],
+  },
+  {
+    name: 'Turf计算',
+    folder: 'turf',
+    children: [
+      {
+        name: '点缓冲',
+        page: 'point_buffer.html',
+      },
+      {
+        name: '线缓冲',
+        page: 'polyline_buffer.html',
+      },
+      {
+        name: '面缓冲',
+        page: 'polygon_buffer.html',
+      },
+      {
+        name: '比例面',
+        page: 'polygon_scale.html',
+      },
+      {
+        name: '旋转线',
+        page: 'polyline_rotate.html',
+      },
+      {
+        name: '旋转面',
+        page: 'polygon_rotate.html',
+      },
+      {
+        name: '扇形面',
+        page: 'polygon_sector.html',
+      },
     ],
   },
   {

gulpfile.js

@@ -86,7 +86,7 @@ async function buildModules(options) {
             .replace('{{__TIME__}}', getTime())
             .replace(
               '{{__ENGINE_VERSION__}}',
-              c_packageJson.devDependencies['@cesium/engine'].replace('^', '')
+              c_packageJson.dependencies['@cesium/engine'].replace('^', '')
             )
             .replace('{{__AUTHOR__}}', packageJson.author)
             .replace('{{__HOME_PAGE__}}', packageJson.homepage)

package.json

@@ -52,6 +52,7 @@
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-concat": "^2.6.1",
+    "http-proxy-middleware": "^3.0.3",
     "portfinder": "^1.0.32",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.0",
@@ -65,6 +66,6 @@
     "dist"
   ],
   "dependencies": {
-    "@dvgis/dc-common": "^4.0.1"
+    "@dvgis/dc-common": "^4.0.2"
   }
 }

src/index.js

@@ -44,8 +44,13 @@ export function ready(options = {}) {
       registerEcharts(options['echarts'])
       registerLib('echarts', options['echarts'])
     }
-    __isInitialized = true
 
+    //register echarts lib
+    if (options['turf']) {
+      registerLib('turf', options['turf'])
+    }
+
+    __isInitialized = true
     setParam('isInitialized', true)
     setParam('baseUrl', this.config.baseUrl)
     resolve()

src/modules/effect/Effect.js

@@ -9,6 +9,7 @@ import DepthOfField from './type/DepthOfField'
 import LensFlare from './type/LensFlare'
 import NightVision from './type/NightVision'
 import Silhouette from './type/Silhouette'
+import SkyLine from './type/SkyLine.js'
 
 class Effect {
   constructor(viewer) {
@@ -22,6 +23,7 @@ class Effect {
     this._lensFlare = new LensFlare(viewer)
     this._night = new NightVision(viewer)
     this._silhouette = new Silhouette(viewer)
+    this._skyLine = new SkyLine(viewer)
   }
 
   get blackAndWhite() {
@@ -51,6 +53,10 @@ class Effect {
   get silhouette() {
     return this._silhouette
   }
+
+  get skyLine() {
+    return this._skyLine
+  }
 }
 
 export default Effect

src/modules/effect/type/BlackAndWhite.js

@@ -21,9 +21,7 @@ class BlackAndWhite {
 
   set enable(enable) {
     this._enable = enable
-    if (!this._delegate) {
-      this._createPostProcessStage()
-    }
+    !this._delegate && this._createPostProcessStage()
     this._delegate.enabled = enable
     this._state = enable ? State.ENABLED : State.DISABLED
   }

src/modules/effect/type/Bloom.js

@@ -24,9 +24,7 @@ class Bloom {
 
   set enable(enable) {
     this._enable = enable
-    if (!this._delegate) {
-      this._createPostProcessStage()
-    }
+    !this._delegate && this._createPostProcessStage()
     this._delegate.enabled = enable
     this._state = enable ? State.ENABLED : State.DISABLED
   }

src/modules/effect/type/Brightness.js

@@ -21,9 +21,7 @@ class Brightness {
 
   set enable(enable) {
     this._enable = enable
-    if (!this._delegate) {
-      this._createPostProcessStage()
-    }
+    !this._delegate && this._createPostProcessStage()
     this._delegate.enabled = enable
     this._state = enable ? State.ENABLED : State.DISABLED
   }

src/modules/effect/type/LensFlare.js

@@ -24,9 +24,7 @@ class LensFlare {
 
   set enable(enable) {
     this._enable = enable
-    if (!this._delegate) {
-      this._createPostProcessStage()
-    }
+    !this._delegate && this._createPostProcessStage()
     this._delegate.enabled = enable
     this._state = enable ? State.ENABLED : State.DISABLED
   }

src/modules/effect/type/NightVision.js

@@ -19,9 +19,7 @@ class NightVision {
 
   set enable(enable) {
     this._enable = enable
-    if (!this._delegate) {
-      this._createPostProcessStage()
-    }
+    !this._delegate && this._createPostProcessStage()
     this._delegate.enabled = enable
     this._state = enable ? State.ENABLED : State.DISABLED
   }

src/modules/effect/type/SkyLine.js

@@ -0,0 +1,87 @@
+/**
+ * @Author: Caven Chen
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import SkyLineRedShader from '../../material/shader/skyline/SkyLineRedShader.glsl'
+import SkyLineShader from '../../material/shader/skyline/SkyLineShader.glsl'
+
+class SkyLine {
+  constructor(viewer) {
+    this._viewer = viewer
+    this._delegate = undefined
+    this._enable = false
+    this._depthThreshold = 0.00001
+    this._color = Cesium.Color.RED
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'skyLine'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    !this._delegate && this._createPostProcessStage()
+    this._delegate.enabled = enable
+    this._state = enable ? State.ENABLED : State.DISABLED
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set depthThreshold(depthThreshold) {
+    this._depthThreshold = depthThreshold
+  }
+
+  get depthThreshold() {
+    return this._depthThreshold
+  }
+
+  set color(color) {
+    this._color = color
+  }
+
+  get color() {
+    return this._color
+  }
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    const edgeDetection =
+      Cesium.PostProcessStageLibrary.createEdgeDetectionStage()
+
+    const self = this
+    const redStage = new Cesium.PostProcessStage({
+      fragmentShader: SkyLineRedShader,
+      uniforms: {
+        u_depthThreshold: function () {
+          return self._depthThreshold
+        },
+      },
+    })
+    const stage = new Cesium.PostProcessStage({
+      fragmentShader: SkyLineShader,
+      uniforms: {
+        u_silhouetteTexture: edgeDetection.name,
+        u_redTexture: redStage.name,
+        u_color: function () {
+          return self._color
+        },
+      },
+    })
+
+    this._delegate = new Cesium.PostProcessStageComposite({
+      stages: [edgeDetection, redStage, stage],
+      inputPreviousStageTexture: false,
+      uniforms: edgeDetection.uniforms,
+    })
+    this._viewer.scene.postProcessStages.add(this._delegate)
+  }
+}
+
+export default SkyLine

src/modules/geo-tools/GeoTools.js

@@ -0,0 +1,148 @@
+
+/**
+ * @Author : Caven Chen
+ */
+
+import Parse from '../parse/Parse'
+import { getLib } from '../../global-api/index.js'
+
+class GeoTools {
+  /**
+   *
+   * @param position
+   * @param radius
+   * @param steps
+   * @returns {*[]}
+   */
+  static pointBuffer(position, radius, steps = 8) {
+    const turf = getLib("turf")
+    if(!turf) {
+      throw 'missing turf'
+    }
+    const point = turf.point(Parse.parsePointCoordToArray(position))
+    const buffered = turf.buffer(point, radius, { units: 'meters', steps })
+    return buffered?.geometry?.coordinates[0] || []
+  }
+
+  /**
+   *
+   * @param positions
+   * @param radius
+   * @param steps
+   * @returns {*[]}
+   */
+  static polylineBuffer(positions, radius, steps = 8) {
+    const turf = getLib("turf")
+    if(!turf) {
+      throw 'missing turf'
+    }
+    const polyline = turf.lineString(Parse.parsePolylineCoordToArray(positions))
+    const buffered = turf.buffer(polyline, radius, { units: 'meters', steps })
+    return buffered?.geometry?.coordinates[0] || []
+  }
+
+  /**
+   *
+   * @param positions
+   * @param radius
+   * @param steps
+   * @returns {*[]}
+   */
+  static polygonBuffer(positions, radius, steps = 8) {
+    const turf = getLib("turf")
+    if(!turf) {
+      throw 'missing turf'
+    }
+    const polygon = turf.polygon(Parse.parsePolygonCoordToArray(positions, true))
+    const buffered = turf.buffer(polygon, radius, { units: 'meters', steps })
+    return buffered?.geometry?.coordinates[0] || []
+  }
+
+  /**
+   *
+   * @param center
+   * @param radius
+   * @param startAngle
+   * @param endAngle
+   * @param steps
+   * @returns {*[]}
+   */
+  static sector(center, radius, startAngle, endAngle, steps = 64) {
+    const turf = getLib("turf")
+    if(!turf) {
+      throw 'missing turf'
+    }
+    const point = turf.point(Parse.parsePointCoordToArray(center))
+    const sector = turf.sector(point, radius, startAngle, endAngle, {
+      units: 'meters',
+      steps,
+    })
+    return sector?.geometry?.coordinates[0] || []
+  }
+
+  /**
+   *
+   * @param positions
+   * @param factor
+   * @returns {*[]}
+   */
+  static transformPolylineScale(positions, factor) {
+    const turf = getLib("turf")
+    if(!turf) {
+      throw 'missing turf'
+    }
+    const polyline = turf.lineString(Parse.parsePolylineCoordToArray(positions))
+    const scaledPolyline = turf.transformScale(polyline, factor)
+    return scaledPolyline?.geometry?.coordinates || []
+  }
+
+  /**
+   *
+   * @param positions
+   * @param factor
+   * @returns {*[]}
+   */
+  static transformPolygonScale(positions, factor) {
+    const turf = getLib("turf")
+    if(!turf) {
+      throw 'missing turf'
+    }
+    const polygon = turf.polygon(Parse.parsePolygonCoordToArray(positions, true))
+    const scaledPolygon = turf.transformScale(polygon, factor)
+    return scaledPolygon?.geometry?.coordinates[0] || []
+  }
+
+  /**
+   *
+   * @param positions
+   * @param angle
+   * @returns {*[]}
+   */
+  static transformPolylineRotate(positions, angle) {
+    const turf = getLib("turf")
+    if(!turf) {
+      throw 'missing turf'
+    }
+    const polyline = turf.lineString(Parse.parsePolylineCoordToArray(positions))
+    const rotatedPolyline = turf.transformRotate(polyline, angle)
+    return rotatedPolyline?.geometry?.coordinates || []
+  }
+
+  /**
+   *
+   * @param positions
+   * @param angle
+   * @returns {*[]}
+   */
+  static transformPolygonRotate(positions, angle) {
+    const turf = getLib("turf")
+    if(!turf) {
+      throw 'missing turf'
+    }
+    const polygon = turf.polygon(Parse.parsePolygonCoordToArray(positions, true))
+    const rotatedPolyline = turf.transformRotate(polygon, angle)
+    return rotatedPolyline?.geometry?.coordinates[0] || []
+  }
+}
+
+export default GeoTools

src/modules/geo-tools/index.js

@@ -0,0 +1,5 @@
+/**
+ * @Author : Caven Chen
+ */
+
+export { default as GeoTools } from './GeoTools.js'

src/modules/index.js

@@ -153,3 +153,5 @@ export { KeyboardRoaming, RoamingController, RoamingPath } from './roaming'
 export { TrackViewMode, TrackController, Track } from './history-track'
 
 export { MeasureType, Measure } from './measure'
+
+export { GeoTools } from './geo-tools'

src/modules/material/shader/skyline/SkyLineRedShader.glsl

@@ -0,0 +1,15 @@
+in  vec2 v_textureCoordinates;
+uniform sampler2D colorTexture;
+uniform sampler2D depthTexture;
+uniform float u_depthThreshold;
+
+
+void main(void) {
+  float depth = czm_readDepth(depthTexture, v_textureCoordinates);
+  vec4 color = texture(colorTexture, v_textureCoordinates);
+  if(depth < 1.0 - u_depthThreshold ){
+    out_FragColor = color;
+  }else {
+    out_FragColor = vec4(1.,0.,0.,1.);
+  }
+}

src/modules/material/shader/skyline/SkyLineShader.glsl

@@ -0,0 +1,19 @@
+in  vec2 v_textureCoordinates;
+
+
+uniform sampler2D colorTexture;
+uniform sampler2D u_silhouetteTexture;
+uniform sampler2D u_redTexture;
+uniform vec4 u_color;
+
+void main(void) {
+  vec4 color = texture(colorTexture, v_textureCoordinates);
+  vec4 silhouetteColor = texture(u_silhouetteTexture, v_textureCoordinates);
+  vec4 redColor = texture(u_redTexture, v_textureCoordinates);
+
+  if(redColor.r == 1.0 ){
+    out_FragColor = mix(color, u_color, silhouetteColor.a);
+  }else {
+    out_FragColor = color;
+  }
+}