快速开始

MapLibre GL JS 是一个基于矢量瓦片用 WebGL 渲染交互式地图的 JavaScript 库，地图的渲染遵循 MapLibre 样式规范 。它是从 Mapbox GL JS 项目派生而来的开源项目，遵循 BSD 许可协议。

安装

npm

$ npm i maplibre-gl

pnpm

$ pnpm add maplibre-gl

yarn

$ yarn add maplibre-gl

使用

<div id="map"></div>

import maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'

const map = new maplibregl.Map({
  container: 'map', // 地图容器 id
  style: 'https://www.naivemap.com/demotiles/style.json', // 样式 URL
  center: [104.294538, 35.860092], // 地图初始中心点 [经度, 维度]
  zoom: 2, // 地图初始缩放级别
})

由于地图样式和数据源通常是远程加载的，为了确保正确操作地图，我们需要使用事件来监听地图的加载状态。例如：

map.on('load', () => {
  map.addLayer({
    id: 'terrain-data',
    type: 'line',
    source: {
      type: 'vector',
      url: 'mapbox://mapbox.mapbox-terrain-v2',
    },
    'source-layer': 'contour',
  })
})

CDN

也可以通过 CDN 直接在 HTML 中引入 MapLibre GL JS：

<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link
  href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
  rel="stylesheet"
/>

示例

显示地图

使用 MapLibre GL JS 在 HTML 元素中初始化地图。

在 Stackblitz 中打开

在 Codesandbox 中打开

展开代码

复制代码