Maplibre GL JS 中文文档Maplibre GL JS 中文文档
介绍
插件
样式规范
API
案例
指南
介绍
插件
样式规范
API
案例
指南
  • 介绍
  • 插件
  • 样式规范
    • 弃用功能
    • 表达式
    • 字形
    • 图层
    • 光照
    • 投影
    • 根属性
    • 天空
    • 数据源
    • 精灵图
    • 状态
    • 地形
    • 过渡
    • 类型
  • API
    • media

      • 为 MapLibre GL JS 做贡献
    • Classes

      • AJAXError
      • Actor
      • AlphaImage
      • AttributionControl
      • BoxZoomHandler
      • CanonicalTileID
      • CanvasSource
      • CircleStyleLayer
      • ClickZoomHandler
      • CooperativeGesturesHandler
      • DEMData
      • Dispatcher
      • DoubleClickZoomHandler
      • DragPanHandler
      • DragRotateHandler
      • EdgeInsets
      • ErrorEvent
      • Event
      • Evented
      • FeatureIndex
      • FullscreenControl
      • GeoJSONFeature
      • GeoJSONSource
      • GlobeControl
      • Hash
      • HeatmapStyleLayer
      • ImageAtlas
      • ImageManager
      • ImageSource
      • KeyboardHandler
      • Layout<Props>
      • LngLat
      • LngLatBounds
      • LogoControl
      • Map
      • MapMouseEvent
      • MapTouchEvent
      • MapWheelEvent
      • Marker
      • MercatorCoordinate
      • NavigationControl
      • OverscaledTileID
      • Popup
      • RGBAImage
      • RasterDEMTileSource
      • RasterTileSource
      • ScaleControl
      • ScrollZoomHandler
      • Style
      • abstract StyleLayer
      • SubdivisionGranularityExpression
      • SubdivisionGranularitySetting
      • TapDragZoomHandler
      • TapZoomHandler
      • TerrainControl
      • ThrottledInvoker
      • Tile
      • TouchPanHandler
      • 抽象 TwoFingersTouchHandler
      • TwoFingersTouchPitchHandler
      • TwoFingersTouchRotateHandler
      • TwoFingersTouchZoomHandler
      • TwoFingersTouchZoomRotateHandler
      • VectorTileSource
      • VideoSource
      • WorkerPool
    • Enumerations

      • MessageType
      • ResourceType
      • TextFit
    • Functions

      • addProtocol()
      • addSourceType()
      • clearPrewarmedResources()
      • createTileMesh()
      • getMaxParallelImageRequests()
      • getRTLTextPluginStatus()
      • getVersion()
      • getWorkerCount()
      • getWorkerUrl()
      • importScriptInWorkers()
      • prewarm()
      • removeProtocol()
      • setMaxParallelImageRequests()
      • setWorkerCount()
      • setWorkerUrl()
    • Interfaces

      • ActorTarget
      • AttributeBinder
      • Bucket
      • CustomLayerInterface
      • Handler
      • IActor
      • IControl
      • MousePanHandler
      • MousePitchHandler
      • MouseRollHandler
      • MouseRotateHandler
      • Projection
      • Source
      • StyleImageInterface
      • Subscription
    • Type aliases

      • ActorMessage<T>
      • AddLayerObject
      • AddProtocolAction
      • Alignment
      • AnimationOptions
      • AroundCenterOptions
      • AttributionControlOptions
      • CalculateTileZoomFunction
      • CameraForBoundsOptions
      • CameraOptions
      • CameraUpdateTransformFunction()
      • CanvasSourceSpecification
      • CenterZoomBearing
      • CircleGranularity
      • ClusterIDAndSource
      • Complete<T>
      • Config
      • ControlPosition
      • Coordinates
      • CreateTileMeshOptions
      • CrossFaded<T>
      • CustomRenderMethod()
      • CustomRenderMethodInput
      • DEMEncoding
      • DashEntry
      • DistributiveKeys<T>
      • DistributiveOmit<T, K>
      • DragPanOptions
      • DragRotateHandlerOptions
      • EaseToOptions
      • ExpiryData
      • FeatureIdentifier
      • FitBoundsOptions
      • FlyToOptions
      • FullscreenControlOptions
      • GeoJSONFeatureDiff
      • GeoJSONFeatureId
      • GeoJSONSourceDiff
      • GeoJSONSourceOptions
      • GeoJSONWorkerOptions
      • GeoJSONWorkerSourceLoadDataResult
      • GeolocateControlOptions
      • GestureOptions
      • GetClusterLeavesParams
      • GetGlyphsParameters
      • GetGlyphsResponse
      • GetImagesParameters
      • GetImagesResponse
      • GetResourceResponse<T>
      • GlyphPosition
      • GlyphMetrics
      • GridKey
      • HandlerResult
      • IndicesType
      • JumpToOptions
      • Listener()
      • LngLatBoundsLike
      • LngLatLike
      • LoadGeoJSONParameters
      • LogoControlOptions
      • MapContextEvent
      • MapDataEvent
      • MapEventType
      • MapGeoJSONFeature
      • MapLayerEventType
      • MapLayerMouseEvent
      • MapLayerTouchEvent
      • MapLibreEvent
      • MapLibreZoomEvent
      • MapOptions
      • MapProjectionEvent
      • MapSourceDataType
      • MapSourceDataEvent
      • MapStyleDataEvent
      • MapStyleImageMissingEvent
      • MapTerrainEvent
      • MarkerOptions
      • MessageData
      • NavigationControlOptions
      • /api/type-aliases/Offset.html
      • OverlapMode
      • PaddingOptions
      • PluginState
      • PointLike
      • PointProjection
      • PopupOptions
      • PositionAnchor
      • PossiblyEvaluatedValue<T>
      • ProjectionData
      • ProjectionDataParams
      • QueryRenderedFeaturesOptions
      • QuerySourceFeatureOptions
      • RTLPluginStatus
      • Rect
      • RemoveSourceParams
      • RequestParameters
      • RequestResponseMessageMap
      • RequestTransformFunction()
      • RequireAtLeastOne<T>
      • ScaleControlOptions
      • Serialized
      • SerializedObject<S>
      • SerializedStructArray
      • SetClusterOptions
      • SourceClass()
      • SpriteOnDemandStyleImage
      • StyleGlyph
      • StyleImage
      • StyleImageData
      • StyleImageMetadata
      • StyleOptions
      • StyleSetterOptions
      • StyleSwapOptions
      • SymbolQuad
      • TileMesh
      • TileParameters
      • TileState
      • TransformStyleFunction()
      • Unit
      • UpdateImageOptions
      • UpdateLayersParamaeters
      • WorkerDEMTileParameters
      • WorkerTileParameters
      • WorkerTileResult
  • 案例
    • 3D建筑显示
    • 3D室内地图多边形挤出
    • 3D地形
    • 使用babylon.js添加3D模型
    • 使用three.js添加带阴影的3D模型
    • 在地形上使用three.js添加3D模型
    • 使用three.js添加3D模型
    • 添加默认标记
    • 添加云优化地理TIFF (COG)
    • 使用REST API添加DeckGL图层
    • 添加动画图像
    • 添加生成的图像
    • 动态生成并添加缺失图标到地图
    • 向地图添加可拉伸图片
    • 向地图添加图标
    • 动画线条
    • 绕点相机动画
    • 图像序列动画
    • 标记动画
    • 点动画
    • 沿路径点动画
    • 符号跟随鼠标动画
    • 更改版权信息位置
    • 自定义相机动画
    • 添加Canvas数据源
    • 使地图在点击符号时居中
    • 设置地面以上的中心点
    • 根据缩放级别更改建筑物颜色
    • 更改标签大小写
    • 检查是否支持WebGL
    • 使用自定义属性显示HTML集群
    • 创建和样式化集群
    • 使用按钮更改图层颜色
    • 添加等高线
    • 合作手势
    • 使用自定义标记图标
    • 添加自定义样式图层
    • 使用数据驱动属性设置线条样式
    • 禁用地图旋转
    • 禁用滚动缩放
    • 显示和样式丰富文本标签
    • 创建可拖动标记
    • 创建可拖动点
    • 绘制一个圆形
    • 使用备用图像
    • 使用addProtocol转换特性属性
    • 向多边形添加图案
    • 通过文本输入过滤符号
    • 通过切换列表过滤符号
    • 在图层内过滤
    • 将地图适配到边界框
    • 缓慢飞行到位置
    • 飞行到位置
    • 查看全屏地图
    • 使用游戏控制导航地图
    • 在标签下方添加新图层
    • 添加GeoJSON线条
    • 添加自定义标记
    • 添加GeoJSON多边形
    • 在地球仪上加载3D模型
    • 地球仪大气层
    • 简单自定义地球仪
    • 自定义瓦片地球仪
    • 在地球仪上显示填充挤出层
    • 使用矢量地图显示地球仪
    • 地球仪上缩放和行星大小的关系
    • 哈希路由
    • 地球仪上带地形高程的热力图
    • 创建热力图图层
    • 添加多方向山体阴影图层
    • 添加山体阴影图层
    • 创建悬停效果
    • 显示带地形高程的混合卫星地图
    • 显示非交互式地图
    • 跳转到一系列位置
    • 切换地图语言
    • 显示跨越180度子午线的线条
    • 使用表达式创建渐变线条
    • 添加实时数据
    • 实时更新地图要素
    • 查看本地GeoJSON文件(实验性)
    • 查看本地GeoJSON文件
    • 使用本地生成的表意文字
    • 定位用户位置
    • 细节层次控制
    • 添加栅格瓦片源
    • 使用Mapbox GL Draw绘制多边形
    • 支持从右到左文本
    • 使用 Terra-Draw 绘制几何图形
    • 测量距离
    • 获取鼠标指针坐标
    • 从单个GeoJSON源添加多个几何图形
    • 显示地图导航控件
    • 使用内边距偏移消失点
    • PMTiles 源和协议
    • 点击多边形显示信息
    • 点击显示弹出窗口
    • 悬停显示弹出窗口
    • 显示弹出窗口
    • 获取鼠标指针下的要素
    • 渲染世界副本
    • 限制地图平移到某个区域
    • 显示卫星地图
    • 基于滚动位置飞行到特定位置
    • 设置俯仰角和方位角
    • 为标记添加弹出窗口
    • 显示一个地图
    • 天空、雾和地形
    • 同步多个地图的移动
    • 创建时间轴滑块
    • 切换deck.gl图层
    • 切换交互功能
    • 可变标签放置
    • 可变偏移标签放置
    • 添加矢量瓦片源
    • 在地图上播放视频
    • 可视化人口密度
    • 添加WMS服务
    • 缩放至线要素
  • 指南
    • 优化MapLibre性能: 大型GeoJSON数据集的技巧
    • Leaflet迁移指南
    • Mapbox迁移指南
    • OpenLayers迁移指南

类型

MapLibre样式包含各种类型的值,最常见的是作为图层样式属性的值;

Color

color类型是sRGB颜色空间中的颜色。颜色是各种允许格式的JSON字符串:HTML样式的十六进制值、RGB、RGBA、HSL和HSLA。预定义的HTML颜色名称,如yellow和blue,也是允许的;

{
    "line-color": "#ff0",
    "line-color": "#ffff00",
    "line-color": "rgb(255, 255, 0)",
    "line-color": "rgba(255, 255, 0, 1)",
    "line-color": "hsl(100, 50%, 50%)",
    "line-color": "hsla(100, 50%, 50%, 1)",
    "line-color": "yellow"
}

Formatted

formatted类型是一个带有单独格式化选项注释的各部分的字符串;

{
    "text-field": ["format",
        "foo", { "font-scale": 1.2 },
        "bar", { "font-scale": 0.8 }
    ]
}

ResolvedImage

resolvedImage类型是在图层中使用的图像(例如图标或图案)。image表达式运算符的输入会根据当前地图样式检查它是否可用于渲染,结果以resolvedImage类型返回。这种方法允许开发者定义一系列图像,如果之前的图像未找到,地图可以回退到这些图像,这通过仅提供icon-image的普通字符串是无法实现的(因为多个字符串不能提供给icon-image,并且多个图像不能在字符串中定义);

{
    "icon-image": ["coalesce", ["image", "myImage"], ["image", "fallbackImage"]]
}

String

字符串是文本。在MapLibre样式中,字符串使用引号;

{
    "source": "mySource"
}

Boolean

布尔值是表示真或假的值。在MapLibre样式中,布尔值是不带引号的literal true或false;

{
    "fill-antialias": true
}

Number

数字是数值。在MapLibre样式中,数字是不带引号的浮点值或整数;

{
    "text-size": 24
}

Array

数组是值的有序列表。在MapLibre样式中,数组元素通常必须是相同类型的。例外情况是围绕表达式的括号;

{
    "line-dasharray": [2, 4]
}

Point

点是可以以数组形式表示的位置;

{ 
    // 经度, 纬度
    "point": [-76.0, 42.0]
}

Enum

枚举是一组预定义的常量中的一个,表示为未加引号的字符串或字符串数组;

{
    "text-transform": "uppercase"
}

Padding

填充是描述顶部、右侧、底部和左侧四个方向填充量的数字数组。它可以是两个值的简写数组,其中第一个值表示垂直填充(顶部/底部),第二个值表示水平填充(左/右);

{
    "icon-text-fit-padding": [5, 10]
}
{
    "icon-text-fit-padding": [5, 10, 5, 10]
}

ProjectionDefinition

投影定义是对地图的地理投影的定义。它可以是字符串(预设投影)、投影转换状态或插值表达式;

预设投影

可以使用的预设投影:

投影描述
albers基于圆锥投影的投影,主要用于绘制美国地图
equalEarth等面积伪圆柱投影,保持区域面积的准确性
equirectangular等距长方形投影,简单的笛卡尔投影
lambertConformalConic保角圆锥投影
mercator默认的墨卡托投影
naturalEarth伪圆柱投影,设计用于小比例尺世界地图
winkelTripel复合伪圆柱投影,用于世界地图
globe球形地球投影
vertical-perspective垂直透视投影,模拟从太空观看地球的视角

投影转换状态

投影转换状态是一个数组,形式为[from投影, to投影, transition]。其中from投影和to投影是预设投影之一,transition是从0到1的插值值,0表示在from投影中,1表示在to投影中;

如果from和to相同,则transition将没有效果;

示例

在离散缩放级别之间切换投影

使用相机表达式,在特定缩放级别上离散地在投影之间切换;

type: ["step", ["zoom"],
    "vertical-perspective",
    11, "mercator"
]


缩放级别10.9的输出: "vertical-perspective"
缩放级别11.0的输出: "vertical-perspective"
缩放级别11.1的输出: "mercator"

基于缩放级别在不同投影之间动画

使用相机表达式,基于缩放级别在投影之间动画,使用插值函数。下面的例子将产生一个自适应地球,在缩放级别10到12之间从vertical-perspective插值到mercator;

type: ["interpolate", ["linear"], ["zoom"],
    10,"vertical-perspective",
    12,"mercator"
]


缩放级别9.9的输出:  "vertical-perspective"
缩放级别11的输出:   ["vertical-perspective", "mercator", 0.5]
缩放级别12的输出:   ["vertical-perspective", "mercator", 1]
缩放级别12.1的输出: "mercator"

提供一个projection

type: ["vertical-perspective", "mercator", 0.7]

使用投影预设

还有一些额外的预设,可以产生常用的表达式:

预设完整值描述
globe["interpolate", ["linear"], ["zoom"],10, "vertical-perspective", 12, "mercator"]自适应地球:在缩放级别10和12之间从垂直透视插值到墨卡托投影

numberArray

单个数值,或数值数组;

{
    "hillshade-illumination-direction": 24,
    "hillshade-illumination-direction": [45, 57.3]
}

colorArray

单个颜色值,或颜色值数组;

{
    "hillshade-highlight-color": "#ffff00",
    "hillshade-highlight-color": ["#ffff00", "rgb(255, 255, 0)", "yellow"]
}
Prev
过渡