首页 / MapLibre / 使用示例
基础地图
一张可拖动、可旋转、可倾斜的矢量地图,带缩放按钮与比例尺, 底图使用 MapLibre 官方 demo 样式,不需要 Key。
源码与运行效果
说明
右侧的导航控件带指南针,拖动指南针可以旋转地图,点击它复位朝北;
左下角比例尺随缩放与纬度更新读数。顶部三个数值在
moveend 时刷新,不用 move,避免拖拽期间频繁写 DOM。
| 配置 | 取值 | 说明 |
|---|---|---|
style | demotiles | 国界与海岸线,数据到 6 级 |
center | [104.2, 35.5] | 中国中部,经度在前 |
zoom | 3 | 能看到完整的国界轮廓 |
attributionControl | 对象 | 紧凑模式,并补充 demo 样式来源 |
拖动时指针按住画布,右键拖动改变俯仰与方向,滚轮缩放。
这些交互是默认开启的,不需要额外配置;需要关闭时给
interactive: false 或单独关闭某项。
demo 样式只覆盖到 6 级,放大到城市级别不会出现街道。
换成生产底图时只改 style 一处,其余代码不用动。