Class: Map

Map

地图对象类，封装了地图的属性设置、图层变更、事件交互等接口的类。

const map = new Map({
  target: "map",
  type: "TMap",
  center: [118.780795, 31.913497],
  zoom: 17
});

new Map(options)

base/map.js, line 38

构造一个地图对象

Name Type Description
options MapOptions

地图初始化参数对象

Name Type Default Description
target String

地图容器DIV的ID值或者DIV对象
type String

地图类型,"TMap"--代表在线天地图,"BMap"--代表在线百度地图, "AMap"--代表在线高德地图,"GMap"--代表在线谷歌地图
mapType String "normalMap" optional

地图底图类型,"normalMap"--矢量(街道)地图,"satelliteMap"--卫星地图
center Array

地图中心点坐标值 [lng,lat]
zoom Number

地图显示的缩放级别,值域[0-18]
minZoom Number 0 optional

地图显示的最小缩放级别
maxZoom Number 28 optional

地图显示的最大缩放级别
bounds Array

设置地图的显示范围[xMin,yMin,xMax,yMax]
layers Array.<layer>

图层数组
controls Array.<control>

最初添加到地图的控件
isForceLandscape Boolean false optional

设置是否强制横屏，解决移动端使用css3 trasnform属性强制横屏带来的问题
isAddControl Boolean true optional

是否在地图上添加默认控件

Extends

  • ol/Map

Classes

Map

Methods

addControl(control)

base/map.js, line 465

给地图上添加一个控件

Name Type Description
control Control

地图控件

addLayer(layer)

base/map.js, line 365

在地图上添加图层

Name Type Description
layer Layer

图层对象

addLayers(layers)

base/map.js, line 384

在地图上添加多个图层

Name Type Description
layers Array

图层数组

addOverlay(overlay)

base/map.js, line 427

在地图上添加overlay

Name Type Description
overlay Overlay

地图覆盖物

centerAndZoom(center, zoom)

base/map.js, line 659

指定中心点和缩放层级（也就可以用于经纬度定位）

Name Type Description
center Array

中心点，经纬度数组
zoom Number

缩放层级,值域一般[0,19]

forEachFeatureAtPixel(pixel, callback, opt_options){*}

base/map.js, line 557

检测与视口上的像素相交的要素，并对每个相交的要素执行回调。 可以通过中的layerFilter选项配置检测中包括的层opt_options。

Name Type Description
pixel Array

像素
callback function

功能回调。该回调将使用两个参数来调用。第一个参数是一个feature 或 render feature像素，第二个参数是layer要素的，对于非托管图层，该参数 将为null。 要停止检测，回调函数可以返回真实值。
opt_options Object

一般不用
Returns:
Type Description
* 回调结果，即上一次回调执行的返回值，或第一个真实回调返回值。

getBaseMapType(){String}

base/map.js, line 232

获取当前地图类型,如: AMap/BMap...

Returns:
Type Description
String 地图类型

getBounds(){Array}

base/map.js, line 183

获取地图的显示范围

Returns:
Type Description
Array 地图的显示范围

getCenter(){Array}

base/map.js, line 605

获取当前地图视图中心坐标

Returns:
Type Description
Array 视图中心坐标

getControls(){controls}

base/map.js, line 484

获取地图上添加的所有控件

Returns:
Type Description
controls 所有控件

getCoordinateFromPixel(pixel){Array}

base/map.js, line 532

获取指定像素坐标对应的经纬度坐标

Name Type Description
pixel Array

像素坐标
Returns:
Type Description
Array 经纬度坐标

getFeaturesAtPixel(pixel, opt_options){*}

base/map.js, line 568

获取与视图上像素相交的所有要素

Name Type Description
pixel Array

像素
opt_options Object

可选项
Returns:
Type Description
* 返回相交的要素或者空数组

getIsAddControl(){Boolean}

base/map.js, line 341

获取地图控件是否可见

Returns:
Type Description
Boolean 地图控件是否可见

getIsForceLandscape(){Boolean}

base/map.js, line 711

获取移动端设置强制横屏的状态

Returns:
Type Description
Boolean 强制横屏的状态

getLayers(){Object}

base/map.js, line 418

获取与此地图关联的图层的集合。

Returns:
Type Description
Object 地图关联的图层的集合

getMapType(){String}

base/map.js, line 273

获取当前地图底图类型

Returns:
Type Description
String 地图底图类型

getMaxZoom(){Number}

base/map.js, line 522

获取地图最大缩放级别

Returns:
Type Description
Number 最大缩放级别

getMinZoom(){Number}

base/map.js, line 503

获取地图最小缩放级别

Returns:
Type Description
Number 最小缩放级别

getOverlayById(id){Overlay}

base/map.js, line 447

通过id获取一个overlay

Name Type Description
id String

覆盖物id
Returns:
Type Description
Overlay 覆盖物

getOverlays(){Overlays}

base/map.js, line 456

获取地图上添加的所有overlay

Returns:
Type Description
Overlays 覆盖物

getPixelFromCoordinate(coordinate){Array}

base/map.js, line 542

获取指定经纬度坐标返回对应地图视图的像素坐标

Name Type Description
coordinate Array

经纬度坐标
Returns:
Type Description
Array 像素坐标

getProjection(){Projection}

base/map.js, line 596

获取当前地图投影坐标系

Returns:
Type Description
Projection 投影坐标系

getSize(){Array}

base/map.js, line 587

获取地图尺寸

Returns:
Type Description
Array size

getViewBounds(){Array}

base/map.js, line 614

获取当前地图视图边界

Returns:
Type Description
Array 视图边界坐标

getZoom(){Number}

base/map.js, line 623

获取当前地图缩放层级

Returns:
Type Description
Number 缩放层级

on(type, listener){Object}

base/map.js, line 725

地图事件监听

Name Type Description
type String

事件类型,支持:"change:center", "change:resolution" "change:rotation", click, pointermove,"change:size",...,更多参照链接: https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#on 中的fires选项中的类型值。
listener function

监听回调函数
Returns:
Type Description
Object 监听器唯一key,用于map#unBykey(key)注销事件

once(type, listener){Object}

base/map.js, line 762

地图事件监听,只会触发一次

Name Type Description
type String

事件类型
listener function

监听回调函数
Returns:
Type Description
Object 监听器唯一key,用于map#unBykey(key)注销事件

removeControl(control)

base/map.js, line 475

从地图上移出一个控件

Name Type Description
control Control

地图控件

removeDefaultLayers()

base/map.js, line 349

移出当前地图默认的一些地图底图

removeLayer(layer)

base/map.js, line 375

从地图上移出已添加的图层

Name Type Description
layer Layer

图层对象

removeLayers(layers)

base/map.js, line 401

在地图上移出多个图层

Name Type Description
layers Array

图层数组

removeOverlay(overlay)

base/map.js, line 437

从地图上移出已添加的overlay

Name Type Description
overlay Overlay

地图覆盖物

setBaseMapType(type)

base/map.js, line 192

设置地图类型,用于切换不同底图

Name Type Description
type String

地图类型BMap-百度地图 TMap-天地图 GMap-谷歌地图 AMap-高德地图

setBounds(bounds)

base/map.js, line 162

设置地图的显示范围

Name Type Description
bounds Array

地图的显示范围[xMin,yMin,xMax,yMax]

setIsAddControl(isAddControl)

base/map.js, line 322

设置地图控件是否可见

Name Type Description
isAddControl Boolean

地图控件是否可见

setIsForceLandscape(isForceLandscape)

base/map.js, line 702

移动端设置强制横屏

Name Type Description
isForceLandscape Boolean

是否设置强制横屏

setMapType(type)

base/map.js, line 242

设置地图图层类型，用于矢量图与卫星图的切换

Name Type Description
type String

地图类型,"normalMap"--矢量地图,"satelliteMap"--卫星图, terrainMap--地形图(只有地图类型是天地图的时候才可以用)

setMaxZoom(zoom)

base/map.js, line 512

设置地图最大缩放级别

Name Type Description
zoom Number

最大缩放级别

setMinZoom(zoom)

base/map.js, line 493

设置地图最小缩放级别

Name Type Description
zoom Number

最小缩放级别

setSize(size)

base/map.js, line 577

设置地图尺寸

Name Type Description
size Array

setViewport(target, padding)

base/map.js, line 675

设置合适的地图视野

Name Type Default Description
target Number | VecotrLayer | Feature | Array.<ponit>

可以为缩放层级zoom; 可以为有所有要素边界的图层Layer;可以为有边界的要素,比如:Polygon/Polyline...;可以 根据提供的地理区域坐标设置地图视野,[[lng1,lat1],[lng2,lat2],...]
padding Number 200 optional

视图padding

slideToExtent(extent, options)

base/map.js, line 649

将视图切到边界框范围下

Name Type Description
extent Array.<Number>

边界框坐标数组 [xMin,yMin,xMax,yMax]
options Number

参数参考https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fit

un(type, listener)

base/map.js, line 743

移出地图事件监听

Name Type Description
type String

事件类型,可以使用注册时返回的监听器唯一key中信息
listener function

监听回调函数,可以使用注册时返回的监听器唯一key中信息

unByKey(key)

base/map.js, line 779

移出地图事件监听

Name Type Description
key Object

地图事件注册时返回的监听器唯一key

zoomToExtent(extent, padding)

base/map.js, line 633

将视图切到边界框范围下

Name Type Default Description
extent Array

边界框坐标数组 [xMin,yMin,xMax,yMax]
padding Number 200 optional

视图padding