mapgis-3d-graph-theme-layer

# 属性

# geojson

  • 类型: Object
  • 必选:
  • 侦听属性
  • 描述: 必填项,标准的 geojson 地理数据结构。

# type

  • 类型: String
  • 必选:
  • 侦听属性
  • 描述: 统计图类型,可设置为"HorizontalColumn", "Pie", "VerticalColumn"。

# attributeName

  • 类型: Array
  • 必选:
  • 非侦听属性
  • 描述: 用于显示的属性名(统计字段)

# attributeColor

  • 类型: Array<String>
  • 必选:
  • 非侦听属性
  • 描述: 各个属性对应的颜色

# width

  • 类型: Number
  • 可选:
  • 非侦听属性
  • 描述: 显示柱状体或饼状的宽度
  • 默认值: 50000

# addExtrudedHeight

  • 类型: Boolean
  • 可选:
  • 非侦听属性
  • 描述: 是否为饼状体添加高度
  • 默认值: true

# textFont

  • 类型: String
  • 可选:
  • 非侦听属性
  • 描述: 标注字体
  • 默认值: "50px Helvetica"

# textColor

  • 类型: String
  • 可选:
  • 非侦听属性
  • 描述: 标注颜色
  • 默认值: "#008000"

# textHeightOffset

  • 类型: Number
  • 可选:
  • 非侦听属性
  • 描述: 字体高度的偏移值
  • 默认值: 10000

# 事件

# @load

  • Description: 在 Mapgis3dGraphThemeLayer 加载完毕后发送该事件
  • Payload Mapgis3dGraphThemeLayer 组件对象

# @unload

  • Description: 关闭 Mapgis3dGraphThemeLayer 组件前发送该事件
  • Payload Mapgis3dGraphThemeLayer 组件对象

# @click

  • Description: 左击统计图时 发送该事件
  • Payload 点击的统计图所在的 feature 属性

# @hover

  • Description: 鼠标移至统计图上时 发送该事件
  • Payload 鼠标经过的统计图所在的 feature 属性

# 示例

import axios from "axios";
<template>
  <mapgis-web-scene :style="{ height: '95vh' }">
    <mapgis-3d-graph-theme-layer
      v-if="geojson"
      :geojson="geojson"
      :type="type"
      :attributeName="attributeName"
      :attributeColor="attributeColor"
      :width="width"
      :addExtrudedHeight="addExtrudedHeight"
      :textFont="textFont"
      :textColor="textColor"
      :textHeightOffset="textHeightOffset"
      @load="load"
    />
  </mapgis-web-scene>
</template>
<script>
export default {
  data() {
    return {
      graphThemeLayer: undefined,
      geojson: {},
      type: "HorizontalColumn",
      attributeName: ["GDP_2007", "GDP_2008"],
      attributeColor: ["#FFB980", "#5AB1EF"],
      width: 50000,
      addExtrudedHeight: true,
      textFont: "50px Helvetica",
      textColor: "#008000",
      textHeightOffset: 10000,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      const vm = this;
      this.geojson = {};
      let result = await axios.get("./geojson/省级行政区x.geojson");
      const { data } = result;
      vm.geojson = { ...data };
      if (vm.graphThemeLayer) {
        vm.graphThemeLayer.addGraphLayer();
      }
    },
    load(graphThemeLayer) {
      this.graphThemeLayer = graphThemeLayer;
      this.initData();
    },
  },
};
</script>