MapGIS Client for JavaScript API

# readonly copyright

Inherited From:

• Layer#copyright

查看源代码 common/document/layer/baseLayer/Layer.js, line 210

# readonly description

Inherited From:

• Layer#description

查看源代码 common/document/layer/baseLayer/Layer.js, line 204

# elevationInfo

查看源代码 common/document/layer/GraphicsLayer.js, line 374

# extendProps

Inherited From:

• Layer#extendProps

查看源代码 common/document/layer/baseLayer/Layer.js, line 264

# readonly extent

Inherited From:

• Layer#extent

查看源代码 common/document/layer/baseLayer/Layer.js, line 499

# graphics

查看源代码 common/document/layer/GraphicsLayer.js, line 382

# httpMethod

Inherited From:

• Layer#httpMethod

查看源代码 common/document/layer/baseLayer/Layer.js, line 275

# readonly id

Inherited From:

• Layer#id

查看源代码 common/document/layer/baseLayer/Layer.js, line 198

# index

Inherited From:

• Layer#index

查看源代码 common/document/layer/baseLayer/Layer.js, line 242

# readonly loaded

Overrides:

• Layer#loaded

Default Value:

• false

查看源代码 common/document/layer/baseLayer/Layer.js, line 223

# readonly loadStatus

Overrides:

• Layer#loadStatus

Default Value:

• not-loaded

查看源代码 common/document/layer/baseLayer/Layer.js, line 216

# maxScale

Overrides:

• Layer#maxScale

查看源代码 common/document/layer/GraphicsLayer.js, line 359

# minScale

Overrides:

• Layer#minScale

查看源代码 common/document/layer/GraphicsLayer.js, line 354

# opacity

Inherited From:

• Layer#opacity

查看源代码 common/document/layer/baseLayer/Layer.js, line 465

# spatialReference

Overrides:

• Layer#spatialReference

查看源代码 common/document/layer/baseLayer/Layer.js, line 486

# title

Inherited From:

• Layer#title

查看源代码 common/document/layer/baseLayer/Layer.js, line 247

# tokenKey

Overrides:

• Layer#tokenKey

查看源代码 common/document/layer/GraphicsLayer.js, line 364

# tokenValue

Overrides:

• Layer#tokenValue

查看源代码 common/document/layer/GraphicsLayer.js, line 369

# readonly type

Overrides:

• Layer#type

查看源代码 common/document/layer/baseLayer/Layer.js, line 269

# visible

Inherited From:

• Layer#visible

查看源代码 common/document/layer/baseLayer/Layer.js, line 444

# static fromJSON(jsonopt)

参数:

查看源代码 common/document/layer/GraphicsLayer.js, line 664

示例

通过传入的json构造并返回一个新的几何对象

// ES5引入方式
const { Feature } = Zondy
const { Circle } = Zondy.Geometry
const { GraphicsLayer } = Zondy.Layer
// ES6引入方式
import {  Feature,Circle,GraphicsLayer } from "@mapgis/webclient-common"
// 创建一个要素
const feature1 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  })
})
const feature2 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [123, 33],
    // 半径
    radius: 4
  })
})
const json = {
  graphics: [feature1, feature2]
}
// 创建图层
const graphicsLayer = new GraphicsLayer.fromJSON(json)

# add(feature)

参数:

查看源代码 common/document/layer/GraphicsLayer.js, line 399

# addMany(features)

参数:

查看源代码 common/document/layer/GraphicsLayer.js, line 504

示例

添加要素组

// ES5引入方式
const { Feature } = Zondy
const { Circle } = Zondy.Geometry
const { GraphicsLayer } = Zondy.Layer
// ES6引入方式
import {  Feature,Circle,GraphicsLayer } from "@mapgis/webclient-common"
// 创建一个要素
const feature1 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  })
})
const feature2 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [123, 33],
    // 半径
    radius: 4
  })
})
// 创建图层
const graphicsLayer = new GraphicsLayer()
map.add(graphicsLayer)
// 一次添加多个要素
graphicsLayer.addMany([feature1, feature2])

# clone()

Inherited From:

• Layer#clone

查看源代码 common/document/layer/baseLayer/Layer.js, line 396

# isLoaded()

Inherited From:

• Layer#isLoaded

查看源代码 common/document/layer/baseLayer/Layer.js, line 301

# off(typesopt, fnopt, contextopt)

参数:

Inherited From:

• Evented#off

查看源代码 common/base/Evented.js, line 269

示例

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

// 一个事件的回调函数
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)

参数:

Inherited From:

• Evented#on

查看源代码 common/base/Evented.js, line 173

示例

注册一个事件

// 初始化一个点击事件回调函数
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)

# refresh()

Inherited From:

• Layer#refresh

查看源代码 common/document/layer/baseLayer/Layer.js, line 416

# remove(feature)

参数:

查看源代码 common/document/layer/GraphicsLayer.js, line 454

示例

删除要素

// ES5引入方式
const { Feature,Color } = Zondy
const { Circle } = Zondy.Geometry
const { GraphicsLayer } = Zondy.Layer
const { SimpleFillSymbol } = Zondy.Symbol
// ES6引入方式
import {  Feature,Color,Circle,GraphicsLayer,SimpleFillSymbol } from "@mapgis/webclient-common"
// 创建一个要素
const feature = new Feature({
  //不填则创建一个随机的guid
  id: '你的id',
  //设置属性
  attributes: {},
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  }),
  //设置样式
  symbol: new SimpleFillSymbol({
    //设置颜色
    color: new Color(255, 0, 112, 1)
  })
})
// 创建图层
const graphicsLayer = new GraphicsLayer()
graphicsLayer.add(feature)
map.add(graphicsLayer)
// 删除要素
graphicsLayer.remove(feature)

# removeAll()

查看源代码 common/document/layer/GraphicsLayer.js, line 617

示例

删除全部要素

// ES5引入方式
const { Feature } = Zondy
const { Circle } = Zondy.Geometry
const { GraphicsLayer } = Zondy.Layer
// ES6引入方式
import {  Feature,Color,Circle,GraphicsLayer } from "@mapgis/webclient-common"
// 创建一个要素
const feature1 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  })
})
const feature2 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [123, 33],
    // 半径
    radius: 4
  })
})
// 创建图层
const graphicsLayer = new GraphicsLayer({
  graphics: [feature1, feature2]
})
map.add(graphicsLayer)
// 删除全部要素
graphicsLayer.removeAll()

# removeMany(features)

参数:

查看源代码 common/document/layer/GraphicsLayer.js, line 561

示例

删除要素组

// ES5引入方式
const { Feature } = Zondy
const { Circle } = Zondy.Geometry
const { GraphicsLayer } = Zondy.Layer
// ES6引入方式
import {  Feature,Circle,GraphicsLayer } from "@mapgis/webclient-common"
// 创建一个要素
const feature1 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  })
})
const feature2 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [123, 33],
    // 半径
    radius: 4
  })
})
// 创建图层
const graphicsLayer = new GraphicsLayer({
  graphics: [feature1, feature2]
})
map.add(graphicsLayer)
// 一次删除多个要素
graphicsLayer.removeMany([feature1, feature2])

# toJSON()

Overrides:

• Layer#toJSON

查看源代码 common/document/layer/baseLayer/Layer.js, line 371

# 删除多个要素事件

属性:

查看源代码 common/document/layer/GraphicsLayer.js, line 296

示例

子图层显隐更新完毕事件

Layer.on('layerview-update', function (event) {
  // 获取更新事件对象
  console.log("更新完毕:", event)
  // 获取更新详情数组
  const updateContent = event.updateContent
  // 循环数组，根据事件名进行后续操作
  for (let i = 0; i < updateContent.length; i++) {
    // 删除多个要素事件
    if(updateContent[i].name === 'removeMany'){
      console.log("删除多个要素事件:", event);
    }
  }
});

# 删除所有要素事件

属性:

查看源代码 common/document/layer/GraphicsLayer.js, line 323

示例

子图层显隐更新完毕事件

Layer.on('layerview-update', function (event) {
  // 获取更新事件对象
  console.log("更新完毕:", event)
  // 获取更新详情数组
  const updateContent = event.updateContent
  // 循环数组，根据事件名进行后续操作
  for (let i = 0; i < updateContent.length; i++) {
    // 删除所有要素事件
    if(updateContent[i].name === 'removeAll'){
      console.log("删除所有要素事件:", event);
    }
  }
});

# 删除要素事件

属性:

查看源代码 common/document/layer/GraphicsLayer.js, line 269

示例

子图层显隐更新完毕事件

Layer.on('layerview-update', function (event) {
  // 获取更新事件对象
  console.log("更新完毕:", event)
  // 获取更新详情数组
  const updateContent = event.updateContent
  // 循环数组，根据事件名进行后续操作
  for (let i = 0; i < updateContent.length; i++) {
    // 删除要素事件
    if(updateContent[i].name === 'remove'){
      console.log("删除要素事件:", event);
    }
  }
});

# 图层刷新完毕事件

属性:

Inherited From:

• Layer#event:图层刷新完毕事件

查看源代码 common/document/layer/baseLayer/Layer.js, line 167

示例

图层刷新完毕事件

Layer.on('layerview-update', function (event) {
  // 获取更新事件对象
  console.log("更新完毕:", event)
  // 获取更新详情数组
  const updateContent = event.updateContent
  // 循环数组，根据事件名进行后续操作
  for (let i = 0; i < updateContent.length; i++) {
    // 图层刷新完毕事件
    if(updateContent[i].name === 'refresh'){
      console.log("图层刷新完毕事件:", event);
    }
  }
});

# 图层加载完毕事件

属性:

Inherited From:

• Layer#event:图层加载完毕事件

查看源代码 common/document/layer/baseLayer/Layer.js, line 35

示例

图层加载完毕事件

Layer.on('layerview-created', function (result) {
  console.log("加载完毕:", result.layer)
});

# 图层显隐更新完毕事件

属性:

Inherited From:

• Layer#event:图层显隐更新完毕事件

查看源代码 common/document/layer/baseLayer/Layer.js, line 86

示例

图层显隐更新完毕事件

Layer.on('layerview-update', function (event) {
  // 获取更新事件对象
  console.log("更新完毕:", event)
  // 获取更新详情数组
  const updateContent = event.updateContent
  // 循环数组，根据事件名进行后续操作
  for (let i = 0; i < updateContent.length; i++) {
    // 图层显隐事件
    if(updateContent[i].name === 'visible'){
      console.log("图层显隐更新事件:", event);
    }
  }
});

# 图层更新完毕事件

属性:

Inherited From:

• Layer#event:图层更新完毕事件

查看源代码 common/document/layer/baseLayer/Layer.js, line 69

示例

图层更新完毕事件

Layer.on('layerview-update', function (result) {
  console.log("更新完毕:", result.layer)
});

# 图层透明度更新完毕事件

属性:

Inherited From:

• Layer#event:图层透明度更新完毕事件

查看源代码 common/document/layer/baseLayer/Layer.js, line 113

示例

图层透明度更新完毕事件

Layer.on('layerview-update', function (event) {
  // 获取更新事件对象
  console.log("更新完毕:", event)
  // 获取更新详情数组
  const updateContent = event.updateContent
  // 循环数组，根据事件名进行后续操作
  for (let i = 0; i < updateContent.length; i++) {
    // 图层透明度更新事件
    if(updateContent[i].name === 'opacity'){
      console.log("图层透明度更新事件:", event);
    }
  }
});

# 图层销毁完毕事件

属性:

Inherited From:

• Layer#event:图层销毁完毕事件

查看源代码 common/document/layer/baseLayer/Layer.js, line 52

示例

图层销毁完毕事件

Layer.on('layerview-remove', function (result) {
  console.log("销毁完毕:", result.layer)
});

# 图层顺序更新完毕事件

属性:

Inherited From:

• Layer#event:图层顺序更新完毕事件

查看源代码 common/document/layer/baseLayer/Layer.js, line 140

示例

图层顺序更新完毕事件

Layer.on('layerview-update', function (event) {
  // 获取更新事件对象
  console.log("更新完毕:", event)
  // 获取更新详情数组
  const updateContent = event.updateContent
  // 循环数组，根据事件名进行后续操作
  for (let i = 0; i < updateContent.length; i++) {
    // 图层顺序更新完毕事件
    if(updateContent[i].name === 'index'){
      console.log("图层顺序更新完毕事件:", event);
    }
  }
});

# 添加多个要素事件

属性:

查看源代码 common/document/layer/GraphicsLayer.js, line 242

示例

子图层显隐更新完毕事件

Layer.on('layerview-update', function (event) {
  // 获取更新事件对象
  console.log("更新完毕:", event)
  // 获取更新详情数组
  const updateContent = event.updateContent
  // 循环数组，根据事件名进行后续操作
  for (let i = 0; i < updateContent.length; i++) {
    // 添加多个要素事件
    if(updateContent[i].name === 'addMany'){
      console.log("添加多个要素事件:", event);
    }
  }
});

# 添加要素事件

属性:

查看源代码 common/document/layer/GraphicsLayer.js, line 215

示例

子图层显隐更新完毕事件

Layer.on('layerview-update', function (event) {
  // 获取更新事件对象
  console.log("更新完毕:", event)
  // 获取更新详情数组
  const updateContent = event.updateContent
  // 循环数组，根据事件名进行后续操作
  for (let i = 0; i < updateContent.length; i++) {
    // 添加要素事件
    if(updateContent[i].name === 'add'){
      console.log("添加要素事件:", event);
    }
  }
});