1 MAP对象
该Map毒性代表您的网页上的地图。他公开了方法和属性,是您能够以编程方式更改地图,并在用户与之交互时触发事件。
您可以使用Map指定一个地图的容器container配合其它选项来创建一个地图。然后Emapgo.Js会初始化页面上的地图并返回这个Map对象。
new Map(options: Object)
参数
说明:options(Object)
使用方法:
<!--在这里插入内容-->
var map = new emapgo.Map({
container : 'map',
mainZoom : 6,
attributionControl: true,
center: [-122.420679,37.772537],
zoom: 13,
style: style_object,
hash: true,
transformRequest: (url,resourceType)=> {
if(resourceType == 'Source' && url.startsWith('http://muHost')){
return {
url: url.replace('http','https'),
headersL {'my-custom-header':true},
credentials: 'include' //为跨源请求包含cookie
}
}
}
...
})
名称
1 container:(HTMLElement \ string)
2 minZoom: number (默认 0)
3 maxZoom: number(默认为22)
4 style: (Object \ string)
5 hash boolean (默认false)
6 interactive boolean (默认为 true)
7 bearingSnap number (默认为7)
8 pitchWithRotate boolean (默认为true)
9 attributionControl boolean (默认为true)
10 logoPosition string (默认 'boottom-left')
11 faillfMajorPerformanceCaveat boolean (默认为false)
12 preserveDrawingBuffer boolean (默认为false)
13 refreshExpiredTiles boolean (默认为true)
14 maxBounds LngLatBoundsLike
15 scrollZoom (boolean \ object) (默认为true)
16 boxZoom boolean (默认为true)
17 dragRotate boolean(默认为true)
18 dragPan boolean (默认为true)
19 keyboard boolean (默认为true)
20 doubleClickZoom boolean(默认为true)
21 touchZoomRotate (boolean \ Object) (默认为true)
22 center LngLatLike (默认为[0,0])
23 zoom number (默认为0)
24 trackResize boolean (默认为true)
25 bearing number (默认为0)
26 pitch number (默认为0)
27 renderWorldCopies boolean (默认为true)
28 maxTileCacheSize number (默认为null)
29 localldeographFontFamily sting (默认为null)
30 transformRequest RequestTransformFunction (默认为null)
31 collectResourceTiming boolean (默认为false)
32 fadeDuration number (默认300)
33 crossSourceCollisions boolean (默认为true)
2 实例成员
// 用法
map.scrollZoom.enable();
map.keyboard.enable(); //启用键盘控制角度
...
1 scrollZoom
Map的滚动缩放程序,通过滚轮或触控板数显放大和缩小,(可以参照 用户交互 里面的scrollZoom)
2 boxZoom
Map的缩放处理程序,按下Shift键用鼠标选中区域进行缩放。(可以参照 用户交互 里面的BoxZoom)
3 dragRotate
Map的拖动旋转处理程序,他在拖动鼠标右键或按下控制键时实现旋转地图。(可以参照 用户交互 里面的dragRotate)
4 dragPan
Map的拖拽式处理程序,他用鼠标或者触摸手势来拖动地图。(可以参照 用户交互 里面的dragPan)
5 KeyboardHandler
Map的键盘处理程序,他允许用户使用键盘快捷键缩放、旋转和平移地图。(可以参照 用户交互 里面的Keyboard)
6 doubleClickZoom
Mapde 的双击缩放处理程序,允许用户通过双击缩放。(可以参照 用户交互 里面的doubleClickZoom)
7 TouchZoomRotateHander
Map的触摸缩放旋转处理程序,允许用户用触摸手势来缩放或旋转地图。(可以参照 用户交互 里面的TouchZoomRotate)
8 addControl(control,position)
在地图上添加一个控件
参数:
control(IControl):要添加的控件名字。
position(string): 有效值是'top-left','top-right','bottom-left','bottom-right'默认值为'top-right'。
返回:
Map: this
var nav = new emapgo.NavigationControl();
map.addControl(nav, 'top-right');
9 removeControl(control)
从地图中删除控件
参数 control: 控制器的名字
返回:
map: this
var nav = new emapgo.NavigationControl();
map.removeControl(nav)
10 resize(eventData)
根据容器元素的尺寸调整地图。
这个方法必须在map的容器被另一个脚本调整后,或者在最初用CSS隐藏之后显示地图时调用此方法。
参数:
eventData(Object).该方法触发事件对象的附加属性。
返回:
Map: this
还可以参照 demo实例 里面的mapResize。
11 getBounds()
返回地图的地理边界。
12 getMaxBounds()
得到地图的最大地理边界。
返回lnglat界限,在地图上的平移和缩放操作收到限制。
返回:
(LngLatBounds | null): map被限制到的最大界限,如果没有设置,则为null。
13 setMaxBounds(lnglatbounds)
设置或清除地图的地理边界。
平移和缩放这些操作将会在次范围内收到限制。如果执行一个平移或缩放来而超出这些范围的区域。那么地图建辉显示一个位置和缩放级别,尽可能接近操作的请求,同时仍然保持在边界内。
参数:
lnglatbounds: (LngLatBoundsLike | null | undefined)设置的最大界限。如果提供null或未定义,该函数将删除地图的最大边界。
在文档的(地理位置)部分对LngLatBoundsLike参数警醒讲解
返回:
Map: this
map.setMaxBounds([[-73.9876,40.7661],[-73.9397,40.8002]])
map.on('load',function(){
console.log(map.getMaxBounds())
});
14 setMinZoom(minZoom)
设置或清除地图的最小缩放级别。地图只能缩放到设置的最小值低于最小值的将不会进行缩放。
参数:
minZoom:((number | null | undefined))最小缩放级别设置 (0-24)如果提供null 或未定义,则该函数删除当前最小缩放(即将其设置为0)。
返回:
Map: this
15 getMinZoom()
返回地图的最低允许缩放级别。
返回:
number:最低缩放级别
16 setMaxZoom(maxZoom)
设置或清除地图的最大缩放级别,地图最大只能缩放到设置的值。
参数:
maxZoom(number | null | undefined)最大缩放级别设置。如果提供null或未定义,该函数将删除当前最大缩放(设置为22)。
17 getRenderWorldCopies()
返回渲染世界副本的状态。
返回:
boolean
18 setRenderWorldCopies(boolean)
设置渲染世界副本的状态
参数:
boolean: 如果设置为true,那么当缩小时,将会呈现世界的多个副本。未定义的被视为true,null被视为false。
返回:
Map: this
19 getMaxZoom()
返回地图的最大允许缩放级别。
返回:
number: maxZoom
20 project(lnglat)
返回一个指定的点咋容器当中的坐标(单位为像素)。
参数:
lnglat: 要指定的地理位置坐标
返回:
Point: 相对于地图的容器,与lnglat对应的点。
21 unproject(point)
返回一个与指定的像素坐标相对象的地理坐标(LngLat)。
参数:
point:(PointLike) 要处理的像素坐标
返回:
与像素坐标对应的地理坐标
console.log(map.unproject({x: 411.9999999999925,y:330.5}))
22 isMoving()
如果由于相机动画或用户手势导致平移,缩放,旋转或俯仰,则返回true、
返回:boolean
23 isZooming()
如果地图时由于相机动画或用户手势而放大的。将会返回true
返回:
boolean
24 isRotating()
如果由于相机动画或用户手势而旋转,则返回true
返回:
boolean
25 on(type,layer,listener)
在指定样式层的特性上增加一个特定类型事件的侦听器
参数:
type(string):要监听的事件类型;如('mouseleave','mouseover','mouseout','contextmenu','touchstart','touchend',or'touchcancel')当光标从该层外部或地图画布外部进入指定层的可见部分时,就会触发mouseenter和mouseover事件,当光标离开指定层的可见部分,或者离开地图画布时,会触发mouseleave和mouseout事件.
lauer(string):样式层的ID。只有在这一层的可见区域中执行事件才会触发侦听器。该事件将有一个包含匹配特性数组的特性属性。
listener(Function):当事件被触发时将被调用的函数。
返回:
Map: this
26 on(type,listener)
为指定类型的事件添加侦听器
参数:
type(string):监听的事件类型。
listener(Function): 当事件被触发时要调用的函数。侦听器函数通过传递给fire,并使用target和type属性进行扩展。
返回:
Map: this .
27 off(type,listener)
删除先前添加了Map的事件监听器
参数:
type(string): 以前用于安装监听器的事件类型。
listener(Function): 以前安装为监听器的函数。
返回:
Map: this .
28 off(type,layer,listener)
移除先前为特定图层添加的事件监听器。
参数:
type(string): 以前用于安装监听器的事件类型。
layer(string):以前用来安装监听器的层ID
listener(Function):先前安装为侦听器的函数。
######返回:
Map: this
29 queryRenderedFeatures(geometry,options)
返回满足查询参数可见要素的GeoJSON要素的对象数组。
参数:
geomertry(PointLike | Array): 查询区域的几何形状边界框要么是一个点,要么是西南和东北点。如果省略这个参数(例如,调用Map的queryRenderedFeatures并且不传参数,或者只使用期权参数)等价于传递一个包含整个Map viewport的边界框。
options(Object):
1 options.layersArray: 查询要检查的一组样式层id。只有这些层中的特性才会返回。如果这个参数没有定义。那么所有层都将会被检查。
2 options.filterArray : 用于限制查询结果的过滤器。
返回:
Array(Object): 一组GeoJSON要素对象。
每个返回的特性对象的属性值包都含其源特性的属性。对于GeoJSON来源,只支持字符串和数值属性值(例如,null,数组和对象值不受支持)
每个功能都包含一个顶级layer属性。其值是表示功能所属的样式图层的对象。此对象中的布局和会话属性包含对给定缩放级别和特征完全评估的值。
不包括来自visibility属性为图层的特征“none”或来自其缩放范围不包括当前缩放级别的图层的特征。不包括云文字后图标碰撞而隐藏的符号功能。包括所有其他视层的特征,包括可能对渲染结果没有课件贡献的特征;
例如,因为图层的不透明度或颜色alpha分量设置为0。
最上面的渲染特征首先出现在返回的数组中,随后的特征安降序排列。多次渲染的特征(由于以低缩放级别穿越范反阴影线)只返回一次(尽管受到以下警告的限制)。
由于要素来自平铺的矢量数据或GeoJSON数据,并且在内部将其转换为图块,所以要素几何图形可能会在图片边界上被拆分或复制,一次,查询结果中可能会出现多次要素。例如,假设有一条高速公路贯穿查询的边界矩形。查询的结果将是位于覆盖边界举行的地图瓦片内的高速公路部分,即使高速公路延伸到其他瓦片中,并且每个地图瓦片中的高速公路部分将作为单独的特征返回。类似地,瓦片边界附近的点特征可能由于瓦片缓冲而出现在多个瓦片中。
// 在一个点上找到所有的特性
var features = map.queryRenderedFeatures(
[20,35],
{layers: ['my-layer-name']}
);
//在一个静态的边界框中找到所有的特性
var features = map.queryRenderedFeatures(
[[10,20],[30,50]],
{layers:['my-layer-name']}
);
//在一个点周围找到所有的特性
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']});
//从一个单层查询所有呈现的特性
var features = map.queryRenderedFeatures({layers: ['my-layer-name']});
30 setStyle(style,options)
用一个新值更新地图的Emapgo.js样式对象。如果给定的值是styleJSON对象,则将其与map的当前状态进行比较,并且只执行不要的更改,一使地图样式与所需状态相匹配。
参数:
style(StyleSpecification | string | null):符合Emapgo.js样式规范中描述的模式的JSON对象,或者这种JSON的URL。
options(Object):
options.diffboolean(default true) : 如果为false,则强制进行“全面”更新,删除当前样式并添加构建给顶样式,而不是常是基于diff的更新。
options.localIdeographFontFamilystring(default null) | 如果非 null,则在‘CJK统一表意文字’和'Hangul Syllables' 范围内定义一个用于本地覆盖字形生成的css字体系列。强制全面更新。
######返回:
Map: this
31 getStyle()
32 isStyleLoaded()
33 addSource(id,source)
34 areTilesLoaded()
35 removeSource(id)
36 getSource(id)
37 addImage(id,image,options)
38 hasImage(id)
39 removeImage(id)
40 loadImage(url,callback)
41 addLayer(layer,before)
42 moveLayer(id,beforeId?)
43 removeLayer(id)
44 getLayer(id)
45 setFilter(layer,filter)
46 setLayerZoomRange(layerId,minzoom,maxzoom)
47 getFilter(layer)
48 setPaintProperty(layer,name,value)
49 getPaintProperty(layer,name)
50 setLayoutProperty(layer,name,value)
51 getLayoutProperty(layer,name)
52 setLight(light)
53 getLIght()
54 getContainer()
55 getCanvasContainer()
56 getCanvas()
57 loaded()
58 remove()
59 showTileBoundaries
60 showCollisionBoxes
61 repaint
62 getCenter()
63 setCenter (center,eventData)
64 panBy(offset,options,eventData)
65 panTo(lnglat,options,eventData)
66 getZoom()
67 setZoom(zoom,eventData)
68 zoomTo(zoom,options,eventData)
69 zoomIn(options,eventData)
70 zoomOut(options,eventData)
71 getBearing()
72 setBearing(bearing,options,eventData)
73 rotateTo(bearing,options,eventData)
74 resetNorth(options,eventData)
75 snapToNorth(options,eventData)
76 getPitch()
77 setPitch(pitch,eventData)
78 fitBounds(bounds,options,eventData)
79 jumpTo(options,eventData)
80 easeTo(options,eventData)
81 flyTo(options,eventData)
82 stop()
3 事件
map.on('mousedown',function text(e){
console.log('按下')
map.off('mousedown',text)
});
map.once('mouseup',function LOL(e){
console..log('鼠标弹起')
});
resize
地图重新调整大小后立即触发。
remove
Map.event移除地图后立即触发: remove。
mousedown
在地图内按下指针设备(通常是指鼠标)时触发。
mouseup
指针设备(通常是指鼠标)在地图内释放时触发
mouseover
mouseenter相同意思
mousemove
指针设备(通常是指鼠标)在地图内移动时触发
click
当指针设备(通常是鼠标)点击时触发。
dblclick
在地图上的同一点点击两次(通常是鼠标)时触发
mouseenter
指针设备(通常是指鼠标)从该图层外部或地图画布外部进入指定图层的可见部分时触发。此事件只能通过Map-on的三参数版本进行监听,其中第二个参数指定所需的图层。
mouseleave
当一个指向设备(通常是鼠标)离开指定层的可见部分,或者离开地图画布时触发。这个时间只能通过Map的三参数版本来监听,第二个参数指定所需的层。
mouseout
点设备(通常是鼠标)离开地图的画布时触发
contextmenu
点击鼠标右键或在地图内按下上下文菜单键时触发
wheel
设备滚动(通常是指鼠标滚轮)时被触发
touchstart
当一个触摸事件发生在地图中时被触发。
touchend
当在地图上的触摸事件结束后被触发
touchmove
当一个触摸移动事件发生在地图中时被触发
touchcancel
当一个触摸取消事件发生在地图中时被触发
movestart
在地图开始从一个视图到另一个视图的转换之前触发(用户交互或诸如jumpTo之类的方法执行时触发)
move
作为用户交互或诸如Map#flyTo之类的方法的结果,在从一个视图到另一个视图的动画过渡期间重复触发。
moveend
用户交互或诸如Map#jumpTo之类的方法的结果,在地图完成从一个视图到另一个视图的转换之后立即触发
dragstart
当“拖动平移”交互开始时触发。
2018-7-19
drag
在“拖动平移”的交互过程始终反复触发
dragend
在“拖动平移”的交互结束时触发
zoomstart
地图开始从一个缩放级别转换到另一个缩放级别开始时触发
zoom
地图开始从一个缩放级别转换到另一个缩放级别时过程中反复触发
zoomend
由地图开始从一个缩放级别转换到另一个缩放级别时过程中反复触发
rotatestarat
当“拖动旋转”交互开始时触发
rotate
在“拖动旋转”交互过程中重复触发
rotateend
当“拖动旋转”交互结束时触发
pitchstart
开始改变地图的倾斜度时触发,由于用户交互或像Map flyto这样的方法导致地图倾斜
pitch
每当地图的俯仰(倾斜)发生变化时触发
pitchend
由于用户和交互或诸如Map#flyTo之类的方法导致地图的俯仰(倾斜)完成更改后立即触发
boxzoomstart
当“框式缩放”互动结束时触发
boxzoomcancel
当用户取消“框缩放”交互时,或者边界框不和服最小大小阈值时触发
webglcontextlost
WebGL上下文丢失时触发
webglcontextrestored
WebGL上下文恢复时触发
load
在所有必要的资源下载完成后立即启动,并且已经发生了第一次视觉上完整的地图渲染
render
作为结果,每当地图绘制到屏幕时触发
改变地图的位置,缩放,俯仰或方位
改变了地图的风格
对GeoJSON源的更改
加载矢量图块,GelJSON文件,字形或精灵
error
发生错误触发,这是GL JS的主要错误报告机制。我们使用事件而不是throw更好地适应异步操作。如果没有侦听器绑定到error事件,则错误将被打印到控制台。
data
任何地图数据加载或更改时触发
styledata
当地图的样式加载或更改时触发
sourcedata
当一个地图的信息源架加载或更改时触发,包括属于信息源的图块加载或更改
dataloading
任何地图数据(样式,源代码,平铺等)开始加载或异步更改时触发
styledataloading
地图样式开始加载或异步更改时触发。所有styedataloading事件之后都会有一个styledata或一个error事件
sourcedataloading
地图的其中一个资源开始加载或异步更改时触发。所有sourcedataloading事件之后是一个sourcedata或一个error事件。
4 用户交互
处理程序为地图添加不用类型的交互性-鼠标交互性,触摸交互和其他手势。
BoxZoom
BoxZoomHandler允许用户放大地图,以适应边框。边框的选择就是按住shift配合鼠标点击移动选择
实例成员
isEnabled()
返回一个布尔值,只是是否启用“框缩放”交互。
返回:
boolean:如果返回的是true,那么框缩放处理程序已被启用。
isActive()
返回一个布尔值,指示“框缩放”及哦啊胡是否处于活动状态,即当前是否正在使用。
返回
boolean:如果返回true。那么交互处于活动状态。
enable()
启用“框缩放”交互
map.boxZoom.enable();
disable()
禁用“框缩放”交互。
map.boxZoom.disable();
ScrollZoom
ScrollZoomHandler允许用户通过滚动缩放地图
实例成员
isEnable()
返回一个布尔值,指示是否启用“滚动缩放”交互
返回:
boolean: 当返回true时说明已启用“滚动缩放”交互。
enable()
启用“滚动缩放”交互,对鼠标悬停的位置进行缩放。
disable()
禁用“滚动缩放”交互
map.scrollZoom.disable();
DragPan
拖拽式处理程序允许用户通过单击和拖动光标来平移地图
实例成员
isEnabled()
返回一个布尔值,指示是否启用了“拖动到平移”交互
返回:
boolean:当返回true时说明已启用了“拖动”交互
isActive()
返回一个布尔值,指示“拖动到平移”交互是否处于活动状态,即当前正在使用
返回:
boolean:返回值为true时“拖动”交互正在进行
enable()
启用“拖动拖动”交互。
map.dragPan.enable();
disable()
禁止“拖动拖动”交互
map.dragPan.disable();
DragRotate
拖动旋转处理程序允许用户在按住鼠标右键或者按ctrl键的同时单击并拖动光标来旋转地图。
实例成员
isEnabled()
返回一个布尔值,指示是否启用了“拖动旋转”交互
返回:
boolean: 如果启用了“拖动旋转”交互,则是true
isActive()
返回一个布尔值,指示“拖动旋转”交互是否活动,即当前正在使用
返回:
boolean:如果“拖动旋转”交互处于活动状态,则是true
enable()
启用“拖动旋转”交互
map.dragRotate.enable();
disable()
禁用“拖动旋转”交互
map.dragRotate.disable();
Keyboard
键盘处理程序允许用户使用一下键盘快捷键缩放、旋转和平移地图:
= 或 +: 缩放级别提高1。
Shift与=或者 Shift与+: 缩放级别提高2。
-: 缩放级别降低1。
Shift--: 缩放级别降低2。
箭头键 : 平移100像素。
Shift+⇢: 旋转度增加15度。
Shift+⇠: 旋转度减少旋转15度。
Shift+⇡: 倾斜度增加10度。
Shift+⇣: 倾斜度减少10度。
实例成员
isEnabled()
返回一个布尔值,指示是否启用了键盘交互。
boolean:如果启用了“键盘交互”交互,则是true。
enable()
启用键盘交互
map.keyboard.enable();
disable()
禁用键盘交互
map.keyboard.disable();
DoubleClickZoom
双击缩放处理程序允许用户通过双击或双击一个点缩放地图。
实例成员
isEnabled()
返回一个布尔值,指示是否启用了双击交互。
boolean:如果启用了“双击”交互,则是true。
isActive()
返回一个布尔值,指示“双击”交互是否活动,即当前正在使用。
enable()
启用“双击缩放”交互。
map.doubleClickZoom.enable();
disable()
禁用“双击缩放”交互。
map.doubleClickZoom.disable();
TouchZoomRotate
触摸缩放旋转处理程序允许用户通过在触摸屏上缩放和旋转地图
isEnabled()
返回一个布尔值,指示是否启用了触摸缩放旋转。
返回
boolean:如果启用了“触摸缩放旋转”交互,则是true。
enable(options?)
如果启用了“触摸缩放旋转”交互
map.rouchZoomRotate.enable();
disable()
禁用“捏合旋转和缩放”交互。
map.touchZoomRotate.disable();
disableRotation()
禁用“捏合旋转”交互,留下启用“捏缩放”交互。
map.rouchZoomRotate.disableRotation();
enableRotation()
启用“捏合旋转”交互。
map.rouchZoomRotate.enable();
map.rouchZoomRotate.enableRotation();