VClipLayer

VClipLayer 用于剪裁图层的渲染。

• 参考文档

注意

请注意，这是一个实验性功能，正在开发中，很容易发生变化。

基础用法

clip-layer.vue

<script lang="ts" setup>
import type { MapboxProps } from '@movk-repo/mapbox'
import type { FeatureCollection } from 'geojson'
import { VClipLayer, VGeoSource, VLineLayer, VMapbox } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const options: MapboxProps['defaultOptions'] = {
  center: [-74.006292, 40.712666],
  zoom: 16.2,
  pitch: 40,
  bearing: 53,
  minZoom: 15,
  maxZoom: 17,
}

const data: FeatureCollection = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        coordinates: [
          [
            [-74.00618, 40.71406],
            [-74.00703, 40.71307],
            [-74.00787, 40.71206],
            [-74.00766, 40.71176],
            [-74.00624, 40.71204],
            [-74.00487, 40.71252],
            [-74.00421, 40.71315],
            [-74.00618, 40.71406],
          ],
        ],
        type: 'Polygon',
      },
    },
  ],
}
</script>

<template>
  <VMapbox type="standard" :default-options="options" :access-token="accessToken">
    <VGeoSource :data="data">
      <VClipLayer :maxzoom="16" :layout="{ 'clip-layer-types': ['symbol', 'model'] }" />
      <VLineLayer :paint="{ 'line-color': 'rgba(255, 0, 0, 0.9)', 'line-dasharray': [0, 4, 3], 'line-width': 5 }" />
    </VGeoSource>
  </VMapbox>
</template>

隐藏源代码

API

clipLayerProps

属性名	说明	类型	默认值
order	图层顺序	number	-
minzoom	图层最小缩放级别	number	0
maxzoom	图层最大缩放级别	number	22
sourceLayer	矢量切片源使用的图层	string	-
filter	图层过滤器	array	-
layout	图层布局属性	object	-
slot	图层槽位	string	-
cursor	图层移入时鼠标样式	string	pointer
metadata	图层任意属性	object	-

clipLayerEmits

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

类型定义

ClipLayerLoadEvent

layers/ClipLayer/ClipLayer.ts

export interface ClipLayerLoadEvent {
  layer: ClipLayerSpecification
  source: GeoJSONSource | VectorTileSource
  map: Map
}