HexagonLayer

Example

Example Source Code

<template>
  <div style="height: 500px">
    <div style="height: 470px">
      <mb-map :zoom="8">
        <mb-tianditu-layer />
        <mb-hexagon-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

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
radius	Radius of the hexagon in meters.	number	1000
position	Function to retrieve the position of each data point. This function should accept a data item as an argument and return an array representing the [longitude, latitude] or [longitude, latitude, altitude/elevation].	AnyFunc	-
auto-highlight	When this property is true and pickable is also true, the object under the mouse cursor will be highlighted. This provides visual feedback when hovering over interactive elements.	boolean	false
color-aggregation	Aggregation method for hexagon colors. This property takes effect when used in conjunction with color-weight.	string ('SUM', 'MEAN', 'MIN', 'MAX')	'SUM'
color-range	Color range used for mapping values to colors. This is an array of color strings, typically in RGB or hexadecimal format.	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	Function to calculate the color for each hexagon. For example, you can calculate the color based on the number of points within the hexagon (density heatmap): (points) => points.length. If this property is set, color-weight and color-aggregation are disabled.	AnyFunc	-
color-weight	Function to calculate the color weight for each point within a hexagon. This property takes effect when used in conjunction with color-aggregation.	AnyFunc	-
coverage	The coverage ratio of the hexagonal grid. This value is between 0 and 1. The final rendered hexagon radius will be radius * coverage.	number	1
data	Source data for the layer. This can be an array, object, Promise that resolves to data, or a string representing a URL.	array / object / Promise / string	[]
elevation-aggregation	Aggregation method for hexagon elevation/height.	string ('SUM', 'MEAN', 'MIN', 'MAX')	'SUM'
elevation-scale	Scaling factor for the height of the extruded hexagons.	number	1
elevation-value	Function to calculate the elevation/height of each hexagon. For example, you can calculate the height based on the number of points within the hexagon: (points) => points.length. If this property is set, elevation-weight and elevation-aggregation are disabled.	AnyFunc	-
elevation-weight	Function to calculate the elevation weight for each point within a hexagon.	AnyFunc	() => 1
extruded	Whether the hexagons are rendered in 3D (extruded).	boolean	true
highlight-color	The color to blend with the original color of the highlighted hexagon. This creates the highlight effect. The value can be a color string or an RGBA array.	string / number[]	[255, 255, 128, 1]
highlighted-object-index	The index of the currently highlighted hexagon within the data. A value of -1 indicates that no object is currently highlighted.	number	-1
material	Whether the 3D hexagons have material properties (e.g., lighting, shading). This only takes effect when extruded is true.	boolean	true
opacity	The opacity of the hexagons (0-1). 0 is fully transparent, and 1 is fully opaque.	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events (e.g., click, hover).	boolean	false
show	Whether the layer is visible. If true, the layer will be rendered; otherwise, it will be hidden.	boolean	true

EVENTS

Name	Description	Parameters
created	Initialization complete event	-
mousemove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
mouseleave	-	-
click	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

SLOTS

Name	Description

METHODS

Name	Description	Definition