@mapgis/webclient-vue-cesium 10.5.5-1 → 10.5.5-6

package/docs/api/analysis/Flood.md

@@ -1,171 +1,145 @@
-# 洪水淹没分析
-
-> mapgis-3d-flood
+> mapgis-3d-analysis-flood
 
 ## 属性
 
-### `startHeight`
+### `vueKey`
+
+- **类型:** `String`
+- **可选**
+- **非侦听属性**
+- **默认值:** `default`
+- **描述:** mapgis-web-scene 组件的 ID，当使用多个 mapgis-web-scene 组件时，需要指定该值，来唯一标识 mapgis-web-scene 组件，同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey，让组件知道应该作用于哪一个 mapgis-web-scene。
+
+### `vueIndex`
 
 - **类型:** `Number`
-- **默认值:** `0`
-- **侦听属性**
-- **描述:** 洪水淹没水体起始高度，如果设置了起始高度 startHeight，并且设置了当前淹没高度 currentHeight，则真实淹没高度为(currentHeight - startHeight - minHeight)
+- **可选**
+- **非侦听属性**
+- **默认值:** `(Math.random() * 100000000).toFixed(0)`随机计算值
+- **描述:** 当 mapgis-web-scene 插槽中使用了多个相同组件时，例如多个 mapgis-3d-igs-doc-layer 组件，用来区分组件的标识符。
 
-### `minHeight`
+### `startHeight`
 
 - **类型:** `Number`
+- **可选**
 - **默认值:** `0`
 - **侦听属性**
-- **描述:** 淹没动画高度起始点，如果设置了起始高度 startHeight，并且设置了当前淹没高度 currentHeight，则真实淹没高度为(currentHeight - startHeight - minHeight)
+- **描述:** 洪水淹没水体起始高度
 
-### `currentHeight`
+### `minHeight`
 
 - **类型:** `Number`
+- **可选**
 - **默认值:** `0`
-- **侦听属性**
-- **描述:** 当前洪水淹没高度
+- **非侦听属性**
+- **描述:** 淹没动画高度起始点
 
 ### `maxHeight`
 
 - **类型:** `Number`
-- **默认值:** `200`
+- **可选**
+- **默认值:** `2000`
 - **侦听属性**
-- **描述:** 最大淹没高度
+- **描述:** 最大淹没高度，淹没动画高度终止点
 
 ### `floodColor`
 
 - **类型:** `String`
-- **默认值:** `#4e81bb`
+- **可选**
+- **默认值:** `rgba(149,232,249,0.5)`
 - **侦听属性**
-- **描述:** 淹没颜色，十六进制颜色，例如："#4e81bb"
+- **描述:** 洪水颜色
 
 ### `floodSpeed`
 
 - **类型:** `Number`
-- **默认值:** `30`
+- **可选**
+- **默认值:** `500`
 - **侦听属性**
-- **描述:** 淹没速度
+- **描述:** 洪水淹没速度，单位 米/秒
 
 ### `specularIntensity`
 
 - **类型:** `Number`
-- **默认值:** `1`
-- **侦听属性**
+- **可选**
+- **默认值:** `2`
+- **非侦听属性**
 - **描述:** 反射光线强度
 
 ### `amplitude`
 
 - **类型:** `Number`
+- **可选**
 - **默认值:** `10`
-- **侦听属性**
+- **非侦听属性**
 - **描述:** 水波高度
 
 ### `animationSpeed`
 
 - **类型:** `Number`
+- **可选**
 - **默认值:** `0.01`
-- **侦听属性**
+- **非侦听属性**
 - **描述:** 水纹速度
 
 ### `frequency`
 
 - **类型:** `Number`
-- **默认值:** `1000`
-- **侦听属性**
-- **描述:** 水纹频率
-
-### `vueKey`
-
-- **类型:** `String`
 - **可选**
+- **默认值:** `500`
 - **非侦听属性**
-- **默认值:** `default`
-- **描述:**
-```
-mapgis-web-scene组件的ID，当使用多个mapgis-web-scene组件时，需要指定该值，来唯一标识mapgis-web-scene组件，
-同时mapgis-web-scene插槽中的组件也需要传入相同的vueKey，让组件知道应该作用于哪一个mapgis-web-scene。
-```
-
-### `vueIndex`
-
-- **类型:** `Number`
-- **可选**
-- **非侦听属性**
-- **描述:**
-```
-当mapgis-web-scene插槽中使用了多个相同组件时，例如多个mapgis-3d-igs-doc-layer组件，用来区分组件的标识符。
-```
+- **描述:** 水纹频率
 
 ## 方法
 
-### `startAnalyse`
-
-- **Description:** 开始洪水淹没分析
-
-### `stopAnalyse`
-
-- **Description:** 停止洪水淹没分析
+### `analysis`
 
-### `up`
+- **Description:** 洪水淹没分析
 
-- **Description:** 上升洪水水平面，最高为 maxHeight
+### `remove`
 
-### `down`
+- **Description:** 移除洪水淹没分析对象，移除洪水淹没分析结果。
 
-- **Description:** 下降洪水水平面，最低为 minHeight
+### `refresh`
 
-### `pause`
-
-- **Description:** 暂停降洪水水平面的上升或下降
-
-### `playAnalyse(start,end,forward,rate,timeDiff)`
-
-- **Description:** 自定义水平面上升或下降
-- **param:** <br/>
-  > start: 上升或下降的起始位置，即最高点的位置
-  > end: 上升或下降的结束位置，即最低点的位置
-  > forward: 升降的方向，上升为数字 1，下降为数字-1
-  > rate: 刷新频率，默认不用传
-  > timeDiff: Cesium 与浏览器时间倍数，默认不用传
+- **Description:** 重新计算，分析区域不变，修改设置参数后，重新进行分析。
 
 ## 事件
 
 ### `@load`
 
 - **Description:** 在 Flood 加载完毕后发送该事件
-- **Payload** `{ Flood }`
-- `Flood` Flood 对象
+- **Payload** 洪水淹没分析对象
+
+## 示例
 
-## 洪水分析使用方法
+### 非插槽方式
 
 ```vue
 <template>
-  <mapgis-web-scene
-    libPath="cesium/Cesium.js"
-    pluginPath="cesium/webclient-cesium-plugin.min.js"
-  >
+  <mapgis-web-scene style="{height: '100vh'}" v-on:load="handleLoad">
     <mapgis-3d-ogc-wmts-layer
-      :baseUrl="urlT"
+      :baseUrl="url"
       :wmtsLayer="layer"
-      :tileMatrixSet="tileMatrixSetID"
+      :tileMatrixSet="tileMatrixSet"
       :format="format"
-      :tilingScheme="srs"
+      :tilingScheme="tilingScheme"
       :token="token"
-    />
-    <mapgis-3d-igs-terrain :url="url"></mapgis-3d-igs-terrain>
-    <mapgis-3d-flood
-      :startHeight="startHeight"
-      :minHeight="minHeight"
-      :currentHeight="currentHeight"
-      :maxHeight="maxHeight"
-      :floodColor="floodColor"
-      :floodSpeed="floodSpeed"
-      :specularIntensity="specularIntensity"
-      :amplitude="amplitude"
-      :animationSpeed="animationSpeed"
-      :frequency="frequency"
-    >
-    </mapgis-3d-flood>
+    ></mapgis-3d-ogc-wmts-layer>
+    <mapgis-3d-igs-terrain :url="terrainUrl" :requestVertexNormals="true" />
+    <mapgis-ui-card class="storybook-ui-card">
+      <mapgis-3d-analysis-flood
+        :startHeight="startHeight"
+        :minHeight="minHeight"
+        :maxHeight="maxHeight"
+        :floodColor="floodColor"
+        :floodSpeed="floodSpeed"
+        :specularIntensity="specularIntensity"
+        :amplitude="amplitude"
+        :animationSpeed="animationSpeed"
+        :frequency="frequency"
+      />
+    </mapgis-ui-card>
   </mapgis-web-scene>
 </template>
 
@@ -173,55 +147,58 @@ mapgis-web-scene组件的ID，当使用多个mapgis-web-scene组件时，需要
 export default {
   data() {
     return {
-      //地形url
-      url: "http://localhost:6163/igs/rest/g3d/terrain",
-      //天地图参数
-      urlT: "http://t0.tianditu.gov.cn/img_c/wmts",
-      tileMatrixSetID: "c",
-      srs: "EPSG:4326",
+      url: "http://t0.tianditu.gov.cn/img_c/wmts",
+      //地形url TODO这里地址打包的时候改一下
+      terrainUrl: "http://192.168.21.191:6163/igs/rest/g3d/terrain",
+      tileMatrixSet: "c",
+      tilingScheme: "EPSG:4326",
       layer: "img",
       format: "tiles",
       token: {
         key: "tk",
-        value: "f5347cab4b28410a6e8ba5143e3d5a35"
+        value: "2ddaabf906d4b5418aed0078e1657029"
       },
-      //初始淹没高度，淹没总高度为currentHeight - startHeight - minHeight
       startHeight: 0,
-      //初始淹没点
       minHeight: 0,
-      //当前淹没高度
-      currentHeight: 0,
-      //最大淹没高度
-      maxHeight: 200,
-      //淹没颜色
-      floodColor: "#FFFF00",
-      //洪水上涨速度
-      floodSpeed: 30,
-      //洪水反射光线强度
-      specularIntensity: 1,
-      //洪水水波高度
+      maxHeight: 2000,
+      floodColor: "rgba(149,232,249,0.5)",
+      floodSpeed: 500,
+      specularIntensity: 2,
       amplitude: 10,
-      //洪水水纹速度
       animationSpeed: 0.01,
-      //洪水水纹频率
-      frequency: 1000,
-      //洪水分析组件对象
-      floodAnalyse: undefined
+      frequency: 500
     };
   },
-  mounted() {
-    //视点跳转
-    window.CesiumZondy.getWebGlobeByInterval(function(webGlobe) {
-      let sceneManager = new window.CesiumZondy.Manager.SceneManager({
+  methods: {
+    handleLoad(e) {
+      const { component, Cesium } = e;
+      Cesium.Ion.defaultAccessToken =
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2Q0ZGMxYy1iZGZkLTQ4OWItODlhMy1iOWNkMDE0M2U3YWEiLCJpZCI6NTEzNSwiaWF0IjoxNjA2MjE0OTkyfQ.2aktNrUASlLsPwSFtkgKBTQLJTAnOTyjgKDRQmnafiE";
+      const { webGlobe } = component;
+      webGlobe.viewer.camera.setView({
+        direction: {
+          x: 0.4680575394156845,
+          y: -0.8267033643312148,
+          z: 0.31222377744109403
+        },
+        position: {
+          x: -674271.5790185562,
+          y: 5530042.656916835,
+          z: 3232882.3357299212
+        }
+      });
+      //构造视图功能管理对象（视图）
+      var sceneManager = new CesiumZondy.Manager.SceneManager({
         viewer: webGlobe.viewer
       });
-      sceneManager.flyToEx(115, 30, {
-        height: 100,
-        heading: 30,
-        pitch: -10,
+      //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
+      sceneManager.flyToEx(121, 24, {
+        height: 5900,
+        heading: 60,
+        pitch: -16,
         roll: 0
       });
-    });
+    }
   }
 };
 </script>
@@ -231,38 +208,36 @@ export default {
 
 ```vue
 <template>
-  <mapgis-web-scene
-    libPath="cesium/Cesium.js"
-    pluginPath="cesium/webclient-cesium-plugin.min.js"
-  >
+  <mapgis-web-scene style="{height: '100vh'}" v-on:load="handleLoad">
     <mapgis-3d-ogc-wmts-layer
-      :baseUrl="urlT"
+      :baseUrl="url"
       :wmtsLayer="layer"
-      :tileMatrixSet="tileMatrixSetID"
+      :tileMatrixSet="tileMatrixSet"
       :format="format"
-      :tilingScheme="srs"
+      :tilingScheme="tilingScheme"
       :token="token"
-    />
-    <mapgis-3d-igs-terrain :url="url"></mapgis-3d-igs-terrain>
-    <mapgis-3d-flood
-      :startHeight="startHeight"
-      :minHeight="minHeight"
-      :currentHeight="currentHeight"
-      :maxHeight="maxHeight"
-      :floodColor="floodColor"
-      :floodSpeed="floodSpeed"
-      :specularIntensity="specularIntensity"
-      :amplitude="amplitude"
-      :animationSpeed="animationSpeed"
-      :frequency="frequency"
-      @load="load"
-    >
-      <!--      这里是自定义的界面-->
-      <div>
-        <button @click="startAnalyse">开始分析</button>
-        <button @click="stopAnalyse">停止分析</button>
-      </div>
-    </mapgis-3d-flood>
+    ></mapgis-3d-ogc-wmts-layer>
+    <mapgis-3d-igs-terrain :url="terrainUrl" :requestVertexNormals="true" />
+    <mapgis-ui-card class="storybook-ui-card">
+      <mapgis-3d-analysis-flood
+        :startHeight="startHeight"
+        :minHeight="minHeight"
+        :maxHeight="maxHeight"
+        :floodColor="floodColor"
+        :floodSpeed="floodSpeed"
+        :specularIntensity="specularIntensity"
+        :amplitude="amplitude"
+        :animationSpeed="animationSpeed"
+        :frequency="frequency"
+        @load="load"
+      >
+        <!--      这里是自定义的界面-->
+        <div>
+          <button @click="analysis">分析</button>
+          <button @click="remove">清除</button>
+        </div>
+      </mapgis-3d-analysis-flood>
+    </mapgis-ui-card>
   </mapgis-web-scene>
 </template>
 
@@ -270,68 +245,70 @@ export default {
 export default {
   data() {
     return {
-      //地形url
-      url: "http://localhost:6163/igs/rest/g3d/terrain",
-      //天地图参数
-      urlT: "http://t0.tianditu.gov.cn/img_c/wmts",
-      tileMatrixSetID: "c",
-      srs: "EPSG:4326",
+      url: "http://t0.tianditu.gov.cn/img_c/wmts",
+      //地形url TODO这里地址打包的时候改一下
+      terrainUrl: "http://192.168.21.191:6163/igs/rest/g3d/terrain",
+      tileMatrixSet: "c",
+      tilingScheme: "EPSG:4326",
       layer: "img",
       format: "tiles",
       token: {
         key: "tk",
-        value: "f5347cab4b28410a6e8ba5143e3d5a35"
+        value: "2ddaabf906d4b5418aed0078e1657029"
       },
-      //初始淹没高度，淹没总高度为currentHeight - startHeight - minHeight
       startHeight: 0,
-      //初始淹没点
       minHeight: 0,
-      //当前淹没高度
-      currentHeight: 0,
-      //最大淹没高度
-      maxHeight: 200,
-      //淹没颜色
-      floodColor: "#FFFF00",
-      //洪水上涨速度
-      floodSpeed: 30,
-      //洪水反射光线强度
-      specularIntensity: 1,
-      //洪水水波高度
+      maxHeight: 2000,
+      floodColor: "rgba(149,232,249,0.5)",
+      floodSpeed: 500,
+      specularIntensity: 2,
       amplitude: 10,
-      //洪水水纹速度
       animationSpeed: 0.01,
-      //洪水水纹频率
-      frequency: 1000,
-      //洪水分析组件对象
-      floodAnalyse: undefined
+      frequency: 500,
+      floodAnalysis: null
     };
   },
-  mounted() {
-    //视点跳转
-    window.CesiumZondy.getWebGlobeByInterval(function(webGlobe) {
-      let sceneManager = new window.CesiumZondy.Manager.SceneManager({
+  methods: {
+    handleLoad(e) {
+      const { component, Cesium } = e;
+      Cesium.Ion.defaultAccessToken =
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2Q0ZGMxYy1iZGZkLTQ4OWItODlhMy1iOWNkMDE0M2U3YWEiLCJpZCI6NTEzNSwiaWF0IjoxNjA2MjE0OTkyfQ.2aktNrUASlLsPwSFtkgKBTQLJTAnOTyjgKDRQmnafiE";
+      const { webGlobe } = component;
+      webGlobe.viewer.camera.setView({
+        direction: {
+          x: 0.4680575394156845,
+          y: -0.8267033643312148,
+          z: 0.31222377744109403
+        },
+        position: {
+          x: -674271.5790185562,
+          y: 5530042.656916835,
+          z: 3232882.3357299212
+        }
+      });
+      //构造视图功能管理对象（视图）
+      var sceneManager = new CesiumZondy.Manager.SceneManager({
         viewer: webGlobe.viewer
       });
-      sceneManager.flyToEx(115, 30, {
-        height: 100,
-        heading: 30,
-        pitch: -10,
+      //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
+      sceneManager.flyToEx(121, 24, {
+        height: 5900,
+        heading: 60,
+        pitch: -16,
         roll: 0
       });
-    });
-  },
-  methods: {
+    },
     //洪水分析组件加载完毕事件
-    load(floodAnalyse) {
-      this.floodAnalyse = floodAnalyse;
+    load(floodAnalysis) {
+      this.floodAnalysis = floodAnalysis;
     },
-    //开始洪水分析
-    startAnalyse() {
-      this.floodAnalyse.startAnalyse();
+    //开始洪水淹没分析
+    analysis() {
+      this.floodAnalysis.analysis();
     },
-    //停止洪水分析
-    stopAnalyse() {
-      this.floodAnalyse.stopAnalyse();
+    //移除洪水淹没分析
+    remove() {
+      this.floodAnalysis.remove();
     }
   }
 };

package/docs/api/analysis/HeightLimited.md

@@ -1,5 +1,3 @@
-# 控高分析
-
 > mapgis-3d-heightlimited
 
 ## 属性
@@ -69,7 +67,9 @@ mapgis-web-scene组件的ID，当使用多个mapgis-web-scene组件时，需要
         :vue-index="vueIndex"
         :debugShowBoundingVolume="debugShowBoundingVolume"
       />
+      <mapgis-ui-card class="storybook-ui-card">
       <mapgis-3d-heightlimited :vue-index="vueIndex"></mapgis-3d-heightlimited>
+      </mapgis-ui-card>
     </mapgis-web-scene>
   </div>
 </template>
@@ -100,8 +100,11 @@ export default {
 </script>
 
 <style scoped>
-.ant-btn-primary {
-  margin-left: 10px;
+.storybook-ui-card{
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1000;
 }
 </style>
 ```