【Mapbox GL JS 入门】Map 对象及其属性

简介

源代码：src/ui/map.js
 
Map 对象代表页面的地图，暴露了一些方法和属性供编程修改地图，以及一些交互事件。可以指定容器新建Map，Mapbox会初始化页面上的地图并返回Map 对象。

new Map class(options: Object)
1

 

Parameters 参数

 

Example

const map = new mapboxgl.Map({
    container: 'map', // container ID
    center: [-122.420679, 37.772537], // starting position [lng, lat]
    zoom: 13, // starting zoom
    style: 'mapbox://styles/mapbox/streets-v11', // style URL or style object
    hash: true, // sync `center`, `zoom`, `pitch`, and `bearing` with URL
    // Use `transformRequest` to modify requests that begin with `http://myHost`.
    transformRequest: (url, resourceType) => {
        if (resourceType === 'Source' && url.startsWith('http://myHost')) {
            return {
                url: url.replace('http', 'https'),
                headers: {'my-custom-header': true},
                credentials: 'include'  // Include cookies for cross-origin requests
            };
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 

Instance members

Map constraints 地图约束

resize(eventData)

根据其容器元素的尺寸调整贴图的大小。
检查地图容器大小是否已更改，如果已更改则更新地图。必须在以编程方式调整地图容器的大小后，或者在最初使用CSS隐藏后显示映射时，调用此方法。

// Resize the map when the map container is shown
// after being initially hidden with CSS.
const mapDiv = document.getElementById('map');
if (mapDiv.style.visibility === true) map.resize();
1
2
3
4

getBounds()

获取地图的地理界限。
当方向角或俯仰角非零时，可见区域不是轴对齐的矩形，结果是包含可见区域的最小边界。如果在地图上设置了padding，则返回的边界是inset的。globe投影不支持此功能。

const bounds = map.getBounds(); 
1

getMaxBounds()/setMaxBounds(bounds)

获取/设置地图的最大地理界限。
平移和缩放操作被限制在这些范围内。如果执行平移或缩放将显示这些边界之外的区域，则地图将显示尽可能接近操作请求的位置和缩放级别，同时仍保持在边界内。

const maxBounds = map.getMaxBounds();
// Define bounds that conform to the `LngLatBoundsLike` object.
const bounds = [
    [-74.04728, 40.68392], // [west, south]
    [-73.91058, 40.87764]  // [east, north]
];
// Set the map's max bounds.
map.setMaxBounds(bounds);
1
2
3
4
5
6
7
8

setMinZoom(minZoom)/getMinZoom()

设置/获取地图的最小允许缩放级别。 (-2 - 24，默认：-2)
如果地图的当前缩放级别低于新的最小值，则地图将缩放到新的最小值。其他因素（如地图高度）可能会限制缩放。

map.setMinZoom(12.25);
const minZoom = map.getMinZoom();
1
2

setMaxZoom(maxZoom)/getMaxZoom()

设置/获取地图的最大允许缩放级别。 (默认：22)
如果地图的当前缩放级别高于新的最大值，则地图将缩放到新的最大值。

map.setMaxZoom(18.75);
const maxZoom = map.getMaxZoom();
1
2

setMinPitch(minPitch)/getMinPitch()

设置/获取地图的最小俯仰角度。 (0 - 85，默认：0)
如果地图的当前俯仰角度低于新的最小值，则地图将俯仰到新的最小值。

map.setMinPitch(5);
const minPitch = map.getMinPitch();
1
2

setMaxPitch(maxPitch)/getMaxPitch()

设置/获取地图的最大俯仰角度。 (0 - 85，默认：85)
如果地图的当前俯仰角度高于新的最大值，则地图将俯仰到新的最大值。

map.setMaxPitch(70);
const maxPitch = map.getMaxPitch();
1
2

setRenderWorldCopies(renderWorldCopies)/getRenderWorldCopies()

-180/180度以外的部分是否渲染世界副本

const worldCopiesRendered = map.getRenderWorldCopies();
map.setRenderWorldCopies(true);
1
2