MapboxRasterLayer

View source
栅格瓦片图层,叠加 XYZ/TMS 模板的外部瓦片服务。

简介

MapboxRasterLayer 叠加外部栅格瓦片服务({z}/{x}/{y} 模板 URL),支持 tileSize / scheme / minzoom / maxzoom / attribution / opacity。天地图等国内底图见 扩展能力

用法

在空样式底图上叠加 OpenStreetMap 瓦片:

<script setup lang="ts">
const tiles = ['https://tile.openstreetmap.org/{z}/{x}/{y}.png']
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <!-- 空样式底图,仅叠加外部栅格瓦片 -->
    <MapboxMap
      :options="{ style: 'mapbox://styles/mapbox/empty-v9', center: [116.4, 39.9], zoom: 9 }"
    >
      <MapboxRasterLayer
        :tiles="tiles"
        :tile-size="256"
        attribution="© OpenStreetMap contributors"
      />
    </MapboxMap>
  </div>
</template>

API

Props

Prop Default Type
tilesstring[]

URL 模板瓦片地址({z}/{x}/{y} 占位)

layerIdstring

图层 id;省略时自动生成

tileSize256number

瓦片尺寸

scheme'xyz'"xyz" | "tms"

瓦片坐标方案

minzoomnumber

数据源最小缩放级别

maxzoomnumber

数据源最大缩放级别

attributionstring

版权信息

opacity1number

不透明度

beforeIdstring

插入到该图层之前

Changelog

No recent changes
Copyright © 2026 - 2026 YiXuan - MIT License