mapgis-3d-dynamic-section
# 属性
# models
- 类型:
Array
- 可选
- 默认值: []
- 侦听属性
- 描述: 模型集合,一个模型对象包含三个字段:range,vueIndex 和 title
[{
range: { // 模型包围盒范围
xmin: -10000,
xmax: 10000,
ymin: -10000,
ymax: 10000,
zmin: -10000,
zmax: 10000,
},
vueIndex: 1, // 模型加载对应的vueIndex
title: "钻孔_2_钻孔模型s", // 模型名
}]
# axis
- 类型:
String
- 可选
- 默认值:
X
- 侦听属性
- 描述: 坐标轴,可设置为 X,Y,Z
# color
- 类型:
String
- 可选
- 默认值:
rgba(200,200,200,0.5)
- 侦听属性
- 描述: 剖切面颜色
# time
- 类型:
Number
- 可选
- 默认值:
10
- 侦听属性
- 描述: 自动播放时间,单位秒
# distance
- 类型:
Number
- 可选
- 默认值:
0
- 侦听属性
- 描述: 剖切距离,剖切面距离剖切对象包围盒中心点的距离
# 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 组件,用来区分组件的标识符。
# 事件
# @load
- Description: 剖切分析组件对象加载完毕事件
- Param:
{DynamicSection}
DynamicSection
剖切分析组件对象
# @unload
- Description: 剖切分析组件对象移除事件
- Param:
{DynamicSection}
DynamicSection
剖切分析组件对象
# @startClipping
- Description: 开始剖切分析事件
# @animation
- Description: 开启动态剖切事件
# @setDistance
- Description: 设置剖切距离
- Param:
{distance}
distance
设置剖切距离,剖切面距离剖切对象包围盒中心点的距离
# @stopClipping
- Description: 停止剖切分析事件
# 插槽
# default
- Description: 覆盖插槽即可重写界面
# 剖切分析使用方法
<template>
<mapgis-web-scene style="height: 95vh" 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-3d-scene-layer :vueIndex="vueIndex" :url="m3dUrl1" />
<mapgis-3d-scene-layer :vueIndex="vueIndex" :url="m3dUrl2" />
<mapgis-ui-card class="storybook-ui-card">
<mapgis-3d-dynamic-section
:models="models"
:axis="axis"
:color="color"
:time="time"
:distance="distance"
/>
</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",
terrainUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/terrain",
tileMatrixSet: "c",
tilingScheme: "EPSG:4326",
layer: "img",
format: "tiles",
token: {
key: "tk",
value: "9c157e9585486c02edf817d2ecbc7752",
},
m3dUrl1: "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s",
m3dUrl2:
"http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent",
models: [
{
range: {
xmin: -10000,
xmax: 10000,
ymin: -10000,
ymax: 10000,
zmin: -10000,
zmax: 10000,
},
vueIndex: 1,
title: "钻孔_2_钻孔模型s",
},
{
range: {
xmin: -10000,
xmax: 10000,
ymin: -10000,
ymax: 10000,
zmin: -10000,
zmax: 10000,
},
vueIndex: 2,
title: "钻孔分层点",
},
],
axis: "X",
color: "rgb(200,200,200,0.5)",
time: 10,
distance: 0,
};
},
methods: {
handleLoad(e) {
const { component, Cesium } = e;
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2Q0ZGMxYy1iZGZkLTQ4OWItODlhMy1iOWNkMDE0M2U3YWEiLCJpZCI6NTEzNSwiaWF0IjoxNjA2MjE0OTkyfQ.2aktNrUASlLsPwSFtkgKBTQLJTAnOTyjgKDRQmnafiE";
},
},
};
</script>
<style scoped>
.storybook-ui-card {
position: absolute;
width: 400px;
top: 0;
left: 0;
}
</style>
# 自定义界面-插槽方式
<template>
<mapgis-web-scene style="height: 95vh" 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-3d-scene-layer
:vueIndex="$props.models[0].vueIndex"
:url="m3dUrl1"
/>
<mapgis-3d-scene-layer
:vueIndex="$props.models[1].vueIndex"
:url="m3dUrl2"
/>
<mapgis-ui-card class="storybook-ui-card">
<mapgis-3d-dynamic-section
:models="models"
:axis="axis"
:color="color"
:time="time"
:distance="distance"
@loaded="loaded"
>
<div>
<!--自定义您的界面-->
自定义您的界面
<button @click="start">开始剖切</button>
</div>
</mapgis-3d-dynamic-section>
</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",
terrainUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/terrain",
tileMatrixSet: "c",
tilingScheme: "EPSG:4326",
layer: "img",
format: "tiles",
token: {
key: "tk",
value: "9c157e9585486c02edf817d2ecbc7752",
},
m3dUrl1: "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s",
m3dUrl2:
"http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent",
dynamicSection: undefined,
models: [
{
range: {
xmin: -10000,
xmax: 10000,
ymin: -10000,
ymax: 10000,
zmin: -10000,
zmax: 10000,
},
vueIndex: 1,
title: "钻孔_2_钻孔模型s",
},
{
range: {
xmin: -10000,
xmax: 10000,
ymin: -10000,
ymax: 10000,
zmin: -10000,
zmax: 10000,
},
vueIndex: 2,
title: "钻孔分层点",
},
],
axis: "X",
color: "rgb(200,200,200,0.5)",
time: 10,
distance: 0,
};
},
methods: {
load(dynamicSection) {
this.dynamicSection = dynamicSection;
},
start() {
this.dynamicSection.startClipping();
},
handleLoad(e) {
const { component, Cesium } = e;
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2Q0ZGMxYy1iZGZkLTQ4OWItODlhMy1iOWNkMDE0M2U3YWEiLCJpZCI6NTEzNSwiaWF0IjoxNjA2MjE0OTkyfQ.2aktNrUASlLsPwSFtkgKBTQLJTAnOTyjgKDRQmnafiE";
},
},
};
</script>