init

README.md

@@ -1,2 +1,46 @@
 # cesium-d3kit
-基于cesium的基础功能封装包，包含一些常用绘制，特效，材质，计算，三方插件等
+
+### 基于cesium的基础功能封装包，包含一些常用绘制，特效，材质，计算，三方插件等;
+### cesium-d3kit
+
+### 在线示例
+##### http://zhangticcc.gitee.io/webgis
+
+### 使用
+
+#####  在项目中引入Cesium.js
+
+#####  然后引入 cesium-d3kit.js 即可
+
+```
+    <script src="lib/Cesium/Cesium.js"></script>
+    <script src="lib/cesium-d3kit.js"></script>
+    <div id="viewerContainer"></div>
+    <script>
+
+    this._viewer = new Cesium.Viewer("viewerContainer", { infoBox: false });
+
+    this._d3kit = new Cesium.D3Kit(this._viewer)
+
+    let layer = this._viewer.imageryLayers.addImageryProvider(new Cesium.GoogleImageryProvider({
+        style: 'img'
+    }));
+    layer.name = '地图', layer.id = 'layer1', layer.show = false;
+
+    let layer2 = this._viewer.imageryLayers.addImageryProvider(new Cesium.GoogleImageryProvider({}));
+    layer2.name = '电子', layer2.id = 'layer2', layer2.show = false;
+
+    let layer3 = this._viewer.imageryLayers.addImageryProvider(new Cesium.GoogleImageryProvider({
+        style: 'ter'
+    }));
+    layer3.name = '地形', layer3.id = 'layer3', layer3.show = true;
+
+    this._d3kit.showLayerSwitchPanel([layer, layer2, layer3])
+    </script>
+```
+  
+<a href="http://zhangticcc.gitee.io/webgis/#/gis/examples?exampleURL=measure&tempUrl=%2Fwebgis%2Fd3kit%2Ftemp.html&type=d3old"><img alt="" height="80%" src="https://img-blog.csdnimg.cn/20200512160451599.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw==,size_16,color_FFFFFF,t_70" width="80%" ></a>&nbsp;
+<a href="http://zhangticcc.gitee.io/webgis/#/gis/examples?exampleURL=measure&tempUrl=%2Fwebgis%2Fd3kit%2Ftemp.html&type=d3old"></a><br>
+
+<a href="http://zhangticcc.gitee.io/webgis/#/gis/examples?exampleURL=measure&tempUrl=%2Fwebgis%2Fd3kit%2Ftemp.html&type=d3old"><img alt="" height="80%" src="https://img-blog.csdnimg.cn/20200522190732776.gif" width="80%" ></a>&nbsp;
+<a href="http://zhangticcc.gitee.io/webgis/#/gis/examples?exampleURL=measure&tempUrl=%2Fwebgis%2Fd3kit%2Ftemp.html&type=d3old"></a><br>

examples/arcgis.html

@@ -0,0 +1,32 @@
+<div id="viewer-container"></div>
+<script>
+  this._viewer = new Cesium.Viewer("viewer-container");
+
+  this._d3kit = new Cesium.D3Kit(this._viewer)
+
+  let layer = this._viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
+    url:
+      'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
+  }));
+  layer.name = '影像', layer.id = 'layer1';
+
+  let layer2 = this._viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
+    url:
+      'https://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer'
+  }));
+  layer2.name = '电子', layer2.id = 'layer2', layer2.show = false;
+
+  let layer3 = this._viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
+    url:
+      'https://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer'
+  }));
+  layer3.name = '地形', layer3.id = 'layer3', layer3.show = false;
+
+  let layer4 = this._viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
+    url:
+      'https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer'
+  }));
+  layer4.name = '地形2', layer4.id = 'layer4', layer4.show = false;
+
+  this._d3kit.showLayerSwitchPanel([layer, layer2, layer3, layer4])
+</script>

examples/baidu.html

@@ -0,0 +1,30 @@
+<div id="viewer-container"></div>
+<script>
+  this._viewer = new Cesium.Viewer("viewer-container", { infoBox: false });
+
+  this._d3kit = new Cesium.D3Kit(this._viewer)
+  let layer = this._viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({}));
+  layer.name = '电子', layer.id = 'layer1';
+
+  let layer2 = this._viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
+    style: 'midnight'
+  }));
+  layer2.name = '午夜蓝', layer2.id = 'layer2', layer2.show = false;
+
+  let layer3 = this._viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
+    style: 'dark'
+  }));
+  layer3.name = '黑夜', layer3.id = 'layer3', layer3.show = false;
+
+  let layer4 = this._viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
+    style: 'googlelite'
+  }));
+  layer4.name = '精简', layer4.id = 'layer4', layer4.show = false;
+
+  let layer5 = this._viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
+    style: 'redalert'
+  }));
+  layer5.name = '红色警戒', layer5.id = 'layer5', layer5.show = false;
+
+  this._d3kit.showLayerSwitchPanel([layer, layer2, layer3, layer4, layer5])
+</script>

examples/blurBloom.html

@@ -0,0 +1,42 @@
+<!--
+ * @Descripttion: 
+ * @version: 1.0.0
+ * @Author: zhangti
+ * @Date: 2020-03-05 03:58:30
+ * @LastEditors: zhangti
+ * @LastEditTime: 2020-07-23 21:55:06
+ -->
+<div id="viewer-container"></div>
+<script>
+
+  let viewer = new Cesium.Viewer("viewer-container", { infoBox: false, shouldAnimate: true });
+
+  let d3kit = new Cesium.D3Kit(viewer)
+
+  let layer = viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
+    style: 'dark'
+  }));
+  let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+    url: 'data/3DTiles/building/tileset.json'
+  }))
+  tileset.style = new Cesium.Cesium3DTileStyle({
+    color: {
+      conditions: [
+        ["${height} >= 300", "rgba(0, 149, 251, 0.3)"],
+        ["${height} >= 200", "rgb(0, 149, 251, 0.3)"],
+        ["${height} >= 100", "rgb(0, 149, 251, 0.3)"],
+        ["${height} >= 50", "rgb(0, 149, 251, 0.3)"],
+        ["${height} >= 25", "rgb(0, 149, 251, 0.3)"],
+        ["${height} >= 10", "rgb(0, 149, 251, 0.3)"],
+        ["${height} >= 5", "rgb(0, 149, 251, 0.3)"],
+        ["true", "rgb(0, 149, 251, 0.3)"]
+      ]
+    }
+  });
+  viewer.flyTo(tileset)
+  d3kit.showSceneBloomPanel()
+  d3kit.setBlurBloom({
+    width:800,
+    height:800
+  })
+</script>

examples/camera_state.html

@@ -0,0 +1,56 @@
+<!--
+ * @Descripttion: 
+ * @version: 1.0.0
+ * @Author: zhangti
+ * @Date: 2020-03-05 03:58:30
+ * @LastEditors: zhangti
+ * @LastEditTime: 2020-07-23 21:42:24
+-->
+<div id="viewer-container"></div>
+<div class="layui-card">
+  <div class="layui-card-header" style="color:white">相机位置</div>
+  <div class="layui-card-body" id="msg_position">
+  </div>
+</div>
+<script>
+  let viewer = new Cesium.Viewer("viewer-container", { infoBox: false, shouldAnimate: true });
+
+  let d3kit = new Cesium.D3Kit(viewer)
+
+  let layer = viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
+    style: 'dark'
+  }));
+
+  //初始化
+  let position = d3kit.getCameraPosition()
+  document.getElementById('msg_position').innerHTML =
+    `<p>lon: ` + position.lon + `</p>
+        <p>lat: `+ position.lat + `</p>
+        <p>alt: `+ position.height + `</p>
+        <p>heading: `+ position.heading + `</p>
+        <p>pitch: `+ position.pitch + `</p>
+        <p>roll: `+ position.roll + `</p>`;
+
+  //修改
+  viewer.scene.camera.moveEnd.addEventListener((move) => {
+    let position = d3kit.getCameraPosition()
+    document.getElementById('msg_position').innerHTML =
+      `<p>lon: ` + position.lon + `</p>
+        <p>lat: `+ position.lat + `</p>
+        <p>alt: `+ position.height + `</p>
+        <p>heading: `+ position.heading + `</p>
+        <p>pitch: `+ position.pitch + `</p>
+        <p>roll: `+ position.roll + `</p>`;
+
+  });
+</script>
+<style>
+  .layui-card {
+    position: absolute;
+    top: 10px;
+    left: 5px;
+    background-color: #ffffff6b;
+    box-shadow: inset 1px 2px 2px 0 #f2f6fc;
+    color: white
+  }
+</style>

examples/circle_scan.html

@@ -0,0 +1,62 @@
+<!--
+ * @Descripttion: 
+ * @version: 1.0.0
+ * @Author: zhangti
+ * @Date: 2020-03-05 03:58:30
+ * @LastEditors: zhangti
+ * @LastEditTime: 2020-05-22 17:23:03
+ -->
+<div id="viewer-container"></div>
+<script>
+
+  let viewer = new Cesium.Viewer("viewer-container", { infoBox: false, shouldAnimate: true });
+
+  let d3kit = new Cesium.D3Kit(viewer)
+
+  let layer = viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
+    style: 'dark'
+  }));
+  d3kit.setDefSceneConfig()
+  d3kit.setBloomLightScene()
+  var tilesets = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+    url: 'data/3DTiles/building/tileset.json'
+  }));
+  tilesets.readyPromise.then(function (tileset) {
+
+    tileset.style = new Cesium.Cesium3DTileStyle({
+      color: {
+        conditions: [
+          ["${height} >= 300", "rgba(0, 149, 251, 0.3)"],
+          ["${height} >= 200", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 100", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 50", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 25", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 10", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 5", "rgb(0, 149, 251, 0.3)"],
+          ["true", "rgb(0, 149, 251, 0.3)"]
+        ]
+      }
+    });
+
+    viewer.flyTo(tileset)
+    d3kit.setCircleScanEffect({
+      id: 'Circle',
+      position: Cesium.Cartesian3.fromDegrees(104.08985268964015, 30.635443158056148, 10.0),
+      color: Cesium.Color.MEDIUMAQUAMARINE.withAlpha(0.8),
+      radius: 800,
+      circleMode: 'Circle',
+      border: 30
+    })
+  })
+</script>
+<style>
+  .layui-card {
+    position: absolute;
+    top: 10px;
+    left: 5px;
+    background-color: #ffffff6b;
+    box-shadow: inset 1px 2px 2px 0 #f2f6fc;
+    color: white
+  }
+</style>
+</body>

examples/circle_scan2.html

@@ -0,0 +1,61 @@
+<!--
+ * @Descripttion: 
+ * @version: 1.0.0
+ * @Author: zhangti
+ * @Date: 2020-03-05 03:58:30
+ * @LastEditors: zhangti
+ * @LastEditTime: 2020-05-22 17:23:03
+ -->
+<div id="viewer-container"></div>
+<script>
+
+  let viewer = new Cesium.Viewer("viewer-container", { infoBox: false, shouldAnimate: true });
+
+  let d3kit = new Cesium.D3Kit(viewer)
+
+  let layer = viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
+    style: 'dark'
+  }));
+  d3kit.setDefSceneConfig()
+  d3kit.setBloomLightScene()
+  var tilesets = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+    url: 'data/3DTiles/building/tileset.json'
+  }));
+  tilesets.readyPromise.then(function (tileset) {
+
+    tileset.style = new Cesium.Cesium3DTileStyle({
+      color: {
+        conditions: [
+          ["${height} >= 300", "rgba(0, 149, 251, 0.3)"],
+          ["${height} >= 200", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 100", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 50", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 25", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 10", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 5", "rgb(0, 149, 251, 0.3)"],
+          ["true", "rgb(0, 149, 251, 0.3)"]
+        ]
+      }
+    });
+
+    viewer.flyTo(tileset)
+    d3kit.setCircleScanEffect({
+      id: 'CircleScan',
+      position: Cesium.Cartesian3.fromDegrees(104.08985268964015, 30.635443158056148, 10.0),
+      color: Cesium.Color.MEDIUMTURQUOISE.withAlpha(0.5),
+      duration: 2000,
+      border: 50,
+      radius: 2000
+    })
+  })
+</script>
+<style>
+  .layui-card {
+    position: absolute;
+    top: 10px;
+    left: 5px;
+    background-color: #ffffff6b;
+    box-shadow: inset 1px 2px 2px 0 #f2f6fc;
+    color: white
+  }
+</style>

examples/circlewave.html

@@ -0,0 +1,73 @@
+<!--
+ * @Descripttion: 
+ * @version: 1.0.0
+ * @Author: zhangti
+ * @Date: 2020-03-05 03:58:30
+ * @LastEditors: zhangti
+ * @LastEditTime: 2020-05-22 17:23:03
+ -->
+<div id="viewer-container"></div>
+<script>
+
+  let viewer = new Cesium.Viewer("viewer-container", { infoBox: false, shouldAnimate: true });
+
+  let d3kit = new Cesium.D3Kit(viewer)
+
+  let layer = viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
+    style: 'dark'
+  }));
+  d3kit.setDefSceneConfig()
+  d3kit.setBloomLightScene()
+  var tilesets = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+    url: 'data/3DTiles/building/tileset.json'
+  }));
+  tilesets.readyPromise.then(function (tileset) {
+
+    tileset.style = new Cesium.Cesium3DTileStyle({
+      color: {
+        conditions: [
+          ["${height} >= 300", "rgba(0, 149, 251, 0.3)"],
+          ["${height} >= 200", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 100", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 50", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 25", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 10", "rgb(0, 149, 251, 0.3)"],
+          ["${height} >= 5", "rgb(0, 149, 251, 0.3)"],
+          ["true", "rgb(0, 149, 251, 0.3)"]
+        ]
+      }
+    });
+
+    d3kit.flyTo({
+      position: { x: -1337132.0092982147, y: 5330611.474631115, z: 3228680.029449292 },
+      orientation: {
+        heading: Cesium.Math.toRadians(1.0114629015290062),
+        pitch: Cesium.Math.toRadians(-23.53661660731824),
+        roll: Cesium.Math.toRadians(0.00324596311071617)
+      }
+    })
+    var entity = d3kit.createGraphics()
+    entity.position = Cesium.Cartesian3.fromDegrees(104.081701757991, 30.627042558105988, 5)
+    entity.ellipse = new Cesium.EllipseGraphics({
+      semiMajorAxis: 500,
+      semiMinorAxis: 500,
+      material: new Cesium.CircleWaveMaterialProperty({
+        color: Cesium.Color.DARKCYAN.withAlpha(0.8),
+        count: 3,
+        gradient: 0.9
+      })
+    })
+    viewer.entities.add(entity)
+  })
+</script>
+<style>
+  .layui-card {
+    position: absolute;
+    top: 10px;
+    left: 5px;
+    background-color: #ffffff6b;
+    box-shadow: inset 1px 2px 2px 0 #f2f6fc;
+    color: white
+  }
+</style>
+</body>

examples/czml.html

@@ -0,0 +1,51 @@
+<!--
+ * @Descripttion: 
+ * @version: 1.0.0
+ * @Author: zhangti
+ * @Date: 2020-03-05 03:58:30
+ * @LastEditors: zhangti
+ * @LastEditTime: 2020-07-23 21:08:38
+ -->
+<div id="viewer-container"></div>
+<script>
+
+  let viewer = new Cesium.Viewer("viewer-container", { infoBox: false, shouldAnimate: true });
+
+  let d3kit = new Cesium.D3Kit(viewer)
+
+  let layer = viewer.imageryLayers.addImageryProvider(new Cesium.GoogleImageryProvider({
+    style: 'img'
+  }));
+
+  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 999999999.0
+  viewer.dataSources.add(Cesium.CzmlDataSource.load('data/file/beidou.czml'))
+  viewer.scene.skyBox = d3kit.setOneSkyBox();
+  viewer.scene.globe.enableLighting = true;
+
+  let mapGrid = new Cesium.GridImageryProvider();
+  let layerGrid = viewer.imageryLayers.addImageryProvider(mapGrid)
+  viewer.imageryLayers.raiseToTop(layerGrid)
+
+  let _rota = Date.now();
+  function rotate() {
+    let a = .1;
+    let t = Date.now();
+    let n = (t - _rota) / 1e3;
+    _rota = t;
+    viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -a * n);
+  }
+  viewer.clock.onTick.addEventListener(rotate);
+  setTimeout(() => {
+    viewer.delegate.clock.onTick.removeEventListener(rotate);
+  }, 2000000)
+</script>
+<style>
+  .layui-card {
+    position: absolute;
+    top: 10px;
+    left: 5px;
+    background-color: #ffffff6b;
+    box-shadow: inset 1px 2px 2px 0 #f2f6fc;
+    color: white
+  }
+</style>

examples/dark.html

@@ -0,0 +1,39 @@
+<!--
+ * @Descripttion: 
+ * @version: 1.0.0
+ * @Author: zhangti
+ * @Date: 2020-03-05 03:58:30
+ * @LastEditors: zhangti
+ * @LastEditTime: 2020-07-23 21:55:06
+ -->
+<div id="viewer-container"></div>
+<script>
+
+  let viewer = new Cesium.Viewer("viewer-container", { infoBox: false, shouldAnimate: true });
+
+  let d3kit = new Cesium.D3Kit(viewer)
+
+  let layer = viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
+    style: 'dark'
+  }));
+  let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+    url: 'data/3DTiles/building/tileset.json'
+  }))
+  tileset.style = new Cesium.Cesium3DTileStyle({
+    color: {
+      conditions: [
+        ["${height} >= 300", "rgba(0, 149, 251, 0.3)"],
+        ["${height} >= 200", "rgb(0, 149, 251, 0.3)"],
+        ["${height} >= 100", "rgb(0, 149, 251, 0.3)"],
+        ["${height} >= 50", "rgb(0, 149, 251, 0.3)"],
+        ["${height} >= 25", "rgb(0, 149, 251, 0.3)"],
+        ["${height} >= 10", "rgb(0, 149, 251, 0.3)"],
+        ["${height} >= 5", "rgb(0, 149, 251, 0.3)"],
+        ["true", "rgb(0, 149, 251, 0.3)"]
+      ]
+    }
+  });
+  viewer.flyTo(tileset)
+  d3kit.showSceneBloomPanel()
+  d3kit.setDarkEffect()
+</script>