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

package/docs/.vuepress/config.js

@@ -11,8 +11,8 @@ module.exports = {
     "/": {
       lang: "zh-CN",
       title: "中地数码",
-      description: "@mapgis/webclient-vue-cesium"
-    }
+      description: "@mapgis/webclient-vue-cesium",
+    },
   },
   themeConfig: {
     locales: {
@@ -27,25 +27,25 @@ module.exports = {
         serviceWorker: {
           updatePopup: {
             message: "发现新内容可用.",
-            buttonText: "刷新"
-          }
+            buttonText: "刷新",
+          },
         },
         // 当前 locale 的 algolia docsearch 选项
         algolia: {},
         nav: [
           {
             text: "向导",
-            link: "/guide/"
+            link: "/guide/",
           },
           {
             text: "API",
-            link: "/api/"
+            link: "/api/",
           },
           {
             text: "WebClient",
-            link: "http://develop.smaryun.com"
+            link: "http://develop.smaryun.com",
           },
-          { text: "开源", link: "https://github.com/MapGIS/WebClient-Vue" }
+          { text: "开源", link: "https://github.com/MapGIS/WebClient-Vue" },
         ],
         sidebar: [
           {
@@ -55,8 +55,8 @@ module.exports = {
               ["/guide/", "快速上手"],
               ["/guide/introduction.md", "产品介绍"],
               ["/guide/basemap.md", "基础地图"],
-              ["/guide/wms&map&doc.md", "子图层控制"]
-            ]
+              ["/guide/wms&map&doc.md", "子图层控制"],
+            ],
           },
           {
             title: "组件",
@@ -64,13 +64,13 @@ module.exports = {
             children: [
               {
                 title: "场景",
-                collapsable: false
+                collapsable: false,
               },
               ["/api/", "地图场景"],
 
               {
                 title: "场景子组件",
-                collapsable: false
+                collapsable: false,
               },
               ["/api/ui/popup.md", "气泡"],
               ["/api/ui/marker.md", "标记点"],
@@ -86,7 +86,7 @@ module.exports = {
 
               {
                 title: "图层",
-                collapsable: false
+                collapsable: false,
               },
               ["/api/layer/IGServer/IgsVectorLayer.md", "IGS二维矢量"],
               ["/api/layer/IGServer/IgsDocLayer.md", "IGS地图文档"],
@@ -104,17 +104,18 @@ module.exports = {
               ["/api/m3d/m3d.md", "M3D"],
 
               ["/api/datasource/geojson.md", "GeoJSON"],
+              ["/api/layer/marker/DynamicMarker.md", "动态注记"],
 
               {
                 title: "可视化",
-                collapsable: false
+                collapsable: false,
               },
               ["/api/Overlay/Echarts.md", "Echarts"],
               ["/api/Overlay/Mapv.md", "MapV"],
 
               {
                 title: "空间分析",
-                collapsable: false
+                collapsable: false,
               },
               ["/api/analysis/Viewshed.md", "可视域分析"],
               ["/api/analysis/Sightline.md", "通视分析"],
@@ -124,8 +125,8 @@ module.exports = {
               // ["/api/analysis/Fill.md", "填挖方分析"],
               ["/api/analysis/HeightLimited.md", "限高分析"],
               ["/api/analysis/Shadow.md", "阴影分析"],
-              ["/api/analysis/Skyline.md", "天际线分析"]
-            ]
+              ["/api/analysis/Skyline.md", "天际线分析"],
+            ],
           },
           {
             title: "组件开发",
@@ -134,60 +135,60 @@ module.exports = {
               ["/plugin_components/", "使用组件"],
               [
                 "/plugin_components/plugin_components_development.md",
-                "创建组件"
-              ]
-            ]
+                "创建组件",
+              ],
+              ["/plugin_components/create_storybook.md", "创建Storybook示例"],
+            ],
           },
           {
             title: "版本",
             collapsable: false,
-            children: [["/version/diff.md", "版本对比"]]
-          }
-        ]
-      }
-    }
+            children: [
+              ["/version/version.md", "更新说明"],
+              ["/version/diff.md", "版本对比"],
+            ],
+          },
+        ],
+      },
+    },
   },
   serviceWorker: true,
   head: [
     [
       "script",
       {
-        src:
-          "https://cdn.jsdelivr.net/npm/react@16.6.3/umd/react.production.min.js"
-      }
+        src: "https://cdn.jsdelivr.net/npm/react@16.6.3/umd/react.production.min.js",
+      },
     ],
     [
       "script",
       {
-        src:
-          "https://cdn.jsdelivr.net/npm/react-dom@16.6.3/umd/react-dom.production.min.js"
-      }
+        src: "https://cdn.jsdelivr.net/npm/react-dom@16.6.3/umd/react-dom.production.min.js",
+      },
     ],
     ["script", { src: "https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js" }],
     [
       "script",
-      { src: "https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js" }
+      { src: "https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js" },
     ],
     [
       "script",
-      { src: "https://cdn.jsdelivr.net/npm/numerify/lib/index.umd.min.js" }
+      { src: "https://cdn.jsdelivr.net/npm/numerify/lib/index.umd.min.js" },
     ],
     [
       "link",
       {
-        href:
-          "http://develop.smaryun.com/static/libs/cdn/zondyclient/npm/webclient-vue-cesium.css",
+        href: "http://develop.smaryun.com/static/libs/cdn/zondyclient/npm/webclient-vue-cesium.css",
         rel: "stylesheet",
-        type: "text/css"
-      }
+        type: "text/css",
+      },
     ],
     [
       "script",
       {
-        src:
-          "http://develop.smaryun.com/static/libs/cdn/zondyclient/npm/webclient-vue-cesium.umd.js"
-      }
-    ]
+        src: "http://develop.smaryun.com/static/libs/cdn/zondyclient/npm/webclient-vue-cesium.umd.js",
+      },
+    ],
   ],
   plugins: [
     [
@@ -198,9 +199,9 @@ module.exports = {
           cssLibs: [],
           jsfiddle: true, // 是否显示 jsfiddle 链接
           codepen: true, // 是否显示 codepen 链接
-          horizontal: false // 是否展示为横向样式
-        }
-      }
-    ]
-  ]
+          horizontal: false, // 是否展示为横向样式
+        },
+      },
+    ],
+  ],
 };

package/docs/README.md

@@ -19,6 +19,7 @@ footer: MIT Licensed
 
 ```javascript
 // main.js
+import "@mapgis/webclient-vue-cesium/dist-libs/webclient-vue-cesium.css";
 import Mapgis3d from "@mapgis/webclient-vue-cesium";
 Vue.use(Mapgis3d);
 ```
@@ -28,7 +29,7 @@ Vue.use(Mapgis3d);
   <mapgis-web-scene
     ref="webgloberef"
     libPath="statics/cesium/Cesium.js"
-    pluginPath="statics/cesium/webclient-cesium-plugins.js"
+    pluginPath="statics/cesium/webclient-cesium-plugin.min.js"
   >
     <mapgis-3d-igs-tile-layer
       :ip="ip"
@@ -48,14 +49,14 @@ export default {
       ip: "develop.smaryun.com",
       port: "6163",
       protocol: "http",
-      serverName: "北京市"
+      serverName: "北京市",
     };
   },
   methods: {
     handleLoad(e) {
       console.log("地图加初始化完毕！", e);
-    }
-  }
+    },
+  },
 };
 </script>
 ```

package/docs/api/analysis/Aspect.md

@@ -0,0 +1,236 @@
+> mapgis-3d-analysis-aspect
+
+## 属性
+
+### `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: 60, color: "rgba(244, 67, 54, 0.5)" },
+  { min: 60, max: 120, color: "rgba(233, 30, 99, 0.5)" },
+  { min: 120, max: 180, color: "rgba(156, 39, 176, 0.5)" },
+  { min: 180, max: 240, color: "rgba(255, 235, 59, 0.5)" },
+  { min: 240, max: 300, color: "rgba(96, 125, 139, 0.5)" },
+  { min: 300, max: 360, color: "rgba(76, 175, 80, 0.5)" }
+]
+```
+
+## 方法
+
+### `analysis`
+
+- **Description:** 坡向分析
+
+### `remove`
+
+- **Description:** 移除坡向分析对象，移除坡向分析结果。
+
+## 事件
+
+### `@load`
+
+- **Description:** 在 Aspect 加载完毕后发送该事件
+- **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-aspect :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: 60, color: "rgba(244, 67, 54, 0.5)" },
+        { min: 60, max: 120, color: "rgba(233, 30, 99, 0.5)" },
+        { min: 120, max: 180, color: "rgba(156, 39, 176, 0.5)" },
+        { min: 180, max: 240, color: "rgba(255, 235, 59, 0.5)" },
+        { min: 240, max: 300, color: "rgba(96, 125, 139, 0.5)" },
+        { min: 300, max: 360, 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-aspect :rampColors="rampColors" @load="load">
+        <!--      这里是自定义的界面-->
+        <div>
+          <button @click="analysis">分析</button>
+          <button @click="remove">清除</button>
+        </div>
+      </mapgis-3d-analysis-aspect>
+    </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: 60, color: "rgba(244, 67, 54, 0.5)" },
+        { min: 60, max: 120, color: "rgba(233, 30, 99, 0.5)" },
+        { min: 120, max: 180, color: "rgba(156, 39, 176, 0.5)" },
+        { min: 180, max: 240, color: "rgba(255, 235, 59, 0.5)" },
+        { min: 240, max: 300, color: "rgba(96, 125, 139, 0.5)" },
+        { min: 300, max: 360, color: "rgba(76, 175, 80, 0.5)" }
+      ],
+      aspectAnalysis: 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(aspectAnalysis) {
+      this.aspectAnalysis = aspectAnalysis;
+    },
+    //开始坡向分析
+    analysis() {
+      this.aspectAnalysis.analysis();
+    },
+    //移除坡向分析
+    remove() {
+      this.aspectAnalysis.remove();
+    }
+  }
+};
+</script>
+```