MapboxGL.MapView

整理自官方文档,错误之处欢迎指正。

<MapboxGL.MapView />

props 属性

Prop Type Default Required
contentInset union none false

The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport.
从地图视图框架的边缘到地图视图逻辑视口边缘的距离。

style any none false

Style for wrapping React Native View
所在RN视图的样式

styleURL string MapboxGL.StyleURL.Street false

Style URL for map
地图的样式URL

localizeLabels bool false false

Automatically change the language of the map labels to the system’s preferred language,this is not something that can be toggled on/off
自动将地图标签的语言更改为系统的首选语言,这不能切换为打开/关闭

zoomEnabled bool none false

Enable/Disable zoom on the map
在地图上启用/禁用缩放

scrollEnabled bool true false

Enable/Disable scroll on the map
在地图上启用/禁用滚动

pitchEnabled bool true false

Enable/Disable pitch on map
在地图上启用/禁用倾斜

rotateEnabled bool true false

Enable/Disable rotation on map
在地图上启用/禁用旋转

attributionEnabled bool true false

是否显示属性说明
The Mapbox terms of service, which governs the use of Mapbox-hosted vector tiles and styles,
requires these copyright notices to accompany any map that features Mapbox-designed styles, OpenStreetMap data, or other Mapbox data such as satellite or terrain data.
If that applies to this map view, do not hide this view or remove any notices from it.

You are additionally required to provide users with the option to disable anonymous usage and location sharing (telemetry).
If this view is hidden, you must implement this setting elsewhere in your app. See our website for Android and iOS for implementation details.

Enable/Disable attribution on map. For iOS you need to add MGLMapboxMetricsEnabledSettingShownInApp=YES
to your Info.plist
Mapbox服务条款,管理Mapbox托管的矢量切片和样式的使用,这些版权声明随附任何具有Mapbox设计样式,OpenStreetMap数据,或其他Mapbox数据,例如卫星或地形数据。如果这适用于此地图视图,请勿隐藏此视图或从中删除任何通知。
您还需要为用户提供禁用匿名使用和位置共享(遥测)的选项。如果此视图被隐藏,你必须在你的应用程序的其他地方实现此设置。

logoEnabled bool true false

Enable/Disable the logo on the map.
启用/禁用地图上的 logo 。

compassEnabled bool none false

Enable/Disable the compass from appearing on the map
启用/禁用指南针显示在地图上

surfaceView bool false false

[Android only] Enable/Disable use of GLSurfaceView insted of TextureView.
[仅Android]启用/禁用TextureView的GLSurfaceView实例。

onPress func none false

Map press listener, gets called when a user presses the map
地图按下侦听器,当用户按下地图时被调用

onLongPress func none false

Map long press listener, gets called when a user long presses the map
地图长按侦听器,当用户长按地图时调用

onRegionWillChange func none false

This event is triggered whenever the currently displayed map region is about to change.
只要当前显示的地图区域即将更改,就会触发此事件。

onRegionIsChanging func none false

This event is triggered whenever the currently displayed map region is changing.
只要当前显示的地图区域发生变化,就会触发此事件。

onRegionDidChange func none false

This event is triggered whenever the currently displayed map region finished changing
只要当前显示的地图区域完成更改,就会触发此事件

onWillStartLoadingMap func none false

This event is triggered when the map is about to start loading a new map style.
当地图即将开始加载新的地图样式时,会触发此事件。

onDidFinishLoadingMap func none false

This is triggered when the map has successfully loaded a new map style.
当地图成功加载新的地图样式时,会触发此事件。

onDidFailLoadingMap func none false

This event is triggered when the map has failed to load a new map style.
当地图加载新地图样式失败时,会触发此事件。

onWillStartRenderingFrame func none false

This event is triggered when the map will start rendering a frame.
当贴图开始渲染帧时,会触发此事件。

onDidFinishRenderingFrame func none false

This event is triggered when the map finished rendering a frame.
此事件在地图完成渲染帧时触发。

onDidFinishRenderingFrameFully func none false

This event is triggered when the map fully finished rendering a frame.
当地图完全完成渲染帧时,会触发此事件。

onWillStartRenderingMap func none false

This event is triggered when the map will start rendering the map.
当地图开始渲染地图时,会触发此事件。

onDidFinishRenderingMap func none false

This event is triggered when the map finished rendering the map.
此事件在地图完成渲染地图时触发。

onDidFinishRenderingMapFully func none false

This event is triggered when the map fully finished rendering the map.
当地图完全完成渲染地图时,会触发此事件。

onDidFinishLoadingStyle func none false

This event is triggered when a style has finished loading.
当样式加载完成时触发此事件。

regionWillChangeDebounceTime number 10 false

The emitted frequency of region will change events

regionDidChangeDebounceTime number 500 false

The emitted frequency of region did change events

methods 方法

getPointInView(coordinate)

Converts a geographic coordinate to a point in the given view’s coordinate system.
将地理坐标转换为给定视图坐标系中的点。

arguments
Name Type Required Description
coordinate Array Yes A point expressed in the map view's coordinate system.

在地图视图的坐标系中表示的点。

const pointInView = await this._map.getPointInView([-37.817070, 144.949901]);

getCoordinateFromView(point)

Converts a point in the given view’s coordinate system to a geographic coordinate.
将给定视图坐标系中的点转换为地理坐标。

arguments
Name Type Required Description
point Array Yes A point expressed in the given view’s coordinate system.
const coordinate = await this._map.getCoordinateFromView([100, 100]);

getVisibleBounds()

The coordinate bounds(ne, sw) visible in the users’s viewport.
在用户视口中可见的坐标边界(ne,sw)。

arguments
Name Type Required Description
const visibleBounds = await this._map.getVisibleBounds();

queryRenderedFeaturesAtPoint(coordinate[, filter][, layerIDs])

Returns an array of rendered map features that intersect with a given point.
返回与给定点相交的渲染地图要素的数组。

arguments
Name Type Required Description
coordinate Array Yes A point expressed in the map view’s coordinate system.
filter Array No A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
layerIDs Array No A array of layer id's to filter the features by
this._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])

queryRenderedFeaturesInRect(bbox[, filter][, layerIDs])

Returns an array of rendered map features that intersect with the given rectangle,restricted to the given style layers and filtered by the given predicate.
返回与给定矩形相交、仅限于给定样式图层并由给定谓词过滤的渲染地图要素数组。

arguments
Name Type Required Description
bbox Array Yes A rectangle expressed in the map view’s coordinate system.
filter Array No A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
layerIDs Array No A array of layer id's to filter the features by
this._map.queryRenderedFeaturesInRect([30, 40, 20, 10], ['==', 'type', 'Point'], ['id1', 'id2'])

fitBounds(northEastCoordinates, southWestCoordinates[, padding][, duration])

Map camera transitions to fit provided bounds
映射摄影机过渡以适应提供的边界

arguments
Name Type Required Description
northEastCoordinates Array Yes North east coordinate of bound
southWestCoordinates Array Yes South west coordinate of bound
padding Number No Camera padding for bound
duration Number No Duration of camera animation
this.map.fitBounds([lng, lat], [lng, lat])
this.map.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
this.map.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
this.map.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)

flyTo(coordinates[, duration])

Map camera will fly to new coordinate
地图相机将飞到新坐标

arguments
Name Type Required Description
coordinates Array Yes Coordinates that map camera will jump too
duration Number No Duration of camera animation
this.map.flyTo([lng, lat])
this.map.flyTo([lng, lat], 12000)

moveTo(coordinates[, duration])

Map camera will move to new coordinate at the same zoom level
地图相机将移动到相同缩放级别的新坐标

arguments
Name Type Required Description
coordinates Array Yes Coordinates that map camera will move too
duration Number No Duration of camera animation
this.map.moveTo([lng, lat], 200) // eases camera to new location based on duration
this.map.moveTo([lng, lat]) // snaps camera to new location without any easing

zoomTo(zoomLevel[, duration])

Map camera will zoom to specified level
地图相机将缩放到指定级别

arguments
Name Type Required Description
zoomLevel Number Yes Zoom level that the map camera will animate too
duration Number No Duration of camera animation
this.map.zoomTo(16)
this.map.zoomTo(16, 100)

setCamera(config)

Map camera will perform updates based on provided config. Deprecated use Camera#setCamera.

arguments
Name Type Required Description
config n/a Yes undefined

takeSnap(writeToDisk)

Takes snapshot of map with current tiles and returns a URI to the image
拍摄包含当前切片的地图快照,并将URI返回到图像

arguments
Name Type Required Description
writeToDisk Boolean Yes If true will create a temp file, otherwise it is in base64

getZoom()

Returns the current zoom of the map view.
返回地图视图的当前缩放。

arguments
Name Type Required Description
const zoom = await this._map.getZoom();

getCenter()

Returns the map's geographical centerpoint
返回地图的地理中心点

arguments
Name Type Required Description
const center = await this._map.getCenter();

showAttribution()

Show the attribution and telemetry action sheet.
If you implement a custom attribution button, you should add this action to the button.
显示属性和遥测操作表。
如果实现自定义属性按钮,则应将此操作添加到按钮。

arguments
Name Type Required Description
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容