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