line

用 MapboxLayer 的 line 类型渲染线图层，经 paint 控制线宽、颜色与端点样式。

简介

MapboxLayer 设 type="line" 渲染线图层，line-width / line-color 控制描边，line-cap / line-join 控制端点与拐角样式。

line 由通用组件 MapboxLayer 承载，完整 Props 与事件见其文档。

用法

一条折线，圆角端点：

<script setup lang="ts">
import type { FeatureCollection } from 'geojson'

const data: FeatureCollection = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [116.32, 39.88],
          [116.38, 39.92],
          [116.44, 39.9],
          [116.5, 39.95]
        ]
      }
    }
  ]
}
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap
      :options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.41, 39.91], zoom: 11 }"
    >
      <MapboxLayer
        layer-id="route"
        type="line"
        :source="{ type: 'geojson', data }"
        :layout="{ 'line-cap': 'round', 'line-join': 'round' }"
        :paint="{ 'line-color': '#f43f5e', 'line-width': 4 }"
      />
    </MapboxMap>
  </div>
</template>

API

Props

Prop	Default	Type
`layerId`		`string` 图层 id，全局唯一
`type`		`"symbol" \| "fill" \| "line" \| "circle" \| "heatmap" \| "fill-extrusion" \| "building" \| "raster" \| "raster-particle" \| "hillshade" \| "model" \| "background" \| "sky" \| "slot" \| "clip"` 图层类型，决定渲染方式与可用的 paint / layout 属性 https://docs.mapbox.com/style-spec/reference/layers
`source`		`string \| mapboxgl.VectorSourceSpecification \| mapboxgl.RasterSourceSpecification \| mapboxgl.RasterDEMSourceSpecification \| mapboxgl.RasterArraySourceSpecification \| mapboxgl.GeoJSONSourceSpecification \| mapboxgl.VideoSourceSpecification \| mapboxgl.ImageSourceSpecification \| mapboxgl.ModelSourceSpecification` source id 字符串引用，或内联 source 对象（自动创建匿名源并随图层卸载）
`sourceLayer`		`string` 矢量瓦片源内的子图层名（source-layer），消费矢量源时必填
`paint`		`PropBag` 绘制样式属性，响应式变更经 setPaintProperty 增量下发 https://docs.mapbox.com/style-spec/reference/layers
`layout`		`PropBag` 布局属性，响应式变更经 setLayoutProperty 增量下发 https://docs.mapbox.com/style-spec/reference/layers
`filter`		`mapboxgl.ExpressionSpecification \| ["has", string] \| ["!has", string] \| ["==", string, string \| number \| boolean] \| ["!=", string, string \| number \| boolean] \| [">", string, string \| number \| boolean] \| [">=", string, string \| number \| boolean] \| ["<", string, string \| number \| boolean] \| ["<=", string, string \| number \| boolean] \| (string \| mapboxgl.FilterSpecification)[]` 过滤表达式，仅渲染匹配的要素 https://docs.mapbox.com/style-spec/reference/expressions
`minzoom`	`0`	`number` 最小缩放级别，低于此级别不渲染
`maxzoom`	`24`	`number` 最大缩放级别，高于此级别不渲染
`beforeId`		`string` 插入到该 id 图层之前；省略则追加到图层栈顶部

Changelog

No recent changes

fill

用 MapboxLayer 的 fill 类型渲染面图层，经 paint 控制填充色与透明度，支持数据驱动着色。

symbol

用 MapboxLayer 的 symbol 类型渲染文字与图标标注，layout 读取要素属性。