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

package/docs/api/analysis/Skyline.md

@@ -1,60 +1,175 @@
-# 天际线分析
-
 > mapgis-3d-skyline
 
 ## 属性
+### `vueKey`
 
-[comment]: <> (### `index`)
+- **类型:** `String`
+- **可选**
+- **非侦听属性**
+- **默认值:** `default`
+- **描述:**
 
-[comment]: <> (- **类型:** `Number`)
+```
+mapgis-web-scene组件的ID，当使用多个mapgis-web-scene组件时，需要指定该值，来唯一标识mapgis-web-scene组件，
+同时mapgis-web-scene插槽中的组件也需要传入相同的vueKey，让组件知道应该作用于哪一个mapgis-web-scene。
+```
 
-[comment]: <> (- **默认值:** `0`)
+### `vueIndex`
 
-[comment]: <> (- **非侦听属性**)
+- **类型:** `Number`
+- **可选**
+- **非侦听属性**
+- **描述:**
 
-[comment]: <> (- **描述:** 图层的索引值，表示第几个图层)
+```
+当mapgis-web-scene插槽中使用了多个相同组件时，例如多个mapgis-3d-igs-doc-layer组件，用来区分组件的标识符。
+```
 
-### `position`
+### `skylineWidth`
+
+- **类型:** `Number`
+- **可选**
+- **侦听属性**
+- **默认值:** 2
+- **描述:** 天际线宽度
+
+### `skylineColor`
 
 - **类型:** `String`
-- **默认值:** `right`
-- **非侦听属性**
-- **描述:** 分析面板的位置（right:右边 | left: 左边）
+- **可选**
+- **侦听属性**
+- **默认值:** rgb(255,0,0)
+- **描述:** 天际线颜色
+
+
+## 事件
+
+### `@load`
+
+- **Description:** 在 Skyline组件 加载完毕后发送该事件
+- **Payload** 天际线分析对象
+
+
+### `@success`
+
+- **Description:** 在天际线分析结束后发送该事件
+
+### `@showAnalysis2d`
+
+- **Description:** 在点击二维天际线echarts图表分析后 发送该事件
+- **Payload** 二维天际线图表echarts对象
+
+### `@remove`
+
+- **Description:** 在移除分析对象和分析结果后，发送该事件
+
+### `@unload`
+
+- **Description:** 在销毁组件后，发送该事件
+
 
 ## 示例
 
 ```vue
 <template>
-  <mapgis-web-scene
-    style="height:90vh"
-    lib-path="statics/libs/cdn/cesium/Cesium.js"
-    plugin-path="statics/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
-  >
-    <mapgis-3d-raster-layer
-      url="http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
-    ></mapgis-3d-raster-layer>
-    <mapgis-3d-igs-m3d
-      :autoReset="autoReset"
-      :maximumScreenSpaceError="maximumScreenSpaceError"
-      :url="m3dUrl"
-    />
-    <mapgis-3d-skyline></mapgis-3d-skyline>
+  <mapgis-web-scene style="height:95vh">
+    <mapgis-3d-raster-layer :url="url"/>
+    <mapgis-3d-igs-m3d :autoReset="autoReset" :maximumScreenSpaceError="maximumScreenSpaceError" :url="m3dUrl"/>
+    <mapgis-ui-card customPosition="top-left">
+      <mapgis-3d-skyline
+          :skylineWidth='skylineWidth'
+          :skylineColor='skylineColor'
+          @load='load'
+          @remove='remove'
+          @showAnalysis2d='showAnalysis2d'>
+      </mapgis-3d-skyline>
+    </mapgis-ui-card>
+    <!--      <mapgis-window-wrapper :visible='skyline2dVisible'>-->
+    <mapgis-ui-window
+        @window-size='onSkyline2dWindowSize'
+        :visible.sync='skyline2dVisible'
+        :min-width='300'
+        :max-height='300'
+        anchor='bottom-left'
+        title='二维天际线'
+    >
+      <div ref='skyline2dChart'>
+        <div id='skyline-2d-chart' style="width:300px;height:230px"/>
+      </div>
+    </mapgis-ui-window>
+    <!--      </mapgis-window-wrapper>-->
   </mapgis-web-scene>
 </template>
 
 <script>
+import * as echarts from "echarts";
+
 export default {
   name: "cesiumSkyline.vue",
   data() {
     return {
+      url: "http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752",
       m3dUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels",
       autoReset: true,
-      maximumScreenSpaceError: 6,
-      vueIndex: 22
+      maximumScreenSpaceError: 8,
+      skyline2dChart: null,
+      skyline2dVisible: false,
+      skyLineAnalysis: null,
+      skylineWidth: 2,
+      skylineColor: "rgb(255,0,0)",
     };
-  }
+  },
+  methods: {
+    /**
+     * 二维天际线图表弹框size变化
+     * @param mode
+     */
+    onSkyline2dWindowSize(mode) {
+      this.$nextTick(() => {
+        if (this.skyline2dChart) {
+          const width =
+              mode === "max" ? this.$refs.skyline2dChart.clientWidth : 300;
+          this.skyline2dChart.resize({ width });
+        }
+      });
+    },
+    remove() {
+      this.hideAnalysis2d();
+    },
+
+    load(skyLineAnalysis) {
+      this.skyLineAnalysis = skyLineAnalysis;
+    },
+
+    /**
+     * 展示二维天际线
+     * todo 绘制完成回调添加二维坐标点 #143
+     */
+    showAnalysis2d(skyline2dChart) {
+      this.skyline2dVisible = true;
+      this.skyline2dChart = skyline2dChart;
+    },
+
+    /**
+     * 隐藏二维天际线
+     */
+    hideAnalysis2d() {
+      this.skyline2dVisible = false;
+    },
+  },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.storybook-ui-card {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1000;
+}
+#skyline-2d-chart {
+  height: 300px;
+  width: 230px;
+}
+</style>
 ```

package/docs/api/analysis/Slope.md

@@ -0,0 +1,236 @@
+> mapgis-3d-analysis-slope
+
+## 属性
+
+### `vueKey`
+
+- **类型:** `String`
+- **可选**
+- **非侦听属性**
+- **默认值:** `default`
+- **描述:** mapgis-web-scene 组件的 ID，当使用多个 mapgis-web-scene 组件时，需要指定该值，来唯一标识 mapgis-web-scene 组件，同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey，让组件知道应该作用于哪一个 mapgis-web-scene。
+
+### `vueIndex`
+
+- **类型:** `Number`
+- **可选**
+- **非侦听属性**
+- **默认值:** `(Math.random() * 100000000).toFixed(0)`随机计算值
+- **描述:** 当 mapgis-web-scene 插槽中使用了多个相同组件时，例如多个 mapgis-3d-igs-doc-layer 组件，用来区分组件的标识符。
+
+### `rampColors`
+
+- **类型:** `Array`
+- **可选**
+- **侦听属性**
+- **描述:** 坡度分析角度颜色数组
+- **默认值:**
+
+```
+[
+  { min: 0, max: 15, color: "rgba(244, 67, 54, 0.5)" },
+  { min: 15, max: 30, color: "rgba(233, 30, 99, 0.5)" },
+  { min: 30, max: 45, color: "rgba(156, 39, 176, 0.5)" },
+  { min: 45, max: 60, color: "rgba(255, 235, 59, 0.5)" },
+  { min: 60, max: 75, color: "rgba(96, 125, 139, 0.5)" },
+  { min: 75, max: 90, color: "rgba(76, 175, 80, 0.5)" }
+]
+```
+
+## 方法
+
+### `analysis`
+
+- **Description:** 坡度分析
+
+### `remove`
+
+- **Description:** 移除坡度分析对象，移除坡度分析结果。
+
+## 事件
+
+### `@load`
+
+- **Description:** 在 Slope 加载完毕后发送该事件
+- **Payload** 坡度分析对象
+
+## 示例
+
+### 非插槽方式
+
+```vue
+<template>
+  <mapgis-web-scene style="{height: '100vh'}" v-on:load="handleLoad">
+    <mapgis-3d-ogc-wmts-layer
+      :baseUrl="url"
+      :wmtsLayer="layer"
+      :tileMatrixSet="tileMatrixSet"
+      :format="format"
+      :tilingScheme="tilingScheme"
+      :token="token"
+    ></mapgis-3d-ogc-wmts-layer>
+    <mapgis-3d-igs-terrain :url="terrainUrl" :requestVertexNormals="true" />
+    <mapgis-ui-card class="storybook-ui-card">
+      <mapgis-3d-analysis-slope :rampColors="rampColors" />
+    </mapgis-ui-card>
+  </mapgis-web-scene>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      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: "2ddaabf906d4b5418aed0078e1657029"
+      },
+      rampColors: [
+        { min: 0, max: 15, color: "rgba(244, 67, 54, 0.5)" },
+        { min: 15, max: 30, color: "rgba(233, 30, 99, 0.5)" },
+        { min: 30, max: 45, color: "rgba(156, 39, 176, 0.5)" },
+        { min: 45, max: 60, color: "rgba(255, 235, 59, 0.5)" },
+        { min: 60, max: 75, color: "rgba(96, 125, 139, 0.5)" },
+        { min: 75, max: 90, color: "rgba(76, 175, 80, 0.5)" }
+      ]
+    };
+  },
+  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(121, 24, {
+        height: 5900,
+        heading: 60,
+        pitch: -16,
+        roll: 0
+      });
+    }
+  }
+};
+</script>
+```
+
+## 自定义界面-插槽方式
+
+```vue
+<template>
+  <mapgis-web-scene style="{height: '100vh'}" v-on:load="handleLoad">
+    <mapgis-3d-ogc-wmts-layer
+      :baseUrl="url"
+      :wmtsLayer="layer"
+      :tileMatrixSet="tileMatrixSet"
+      :format="format"
+      :tilingScheme="tilingScheme"
+      :token="token"
+    ></mapgis-3d-ogc-wmts-layer>
+    <mapgis-3d-igs-terrain :url="terrainUrl" :requestVertexNormals="true" />
+    <mapgis-ui-card class="storybook-ui-card">
+      <mapgis-3d-analysis-slope :rampColors="rampColors" @load="load">
+        <!--      这里是自定义的界面-->
+        <div>
+          <button @click="analysis">分析</button>
+          <button @click="remove">清除</button>
+        </div>
+      </mapgis-3d-analysis-slope>
+    </mapgis-ui-card>
+  </mapgis-web-scene>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      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: "2ddaabf906d4b5418aed0078e1657029"
+      },
+      rampColors: [
+        { min: 0, max: 15, color: "rgba(244, 67, 54, 0.5)" },
+        { min: 15, max: 30, color: "rgba(233, 30, 99, 0.5)" },
+        { min: 30, max: 45, color: "rgba(156, 39, 176, 0.5)" },
+        { min: 45, max: 60, color: "rgba(255, 235, 59, 0.5)" },
+        { min: 60, max: 75, color: "rgba(96, 125, 139, 0.5)" },
+        { min: 75, max: 90, color: "rgba(76, 175, 80, 0.5)" }
+      ],
+      slopeAnalysis: null
+    };
+  },
+  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(121, 24, {
+        height: 5900,
+        heading: 60,
+        pitch: -16,
+        roll: 0
+      });
+    },
+    //坡度分析组件加载完毕事件
+    load(slopeAnalysis) {
+      this.slopeAnalysis = slopeAnalysis;
+    },
+    //开始坡度分析
+    analysis() {
+      this.slopeAnalysis.analysis();
+    },
+    //移除坡度分析
+    remove() {
+      this.slopeAnalysis.remove();
+    }
+  }
+};
+</script>
+```

package/docs/api/analysis/Viewshed.md

@@ -1,41 +1,108 @@
-# 可视域分析
-
 > mapgis-3d-viewshed
 
 ## 属性
 
-[comment]: <> (### `index`)
+### `vueKey`
+
+- **类型:** `String`
+- **可选**
+- **非侦听属性**
+- **默认值:** `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组件，用来区分组件的标识符。
+```
+
+### `horizontAngle`
+
+- **类型:** `Number`
+- **可选**
+- **侦听属性**
+- **默认值:** `60`
+- **描述:** 观察点的水平视角
 
-[comment]: <> (- **类型:** `Number`)
+### `verticalAngle`
 
-[comment]: <> (- **默认值:** `0`)
+- **类型:** `Number`
+- **可选**
+- **侦听属性**
+- **默认值:** `60`
+- **描述:** 观察点的垂直视角
 
-[comment]: <> (- **非侦听属性**)
+### `exHeight`
 
-[comment]: <> (- **描述:** 图层的索引值，表示第几个图层)
+- **类型:** `Number`
+- **可选**
+- **侦听属性**
+- **默认值:** `1.85`
+- **描述:** 观察点的附加高度，单位为米
 
-### `position`
+### `unVisibleColor`
 
 - **类型:** `String`
-- **默认值:** `right`
-- **非侦听属性**
-- **描述:** 分析面板的位置（right:右边 | left: 左边）
+- **可选**
+- **侦听属性**
+- **默认值:** `#ff0000`
+- **描述:** 不可视区域颜色，可以传16进制或者rgba任意形式颜色
+
+### `visibleColor`
+
+- **类型:** `String`
+- **可选**
+- **侦听属性**
+- **默认值:** `#00ff00`
+- **描述:** 可视区域颜色，可以传16进制或者rgba任意形式颜色
+
+### `maskColor`
+
+- **类型:** `String`
+- **可选**
+- **侦听属性**
+- **默认值:** `rgba(37, 218, 169, 0.2)`
+- **描述:** 可视遮罩颜色，可以传16进制或者rgba任意形式颜色
+
+## 事件
+
+### `@load`
+
+- **Description:** 在 Viewshed组件 加载完毕后发送该事件
+- **Payload** 可视域分析对象
 
 ## 示例
 
 ```vue
+
 <template>
   <mapgis-web-scene
-    libPath="cesium/Cesium.js"
-    pluginPath="cesium/webclient-cesium-plugin.min.js"
+      libPath="cesium/Cesium.js"
+      pluginPath="cesium/webclient-cesium-plugin.min.js"
   >
-    <mapgis-3d-raster-layer :url="url" />
+    <mapgis-3d-raster-layer :url="url"/>
     <mapgis-3d-igs-m3d
-      :autoReset="autoReset"
-      :maximumScreenSpaceError="maximumScreenSpaceError"
-      :url="m3dUrl"
+        :autoReset="autoReset"
+        :maximumScreenSpaceError="maximumScreenSpaceError"
+        :url="m3dUrl"
     />
-    <mapgis-3d-viewshed></mapgis-3d-viewshed>
+    <mapgis-ui-card class="storybook-ui-card">
+      <mapgis-3d-viewshed
+          :horizontAngle="horizontAngle"
+          :maskColor="maskColor"
+          :visibleColor="visibleColor">
+      </mapgis-3d-viewshed>
+    </mapgis-ui-card>
   </mapgis-web-scene>
 </template>
 
@@ -44,12 +111,24 @@ export default {
   data() {
     return {
       url:
-        "http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752",
+          "http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752",
       m3dUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels",
       autoReset: true,
-      maximumScreenSpaceError: 8
+      maximumScreenSpaceError: 8,
+      horizontAngle: 70,
+      maskColor: 'rgba(37, 218, 169, 0.2)',
+      visibleColor: '#00ff00',
+      unVisibleColor: '#ff0000'
     };
-  }
+  },
 };
 </script>
+<style scoped>
+.storybook-ui-card {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1000;
+}
+</style>
 ```

package/docs/api/layer/IGServer/IgsDocLayer.md

@@ -63,6 +63,16 @@
   > value: "9c157e9585486c02edf817d2ecbc7752" <br/>
   > }
 
+
+### `layerStyle`
+
+- **类型:** `Object`
+- **可选**
+- **侦听属性**
+- **描述:** 控制地图的显隐、透明度以及顺序，有如下值：
+  > visible Boolean 控制图层显示或隐藏，不会重新加载图层，true：显示图层、fales：隐藏图层 <br/>
+  > opacity Number 控制图层透明度，会重新加载图层，0 - 1 之间的数字，0：隐藏，1：显示 <br/>
+  > zIndex Number 控制图层顺序，会重新加载图层，类似 css 里面的 z-index，从 1 开始的数字 <br/>
 ## 示例
 
 ### 加载 4326 地图