3D网格热力图（GridLayer）

示例

示例源码

<template>
  <div style="height: 500px">
    <div style="height: 470px">
      <mb-map :zoom="8">
        <mb-tianditu-layer />
        <mb-grid-layer
          :data="__RESOURCE_URL__ + 'json/beijing_price.json'"
          :position="(d) => d.lnglat"
          :color-weight="(d) => d.transPrice"
          color-aggregation="MEAN"
          :elevation-weight="(d) => d.transPrice"
          elevation-aggregation="MEAN"
          :pickable="true"
          :elevation-scale="50"
          @mousemove="mousemoveHandler"
          @mouseleave="mouseleaveHandler"
        />
      </mb-map>
    </div>
    <div style="height: 30px; margin: 10px 10px">
      <p v-if="meanPrice" class="text-muted">Price： {{ meanPrice / 10000 }}</p>
    </div>
  </div>
</template>

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

const meanPrice = ref(0)

const mousemoveHandler = ({ object }: { object: any }) => {
  meanPrice.value = object.elevationValue
}
const mouseleaveHandler = () => {
  meanPrice.value = 0
}
</script>

API

PROPS

名称	描述	类型	默认值
id	图层Id	string	-
position	位置信息	AnyFunc	-
auto-highlight	本属性为true且pickable为true时，则会将鼠标悬浮选中的对象设为高亮	boolean	false
cell-size	半径，单位为米	number	1000
color-aggregation	格网颜色聚合模式 本属性与colorWeight一起设置时生效	string(SUM / MEAN / MIN / MAX)	SUM
color-range	颜色范围	string[]	[ "rgb(255, 255, 178)", "rgb(254, 217, 118)", "rgb(254, 178, 76)", "rgb(253, 141, 60)", "rgb(240, 59, 32)", "rgb(189, 0, 38)", ]
color-value	六边形颜色隐射函数 例如：根据六边形内点的数量来计算颜色(密度热力图) (points) => points.length 若设置了本属性，则 colorWeight与colorAggregation 失效	AnyFunc	-
color-weight	格网中每一点的颜色权重值计算函数 本属性与colorAggregation一起设置时生效	AnyFunc	-
coverage	蜂窝网格的覆盖范围比例，值在0-1之间，最后呈现的网格半径将为cellSize*coverage	number	1
data	图层源数据	string / IndexAny / AnyArr / Promise<any>	''
highlight-color	要与高亮对象原始颜色进行混合(blend)的颜色值	string / number[]	[255, 255, 128, 1]
highlighted-object-index	高亮元素序号	number	-1
elevation-value	格网高度估算函数	AnyFunc	-
elevation-weight	高度权重值计算函数	AnyFunc	() => 1
elevation-aggregation	高度聚合模式	string(SUM / MEAN / MIN / MAX)	SUM
elevation-scale	高度放大倍数	number	1
material	是否有材质	boolean	true
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

名称	描述	定义