Map

定义于: src/ui/map.ts:319

Map类表示页面上的地图；它公开用于以编程方式更改地图的方法和属性，并在用户与地图交互时触发事件；

您需要创建一个包含Map选项的HTML元素并使用构造函数创建Map实例；

示例

// 在ID为'map'的容器中创建一个地图
const map = new maplibregl.Map({
    container: 'map',
    center: [-122.420679, 37.772537],
    zoom: 13,
    style: style_object,
    hash: true,
    transformRequest: (url, resourceType) => {
        if (resourceType === 'Source' && url.startsWith('http://myHost')) {
            return {
                url: url.replace('http', 'https'),
                headers: { 'my-custom-header': true },
                credentials: 'include'  // 包括凭据
            }
        }
    }
});

参考

• 重新使用地图
• 在地图上显示建筑物
• 使用叠加图层显示径向渐变
• 在线性渐变中添加图层

访问器

repaint

定义于: src/ui/map.ts:2633

指示渲染循环是否在重绘当前图元；只读属性；

返回

boolean: 如果地图正在重绘，则为true；

showCollisionBoxes

定义于: src/ui/map.ts:4191

获取或设置showCollisionBoxes的值，表示是否在地图上渲染所有碰撞盒和符号边界框； 此属性的默认值为false；仅用于调试和可视化目的；

返回

boolean: true表示正在渲染碰撞框；

showOverdrawInspector

定义于: src/ui/map.ts:4248

获取或设置showOverdrawInspector的值，表示是否用特殊颜色渲染所有绘制的像素，以显示每个像素的过度绘制次数； 此属性的默认值为false；仅用于调试和可视化目的；

返回

boolean: true表示显示过度绘制检查器；

showPadding

定义于: src/ui/map.ts:4220

获取或设置showPadding的值，表示是否在地图上渲染当前配置的内边距； 此属性的默认值为false；仅用于调试和可视化目的；

返回

boolean: true表示正在渲染内边距；

showTileBoundaries

定义于: src/ui/map.ts:4162

获取或设置showTileBoundaries的值，表示是否在地图上渲染瓦片边界； 此属性的默认值为false；仅用于调试目的；

返回

boolean: true表示正在渲染瓦片边界；

version

定义于: src/ui/map.ts:4264

获取MapLibre GL JS版本号；

maplibregl.version

事件

Map实例是Evented类的实例，并且通过以下方法管理事件监听器：

off()

off(type: string, listener: Listener): Map

定义于: src/ui/map.ts:521

移除先前注册的事件监听器；

参数

返回

Map

继承自

Evented.off

on()

on(type: string, listener: Listener): Subscription

定义于: src/ui/map.ts:521

添加事件监听器；事件类型参见MapEvent和MapLayerEventType；

参数

返回

Subscription

继承自

Evented.on

once()

once(type: string, listener?: Listener): Promise<any> | Map

定义于: src/ui/map.ts:521

添加一个只会被调用一次的监听器到指定事件类型；

监听器注册后，事件第一次触发时将被调用；

参数

返回

Promise<any> | Map

如果未提供监听器，则返回this或一个promise

继承自

Evented.once

方法

addControl()

addControl(control: IControl, position?: ControlPosition): Map

定义于: src/ui/map.ts:2734

将控件添加到地图；

参数

返回

Map

this

示例

// 添加导航控件
map.addControl(new maplibregl.NavigationControl());

// 在指定位置添加自定义控件
class HelloWorldControl {
    onAdd(map) {
        this._map = map;
        this._container = document.createElement('div');
        this._container.className = 'maplibregl-ctrl';
        this._container.textContent = 'Hello, world';
        return this._container;
    }

    onRemove() {
        this._container.parentNode.removeChild(this._container);
        this._map = undefined;
    }
}

map.addControl(new HelloWorldControl(), 'top-left');

addImage()

addImage(id: string, image: ImageBitmap | HTMLImageElement | ImageData | StyleImageInterface | { data: Uint8Array<ArrayBufferLike> | Uint8ClampedArray<ArrayBufferLike>; height: number; width: number; }, options?: { content?: [number, number, number, number]; pixelRatio?: number; sdf?: boolean; stretchX?: Array<[number, number]>; stretchY?: Array<[number, number]>; }): this

定义于: src/ui/map.ts:2255

将图像添加到地图的样式中；可以使用图像的ID和icon-image、background-pattern、fill-pattern或line-pattern属性在地图上显示此图像；

如果图像参数无效，将触发ErrorEvent；

参数

返回

this

示例

// 添加图像到地图
map.addImage('cat', img);  // img是HTML图像元素或ImageBitmap

// 将一个可拉伸的图像添加到地图
map.addImage('pattern', img, {
    pixelRatio: 2,
    stretchX: [[0, 5], [15, 20]], // 水平可拉伸区域
    stretchY: [[0, 5], [15, 20]], // 垂直可拉伸区域
    content: [5, 5, 15, 15] // 内容填充区域
});

getCenter()

getCenter(): LngLat

定义于: src/ui/map.ts:1203

返回地图中心点的地理坐标；

返回

LngLat

地图中心点；

示例

const center = map.getCenter();
center.lng; // 等于经度值
center.lat; // 等于纬度值

getZoom()

getZoom(): number

定义于: src/ui/map.ts:1225

返回地图的当前缩放级别；

返回

number

当前缩放级别；

示例

map.getZoom();

setStyle()

setStyle(style: StyleSpecification | string, options?: StyleSetterOptions): Map

定义于: src/ui/map.ts:1693

设置地图的样式；这个方法更新地图的样式，并重新渲染地图；

参数

返回

Map

this

示例

// 使用URL设置地图样式
map.setStyle('https://demotiles.maplibre.org/style.json');

// 使用样式对象设置地图样式
map.setStyle({
    version: 8,
    sources: {
        osm: {
            type: 'raster',
            tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
            tileSize: 256,
            attribution: '© OpenStreetMap Contributors',
            maxzoom: 19
        }
    },
    layers: [
        {
            id: 'osm',
            type: 'raster',
            source: 'osm'
        }
    ]
});