---
title: Map
source: https://vjmap.com/doc/Map.html
---

# Map
**扩展事件**


该`Map`对象代表您页面上的地图。它公开了使您能够以编程方式更改地图的方法和属性，并在用户与其交互时触发事件。

您可以`Map`通过指定 `container`和其他选项来创建。然后初始化页面上的地图并返回您的`Map` 对象。

### Parameters
- `options` **`Object`**
    - `options.container` **( `HTMLElement`| `string`)** 将在其中呈现地图的 HTML 元素，或元素的 string `id`。指定的元素必须没有子元素。
    - `options.minZoom` **`number`**地图的最小缩放级别 (0-24)。（可选，默认`0`）
    - `options.maxZoom` **`number`**地图的最大缩放级别 (0-24)。（可选，默认`22`）
    - `options.minPitch` **`number`**地图的最小倾斜角度 (0-85)。（可选，默认`0`）
    - `options.maxPitch` **`number`**地图的最大倾斜角度（0-85）。（可选，默认`85`）
    - `options.style` **( `Object`| `string`)？**地图的样式。
    - `options.hash` **( `boolean`| `string`)**如果`true`，则地图的位置（缩放、中心纬度、中心经度、方位角和俯仰角）将与页面 URL 的哈希片段同步。例如，`http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60`。可以选择提供附加字符串来指示参数样式的哈希，例如`http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar `，其中 foo 是自定义参数， bar 是与地图哈希不同的任意哈希。（可选，默认`false`）
    - `options.interactive` **`boolean`**如果`false`，则不会将鼠标、触摸或键盘侦听器附加到地图，因此它不会响应交互。（可选，默认`true`）
    - `options.bearingSnap` **`number`**阈值（以度为单位），用于确定地图的方位何时向北对齐。例如，当 `bearingSnap`为 7 时，如果用户在北纬 7 度范围内旋转地图，地图将自动对齐到正北。（可选，默认`7`）
    - `options.pitchWithRotate` **`boolean`**如果`false`，地图的俯仰（倾斜）控制与“拖动旋转”交互将被禁用。（可选，默认`true`）
    - `options.clickTolerance` **`number`**用户可以在单击期间移动鼠标指针以将其视为有效单击（与鼠标拖动相反）的最大像素数。（可选，默认`3`）
    - `options.attributionControl` **`boolean`**如果`true`，一个[AttributionControl][204]将被添加到地图中。（可选，默认`true`）
    - `options.customAttribution` **( `string`| `Array`< `string`\>)？**在`AttributionControl 中`显示的一个或多个字符串。仅适用于采用`options.attributionControl`是`true`。
    - `options.logoPosition` **`string`**一个字符串，表示文字标记在地图上的位置。有效选项为`top-left`、`top-right`、`bottom-left`、`bottom-right`。（可选，默认`'bottom-left'`）
    - `options.failIfMajorPerformanceCaveat` **`boolean`**如果`true`，如果性能比预期的差很多（即使用软件渲染器），地图创建将失败。（可选，默认`false`）
    - `options.preserveDrawingBuffer` **`boolean`**如果`true`，则可以使用 将地图的画布导出为 PNG `map.getCanvas().toDataURL()`。这是`false`默认的性能优化。（可选，默认`false`）
    - `options.antialias` **`boolean`?** 如果`true`，将使用 MSAA 抗锯齿创建上下文，这对于抗锯齿自定义图层很有用。这是`false`默认的性能优化。
    - `options.refreshExpiredTiles` **`boolean`**如果`false`，地图将不会尝试重新请求图块，一旦它们根据其 HTTP `cacheControl`/`expires`标头过期。（可选，默认`true`）
    - `options.maxBounds` **[LngLatBoundsLike][299] ?** 如果设置，地图将被限制在给定的范围内。
    - `options.scrollZoom` **( `boolean`| `Object`)**如果`true`，则启用“滚动缩放”交互。一个`Object`值作为选项传递给`ScrollZoomHandler#enable`。（可选，默认`true`）
    - `options.boxZoom` **`boolean`**如果`true`，则启用“框缩放”交互（请参阅[BoxZoomHandler][178]）。（可选，默认`true`）
    - `options.dragRotate` **`boolean`**如果`true`，则启用“拖动旋转”交互（请参阅[DragRotateHandler][192]）。（可选，默认`true`）
    - `options.dragPan` **( `boolean`| `Object`)**如果`true`，则启用“拖动平移”交互。一个`Object`值作为选项传递给`DragPanHandler#enable`。（可选，默认`true`）
    - `options.keyboard` **`boolean`**如果`true`，则启用键盘快捷键（请参阅[KeyboardHandler][184]）。（可选，默认`true`）
    - `options.doubleClickZoom` **`boolean`**如果`true`，则启用“双击缩放”交互（请参阅[DoubleClickZoomHandler][190]）。（可选，默认`true`）
    - `options.touchZoomRotate` **( `boolean`| `Object`)**如果`true`，则启用“捏合旋转和缩放”交互。一个`Object`值作为选项传递给`TouchZoomRotateHandler#enable`。（可选，默认`true`）
    - `options.touchPitch` **( `boolean`| `Object`)**如果`true`，则启用“拖动到音调”交互。一个`Object`值作为选项传递给`TouchPitchHandler#enable`。（可选，默认`true`）
    - `options.trackResize` **`boolean`**如果`true`，则当浏览器窗口调整大小时，地图将自动调整大小。（可选，默认`true`）
    - `options.center` **[LngLatLike][284]**地图的初始地理中心点。如果`center`未在构造函数选项中指定， 将在地图的样式对象中查找它。如果样式中也没有指定，则默认为`[0, 0]`注意：地图使用经度、纬度坐标顺序（相对于纬度、经度）来匹配 GeoJSON。（可选，默认`[0,0]`）
    - `options.zoom` **`number`**地图的初始缩放级别。如果`zoom`未在构造函数选项中指定，将在地图的样式对象中查找它。如果样式中也没有指定，则默认为`0`. （可选，默认`0`）
    - `options.bearing` **`number`**地图的初始方位（旋转），以北为逆时针方向测量的度数。如果`bearing`未在构造函数选项中指定，将在地图的样式对象中查找它。如果样式中也没有指定，则默认为`0`. （可选，默认`0`）
    - `options.pitch` **`number`**地图的初始倾斜度（倾斜度），以距屏幕平面 (0-85) 的度数为单位。如果`pitch`未在构造函数选项中指定，将在地图的样式对象中查找它。如果样式中也没有指定，则默认为`0`. （可选，默认`0`）
    - `options.bounds` **[LngLatBoundsLike][299] ?** 地图的初始边界。如果`bounds`指定，它将覆盖`center`和`zoom`构造函数选项。
    - `options.fitBoundsOptions` **`Object`?** 甲`地图＃fitBounds`选项对象使用_仅_拟合初始时`bounds`的上方。
    - `options.optimizeForTerrain` **`boolean`**启用地形时，如果`true`，地图将呈现性能优先级，这可能会导致图层重新排序以最大化性能（将首先绘制覆盖在地形上的图层，包括填充、线条、背景、山体阴影和栅格）。否则，如果设置为`false`，地图将始终按图层顺序优先级绘制。（可选，默认`true`）
    - `options.renderWorldCopies` **`boolean`**如果`true`，世界的多个副本将在超过 -180 度和 180 度经度的范围内并排呈现。如果设置为`false`：- 当地图缩小到足以使世界的单个表示无法填满地图的整个容器时，超过 180 度和 -180 度经度将出现空白。
        - 在每个缩放级别，跨越 180 度和 -180 度经度的要素将被切成两部分（一部分位于地图的右边缘，另一部分位于地图的左边缘）。（可选，默认`true`）
    - `options.maxTileCacheSize` **`number`**存储在给定源的切片缓存中的最大切片数。如果省略，缓存将根据当前视口动态调整大小。（可选，默认`null`）
    - `options.localIdeographFontFamily` **`string`**定义一个 CSS 字体系列，用于在“CJK 统一表意文字”、“平假名”、“片假名”和“韩文音节”范围内本地覆盖生成字形。在这些范围内，地图样式的字体设置将被忽略，除了字体粗细关键字（light/regular/medium/bold）。设置为`false`, 以针对这些字形范围启用地图样式的字体设置。此选项的目的是避免带宽密集型字形服务器请求。（请参阅`使用本地生成的表意文字 `.)（可选，默认`'sans-serif'`）
    - `options.localFontFamily` **`string`**定义一个 CSS 字体系列，用于本地覆盖所有字形的生成。除了字体粗细关键字（light/regular/medium/bold）之外，地图样式中的字体设置将被忽略。如果设置，此选项将覆盖 localIdeographFontFamily 中的设置（可选，默认`false`）
    - `options.transformRequest` **RequestTransformFunction**在 Map 请求外部 URL 之前运行的回调。回调可用于修改 url、设置标头或设置跨域请求的凭据属性。预计返回`requestParameters的`对象与`url`属性和可选`headers`和`credentials`性能。（可选，默认`null`）
    - `options.collectResourceTiming` **`boolean`**如果`true`，将为 GeoJSON 和 Vector Tile Web Worker 发出的请求收集资源计时 API 信息（此信息通常无法从主 Javascript 线程访问）。信息将在`resourceTiming`相关`data`事件的属性中返回。（可选，默认`false`）
    - `options.fadeDuration` **`number`**控制标签碰撞的淡入/淡出动画的持续时间，以毫秒为单位。此设置会影响所有符号图层。此设置不会影响运行时样式转换或光栅图块淡入淡出的持续时间。（可选，默认`300`）
    - `options.crossSourceCollisions` **`boolean`**如果`true`，来自多个源的符号可以在碰撞检测期间相互碰撞。如果`false`，则对每个源中的符号单独运行碰撞检测。（可选，默认`true`）
    - `options.locale` **`Object`**应用于 UI 字符串的默认本地化表的补丁，例如控件工具提示。该`locale`对象将命名空间的 UI 字符串 ID 映射到目标语言的翻译字符串；`src/ui/default_locale.js`有关所有支持的字符串 ID 的示例，请参见。该对象可以指定所有 UI 字符串（从而添加对新翻译的支持）或仅字符串的子集（从而修补默认翻译表）。（可选，默认`null`）
    - `options.testMode` **`boolean`**静默由于无效的访问令牌而生成的错误和警告，这在使用库编写单元测试时很有用。（可选，默认`false`）

### Examples
```
var map = new vjmap.Map({
  container: 'map', // container ID
  center: [-122.420679, 37.772537], // starting position [lng, lat]
  zoom: 13, // starting zoom
  style: 'your style', // 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
     }
    }
  }
});
```

### scrollZoom
地图的[ScrollZoomHandler][187]，它使用滚轮或触控板实现放大和缩小。`scrollZoom`在[ScrollZoomHandler][187]部分中查找更多详细信息和示例。

类型：[ScrollZoomHandler][187]

### boxZoom
地图的[BoxZoomHandler][178]，它使用按住 Shift 键的拖动手势实现缩放。`boxZoom`在[BoxZoomHandler][178]部分中查找更多详细信息和示例。

类型：[BoxZoomHandler][178]

### dragRotate
地图的[DragRotateHandler][192]，它实现了在使用鼠标右键或按下 Control 键拖动时旋转地图。`dragRotate` 在[DragRotateHandler][192]部分中查找更多详细信息和示例。

类型：[DragRotateHandler][192]

### dragPan
地图的[DragPanHandler][191]，它实现了使用鼠标或触摸手势拖动地图。`dragPan`在[DragPanHandler][191]部分中查找更多详细信息和示例。

类型：[DragPanHandler][191]

### keyboard
地图的[KeyboardHandler][184]，它允许用户使用键盘快捷键缩放、旋转和平移地图。`keyboard`在[KeyboardHandler][184]部分中查找更多详细信息和示例。

类型：[KeyboardHandler][184]

### doubleClickZoom
地图的[DoubleClickZoomHandler][190]，允许用户通过双击进行缩放。`doubleClickZoom`在[DoubleClickZoomHandler][190]部分中查找更多详细信息和示例。

类型：[DoubleClickZoomHandler][190]

### touchZoomRotate
地图的[TouchZoomRotateHandler][193]，它允许用户使用触摸手势缩放或旋转地图。`touchZoomRotate`在[TouchZoomRotateHandler][193]部分中查找更多详细信息和示例。

类型：[TouchZoomRotateHandler][193]

### touchPitch
地图的[TouchPitchHandler][183]，它允许用户通过触摸手势来调整地图。`touchPitch`在[TouchPitchHandler][183]部分中查找更多详细信息和示例。

类型：[TouchPitchHandler][183]

### addControl

将[IControl][161]添加到地图，调用`control.onAdd(this)`.

#### Parameters
- `control` **[ICONTROL][161]**的[ICONTROL][161]补充。
- `position` **`string`?** 控件将添加到的地图上的位置。有效值是`'top-left'`，`'top-right'`，`'bottom-left'`，和`'bottom-right'`。默认为`'top-right'`.

#### Examples
```
// Add zoom and rotation controls to the map.
map.addControl(new vjmap.NavigationControl());
```

返回**`地图`** `this`

### removeControl
从地图中删除控件。

#### Parameters
- `control` **[ICONTROL][161]**的[ICONTROL][161]删除。

#### Examples
```
// Define a new navigation control.
var navigation = new vjmap.NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Remove zoom and rotation controls from the map.
map.removeControl(navigation);
```

返回**`地图`** `this`

### hasControl
检查控件是否在地图上。

#### Parameters
- `control` **[ICONTROL][161]**的[ICONTROL][161]检查。

#### Examples
```
// Define a new navigation control.
var navigation = new vjmap.NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Check that the navigation control exists on the map.
const added = map.hasControl(navigation);
// added === true
```

**`boolean`**如果地图包含控件，则返回True。

### resize
根据其`container`元素的尺寸调整地图的大小 。

检查地图容器大小是否改变，如果改变则更新地图。必须在以`container`编程方式调整地图大小后或在最初使用 CSS 隐藏地图后显示地图时调用此方法。

#### Parameters
- `eventData` **`Object`?** 要传递给`movestart`、`move`、`resize`和`moveend` 因调整大小而触发的事件的其他属性。这对于区分事件源（例如，用户启动或以编程方式触发的事件）非常有用。

#### Examples
```
// Resize the map when the map container is shown
// after being initially hidden with CSS.
var mapDiv = document.getElementById('map');
if (mapDiv.style.visibility === true) map.resize();
```

返回**`地图`** `this`

### getBounds
返回地图的地理边界。当方位角或螺距不为零时，可见区域不是轴对齐的矩形，结果是包含可见区域的最小边界。如果在地图上设置了填充，则返回的边界适用于插图。

#### Examples
```
var bounds = map.getBounds();
```

返回**[LngLatBounds][285]**地图的地理边界作为[LngLatBounds][285]。

### getMaxBounds
返回地图被限制到的最大地理边界，或者`null`如果没有设置。

#### Examples
```
var maxBounds = map.getMaxBounds();
```

返回**( [LngLatBounds][285] | null)**地图对象。

### setMaxBounds
设置或清除地图的地理边界。

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

#### Parameters
- `bounds` **( [LngLatBoundsLike][299] | null | `undefined`)**要设置的最大边界。如果提供`null`或`undefined`，该函数将删除地图的最大边界。

#### Examples
```
// Define bounds that conform to the `LngLatBoundsLike` object.
var bounds = [
  [-74.04728, 40.68392], // [west, south]
  [-73.91058, 40.87764]  // [east, north]
];
// Set the map's max bounds.
map.setMaxBounds(bounds);
```

返回**`地图`** `this`

### setMinZoom
设置或清除地图的最小缩放级别。如果地图的当前缩放级别低于新的最小值，则地图将缩放到新的最小值。

并非总是可以缩小并到达集合`minZoom`。其他因素（例如地图高度）可能会限制缩放。例如，如果地图的高度为 512 像素，则无论`minZoom`设置为什么，都无法在缩放 0 以下进行缩放。

#### Parameters
- `minZoom` **( `number`| null | `undefined`)**要设置的最小缩放级别 (-2 - 24)。如果提供`null`或`undefined`，该函数将删除当前的最小缩放（即将其设置为 -2）。

#### Examples
```
map.setMinZoom(12.25);
```

返回**`地图`** `this`

### getMinZoom
返回地图的最小允许缩放级别。

#### Examples
```
var minZoom = map.getMinZoom();
```

返回**`number`**minZoom

### setMaxZoom
设置或清除地图的最大缩放级别。如果地图的当前缩放级别高于新的最大值，则地图将缩放到新的最大值。

#### Parameters
- `maxZoom` **( `number`| null | `undefined`)**要设置的最大缩放级别。如果提供`null`或`undefined`，该函数将删除当前最大缩放（将其设置为 22）。

#### Examples
```
map.setMaxZoom(18.75);
```

返回**`地图`** `this`

### getMaxZoom
返回地图的最大允许缩放级别。

#### Examples
```
var maxZoom = map.getMaxZoom();
```

返回**`number`**最大缩放

### setMinPitch
设置或清除地图的最小间距。如果地图的当前俯仰低于新的最小值，则地图将俯仰到新的最小值。

#### Parameters
- `minPitch` **( `number`| null | `undefined`)**要设置的最小间距 (0-85)。如果提供`null`或`undefined`，则该函数会删除当前的最小音高（即，将其设置为 0）。

返回**`地图`** `this`

### getMinPitch
返回地图的最小允许间距。

返回**`number`**minPitch

### setMaxPitch
设置或清除地图的最大间距。如果地图的当前俯仰高于新的最大值，则地图将俯仰到新的最大值。

#### Parameters
- `maxPitch` **( `number`| null | `undefined`)**要设置的最大间距。如果提供`null`或`undefined`，则该函数会删除当前的最大音高（将其设置为 85）。

返回**`地图`** `this`

### getMaxPitch
返回地图的最大允许间距。

返回**`number`**最大间距

### getRenderWorldCopies

返回 的状态`renderWorldCopies`。如果`true`，世界的多个副本将在超过 -180 度和 180 度经度的范围内并排呈现。如果设置为`false`：

- 当地图缩小到足以让世界的单一表示无法填满地图的整个容器时，超过 180 度和 -180 度经度将出现空白。
- 在每个缩放级别，跨越 180 度和 -180 度经度的要素将被切成两部分（一部分位于地图的右边缘，另一部分位于地图的左边缘）。

#### Examples
```
var worldCopiesRendered = map.getRenderWorldCopies();
```

返回**`boolean`**renderWorldCopies

### setRenderWorldCopies

设置 的状态`renderWorldCopies`。

#### Parameters
- `renderWorldCopies` **`boolean`**如果`true`，世界的多个副本将在超过 -180 度和 180 度经度的范围内并排呈现。如果设置为`false`：- 当地图缩小到足以使世界的单个表示无法填满地图的整个容器时，超过 180 度和 -180 度经度将出现空白。
    - 在每个缩放级别，跨越 180 度和 -180 度经度的要素将被切成两部分（一部分位于地图的右边缘，另一部分位于地图的左边缘）。`undefined`被视为`true`，`null`被视为`false`。

#### Examples
```
map.setRenderWorldCopies(true);
```

返回**`地图`** `this`

### project
返回一个[Point][165]表示像素坐标，相对于地图的`container`，对应于指定的地理位置。

当地图倾斜并`lnglat`完全在相机后面时，没有对应于该位置的像素坐标。在这种情况下，返回的`Point][165]的`x`和`y`组件设置为 Number.MAX\_VALUE。[`

#### Parameters
- `lnglat` **`LngLatLike 要投影`**的地理位置。

#### Examples
```
var coordinate = [-122.420679, 37.772537];
var point = map.project(coordinate);
```

返回**[Point][165]**对应于的`点``lnglat`，相对于地图的`container`。

### unproject
返回表示与指定像素坐标对应的地理坐标的[LngLat][230]。如果地平线可见，并且指定像素高于地平线，则返回与地平线上的点相对应的[LngLat][230]，距离该点最近。

#### Parameters
- `point` **`PointLike 要取消投影`**的像素坐标。

#### Examples
```
map.on('click', function(e) {
  // When the map is clicked, get the geographic coordinate.
  var coordinate = map.unproject(e.point);
});
```

返回**[LngLat][230]**对应的[LngLat][230]`point`。

### isMoving
如果地图由于相机动画或用户手势而平移、缩放、旋转或俯仰，则返回 true。

#### Examples
```
var isMoving = map.isMoving();
```

**`boolean`**如果地图正在移动，则返回True。

### isZooming
如果地图由于相机动画或用户手势而缩放，则返回 true。

#### Examples
```
var isZooming = map.isZooming();
```

**`boolean`**如果地图正在缩放，则返回True。

### isRotating
如果地图由于相机动画或用户手势而旋转，则返回 true。

#### Examples
```
map.isRotating();
```

**`boolean`**如果地图正在旋转，则返回True。

### on

为指定类型的事件添加侦听器，可选择限制为指定样式层中的功能。

#### Parameters
- `type` **`string`**要侦听的事件类型。`layerId`当光标从该图层外部或地图画布外部进入指定图层的可见部分时，将触发与可选参数兼容的事件。

#### Parameters
- `type` **`string`**要侦听的事件类型。`layerId`当光标从该图层外部或地图画布外部进入指定图层的可见部分时，将触发与可选参数兼容的事件。

 |事件 | 兼容`layerId`|
 |-|-|-
 |``mousedown`` | 是 |
 | ``mouseup`` | 是 |
 | ``mouseover`` | 是 |
 | ``mouseout`` | 是 |
 | ``mousemove`` | 是 |
 | ``mouseenter`` | 是（必填） |
 | ``mouseleave`` | 是（必填） |
 | ``click`` | 是 |
 | ``dblclick`` | 是 |
 | ``contextmenu`` | 是 |
 | ``contextMenuPreOpen`` | 是 |
 | ``contextMenuOpened`` | 是 |
 | ``contextMenuNoContent`` | 是 |
 | ``contextMenuCancel`` | 是 |
 | ``touchstart`` | 是 |
 | ``touchend`` | 是 |
 | ``touchcancel`` | 是 |
 | ``wheel`` |
 | ``resize`` |
 | ``remove`` |
 | ``touchmove`` |
 | ``movestart`` |
 | ``move`` |
 | ``moveend`` |
 | ``dragstart`` |
 | ``drag`` |
 | ``dragend`` |
 | ``zoomstart`` |
 | ``zoom`` |
 | ``zoomend`` |
 | ``rotatestart`` |
 | ``rotate`` |
 | ``rotateend`` |
 | ``pitchstart`` |
 | ``pitch`` |
 | ``pitchend`` |
 | ``boxzoomstart`` |
 | ``boxzoomend`` |
 | ``boxzoomcancel`` |
 | ``webglcontextlost`` |
 | ``webglcontextrestored``|
 | ``load`` |
 | ``render`` |
 | ``idle`` |
 | ``error`` |
 | ``data`` |
 | ``styledata`` |
 | ``sourcedata`` |
 | ``dataloading`` |
 | ``styledataloading`` |
 | ``sourcedataloading`` |
 | ``styleimagemissing`` |

- `layerId` **`string`**（可选）样式层的 ID。如果您提供`layerId`，则仅当侦听器的位置位于该图层中的可见要素内时才会触发侦听器，并且该事件将具有`features`包含匹配要素数组的属性。如果您不提供`layerId`，则侦听器将由地图上任何位置发生的相应事件触发，并且该事件将没有`features`属性。请注意，许多事件类型与可选`layerId`参数不兼容。
- `listener` **Function**触发事件时要调用的函数。

#### Examples
```
// Set an event listener that will fire
// when the map has finished loading.
map.on('load', function() {
  // Add a new layer.
  map.addLayer({
    id: 'points-of-interest',
    source: {
      type: 'vector',
      url: 'your url'
    },
    'source-layer': 'poi_label',
    type: 'circle',
    paint: {
      // Style Specification paint properties
    },
    layout: {
      // Style Specification layout properties
    }
  });
});
```

```
// Set an event listener that will fire
// when a feature on the countries layer of the map is clicked.
map.on('click', 'countries', function(e) {
  new vjmap.Popup()
    .setLngLat(e.lngLat)
    .setHTML(`Country name: ${e.features[0].properties.name}`)
    .addTo(map);
});
```

返回**`地图`** `this`

### once

添加一个仅对指定事件类型调用一次的侦听器，可选择仅限于在指定样式图层中的要素上发生的事件。

#### Parameters
- `type` **`string`**要侦听的事件类型；之一`'mousedown'`，`'mouseup'`，`'click'`，`'dblclick'`， `'mousemove'`，`'mouseenter'`，`'mouseleave'`，`'mouseover'`，`'mouseout'`，`'contextmenu'`，`'touchstart'`， `'touchend'`，或`'touchcancel'`。`mouseenter`和`mouseover`当光标从外部进入指定的层的可见部分事件被触发该层或地图帆布外。`mouseleave` 和`mouseout`事件被触发时光标离开指定的层，或叶地图画布的可见部分。
- `layerId` **`string`**（可选）样式层的 ID。如果您提供`layerId`，则仅当侦听器的位置位于该图层中的可见要素内时才会触发侦听器，并且该事件将具有`features`包含匹配要素数组的属性。如果您不提供`layerId`，则侦听器将由地图上任何位置发生的相应事件触发，并且该事件将没有`features`属性。请注意，许多事件类型与可选`layerId`参数不兼容。
- `listener` **Function**触发事件时要调用的函数。

#### Examples
```
// Log the coordinates of a user's first map touch.
map.once('touchstart', function (e) {
  console.log('The first map touch was at: ' + e.lnglat)
});
```

```
// Log the coordinates of a user's first map touch
// on a specific layer.
map.once('touchstart', 'my-point-layer', function (e) {
  console.log('The first map touch on the point layer was at: ' + e.lnglat)
});
```

返回**`地图`** `this`

### off

删除先前使用`Map#on`添加的事件侦听器，可选择限制为特定于图层的事件。

#### Parameters
- `type` **`string`** 以前用于安装侦听器的事件类型。
- `layerId` **`string`** （可选）先前用于安装侦听器的层 ID。
- `listener` **功能**以前安装的监听功能。

#### Examples
```
// Create a function to print coordinates while a mouse is moving.
function onMove(e) {
  console.log('The mouse is moving: ' + e.lngLat)
}
// Create a function to unbind the `mousemove` event.
function onUp(e) {
  console.log('The final coordinates are: ' + e.lngLat)
  map.off('mousemove', onMove);
}
// When a click occurs, bind both functions to mouse events.
map.on('mousedown', function (e) {
  map.on('mousemove', onMove);
  map.once('mouseup', onUp);
});
```

返回**`地图`** `this`

### queryRenderedFeatures

返回一个`GeoJSON`数组 `` `特征对象` 表示满足查询参数的可见特征。

#### Parameters
- `geometry` **( [PointLike][166] | `Array`< [PointLike][166] >)？**以像素为单位的查询区域的几何形状：描述边界框的单个点或左下角和右上角的点，其中原点位于左上角。省略此参数（即使用零参数或仅使用参数调用`Map#queryRenderedFeatures``options`）等效于传递包含整个地图视口的边界框。仅支持现有视口内的值。
- `options` **`Object`?** 选项对象。
    - `options.layers` **`Array`< `string`\>？**一组`样式层 ID `用于要检查的查询。仅返回这些图层内的要素。如果未定义此参数，则将检查所有图层。
    - `options.filter` **`Array`?** 一个`过滤器` 限制查询结果。
    - `options.validate` **`boolean`**是否检查 \[options.filter\] 是否符合样式规范。禁用验证是一种性能优化，只有在您之前验证过将传递给此函数的值时才应使用。（可选，默认`true`）

#### Examples
```
// Find all features at a point
var features = map.queryRenderedFeatures(
  [20, 35],
  { layers: ['my-layer-name'] }
);
```

```
// Find all features within a static bounding box
var features = map.queryRenderedFeatures(
  [[10, 20], [30, 50]],
  { layers: ['my-layer-name'] }
);
```

```
// Find all features within a bounding box around a point
var width = 10;
var height = 20;
var features = map.queryRenderedFeatures([
  [point.x - width / 2, point.y - height / 2],
  [point.x + width / 2, point.y + height / 2]
], { layers: ['my-layer-name'] });
```

```
// Query all rendered features from a single layer
var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });
```

返回**`Array`< `Object`\>** `GeoJSON`数组 `` `特征对象 `.`properties`每个返回的特征对象的值都包含其源特征的属性。对于以GeoJSON源，只有字符串和数值属性的值被支持（即`null`，`Array`和`Object`值不支持）。每个特征包括顶层`layer`，`source`和`sourceLayer`特性。该`layer`属性是一个对象，表示该要素所属的样式图层。此对象中的布局和绘制属性包含针对给定缩放级别和特征进行全面评估的值。仅包括当前呈现的特征。某些功能将**不**包括在内，例如：-`visibility`属性为 的图层中的功能`"none"`。

- 来自缩放范围不包括当前缩放级别的图层的要素。
- 由于文本或图标碰撞而被隐藏的符号特征。包括所有其他层的特征，包括可能对渲染结果没有可见贡献的特征；例如，因为图层的不透明度或颜色 alpha 分量设置为 0。最上面渲染的特征首先出现在返回的数组中，后续特征按 z-order 降序排序。多次渲染的要素（由于在低缩放级别下环绕反子午线）仅返回一次（但需遵守以下注意事项）。因为要素来自切片矢量数据或在内部转换为切片的 GeoJSON 数据，所以要素几何可能会跨切片边界拆分或复制，因此，要素可能会在查询结果中出现多次。例如，假设有一条高速公路穿过查询的边界矩形。查询的结果将是位于覆盖边界矩形的地图图块内的高速公路部分，即使高速公路延伸到其他图块中，并且每个地图图块内的高速公路部分将作为单独的要素返回。类似地，由于瓦片缓冲，瓦片边界附近的点要素可能出现在多个瓦片中。

### querySourceFeatures

返回一个`GeoJSON`数组 `` `特征对象` 表示满足查询参数的指定矢量切片或 GeoJSON 源中的要素。

#### Parameters
- `sourceId` **`string`** 要查询的矢量切片或 GeoJSON 源的 ID。
- `parameters` **`Object`?** 选项对象。
    - `parameters.sourceLayer` **`string`?** `源层`的名称 `` 查询。_对于矢量切片源，此参数是必需的。_对于 GeoJSON 源，它被忽略。
    - `parameters.filter` **`Array`?** 一个`过滤器` 限制查询结果。
    - `parameters.validate` **`boolean`**是否检查 \[parameters.filter\] 是否符合样式规范。禁用验证是一种性能优化，只有在您之前验证过将传递给此函数的值时才应使用。（可选，默认`true`）

#### Examples
```
// Find all features in one source layer in a vector source
var features = map.querySourceFeatures('your-source-id', {
  sourceLayer: 'your-source-layer'
});
```

返回**`Array`< `Object`\>** `GeoJSON](http://geojson.org/)数组 `` `特征对象 `. 与[Map#queryRenderedFeatures 相比`，该函数返回所有匹配查询参数的特征，无论它们是否被当前样式渲染（即可见）。查询的域包括所有当前加载的矢量切片和 GeoJSON 源切片：该函数不检查当前可见视口之外的切片。因为特征来自切片矢量数据或内部转换为切片的 GeoJSON 数据，特征几何可能跨切片边界拆分或复制，因此，要素可能会在查询结果中出现多次。例如，假设有一条高速公路穿过查询的边界矩形。查询的结果将是位于覆盖边界矩形的地图图块内的高速公路部分，即使高速公路延伸到其他图块中，每个地图图块内的高速公路部分将作为单独的要素返回。类似地，由于瓦片缓冲，瓦片边界附近的点要素可能出现在多个瓦片中。

### setStyle

使用新值更新地图的 样式对象。

如果在使用时已经设置了样式并且 options.diff 设置为 true，则地图渲染器将尝试将给定样式与地图的当前状态进行比较，并仅执行使地图样式与所需状态匹配所需的更改。精灵（用于图标和图案的图像）和字形（标签文本的字体）的变化**无法**区分。如果当前样式中使用的精灵或字体与给定样式有任何不同，地图渲染器将强制进行完整更新，删除当前样式并从头开始构建给定样式。

#### Parameters
- `style` **(StyleSpecification | `string`| null)**符合`样式规范中`描述的架构的 JSON 对象 ``，或此类 JSON 的 URL。
- `options` **`Object`?** 选项对象。
    - `options.diff` **`boolean`**如果为 false，则强制进行“完整”更新，删除当前样式并构建给定样式，而不是尝试基于差异的更新。（可选，默认`true`）
    - `options.localIdeographFontFamily` **`string`**定义一个 CSS 字体系列，用于在“CJK 统一表意文字”、“平假名”、“片假名”和“韩文音节”范围内本地覆盖生成字形。在这些范围内，地图样式的字体设置将被忽略，除了字体粗细关键字（light/regular/medium/bold）。设置为`false`, 以针对这些字形范围启用地图样式的字体设置。强制完整更新。（可选，默认`'sans-serif'`）

#### Examples
```
map.setStyle("your style");
```

返回**`地图`** `this`

### getStyle
返回地图的 `样式` 对象，一个 JSON 对象，可用于重新创建地图的样式。

#### Examples
```
map.on('load', function() {
  var styleJson = map.getStyle();
});
```

返回**`Object`**地图的样式 JSON 对象。

### isStyleLoaded
返回一个布尔值，指示地图的样式是否已完全加载。

#### Examples
```
var styleLoadStatus = map.isStyleLoaded();
```

返回**`boolean`**一个布尔值，指示样式是否已完全加载。

### addSource

将源添加到地图的样式。

#### Parameters
- `id` **`string`**要添加的源的 ID。不得与现有来源发生冲突。
- `source` **`Object`**源对象。

#### Examples
```
map.addSource('my-data', {
  type: 'vector',
  url: 'your url'
});
```

```
map.addSource('my-data', {
  "type": "geojson",
  "data": {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-77.0323, 38.9131]
    },
    "properties": {
      "title": "DC",
      "marker-symbol": "monument"
    }
  }
});
```

返回**`地图`** `this`

### isSourceLoaded
返回一个布尔值，指示源是否已加载。返回`true`如果在地图的风格给定ID的源没有未完成的的网络请求，否则`false`。

#### Parameters
- `id` **`string`** 要检查的源的 ID。

#### Examples
```
var sourceLoaded = map.isSourceLoaded('bathymetry-data');
```

返回**`boolean`**一个布尔值，指示源是否已加载。

### areTilesLoaded
返回一个布尔值，指示是否加载了来自样式上所有源的视口中的所有图块。

#### Examples
```
var tilesLoaded = map.areTilesLoaded();
```

返回**`boolean`**一个布尔值，指示是否已加载所有图块。

### removeSource
从地图的样式中删除源。

#### Parameters
- `id` **`string`** 要删除的源的 ID。

#### Examples
```
map.removeSource('bathymetry-data');
```

返回**`地图`** `this`

### getSource

返回具有地图样式中指定 ID 的源。

此方法通常用于使用`Sources 中`定义的相关源类型的实例成员更新`源`。例如，`data`为 GeoJSON 源设置或更新 图像源的`url`和`coordinates`。

#### Parameters
- `id` **`string`** 要获取的源的 ID。

#### Examples
```
var sourceObject = map.getSource('points');
```

返回**`Object`?** 具有指定 ID 的样式源，或者`undefined`如果 ID 不对应于现有源。对象的形状因源类型而异。样式规范的`源中`提供了每种源类型的选项列表 `` 页。

### addImage

向样式添加图像。此图像可以像样式``[精灵]`` 使用图像的 ID ``icon-image` `, ``background-pattern` `, ``fill-pattern` `， 或者 ``line-pattern` `. 一个`Map.event`：错误如果没有在精灵足够的空间来添加此图像事件将被解雇。

#### Parameters
- `id` **`string`** 图像的 ID。
- `image` **`HTMLImageElement`| 图像位图 | 图像数据 | {width: `number`, height: `number`, data: ( `Uint8Array `| `Uint8ClampedArray `)} | [StyleImageInterface` )**图像作为`HTMLImageElement`、`ImageData`、`ImageBitmap`或具有、 和 属性的对象`width`，其格式与.`height``data``ImageData`
- `options` **$Shape<StyleImageMetadata>**选项对象。（可选，默认`{}`）
    - `options.pixelRatio` 图像中的像素与屏幕上的物理像素的比率（可选，默认`1`）
    - `options.sdf` 图像是否应被解释为 SDF 图像（可选，默认`false`）
    - `options.stretchX` `[[x1, x2], ...]`如果`icon-text-fit`在具有此图像的图层中使用，则此选项定义可以水平拉伸的图像部分。
    - `options.stretchY` `[[y1, y2], ...]`如果`icon-text-fit`在带有此图像的图层中使用，则此选项定义可以垂直拉伸的图像部分。
    - `options.content` `[x1, y1, x2, y2]` 如果`icon-text-fit`在带有此图像的图层中使用，则此选项定义图像中可以被 中的内容覆盖的部分`text-field`。

#### Examples
```
// If the style's sprite does not already contain an image with ID 'cat',
// add the image 'cat-icon.png' to the style's sprite with the ID 'cat'.
map.loadImage('https://xxx.png', function(error, image) {
   if (error) throw error;
   if (!map.hasImage('cat')) map.addImage('cat', image);
});


// Add a stretchable image that can be used with `icon-text-fit`
// In this example, the image is 600px wide by 400px high.
map.loadImage('https:/xxx.png', function(error, image) {
   if (error) throw error;
   if (!map.hasImage('border-image')) {
     map.addImage('border-image', image, {
         content: [16, 16, 300, 384], // place text over left half of image, avoiding the 16px border
         stretchX: [[16, 584]], // stretch everything horizontally except the 16px border
         stretchY: [[16, 384]], // stretch everything vertically except the 16px border
     });
   }
});
```

### updateImage
更新样式中的现有图像。此图像可以像样式`精灵`中的任何其他图标一样显示在地图上 `` 使用图像的 ID ``icon-image` `, ``background-pattern` `, ``fill-pattern` `， 或者 ``line-pattern` `.

#### Parameters
- `id` **`string`** 图像的 ID。
- `image` **`HTMLImageElement`| 图像位图 | 图像数据 | {width: `number`, height: `number`, data: ( `Uint8Array `| `Uint8ClampedArray `)} | [StyleImageInterface` )**图像作为`HTMLImageElement`、`ImageData`、`ImageBitmap`或具有、 和 属性的对象`width`，其格式与.`height``data``ImageData`

#### Examples
```
// If an image with the ID 'cat' already exists in the style's sprite,
// replace that image with a new image, 'other-cat-icon.png'.
if (map.hasImage('cat')) map.updateImage('cat', './other-cat-icon.png');
```

### hasImage
检查样式中是否存在具有特定 ID 的图像。

#### Parameters
- `id` **`string`** 图像的 ID。

#### Examples
```
// Check if an image with the ID 'cat' exists in
// the style's sprite.
var catIconExists = map.hasImage('cat');
```

返回**`boolean`**一个布尔值，指示图像是否存在。

### removeImage
从样式中删除图像。

#### Parameters
- `id` **`string`** 图像的 ID。

#### Examples
```
// If an image with the ID 'cat' exists in
// the style's sprite, remove it.
if (map.hasImage('cat')) map.removeImage('cat');
```

### loadImage

从外部 URL 加载图像以与`Map#addImage`一起使用。外部域必须支持`CORS `.

#### Parameters
- `url` **`string`**图像文件的 URL。图像文件必须为 png、webp 或 jpg 格式。
- `callback` **功能**期待`callback(error, data)`。在图像加载时调用或在出现错误时使用错误参数调用。

#### Examples
```
// Load an image from an external URL.
map.loadImage('http://xxx', function(error, image) {
  if (error) throw error;
  // Add the loaded image to the style's sprite with the ID 'kitten'.
  map.addImage('kitten', image);
});
```

### listImages
返回一个字符串数组，其中包含地图中当前可用的所有图像的 ID。

#### Examples
```
var allImages = map.listImages();
```

返回**`Array`< `string`\>**包含地图中当前可用的所有精灵/图像名称的字符串数组。

### addLayer

添加`样式图层`到地图的样式。

层定义了来自指定源的数据的样式。在`样式规范中`阅读有关图层类型和可用绘制和布局属性的`更多信息 `.

#### Parameters
- `layer` **( `Object`| `CustomLayerInterface][276] )**要添加的图层，符合 样式规范的`图层定义 `或者，不太常见的是[CustomLayerInterface`规范。样式规范的图层定义适用于大多数图层。
    - `layer.id` **`string`** 您定义的唯一标识符。
    - `layer.type` **`string`**层的类型（例如`fill`或`symbol`）。`样式规范中`提供了图层类型列表 ``.（这也可以是`custom`。有关更多信息，请参阅[CustomLayerInterface`。）
    - `layer.source` **( `string`| `Object`)？** 图层的数据源。引用已使用源的唯一 id_定义_的源。使用源对象引用_新源_（如`样式规范中`所定义） ``） 直接地。这是**需要**所有`layer.type`的选项_，除了_为`custom`和`background`。
    - `layer.sourceLayer` **`string`?** （可选）`源层`的名称 ``在指定`layer.source`用于此样式层的范围内。这是仅适用于矢量瓦片源并且**需要**时`layer.source`是该类型`vector`。
    - `layer.filter` **`大批 `?** （可选）指定源要素条件的表达式。仅显示与过滤器匹配的特征。样式规范包含有关限制的更多信息``filter` `参数和可用`表达式`的完整列表 ``. 如果未提供过滤器，则将显示源（或矢量切片集的源层）中的所有要素。
    - `layer.paint` **`Object`?** （可选）图层的绘制属性。可用的油漆特性因`layer.type`. `样式规范中`提供了每种图层类型的绘制属性的完整列表 ``. 如果未指定绘制属性，则将使用默认值。
    - `layer.layout` **`Object`?** （可选）图层的布局属性。可用的布局属性因 而异`layer.type`。`样式规范中`提供了每个图层类型的布局属性的完整列表 ``. 如果未指定布局属性，则将使用默认值。
    - `layer.maxzoom` **`number`?** （可选）图层的最大缩放级别。在缩放级别等于或大于 maxzoom 时，图层将被隐藏。该值可以是`0`和`24`（包括）之间的任何数字。如果未提供 maxzoom，则图层将在有可用图块的所有缩放级别上可见。
    - `layer.minzoom` **`number`?** （可选）图层的最小缩放级别。当缩放级别小于 minzoom 时，图层将被隐藏。该值可以是`0`和`24`（包括）之间的任何数字。如果未提供 minzoom，则图层将在有可用图块的所有缩放级别上可见。
    - `layer.metadata` **`Object`?** （可选）用于跟踪图层的任意属性，但不影响渲染。
    - `layer.renderingMode` **`string`?** 这仅适用于类型为 的图层`custom`。有关更多信息，请参阅[CustomLayerInterface][276]。
- `beforeId` **`string`?** 在现有图层之前插入新图层的现有图层的 ID，从而使新图层在视觉上出现在现有图层下方。如果未指定此参数，则图层将附加到图层数组的末尾，并在视觉上显示在所有其他图层之上。

#### Examples
```
// Add a circle layer with a vector source
map.addLayer({
  id: 'points-of-interest',
  source: {
    type: 'vector',
    url: 'your url'
  },
  'source-layer': 'poi_label',
  type: 'circle',
  paint: {
    // Style Specification paint properties
  },
  layout: {
    // Style Specification layout properties
  }
});
```

```
// Define a source before using it to create a new layer
map.addSource('state-data', {
  type: 'geojson',
  data: 'path/to/data.geojson'
});

map.addLayer({
  id: 'states',
  // References the GeoJSON source defined above
  // and does not require a `source-layer`
  source: 'state-data',
  type: 'symbol',
  layout: {
    // Set the label content to the
    // feature's `name` property
    text-field: ['get', 'name']
  }
});
```

```
// Add a new symbol layer before an existing layer
map.addLayer({
  id: 'states',
  // References a source that's already been defined
  source: 'state-data',
  type: 'symbol',
  layout: {
    // Set the label content to the
    // feature's `name` property
    text-field: ['get', 'name']
  }
// Add the layer before the existing `cities` layer
}, 'cities');
```

返回**`地图`** `this`

### moveLayer
将图层移动到不同的 z 位置。

#### Parameters
- `id` **`string`** 要移动的图层的 ID。
- `beforeId` **`string`?** 要在之前插入新图层的现有图层的 ID。查看地图时，`id`图层将出现在`beforeId`图层下方。如果`beforeId`省略，图层将被附加到图层数组的末尾并出现在地图上的所有其他图层之上。

#### Examples
```
// Move a layer with ID 'polygon' before the layer with ID 'country-label'. The `polygon` layer will appear beneath the `country-label` layer on the map.
map.moveLayer('polygon', 'country-label');
```

返回**`地图`** `this`

### removeLayer
从地图的样式中删除具有给定 ID 的图层。

如果不存在这样的层，`error`则会触发一个事件。

#### Parameters
- `id` **`string`** 要删除的图层的 id

#### Examples
```
// If a layer with ID 'state-data' exists, remove it.
if (map.getLayer('state-data')) map.removeLayer('state-data');
```

### getLayer

返回地图样式中具有指定 ID 的图层。

#### Parameters
- `id` **`string`** 要获取的图层的 ID。

#### Examples
```
var stateDataLayer = map.getLayer('state-data');
```

返回**`Object`?** 具有指定 ID 的图层，或者`undefined` 如果 ID 对应于不存在的图层。

### setLayerZoomRange
设置指定样式图层的缩放范围。缩放范围包括 `最小缩放级别` 和`最大缩放级别` 图层将被渲染。

注意：对于使用矢量源的样式图层，样式图层无法以低于_源图层_的最小缩放级别的缩放级别进行渲染，因为这些缩放级别不存在数据。如果源图层的最小缩放级别高于样式图层中定义的最小缩放级别，则不会在缩放范围内的所有缩放级别渲染样式图层。

#### Parameters
- `layerId` **`string`** 将应用缩放范围的图层的 ID。
- `minzoom` **`number`** 要设置的最小缩放 (0-24)。
- `maxzoom` **`number`** 要设置的最大缩放 (0-24)。

#### Examples
```
map.setLayerZoomRange('my-layer', 2, 5);
```

返回**`地图`** `this`

### setFilter

为指定的样式层设置过滤器。

过滤器控制样式层从其源呈现的特征。过滤器表达式计算出的任何要素`true`都将在地图上呈现。那些虚假的将被隐藏。

使用`setFilter`显示源数据的子集。

要清除过滤器，请传递`null`或`undefined`作为第二个参数。

#### Parameters
- `layerId` **`string`** 将应用过滤器的图层的 ID。
- `filter` **( `Array`| null | `undefined`)**过滤器，符合 Style Specification 的 `过滤器定义 `. 如果提供`null`或`undefined`，则该函数会从图层中删除任何现有过滤器。
- `options` **`Object`?** 选项对象。（可选，默认`{}`）
    - `options.validate` **`boolean`**是否检查过滤器是否符合样式规范。禁用验证是一种性能优化，只有在您之前验证过将传递给此函数的值时才应使用。（可选，默认`true`）

#### Examples
```
// display only features with the 'name' property 'USA'
map.setFilter('my-layer', ['==', ['get', 'name'], 'USA']);
```

```
// display only features with five or more 'available-spots'
map.setFilter('bike-docks', ['>=', ['get', 'available-spots'], 5]);
```

```
// remove the filter for the 'bike-docks' style layer
map.setFilter('bike-docks', null);
```

返回**`地图`** `this`

### getFilter
返回应用于指定样式层的过滤器。

#### Parameters
- `layerId` **`string`** 要获取其过滤器的样式图层的 ID。

返回**`Array`**图层的过滤器。

### setPaintProperty

设置指定样式层中绘制属性的值。

#### Parameters
- `layerId` **`string`** 要在其中设置 Paint 属性的图层的 ID。
- `name` **`string`** 要设置的绘制属性的名称。
- `value` **any**要设置的paint 属性的值。必须是适合该属性的类型，如`样式规范中`所定义 ``.
- `options` **`Object`?** 选项对象。（可选，默认`{}`）
    - `options.validate` **`boolean`**是否检查是否`value`符合样式规范。禁用验证是一种性能优化，只有在您之前验证过将传递给此函数的值时才应使用。（可选，默认`true`）

#### Examples
```
map.setPaintProperty('my-layer', 'fill-color', '#faafee');
```

返回**`地图`** `this`

### getPaintProperty
返回指定样式层中绘制属性的值。

#### Parameters
- `layerId` **`string`** 从中获取paint属性的图层的ID。
- `name` **`string`** 要获取的油漆属性的名称。

返回**任何**指定的paint属性的值。

### setLayoutProperty

设置指定样式层中布局属性的值。

#### Parameters
- `layerId` **`string`** 要在其中设置布局属性的图层的 ID。
- `name` **`string`** 要设置的布局属性的名称。
- `value` **any**布局属性的值。必须是适合该属性的类型，如`样式规范中`所定义 ``.
- `options` **`Object`?** 选项对象。（可选，默认`{}`）
- `options.validate` **`boolean`**是否检查是否`value`符合样式规范。禁用验证是一种性能优化，只有在您之前验证过将传递给此函数的值时才应使用。（可选，默认`true`）

#### Examples
```
map.setLayoutProperty('my-layer', 'visibility', 'none');
```

返回**`地图`** `this`

### getLayoutProperty
返回指定样式层中布局属性的值。

#### Parameters
- `layerId` **`string`** 要从中获取布局属性的图层的 ID。
- `name` **`string`** 要获取的布局属性的名称。

返回**任何**指定布局属性的值。

### setLight

设置灯光值的任意组合。

#### Parameters
- `light` **LightSpecification**要设置的光属性。必须符合`样式规范 `.
- `options` **`Object`?** 选项对象。（可选，默认`{}`）
    - `options.validate` **`boolean`**是否检查过滤器是否符合样式规范。禁用验证是一种性能优化，只有在您之前验证过将传递给此函数的值时才应使用。（可选，默认`true`）

#### Examples
```
var layerVisibility = map.getLayoutProperty('my-layer', 'visibility');
```

返回**`地图`** `this`

### getLight
返回灯光对象的值。

返回**`Object`**样式的 light Light 属性。

### setTerrain
设置样式的地形属性。

#### Parameters
- `terrain` **TerrainSpecification**要设置的地形属性。如果提供`null`或`undefined`，则函数会移除地形。

#### Examples
```
map.addSource('dem', {
    'type': 'raster-dem',
    'url': 'your url',
    'tileSize': 512,
    'maxzoom': 14
});
// add the DEM source as a terrain layer with exaggerated height
map.setTerrain({ 'source': 'dem', 'exaggeration': 1.5 });
```

返回**`地图`** `this`

### getTerrain
返回地形规范或`null`地形未在地图上设置。

返回**`Object`**地形的地形规范属性。

### setFog
设置样式的雾属性。

#### Parameters
- `fog` **FogSpecification**要设置的雾属性。 如果提供`null`或`undefined`，则此函数调用将从地图中移除雾。

#### Examples
```
map.setFog({
 "range": [1.0, 12.0],
 "color": 'white',
 "horizon-blend": 0.1
});
```

返回**`地图`** `this`

### getFog
返回雾规范或`null`地图上是否未设置雾。

返回**`Object`**样式的雾雾规范属性。

### queryTerrainElevation
查询当前加载的某个地理位置的高程数据。`meters`相对于平均海平面返回高程。`null`如果`terrain`已禁用或尚未加载该位置的地形数据，则返回。

为了保证加载地形数据，确保地理位置可见，等待`idle`事件发生。

#### Parameters
- `lnglat` **[LngLatLike][284]**要查询的地理位置。
- `options` **`海拔查询选项`？**选项对象
    - `options.exaggerated` **`boolean`**当`true`返回具有`exaggeration`来自已应用样式的值的地形高程时。当`false`，返回未应用样式的基础数据的原始值。（可选，默认`true`）

#### Examples
```
var coordinate = [-122.420679, 37.772537];
var elevation = map.queryTerrainElevation(coordinate);
```

返回**( `number`| null)**以米为单位的海拔高度

### setFeatureState

设置`state`特征的 。功能`state`是在运行时分配给功能的一组用户定义的键值对。使用此方法时，`state`对象将与特征状态中的任何现有键值对合并。要素由其`feature.id`属性标识，该属性可以是任何数字或字符串。

此方法只能用于具有`feature.id`属性的源。该`feature.id`属性可以通过三种方式进行定义：

- 对于矢量或 GeoJSON 源，包括`id`原始数据文件中的属性。
- 对于矢量或 GeoJSON 源，使用 ``promoteId`` 定义源时的选项。
- 对于 GeoJSON 源，使用 ``generateId``选项`id`根据源数据中的特征索引自动分配一个。如果使用 更改要素数据`map.getSource('some id').setData(..)`，则可能需要考虑更新的`id`值重新应用状态。

_注意：您可以使用``feature-state`` 表达式出于样式目的访问功能状态对象中的值。_

#### Parameters
- `feature` **`Object`**特征标识符。从`Map#queryRenderedFeatures`或事件处理程序返回的特征对象 可用作特征标识符。
    - `feature.id` **( `number`| `string`) 功能的**唯一 ID。可以是整数或字符串，但仅当``promoteId`` 选项已应用于源或字符串可以转换为整数。
    - `feature.source` **`string`** 要素的矢量或 GeoJSON 源的 ID。
    - `feature.sourceLayer` **`string`?** （可选）_对于矢量切片源，`sourceLayer`是必需的。_
- `state` **`Object`**一组键值对。这些值应该是有效的 JSON 类型。

#### Examples
```
// When the mouse moves over the `my-layer` layer, update
// the feature state for the feature under the mouse
map.on('mousemove', 'my-layer', function(e) {
  if (e.features.length > 0) {
    map.setFeatureState({
      source: 'my-source',
      sourceLayer: 'my-source-layer',
      id: e.features[0].id,
    }, {
      hover: true
    });
  }
});
```

返回**[Map][1]**地图对象。

### removeFeatureState
删除`state`功能的 ，将其设置回默认行为。如果仅`feature.source`指定了 a ，它将从该源中删除所有功能的状态。如果`feature.id`还指定了，它将删除该功能状态的所有键。如果`key`还指定了，它只会从该功能的状态中删除该键。要素由其`feature.id`属性标识，该属性可以是任何数字或字符串。

#### Parameters
- `feature` **`Object`**在哪里删除状态的标识符。它可以是来源、功能或功能的特定键。从`Map#queryRenderedFeatures`或事件处理程序返回的特征对象可用作特征标识符。
    - `feature.id` **( `number`| `string`) 功能的**唯一 ID。可以是整数或字符串，但仅当``promoteId`` 选项已应用于源或字符串可以转换为整数。
    - `feature.source` **`string`** 要素的矢量或 GeoJSON 源的 ID。
    - `feature.sourceLayer` **`string`?** （可选）_对于矢量切片源，`sourceLayer`是必需的。_
- `key` **`string`** （可选）要重置的功能状态的键。

#### Examples
```
// Reset the entire state object for all features
// in the `my-source` source
map.removeFeatureState({
  source: 'my-source'
});
```

```
// When the mouse leaves the `my-layer` layer,
// reset the entire state object for the
// feature under the mouse
map.on('mouseleave', 'my-layer', function(e) {
  map.removeFeatureState({
    source: 'my-source',
    sourceLayer: 'my-source-layer',
    id: e.features[0].id
  });
});
```

```
// When the mouse leaves the `my-layer` layer,
// reset only the `hover` key-value pair in the
// state for the feature under the mouse
map.on('mouseleave', 'my-layer', function(e) {
  map.removeFeatureState({
    source: 'my-source',
    sourceLayer: 'my-source-layer',
    id: e.features[0].id
  }, 'hover');
});
```

### getFeatureState
获取`state`功能的 。功能`state`是在运行时分配给功能的一组用户定义的键值对。要素由其`feature.id`属性标识，该属性可以是任何数字或字符串。

_注意：要访问功能状态对象中的值以设置功能样式，请使用``feature-state`表达式 `._

#### Parameters
- `feature` **`Object`**特征标识符。从`Map#queryRenderedFeatures`或事件处理程序返回的特征对象 可用作特征标识符。
    - `feature.id` **( `number`| `string`) 功能的**唯一 ID。可以是整数或字符串，但仅当``promoteId`` 选项已应用于源或字符串可以转换为整数。
    - `feature.source` **`string`** 要素的矢量或 GeoJSON 源的 ID。
    - `feature.sourceLayer` **`string`?** （可选）_对于矢量切片源，`sourceLayer`是必需的。_

#### Examples
```
// When the mouse moves over the `my-layer` layer,
// get the feature state for the feature under the mouse
map.on('mousemove', 'my-layer', function(e) {
  if (e.features.length > 0) {
    map.getFeatureState({
      source: 'my-source',
      sourceLayer: 'my-source-layer',
      id: e.features[0].id
    });
  }
});
```

返回**`Object`**功能状态：在运行时分配给功能的一组键值对。

### getContainer
返回地图的包含 HTML 元素。

返回**`HTMLElement`**地图的容器。

### getCanvasContainer

返回包含地图`<canvas>`元素的 HTML元素。

如果要将非叠加层添加到地图，则应将它们附加到此元素。

这是地图交互性（例如平移和缩放）的事件绑定所附加到的元素。它将接收来自子元素（例如 ）的冒泡事件`<canvas>`，但不会接收来自地图控件的冒泡事件。

返回**`HTMLElement`**地图的容器`<canvas>`。

### getCanvas

返回地图的`<canvas>`元素。

返回**`HTMLCanvasElement `**地图的`<canvas>`元素。

### loaded
返回一个布尔值，指示地图是否已完全加载。

返回`false`如果样式还没有完全加载，或者如果已经更改了源或风格还没有完全加载。

返回**`boolean`**一个布尔值，指示地图是否已完全加载。

### remove
清理并释放与此地图关联的所有内部资源。

这包括 DOM 元素、事件绑定、Web Worker 和 WebGL 资源。

当您使用完地图并希望确保它不再消耗浏览器资源时，请使用此方法。之后，您不得在地图上调用任何其他方法。

### triggerRepaint

触发单帧渲染。当图层的属性或与图层源关联的属性发生更改时，将此方法与自定义图层一起使用以重新绘制地图。在渲染下一帧之前多次调用它仍然会导致只渲染一个帧。

#### Examples
```
map.triggerRepaint();
```

### showTileBoundaries
获取和设置一个布尔值，指示地图是否将围绕每个图块和图块 ID 呈现轮廓。这些图块边界对于调试很有用。

第一个矢量源的未压缩文件大小绘制在每个图块的左上角，在图块 ID 旁边。

类型： `boolean`

#### Examples
```
map.showTileBoundaries = true;
```

### showTerrainWireframe
获取并设置一个布尔值，指示地图是否将在显示的地形顶部呈现线框。用于调试。

线框始终为红色，仅在地形处于活动状态时绘制。

类型： `boolean`

#### Examples
```
map.showTerrainWireframe = true;
```

### showPadding
获取并设置一个布尔值，指示地图是否将填充偏移可视化。

类型： `boolean`

### showCollisionBoxes
获取和设置一个布尔值，指示地图是否将围绕数据源中的所有符号呈现框，显示哪些符号已渲染或由于碰撞而隐藏。此信息对调试很有用。

类型： `boolean`

### repaint
获取和设置一个布尔值，指示地图是否会连续重绘。此信息可用于分析性能。

类型： `boolean`

### version
正在使用的版本。

类型： `string`

### getCenter

返回地图的地理中心点。

#### Examples
```
// return a LngLat object such as {lng: 0, lat: 0}
var center = map.getCenter();
// access longitude and latitude values directly
var {longitude, latitude} = map.getCenter();
```

返回**[LngLat][230]**地图的地理中心点。

### setCenter
设置地图的地理中心点。相当于`jumpTo({center: center})`。

#### Parameters
- `center` **[LngLatLike][284]**要设置的中心点。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
map.setCenter([-74, 38]);
```

返回**`地图`** `this`

### panBy

按指定的偏移量平移地图。

#### Parameters
- `offset` **[PointLike][166]** `x`和`y`平移地图所**`依据的`**坐标。
- `options` **`动画选项`？**选项对象。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

返回**`地图`** `this`

### panTo

使用动画过渡将地图平移到指定位置。

#### Parameters
- `lnglat` **`LngLatLike 要将`**地图平**`移到`**的位置。
- `options` **`动画选项`？**描述过渡目标和动画的选项。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
map.panTo([-74, 38]);
```

```
// Specify that the panTo animation should last 5000 milliseconds.
map.panTo([-74, 38], {duration: 5000});
```

返回**`地图`** `this`

### getZoom
返回地图的当前缩放级别。

#### Examples
```
map.getZoom();
```

返回**`number`**地图的当前缩放级别。

### setZoom
设置地图的缩放级别。相当于`jumpTo({zoom: zoom})`。

#### Parameters
- `zoom` **`number`** 要设置的缩放级别 (0-20)。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
// Zoom to the zoom level 5 without an animated transition
map.setZoom(5);
```

返回**`地图`** `this`

### zoomTo
使用动画过渡将地图缩放到指定的缩放级别。

#### Parameters
- `zoom` **`number`** 要过渡到的缩放级别。
- `options` **`动画选项`？**选项对象。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
// Zoom to the zoom level 5 without an animated transition
map.zoomTo(5);
// Zoom to the zoom level 8 with an animated transition
map.zoomTo(8, {
  duration: 2000,
  offset: [100, 50]
});
```

返回**`地图`** `this`

### zoomIn
将地图的缩放级别增加 1。

#### Parameters
- `options` **`动画选项`？**选项对象。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
// zoom the map in one level with a custom animation duration
map.zoomIn({duration: 1000});
```

返回**`地图`** `this`

### zoomOut
将地图的缩放级别降低 1。

#### Parameters
- `options` **`动画选项`？**选项对象。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
// zoom the map out one level with a custom animation offset
map.zoomOut({offset: [80, 60]});
```

返回**`地图`** `this`

### getBearing

返回地图的当前方位。方位是“向上”的罗盘方向；例如，90° 的方位角使地图定向，使东面朝上。

返回**`number`**地图的当前方位。

### setBearing
设置地图的方位（旋转）。方位是“向上”的罗盘方向；例如，90° 的方位角使地图定向，使东面朝上。

相当于`jumpTo({bearing: bearing})`。

#### Parameters
- `bearing` **`number`** 所需的轴承。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
// rotate the map to 90 degrees
map.setBearing(90);
```

返回**`地图`** `this`

### getPadding
返回在地图视口周围应用的当前填充。

返回**[PaddingOptions][196]**地图视口周围的当前填充。

### setPadding
设置视口周围的填充（以像素为单位）。

相当于`jumpTo({padding: padding})`。

#### Parameters
- `padding` **[PaddingOptions][196]**所需的填充。格式：{左：数字，右：数字，上：数字，下：数字}
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
// Sets a left padding of 300px, and a top padding of 50px
map.setPadding({ left: 300, top: 50 });
```

返回**`地图`** `this`

### rotateTo
使用动画过渡将地图旋转到指定的方位。方位是“向上”的罗盘方向；例如，90° 的方位角使地图定向，使东面朝上。

#### Parameters
- `bearing` **`number`** 所需的轴承。
- `options` **`动画选项`？**选项对象。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

返回**`地图`** `this`

### resetNorth
旋转地图，使北方向上（0° 方位角），并带有动画过渡。

#### Parameters
- `options` **`动画选项`？**选项对象。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

返回**`地图`** `this`

### resetNorthPitch
旋转和倾斜地图，使北朝上（0° 方位角）且俯仰角为 0°，并带有动画过渡。

#### Parameters
- `options` **`动画选项`？**选项对象。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

返回**`地图`** `this`

### snapToNorth
如果当前方位足够接近它（即在`bearingSnap`阈值内），则捕捉地图使北朝上（0° 方位 ）。

#### Parameters
- `options` **`动画选项`？**选项对象。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

返回**`地图`** `this`

### getPitch
返回地图的当前倾斜度（倾斜度）。

返回**`number`**地图的当前间距，以距屏幕平面的度数为单位。

### setPitch
设置地图的倾斜度（倾斜度）。相当于`jumpTo({pitch: pitch})`。

#### Parameters
- `pitch` **`number`** 要设置的间距，以距屏幕平面的度数为单位 (0-60)。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

返回**`地图`** `this`

### cameraForBounds
#### Parameters
- `bounds` **[LngLatBoundsLike][299]**计算视口中这些边界的中心，并使用最高缩放级别，包括`Map#getMaxZoom()`适合视口的缩放级别。LngLatBounds 表示一个始终与轴承 0 轴对齐的框。
- `options` **`相机选项`？**选项对象。
    - `options.padding` **( `number`| [PaddingOptions][196] )？**添加到给定边界的填充量（以像素为单位）。
    - `options.bearing` **`number`**动画结束时所需的地图方位，以度为单位。（可选，默认`0`）
    - `options.offset` **[PointLike][166]**相对于地图中心的给定边界的中心，以像素为单位。（可选，默认`[0,0]`）
    - `options.maxZoom` **`number`?** 相机过渡到指定边界时允许的最大缩放级别。

#### Examples
```
var bbox = [[-79, 43], [-73, 45]];
var newCameraTransform = map.cameraForBounds(bbox, {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});
```

返回**（[CameraOptions][194] |无效）**如果地图能够适合提供的界限，收益`CameraOptions`有 `center`，`zoom`和`bearing`。如果地图无法适应，方法将发出警告并返回未定义。

### fitBounds

平移和缩放地图以将其可见区域包含在指定的地理边界内。如果方位角非零，此函数还会将地图的方位角重置为 0。如果在地图上设置了填充，则边界适合插图。

#### Parameters
- `bounds` **[LngLatBoundsLike][299]**在视口中居中这些边界，并使用最高缩放级别，包括`Map#getMaxZoom()`适合它们在视口中的缩放级别。
- `options` **`Object`?** 除了以下字段之外，Options 还支持[AnimationOptions][195]和[CameraOptions][194]中的所有属性。
    - `options.padding` **( `number`| [PaddingOptions][196] )？**添加到给定边界的填充量（以像素为单位）。
    - `options.linear` **`boolean`**如果`true`，则地图使用 `Map#easeTo 进行转换`。如果`false`，则地图使用`Map#flyTo 进行转换`。有关可用选项的信息，请参阅这些函数和[AnimationOptions][195]。（可选，默认`false`）
    - `options.easing` **功能？**动画过渡的缓动函数。请参阅`动画选项`。
    - `options.offset` **[PointLike][166]**相对于地图中心的给定边界的中心，以像素为单位。（可选，默认`[0,0]`）
    - `options.maxZoom` **`number`?** 当地图视图转换到指定边界时允许的最大缩放级别。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
var bbox = [[-79, 43], [-73, 45]];
map.fitBounds(bbox, {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});
```

返回**`地图`** `this`

### fitScreenCoordinates

一旦地图旋转到指定的方位，平移、旋转和缩放地图以适应由点 p0 和 p1 构成的框。要缩放而不旋转，请传入当前地图方位。

#### Parameters
- `p0` **[PointLike][166]**屏幕上的第一个点，以像素坐标表示
- `p1` **[PointLike][166]**屏幕上的第二个点，以像素坐标表示
- `bearing` **`number`**动画结束时所需的地图方位，以度为单位。如果贴图具有非零间距，则忽略此值。
- `options` **任何？**选项对象。
    - `options.padding` **( `number`| [PaddingOptions][196] )？**添加到给定边界的填充量（以像素为单位）。
    - `options.linear` **`boolean`**如果`true`，则地图使用 `Map#easeTo 进行转换`。如果`false`，则地图使用`Map#flyTo 进行转换`。有关可用选项的信息，请参阅这些函数和[AnimationOptions][195]。（可选，默认`false`）
    - `options.easing` **功能？**动画过渡的缓动函数。请参阅`动画选项`。
    - `options.offset` **[PointLike][166]**相对于地图中心的给定边界的中心，以像素为单位。（可选，默认`[0,0]`）
    - `options.maxZoom` **`number`?** 当地图视图转换到指定边界时允许的最大缩放级别。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
var p0 = [220, 400];
var p1 = [500, 900];
map.fitScreenCoordinates(p0, p1, map.getBearing(), {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});
```

返回**`地图`** `this`

### jumpTo

更改中心、缩放、方位和俯仰的任意组合，无需动画过渡。对于 中未指定的任何详细信息，地图将保留其当前值`options`。

#### Parameters
- `options` **[CameraOptions][194]**选项对象。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
// jump to coordinates at current zoom
map.jumpTo({center: [0, 0]});
// jump with zoom, pitch, and bearing options
map.jumpTo({
  center: [0, 0],
  zoom: 8,
  pitch: 45,
  bearing: 90
});
```

返回**`地图`** `this`

### getFreeCameraOptions
返回相机实体的位置和方向。

返回**[FreeCameraOptions][309]**相机状态

### setFreeCameraOptions
`FreeCameraOptions`提供对底层相机实体的更直接访问。为了向后兼容，使用此 API 的状态集也必须是可表示的 `CameraOptions`。如果向俯仰和方位表示的转换不明确，参数将被限制在有效范围内或作为无效丢弃。例如，如果导致相机颠倒、四元数长度为零或间距超过最大间距限制，则方向可能无效。

#### Parameters
- `options` **[FreeCameraOptions][309]** `FreeCameraOptions`对象
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

返回**`地图`** `this`

### easeTo

更改的任意组合`center`，`zoom`，`bearing`，`pitch`，并`padding`与新老值之间动画转换。对于 中未指定的任何详细信息，地图将保留其当前值`options`。

注意：如果用户`reduced motion`在其操作系统中启用了辅助功能，则转换将立即发生，除非`options`包含`essential: true`.

#### Parameters
- `options` **任何**描述过渡目标和动画的选项。接受[CameraOptions][194]和[AnimationOptions][195]。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

返回**`地图`** `this`

### flyTo

改变中心、缩放、方位和俯仰的任意组合，沿着一条唤起飞行的曲线动画过渡。动画无缝地结合了缩放和平移，以帮助用户即使在穿越很远的距离后也能保持她的方位。

注意：动画将被跳过，这将`jumpTo` 与用户`reduced motion`在其操作系统中启用辅助功能时的行为等效，除非 'options' 包含`essential: true`.

#### Parameters
- `options` **`Object`**描述过渡目标和动画的选项。接受[CameraOptions][194]、[AnimationOptions][195]和以下附加选项。
    - `options.curve` **`number`**沿飞行路径发生的缩放“曲线”。高值最大化放大动画的缩放，而低值最小化缩放以获得更接近`Map#easeTo`的效果。1.42 是参与者在`van Wijk (2003) 中`讨论的用户研究中选择的平均值 ``. 的值 `Math.pow(6, 0.25)`将等价于均方根平均速度。值为 1 将产生圆周运动。（可选，默认`1.42`）
    - `options.minZoom` **`number`?** 飞行路径峰值处的基于零的缩放级别。如果 `options.curve`指定，则忽略此选项。
    - `options.speed` **`number`**相对于 定义的动画的平均速度 `options.curve`。速度为 1.2 意味着地图似乎每秒沿着飞行路径移动 1.2 倍`options.curve`屏幕。一_屏_是地图的可见跨度。它不对应于固定的物理距离，而是因缩放级别而异。（可选，默认`1.2`）
    - `options.screenSpeed` **`number`?** 假设线性时间曲线，以每秒屏幕数为单位测量的动画平均速度。如果`options.speed`指定，则忽略此选项。
    - `options.maxDuration` **`number`?** 动画的最长持续时间，以毫秒为单位。如果持续时间超过最大持续时间，则重置为 0。
- `eventData` **`Object`?** 要添加到此方法触发的事件的事件对象的附加属性。

#### Examples
```
// fly with default options to null island
map.flyTo({center: [0, 0], zoom: 9});
// using flyTo options
map.flyTo({
  center: [0, 0],
  zoom: 9,
  speed: 0.2,
  curve: 1,
  easing(t) {
    return t;
  }
});
```

返回**`地图`** `this`

### stop
停止任何正在进行的动画过渡。

返回**`地图`** `this`

### resize
在调整地图大小后立即触发。

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// immediately after the map has been resized.
map.on('resize', function() {
  console.log('A resize event occurred.');
});
```

### remove
在使用`Map.event:remove 删除`地图后立即`触发`。

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just after the map is removed.
map.on('remove', function() {
  console.log('A remove event occurred.');
});
```

### mousedown

当在地图内按下定位设备（通常是鼠标）时触发。

**注意：**此事件与可选`layerId`参数兼容。如果`layerId`作为第二个参数包含在`Map#on 中`，则仅当在指定图层的可见部分内按下光标时，事件侦听器才会触发。

#### Properties
- `data` **`地图鼠标事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener
map.on('mousedown', function() {
  console.log('A mousedown event has occurred.');
});
```

```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener for a specific layer
map.on('mousedown', 'poi-label', function() {
  console.log('A mousedown event has occurred on a visible portion of the poi-label layer.');
});
```

### mouseup

当定位设备（通常是鼠标）在地图内释放时触发。

**注意：**此事件与可选`layerId`参数兼容。如果`layerId`在`Map#on 中`作为第二个参数包含在内，则仅当在指定图层的可见部分内释放光标时，事件侦听器才会触发。

#### Properties
- `data` **`地图鼠标事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener
map.on('mouseup', function() {
  console.log('A mouseup event has occurred.');
});
```

```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener for a specific layer
map.on('mouseup', 'poi-label', function() {
  console.log('A mouseup event has occurred on a visible portion of the poi-label layer.');
});
```

### mouseover

当定位设备（通常是鼠标）在地图内移动时触发。当您在包含地图的网页上移动光标时，每次进入地图或任何子元素时都会触发该事件。

**注意：**此事件与可选`layerId`参数兼容。如果`layerId`作为第二个参数包含在`Map#on 中`，则仅当光标移动到指定图层的可见部分内时，事件侦听器才会触发。

#### Properties
- `data` **`地图鼠标事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener
map.on('mouseover', function() {
  console.log('A mouseover event has occurred.');
});
```

```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener for a specific layer
map.on('mouseover', 'poi-label', function() {
  console.log('A mouseover event has occurred on a visible portion of the poi-label layer.');
});
```

### mousemove

当光标在地图内时移动定点设备（通常是鼠标）时触发。当您在地图上移动光标时，每次光标在地图内更改位置时都会触发该事件。

**注意：**此事件与可选`layerId`参数兼容。如果`layerId`作为第二个参数包含在`Map#on 中`，则仅当光标位于指定图层的可见部分内时，事件侦听器才会触发。

#### Properties
- `data` **`地图鼠标事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener
map.on('mousemove', function() {
  console.log('A mousemove event has occurred.');
});
```

```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener for a specific layer
map.on('mousemove', 'poi-label', function() {
  console.log('A mousemove event has occurred on a visible portion of the poi-label layer.');
});
```

### click

当在地图上的同一点按下并释放定位设备（通常是鼠标）时触发。

**注意：**此事件与可选`layerId`参数兼容。如果`layerId`作为第二个参数包含在`Map#on 中`，则仅当按下和释放的点包含指定图层的可见部分时，事件侦听器才会触发。

#### Properties
- `data` **`地图鼠标事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener
map.on('click', function(e) {
  console.log('A click event has occurred at ' + e.lngLat);
});
```

```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener for a specific layer
map.on('click', 'poi-label', function(e) {
  console.log('A click event has occurred on a visible portion of the poi-label layer at ' + e.lngLat);
});
```

### dblclick
当定位设备（通常是鼠标）在地图上的同一点快速连续按下和释放两次时触发。

**注意：**此事件与可选`layerId`参数兼容。如果`layerId`作为第二个参数包含在`Map#on 中`，则仅当单击两次的点包含指定图层的可见部分时，事件侦听器才会触发。

#### Properties
- `data` **`地图鼠标事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener
map.on('dblclick', function(e) {
  console.log('A dblclick event has occurred at ' + e.lngLat);
});
```

```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener for a specific layer
map.on('dblclick', 'poi-label', function(e) {
  console.log('A dblclick event has occurred on a visible portion of the poi-label layer at ' + e.lngLat);
});
```

### mouseenter

当定点设备（通常是鼠标）从该图层外部或地图画布外部进入指定图层的可见部分时触发。

**重要提示：**只有当`Map#on`包含三个参数时才能侦听此事件，其中第二个参数指定所需的层。

#### Properties
- `data` **`地图鼠标事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener
map.on('mouseenter', 'water', function() {
  console.log('A mouseenter event occurred on a visible portion of the water layer.');
});
```

### mouseleave

当定点设备（通常是鼠标）离开指定图层的可见部分或从指定图层移动到地图画布外时触发。

**注意：**要检测鼠标何时离开画布，独立于图层，请改用`Map.event:mouseout`。

**重要提示：**只有当`Map#on`包含三个参数时才能侦听此事件，其中第二个参数指定所需的层。

#### Properties
- `data` **`地图鼠标事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when the pointing device leaves
// a visible portion of the specified layer.
map.on('mouseleave', 'water', function() {
  console.log('A mouseleave event occurred.');
});
```

### mouseout
当点设备（通常是鼠标）离开地图的画布时触发。

#### Properties
- `data` **`地图鼠标事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when the pointing device leave's
// the map's canvas.
map.on('mouseout', function() {
  console.log('A mouseout event occurred.');
});
```

### contextmenu
单击鼠标右键或在地图内按下上下文菜单键时触发。

#### Properties
- `data` **`地图鼠标事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when the right mouse button is
// pressed within the map.
map.on('contextmenu', function() {
  console.log('A contextmenu event occurred.');
});
```

### wheel
当一个 ``wheel``事件发生在地图内。

#### Properties
- `data` **`地图轮事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when a wheel event occurs within the map.
map.on('wheel', function() {
  console.log('A wheel event occurred.');
});
```

### touchstart

当一个 ``touchstart`` 事件发生在地图内。

#### Properties
- `data` **[MapTouchEvent][232]** // 初始化地图 var map = new vjmap.Map({ // 地图选项 }); // 设置一个事件侦听器，当地图中发生 touchstart 事件时触发该事件。map.on('touchstart', function() { console.log('A touchstart 事件发生。'); });

### touchend

当一个 ``touchend`` 事件发生在地图内。

#### Properties
- `data` **`地图触摸事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when a touchstart event occurs within the map.
map.on('touchstart', function() {
  console.log('A touchstart event occurred.');
});
```

### touchmove

当一个 ``touchmove`` 事件发生在地图内。

#### Properties
- `data` **`地图触摸事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when a touchmove event occurs within the map.
map.on('touchmove', function() {
  console.log('A touchmove event occurred.');
});
```

### touchcancel
当一个 ``touchcancel`` 事件发生在地图内。

#### Properties
- `data` **`地图触摸事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when a touchcancel event occurs within the map.
map.on('touchcancel', function() {
  console.log('A touchcancel event occurred.');
});
```

### movestart
作为用户交互或`Map#jumpTo`等方法的结果，在地图开始从一个视图过渡到另一个视图之前`触发`。

#### Properties
- `data` **{originalEvent: `DragEvent `}**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just before the map begins a transition
// from one view to another.
map.on('movestart', function() {
  console.log('A movestart` event occurred.');
});
```

### move

作为用户交互或`Map#flyTo`等方法的结果，在从一个视图到另一个视图的动画过渡期间重复`触发`。

#### Properties
- `data` **( [MapMouseEvent][226] | [MapTouchEvent][232] )**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// repeatedly during an animated transition.
map.on('move', function() {
  console.log('A move event occurred.');
});
```

### moveend

作为用户交互或`Map#jumpTo`等方法的结果，在地图完成从一个视图到另一个视图的转换后`立即触发`。

#### Properties
- `data` **{originalEvent: `DragEvent `}**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just after the map completes a transition.
map.on('moveend', function() {
  console.log('A moveend event occurred.');
});
```

### dragstart
当“拖动平移”交互开始时触发。请参阅[DragPanHandler][191]。

#### Properties
- `data` **{originalEvent: `DragEvent `}**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when a "drag to pan" interaction starts.
map.on('dragstart', function() {
  console.log('A dragstart event occurred.');
});
```

### drag
在“拖动平移”交互期间反复触发。请参阅[DragPanHandler][191]。

#### Properties
- `data` **( [MapMouseEvent][226] | [MapTouchEvent][232] )**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// repeatedly  during a "drag to pan" interaction.
map.on('drag', function() {
  console.log('A drag event occurred.');
});
```

### dragend

当“拖动平移”交互结束时触发。请参阅[DragPanHandler][191]。

#### Properties
- `data` **{originalEvent: `DragEvent `}**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when a "drag to pan" interaction ends.
map.on('dragend', function() {
  console.log('A dragend event occurred.');
});
```

### zoomstart
作为用户交互或`Map#flyTo`等方法的结果，在地图开始从一个缩放级别过渡到另一个缩放级别之前`触发`。

#### Properties
- `data` **( [MapMouseEvent][226] | [MapTouchEvent][232] )**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just before a zoom transition starts.
map.on('zoomstart', function() {
  console.log('A zoomstart event occurred.');
});
```

### zoom

作为用户交互或`Map#flyTo`等方法的结果，在从一个缩放级别到另一个缩放级别的动画过渡期间重复`触发`。

#### Properties
- `data` **( [MapMouseEvent][226] | [MapTouchEvent][232] )**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// repeatedly during a zoom transition.
map.on('zoom', function() {
  console.log('A zoom event occurred.');
});
```

### zoomend
作为用户交互或`Map#flyTo`等方法的结果，在地图完成从一个缩放级别到另一个缩放级别的转换后`立即触发`。缩放过渡通常会在渲染完成之前结束，因此如果您需要等待渲染完成，请改用`Map#idle`事件。

#### Properties
- `data` **( [MapMouseEvent][226] | [MapTouchEvent][232] )**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just after a zoom transition finishes.
map.on('zoomend', function() {
  console.log('A zoomend event occurred.');
});
```

### rotatestart
当“拖动旋转”交互开始时触发。请参阅[DragRotateHandler][192]。

#### Properties
- `data` **( [MapMouseEvent][226] | [MapTouchEvent][232] )**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just before a "drag to rotate" interaction starts.
map.on('rotatestart', function() {
  console.log('A rotatestart event occurred.');
});
```

### rotate
在“拖动以旋转”交互期间反复触发。请参阅[DragRotateHandler][192]。

#### Properties
- `data` **( [MapMouseEvent][226] | [MapTouchEvent][232] )**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// repeatedly during "drag to rotate" interaction.
map.on('rotate', function() {
  console.log('A rotate event occurred.');
});
```

### rotateend
当“拖动旋转”交互结束时触发。请参阅[DragRotateHandler][192]。

#### Properties
- `data` **( [MapMouseEvent][226] | [MapTouchEvent][232] )**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just after a "drag to rotate" interaction ends.
map.on('rotateend', function() {
  console.log('A rotateend event occurred.');
});
```

### pitchstart
每当地图的俯仰（倾斜）由于用户交互或`Map#flyTo`等方法而开始发生变化时`触发`。

#### Properties
- `data` **地图事件数据**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just before a pitch (tilt) transition starts.
map.on('pitchstart', function() {
  console.log('A pitchstart event occurred.');
});
```

### pitch
作为用户交互或`Map#flyTo`等方法的结果，在一个状态和另一个状态之间的地图俯仰（倾斜）动画期间重复`触发`。

#### Properties
- `data` **地图事件数据**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// repeatedly during a pitch (tilt) transition.
map.on('pitch', function() {
  console.log('A pitch event occurred.');
});
```

### pitchend
由于用户交互或`Map#flyTo 之类的`方法，在地图的俯仰（倾斜）完成更改后立即`触发`。

#### Properties
- `data` **地图事件数据**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just after a pitch (tilt) transition ends.
map.on('pitchend', function() {
  console.log('A pitchend event occurred.');
});
```

### boxzoomstart
当“框缩放”交互开始时触发。请参阅[BoxZoomHandler][178]。

#### Properties
- `data` **`地图框缩放事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just before a "box zoom" interaction starts.
map.on('boxzoomstart', function() {
  console.log('A boxzoomstart event occurred.');
});
```

### boxzoomend
当“框缩放”交互结束时触发。请参阅[BoxZoomHandler][178]。

类型： `Object`

#### Properties
- `data` **`地图框缩放事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just after a "box zoom" interaction ends.
map.on('boxzoomend', function() {
  console.log('A boxzoomend event occurred.');
});
```

### boxzoomcancel
当用户取消“框缩放”交互或边界框不满足最小尺寸阈值时触发。请参阅[BoxZoomHandler][178]。

#### Properties
- `data` **`地图框缩放事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// the user cancels a "box zoom" interaction.
map.on('boxzoomcancel', function() {
  console.log('A boxzoomcancel event occurred.');
});
```

### webglcontextlost
当 WebGL 上下文丢失时触发。

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when the WebGL context is lost.
map.on('webglcontextlost', function() {
  console.log('A webglcontextlost event occurred.');
});
```

### webglcontextrestored
当 WebGL 上下文恢复时触发。

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when the WebGL context is restored.
map.on('webglcontextrestored', function() {
  console.log('A webglcontextrestored event occurred.');
});
```

### load

在下载了所有必要的资源并且地图的第一次视觉完整渲染发生后立即触发。

类型： `Object`

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when the map has finished loading.
map.on('load', function() {
  console.log('A load event occurred.');
});
```

### render
每当地图绘制到屏幕时触发，作为结果

- 更改地图的位置、缩放、俯仰或方位
- 地图样式的更改
- 对 GeoJSON 源的更改
- 加载矢量切片、GeoJSON 文件、字形或精灵

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// whenever the map is drawn to the screen.
map.on('render', function() {
  console.log('A render event occurred.');
});
```

### idle
在地图进入“空闲”状态之前渲染的最后一帧之后触发：

- 没有正在进行的相机转换
- 当前请求的所有图块都已加载
- 所有淡入淡出/过渡动画已完成

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// just before the map enters an "idle" state.
map.on('idle', function() {
  console.log('A idle event occurred.');
});
```

### error
发生错误时触发。这是主要错误报告机制。我们使用事件而不是`throw`更好地适应异步操作。如果没有侦听器绑定到`error`事件，错误将打印到控制台。

#### Properties
- `data` **{错误：{消息：`string`}}**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when an error occurs.
map.on('error', function() {
  console.log('A error event occurred.');
});
```

### data

当任何地图数据加载或更改时触发。有关 详细信息，请参阅[MapDataEvent][237]。

#### Properties
- `data` **`地图数据事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when map data loads or changes.
map.on('data', function() {
  console.log('A data event occurred.');
});
```

### styledata
当地图的样式加载或更改时触发。有关详细信息，请参阅 [MapDataEvent][237]。

#### Properties
- `data` **`地图数据事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when the map's style loads or changes.
map.on('styledata', function() {
  console.log('A styledata event occurred.');
});
```

### sourcedata
当地图源之一加载或更改时触发，包括属于源的图块加载或更改。有关详细信息，请参阅[MapDataEvent][237]。

#### Properties
- `data` **`地图数据事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when one of the map's sources loads or changes.
map.on('sourcedata', function() {
  console.log('A sourcedata event occurred.');
});
```

### dataloading
当任何地图数据（样式、源、图块等）开始异步加载或更改时触发。所有`dataloading`事件后跟一个`data` 或`error`事件。有关详细信息，请参阅[MapDataEvent][237]。

#### Properties
- `data` **`地图数据事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// when any map data begins loading
// or changing asynchronously.
map.on('dataloading', function() {
  console.log('A dataloading event occurred.');
});
```

### styledataloading
当地图的样式开始异步加载或更改时触发。所有`styledataloading`事件后跟一个`styledata` 或`error`事件。有关详细信息，请参阅[MapDataEvent][237]。

#### Properties
- `data` **`地图数据事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// map's style begins loading or
// changing asyncronously.
map.on('styledataloading', function() {
  console.log('A styledataloading event occurred.');
});
```

### sourcedataloading
当地图的源之一开始异步加载或更改时触发。所有`sourcedataloading`事件后跟一个`sourcedata`或`error`事件。有关详细信息，请参阅[MapDataEvent][237]。

#### Properties
- `data` **`地图数据事件`**

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// map's sources begin loading or
// changing asyncronously.
map.on('sourcedataloading', function() {
  console.log('A sourcedataloading event occurred.');
});
```

### styleimagemissing

当样式所需的图标或图案丢失时触发。可以在此事件侦听器回调中使用`Map#addImage`添加丢失的图像，以防止跳过图像。此事件可用于动态生成图标和图案。

#### Properties
- `id` **`string`** 缺失图像的 id。

#### Examples
```
// Initialize the map
var map = new vjmap.Map({ // map options });
// Set an event listener that fires
// an icon or pattern is missing.
map.on('styleimagemissing', function() {
  console.log('A styleimagemissing event occurred.');
});
```