经纬志
首页 / MapLibre / 使用示例

基础地图

一张可拖动、可旋转、可倾斜的矢量地图,带缩放按钮与比例尺, 底图使用 MapLibre 官方 demo 样式,不需要 Key。

MapLibre GL JS 4.x · 更新 2026-10-27
源码与运行效果
运行效果

说明

右侧的导航控件带指南针,拖动指南针可以旋转地图,点击它复位朝北; 左下角比例尺随缩放与纬度更新读数。顶部三个数值在 moveend 时刷新,不用 move,避免拖拽期间频繁写 DOM。

配置取值说明
styledemotiles国界与海岸线,数据到 6 级
center[104.2, 35.5]中国中部,经度在前
zoom3能看到完整的国界轮廓
attributionControl对象紧凑模式,并补充 demo 样式来源

拖动时指针按住画布,右键拖动改变俯仰与方向,滚轮缩放。 这些交互是默认开启的,不需要额外配置;需要关闭时给 interactive: false 或单独关闭某项。

demo 样式只覆盖到 6 级,放大到城市级别不会出现街道。 换成生产底图时只改 style 一处,其余代码不用动。