# new Map(options)
图层管理容器,和地图引擎无关,通过此对象而不是地图引擎来对图层进行管理
[ES5引入方式]:
zondy.Map()
[ES6引入方式]:
import { Map } from "@mapgis/webclient-common"
参数:
名称 | 类型 | 描述 |
---|---|---|
options |
Object | 构造参数 |
basemap |
Basemap | 设置地图中的底图; |
layers |
Array.<Layer> | 设置地图中的图层数组; |
支持如下方法:
[1、添加图层对象][2、添加多个图层]
[3、根据id查询图层]
[4、删除指定图层]
[5、移除多个图层]
[6、删除所有图层]
[7、调整图层顺序]
[8、销毁Map对象]
[9、通过json对象构造并返回一个新的Map对象]
[10、转换为json对象]
[11、克隆并返回一个新的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: '服务及地址'
})
]
)
})
});
继承关系
成员变量
方法
# add(layer, index)
参数:
名称 | 类型 | 描述 |
---|---|---|
layer |
Object | Layer | 要添加的图层对象 |
index |
Number | 图层列表内下标,默认undefined |
示例
//添加图层
map.add(layer);
# addMany(layers, index)
参数:
名称 | 类型 | 描述 |
---|---|---|
layers |
Array.<(Object|Layer)> | 要添加的图层数组] |
index |
Number | 图层列表内下标,默认undefined |
示例
map.addMany(layers);
# findLayerById(id)
参数:
名称 | 类型 | 描述 |
---|---|---|
id |
String | 图层id |
Object 找到的图层
示例
//根据id查询图层
map.findLayerById('图层id');
# off(typesopt, fnopt, contextopt)
移除事件
示例如下:
[1、移除一个事件的指定回调函数]
[2、移除一个事件的所有回调函数]
[3、移除多个事件的同一个指定的回调函数]
[4、移除多个指定事件的回调函数]
[5、删除时指定上下文 - types类型为字符串]
[6、删除时指定上下文 - types类型为对象]
参数:
名称 | 类型 | 描述 |
---|---|---|
types |
string | 移除指定事件类型上绑定的回调函数 |
fn |
function | 事件回调函数,当types为字符串,且不指定要删除的回调函数时,删除该事件上的所有回调函数 |
context |
Object | 事件回调函数的this关键字将指向的对象 |
- Inherited From:
当前实例
示例
移除一个事件的指定回调函数
// 一个事件的回调函数
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)
# on(typesopt, fnopt, contextopt)
注册一个新的监听事件;
示例如下:
[1、注册一个事件]
[2、一次注册多个事件 - 同一个回调函数]
[3、一次注册多个事件 - 分别指回调应函数]
[4、当types为字符串时 - 指定上下文]
[5、当types为对象时 - 指定上下文]
参数:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
types |
String | Object | null | 事件类型 |
fn |
function | null | 事件回调函数 |
context |
Object | null | 事件回调函数的this关键字将指向的对象 |
- Inherited From:
当前实例
示例
注册一个事件
// 初始化一个点击事件回调函数
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)
事件
# 删除图层事件
删除图层事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layer-remove' | 删除图层事件 |
layer |
Layer |
<optional> |
null | 被删除的图层对象 |
view |
View |
<optional> |
null | 地图视图对象 |
sourceTarget |
Map |
<optional> |
null | 事件发起对象 |
target |
View |
<optional> |
null | 事件接收对象 |
示例
删除图层事件
map.on('layer-remove', function (event) {
// 删除图层事件
console.log("删除图层事件:", event)
});
# 添加图层事件
添加图层事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layer-add' | 添加图层事件 |
layer |
Layer |
<optional> |
null | 被添加的图层对象 |
view |
View |
<optional> |
null | 地图视图对象 |
sourceTarget |
Map |
<optional> |
null | 事件发起对象 |
target |
View |
<optional> |
null | 事件接收对象 |
示例
添加图层事件
map.on('layer-add', function (event) {
// 添加图层事件
console.log("添加图层事件:", event)
});
# 添加多个图层事件
添加多个图层事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layer-add-many' | 添加多个图层事件 |
layers |
Array.<Layer> |
<optional> |
[] | 被添加的所有图层对象数组 |
view |
View |
<optional> |
null | 地图视图对象 |
sourceTarget |
Map |
<optional> |
null | 事件发起对象 |
target |
View |
<optional> |
null | 事件接收对象 |
示例
添加多个图层事件
map.on('layer-add-many', function (event) {
// 添加多个图层事件
console.log("添加图层事件:", event)
});
# 移除多个图层事件
移除多个图层事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layer-remove-many' | 移除多个图层事件 |
layers |
Array.<Layer> |
<optional> |
[] | 被删除的所有图层对象数组 |
view |
View |
<optional> |
null | 地图视图对象 |
sourceTarget |
Map |
<optional> |
null | 事件发起对象 |
target |
View |
<optional> |
null | 事件接收对象 |
示例
移除多个图层事件
map.on('layer-remove-many', function (event) {
// 移除多个图层事件
console.log("移除多个图层事件:", event)
});
# 移除所有图层事件
移除所有图层事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layer-remove-all' | 移除所有图层事件 |
view |
View |
<optional> |
null | 地图视图对象 |
sourceTarget |
Map |
<optional> |
null | 事件发起对象 |
target |
View |
<optional> |
null | 事件接收对象 |
示例
移除所有图层事件
map.on('layer-remove-all', function (event) {
// 移除所有图层事件
console.log("移除所有图层事件:", event)
});