useMapboxImage
注册 symbol 图层可用的命名图片，样式切换后自动补回，卸载时移除。
简介
useMapboxImage 加载远程图片并注册为样式图片，供 symbol 图层经 icon-image 引用。setStyle 清空样式图片后会经 onReady 自动补回，组件卸载时移除。返回 loaded 状态便于在加载完成前给出占位反馈。
设
sdf: true 注册为 SDF 图标后，可经 icon-color 着色。在 <MapboxMap> 子树外使用时经 options.mapId 指定目标地图。用法
注册一张远程图片，symbol 图层经 icon-image 引用：
图片加载：加载中…
<script setup lang="ts">
import type { FeatureCollection } from 'geojson'
const mapId = 'use-mapbox-image-demo'
const data: FeatureCollection = {
type: 'FeatureCollection',
features: [
{ type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [116.397, 39.908] } }
]
}
const { loaded } = useMapboxImage(
'demo-cat',
'https://docs.mapbox.com/mapbox-gl-js/assets/cat.png',
{ mapId }
)
</script>
<template>
<div class="relative h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
<MapboxMap
:map-id="mapId"
:options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.397, 39.908], zoom: 13 }"
>
<MapboxLayer
v-if="loaded"
layer-id="cats"
type="symbol"
:source="{ type: 'geojson', data }"
:layout="{ 'icon-image': 'demo-cat', 'icon-size': 0.25, 'icon-allow-overlap': true }"
/>
</MapboxMap>
<div
class="absolute left-2 top-2 z-10 rounded bg-default/90 px-2 py-1 text-xs text-default ring ring-default"
>
图片加载：{{ loaded ? '完成' : '加载中…' }}
</div>
</div>
</template>
API
useMapboxImage()
注册命名图片。
name
string required
图片注册名称，供
icon-image 引用。url
string required
图片 URL 地址。
options.mapId
string
目标地图 id；在
<MapboxMap> 子树外使用时必填。options.sdf
boolean
作为 SDF 图标（可经
icon-color 着色）。options.pixelRatio
number
像素密度，默认
1。返回 { loaded: Ref<boolean> }：图片是否已加载完成。
Changelog
No recent changes