GridLayer

Example

Example Source Code

<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

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
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
cell-size	Radius of the cell in meters.	number	1000
color-aggregation	Aggregation method for cell colors. This property takes effect when used in conjunction with color-weight. Available options are: SUM, MEAN, MIN, MAX.	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 cell. For example, you can calculate the color based on the number of points within the cell (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 cell. This property takes effect when used in conjunction with color-aggregation.	AnyFunc	-
coverage	The coverage ratio of the cell grid. This value is between 0 and 1. The final rendered cell radius will be cellSize * coverage.	number	1
data	Source data for the layer. This can be a string representing a URL, an object, an array, or a Promise that resolves to data.	string / IndexAny / AnyArr / Promise<any>	''
highlight-color	The color to blend with the original color of the highlighted object. 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 object within the data. A value of -1 indicates that no object is currently highlighted.	number	-1
elevation-value	Function to calculate the elevation/height of each cell. For example, you can calculate the height based on the number of points within the cell: (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 cell. This property takes effect when used in conjunction with elevation-aggregation.	AnyFunc	() => 1
elevation-aggregation	Aggregation method for cell elevation/height. Available options are: SUM, MEAN, MIN, MAX.	string ('SUM', 'MEAN', 'MIN', 'MAX')	'SUM'
elevation-scale	Scaling factor for the height of the cells.	number	1
material	Whether the cells have material properties (e.g., lighting, shading).	boolean	true
opacity	The opacity of the cell (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
stroked	Whether the cells have an outline (stroke).	boolean	false

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