# 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>