Cesium MapboxGL Leaflet OpenLayers
API文档
类名 MapView

# new MapView(options)

二维场景视图(leaflet引擎)，对地图引擎进行管理，如果要对地图图层进行管理请参考Map，
参考示例： [初始化二维场景视图]
[ES5引入方式]：
Zondy.MapView()
[ES6引入方式]：
import { MapView } from '@mapgis/webclient-leaflet-plugin'

参数:

名称 类型 默认值 描述
options Object

构造参数
Map Map

图层管理容器对象
viewId String

二维场景视图的容器(html的div标签)ID
minZoom Number 0

最小缩放级数，在此设置则所有图层都不会浏览小于该级数的图片
maxZoom Number 19

最大缩放级数，在此设置则所有图层都不会浏览大于该级数的图片
zoom Number 1

初始化二维场景视图时显示级数
attributionControl Boolean false

是否显示右下角水印
zoomControl Boolean true

是否显示缩放控件
doubleClickZoom Boolean | String true

是否允许双击鼠标左键缩放或者缩放至图层中心点
dragging Boolean true

是否允许拖拽
zoomSnap Number 1

当使用flyTo缩放至中心点时，缩放级数乘以的系数
zoomDelta Number 1

当触发zoomIn或者zoomOut操作时，缩放级数乘以的系数
trackResize Boolean true

是否允许图层大小随视窗变化
keyboard Boolean true

是否允使用键盘的+/-号，来缩放地图
keyboardPanDelta Number 80

使用键盘来平移或缩放地图时的系数，单位px
scrollWheelZoom Boolean | String true

使用键盘来平移或缩放地图时的系数，单位px
wheelDebounceTime Number 40

滚轮事件的触发事件，单位毫秒
wheelPxPerZoomLevel Number 60

滚轮缩放时，地图缩放的像素单位，单位像素
tapHold Boolean true

是否开启移动端，手指按压不放事件
tapTolerance Number 15

手指有效触发范围，单位像素
touchZoom Boolean | String true

是否启用手指两指缩放，当值为center，表示两只滑动，缩放至地图中心
bounceAtZoomLimits Boolean true

当过最大或最小级数后不再缩放
animation Boolean true

是否启用动画
center Point new Point({coordinates:[0,0]})

地图视图中心点
extent Extent

地图视图可视范围
scale Number

地图视图比例尺
maxScale Number

最大比例尺
minScale Number

最小比例尺
popup Object

地图弹框
rotation Number 0

地图视图旋转选项。单位为度，默认为0，表示不进行旋转

查看源代码 view/MapView.js, line 31

  • BaseView#event:地图视图加载完毕事件
  • BaseView#event:鼠标点击事件
  • BaseView#event:鼠标双击事件
  • BaseView#event:鼠标按下事件
  • BaseView#event:鼠标抬起事件
  • BaseView#event:鼠标右键点击事件
  • BaseView#event:鼠标移动事件
  • BaseView#event:鼠标移出视图事件
  • BaseView#event:鼠标移入视图事件
  • BaseView#event:zoom变化事件
  • BaseView#event:地图移动事件
  • BaseView#event:地图大小变化事件
  • BaseView#event:键盘输入事件
  • BaseView#event:键盘按下事件
  • BaseView#event:键盘抬起事件
  • BaseView#event:地图视图改变事件

支持如下方法：
[1、视点跳转]
[2、销毁视图对象]
[3、获取当前视图的中心点]
[3、获取当前视图的像素中心点]
[4、获取当前缩放级数]
[5、获取当前视图的地理范围]
[6、获取当前视图的像素范围]
[7、获取最小缩放级数]
[8、获取最大缩放级数]
[9、获取当前视图容器的宽高]
[10、导出场景视图的配置文件]
[11、克隆并返回一个新的场景视图对象]
[12、通过json构造并返回一个新的场景视图对象]
[13、屏幕快照]
14、注册事件
15、移除事件
[15、屏幕像素坐标点转地理坐标点]
[16、地理坐标点转屏幕像素坐标点]
[17、穿透检测]
[18、根据实际图层对象查询并返回基础图层]
[19、获取当前比例尺]

示例

初始化一个二维场景视图

// ES5引入方式
const { Map, MapView } = Zondy
// ES6引入方式
import { Map, MapView } from "@mapgis/webclient-leaflet-plugin"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapView({
  // 二维场景视图的容器(html的div标签)ID
  viewId: "二维场景视图的容器的id",
  // 图层管理容器
  map: map
});

继承关系

  • Evented

成员变量

SpatialReference

# readonly _spatialReference

视图空间参考系

查看源代码 view/MapView.js, line 212

Boolean

# animation

是否启用视角跳转动画

查看源代码 view/MapView.js, line 157

Point

# center

地图视图中心点

查看源代码 view/MapView.js, line 133

Extent

# extent

地图视图可视范围

查看源代码 view/MapView.js, line 152

Number

# readonly height

地图视图高度

查看源代码 view/MapView.js, line 168

Number

# maxScale

地图视图最大比例尺

查看源代码 view/MapView.js, line 185

Number

# minScale

地图视图最小比例尺

查看源代码 view/MapView.js, line 190

Popup

地图弹框popup

查看源代码 view/MapView.js, line 195

Boolean

# preferCanvas

视图渲染方式是否为canvas

查看源代码 view/MapView.js, line 200

Boolean

# rotation

地图视图旋转选项。单位为度，默认为0，表示不进行旋转

查看源代码 view/MapView.js, line 227

Number

# scale

地图视图比例尺

查看源代码 view/MapView.js, line 180

Boolean

# spatialReferenceLocked

是否锁定视图空间参考系

查看源代码 view/MapView.js, line 219

Boolean

# readonly stationary

试图是否静止

查看源代码 view/MapView.js, line 232

Number

# readonly width

地图视图宽度

查看源代码 view/MapView.js, line 162

Number

# zoom

地图层级

查看源代码 view/MapView.js, line 174

方法

# static fromJSON(json)

通过json构造并返回一个新的场景视图对象

参数:

名称 类型 描述
json Object

json对象

查看源代码 view/MapView.js, line 1274

一个新的场景视图对象

MapView

# static fromJSON(json)

通过一个配置生成一个场景视图对象

参数:

名称 类型 描述
json Object

场景视图配置

查看源代码 view/MapView.js, line 1971

MapView

# _waitLayerLoaded(layer, result, fireCreatedError)

等待图层加载完毕，重写BaseView类的该方法

参数:

名称 类型 描述
layer Layer

基础图层对象
result Object

图层加载完毕后的对象
fireCreatedError function

创建失败回调

查看源代码 view/MapView.js, line 1103

# clone()

克隆并返回一个新的场景视图对象

查看源代码 view/MapView.js, line 1265

一个新的场景视图对象

MapView

# destroy()

销毁视图对象

查看源代码 view/MapView.js, line 1131

# flyTo(options)

视点跳转

参数:

名称 类型 默认值 描述
options

跳转参数
center Array

跳转中心点
zoom Number 1

地图层级
extent Extent

按范围跳转

查看源代码 view/MapView.js, line 319

示例

中心点跳转示例

// ES5引入方式
const { Map, MapView } = Zondy
// ES6引入方式
import { Map, MapView } from "@mapgis/webclient-leaflet-plugin"
// 初始化图层管理容器
map = new .Map();
// 初始化地图视图对象
mapView = new MapView({
  // 视图id
  viewId: "view-id",
  // 图层管理容器
  map: map
});
// 视点跳转
mapView.flyTo({
  // 跳转中心点
  center: [{x}, {y}],
  // 地图层级
  zoom: {zoom}
});

按范围跳转示例

// ES5引入方式
const { Map, MapView } = Zondy
const { Extent } = Zondy.Geometry
// ES6引入方式
import { Map, MapView, Extent } from "@mapgis/webclient-leaflet-plugin"
// 初始化图层管理容器
map = new Map();
// 初始化地图视图对象
mapView = new MapView({
  // 视图id
  viewId: "view-id",
  // 图层管理容器
  map: map
});
mapView.flyTo({
  // 范围几何
  extent: new Extent({
     "xmin":10,
     "xmax":210,
     "ymin":0,
     "ymax":100,
  })
});

按范围跳转示例-拿到图层信息后跳转

// ES5引入方式
const { IGSMapImageLayer } = Zondy.Layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-leaflet-plugin"
const igsMapImageLayer = new IGSMapImageLayer({
  url: 'http://192.168.82.89:8089/igs/rest/services/Map/Hubei4326/MapServer'
});
map.add(igsMapImageLayer);
// 图层加载完毕
igsMapImageLayer.on('layer-view-created', function (result) {
  console.log("加载完毕:", result.layer)
  //视点跳转
  mapView.flyTo({
    extent: result.layer.extent
  });
})

# getCenter()

获取当前视图的中心点(经纬度中心点)

查看源代码 view/MapView.js, line 1139

中心点对象

Object

# getExtent()

获取当前视图的地理范围

查看源代码 view/MapView.js, line 1405

获取当前视图的地理范围

Extent

# getMaxZoom()

获取最大缩放级数

查看源代码 view/MapView.js, line 1210

最大缩放级数

Number

# getMinZoom()

获取最小缩放级数

查看源代码 view/MapView.js, line 1194

最小缩放级数

Number

# getPixelCenter()

获取当前视图的像素中心点

查看源代码 view/MapView.js, line 1226

像素中心点对象

Object

# getPixelExtent()

获取当前视图的宽高范围，单位像素

查看源代码 view/MapView.js, line 1218

视图宽高对象

Object

# getPixelWorldExtent()

获取当前视图的像素范围

查看源代码 view/MapView.js, line 1234

当前视图的像素范围

Object

# getScale0()

获取当前比例尺

查看源代码 view/MapView.js, line 1825

比例尺 实际10000米:地图1米

Number

# getSize()

获取当前视图容器的宽高，单位像素

查看源代码 view/MapView.js, line 1202

当前视图容器的宽高对象

Object

# getZoom()

获取当前缩放级数

查看源代码 view/MapView.js, line 1174

当前缩放级数

Number

# hitTest(screenPoint)

穿透检测，图元拾取。目前支持graphic类型拾取结果，支持图层类型GraphicLayer，FeatureLayer。

参数:

名称 类型 描述
screenPoint Object

屏幕像素坐标点，例如{ x: 900, y: 500 }

查看源代码 view/MapView.js, line 1573

图元检测结果

Array
示例

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

// ES6引入方式
import { MapView } from "@mapgis/webclient-leaflet-plugin";
import { Map, Point, Polygon, MultiPolygon ,Extent, GraphicsLayer, Feature, Circle, IGSFeatureLayer, IGSTileLayer } from "@mapgis/webclient-common";
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
this.mapView = new MapView({
  // 视图id
  viewId: "mapgis-2d-viewer",
  // 图层管理容器
  map: map,
})
// 创建一个要素
const feature = [
  new Feature({
    id: '11113',
    geometry: new Circle({
      center: [113, 35],
      radius: 10000,
      radiusUnit: 'kilometers',
    })
  }),
  new Feature({
    id: '11114',
    geometry: new Polygon({
      coordinates: [
        // 外圈
        [
          [113.0, 29.0],
          [116.0, 29.0],
          [116.0, 35.0],
          [113.0, 35.0],
          [113.0, 29.0]
        ]
      ]
    })
  }),
  new Feature({
    id: '11115',
    geometry:new MultiPolygon({
      coordinates: [
        [
          // 外圈
          [
            [112.0, 28.0],
            [115.0, 28.0],
            [115.0, 30.0],
            [112.0, 30.0],
            [112.0, 28.0]
          ],
          // 第一个内圈
          [
            [112.2, 28.2],
            [112.2, 29.8],
            [114.8, 29.8],
            [114.8, 28.2],
            [112.2, 28.2]
          ]
        ]
      ]
    })
  })
]
// 初始化几何图层
const graphicsLayer = new GraphicsLayer({
  graphics:feature
})
map.add(this.graphicsLayer)
const result = this.mapView.hitTest({x:1100,y:600})

# takeScreenshot(optionsopt)

屏幕快照

参数:

名称 类型 默认值 描述
options Object {}

屏幕快照配置配置
format PictureFormat PictureFormat.png

照片格式，支持png，jpeg格式
filename String 'screenshotFile'

下载文件名
width Number

图片宽度
height Number

图片高度
x Number

图片原点x
y Number

图片原点y
isDownload Boolean true

是否下载图片

查看源代码 view/MapView.js, line 1389

屏幕快照 {dataUrl String }，且浏览器会下载图片

Object
示例

屏幕快照

// ES5引入方式
const { Map, MapView } = Zondy
const { PictureFormat } = Zondy.Enum
// ES6引入方式
import { Map, MapView } from "@mapgis/webclient-leaflet-plugin"
import { PictureFormat } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapView({
  // 二维场景视图的容器(html的div标签)ID
  viewId: "二维场景视图的容器的id",
  // 图层管理容器
  map: map
})
// 设置屏幕快照参数
const screenshotOptions: {
   format: PictureFormat.png
}
// 开始屏幕快照
mapView.takeScreenshot(screenshotOptions).then((result) => {
  // 获取base64格式的url字符串
  console.log("dataUrl:", result.dataUrl)
})

# toJSON()

导出场景视图的配置文件

查看源代码 view/MapView.js, line 1242

导出的配置文件

Object

# toMap(screenPoint)

屏幕像素坐标点转地理坐标点

参数:

名称 类型 描述
screenPoint Object

屏幕像素坐标点，例如{ x: 900, y: 500 }

查看源代码 view/MapView.js, line 1299

地理坐标点

Point
示例

屏幕像素坐标点转地理坐标示例

// ES6引入方式
import { MapView } from "@mapgis/webclient-leaflet-plugin"
import { Map, Point, Extent } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapView({
  // 视图id
  viewId: "mapgis-2d-viewer",
  // 图层管理容器
  map: map
});
const screenPoint = { x: 900, y: 500 }
mapView.toMap(screenPoint)

# toScreen(point)

地理坐标点转屏幕像素坐标点

参数:

名称 类型 描述
point Point

地理坐标点

查看源代码 view/MapView.js, line 1334

屏幕像素坐标点

Object
示例

地理坐标点转屏幕像素坐标示例

// ES6引入方式
import { MapView } from "@mapgis/webclient-leaflet-plugin"
import { Map, Point, Extent } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapView({
  // 视图id
  viewId: "mapgis-2d-viewer",
  // 图层管理容器
  map: map
});
const geoPoint = new Point({ coordinates: [123, 23, 0] })
mapView.toScreen(geoPoint)
构造函数
成员变量
方法
事件