VCircleLayer

VCircleLayer 用于渲染填充圆的图层。

• 配置文档

基础用法

circle-layer.vue

<script lang="ts" setup>
import type { PlusColumn } from 'plus-pro-components'
import { VCircleLayer, VGeoSource, VMapbox } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const data = '/mapbox/data/earthquakes.geojson'
const formData = ref({
  visible: true,
  opacity: 0.8,
  paint: {
    'circle-radius': 10,
    'circle-color': '#2a9d8f',
  },
})

const columns: PlusColumn[] = [
  {
    label: '透明度',
    prop: 'opacity',
    valueType: 'slider',
    fieldProps: {
      min: 0,
      max: 1,
      step: 0.1,
    },
  },
  {
    label: '圆圈半径',
    prop: 'paint.circle-radius',
    valueType: 'slider',
    fieldProps: {
      min: 1,
      max: 20,
      step: 1,
    },
  },
  {
    label: '是否显示',
    prop: 'visible',
    valueType: 'switch',
  },
  {
    label: '填充颜色',
    prop: 'paint.circle-color',
    valueType: 'color-picker',
  },
]
</script>

<template>
  <VMapbox type="standard" :center="[97.97278565297017, 30.060570504856898]" :zoom="3" :access-token="accessToken">
    <VGeoSource :data="data">
      <VCircleLayer :default-options="formData" />
    </VGeoSource>
    <template #before>
      <PlusForm
        v-model="formData" :row-props="{ gutter: 20 }" :col-props="{ span: 6 }" :columns="columns"
        :has-footer="false"
      />
    </template>
  </VMapbox>
</template>

隐藏源代码

可视化聚类点

将图层中的点可视化为聚类。

circle-layer-cluster.vue

<script lang="ts" setup>
import type { CircleLayerProps, SymbolLayerProps } from '@movk-repo/mapbox'
import { VCircleLayer, VGeoSource, VMapbox, VSymbolLayer } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const data = '/mapbox/data/earthquakes.geojson'

const clustersOptions: CircleLayerProps = {
  filter: ['has', 'point_count'],
  paint: {
    'circle-color': [
      'step',
      ['get', 'point_count'],
      '#51bbd6',
      100,
      '#f1f075',
      750,
      '#f28cb1',
    ],
    'circle-radius': [
      'step',
      ['get', 'point_count'],
      20,
      100,
      30,
      750,
      40,
    ],
  },
}
const countOptions: SymbolLayerProps = {
  filter: ['has', 'point_count'],
  layout: {
    'text-field': ['get', 'point_count_abbreviated'],
    'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
    'text-size': 12,
  },
}
const unclusteredOptions: CircleLayerProps = {
  filter: ['!', ['has', 'point_count']],
  paint: {
    'circle-color': '#11b4da',
    'circle-radius': 4,
    'circle-stroke-width': 1,
    'circle-stroke-color': '#fff',
  },
}
</script>

<template>
  <VMapbox type="dark-v11" :center="[-103.5917, 40.6699]" :zoom="3" :access-token="accessToken">
    <VGeoSource :data="data" :default-options="{ cluster: true, clusterMaxZoom: 14, clusterRadius: 50 }">
      <VCircleLayer :default-options="clustersOptions" />
      <VSymbolLayer :default-options="countOptions" />
      <VCircleLayer :default-options="unclusteredOptions" />
    </VGeoSource>
  </VMapbox>
</template>

隐藏源代码

Api

circleLayerProps

属性名	说明	类型	默认值
visible	图层可见性	boolean	true
opacity	图层透明度	number	1
order	图层顺序	number	-
minzoom	图层最小缩放级别	number	0
maxzoom	图层最大缩放级别	number	22
sourceLayer	矢量切片源使用的图层	string	-
filter	图层过滤器	array	-
layout	图层布局属性	object	-
paint	图层绘制属性	object	-
slot	图层槽位	string	-
metadata	图层任意属性	object	-
cursor	图层移入时鼠标样式	string	pointer
defaultOptions	图层配置选项（覆盖同名属性）	object	-

circleLayerEmits

事件名	说明	回调参数
load	图层加载完成时触发	Function
mousedown	鼠标按下时触发	Function
mouseup	鼠标抬起时触发	Function
mouseover	鼠标悬停时触发	Function
mousemove	鼠标移动时触发	Function
preclick	鼠标单击前触发	Function
click	鼠标单击时触发	Function
dblclick	鼠标双击时触发	Function
mouseenter	鼠标进入时触发	Function
mouseleave	鼠标离开时触发	Function
mouseout	鼠标移出时触发	Function

类型定义

CircleLayerLoadEvent

layers/CircleLayer/CircleLayer.ts

export interface CircleLayerLoadEvent {
  layer: CircleLayerSpecification
  source: GeoJSONSource | VectorTileSource
  map: Map
}