Class: BaseView

BaseView

new BaseView(options)

view/BaseView.js, line 66

视图基类

Name Type Description
options Object

构造参数

Name Type Default Description
map Map '' 可选

图层管理器

viewId String '' 可选

图层容器ID

cursor String null 可选

鼠标样式,参考css的cursor样式

center Point 可选

地图视图中心点。如果有中心点,看是否存在zoom/scale,使用center和zoom/scale定位(同时设置scale和zoom时,scale优先于zoom),否则默认scale为36978669.4318207;如果没有设置center,并且也没有设置extent,则以center = new Point({coordinates:[105.1250000000032,24.427133220306196]}) 定位;如果没有设置center,但设置了extent,则以extent定位。

scale Number 可选

地图视图比例尺(比例尺的分母)。如果scale、zoom、extent都未设置,那么初始化scale默认scale为36978669.4318207。

zoom Number 可选

地图视图层级

extent Extent 可选

场景视图初始所在的范围。如果没有设置center,但设置extent了,则地图视图定位到extent范围内。

minZoom Number 0 可选

最小缩放级数

maxZoom Number 19 可选

最大缩放级数

extensionOptions Object {} 可选

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

extendProps Object {} 可选

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

initialGoTo Boolean true 可选

是否在视图构造时根据视图的center、scale、zoom、extent属性进行视图范围的设置

Example
// 添加覆盖物图层
view.overlays.add(new GraphicsLayer({}))
view.overlays.add(new IGSFeatureLayer({
    url: "http://{ip}:{port}/igs/rest/services/{folder}/{ServiceName}/FeatureServer",
   })

Extends

Members

allLayerViewsCollection

所有图层视图

basemapLayerViewsCollection

图层视图

centerArray

视图中心点

cursorString

鼠标样式,参考css的cursor样式

extendPropsObject

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

Default Value:
{}

extensionOptionsObject

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

graphicsLayersGroupLayer

优先推荐使用overlays属性。视图的几何图层容器(仅允许添加 GraphicsLayer 类型图层。此容器内的图层将始终显示在最上层,非常适合用于展示要素查询框选、量算结果、要素高亮等功能中的图形显示)

initialGoToBoolean

是否在视图构造时根据视图的center、scale、zoom、extent属性进行视图范围的设置

layerViewFilterLayerViewFilter

图层视图过滤器。可以用筛选显示在此视图的图层视图。

layerViewsCollection

图层视图

mapMap

地图管理容器对象

maxScaleNumber

最大缩放比例尺

maxZoomNumber

最大缩放级数

minScaleNumber

最小缩放比例尺

minZoomNumber

最小缩放级数

overlayLayerViewsCollection

覆盖图图层视图容器

overlaysGroupLayer

视图的覆盖物容器,支持在视图上添加各种图层

弹窗设置

rotationNumber

视图旋转角度

scaleNumber

地图视图的比例尺,改变该值后会立刻改变视图范围

sourceTargetObject

最初触发事件的对象。例如,组图层A添加一个图层B后,组图层A对外发送事件,sourceTarget为最初触发事件的对象,即组图层A

spatialReferenceSpatialReference

视图空间参考系

stationaryBoolean

视图是否静止

targetObject

触发事件的对象。对于传播事件,传播链中触发事件的最后一个对象。例如,组图层A添加一个图层B后,组图层A对外发送事件后,事件传递给Map,Map会继续发送此事件,此时target为Map对象

zoomNumber

初始化级数

Events

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

view/BaseView.js, line 340
Properties:
Name Type Description
event Object

事件对象

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

事件类型

layer Layer 可选

事件接收对象

view BaseView 可选

事件地图视图对象

error String 可选

错误消息

event LayerViewScaleVisibleEvent

事件对象

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

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

Example

视图图层创建错误事件

view.on('layerview-created-error', (event) => {
  console.log("添加地图图层事件:", event)
})
 
/**

地图大小变化事件

view/BaseView.js, line 238
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type LayerEventType 'resize' 可选

事件类型

oldWidth Number 可选

变化前的视图宽度,单位px

oldHeight Number 可选

变化前的视图高度,单位px

width Number 可选

变化后的视图高度,单位px

height Number 可选

变化后的视图高度,单位px

sourceTarget BaseView 可选

事件发起对象

target Map 可选

事件接收对象

event Object 可选

事件对象

Example

地图大小变化事件

view.on('resize', (event) => {
  console.log("地图大小变化事件:", event)
})

地图视图加载完毕事件

view/BaseView.js, line 92
Properties:
Name Type Description
event Object

事件对象

Example

地图视图加载完毕事件

view.on('loaded', (event) => {
  console.log("点击事件:", event)
})

地图视图改变事件

view/BaseView.js, line 299
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type LayerEventType 'view-change' 可选

事件类型

target BaseView 可选

事件接收对象

mapView BaseView 可选

事件地图视图对象

scale Number 可选

事件地图比例尺

zoom Number 可选

事件地图层级

center Point 可选

事件地图视图中心

Example

地图视野改变事件

view.on('view-change', (event) => {
  console.log("地图视图改变事件:", event)
})

引擎视图创建完毕事件

view/BaseView.js, line 285
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type ViewEventType 'innerView-created' 可选

事件类型

innerView Object 可选

引擎地图对象

sourceTarget BaseView 可选

事件发起对象

target Map 可选

事件接收对象

event Object 可选

事件对象

Example

引擎视图创建完毕事件

view.on('innerView-created', (event) => {
  console.log("引擎视图创建完毕事件:", event)
})

视图图层创建事件

view/BaseView.js, line 314
Properties:
Name Type Description
event Object

事件对象

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

事件类型

layer Layer 可选

事件接收对象

layerView LayerView 可选

事件地图视图中心

view BaseView 可选

事件地图视图对象

Example

视图图层创建事件

view.on('layerview-created', (event) => {
  console.log("添加地图图层事件:", event)
})

视图图层移除事件

view/BaseView.js, line 327
Properties:
Name Type Description
event Object

事件对象

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

事件类型

layer Layer 可选

事件接收对象

layerView LayerView 可选

事件地图视图中心

view BaseView 可选

事件地图视图对象

Example

视图图层移除事件

view.on('layerview-remove', (event) => {
  console.log("销毁地图图层事件:", event)
})

键盘抬起事件

view/BaseView.js, line 270
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type LayerEventType 'key-up' 可选

事件类型

key String 可选

变化后的视图高度,单位px

timeStamp Number 可选

时间戳,单位ms

sourceTarget BaseView 可选

事件发起对象

target Map 可选

事件接收对象

event Object 可选

事件对象

Example

键盘抬起事件

view.on('key-up', (event) => {
  console.log("键盘抬起事件:", event)
})

键盘按下事件

view/BaseView.js, line 255
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type LayerEventType 'key-down' 可选

事件类型

key String 可选

变化后的视图高度,单位px

timeStamp Number 可选

时间戳,单位ms

sourceTarget BaseView 可选

事件发起对象

target Map 可选

事件接收对象

event Object 可选

事件对象

Example

键盘按下事件

view.on('key-down', (event) => {
  console.log("键盘按下事件:", event)
})

鼠标双击事件

view/BaseView.js, line 141
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type LayerEventType 'double-click' 可选

事件类型

mapPoint Object 可选

鼠标在地图上的经纬度位置

longitude Object 可选

鼠标的经度坐标,单位度

latitude Object 可选

鼠标的纬度坐标,单位度

x Object 可选

鼠标的像素x坐标,单位px

y Object 可选

鼠标的像素y坐标,单位px

timeStamp Object 可选

时间戳,单位ms

sourceTarget BaseView 可选

事件发起对象

target Map 可选

事件接收对象

event Object 可选

事件对象

Example

鼠标双击事件

view.on('double-click', (event) => {
  console.log("双击事件:", event)
})

鼠标抬起事件

view/BaseView.js, line 179
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type LayerEventType 'pointer-up' 可选

事件类型

mapPoint Object 可选

鼠标在地图上的经纬度位置

longitude Object 可选

鼠标的经度坐标,单位度

latitude Object 可选

鼠标的纬度坐标,单位度

x Object 可选

鼠标的像素x坐标,单位px

y Object 可选

鼠标的像素y坐标,单位px

timeStamp Object 可选

时间戳,单位ms

sourceTarget BaseView 可选

事件发起对象

target Map 可选

事件接收对象

event Object 可选

事件对象

Example

鼠标抬起事件

view.on('pointer-up', (event) => {
  console.log("鼠标抬起事件:", event)
})

鼠标拖拽事件

view/BaseView.js, line 217
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type LayerEventType 'drag' 可选

事件类型

x Object 可选

鼠标的像素x坐标,单位px

y Object 可选

鼠标的像素y坐标,单位px

button Number 可选
buttons Number 可选
cancelable Boolean 可选
origin Object 可选

拖拽起点

stopPropagation function 可选

阻止事件捕获或冒泡

timeStamp Object 可选

时间戳,单位ms

native Object 可选

事件对象

action String 可选

拖拽状态

type String 可选

事件类型

Example

鼠标拖拽事件

view.on('drag', (event) => {
  console.log("鼠标拖拽事件:", event)
})

鼠标按下事件

view/BaseView.js, line 160
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type LayerEventType 'pointer-down' 可选

事件类型

mapPoint Object 可选

鼠标在地图上的经纬度位置

longitude Object 可选

鼠标的经度坐标,单位度

latitude Object 可选

鼠标的纬度坐标,单位度

x Object 可选

鼠标的像素x坐标,单位px

y Object 可选

鼠标的像素y坐标,单位px

timeStamp Object 可选

时间戳,单位ms

sourceTarget BaseView 可选

事件发起对象

target Map 可选

事件接收对象

event Object 可选

事件对象

Example

鼠标按下事件

view.on('pointer-down', (event) => {
  console.log("鼠标按下事件:", event)
})

鼠标点击事件

view/BaseView.js, line 101
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type LayerEventType 'click' 可选

事件类型

mapPoint Object 可选

鼠标在地图上的经纬度位置

x Object 可选

鼠标的像素x坐标,单位px

y Object 可选

鼠标的像素y坐标,单位px

button Number 可选
buttons Number 可选
stopPropagation function 可选

阻止事件捕获或冒泡

timeStamp Object 可选

时间戳,单位ms

native Object 可选

事件对象

sourceTarget BaseView 可选

事件发起对象

target Map 可选

事件接收对象

Example

鼠标点击事件

view.on('click', (event) => {
  console.log("点击事件:", event)
})

鼠标点击立即响应事件

view/BaseView.js, line 121
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type LayerEventType 'immediate-click' 可选

事件类型

mapPoint Object 可选

鼠标在地图上的经纬度位置

x Object 可选

鼠标的像素x坐标,单位px

y Object 可选

鼠标的像素y坐标,单位px

button Number 可选
buttons Number 可选
stopPropagation function 可选

阻止事件捕获或冒泡

timeStamp Object 可选

时间戳,单位ms

native Object 可选

事件对象

sourceTarget BaseView 可选

事件发起对象

target Map 可选

事件接收对象

Example

鼠标立即点击事件

view.on('immediate-click', (event) => {
  console.log("点击事件:", event)
})

鼠标移动事件

view/BaseView.js, line 198
Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type LayerEventType 'pointer-move' 可选

事件类型

mapPoint Object 可选

鼠标在地图上的经纬度位置

longitude Object 可选

鼠标的经度坐标,单位度

latitude Object 可选

鼠标的纬度坐标,单位度

x Object 可选

鼠标的像素x坐标,单位px

y Object 可选

鼠标的像素y坐标,单位px

timeStamp Object 可选

时间戳,单位ms

sourceTarget BaseView 可选

事件发起对象

target Map 可选

事件接收对象

event Object 可选

事件对象

Example

鼠标移动事件

view.on('pointer-move', (event) => {
  console.log("鼠标移动事件:", event)
})

Methods

_processSpatialReferenceChange(event){*}

view/BaseView.js, line 1013

空间参考系改变

Name Type Description
event LayerEvent
Returns:
Type Description
*

destroy()

view/BaseView.js, line 616

销毁视图方法

getInnerLayer(layerDef, sublayerDef){Object|null}

view/BaseView.js, line 577

获取图层或子图层对应的实际图层对象

Name Type Description
layerDef Object | String

图层对象或者图层id

sublayerDef SubLayer | String | null

默认为null,子图层对象或者子图层id,设置后会查询图层内对应子图层的实际对象。当前仅支持场景子图层。

Returns:
Type Description
Object | null 实际图层对象
Example

根据基础图层对象或者图层id查询并返回实际图层

// ES5引入方式
const { IGSSceneLayer } = zondy.layer
// ES6引入方式
import { IGSSceneLayer } from "@mapgis/webclient-cesium-plugin"
// 添加一个场景图层
const igsSceneLayer = new IGSSceneLayer({
  url: 'http://192.168.82.89:8089/igs/rest/g3d/Scene:DaYanTa-M3D'
});
map.add(igsSceneLayer);
// 添加完毕后,过去实际图层对象
igsSceneLayer.on("layerview-created", function (result) {
  console.log("加载完毕:", result.layer)
  const innerLayer = view.getInnerLayer(igsSceneLayer)
  console.log("innerLayer:", innerLayer)
})

getInnerView(){Object}

view/BaseView.js, line 551

获取引擎视图对象,在leaflet引擎上返回leafelt map,在cesium引擎上返回cesium viewer

Returns:
Type Description
Object

getLayer(layerId){Layer}

view/BaseView.js, line 608

根据基础图层id查询并返回基础图层对象

Name Type Description
layerId String

基础图层ID

Returns:
Type Description
Layer 基础图层对象

setMap(map)

view/BaseView.js, line 519

添加图层管理容器

Name Type Description
map Map

图层管理容器

toJSON(){Object}

view/BaseView.js, line 1756

转换为json对象

Returns:
Type Description
Object json对象