类名 GeoJSONLayer

# new GeoJSONLayer(options)

geojson图层，仅支持文件服务
目前二维和三维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，若是想要绘制源数据为非4326坐标系几何数据，需要在初始化时指定具体坐标系
参考示例：
[加载GeoJSON图层]

[ES5引入方式]：
zondy.layer.GraphicsLayer()
[ES6引入方式]：
import { GraphicsLayer } from "@mapgis/webclient-common"

参数

名称 类型 默认值 描述
options Object

构造参数
url String

服务基地址，仅支持文件服务：
参考示例：
[1、加载GeoJSON图层]
[2、加载自定义坐标系的GeoJSON图层]
[3、删除GeoJSON图层]
id String

图层id，若不填则给一个随机id
visible Boolean show

图层可见性，参考示例：[图层可见性]
opacity Number 1

图层透明度，0~1之间的值，0完全透明，1不透明，参考示例：[图层透明度]
spatialReference SpatialReference

图层坐标系，默认为4326，若是想要绘制源数据为非4326坐标系几何数据，需要在初始化时指定具体坐标系
renderer BaseRenderer

渲染样式，
目前支持如下样式：
1、单值专题图
2、分段专题图
3、统一专题图
参考示例：
[1、单值专题图]
[2、分段专题图]
[3、统一专题图]
labelsVisible Boolean false

是否开启动态注记,仅支持三维动态注记渲染
labelingInfo Array.<LabelClass> []

注记样式数组，可以和renderer同时启用，默认取数组的第一个样式， 仅支持三维场景，参考示例：[注记样式]
elevationInfo ElevationInfo

设置高程参数，指定几何是否贴地、贴模型、都贴、都不贴或者是绝对高度
minScale Number 0

最小显示比例尺，图层在视图中可见的最小比例尺。
maxScale Number 0

最大显示比例尺，图层在视图中可见的最大比例尺。
tokenKey String 'token'

token名
tokenValue String

token值，只有当tokenValue存在时，才会绑定token
customParameters Object {}

自定义查询参数，键值对，填写该参数后，会在数据请求的来链接后面以&key=value的形式拼接字符串

支持如下方法：
[1、加载图层资源]
[2、销毁图层]
[3、返回所有要素]
[4、查询要素数量]
[5、通过传入的json构造并返回一个新的几何对象]
6、导出为json对象
7、克隆几何对象

示例

初始化GeoJSON图层

// 初始化图层管理容器
// ES5引入方式
const { GeoJSONLayer } = zondy.layer
// ES6引入方式
import { GeoJSONLayer } from "@mapgis/webclient-common"
// 创建图层
const geojsonLayer = new GeoJSONLayer({
  // 服务基地址
  url: 'json数据地址'
})

加载自定义坐标系的GeoJSON图层

// ES5引入方式
const { SpatialReference } = zondy
const { GeoJSONLayer } = zondy.layer
// ES6引入方式
import { SpatialReference, GeoJSONLayer } from "@mapgis/webclient-common"
// 创建图层
const geojsonLayer = new GeoJSONLayer({
  // 服务基地址
  url: 'json数据地址',
  // 设置坐标系
  spatialReference: new SpatialReference({
    wkid: '坐标系的wkid'
  })
})

删除GeoJSON图层

// 删除图层
map.remove(geojsonLayer)

单值专题图-区数据

// ES5引入方式
const { Color} = zondy
const { GeoJSONLayer } = zondy.layer
const { UniqueValueRenderer } = zondy.renderer
const { SimpleLineSymbol,SimpleFillSymbol } = zondy.symbol
// ES6引入方式
import { Color,GeoJSONLayer,UniqueValueRenderer,SimpleLineSymbol,SimpleFillSymbol } from "@mapgis/webclient-common"
// 创建图层
const geojsonLayer = new GeoJSONLayer({
  // 服务基地址
  url: 'json数据地址',
  // 渲染样式 - 单值专题图 - 区数据
  renderer: new UniqueValueRenderer({
    //字段名
    field: '你的字段名',
    // 默认符号，不在专题图指定范围内的会采用该样式，可不设置
    defaultSymbol: new zondy.symbol.SimpleFillSymbol({
      // 填充颜色
      color: zondy.Color(1 , 1, 252),
      // 外边线样式
      outline: new SimpleLineSymbol({
        //线颜色
        color: new Color(255, 1, 0, 1),
        //线宽
        width: 1
      })
    }),
    //单值专题图字段样式
    uniqueValueInfos: [{
      //指定字段值
      value: "指定的值",
      //匹配到该值后的样式
      symbol: new SimpleFillSymbol({
        // 填充颜色
        color: Color(1, 1, 252),
        // 外边线样式
        outline: new SimpleLineSymbol({
          //线符号颜色
          color: new Color(255, 1, 0),
          //线宽
          width: 1
          })
        })
      },{
        //指定字段值
        value: "指定的值",
        //匹配到该值后的样式
        symbol: new SimpleFillSymbol({
          // 填充颜色
          color: new Color(211, 111, 11, 1)
        })
      }]
  })
})

分段专题图-区数据

// ES5引入方式
const { Color} = zondy
const { GeoJSONLayer } = zondy.layer
const { ClassBreakRenderer } = zondy.renderer
const { SimpleLineSymbol,SimpleFillSymbol } = zondy.symbol
// ES6引入方式
import { Color,GeoJSONLayer,ClassBreakRenderer, SimpleLineSymbol,SimpleFillSymbol} from "@mapgis/webclient-common"
// 创建图层
const geojsonLayer = new GeoJSONLayer({
  // 服务基地址
  url: 'json数据地址',
  // 渲染样式 - 分段专题图 - 区数据
  renderer: new ClassBreakRenderer({
     //字段名
     field: '你的字段名',
     // 指定默认样式，不在专题图指定范围内的会采用该样式，可不设置
     defaultSymbol:  new SimpleFillSymbol({
       // 填充颜色
       color: new Color(222, 1, 252),
       // 线符号样式
       outline: new SimpleLineSymbol({
         //线符号颜色
         color: new zondy.Color(255, 1, 0),
         //线宽
         width: 1
       })
     }),
     //分段专题图字段样式
     classBreakInfos: [{
       // 最大范围
       maxValue: "最大范围",
       // 最小范围
       minValue: "最小范围",
       //匹配到该值后的样式
       symbol:  new SimpleFillSymbol({
         // 填充颜色
         color: new Color(1, 1, 252),
         // 线符号样式
         outline: new SimpleLineSymbol({
           //线符号颜色
           color: new Color(255, 1, 0, 1),
           //线宽
           width: 1
         })
       })
     }]
   })
})

统一专题图-区数据

// ES5引入方式
const { GeoJSONLayer } = zondy.layer
const { SimpleRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { Color,GeoJSONLayer, SimpleRenderer,SimpleLineSymbol,SimpleFillSymbol} from "@mapgis/webclient-common"
const geojsonLayer = new GeoJSONLayer({
  // 服务基地址
  url: 'json数据地址',
  // 渲染样式 - 统一专题图 - 区数据
  renderer: new SimpleRenderer({
    // 设置几何的样式
    symbol: new SimpleFillSymbol({
      //线符号颜色
      color: randomColor(),
      // 外边线样式
      outline: new SimpleLineSymbol({
        // 外边线颜色
        color: new Color(1, 1, 252),
        // 外边线宽度
        width: 1
      })
    })
  })
})

设置图层顺序

// 加载完毕后，更改图层顺序
map.reorder(geojsonLayer, '要移动到的index');

图层可见性

// 创建图层
// ES5引入方式
const { GeoJSONLayer } = zondy.layer
// ES6引入方式
import { GeoJSONLayer } from "@mapgis/webclient-common"
const geojsonLayer = new GeoJSONLayer({
  // 服务基地址
  url: 'json数据地址',
  // 设置图层可见性
  visible: true
})

// 图层加载完成后，设置可见性
geojsonLayer.visible = !geojsonLayer.visible

图层透明度

// 创建图层
 // ES5引入方式
const { GeoJSONLayer } = zondy.layer
// ES6引入方式
import { GeoJSONLayer } from "@mapgis/webclient-common"
const geojsonLayer = new zondy.layer.GeoJSONLayer({
  // 服务基地址
  url: 'json数据地址',
  // 设置图层透明度
  opacity: 1
})

// 图层加载完成后，设置可见性
geojsonLayer.opacity = 0.5

启用注记

 // ES5引入方式
const { LabelClass,Font } = zondy
const { TextSymbol } = zondy.symbol
const { GeoJSONLayer } = zondy.layer
// ES6引入方式
import { LabelClass,Font,TextSymbol,GeoJSONLayer } from "@mapgis/webclient-common"
// 初始化LabelClass
const labelClass = new LabelClass({
  // 指定文本符号样式
  symbol: new TextSymbol({
    // 文字颜色
    color: new Color(252, 100, 22, 1),
    // 文字样式
    font: new Font({
      // 字体
      family: "微软雅黑",
      // 文字大小，单位像素
      size: 30,
      // 文字是否为斜体，正常模式
      style: "normal",
      // 文字粗细
      weight: "normal"
    })
  })
})
// 初始化GeoJSON图层
const geojsonLayer = new GeoJSONLayer({
  // 服务基地址，当不指定图层名称时，默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/FeatureServer',
  // 可在此处设置渲染样式
  renderer: {},
  // 启用注记
  labelsVisible: true,
  // 设置注记样式
  labelingInfo: [labelClass]
})

继承关系

成员变量

成员变量概述

名称 类型 描述
copyright String

版权所有
customParameters String

自定义查询参数customParameters
description String

图层描述
elevationInfo ElevationInfo

高程模式参数
extendProps Object

当前图层对象上不支持的属性，二次开发用户希望挂在图层对像上的属性可以存储到该属性中
extensionOptions Object

初始化图层的额外参数，可以通过该参数传入引擎原生的构造参数
extent Extent

图层范围，从服务元信息中获取
geometryType String

几何类型
headers String

设置服务请求头
httpMethod FetchMethod

http请求方式
id String

图层id
index Number

图层顺序
labelingInfo Array.<LabelClass>

注记样式数组，默认取数组的第一个样式，仅支持三维动态注记渲染
labelsVisible Boolean

是否开启动态注记,仅支持三维动态注记渲染
loaded Boolean

是否加载完毕
loadStatus String

图层加载状态
maxScale Number

最大比例尺
minScale Number

最小比例尺
opacity Number

图层透明度，0到1之间的值，0为完全透明，1为不透明，会触发图层更新完毕事件。IGSSceneLayer图层类型为地形时，不支持该属性。
renderer String

渲染器
spatialReference SpatialReference

图层坐标系对象
title String

图层名称
tokenAttachType String

token附加类型。默认psot请求优先附加到body，get请求优先附加到url末尾
tokenKey String

token名
tokenValue String

token值
type String

图层类型
url String

请求地址
visible Number

图层显示或隐藏，true则显示，false则隐藏，会触发图层更新完毕事件

成员变量详情

String

版权所有

Inherited From:
String

# customParameters

自定义查询参数customParameters

String

# readonly description

图层描述

Inherited From:
ElevationInfo

# elevationInfo

高程模式参数

Object

# extendProps

当前图层对象上不支持的属性，二次开发用户希望挂在图层对像上的属性可以存储到该属性中

Inherited From:
Default Value:
  • {}
Object

# extensionOptions

初始化图层的额外参数，可以通过该参数传入引擎原生的构造参数

Inherited From:
Default Value:
  • {}
Extent

# readonly extent

图层范围，从服务元信息中获取

Inherited From:
String

# geometryType

几何类型

String

# headers

设置服务请求头

Inherited From:
FetchMethod

# httpMethod

http请求方式

Inherited From:
String

# readonly id

图层id

Inherited From:
Number

# index

图层顺序

Inherited From:
Array.<LabelClass>

# labelingInfo

注记样式数组，默认取数组的第一个样式，仅支持三维动态注记渲染

Boolean

# labelsVisible

是否开启动态注记,仅支持三维动态注记渲染

Boolean

# readonly loaded

是否加载完毕

Inherited From:
Default Value:
  • false
String

# readonly loadStatus

图层加载状态

Inherited From:
Default Value:
  • not-loaded
Number

# maxScale

最大比例尺

Overrides:
Number

# minScale

最小比例尺

Overrides:
Number

# opacity

图层透明度，0到1之间的值，0为完全透明，1为不透明，会触发图层更新完毕事件。IGSSceneLayer图层类型为地形时，不支持该属性。

Inherited From:
String

# renderer

渲染器

SpatialReference

# spatialReference

图层坐标系对象

Overrides:
String

# title

图层名称

Inherited From:
String

# tokenAttachType

token附加类型。默认psot请求优先附加到body，get请求优先附加到url末尾

Inherited From:
String

# tokenKey

token名

Overrides:
String

# tokenValue

token值

Overrides:
String

# readonly type

图层类型

Overrides:
String

# url

请求地址

Number

# visible

图层显示或隐藏，true则显示，false则隐藏，会触发图层更新完毕事件

Inherited From:

方法

方法概述

名称 返回值类型 描述
fromJSON

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

克隆方法
destroy

销毁图层
isLoaded Boolean

判断图层是否加载成功
queryFeatures Promise.<FeatureSet>

返回所有要素
queryFeaturesCount Promise.<Number>

查询要素数量
refresh

刷新图层
toJSON Object

转换为json对象

方法详情

# static fromJSON(jsonopt)

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

参数

名称 类型 描述
json Object

JSON对象
示例

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

const json = {
  // 服务基地址
  url: 'json数据地址'
}
const geojsonLayer = new zondy.layer.GeoJSONLayer.fromJSON(json)

# clone()

克隆方法

Inherited From:

图层

Layer

# destroy()

销毁图层

Overrides:

# isLoaded()

判断图层是否加载成功

Inherited From:

图层是否加载成功

Boolean

# queryFeatures()

返回所有要素

Promise.<FeatureSet>

# queryFeaturesCount()

查询要素数量

Promise.<Number>

# refresh()

刷新图层

Inherited From:

# toJSON()

转换为json对象

Overrides:

json对象

Object

事件

事件概述

名称 描述
图层刷新完毕事件 图层刷新完毕事件
图层加载完毕事件 图层加载完毕事件
图层显隐更新完毕事件 图层显隐更新完毕事件
图层更新完毕事件 图层更新完毕事件
图层样式更新完毕事件 图层样式更新完毕事件
图层透明度更新完毕事件 图层透明度更新完毕事件
图层销毁完毕事件 图层销毁完毕事件
图层顺序更新完毕事件 图层顺序更新完毕事件

事件详情

# 图层刷新完毕事件

图层刷新完毕事件，请注意该事件是图层更新事件(layerview-update)的子事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type String <optional>
 'layerview-update'

图层更新完毕事件
message String <optional>
 null

更新描述
updateContent Array.<UpdateContent> <optional>
 null

更新详情对象
layer Layer <optional>
 null

地图图层对象
layerView MapView <optional>
 null

图层的视图对象
sourceTarget Layer <optional>
 null

事件发起对象
target Map <optional>
 null

事件接收对象
Inherited From:
示例

图层刷新完毕事件

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);
    }
  }
});

# 图层加载完毕事件

图层加载完毕事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type String <optional>
 'layerview-created'

图层加载完毕事件
message String <optional>
 null

更新描述
UpdateContent Array.<UpdateContent> <optional>
 null

更新详情对象
layer Layer <optional>
 null

地图图层对象
layerView MapView <optional>
 null

图层的视图对象
sourceTarget Layer <optional>
 null

事件发起对象
target Map <optional>
 null

事件接收对象
Inherited From:
示例

图层加载完毕事件

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

# 图层显隐更新完毕事件

图层显隐更新完毕事件，请注意该事件是图层更新事件(layerview-update)的子事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type String <optional>
 'layerview-update'

图层更新完毕事件
message String <optional>
 null

更新描述
updateContent Array.<UpdateContent> <optional>
 null

更新详情对象
layer Layer <optional>
 null

地图图层对象
layerView MapView <optional>
 null

图层的视图对象
sourceTarget Layer <optional>
 null

事件发起对象
target Map <optional>
 null

事件接收对象
Inherited From:
示例

图层显隐更新完毕事件

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);
    }
  }
});

# 图层更新完毕事件

图层更新完毕事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type String <optional>
 'layerview-update'

图层更新完毕事件
message String <optional>
 null

更新描述
updateContent Array.<UpdateContent> <optional>
 null

更新详情对象
layer Layer <optional>
 null

地图图层对象
layerView MapView <optional>
 null

图层的视图对象
sourceTarget Layer <optional>
 null

事件发起对象
target Map <optional>
 null

事件接收对象
Inherited From:
示例

图层更新完毕事件

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

# 图层样式更新完毕事件

图层样式更新完毕事件，请注意该事件是图层更新事件(layerview-update)的子事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type String <optional>
 'layerview-update'

图层更新完毕事件
message String <optional>
 null

更新描述
updateContent Array.<UpdateContent> <optional>
 null

更新详情对象
layer Layer <optional>
 null

地图图层对象
layerView MapView <optional>
 null

图层的视图对象
sourceTarget Layer <optional>
 null

事件发起对象
target Map <optional>
 null

事件接收对象
示例

图层样式更新完毕事件

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 === 'renderer'){
      console.log("图层样式更新完毕事件:", event);
    }
  }
});

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

图层透明度更新完毕事件，请注意该事件是图层更新事件(layerview-update)的子事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type String <optional>
 'layerview-update'

图层更新完毕事件
message String <optional>
 null

更新描述
updateContent Array.<UpdateContent> <optional>
 null

更新详情对象
layer Layer <optional>
 null

地图图层对象
layerView MapView <optional>
 null

图层的视图对象
sourceTarget Layer <optional>
 null

事件发起对象
target Map <optional>
 null

事件接收对象
Inherited From:
示例

图层透明度更新完毕事件

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);
    }
  }
});

# 图层销毁完毕事件

图层销毁完毕事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type String <optional>
 'layerview-remove'

图层销毁完毕事件
message String <optional>
 null

更新描述
updateContent Array.<UpdateContent> <optional>
 null

更新详情对象
layer Layer <optional>
 null

要销毁的地图图层对象
layerView MapView <optional>
 null

图层的视图对象
sourceTarget Layer <optional>
 null

事件发起对象
target Map <optional>
 null

事件接收对象
Inherited From:
示例

图层销毁完毕事件

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

# 图层顺序更新完毕事件

图层顺序更新完毕事件，请注意该事件是图层更新事件(layerview-update)的子事件

属性:
Name Type Attributes Default Description
event Object

事件对象
type String <optional>
 'layerview-update'

图层更新完毕事件
message String <optional>
 null

更新描述
updateContent Array.<UpdateContent> <optional>
 null

更新详情对象
layer Layer <optional>
 null

地图图层对象
layerView MapView <optional>
 null

图层的视图对象
sourceTarget Layer <optional>
 null

事件发起对象
target Map <optional>
 null

事件接收对象
Inherited From:
示例

图层顺序更新完毕事件

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);
    }
  }
});