CircleLayer

Circle layer, which can also be used as a point when the radius is small.

Example

Example Source Code

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map :zoom="1.5" :pitch="20">
      <mb-tianditu-layer />
      <mb-circle-layer
        :data="airpotDataSource"
        :color="color"
        :radius="radius"
        :stroke-width="1"
        :stroke-opacity="1"
      />
    </mb-map>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, ref } from 'vue'

const airpotDataSource = ref([])
const color = [
  'scalerank',
  1,
  'rgb(178,24,43)',
  2,
  'rgb(239,138,98)',
  4,
  'rgb(253,219,199)',
  6,
  'rgb(209,229,240)',
  8,
  'rgb(103,169,207)',
  10,
  'rgba(33,102,172,0)',
]
const radius = ['scalerank', 1, 10, 10, 1]

onBeforeMount(() => {
  fetch(`${__RESOURCE_URL__}json/ne_10m_airports.geojson`)
    .then((res) => res.json())
    .then((data) => {
      airpotDataSource.value = data.features.map((feature) => {
        return {
          coordinates: feature.geometry.coordinates.slice(),
          properties: feature.properties,
        }
      })
    })
})
</script>

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
radius	Radius. ['mag',1,5,14,20] indicates that the circle radius is set according to the mag property value. When the value is 1/14, the circle radius is 5/20. [1,5,14,20] indicates that when the map zoom value is 1/14, the circle radius is 5/20	number / Array<string | number>	5
blur	Circle blur amount. A value of 1 means only the center of the circle is opaque	number	0
color	Color value. Can be set to a number or an array. ['mag',1,"rgba(33,102,172,0)",14,"rgb(253,219,199)"] indicates that the color value is set according to the mag property value. When the value is 1/14, the color value is rgba(33,102,172,0)/rgb(253,219,199)	string / Array<string | number>	#000000
data	Data for the vector layer. Each object in the array must contain the required coordinates property and the optional properties property. Each object represents a point/line/polygon	VectorLayerData	-
geo-json-data-source	GeoJSON data source. Can be set to a GeoJSON data link or a GeoJSON data object. Specification Link. If this property is set, the data property is ignored	string / GeoJSONSource	-
opacity	Opacity. The default value is 1. If set as an array, it is associated with zoom. For example: [7,1,9,0] means the opacity is 1 from zoom level 0 to 7, and 0 above zoom level 9	number / number[]	1
maxzoom	Maximum zoom level	number	22
minzoom	Minimum zoom level	number	0
pickable	Whether the layer responds to pick events. If false, the component will not emit mouse-related events	boolean	true
show	Whether to show the layer	boolean	true
source-id	ID of the layer's source. If this ID is set, both the geoJsonDataSource and data properties are ignored	string	-
source-layer-name	Layer name in the source data. This property is effective when sourceId is set	string	-
stroke-color	Circle border color. Can be set to a number or an array. ['mag',1,"rgba(33,102,172,0)",14,"rgb(253,219,199)"] indicates that the color value is set according to the mag property value. When the value is 1/14, the color value is rgba(33,102,172,0)/rgb(253,219,199)	string / Array<string | number>	#000000
stroke-opacity	Circle border opacity	number	0
stroke-width	Circle border width in pixels	number	0
translate	Anchor point translation. Positive direction is right/down in pixels	number[]	[0,0]
auto-highlight	Whether to automatically apply highlighting	boolean	false
highlight-color	The highlight color	string / number[]	[255, 255, 128, 1]
generate-id	Whether to automatically generate GeoJSON Feature IDs. If the data does not have IDs and automatic highlighting is required, this must be set to true	boolean	false

EVENTS

Name	Description	Parameters
created	Map initialization completed event	-
click	Layer click event	object — Contains screen coordinates (pixel), longitude/latitude (coordinate), selected element properties, and originalEvent
mousemove	Mouse move event	object — Contains screen coordinates (pixel), longitude/latitude (coordinate), selected element properties, and originalEvent
mouseleave	Mouse leave element event	MapMouseEvent

SLOTS

Name	Description

METHODS

Name	Description	Definition
exportToGeoJson	Translate the layer's data to GeoJSON formatted text. If the layer's data source comes from a source component or a URL, output null.	（）=> object | null