# 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: 'æœåŠ¡åŠåœ°å€'
})
]
)
})
});
继承关系
æˆå‘˜å˜é‡
æˆå‘˜å˜é‡æ¦‚è¿°
åç§° | 类型 | æè¿° |
---|---|---|
allLayers |
Collection.<Layer>
|
|
basemap |
Collection
|
|
fullExtent |
Extent
|
|
layers |
Collection.<Layer>
|
|
spatialReference |
SpatialReference
|
|
æˆå‘˜å˜é‡è¯¦æƒ…
方法
方法概述
åç§° | 返回值类型 | æè¿° |
---|---|---|
fromJSON |
Map
|
|
add |
|
|
addMany |
|
|
clone |
Map
|
|
destroy |
|
|
dispatchEvent |
*
|
|
findLayerById |
|
|
getFullExtent |
Extent
|
|
off |
Object
|
|
on |
Object
|
|
remove |
|
|
removeAll |
|
|
removeMany |
|
|
reorder |
|
|
toJSON |
Object
|
|
方法详情
# 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);
# dispatchEvent(type, data, propagate)
傿•°
åç§° | 类型 | æè¿° |
---|---|---|
type |
* | 事件类型 |
data |
* | 事件主体 |
propagate |
* | 是å¦å¯ä¼ æ’ |
# findLayerById(id)
傿•°
åç§° | 类型 | æè¿° |
---|---|---|
id |
String | 图层id |
Object 找到的图层
示例
//æ ¹æ®id查询图层
map.findLayerById('图层id');
# getFullExtent()
获å–地图范围,并更新内部使用的底图范围(4326å‚考系)
地图范围,å‚考系和Mapçš„å‚è€ƒç³»ä¿æŒä¸€è‡´
# 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)
# remove(layer)
傿•°
åç§° | 类型 | æè¿° |
---|---|---|
layer |
Object | Layer | è¦åˆ 除的图层对象 |
示例
//åˆ é™¤æŒ‡å®šå›¾å±‚
map.remove(layer);
# removeMany(layers)
傿•°
åç§° | 类型 | æè¿° |
---|---|---|
layers |
Array | è¦ç§»é™¤çš„图层数组 |
示例
map.removeMany(layers);
事件
事件概述
åç§° | æè¿° |
---|---|
åˆ é™¤å›¾å±‚äº‹ä»¶ |
åˆ é™¤å›¾å±‚äº‹ä»¶ |
æ·»åŠ å›¾å±‚äº‹ä»¶ |
æ·»åŠ å›¾å±‚äº‹ä»¶ |
æ·»åŠ å¤šä¸ªå›¾å±‚äº‹ä»¶ |
æ·»åŠ å¤šä¸ªå›¾å±‚äº‹ä»¶ |
移除多个图层事件 |
移除多个图层事件 |
移除所有图层事件 |
移除所有图层事件 |
事件详情
# åˆ é™¤å›¾å±‚äº‹ä»¶
åˆ é™¤å›¾å±‚äº‹ä»¶
属性:
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)
});