MapLibre GL JS 示例概览
MapLibre GL JS提供了丰富的示例，展示如何使用该库创建各种交互式地图功能；以下是按类别组织的示例列表；
3D及地形相关
3D建筑显示
使用挤出效果显示建筑物高度的3D效果；
3D室内地图多边形挤出
使用fill-extrude-height属性创建3D室内地图；
3D地形
超越传统山体阴影，展示真实三维高程；
使用babylon.js添加3D模型
使用自定义样式图层和babylon.js向地图添加3D模型；
使用three.js添加带阴影的3D模型
使用three.js添加带有阴影效果的3D模型；
在地形上使用three.js添加3D模型
使用自定义样式图层和three.js将3D模型添加到带有地形的地图上；
使用three.js添加3D模型
使用自定义样式图层和three.js向地图添加3D模型；
标记和图标
添加默认标记
向地图添加默认标记；
添加COG栅格数据源
添加外部云优化GeoTIFF(COG)作为数据源；
使用REST API创建deck.gl图层
从REST API创建deck.gl叠加图层；
添加动画图标到地图
使用Canvas API在运行时生成并添加动画图标到地图；
添加生成的图标到地图
在运行时生成并添加图标到地图；
生成并添加缺失的图标到地图
在运行时动态生成缺失的图标并添加到地图；
添加可拉伸图像到地图
使用可拉伸图像作为文本背景；
向地图添加图标
从外部URL添加图标到地图，并在符号图层中使用；
动画效果
线条动画
通过每帧更新GeoJSON源来实现线条动画；
绕点相机动画
使相机围绕一个点进行动画；
图像序列动画
使用一系列图像源创建动画；
标记动画
通过每帧更新位置来实现标记位置动画；
点动画
通过每帧更新GeoJSON源来实现点位置动画；
沿路径点动画
使用Turf沿线路平滑地为点设置动画；
跟随鼠标的符号动画
实现符号跟随鼠标移动的动画；
地图控件和界面
更改归属信息默认位置
初始化地图时将归属信息放置在左上角位置；
自定义相机动画
使用AnimationOptions自定义相机动画；
添加画布源
向地图添加画布源；
点击符号居中地图
使用事件和flyTo使点击的符号居中显示；
设置地面上方中心点
设置地面上方的中心点；
基于缩放级别变更建筑颜色
使用插值表达式实现建筑图层的平滑颜色渐变；
更改标签大小写
使用upcase和downcase表达式更改标签大小写；
检查WebGL支持
检查浏览器是否支持WebGL；
聚类和数据可视化
使用自定义属性显示HTML聚类
使用HTML标记和自定义属性表达式扩展聚类功能；
创建和样式化聚类
使用MapLibre GL JS内置函数将点可视化为聚类；
使用按钮更改图层颜色
使用setPaintProperty更改图层的填充颜色；
添加等高线
从栅格高程模型(DEM)数据源添加等高线到地图；
交互和控制
协作手势
启用特定语言的协作手势，了解其在全屏模式下的行为；
使用标记添加自定义图标
向地图添加自定义标记图标；
添加自定义样式图层
使用自定义样式图层渲染自定义WebGL内容；
使用数据驱动属性样式化线条
使用线条颜色的数据表达式创建可视化效果；
禁用地图旋转
防止用户旋转地图；
禁用滚轮缩放
防止滚轮缩放地图；
显示和样式化富文本标签
使用format表达式同时以英语和本地语言显示国家标签；
创建可拖动标记
在地图上拖动标记到新位置，并在显示中填充其坐标；
创建可拖动点
在地图上拖动点到新位置，并在显示中填充其坐标；
绘制圆形
使用Turf.js绘制半径来近似表示位置；
高级特性
使用后备图像
当请求的图像不可用时，使用coalesce表达式显示另一个图像；
使用addProtocol转换要素属性
使用纯JavaScript的addProtocol反转国家名称；
向多边形添加图案
使用fill-pattern从重复图像图案绘制多边形；
使用文本输入过滤符号
通过在文本输入中键入来按图标名称过滤符号；
通过切换列表过滤符号
基于数据中的属性值过滤符号集；
图层内过滤
使用setFilter()基于用户输入过滤图层；
将地图适配到边界框
将地图适配到特定区域，无论地图的像素大小如何；
缓慢飞行到位置
使用flyTo和flyOptions缓慢缩放到位置；
飞行到位置
使用flyTo平滑地在位置之间插值；
查看全屏地图
在当前视图和全屏模式之间切换；
使用游戏式控制导航地图
使用键盘方向键以游戏式控制移动地图；
地理编码和GeoJSON
使用Nominatim地理编码
使用Nominatim和maplibre-gl-geocoder插件进行地理编码；
在标签下方添加新图层
使用addLayer的第二个参数在标签下方添加图层；
添加GeoJSON线
使用addSource添加GeoJSON线到地图，然后使用addLayer的绘制属性样式化它；
绘制GeoJSON点
将GeoJSON集合中的点绘制到地图上；
添加GeoJSON多边形
使用填充图层类型样式化多边形；
地球和全球投影
使用three.js向球体添加3D模型
使用自定义样式图层和three.js向球体添加3D模型；
显示带有大气层的球体
显示带有大气层效果的球体；
在球体上添加简单自定义图层
使用自定义图层在球体上绘制简单WebGL内容；
在球体上添加带图块的自定义图层
使用自定义图层在球体上显示使用自定义WebGL着色器绘制的任意图块；
显示带填充挤出图层的球体
显示带有填充挤出图层的球体；
显示带矢量地图的球体
显示带有矢量地图的球体；
球体上的缩放和行星大小关系
解释球体投影下缩放和行星大小的关系，以及如何在更改地图中心和缩放时考虑这一点；
路由和状态管理
哈希路由
使用哈希路由将视口状态保存在URL中；
热力图和特殊图层
在带地形高程的球体上创建热力图层
在带有地形高程的球体上创建热力图层；
创建热力图层
使用热力图层按位置可视化地震频率；
添加多方向山体阴影图层
添加具有多个光源的山体阴影图层；
添加山体阴影图层
添加简单的山体阴影图层；
创建悬停效果
使用事件和要素状态创建每个要素的悬停效果；
混合和特殊地图类型
显示带地形高程的混合卫星地图
显示带有地形高程的混合卫星地图；
显示非交互式地图
禁用交互功能创建静态地图；
跳转到一系列位置
使用jumpTo函数展示多个位置；
更改地图语言
使用setLayoutProperty动态切换语言；
显示跨越180度子午线的线
使用GeoJSON源绘制跨越180度子午线的线；
使用表达式创建渐变线
使用线条渐变绘制属性和表达式可视化线条起点的距离；
实时数据和本地文件
添加实时数据
使用实时GeoJSON数据流在地图上移动符号；
实时更新要素
通过更新数据实时更改地图上的现有要素；
查看本地GeoJSON(实验性)
使用实验性文件系统访问API查看本地GeoJSON；
查看本地GeoJSON
无需服务器上传查看本地GeoJSON；
使用本地生成的表意文字
设置localIdeographFontFamily覆盖用于显示CJK(中文、日文和韩文)字符的字体；
地理定位和地形
定位用户
使用GeolocateControl地理定位用户并跟踪其在地图上的当前位置；
细节级别控制
修改高俯仰角下细节级别的行为；
添加栅格瓦片源
向地图添加第三方栅格源；
绘图和测量工具
使用mapbox-gl-draw绘制多边形
使用mapbox-gl-draw绘制多边形，并使用Turf.js计算其面积；
添加对从右到左脚本的支持
使用mapbox-gl-rtl-text插件支持阿拉伯语和希伯来语等从右到左的语言；
使用terra-draw绘制几何图形
使用maplibre-gl-terradraw在地图上绘制点、线或多边形形式的几何图形；
测量距离
点击地图上的点创建线条，使用turf.length测量距离；
获取鼠标指针坐标
用像素坐标和经纬度坐标显示悬停位置；
数据源和图层管理
从一个GeoJSON源添加多个几何图形
从同一GeoJSON源添加多边形和圆形图层；
显示地图导航控件
向地图添加缩放和旋转控件；
使用填充偏移消失点
偏移地图的中心或消失点，减少浮动元素显示在地图上时的失真；
PMTiles源和协议
使用PMTiles插件和协议呈现地图；
弹出框和信息显示
点击时显示多边形信息
当用户点击多边形时，显示包含更多信息的弹出框；
点击时显示弹出框
当用户点击符号时，显示包含更多信息的弹出框；
悬停时显示弹出框
当用户悬停在自定义标记上时，显示包含更多信息的弹出框；
显示弹出框
向地图添加弹出框；
获取鼠标指针下的要素
使用queryRenderedFeatures显示悬停地图元素的属性；
地图行为和限制
渲染世界副本
使用setRenderWorldCopies在渲染单个世界和多个世界副本之间切换；
限制地图平移到特定区域
通过设置maxBounds防止地图被平移到不同位置；
显示卫星地图
显示卫星栅格底图；
基于滚动位置飞行到位置
向下滚动故事，地图将飞行到章节位置；
设置俯仰和方位
使用俯仰和方位相机选项初始化地图；
将弹出框附加到标记实例
将弹出框附加到标记并在点击时显示；
显示地图
使用MapLibre GL JS在HTML元素中初始化地图；
天空、雾和地形
允许更改天空、雾和地平线颜色和混合；
多地图和图层切换
同步多个地图的移动
使用sync-move插件同步MapLibre GL JS地图；
创建时间滑块
使用范围滑块可视化地震；
切换deck.gl图层
使用maplibre切换deck.gl图层；
切换交互
启用或禁用地图上的UI处理程序；
标签和文本
可变标签放置
使用text-variable-anchor允许高优先级标签移动位置以保持在地图上；
带偏移的可变标签放置
使用text-variable-anchor-offset允许高优先级标签移动位置以保持在地图上；
数据源类型
添加矢量瓦片源
向地图添加矢量源；
添加视频
在卫星栅格底图上显示视频；
可视化人口密度
使用变量绑定表达式计算和显示人口密度；
添加WMS源
使用addSource的tiles选项添加外部Web地图服务栅格图层；
适配到LineString的边界
获取LineString的边界；