GridCellLayer

Example

Example Source Code

<template>
  <div style="height: 500px">
    <div style="height: 470px">
      <mb-map :pitch="60" :bearing="30" :zoom="10">
        <mb-tianditu-layer />
        <mb-grid-cell-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)`
          "
          :cell-size="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

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
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>	''
elevation	Elevation/Height of the cell. This can be a fixed number or a function that returns the elevation based on the data.	number / AnyNumberFunc	1000
extruded	Whether the cells are rendered in 3D (extruded).	boolean	true
fill-color	Fill color of the cell. This can be a string representing a color name (e.g., 'red', 'blue'), a function that returns a color based on the data, or an array of RGBA values (e.g., [255, 0, 0, 255] for red).	string / AnyFunc	'black'
filled	Whether the cells are filled.	boolean	true
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
line-color	Line color of the cell's outline. This can be a string representing a color name, a function that returns a color based on the data, or an array of RGBA values.	string / AnyFunc	'black'
line-width	Width of the cell's outline. This can be a fixed number or a function that returns the line width based on the data.	string / AnyNumberFunc	1
line-width-max-pixels	The maximum line width in pixels. This limits the maximum width of the rendered lines.	number	Number.MAX_SAFE_INTEGER
line-width-min-pixels	The minimum line width in pixels. This ensures that lines are not rendered with a width smaller than this value.	number	0
line-width-scale	A scaling factor applied to the line width. This allows you to easily adjust the width of all lines in the layer.	number	1
line-width-units	Units for the line width: 'pixels' or 'meters'. Specifies whether the width values are interpreted as pixels on screen or meters in world space. This is especially relevant for geographic visualizations where the width should represent a physical distance.	string ('pixels', 'meters')	'meters'
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