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

package/docs/api/analysis/Profile.md

@@ -0,0 +1,464 @@
+> mapgis-3d-analysis-profile
+
+<span style="color:red;fontsize=5px;">注意：必须在外部定义一个 div，并通过 echartsDivId 参数将 div 的 id 传入组件，用于显示剖面信息(echarts 图表)</span>
+
+## 属性
+
+### `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 组件，用来区分组件的标识符。
+
+### `profileType`
+
+- **类型:** `Number`
+- **可选**
+- **非侦听属性**
+- **默认值:** `0`
+- **描述:** 分析类型，0 代表地形，1 代表地形和模型兼容
+
+### `polylineGroundColor`
+
+- **类型:** `String`
+- **可选**
+- **侦听属性**
+- **默认值:** `rgb(255,0,0)`
+- **描述:** 剖切线颜色
+
+### `samplePrecision`
+
+- **类型:** `Number`
+- **可选**
+- **侦听属性**
+- **默认值:** `2`
+- **描述:** 采样精度(采样间隔，平面距离，单位米，模型推荐为 0.2，地形推荐为 2)
+
+### `showPolygon`
+
+- **类型:** `Boolean`
+- **可选**
+- **侦听属性**
+- **默认值:** `false`
+- **描述:** 是否显示剖面
+
+### `pointColor`
+
+- **类型:** `String`
+- **可选**
+- **侦听属性**
+- **默认值:** `rgb(0,255,0)`
+- **描述:** 交互点颜色(关闭剖面的时候生效)
+
+### `polyLineColor`
+
+- **类型:** `String`
+- **可选**
+- **侦听属性**
+- **默认值:** `rgb(0,255,0)`
+- **描述:** 交互线颜色(开启剖面的时候生效)
+
+### `polygonColor`
+
+- **类型:** `String`
+- **可选**
+- **侦听属性**
+- **默认值:** `rgb(0,0,255)`
+- **描述:** 剖面颜色
+
+### `polygonHeight`
+
+- **类型:** `Number`
+- **可选**
+- **侦听属性**
+- **默认值:** `100`
+- **描述:** 剖面高度
+
+### `useMask`
+
+- **类型:** `Boolean`
+- **可选**
+- **默认值:** `true`
+- **非侦听属性**
+- **描述:** 是否使用内置的遮罩层
+
+### `echartsDivId`
+
+- **类型:** `String`
+- **必选**
+- **非侦听属性**
+- **描述:** 剖面信息显示容器的 id
+
+### `echartsOptions`
+
+- **类型:** `Object`
+- **可选**
+- **非侦听属性**
+- **描述:** 二维剖面显示样式
+- **默认值:**
+
+```
+ {
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "line",
+      lineStyle: {
+        color: "#41aeff",
+        type: "solid"
+      }
+    },
+    confine: true, // 是否将 tooltip 框限制在图表的区域内。
+    backgroundColor: "rgba(255, 255, 255, 0.8)"
+  },
+  title: {
+    show: false
+  },
+  grid: {
+    top: 25,
+    left: 60,
+    right: 20,
+    bottom: 20,
+    contentLabel: false
+  },
+  calculable: true,
+  xAxis: [
+    {
+      show: false,
+      type: "value",
+      max: "dataMax"
+    }
+  ],
+  yAxis: [
+    {
+      type: "value",
+      splitLine: {
+        lineStyle: {
+          color: "#d9d9d9",
+          type: "dotted"
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        formatter: value => {
+          const texts = [];
+          if (value > 999) {
+            const text = (Number(value) / 1000).toFixed(2);
+            texts.push(`${text}km`);
+          } else {
+            texts.push(`${parseInt(value)}m`);
+          }
+          return texts;
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      type: "line",
+      smooth: true, // 建议地形平滑显示二维剖面，模型取消平滑
+      itemStyle: {
+        color: "#40a9ff"
+      },
+      markPoint: {
+        symbol: "circle",
+        symbolSize: 15,
+        label: { position: "top" },
+        data: [
+          { type: "max", name: "最高点" },
+          { type: "min", name: "最低点" }
+        ]
+      },
+      areaStyle: {}
+    }
+  ]
+}
+```
+
+## 方法
+
+### `analysis`
+
+- **Description:** 剖面分析
+
+### `remove`
+
+- **Description:** 移除剖面分析对象，移除剖面分析结果，关闭二维剖面显示
+
+## 事件
+
+### `@load`
+
+- **Description:** 在 Profile 加载完毕后发送该事件
+- **Payload** 剖面分析对象
+
+### `@start`
+
+- **Description:** 在剖面分析绘制完后,开始分析前发送该事件
+
+### `@success`
+
+- **Description:** 在剖面分析结束后发送该事件
+
+### `@remove`
+
+- **Description:** 在移除分析对象和分析结果后，发送该事件
+
+## 示例
+
+### 非插槽方式
+
+```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 customPosition="top-right">
+      <mapgis-3d-analysis-profile
+        :profileType="profileType"
+        :polygonHeight="polygonHeight"
+        :polygonColor="polygonColor"
+        :polyLineColor="polyLineColor"
+        :pointColor="pointColor"
+        :polylineGroundColor="polylineGroundColor"
+        :showPolygon="showPolygon"
+        :samplePrecision="samplePrecision"
+        :echartsDivId="'profileChart'"
+        @success="success"
+        @remove="remove"
+      />
+    </mapgis-ui-card>
+    <mapgis-ui-window
+      :visible.sync="profile2dVisible"
+      :min-width="400"
+      :max-height="250"
+      anchor="bottom-left"
+      title="剖面信息"
+    >
+      <div
+        id="profileChart"
+        style="width: 380px; height: 180px; float: right"
+      ></div>
+    </mapgis-ui-window>
+  </mapgis-web-scene>
+</template>
+
+<script>
+export default {
+  name: "profile-example.vue",
+  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"
+      },
+      profileType: 0,
+      polygonHeight: 100,
+      polygonColor: "rgb(0,0,255)",
+      polyLineColor: "rgb(0,255,0)",
+      pointColor: "rgb(0,255,0)",
+      polylineGroundColor: "rgb(255,0,0)",
+      showPolygon: false,
+      samplePrecision: 2,
+      profile2dVisible: false
+    };
+  },
+  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
+      });
+    },
+    success() {
+      this.profile2dVisible = true;
+    },
+    remove() {
+      this.profile2dVisible = false;
+    }
+  }
+};
+</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-3d-analysis-profile
+      :profileType="profileType"
+      :position="position"
+      :polygonHeight="polygonHeight"
+      :polygonColor="polygonColor"
+      :polyLineColor="polyLineColor"
+      :pointColor="pointColor"
+      :polylineGroundColor="polylineGroundColor"
+      :showPolygon="showPolygon"
+      :samplePrecision="samplePrecision"
+      :echartsDivId="'profileChart'"
+      @success="success"
+      @load="load"
+    >
+      <!--      这里是自定义的界面-->
+      <div>
+        <button @click="analysis">分析</button>
+        <button @click="remove">清除</button>
+      </div>
+    </mapgis-3d-analysis-profile>
+    </mapgis-ui-card>
+    <mapgis-ui-window
+      :visible.sync="profile2dVisible"
+      :min-width="400"
+      :max-height="250"
+      anchor="bottom-left"
+      title="剖面信息"
+    >
+      <div
+        id="profileChart"
+        style="width: 380px; height: 180px; float: right"
+      ></div>
+    </mapgis-ui-window>
+  </mapgis-web-scene>
+</template>
+
+<script>
+export default {
+  name: "profile-example.vue",
+  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"
+      },
+      position: "left",
+      profileType: 0,
+      polygonHeight: 100,
+      polygonColor: "rgb(0,0,255)",
+      polyLineColor: "rgb(0,255,0)",
+      pointColor: "rgb(0,255,0)",
+      polylineGroundColor: "rgb(255,0,0)",
+      showPolygon: false,
+      samplePrecision: 2,
+      profileAnalysis: null,//剖面分析组件对象
+      profile2dVisible:false //显示剖面信息
+    };
+  },
+  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(profileAnalysis) {
+      this.profileAnalysis = profileAnalysis;
+    },
+    //开始剖面分析
+    analysis() {
+      this.profileAnalysis.analysis();
+    },
+    //移除剖面分析
+    remove() {
+      this.profileAnalysis.remove();
+      this.profile2dVisible = false;
+    },
+    success() {
+      this.profile2dVisible = true;
+    }
+  }
+};
+</script>
+```

package/docs/api/analysis/Shadow.md

@@ -1,16 +1,7 @@
-# 阴影分析
-
 > mapgis-3d-shadow
 
 ## 属性
 
-### `position`
-
-- **类型:** `String`
-- **默认值:** `right`
-- **非侦听属性**
-- **描述:** 分析面板的位置（right:右边 | left: 左边）
-
 ### `vueKey`
 
 - **类型:** `String`
@@ -35,6 +26,58 @@ mapgis-web-scene组件的ID，当使用多个mapgis-web-scene组件时，需要
 当mapgis-web-scene插槽中使用了多个相同组件时，例如多个mapgis-3d-igs-doc-layer组件，用来区分组件的标识符。
 ```
 
+### `shadowColor`
+
+- **类型:** `String`
+- **可选**
+- **侦听属性**
+- **默认值:** `rgba(0,255,0,255)`
+- **描述:** 阴影部分颜色
+
+### `sunColor`
+
+- **类型:** `String`
+- **可选**
+- **侦听属性**
+- **默认值:** `rgba(255,0,0,255)`
+- **描述:** 非阴影部分颜色
+
+### `minHeight`
+- **类型:** `Number`
+- **可选**
+- **侦听属性**
+- **默认值:** `0`
+- **描述:** 底部高程，单位为米
+
+### `stretchHeight`
+- **类型:** `Number`
+- **可选**
+- **侦听属性**
+- **默认值:** `0`
+- **描述:** 拉伸高度，单位为米
+
+## 方法
+
+### `removeAll` 
+
+- **Description:** 移除阴影分析对象，移除阴影分析结果和日照分析结果。
+
+## 事件
+
+### `@load`
+
+- **Description:** 在 Shadow组件 加载完毕后发送该事件
+- **Payload** 阴影分析对象
+
+### `@analysisBegin`
+
+- **Description:** 在阴影分析绘制完后,开始分析前发送该事件
+
+### `@success`
+
+- **Description:** 在阴影分析结束后发送该事件
+
+
 ## 示例
 
 ```vue
@@ -51,7 +94,13 @@ mapgis-web-scene组件的ID，当使用多个mapgis-web-scene组件时，需要
         :url="m3dUrl"
         :vue-index="vueIndex"
       />
-      <mapgis-3d-shadow :vue-index="vueIndex"></mapgis-3d-shadow>
+      <mapgis-ui-card class="storybook-ui-card">
+      <mapgis-3d-shadow 
+          :vue-index="vueIndex" 
+          :shadowColor="shadowColor" 
+          :sunColor="sunColor"
+          @load="load"></mapgis-3d-shadow>
+      </mapgis-ui-card>
     </mapgis-web-scene>
   </div>
 </template>
@@ -65,12 +114,26 @@ export default {
       // m3dUrl:"http://develop.smaryun.com:6163/igs/rest/g3d/DaYanTa",
       autoReset: true,
       maximumScreenSpaceError: 6,
-      vueIndex: 22
+      vueIndex: 22,
+      shadowColor:'#2E8B57',
+      sunColor:'#FFA500',
+      shadowAnalysis:undefined
     };
   },
-  methods: {}
+  methods: {
+    load(shadowAnalysis){
+      this.shadowAnalysis = shadowAnalysis;
+    }
+  }
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.storybook-ui-card {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1000;
+}
+</style>
 ```

package/docs/api/analysis/Sightline.md

@@ -1,25 +1,61 @@
-# 通视分析
-
 > mapgis-3d-sightline
 
 ## 属性
 
-[comment]: <> (### `index`)
+### `vueKey`
+
+- **类型:** `String`
+- **可选**
+- **非侦听属性**
+- **默认值:** `default`
+- **描述:**
+
+```
+mapgis-web-scene组件的ID，当使用多个mapgis-web-scene组件时，需要指定该值，来唯一标识mapgis-web-scene组件，
+同时mapgis-web-scene插槽中的组件也需要传入相同的vueKey，让组件知道应该作用于哪一个mapgis-web-scene。
+```
+
+### `vueIndex`
+
+- **类型:** `Number`
+- **可选**
+- **非侦听属性**
+- **描述:**
 
-[comment]: <> (- **类型:** `Number`)
+```
+当mapgis-web-scene插槽中使用了多个相同组件时，例如多个mapgis-3d-igs-doc-layer组件，用来区分组件的标识符。
+```
 
-[comment]: <> (- **默认值:** `0`)
+### `exHeight`
 
-[comment]: <> (- **非侦听属性**)
+- **类型:** `Number`
+- **可选**
+- **侦听属性**
+- **默认值:** `1.85`
+- **描述:** 观察点的附加高度，单位为米
 
-[comment]: <> (- **描述:** 图层的索引值，表示第几个图层)
+### `unVisibleColor`
+
+- **类型:** `String`
+- **可选**
+- **侦听属性**
+- **默认值:** `#ff0000`
+- **描述:** 不可视区域颜色，可以传 16 进制或者 rgba 任意形式颜色
 
-### `position`
+### `visibleColor`
 
 - **类型:** `String`
-- **默认值:** `right`
-- **非侦听属性**
-- **描述:** 分析面板的位置（right:右边 | left: 左边）
+- **可选**
+- **侦听属性**
+- **默认值:** `#008000`
+- **描述:** 可视区域颜色，可以传 16 进制或者 rgba 任意形式颜色
+
+## 事件
+
+### `@load`
+
+- **Description:** 在 Sightline 组件 加载完毕后发送该事件
+- **Payload** 通视分析对象
 
 ## 示例
 
@@ -35,7 +71,13 @@
       :maximumScreenSpaceError="maximumScreenSpaceError"
       :url="m3dUrl"
     />
-    <mapgis-3d-sightline></mapgis-3d-sightline>
+    <mapgis-ui-card class="storybook-ui-card">
+      <mapgis-3d-sightline
+        :exHeight="exHeight"
+        :visibleColor="visibleColor"
+        :unVisibleColor="unVisibleColor"
+      ></mapgis-3d-sightline>
+    </mapgis-ui-card>
   </mapgis-web-scene>
 </template>
 
@@ -47,9 +89,20 @@ export default {
         "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,
+      exHeight: 2.0,
+      visibleColor: "#2E8B57",
+      unVisibleColor: "#FFA500"
     };
   }
 };
 </script>
+<style scoped>
+.storybook-ui-card {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1000;
+}
+</style>
 ```