Class: GeoJSONLayer

GeoJSONLayer

new GeoJSONLayer(options)

document/layer/GeoJSONLayer.js, line 15

GeoJSON/TopoJSON 文件图层。

GeoJSONLayer 用于从 GeoJSON/TopoJSON 数据源加载要素，并在 Map/View 中以统一的图层形式进行管理， 既支持直接传入内存中的 GeoJSON/TopoJSON 对象，也支持通过文件服务 URL 进行请求。 目前二维和三维上支持 4326（包括 4490、4214 以及 4610）、3857 以及 EPSG 支持的自定义坐标系； 若源数据不是 4326 坐标系，需在初始化时显式指定空间参考系。

Name Type Default Description
options Object {} 可选

构造参数。

Name Type Default Description
url String | Object 可选

GeoJSON/TopoJSON 数据源。 当为字符串时，仅支持文件服务地址；当为对象时，需为合法的 GeoJSON/TopoJSON 对象，此时不会再发起网络请求。 常见场景可参考：
id String 可选

图层 id，未提供时会自动生成随机 id。
visible Boolean true 可选

图层可见性，true 表示显示，false 表示隐藏。参考示例：图层可见性。
opacity Number 1 可选

图层透明度，取值范围为 0~1，0 为完全透明，1 为不透明。参考示例：图层透明度。
spatialReference SpatialReference 可选

图层空间参考系。默认为 4326，当源数据为非 4326 坐标系时，需要在初始化时显式指定具体坐标系。
renderer BaseRenderer | Object | null 可选

渲染样式配置。 支持的渲染器包括：
labelsVisible Boolean false 可选

是否开启动态注记，仅支持三维场景中的动态注记渲染。
labelingInfo Array.<LabelClass> [] 可选

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

高程模式参数，用于指定几何是否贴地、贴模型、都贴、都不贴或采用绝对高度。
minScale Number 0 可选

最小显示比例尺（最缩小）。地图缩小到超过该比例尺时图层不可见。
maxScale Number 0 可选

最大显示比例尺（最放大）。地图放大到超过该比例尺时图层不可见。
tokenKey String 'token' 可选

Token 参数名。
tokenValue String 可选

Token 值，仅当该值存在时才会在请求中附加 Token。
renderMode String 'client' 可选

渲染模式，支持客户端渲染'client'; 网格化渲染'grid'（目前仅支持leaflet引擎，解决大数据量要素渲染问题，设置renderer时不支持聚类渲染器以及热力图渲染器）
customParameters Object {} 可选

自定义查询参数对象。 设置后会在数据请求 URL 后以 &key=value 的形式追加到查询字符串中。
Examples

初始化 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'
  })
})

单值专题图-区数据

// 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]
})

Extends

Members

autoAddTo2DBoolean

是否自动添加到二维引擎的地图对象。

该属性主要用于部分第三方引擎：图层的加载与添加由应用侧自行控制，而不是框架自动添加。

Default Value:
true

autoAddTo3DBoolean

是否自动添加到三维引擎的场景对象。

该属性主要用于部分第三方引擎：图层的加载与添加由应用侧自行控制，而不是框架自动添加。

Default Value:
true

capabilitiesObject

图层支持能力。

capabilities 通常由两部分组成：

  • client：客户端（渲染引擎）侧能力描述（如是否可加载、属性是否可读写等）
  • server：服务端能力描述（不同服务类型可扩展）

基类默认认为：所有引擎均支持加载该图层；服务端能力为空。

版权所有

customParametersObject

自定义查询参数。

当 url 为字符串（文件服务 URL）时，参数会追加到请求 URL 上；当 url 为对象时该参数无效。

descriptionString

图层描述

elevationInfoElevationInfo

高程模式参数

extendPropsObject

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

Default Value:
{}

extensionOptionsObject

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

Default Value:
{}

extentExtent null

图层的范围。从元信息或数据中获取，默认为null表示取不到范围。

forceRefreshDebounceDelayNumber

强制刷新防抖延迟（毫秒）。

某些引擎实现会将刷新请求做合并/防抖处理，该参数用于控制防抖窗口。

Default Value:
5

geometryTypeGeometryType

当前图层的几何类型。

该值会在图层加载后根据要素集合动态计算，并用于生成默认渲染符号。

headersObject

设置服务请求头

httpMethodFetchMethod

http请求方式

idString

图层id

labelingInfoArray.<LabelClass>

注记样式数组。

内部会通过 LabelClass#fromJSON 对数组元素进行规范化；默认取数组的第一个样式进行渲染。 当前仅支持三维场景中的动态注记渲染。

labelsVisibleBoolean

是否开启动态注记。

当前仅支持三维场景中的动态注记渲染。

loadErrorObject

请求失败后的错误信息，toJSON方法不会导出该属性

Default Value:
null

loadStatusString

图层加载状态

Default Value:
not-loaded

loadedBoolean

是否加载完毕

Default Value:
false

maxScaleNumber

最大显示比例尺，图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例，图层将不可见。默认值为0，如果图层是瓦片类型，maxScale、minScale的默认值能和tileInfo上的保持一致，如果图层是动态图层，则和地图视图保持一致。maxScale应该始终小于minScale。

Default Value:
0

minScaleNumber

最小显示比例尺，图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例，图层将不可见。默认值为0，如果图层是瓦片类型，maxScale、minScale的默认值能和tileInfo上的保持一致，如果图层是动态图层，则和地图视图保持一致。minScale应该始终大于maxScale。

Default Value:
0

opacityNumber

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

renderModeString

渲染模式，支持客户端渲染'client';服务器端渲染'server'(不支持renderer),目前仅当gdbp存在时，server模式生效;网格化渲染'grid'（目前仅支持leaflet引擎，解决大数据量要素渲染问题，设置renderer时不支持聚类渲染器以及热力图渲染器）

rendererBaseRenderer Object

渲染器

支持传入渲染器 JSON 或 BaseRenderer 实例；内部会统一转换为 BaseRenderer。

spatialReferenceSpatialReference null

图层坐标系对象

titleString

图层名称

tokenAttachTypeTokenAttachType

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

tokenKeyString

token名

Default Value:
token

tokenValueString

token值

typeLayerType

图层类型

urlString Object

GeoJSON/TopoJSON 数据源。

当为字符串时表示文件服务 URL；当为对象时表示 GeoJSON/TopoJSON 对象。

visibleBoolean

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

Events

inherited layer-update

document/layer/baseLayer/Layer.js, line 126

图层属性更新事件。

当调用 refresh()、setProperty() 或图层内部主动触发更新时，会向 Map/View 分发该事件。 该事件主要用于渲染层同步图层状态。

Properties:
Name Type Description
event LayerViewUpdateEvent

事件对象

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

事件类型
layer Layer 可选

图层对象
updateContent Array.<Object> 可选

更新详情
Example

Create Layer instance

// ES5 import style
const { Layer } = zondy

// ES6 import style
import { Layer } from '@mapgis/webclient-common'

inherited layerview-created

document/layer/baseLayer/Layer.js, line 52

图层在视图中创建完毕事件。

当图层被添加到 View，并且该引擎对应的图层视图对象创建成功后触发。

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layerview-created' 可选

事件类型
message String null 可选

描述信息
layer Layer null 可选

图层对象
layerView * null 可选

图层视图对象（不同引擎类型不同）
sourceTarget * null 可选

事件发起对象
target * null 可选

事件接收对象（通常为 View/Map）
Example
layer.on('layerview-created', (event) => {
  console.log('图层视图创建完毕', event.layer, event.layerView)
})

inherited layerview-remove

document/layer/baseLayer/Layer.js, line 71

图层从视图中移除事件。

当图层从 View 移除，并且对应的图层视图对象已释放后触发。

Properties:
Name Type Description
event Object

事件对象

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

事件类型
message String null 可选

描述信息
layer Layer null 可选

图层对象
layerView * null 可选

图层视图对象
sourceTarget * null 可选

事件发起对象
target * null 可选

事件接收对象（通常为 View/Map）
Example
layer.on('layerview-remove', (event) => {
  console.log('图层视图已移除', event.layer)
})

inherited layerview-scale-visible

document/layer/baseLayer/Layer.js, line 109

图层比例尺显示/隐藏状态更新事件。

该事件由 View 层在比例尺变化导致图层显示状态（因 minScale/maxScale 约束）变化时触发。 当前仅支持非组图层以及场景子图层。

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layerview-scale-visible' 可选

事件类型
target * 可选

事件接收对象
sourceTarget * 可选

事件发起对象
Example
layer.on('layerview-scale-visible', (event) => {
  console.log('比例尺可见性变更', event)
})

inherited layerview-update

document/layer/baseLayer/Layer.js, line 90

图层视图更新事件。

该事件通常由 View 层触发，用于通知外部“渲染层已完成一次图层更新”。 event.updateContent 中会描述本次更新涉及的属性或方法（例如：visible、opacity、refresh）。

Properties:
Name Type Description
event LayerViewUpdateEvent

事件对象

Properties
Name Type Description
updateContent Array.<Object> 可选

更新详情数组
Example
layer.on('layerview-update', (event) => {
  const updateContent = event.updateContent || []
  const hasVisibleChange = updateContent.some((c) => c.name === 'visible')
  const hasOpacityChange = updateContent.some((c) => c.name === 'opacity')
  const hasRefresh = updateContent.some((c) => c.name === 'refresh')
  console.log('更新完毕', { hasVisibleChange, hasOpacityChange, hasRefresh })
})

Methods

clone(){GeoJSONLayer}

document/layer/GeoJSONLayer.js, line 713

克隆当前 GeoJSON 图层。

由于 toJSON 不直接导出已加载的要素数据，克隆后返回的新实例会被重置为未加载状态， 以便在重新加入地图时再次请求或解析数据源。

Returns:
Type Description
GeoJSONLayer 克隆后的 GeoJSON 图层实例。

destroy(){void}

document/layer/GeoJSONLayer.js, line 563

销毁当前 GeoJSON 图层。

当前实现未附加额外清理逻辑，保留该公开接口以便与其他图层类型保持一致。

Returns:
Type Description
void

inherited getProperty(path){*}

document/layer/baseLayer/Layer.js, line 825

获取属性或属性路径对应的值。

Name Type Description
path String

属性路径
Returns:
Type Description
* 属性值

inherited isLoaded(){Boolean}

document/layer/baseLayer/Layer.js, line 530

判断图层是否加载成功

Returns:
Type Description
Boolean 图层是否加载成功

inherited load(){Promise.<Layer>}

document/layer/baseLayer/Layer.js, line 534

图层资源加载。

默认实现会调用内部 _load()，并维护 loadStatus/loaded/loadError 等状态字段。 子类通常通过重写 _load() 来实现“请求元数据/初始化参数”的业务逻辑。

Returns:
Type Description
Promise.<Layer> 加载完成后的图层对象（resolve 为当前实例）

queryFeatures(){Promise.<FeatureSet>}

document/layer/GeoJSONLayer.js, line 573

查询并返回当前图层的全部要素。

当 url 为字符串时会发起文件请求；当 url 直接为 GeoJSON/TopoJSON 对象时，会直接解析内存数据。

Returns:
Type Description
Promise.<FeatureSet> Promise 对象，resolve 时返回转换后的要素集合。

queryFeaturesCount(){Promise.<Number>}

document/layer/GeoJSONLayer.js, line 587

查询当前图层中的要素数量。

该方法会先解析 GeoJSON/TopoJSON 数据，再统计转换后的要素数量。

Returns:
Type Description
Promise.<Number> Promise 对象，resolve 时返回要素数量。

refresh(){*}

document/layer/GeoJSONLayer.js, line 739

刷新图层。

Returns:
Type Description
*

inherited setMap(map){void}

document/layer/baseLayer/Layer.js, line 581

设置图层所属的地图/场景管理容器。

该方法通常由 Map 在添加图层时调用，外部一般无需手动调用。

Name Type Description
map *

地图/场景管理对象（不同引擎类型不同）
Returns:
Type Description
void

inherited setProperty(path, value){Boolean}

document/layer/baseLayer/Layer.js, line 777

设置属性值或属性路径对应的值。

由于默认仅支持第一级属性响应，此方法提供“属性路径”写入能力。 例如：setProperty('tileInfo.startLevel', 3) 可更新 tileInfo.startLevel。

若设置的是多级属性路径，会额外触发一次 layer-update 事件（updateContent.name 为路径字符串）。

Name Type Description
path String

属性路径，可以传入单个属性后者一个属性的路径
value *
Returns:
Type Description
Boolean 是否设置成功

toJSON(){Object}

document/layer/GeoJSONLayer.js, line 684

导出为 JSON 配置。

返回结果包含数据源地址、渲染器、注记样式、自定义请求参数和高程配置等信息。

Returns:
Type Description
Object 图层配置对象。

GeoJSONLayer.fromJSON(json){GeoJSONLayer}

document/layer/GeoJSONLayer.js, line 661

通过 JSON 配置创建一个 GeoJSON 图层实例。

适用于从持久化配置恢复图层对象；返回实例会被直接标记为已加载状态。

Name Type Description
json Object 可选

JSON 配置对象。
Returns:
Type Description
GeoJSONLayer 新的 GeoJSON 图层实例。
Example

通过传入的 JSON 构造并返回一个新的图层对象

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