# # MapStory

> mapgis-3d-map-story 点此跳转到示例

## # 属性

名称 | 类型 | 默认值 | 描述 | 是否监听
--- | --- | --- | --- | ---
dataSource | Array | [] | mapStory 数组 | 是
height | Number | 700 | 地图故事面板高度 | 是
width | Number | 300 | 地图故事面板宽度 | 是
enableOneMap | Boolean | false | 是否为一张图模式，此模式下 UI 有所调整，不用一张图的项目可忽略 | 是
models | models | {} | 模型信息对象，添加模型时使用 | 是

## # 参数详情

### `dataSource（地图故事数据源）`

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
dataSource | [mapStory] | [] | mapStory 数组

### `mapStory（地图故事对象）`

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
title | String | 无标题 | 地图故事标题
description | String | 无 | 地图故事描述信息
uuid | String | Math.random() | 地图故事的 ID，默认随机数
map | map | {} | 与地图故事绑定的底图，每个故事绑定一个底图
chapters | [chapter] | [] | 地图故事的章节数组，每个地图故事可有多个章节

### `map（地图故事底图）`

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
type | String | 无 | 地图类型，分别为"WMTS","WMS","TILE"(IGS 瓦片),"DOC"(IGS 地图文档),"DYNAMIC"(IGS 矢量图层),"GeoJSON"(GeoJSON 数据)
baseUrl | String | 无 | 基地址
layer | String | 无 | 图层名称
tilingScheme | String | 无 | 瓦片切片方式，支持"EPSG:4326","EPSG:4490","EPSG:4610","EPSG:4214","EPSG:3857"
tileMatrixSet | String | 无 | 瓦片矩阵集
format | String | image/png | 瓦片的请求返回格式，"image/png","tiles"等
vueKey | String | default | vueKey，唯一标识一个 Cesium 球体，分屏时使用
vueIndex | String | Math.random() | vueIndex，唯一标识一个地图图层

### `chapter（地图故事章节信息）`

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
title | String | 无标题 | 章节标题
uuid | String | Math.random() | 章节 ID，默认随机数
mapStoryUUID | String | Math.random() | 章节所对应的地图故事 ID
animationTime | Number | 5000 | 从当前章节播放到下一个章节所需时间
content | String | 无 | 章节描述信息
features | Array | [] | 当前章节所包含的标绘要素
camera | camera | {} | 当前章节所对应的相机视角

### `camera（地图故事相机视角对象）`

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
heading | Number | 0 | 方向角，弧度制
pitch | Number | 0 | 俯仰角，弧度制
roll | Number | 0 | 滚动角，弧度制
positionCartographic | Object | {} | 相机视角所在位置
positionCartographic.longitude | Number | 0 | 经度
positionCartographic.latitude | Number | 0 | 纬度
positionCartographic.height | Number | 0 | 高程

### `models（模型信息）`

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
models | Object | {} | 模型分类对象
models.img | String | 无 | 模型缩略图的相对路径
models.model | String | 无 | 模型的相对路径

## # 事件

### # `@storyPreview`

- 描述 预览地图故事
- Payload `{ mapStoryData }`
- - `mapStoryData` 地图故事数据，预览功能默已经包含在地图故事里，当希望自己实现预览功能时，可使用此事件

### # `@chapterPreview`

- 描述 预览地图里的某一章节
- Payload `{ mapStoryData }`
- - `mapStoryData` 地图故事数据，预览功能默已经包含在地图故事里，当希望自己实现预览功能时，可使用此事件

### # `@save`

- 描述 保存地图故事
- Payload `{ mapStoryData }`
- - `mapStoryData` 地图故事数据

## 示例

    <template>
      <mapgis-web-scene style="height:95vh">
        <mapgis-3d-map-story
          @storyPreview="storyPreview"
          @chapterPreview="chapterPreview"
          @save="save"
          :dataSource="dataSource"
        />
      </mapgis-web-scene>
    </template>
    <script>
    export default {
      data() {
        return {
          dataSource: []
        };
      },
      methods: {
        storyPreview(mapStoryData) {},
        chapterPreview(mapStoryData) {},
        save(mapStoryData) {}
      }
    };
    </script>
    <style lang="css"></style>