# # GraphicLayer

> mapgis-3d-graphic-layers 点此跳转到示例

## # 属性

名称 | 类型 | 默认值 | 描述 | 是否监听
--- | --- | --- | --- | ---
dataSource | Array | [] | 标绘图层数据源 | 是
enableRelativePath | Boolean | true | 保存标绘数据时，模型的 URL 使用相对路径还是绝对路径，默认值 true，使用相对路径 | 是
enableOneMap | Boolean | false | 是否为一张图模式，此模式下 UI 有所调整，不用一张图的项目可忽略 | 是
models | {} | {} | 模型信息对象，添加模型时使用 | 是

## # 参数详情

### # `dataSource（标绘图层数据源）`

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
dataSource | [GraphicLayer] | [] | 标绘图层数组

### # `GeaphicLayer（标绘图层）`

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
dataSource | Graphic(司马云地址) (opens new window)，Graphic(内网地址) (opens new window) | [] | 标绘对象数组
models | models | {} | 模型信息对象，添加模型时使用
autoFlyToGraphic | Boolean | true | 双击标绘列表，编辑标绘对象时，是否自动飞到该标绘对象处
vueKey | String | default | vueKey，唯一标识一个 Cesium 球体，分屏时使用
vueIndex | String | Math.random() | vueIndex，唯一标识一个标绘图层

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

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

## # 事件

事件名称 | 参数 | 默认值 | 描述
--- | --- | --- | ---
save | saveData | {} | 保存标绘图层事件，仅保存当前标绘图层数据

### # `saveData（标绘图层保存数据）`

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
name | String | 无 | 标绘图层名称
uuid | String | 无 | 标绘图层 id
autoFlyTo | Boolean | true | 切换图层时，是否进跳转到图层范围
autoFlyToGraphic | Boolean | true | 点击标绘列表时，是否自动跳转到标绘对象上方
camera | Object | {} | 相机视角对象
dataSource | Array | [] | 当前标绘图层所包含的所有标绘对象的集合

## # 示例

    <template>
      <mapgis-web-scene style="height:95vh">
        <mapgis-3d-graphic-layer
          @save="save"
          :dataSource="dataSource"
          :models="models"
        />
      </mapgis-web-scene>
    </template>
    <script>
    export default {
      data() {
        return {
          //标绘图层数据源
          dataSource: [],
          //模型信息，由使用者自定义
          models: {
            tree: [
              {
                img: "/项目的静态资源目录/gltf/tree/img/tree.png",
                model: "/项目的静态资源目录/gltf/tree/tree.glb"
              }
            ],
            traffic: [
              {
                img: "/项目的静态资源目录/gltf/traffic/img/car.png",
                model: "/项目的静态资源目录/gltf/traffic/car.glb"
              }
            ],
            ground: [
              {
                img: "/项目的静态资源目录/gltf/ground/img/grass.png",
                model: "/项目的静态资源目录/gltf/ground/grass.glb"
              }
            ],
            lamp: [
              {
                img: "/项目的静态资源目录/gltf/lamp/img/lamp.png",
                model: "/项目的静态资源目录/gltf/lamp/lamp.glb"
              }
            ]
          }
        };
      },
      methods: {
        save(graphicsData) {}
      }
    };
    </script>
    <style lang="css"></style>