mapgis-3d-heightlimited

# 属性

# 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组件,用来区分组件的标识符。

# color

  • 类型: String
  • 默认值: #ff0000
  • 侦听属性
  • 描述: 控高分析颜色,与 css 的 color 属性一致,使用 16 进制颜色或者 rba/rgba(包含透明度)

# drawStyle

  • 类型: Object
  • 默认值: {color: "#FF8C00", opacity: 0.6}
  • 非侦听属性
  • 描述: 控高分析绘制分析区域的绘制样式,有 color、opacity、width。

# heightLimit

  • 类型: Number
  • 默认值: 80
  • 侦听属性
  • 描述: 控高分析默认的分析高度。

# maxSliderHeight

  • 类型: Number
  • 默认值: 180
  • 侦听属性
  • 描述: 分析时滑动条控高的最大值。

# minSliderHeight

  • 类型: Number
  • 默认值: 0
  • 侦听属性
  • 描述: 分析时滑动条控高的最小值。

# 示例

<template>
  <div style="width: 1200px;height: 800px;">
    <mapgis-web-scene style="height:90vh">
      <mapgis-3d-raster-layer
        url="http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
      ></mapgis-3d-raster-layer>
      <mapgis-3d-scene-layer :url="m3dUrl1" :autoReset="autoReset" />
      <mapgis-ui-card class="storybook-ui-card">
        <mapgis-3d-heightlimited
          :color="heightLimitColor"
          :heightLimit="heightLimit"
          :maxSliderHeight="maxSliderHeight"
          :minSliderHeight="minSliderHeight"
          :drawStyle="drawStyle"
          @load="load"
        >
        </mapgis-3d-heightlimited>
      </mapgis-ui-card>
    </mapgis-web-scene>
  </div>
</template>

<script>
export default {
  name: "cesiumHeightLimited",
  data() {
    return {
      m3dUrl1: "http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels",
      autoReset: true,
      color: "rgba(255,0,0,0.5)",
      drawStyle: {
        color: "#FF8C00",
        opacity: 0.6,
      },
      heightLimit: 80,
      maxSliderHeight: 180,
      minSliderHeight: 0,
    };
  },
  methods: {
    load(e) {
      this.heightLimitedAnalysis = e;
    },
  },
};
</script>

<style scoped>
.storybook-ui-card {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
}
</style>