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迁移指南

LngLatBounds

定义于: src/geo/lng_lat_bounds.ts

LngLatBounds对象表示地理边界框,由西南角和东北角的经纬度坐标定义;

示例

let sw = new LngLat(-73.9876, 40.7661);
let ne = new LngLat(-73.9397, 40.8002);
let llb = new LngLatBounds(sw, ne);

构造函数

构造函数

new LngLatBounds(sw?: LngLatLike, ne?: LngLatLike): LngLatBounds

定义于: src/geo/lng_lat_bounds.ts:48

参数

参数类型描述
swLngLatLike边界框的西南角
neLngLatLike边界框的东北角

返回

LngLatBounds

方法

adjustAntiMeridian()

adjustAntiMeridian(): [number, number, number, number]

定义于: src/geo/lng_lat_bounds.ts:280

为那些穿过反子午线(即日期变更线,经度为±180度)的边界计算调整后的经纬度数组;

返回

[number, number, number, number]

如果边界跨越反子午线,则返回调整后的[west, south, east, north]数组;如果未跨越,则返回未调整的数组;

示例

let bounds = new LngLatBounds([175.813127, -20.157768], [-170.813127, -15.449124]);
bounds.adjustAntiMeridian(); // = [175.813127, -20.157768, 181.659097, -15.449124]
// 其中181.659097是-170.813127转换至180以东的表示法
// 因此adjustedBounds将是: [[175.813127, -20.157768], [181.659097, -15.449124]]

contains()

contains(lnglat: LngLatLike): boolean

定义于: src/geo/lng_lat_bounds.ts:277

检查指定点是否在边界框内;

参数

参数类型描述
lnglatLngLatLike要检查的地理点

返回

boolean

如果点在边界框内则返回true;

示例

let llb = new LngLatBounds(
  new LngLat(-73.9876, 40.7661),
  new LngLat(-73.9397, 40.8002)
);

let ll = new LngLat(-73.9567, 40.7789);

console.log(llb.contains(ll)); // = true

extend()

extend(obj: LngLatLike | LngLatBoundsLike): this

定义于: src/geo/lng_lat_bounds.ts:105

扩展边界框以包含给定的LngLatLike或LngLatBoundsLike对象;

参数

参数类型描述
objLngLatLike | LngLatBoundsLike要扩展包含的对象

返回

this


getCenter()

getCenter(): LngLat

定义于: src/geo/lng_lat_bounds.ts:161

返回边界框角落之间等距的地理坐标;

返回

LngLat

边界框的中心点;

示例

let llb = new LngLatBounds([-73.9876, 40.7661], [-73.9397, 40.8002]);
llb.getCenter(); // = LngLat {lng: -73.96365, lat: 40.78315}

getEast()

getEast(): number

定义于: src/geo/lng_lat_bounds.ts:212

返回边界框的东边缘;

返回

number

边界框的东边缘;


getNorth()

getNorth(): number

定义于: src/geo/lng_lat_bounds.ts:219

返回边界框的北边缘;

返回

number

边界框的北边缘;


getNorthEast()

getNorthEast(): LngLat

定义于: src/geo/lng_lat_bounds.ts:177

返回边界框的东北角;

返回

LngLat

边界框的东北角;


getNorthWest()

getNorthWest(): LngLat

定义于: src/geo/lng_lat_bounds.ts:184

返回边界框的西北角;

返回

LngLat

边界框的西北角;


getSouth()

getSouth(): number

定义于: src/geo/lng_lat_bounds.ts:205

返回边界框的南边缘;

返回

number

边界框的南边缘;


getSouthEast()

getSouthEast(): LngLat

定义于: src/geo/lng_lat_bounds.ts:191

返回边界框的东南角;

返回

LngLat

边界框的东南角;


getSouthWest()

getSouthWest(): LngLat

定义于: src/geo/lng_lat_bounds.ts:170

返回边界框的西南角;

返回

LngLat

边界框的西南角;


getWest()

getWest(): number

定义于: src/geo/lng_lat_bounds.ts:198

返回边界框的西边缘;

返回

number

边界框的西边缘;


isEmpty()

isEmpty(): boolean

定义于: src/geo/lng_lat_bounds.ts:256

检查边界框是否为空/null类型边界;

返回

boolean

如果边界已定义则返回true,否则返回false;


setNorthEast()

setNorthEast(ne: LngLatLike): this

定义于: src/geo/lng_lat_bounds.ts:85

设置边界框的东北角;

参数

参数类型描述
neLngLatLike描述边界框东北角的LngLatLike对象

返回

this


setSouthWest()

setSouthWest(sw: LngLatLike): this

定义于: src/geo/lng_lat_bounds.ts:95

设置边界框的西南角;

参数

参数类型描述
swLngLatLike描述边界框西南角的LngLatLike对象

返回

this


toArray()

toArray(): [number, number][]

定义于: src/geo/lng_lat_bounds.ts:232

以数组形式返回边界框;

返回

[number, number][]

以数组形式表示的边界框,由边界框的西南角和东北角坐标组成的数字数组;

示例

let llb = new LngLatBounds([-73.9876, 40.7661], [-73.9397, 40.8002]);
llb.toArray(); // = [[-73.9876, 40.7661], [-73.9397, 40.8002]]

toString()

toString(): string

定义于: src/geo/lng_lat_bounds.ts:247

以字符串形式返回边界框;

返回

string

以'LngLatBounds(LngLat(lng, lat), LngLat(lng, lat))'格式的字符串表示的边界框;

示例

let llb = new LngLatBounds([-73.9876, 40.7661], [-73.9397, 40.8002]);
llb.toString(); // = "LngLatBounds(LngLat(-73.9876, 40.7661), LngLat(-73.9397, 40.8002))"

convert()

static convert(input: LngLatBoundsLike): LngLatBounds

定义于: src/geo/lng_lat_bounds.ts:304

将数组转换为LngLatBounds对象;

如果传入LngLatBounds对象,函数将原样返回它;

在内部,该函数调用LngLat#convert将数组转换为LngLat值;

参数

参数类型描述
inputLngLatBoundsLike要转换的两个坐标组成的数组,或要返回的LngLatBounds对象

返回

LngLatBounds

如果发生转换,则返回新的LngLatBounds对象,否则返回原始的LngLatBounds对象;

示例

let arr = [[-73.9876, 40.7661], [-73.9397, 40.8002]];
let llb = LngLatBounds.convert(arr); // = LngLatBounds {_sw: LngLat {lng: -73.9876, lat: 40.7661}, _ne: LngLat {lng: -73.9397, lat: 40.8002}}

fromLngLat()

static fromLngLat(center: LngLat, radius: number = 0): LngLatBounds

定义于: src/geo/lng_lat_bounds.ts:322

返回一个由给定坐标扩展指定radius后的LngLatBounds;返回的LngLatBounds完全包含radius;

参数

参数类型默认值描述
centerLngLatundefined新边界的中心坐标
radiusnumber0从坐标扩展边界的距离(以米为单位)

返回

LngLatBounds

表示坐标扩展radius后的新LngLatBounds对象;

示例

let center = new LngLat(-73.9749, 40.7736);
LngLatBounds.fromLngLat(100).toArray(); // = [[-73.97501862141328, 40.77351016847229], [-73.97478137858673, 40.77368983152771]]
Prev
LngLat
Next
LogoControl