MapGIS Client for JavaScript API

new M3DModelCacheLayer(options)

document/layer/M3DModelCacheLayer.js, line 17

支持如下方法：

[1、加载图层资源]
[2、通过传入的json构造并返回一个新的图层对象]
[3、导出为json对象]
[4、克隆图层对象]
[5、通过url构造图层对象]

M3D缓存图层，当使用的Cesium版本为10.7.2.x及以下时，M3D缓存图层仅支持设置token参数，不支持设置请求头参数

Name Type Description

options

Object

构造参数

Name	Type	Default	Description
`elevationInfo`	ElevationInfo		可选高程模式。目前仅支持栅格体元设置高程模式，且如果设置featureExpressionInfo ，则必须按照$feature.z的方式索引高程值，且目前仅支持简单的表达式，例如可以设置将每个高程值替换为原来的10倍,可以设置表达式'$feature.z * 10'
`timeExtent`	TimeExtent		可选时间范围，具有明确开始和结束日期的一段时间。时间范围用于显示或查询指定时间段内的要素。要表示某个时刻，需要将开始时间和结束时间设置为同一日期。
`clientFilters`	Array.<VoxelFilter>	[]	可选客户端过滤器，当前仅支持数据的第一个VoxelFilter过滤器。
`fillClip`	Boolean	false	可选是否开启模型缓存剖切封边
`enableSection`	Boolean	false	可选是否支持生成剖面
`url`	String		可选服务基地址，支持文件服务和IGS的M3D服务文件服务基地址格式：必须是.mcj格式的文件 M3D服务基地址格式(IGS1.0)：无此服务 M3D服务基地址格式(IGS2.0)：http://{ip}:{port}/igs/rest/services/{服务名}/M3dServer
`renderer`	BaseRenderer \| Array \| RendererCollection		可选渲染器，目前支持如下样式： `1、单值专题图` `2、分段专题图` 参考示例： [1、单值专题图] [2、分段专题图] [3、单值专题图-Cesium原生方式] [4、分段专题图-Cesium原生方式]

Examples

初始化模型缓存图层

// ES5引入方式
const { M3DModelCacheLayer } = zondy.layer
// ES6引入方式
import { M3DModelCacheLayer } from "@mapgis/webclient-common"
const layer = new M3DModelCacheLayer({
  // 服务基地址
  url: '服务基地址'
  // Cesium引擎的额外初始化参数
  extensionOptions: {
    // 开启自动跳转
    autoReset: true
  }
});

单值专题图

// ES5引入方式
const { M3DModelCacheLayer } = zondy.layer
const { UniqueValueRenderer } = zondy.renderer
const { SimpleFillSymbol,SimpleLineSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { M3DModelCacheLayer,UniqueValueRenderer,SimpleFillSymbol,SimpleLineSymbol,Color } from "@mapgis/webclient-common"
// 构造单值渲染器
const renderer = new UniqueValueRenderer({
  // 专题图过滤字段名
  field: "字段名",
  // 单值专题图过滤条件数组
  uniqueValueInfos: [
    {
      // 指定字段值
      value: '过滤字段值1',
      // 匹配到该值后的样式
      // M3D专题图仅支持SimpleFillSymbol符号
      symbol: new SimpleFillSymbol({
        // 填充颜色
        color: new Color(255, 0, 0)
      })
    },
    {
      // 指定字段值
      value: '过滤字段值2',
      // 匹配到该值后的样式
      // M3D专题图仅支持SimpleFillSymbol符号
      symbol: new SimpleFillSymbol({
        // 填充颜色
        color: 'rgb(255, 123, 220)'
      })
    }
  ]
})
// 构造模型缓存图层
const layer = new M3DModelCacheLayer({
  // 服务基地址
  url: '服务基地址',
  // 设置专题图渲染器
  renderer: renderer,
  // Cesium引擎的额外初始化参数
  extensionOptions: {
    // 开启自动跳转
    autoReset: true
  }
});

分段专题图

// ES5引入方式
const { M3DModelCacheLayer } = zondy.layer
const { ClassBreakRenderer } = zondy.renderer
const { SimpleFillSymbol } = zondy.symbol
const { Color } = zondy
// ES6引入方式
import { M3DModelCacheLayer,ClassBreakRenderer,SimpleFillSymbol,Color } from "@mapgis/webclient-common"
// 构造分段渲染器
const renderer = new ClassBreakRenderer({
  // 专题图过滤字段名
  field: "字段名",
  // 分段专题图过滤条件数组
  classBreakInfos: [
    {
      // 最小过滤范围，field对应的值大于等于minValue
      minValue: 0,
      // 最大过滤范围，field对应的值小于maxValue
      maxValue: 2,
      // 匹配到该值后的样式
      // M3D专题图仅支持SimpleFillSymbol符号
      symbol: new SimpleFillSymbol({
        // 填充颜色
        color: new Color(255, 0, 0)
      })
    },
    {
      // 最小过滤范围，field对应的值大于等于minValue
      minValue: 3,
      // 最大过滤范围，field对应的值小于maxValue
      maxValue: 5,
      // 匹配到该值后的样式
      // M3D专题图仅支持SimpleFillSymbol符号
      symbol: new SimpleFillSymbol({
        // 填充颜色
        color: 'rgb(255, 123, 220)'
      })
    }
  ]
})
// 构造模型缓存图层
const layer = new M3DModelCacheLayer({
  // 服务基地址
  url: '服务基地址',
  // 设置专题图渲染器
  renderer: renderer,
  // Cesium引擎的额外初始化参数
  extensionOptions: {
    // 开启自动跳转
    autoReset: true
  }
});

单值专题图-Cesium原生方式

// ES5引入方式
const { M3DModelCacheLayer } = zondy.layer
// ES6引入方式
import { M3DModelCacheLayer } from "@mapgis/webclient-common"
// 构造Cesium原生渲染器
const renderer = {
  // 专题图过滤字段名
  field: "字段名",
  // 专题图类型-分段
  type: "class-breaks",
  // 分段专题图过滤条件数组
  classBreakInfos: [{
    // 最小过滤范围，field对应的值大于等于minValue
    minValue: 1,
    // 最大过滤范围，field对应的值小于maxValue
    maxValue: 7,
    // 渲染符号
    symbol: {
      // 渲染类型为M3D
      type: 'mesh-3d',
      // 覆盖物图层
      symbolLayers: [{
        // 图层类型-颜色填充
        type: "fill",
        // 图层材质
        material: {
          // 填充颜色
          color: Cesium.Color.ANTIQUEWHITE
        }
      }]
    }
  }]
}
// 构造模型缓存图层
const layer = new M3DModelCacheLayer({
  // 服务基地址
  url: '服务基地址',
  // Cesium引擎的额外初始化参数
  extensionOptions: {
    // 开启自动跳转
    autoReset: true,
    // 设置专题图渲染器
    renderer: renderer
  }
});

分段专题图-Cesium原生方式

// ES5引入方式
const { M3DModelCacheLayer } = zondy.layer
// ES6引入方式
import { M3DModelCacheLayer } from "@mapgis/webclient-common"
// 构造Cesium原生渲染器
const renderer = {
  // 专题图过滤字段名
  field: "字段名",
  // 专题图类型-单值
  type: "unique-value",
  // 单值专题图过滤条件数组
  uniqueValueInfos: [
    // 指定字段值
    value: '过滤字段值',
    // 渲染符号
    symbol: {
      // 渲染类型为M3D
      type: 'mesh-3d',
      // 覆盖物图层
      symbolLayers: [{
        // 图层类型-颜色填充
        type: "fill",
        // 图层材质
        material: {
          // 填充颜色
          color: new Cesium.Color(0.0, 0.0, 1.0, 0.5)
        }
      }]
    }
  ]
};
// 构造模型缓存图层
const layer = new M3DModelCacheLayer({
  // 服务基地址
  url: '服务基地址',
  // Cesium引擎的额外初始化参数
  extensionOptions: {
    // 开启自动跳转
    autoReset: true,
    // 设置专题图渲染器
    renderer: renderer
  }
});

Extends

Layer

Members

boundingVolumeObject

模型外包盒

capabilitiesObject

图层支持能力。图层支持能力分为客户端能力和服务端能力，其中客户端能力包含cesium、leaflet、mapboxgl引擎能力。默认图层客户端能力：所有引擎支持图层加载；默认图层服务端能力为空。

clientFiltersArray.<VoxelFilter>

客户端过滤器，当前仅支持数据的第一个VoxelFilter过滤器。

copyrightString

descriptionString

描述信息

elevationInfoElevationInfo

高程模式。目前仅支持栅格体元设置高程模式，且如果设置featureExpressionInfo ，则必须按照$feature.z的方式索引高程值，且目前仅支持简单的表达式，例如可以设置将每个高程值替换为原来的10倍,可以设置表达式'$feature.z * 10'

enableSectionBoolean

是否支持生成剖面

enableSectionBoolean

是否支持生成剖面

extendPropsObject

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

Default Value:

extensionOptionsObject

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

Default Value:

extentExtent null

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

fieldInfoArray.<String>

服务包含的表字段数组

fillClipBoolean

是否开启模型缓存剖切封边

headersObject

设置服务请求头

httpMethodFetchMethod

http请求方式

idString

图层id

loadedBoolean

是否加载完毕

Default Value:

loadErrorObject

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

Default Value:

loadStatusString

图层加载状态

Default Value:

maxScaleNumber

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

Default Value:

minScaleNumber

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

Default Value:

opacityNumber

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

rendererBaseRenderer RendererCollection Array Object null

渲染器,其中Array类型计划废弃，因为不支持响应式逻辑，请使用支持响应式逻辑的RendererCollection代替,比如通过layer.renderer.at(0)的属性链方式修改渲染器属性，可以实现响应式逻辑

sceneNameString

服务名

spatialReferenceSpatialReference null

图层坐标系对象

timeExtentTimeExtent

时间范围，具有明确开始和结束日期的一段时间。时间范围用于显示或查询指定时间段内的要素。要表示某个时刻，需要将开始时间和结束时间设置为同一日期。

timeInfoTimeInfo null

对于数据时间维度信息的描述。

titleString

图层名称

tokenAttachTypeTokenAttachType

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

tokenKeyString

token名

Default Value:

tokenValueString

token值

typeString

图层类型

visibleNumber

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

Events

inherited 图层加载完毕事件 document/layer/baseLayer/Layer.js, line 46

图层加载完毕事件

Properties:

Name Type Description

event

Object

事件对象

Properties

Name	Type	Default	Description
`type`	String	'layerview-created'	可选图层加载完毕事件
`message`	String	null	可选更新描述
`UpdateContent`	Array.<UpdateContent>	null	可选更新详情对象
`layer`	Layer	null	可选地图图层对象
`layerView`	MapView	null	可选图层的视图对象
`sourceTarget`	Layer	null	可选事件发起对象
`target`	Map	null	可选事件接收对象

Example

图层加载完毕事件

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

inherited 图层显隐更新完毕事件 document/layer/baseLayer/Layer.js, line 90

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

Properties:

Name Type Description

event

Object

事件对象

Properties

Name	Type	Default	Description
`type`	String	'layerview-update'	可选图层更新完毕事件
`message`	String	null	可选更新描述
`updateContent`	Array.<UpdateContent>	null	可选更新详情对象
`layer`	Layer	null	可选地图图层对象
`layerView`	MapView	null	可选图层的视图对象
`sourceTarget`	Layer	null	可选事件发起对象
`target`	Map	null	可选事件接收对象

Example

图层显隐更新完毕事件

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 图层比例尺显示隐藏状态更新事件。当前仅支持非组图层以及场景子图层 document/layer/baseLayer/Layer.js, line 144

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

Properties:

Name Type Description

event

Object

事件对象

Properties

Name	Type	Default	Description
`type`	String	'layerview-update'	可选图层更新完毕事件
`message`	String	null	可选更新描述
`updateContent`	Array.<UpdateContent>	null	可选更新详情对象
`layer`	Layer	null	可选地图图层对象
`layerView`	MapView	null	可选图层的视图对象
`sourceTarget`	Layer	null	可选事件发起对象
`target`	Map	null	可选事件接收对象

event

LayerViewScaleVisibleEvent

事件对象 layer.on('layerview-scale-visible', (event) => { console.log("图层比例尺显示隐藏状态更新事件:", event) })

Example

图层刷新完毕事件

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 图层视图更新事件 document/layer/baseLayer/Layer.js, line 80

图层视图更新事件

Properties:

Name	Type	Description
`event`	LayerViewUpdateEvent	事件对象

Example

图层更新完毕事件

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

inherited 图层透明度更新完毕事件 document/layer/baseLayer/Layer.js, line 117

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

Properties:

Name Type Description

event

Object

事件对象

Properties

Name	Type	Default	Description
`type`	String	'layerview-update'	可选图层更新完毕事件
`message`	String	null	可选更新描述
`updateContent`	Array.<UpdateContent>	null	可选更新详情对象
`layer`	Layer	null	可选地图图层对象
`layerView`	MapView	null	可选图层的视图对象
`sourceTarget`	Layer	null	可选事件发起对象
`target`	Map	null	可选事件接收对象

Example

图层透明度更新完毕事件

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 图层销毁完毕事件 document/layer/baseLayer/Layer.js, line 63

图层销毁完毕事件

Properties:

Name Type Description

event

Object

事件对象

Properties

Name	Type	Default	Description
`type`	String	'layerview-remove'	可选图层销毁完毕事件
`message`	String	null	可选更新描述
`updateContent`	Array.<UpdateContent>	null	可选更新详情对象
`layer`	Layer	null	可选要销毁的地图图层对象
`layerView`	MapView	null	可选图层的视图对象
`sourceTarget`	Layer	null	可选事件发起对象
`target`	Map	null	可选事件接收对象

Example

图层销毁完毕事件

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

Methods

M3DModelCacheLayer.fromJSON(json) document/layer/M3DModelCacheLayer.js, line 619

通过json构造并返回图层对象

Name	Type	Description
`json`	Object	json对象

M3DModelCacheLayer.fromServerUrl(url){IGSMapImageLayer} document/layer/M3DModelCacheLayer.js, line 643

通过url创建图层对象

Name	Type	Description
`url`	String	服务基地址

Returns:

Type	Description
IGSMapImageLayer	新的图层对象

clone(){M3DModelCacheLayer} document/layer/M3DModelCacheLayer.js, line 632

克隆图层对象

Returns:

Type	Description
M3DModelCacheLayer	克隆后的图层对象

inherited destroy(){*} document/layer/baseLayer/Layer.js, line 618

Returns:

Type	Description
*

inherited getProperty(path){*} document/layer/baseLayer/Layer.js, line 818

获取属性

Name	Type	Description
`path`	String

Returns:

Type	Description
*	属性值

inherited isLoaded(){Boolean} document/layer/baseLayer/Layer.js, line 543

判断图层是否加载成功

Returns:

Type	Description
Boolean	图层是否加载成功

load(){Promise.<M3DModelCacheLayer>} document/layer/M3DModelCacheLayer.js, line 524

加载图层资源

Returns:

Type	Description
Promise.<M3DModelCacheLayer>

Example

不加载图层，仅获取图层信息

// ES5引入方式
const { M3DModelCacheLayer } = zondy.layer
// ES6引入方式
import { M3DModelCacheLayer } from "@mapgis/webclient-common"
// 初始化图层
const layer = new M3DModelCacheLayer({
  // 服务基地址
  url: '服务基地址',
});
layer.load().then((result) => {
  // 获取完图层信息
  console.log(result)
})

inherited refresh() document/layer/baseLayer/Layer.js, line 747

刷新图层

inherited setProperty(path, value){Boolean} document/layer/baseLayer/Layer.js, line 778

设置属性值或者属性路径对应的值。由于当前仅支持第一级属性响应，无法解决多级属性响应机制，此方法支持属性路径响应机制。例如:path输入'tileInfo.startLevel',则会响应式更新startLevel。

Name	Type	Description
`path`	String	属性路径，可以传入单个属性后者一个属性的路径
`value`	*

Returns:

Type	Description
Boolean	是否设置成功

toJSON(){Object} document/layer/M3DModelCacheLayer.js, line 592

将图层转为json对象

Returns:

Type	Description
Object	json对象

Class: M3DModelCacheLayer

new M3DModelCacheLayer(options)

支持如下方法：

Examples

Extends

Members

boundingVolumeObject

capabilitiesObject

clientFiltersArray.<VoxelFilter>

copyrightString

descriptionString

elevationInfoElevationInfo

enableSectionBoolean

enableSectionBoolean

extendPropsObject

extensionOptionsObject

extentExtent null

fieldInfoArray.<String>

fillClipBoolean

headersObject

httpMethodFetchMethod

idString

loadedBoolean

loadErrorObject

loadStatusString

maxScaleNumber

minScaleNumber

opacityNumber

rendererBaseRenderer RendererCollection Array Object null

sceneNameString

spatialReferenceSpatialReference null

timeExtentTimeExtent

timeInfoTimeInfo null

titleString

tokenAttachTypeTokenAttachType

tokenKeyString

tokenValueString

typeString

visibleNumber

Events

inherited 图层加载完毕事件

Properties:

Properties

Example

inherited 图层显隐更新完毕事件

Properties:

Properties

Example

图层显隐更新完毕事件

inherited 图层比例尺显示隐藏状态更新事件。当前仅支持非组图层以及场景子图层

Properties:

Properties

Example

图层刷新完毕事件

inherited 图层视图更新事件

Properties:

Example

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

Properties:

Properties

Example

图层透明度更新完毕事件

inherited 图层销毁完毕事件

Properties:

Properties

Example

Methods

M3DModelCacheLayer.fromJSON(json)

M3DModelCacheLayer.fromServerUrl(url){IGSMapImageLayer}

Returns:

clone(){M3DModelCacheLayer}

Returns:

inherited destroy(){*}

Returns:

inherited getProperty(path){*}

Returns:

inherited isLoaded(){Boolean}

Returns:

load(){Promise.<M3DModelCacheLayer>}

Returns: