VHeatmapLayer

VHeatmapLayer 用于渲染热力图的图层。

• 配置文档

基础用法

按位置可视化地震频率。

heatmap-layer.vue

<script lang="ts" setup>
import type { CircleLayerProps, HeatmapLayerProps } from '@movk-repo/mapbox'
import type { PlusColumn } from 'plus-pro-components'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VCircleLayer, VGeoSource, VHeatmapLayer, VMapbox, VTianditu, VUIControl } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const token = getTdtRandomToken()

const data = '/mapbox/data/earthquakes.geojson'

const formData = ref({
  radius: 20,
  intensity: 3,
})

const columns: PlusColumn[] = [
  {
    label: '半径',
    prop: 'radius',
    valueType: 'slider',
    fieldProps: {
      min: 2,
      max: 100,
    },
  },
  {
    label: '强度',
    prop: 'intensity',
    valueType: 'slider',
    fieldProps: {
      min: 1,
      max: 10,
    },
  },
]

const paint: ComputedRef<HeatmapLayerProps['paint']> = computed(() => ({
  'heatmap-weight': [
    'interpolate',
    ['linear'],
    ['get', 'mag'],
    0,
    0,
    6,
    1,
  ],
  'heatmap-intensity': [
    'interpolate',
    ['linear'],
    ['zoom'],
    0,
    1,
    9,
    formData.value.intensity,
  ],
  'heatmap-color': [
    'interpolate',
    ['linear'],
    ['heatmap-density'],
    0,
    'rgba(33,102,172,0)',
    0.2,
    'rgb(103,169,207)',
    0.4,
    'rgb(209,229,240)',
    0.6,
    'rgb(253,219,199)',
    0.8,
    'rgb(239,138,98)',
    1,
    'rgb(178,24,43)',
  ],
  'heatmap-radius': [
    'interpolate',
    ['linear'],
    ['zoom'],
    0,
    2,
    9,
    formData.value.radius,
  ],
  'heatmap-opacity': [
    'interpolate',
    ['linear'],
    ['zoom'],
    7,
    1,
    9,
    0,
  ],
}))
const circlePaint: CircleLayerProps['paint'] = {
  'circle-radius': [
    'interpolate',
    ['linear'],
    ['zoom'],
    7,
    ['interpolate', ['linear'], ['get', 'mag'], 1, 1, 6, 4],
    16,
    ['interpolate', ['linear'], ['get', 'mag'], 1, 5, 6, 50],
  ],
  'circle-color': [
    'interpolate',
    ['linear'],
    ['get', 'mag'],
    1,
    'rgba(33,102,172,0)',
    2,
    'rgb(103,169,207)',
    3,
    'rgb(209,229,240)',
    4,
    'rgb(253,219,199)',
    5,
    'rgb(239,138,98)',
    6,
    'rgb(178,24,43)',
  ],
  'circle-stroke-color': 'white',
  'circle-stroke-width': 1,
  'circle-opacity': [
    'interpolate',
    ['linear'],
    ['zoom'],
    7,
    0,
    8,
    1,
  ],
}
</script>

<template>
  <VMapbox :center="[-113.20990080910025, 40.68225388860873]" :zoom="3" :access-token="accessToken">
    <VTianditu type="img_w" :token="token" />
    <VGeoSource :data="data">
      <VHeatmapLayer :maxzoom="9" :paint="paint" />
      <VCircleLayer :minzoom="7" :paint="circlePaint" />
    </VGeoSource>
    <template #before>
      <VUIControl position="top-right" w-10rem>
        <PlusForm v-model="formData" label-width="auto" :columns="columns" :has-footer="false" />
      </VUIControl>
    </template>
  </VMapbox>
</template>

隐藏源代码

Api

heatmapLayerProps

属性名	说明	类型	默认值
visible	图层可见性	boolean	true
opacity	图层透明度	number	1
order	图层顺序	number	-
minzoom	图层最小缩放级别	number	0
maxzoom	图层最大缩放级别	number	22
sourceLayer	矢量切片源使用的图层	string	-
filter	图层过滤器	array	-
layout	图层布局属性	object	-
paint	图层绘制属性	object	-
slot	图层槽位	string	-
metadata	图层任意属性	object	-
cursor	图层移入时鼠标样式	string	pointer
defaultOptions	图层配置选项（覆盖同名属性）	object	-

heatmapLayerEmits

事件名	说明	回调参数
load	图层加载完成时触发	Function
mousedown	鼠标按下时触发	Function
mouseup	鼠标抬起时触发	Function
mouseover	鼠标悬停时触发	Function
mousemove	鼠标移动时触发	Function
preclick	鼠标单击前触发	Function
click	鼠标单击时触发	Function
dblclick	鼠标双击时触发	Function
mouseenter	鼠标进入时触发	Function
mouseleave	鼠标离开时触发	Function
mouseout	鼠标移出时触发	Function

类型定义

HeatmapLayerLoadEvent

layers/HeatmapLayer/HeatmapLayer.ts

export interface HeatmapLayerLoadEvent {
  layer: HeatmapLayerSpecification
  source: GeoJSONSource | VectorTileSource
  map: Map
}