唯杰地图-VJMAP

# 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
     }
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 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());
1
2

返回**地图** 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);
1
2
3
4
5
6

返回**地图** 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
1
2
3
4
5
6
7

**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();
1
2
3
4

返回**地图** this

# getBounds

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

# Examples

var bounds = map.getBounds();
1

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

# getMaxBounds

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

# Examples

var maxBounds = map.getMaxBounds();
1

返回**( [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);
1
2
3
4
5
6
7

返回**地图** this

# setMinZoom

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

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

# Parameters

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

# Examples

map.setMinZoom(12.25);
1

返回**地图** this

# getMinZoom

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

# Examples

var minZoom = map.getMinZoom();
1

返回**number**minZoom

# setMaxZoom

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

# Parameters

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

# Examples

map.setMaxZoom(18.75);
1

返回**地图** this

# getMaxZoom

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

# Examples

var maxZoom = map.getMaxZoom();
1

返回**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();
1

返回**boolean**renderWorldCopies

# setRenderWorldCopies

设置 的状态renderWorldCopies。

# Parameters

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

# Examples

map.setRenderWorldCopies(true);
1

返回**地图** 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);
1
2

返回**[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);
});
1
2
3
4

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

# isMoving

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

# Examples

var isMoving = map.isMoving();
1

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

# isZooming

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

# Examples

var isZooming = map.isZooming();
1

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

# isRotating

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

# Examples

map.isRotating();
1

**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
    }
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 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);
});
1
2
3
4
5
6
7
8

返回**地图** 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)
});
1
2
3
4
// 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)
});
1
2
3
4
5

返回**地图** 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);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

返回**地图** 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'] }
);
1
2
3
4
5
// Find all features within a static bounding box
var features = map.queryRenderedFeatures(
  [[10, 20], [30, 50]],
  { layers: ['my-layer-name'] }
);
1
2
3
4
5
// 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'] });
1
2
3
4
5
6
7
// Query all rendered features from a single layer
var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });
1
2

返回**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'
});
1
2
3
4

返回**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");
1

返回**地图** this

# getStyle

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

# Examples

map.on('load', function() {
  var styleJson = map.getStyle();
});
1
2
3

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

# isStyleLoaded

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

# Examples

var styleLoadStatus = map.isStyleLoaded();
1

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

# addSource

将源添加到地图的样式。

# Parameters

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

# Examples

map.addSource('my-data', {
  type: 'vector',
  url: 'your url'
});
1
2
3
4
map.addSource('my-data', {
  "type": "geojson",
  "data": {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-77.0323, 38.9131]
    },
    "properties": {
      "title": "DC",
      "marker-symbol": "monument"
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

返回**地图** this

# isSourceLoaded

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

# Parameters

  • id string 要检查的源的 ID。

# Examples

var sourceLoaded = map.isSourceLoaded('bathymetry-data');
1

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

# areTilesLoaded

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

# Examples

var tilesLoaded = map.areTilesLoaded();
1

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

# removeSource

从地图的样式中删除源。

# Parameters

  • id string 要删除的源的 ID。

# Examples

map.removeSource('bathymetry-data');
1

返回**地图** this

# getSource

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

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

# Parameters

  • id string 要获取的源的 ID。

# Examples

var sourceObject = map.getSource('points');
1

返回**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，其格式与.heightdataImageData`
  • 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
     });
   }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# updateImage

更新样式中的现有图像。此图像可以像样式精灵中的任何其他图标一样显示在地图上 使用图像的 IDicon-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，其格式与.heightdataImageData`

# 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');
1
2
3

# 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');
1
2
3

返回**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');
1
2
3

# 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);
});
1
2
3
4
5
6

# listImages

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

# Examples

var allImages = map.listImages();
1

返回**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
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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']
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 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');
1
2
3
4
5
6
7
8
9
10
11
12
13

返回**地图** 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');
1
2

返回**地图** 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');
1
2

# getLayer

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

# Parameters

  • id string 要获取的图层的 ID。

# Examples

var stateDataLayer = map.getLayer('state-data');
1

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

# setLayerZoomRange

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

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

# Parameters

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

# Examples

map.setLayerZoomRange('my-layer', 2, 5);
1

返回**地图** 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']);
1
2
// display only features with five or more 'available-spots'
map.setFilter('bike-docks', ['>=', ['get', 'available-spots'], 5]);
1
2
// remove the filter for the 'bike-docks' style layer
map.setFilter('bike-docks', null);
1
2

返回**地图** 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');
1

返回**地图** 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');
1

返回**地图** 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');
1

返回**地图** 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 });
1
2
3
4
5
6
7
8

返回**地图** this

# getTerrain

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

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

# setFog

设置样式的雾属性。

# Parameters

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

# Examples

map.setFog({
 "range": [1.0, 12.0],
 "color": 'white',
 "horizon-blend": 0.1
});
1
2
3
4
5

返回**地图** 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);
1
2

返回**( 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
    });
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13

返回**[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'
});
1
2
3
4
5
// 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
  });
});
1
2
3
4
5
6
7
8
9
10
// 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');
});
1
2
3
4
5
6
7
8
9
10

# 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
    });
  }
});
1
2
3
4
5
6
7
8
9
10
11

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

# getContainer

返回地图的包含 HTML 元素。

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

# getCanvasContainer

返回包含地图&lt;canvas>元素的 HTML元素。

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

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

返回**HTMLElement**地图的容器&lt;canvas>。

# getCanvas

返回地图的&lt;canvas>元素。

返回**HTMLCanvasElement**地图的&lt;canvas>元素。

# loaded

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

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

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

# remove

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

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

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

# triggerRepaint

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

# Examples

map.triggerRepaint();
1

# showTileBoundaries

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

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

类型： boolean

# Examples

map.showTileBoundaries = true;
1

# showTerrainWireframe

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

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

类型： boolean

# Examples

map.showTerrainWireframe = true;
1

# 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();
1
2
3
4

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

# setCenter

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

# Parameters

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

# Examples

map.setCenter([-74, 38]);
1

返回**地图** this

# panBy

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

# Parameters

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

返回**地图** this

# panTo

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

# Parameters

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

# Examples

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

返回**地图** this

# getZoom

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

# Examples

map.getZoom();
1

返回**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);
1
2

返回**地图** 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]
});
1
2
3
4
5
6
7

返回**地图** this

# zoomIn

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

# Parameters

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

# Examples

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

返回**地图** this

# zoomOut

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

# Parameters

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

# Examples

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

返回**地图** this

# getBearing

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

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

# setBearing

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

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

# Parameters

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

# Examples

// rotate the map to 90 degrees
map.setBearing(90);
1
2

返回**地图** 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 });
1
2

返回**地图** 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}
});
1
2
3
4

返回**（[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}
});
1
2
3
4

返回**地图** 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}
});
1
2
3
4
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
});
1
2
3
4
5
6
7
8
9

返回**地图** 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;
  }
});
1
2
3
4
5
6
7
8
9
10
11
12

返回**地图** 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
// 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.');
});
1
2
3
4
5
6

# 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.');
});
1
2
3
4
5
6
// 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.');
});
1
2
3
4
5
6

# 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.');
});
1
2
3
4
5
6
// 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.');
});
1
2
3
4
5
6

# 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.');
});
1
2
3
4
5
6
// 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.');
});
1
2
3
4
5
6

# 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);
});
1
2
3
4
5
6
// 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);
});
1
2
3
4
5
6

# 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);
});
1
2
3
4
5
6
// 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);
});
1
2
3
4
5
6

# 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.');
});
1
2
3
4
5
6

# 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.');
});
1
2
3
4
5
6
7
8

# 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.');
});
1
2
3
4
5
6
7
8

# 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.');
});
1
2
3
4
5
6
7
8

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7
8

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7

# 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.');
});
1
2
3
4
5
6
7
8

# 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.');
});
1
2
3
4
5
6
7
8

# 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.');
});
1
2
3
4
5
6
7
8

# 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.');
});
1
2
3
4
5
6
7

IControl →