---
title: "MaplibreGraticuleLayer"
description: "Latitude/longitude graticule with zoom-adaptive steps, recomputed per viewport and curved on the globe."
canonical_url: "https://maplibre.mhaibaraai.cn/en/docs/layers/graticule"
---
# MaplibreGraticuleLayer

> Latitude/longitude graticule with zoom-adaptive steps, recomputed per viewport and curved on the globe.

## Introduction

`MaplibreGraticuleLayer` only generates lines inside the viewport expanded by one step, and recomputes them when the view leaves that range or the step changes. Lines are densified so they curve on the globe. When `step` is omitted it is chosen from the zoom level; `labels` shows degrees along the viewport edges, or along the map center in world view.

## Usage

```vue [GraticuleLayerExample.vue]
<script setup lang="ts">
withDefaults(defineProps<{ color?: string, labels?: boolean }>(), {
  color: '#2563eb',
  labels: true
})
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MaplibreMap :options="{ style: 'https://tiles.openfreemap.org/styles/liberty', center: [105, 30], zoom: 1.5 }">
      <MaplibreProjection type="globe" />
      <MaplibreGraticuleLayer :color="color" :labels="labels" />
    </MaplibreMap>
  </div>
</template>
```

## API

### Props

```ts
/**
 * Props for the MaplibreGraticuleLayer component
 */
interface MaplibreGraticuleLayerProps {
  /**
   * 固定步长（度）；省略时按缩放级别自动选择
   */
  step?: number | undefined;
  /**
   * 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建
   */
  layerId?: string | undefined;
  /**
   * 线条与标注颜色
   * @default '#888'
   */
  color?: string | undefined;
  /**
   * 线宽（像素）
   * @default 0.5
   */
  width?: number | undefined;
  /**
   * 是否在视口边缘标注度数
   * @default true
   */
  labels?: boolean | undefined;
  /**
   * 插入到该图层之前
   */
  beforeId?: string | undefined;
}
```

## Changelog

See commit history for [src/runtime/components/layers/GraticuleLayer.vue](https://github.com/mhaibaraai/movk-maplibre/commits/main/src/runtime/components/layers/GraticuleLayer.vue).


## Sitemap

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