MapboxImageLayer

静态图片覆盖图层，把一张图片按四角经纬度贴合到地图上。

简介

MapboxImageLayer 把一张图片按四角经纬度（左上 / 右上 / 右下 / 左下）贴合到地图，常用于雷达图、扫描影像、历史地图等叠加。内部以 image 源 + raster 图层实现。

用法

把一张雷达图叠加到指定区域：

<script setup lang="ts">
// 四角经纬度：左上 / 右上 / 右下 / 左下
const coordinates: [[number, number], [number, number], [number, number], [number, number]] = [
  [-80.425, 46.437],
  [-71.516, 46.437],
  [-71.516, 37.936],
  [-80.425, 37.936]
]
</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: [-75.79, 42.1], zoom: 4 }"
    >
      <MapboxImageLayer
        url="https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif"
        :coordinates="coordinates"
        :opacity="0.85"
      />
    </MapboxMap>
  </div>
</template>

API

Props

Prop	Default	Type
`url`		`string` 图片地址
`coordinates`		`[[number, number], [number, number], [number, number], [number, number]]` 四角经纬度：左上/右上/右下/左下
`layerId`		`string` 图层 id；省略时自动生成
`opacity`	`1`	`number` 不透明度
`beforeId`		`string` 插入到该图层之前

Changelog

No recent changes

MapboxBuildingLayer

3D 建筑图层，挤出官方样式的 composite/building 矢量源，可调颜色、透明度与起始缩放。

MapboxNavigationControl

导航控件，提供缩放按钮与指北罗盘，position 控制停靠角，options 透传至 mapbox-gl。