---
title: "COG"
description: "注册 cog:// 协议，在浏览器端按视口读取并渲染 Cloud Optimized GeoTIFF。"
canonical_url: "https://maplibre.mhaibaraai.cn/docs/extensions/cog"
---
# COG

> 注册 cog:// 协议，在浏览器端按视口读取并渲染 Cloud Optimized GeoTIFF。

## 简介

[maplibre-cog-protocol](https://github.com/geomatico/maplibre-cog-protocol) 为 MapLibre 增加 `cog://` 协议：直接从对象存储读取 GeoTIFF 所需字节区间并在浏览器端解码。注册后，把 `MaplibreRasterLayer` 的 `url` 写成 `cog://` 地址即可。

> [!NOTE]
> 
> 需额外安装可选依赖 
> 
> @geomatico/maplibre-cog-protocol
> 
> 。COG 必须为 EPSG:3857（Web 墨卡托），
> 
> tileSize
> 
>  保持 256。

## 注册协议

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@movk/maplibre'],
  maplibre: {
    protocols: { cog: true }
  }
})
```

```ts [main.ts（Vue + Vite）]
import { registerCogProtocol } from '@movk/maplibre/utils/cog'

registerCogProtocol()
```

## 用法

```vue [CogExample.vue]
<script setup lang="ts">
withDefaults(defineProps<{ opacity?: number }>(), {
  opacity: 1
})
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MaplibreMap :options="{ style: 'https://tiles.openfreemap.org/styles/positron', center: [1.83369, 41.5937], zoom: 14 }">
      <!-- COG 须为 EPSG:3857；tileSize 保持 256 与协议输出一致 -->
      <MaplibreRasterLayer url="cog://https://labs.geomatico.es/maplibre-cog-protocol/data/image.tif" :opacity="opacity" />
    </MaplibreMap>
  </div>
</template>
```

> [!TIP]
> 
> 单波段数据可在地址后追加色带参数（如 
> 
> #color:BrewerSpectral9,1700,2900,c
> 
> ），语法见 maplibre-cog-protocol 文档。

## Changelog

See commit history for [src/runtime/utils/cOG.ts](https://github.com/mhaibaraai/movk-maplibre/commits/main/src/runtime/utils/cOG.ts).


## Sitemap

See the full [sitemap](https://maplibre.mhaibaraai.cn/sitemap.md) for all pages.