圆图层（CircleLayer）

circle layer，半径较小时也可当作点使用

示例

示例源码

<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

名称	描述	类型	默认值
id	图层id	string	-
radius	半径, ['mag',1,5,14,20]表示依据mag属性值来设置圆半径，值为1/14时圆半径为5/20；[1,5,14,20]表示地图zoom值为1/14时圆半径为5/20	number / Array<string | number>	5
blur	圆模糊量，值为1时只有圆中心点是不透明状态	number	0
color	颜色值 可设为数字或数组 ['mag',1,"rgba(33,102,172,0)",14,"rgb(253,219,199)"]表示依据mag属性值来设置颜色值，值为1/14时颜色值为rgba(33,102,172,0)/rgb(253,219,199)	string / Array<string | number>	#000000
data	矢量图层的数据 数组中每个对象需包含必需的coordinates属性以及可选的properties属性 每一个对象代表一个点/一条线/一个多边形	VectorLayerData	-
geo-json-data-source	geojson数据源，可设为geojson数据链接或geojson数据对象；规范链接， 若设置了本属性，则data属性失效	string / GeoJSONSource	-
opacity	透明度，默认值为1 若设置为数组，则与zoom关联 例如：[7,1,9,0]表示0~7级透明度为1，9以上透明度为0	number / number[]	1
maxzoom	最大缩放级别	number	22
minzoom	最小缩放级别	number	0
pickable	图层是否响应拾取事件，若为false，则组件不会emit鼠标相关事件	boolean	true
show	是否显示	boolean	true
source-id	图层Source的id，若设置了本ID，则geoJsonDataSource与data属性都会失效	string	-
source-layer-name	源数据中图层名称 设置sourceId时，此属性生效	string	-
stroke-color	圆边框颜色 可设为数字或数组 ['mag',1,"rgba(33,102,172,0)",14,"rgb(253,219,199)"]表示依据mag属性值来设置颜色值，值为1/14时颜色值为rgba(33,102,172,0)/rgb(253,219,199)	string / Array<string | number>	#000000
stroke-opacity	圆边框透明度	number	0
stroke-width	圆边框宽度，单位px	number	0
translate	锚点平移量，正方向为右/下 px	number[]	[0,0]
auto-highlight	是否自动高亮	boolean	false
highlight-color	高亮颜色	string / number[]	[255, 255, 128, 1]
generate-id	是否自动生成GeoJSON Feature Id。如果数据没有Id，自动高亮时，需设置为true	boolean	false

EVENTS

名称	描述	参数
created	地图初始化完成事件	-
click	图层单击事件	object — 包含屏幕坐标pixel、经纬度coordinate与选中元素的属性properties、originalEvent
mousemove	鼠标移动事件	object — 包含屏幕坐标pixel、经纬度coordinate与选中元素的属性properties、originalEvent
mouseleave	鼠标移出元素事件	MapMouseEvent

SLOTS

名称	描述

METHODS

名称	描述	定义
exportToGeoJson	将本图层数据导出为geojson格式数据文本 若图层数据源来自source组件或为url，则输出null	（）=> object | null