Class: Map

Map

new Map(options)

document/mapCollection/Map.js, line 15

支持如下方法：
[1、添加图层对象]
[2、添加多个图层]
[3、根据id查询图层]
[4、删除指定图层]
[5、移除多个图层]
[6、删除所有图层]
[7、调整图层顺序]
[8、销毁Map对象]
[9、通过json对象构造并返回一个新的Map对象]
[10、转换为json对象]
[11、克隆并返回一个新的Map对象]

图层管理容器，和地图引擎无关，通过此对象而不是地图引擎来对图层进行管理
[ES5引入方式]：
zondy.Map()
[ES6引入方式]：
import { Map } from "@mapgis/webclient-common"

Name Type Description
options Object

构造参数

Name Type Default Description
basemap Basemap 可选

设置地图中的底图；
layers Array.<Layer> 可选

设置地图中的图层数组；
1、如果底图存在，则会使用底图上的参考系作为地图视图的参考系，如果没有，则使用常规图层上的坐标系;
2、底图图层在常规图层的最下面； 3、除GraphicsLayer外的二维地图都可以作为底图
overlayLayers Array.<Layer> [] 可选

设置地图中的覆盖物图层数组，此列表内的图层始终位于地图内图层的最上方
Fires
Examples

初始化Map对象

// ES5引入方式
const { Map } = zondy
// ES6引入方式
import { Map } from "@mapgis/webclient-common"
//创建Map对象
let map = new Map();

添加底图图层

// ES5引入方式
const { Map, Basemap, Collection } = zondy
const { IGSTileLayer } = zondy.layer
// ES6引入方式
import { Map, Basemap, Collection, IGSTileLayer } from "@mapgis/webclient-common"
//创建Map对象
const map = new Map({
  // 初始化底图图层集合
  basemap: new Basemap({
    // 可以设置多个图层到底图集合中
    baseLayers: new Collection(
      [
        // 创建一个图层
        new IGSTileLayer({
          url: '服务及地址'
        })
      ]
    )
  })
});

Extends

Members

allLayersCollection.<Layer>

图层扁平后的容器。根据图层容器layers变化，会进行动态更新。如果是一个组图层，则会按照深度遍历的顺序排列

basemapCollection

基础地图

fullExtentExtent

地图范围

layersCollection.<Layer>

图层容器。通过Map上add、addMany方法添加的图层会放到此容器中

overlayLayersGroupLayer

覆盖物组图层，如果想要将图层放置在地图内图层的最上层，可以通过此接口添加图层

spatialReferenceSpatialReference

地图参考系

Events

删除图层事件

document/mapCollection/Map.js, line 112

删除图层事件

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layer-remove' 可选

删除图层事件
layer Layer null 可选

被删除的图层对象
view View null 可选

地图视图对象
sourceTarget Map null 可选

事件发起对象
target View null 可选

事件接收对象
Example

删除图层事件

map.on('layer-remove', function (event) {
  // 删除图层事件
  console.log("删除图层事件:", event)
});

添加图层事件

document/mapCollection/Map.js, line 80

添加图层事件

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layer-add' 可选

添加图层事件
layer Layer null 可选

被添加的图层对象
view View null 可选

地图视图对象
sourceTarget Map null 可选

事件发起对象
target View null 可选

事件接收对象
Example

添加图层事件

map.on('layer-add', function (event) {
  // 添加图层事件
  console.log("添加图层事件:", event)
});

添加多个图层事件

document/mapCollection/Map.js, line 96

添加多个图层事件

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layer-add-many' 可选

添加多个图层事件
layers Array.<Layer> [] 可选

被添加的所有图层对象数组
view View null 可选

地图视图对象
sourceTarget Map null 可选

事件发起对象
target View null 可选

事件接收对象
Example

添加多个图层事件

map.on('layer-add-many', function (event) {
  // 添加多个图层事件
  console.log("添加图层事件:", event)
});

移除多个图层事件

document/mapCollection/Map.js, line 128

移除多个图层事件

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layer-remove-many' 可选

移除多个图层事件
layers Array.<Layer> [] 可选

被删除的所有图层对象数组
view View null 可选

地图视图对象
sourceTarget Map null 可选

事件发起对象
target View null 可选

事件接收对象
Example

移除多个图层事件

map.on('layer-remove-many', function (event) {
  // 移除多个图层事件
  console.log("移除多个图层事件:", event)
});

移除所有图层事件

document/mapCollection/Map.js, line 144

移除所有图层事件

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layer-remove-all' 可选

移除所有图层事件
view View null 可选

地图视图对象
sourceTarget Map null 可选

事件发起对象
target View null 可选

事件接收对象
Example

移除所有图层事件

map.on('layer-remove-all', function (event) {
  // 移除所有图层事件
  console.log("移除所有图层事件:", event)
});

Methods

Map.fromJSON(json){Map}

document/mapCollection/Map.js, line 250

通过json对象构造并返回一个新的Map对象

Name Type Description
json Object

json数据
Returns:
Type Description
Map 一个新的Map对象

add(layer, index)

document/mapCollection/Map.js, line 292

添加图层对象。图层往地图中添加时是同步的，往视图中添加时是异步的。

Name Type Description
layer Object | Layer

要添加的图层对象
index Number

图层列表内下标，默认undefined
Example
//添加图层
map.add(layer);

addMany(layers, index)

document/mapCollection/Map.js, line 307

一次添加多个图层。连续添加多个图层时推荐用该接口，效率会更高。

Name Type Description
layers Array.<(Object|Layer)>

要添加的图层数组]
index Number

图层列表内下标，默认undefined
Example
map.addMany(layers);

clone(){Map}

document/mapCollection/Map.js, line 280

克隆并返回一个新的Map对象

Returns:
Type Description
Map 一个新的Map对象

destroy()

document/mapCollection/Map.js, line 353

销毁Map对象

Example
map.destroy()

dispatchEvent(type, data, propagate){*}

document/mapCollection/Map.js, line 388
Name Type Description
type *

事件类型
data *

事件主体
propagate *

是否可传播
Returns:
Type Description
*

findLayerById(id)

document/mapCollection/Map.js, line 377

根据id查询图层

Name Type Description
id String

图层id
Returns:
Object 找到的图层
Example
//根据id查询图层
map.findLayerById('图层id');

getFullExtent(){Extent}

document/mapCollection/Map.js, line 397

获取地图范围，并更新内部使用的底图范围(4326参考系)

Returns:
Type Description
Extent 地图范围，参考系和Map的参考系保持一致

inherited off(types, fn, context){Object}

base/Evented.js, line 328

移除事件
示例如下:
[1、移除一个事件的指定回调函数]
[2、移除一个事件的所有回调函数]
[3、移除多个事件的同一个指定的回调函数]
[4、移除多个指定事件的回调函数]
[5、删除时指定上下文 - types类型为字符串]
[6、删除时指定上下文 - types类型为对象]

Name Type Description
types string 可选

移除指定事件类型上绑定的回调函数
当类型为字符串时，可以移除单个或多个事件类型绑定的回调函数，单个事件："click"，多个事件：以空格分割:"click double-click"；
当types为对象时，使用如下方式移除事件：{'click': onClickFun, 'mouse-move': onMouseMoveFun}
fn function 可选

事件回调函数，当types为字符串，且不指定要删除的回调函数时，删除该事件上的所有回调函数
context Object 可选

事件回调函数的this关键字将指向的对象
Returns:
Type Description
Object 当前实例
Examples

移除一个事件的指定回调函数

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的回调函数
view.off('click', clickFunction)

移除一个事件的所有回调函数

// 一个事件的回调函数1
const clickFunction1 = function (event) {
  console.log("点击事件1:", event)
}

// 一个事件的回调函数2
const clickFunction2 = function (event) {
  console.log("点击事件2:", event)
}

// 调用MapView或SceneView的off方法移除一个事件的所有回调函数
// 不指定回调函数，则移除该事件上的所有绑定的回调函数
view.off('click')

移除多个事件的同一个指定的回调函数

// 多个事件的同一个回调函数
const eventFunction = function (event) {
  console.log("事件:", event)
}
// 调用MapView或SceneView的off方法移除多个事件的同一个指定的回调函数
view.off('click double-click', eventFunction)

移除多个指定事件的回调函数

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("click事件:", event)
}
// 调用MapView或SceneView的off方法移除多个指定事件的回调函数
view.off({
   // 移除click事件上一个指定的函数
  "click": clickFunction,
  // 移除double-click上所有指定的函数
  "double-click": undefined
})

删除时指定上下文 - types类型为字符串

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的回调函数
view.off('click', clickFunction, view)
// 调用MapView或SceneView的off方法移除一个事件的所有回调函数
view.off('click', undefined, view)

删除时指定上下文 - types类型为对象

// 一个事件的回调函数
const clickFunction = function (event) {
  console.log("click事件:", event)
}
// 调用MapView或SceneView的off方法移除多个指定事件的回调函数
view.off({
   // 移除click事件上一个指定的函数
  "click": clickFunction,
  // 移除double-click上所有指定的函数
  "double-click": undefined
}, view)

inherited on(types, fn, context){Object}

base/Evented.js, line 232

注册一个新的监听事件;
示例如下：
[1、注册一个事件]
[2、一次注册多个事件 - 同一个回调函数]
[3、一次注册多个事件 - 分别指回调应函数]
[4、当types为字符串时 - 指定上下文]
[5、当types为对象时 - 指定上下文]

Name Type Default Description
types String | Object null 可选

事件类型
当types为字符串时，可以定义单个或多个事件，单个事件："click"，多个事件：以空格分割:"click double-click"；
当types为对象时，使用如下方式指定事件：{'click': onClickFun, 'mouse-move': onMouseMoveFun}
fn function null 可选

事件回调函数
context Object null 可选

事件回调函数的this关键字将指向的对象
Returns:
Type Description
Object 当前实例
Examples

注册一个事件

// 初始化一个点击事件回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
}
// 调用MapView或SceneView的on方法注册一个点击事件
view.on('click', clickFunction)

一次注册多个事件 - 同一个回调函数

// 初始化一个事件回调函数
const eventFunction = function (event) {
  console.log("事件:", event)
}

// 调用MapView或SceneView的on方法注册多个事件
// 多个事件类型使用同一个回调函数
view.on('click right-click-down', eventFunction)

一次注册多个事件 - 分别指回调应函数

// 初始化一个左键点击事件回调函数
const clickFunction = function (event) {
  console.log("click事件:", event)
}

// 初始化一个右键按下事件回调函数
const rightClickFunction = function (event) {
  console.log("right-click-down事件:", event)
}

// 调用MapView或SceneView的on方法注册多个事件
// 每一个事件类型，使用单独的回调函数
// 注意使用此种方式，一种类型的事件仅能指定一个回调函数
view.on({
  "click": clickFunction,
  "right-click-down": rightClickFunction
})

指定上下文 - types类型为字符串

// 初始化一个点击事件回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
  console.log("上下文对象:", this)
}
// 调用MapView或SceneView的on方法注册一个点击事件
// 指定view为回调函数的上下文对象
view.on('click', clickFunction, view)

指定上下文 - types类型为对象

// 初始化一个点击事件回调函数
const clickFunction = function (event) {
  console.log("点击事件:", event)
  console.log("上下文对象:", this)
}
// 调用MapView或SceneView的on方法注册一个点击事件
// 指定view为回调函数的上下文对象
view.on({
  "click": clickFunction,
  "right-click-down": clickFunction
}, view)

remove(layer)

document/mapCollection/Map.js, line 323

删除指定图层，需要传入一个图层对象

Name Type Description
layer Object | Layer

要删除的图层对象
Example
//删除指定图层
map.remove(layer);

removeAll()

document/mapCollection/Map.js, line 344

删除所有图层

Example
map.removeAll();

removeMany(layers)

document/mapCollection/Map.js, line 334

移除多个图层

Name Type Description
layers Array

要移除的图层数组
Example
map.removeMany(layers);

reorder(layer, index)

document/mapCollection/Map.js, line 365

调整图层顺序

Name Type Description
layer Layer

要调整顺序的图层
index Number

图层列表的下标值
Example
map.reorder(layer, '要移动到的index');

toJSON(){Object}

document/mapCollection/Map.js, line 260

转换为json对象

Returns:
Type Description
Object 导出的json对象