3D圆柱图层（ColumnLayer）

示例

示例源码

<template>
  <div style="height: 500px">
    <div style="height: 470px">
      <mb-map :pitch="60" :bearing="30" :zoom="10">
        <mb-tianditu-layer />
        <mb-column-layer
          :data="__RESOURCE_URL__ + 'json/beijing_price.json'"
          :position="(d) => d.lnglat"
          :elevation="(d) => d.transPrice / 30"
          :fill-color="
            (d) => `rgba(${(d.transPrice / 10000) * 15},125,125,0.8)`
          "
          :radius="150"
          :pickable="true"
          :auto-highlight="true"
          @mousemove="mousemoveHandler"
          @mouseleave="mouseleaveHandler"
        />
      </mb-map>
    </div>
    <div style="height: 30px; margin: 10px 10px">
      <p v-if="comunity" class="text-muted">
        {{
          comunity.name
            ? `${comunity.name} ${comunity.transPrice / 10000}thousand/m2`
            : ''
        }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const comunity = ref<Record<string, any>>({})

const mousemoveHandler = ({ object }: { object: any }) => {
  if (object) {
    comunity.value = object
  }
}
const mouseleaveHandler = () => {
  comunity.value = {}
}
</script>

API

PROPS

名称	描述	类型	默认值
id	图层Id	string	-
radius	半径，单位为米	number	1000
position	位置	function	-
auto-highlight	本属性为true且pickable为true时，则会将鼠标悬浮选中的对象设为高亮	boolean	false
data	图层源数据	string / IndexAny / AnyArr / Promise<any>	''
elevation	高程	number / AnyNumberFunc	1000
extruded	是否为3D模式	boolean	true
fill-color	填充颜色	string / AnyFunc	black
filled	是否填充	boolean	true
highlight-color	要与高亮对象原始颜色进行混合(blend)的颜色值	string / number[]	[255, 255, 128, 1]
highlighted-object-index	高亮元素序号	number	-1
line-color	线颜色	string / AnyFunc	black
line-width	线宽度	string / AnyNumberFunc	1
line-width-max-pixels	-	number	Number.MAX_SAFE_INTEGER
line-width-min-pixels	-	number	0
line-width-scale	-	number	1
line-width-units	-	string（pixels / meters）	meters
opacity	透明度	number	1
pickable	图层是否会响应鼠标事件，若为false，则组件不会emit鼠标相关事件	boolean	false
show	是否显示	boolean	true
stroked	是否描边	boolean	false

EVENTS

名称	描述	参数
created	初始化完成事件	-
mousemove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
mouseleave	-	-
click	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

SLOTS

名称	描述

METHODS

名称	描述	定义