MapGIS Client for JavaScript API

new MapView(options)

view/MapView.js, line 35

支持如下方法：

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

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

Name Type Description

options

Object

构造参数

Name	Type	Default	Description
`Map`	Map		可选图层管理容器对象
`viewId`	String		可选二维场景视图的容器(html的div标签)ID
`innerView`	Object		可选实际的leaflet引擎对应地图对象
`spatialReference`	SpatialReference		可选视图空间参考系
`attributionControl`	Boolean	false	可选是否显示右下角水印
`zoomControl`	Boolean	true	可选是否显示缩放控件
`doubleClickZoom`	Boolean \| String	true	可选是否允许双击鼠标左键缩放或者缩放至图层中心点
`dragging`	Boolean	true	可选是否允许拖拽
`zoomSnap`	Number	1	可选当使用flyTo缩放至中心点时，缩放级数乘以的系数，默认值为1
`zoomDelta`	Number	1	可选当触发zoomIn或者zoomOut操作时，缩放级数乘以的系数，默认值为1
`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		可选地图视图中心点。如果有中心点，看是否存在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范围内。
`maxScale`	Number		可选地图视图的最大比例尺（比例尺的分母，该值越小，比例尺越大）。视图的当前比列尺不会大于地图视图的最大比例尺。默认值为undefined，undefined表示用户未设置，地图视图会根据当前加载的图层，自动计算maxScale、minScale的值。如果用户设置了该值，则地图视图将直接采用用户设置的值。maxScale的值应该始终小于minScale的值。
`minScale`	Number		可选地图视图的最小比例尺（比例尺的分母，该值越大，比例尺越小）。视图的当前比列尺不会小于地图视图的最小比例尺。默认值为undefined，undefined表示用户未设置，地图视图会根据当前加载的图层，自动计算maxScale、minScale的值。如果用户设置了该值，则地图视图将直接采用用户设置的值。minScale的值应该始终大于maxScale的值。
`maxZoom`	Number		可选最大缩放级数。优先级低于maxScale
`minZoom`	Number		可选最小缩放级数。优先级低于minScale
`popup`	Object		可选地图弹框
`rotation`	Number	0	可选地图视图旋转选项。单位为度，默认为0，表示不进行旋转
`fullExtent`	Number		可选地图视图最大显示范围。用户不设置时，将地图范围作为地图视图的最大显示范围，用户设置时采用用户设置的。地图视图初始化时，会根据此范围计算地图视图的最小比例尺，当瓦片数据的最大比例尺小于此比例尺时，无法显示。在相同视图大小下，fullExtent越大，地图视图的最小比例尺越小。
`initialGoTo`	Boolean	true	可选是否在视图构造时根据视图的center、scale、zoom、extent属性进行视图范围的设置

Fires

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:引擎视图创建完毕事件
BaseView#event:地图视图改变事件

Example

初始化一个二维场景视图

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

Extends

zondy.MapView

Members

animationBoolean

是否启用视角跳转动画

centerPoint

地图视图中心点

engineTypeEngineType

引擎类型，为'leaflet'

extentExtent

地图视图可视范围

fullExtentExtent

地图视图最大显示范围。用户不设置时，将地图范围作为地图视图的最大显示范围，用户设置时采用用户设置的。地图视图初始化时，会根据此范围计算地图视图的最小比例尺，当瓦片数据的最大比例尺小于此比例尺时，无法显示。在相同视图大小下，fullExtent越大，地图视图的最小比例尺越小。

heightNumber

地图视图高度

maxScaleNumber

地图视图的最大比例尺（比例尺的分母，该值越小，比例尺越大）。视图的当前比列尺不会大于地图视图的最大比例尺。默认值为undefined，undefined表示用户未设置，地图视图会根据当前加载的图层，自动计算maxScale、minScale的值。如果用户设置了该值，则地图视图将直接采用用户设置的值。maxScale的值应该始终小于minScale的值。

minScaleNumber

地图视图的最小比例尺（比例尺的分母，该值越大，比例尺越小）。视图的当前比列尺不会小于地图视图的最小比例尺。默认值为undefined，undefined表示用户未设置，地图视图会根据当前加载的图层，自动计算maxScale、minScale的值。如果用户设置了该值，则地图视图将直接采用用户设置的值。minScale的值应该始终大于maxScale的值。

popupPopup

地图视图弹框popup

preferCanvasBoolean

视图渲染方式是否为canvas

rotationBoolean

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

scaleNumber

地图视图比例尺（比例尺的分母）

spatialReferenceLockedBoolean

是否锁定视图空间参考系

stationaryBoolean

试图是否静止

widthNumber

地图视图宽度

zoomNumber

视图层级

Methods

MapView.fromJSON(json){MapView} view/MapView.js, line 1551

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

Name	Type	Description
`json`	Object	json对象

Returns:

Type	Description
MapView	一个新的场景视图对象

MapView.fromJSON(json){MapView} view/MapView.js, line 2560

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

Name	Type	Description
`json`	Object	场景视图配置

Returns:

Type	Description
MapView

clone(){MapView} view/MapView.js, line 1542

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

Returns:

Type	Description
MapView	一个新的场景视图对象

destroy() view/MapView.js, line 1412

销毁视图对象

flyTo(options) view/MapView.js, line 366

视点跳转

Name Type Description

options

跳转参数

Name	Type	Default	Description
`center`	Array		可选跳转中心点
`zoom`	Number	1	可选地图层级
`extent`	Extent		可选按范围跳转

Examples

中心点跳转示例

// ES5引入方式
const { Map } = zondy
const { MapView } = zondy.leaflet
// ES6引入方式
import { Map } from "@mapgis/webclient-common"
import { 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 } = zondy
const { Extent } = zondy.geometry
const { MapView } = zondy.leaflet
// ES6引入方式
import { Map, Extent } from "@mapgis/webclient-common"
import { MapView } 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-common"
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(){Object} view/MapView.js, line 1423

获取当前视图的中心点

Returns:

Type	Description
Object	中心点对象

getExtent(){Extent} view/MapView.js, line 1668

获取当前视图的地理范围

Returns:

Type	Description
Extent	获取当前视图的地理范围

getMaxZoom(){Number} view/MapView.js, line 1494

获取最大缩放级数

Returns:

Type	Description
Number	最大缩放级数

getMinZoom(){Number} view/MapView.js, line 1478

获取最小缩放级数

Returns:

Type	Description
Number	最小缩放级数

getPixelCenter(){Object} view/MapView.js, line 1510

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

Returns:

Type	Description
Object	像素中心点对象

getPixelExtent(){Object} view/MapView.js, line 1502

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

Returns:

Type	Description
Object	视图宽高对象

getPixelWorldExtent(){Object} view/MapView.js, line 1518

获取当前视图的像素范围

Returns:

Type	Description
Object	当前视图的像素范围

getScale(){Number} view/MapView.js, line 2211

获取当前比例尺

Returns:

Type	Description
Number	比例尺实际10000米:地图1米

getSize(){Object} view/MapView.js, line 1486

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

Returns:

Type	Description
Object	当前视图容器的宽高对象

getZoom(){Number} view/MapView.js, line 1456

获取当前缩放级数

Returns:

Type	Description
Number	当前缩放级数

getZoomByExtent(value){Number} view/MapView.js, line 1688

根据视野范围获取对应的层级

Name	Type	Description
`value`	Extent	范围对象

Returns:

Type	Description
Number	视野范围获取对应的层级

goTo(goToTarget, options){Promise.<Boolean>} view/MapView.js, line 571

视点跳转为给定的目标

Name Type Description

goToTarget

跳转参数

Name	Type	Default	Description
`center`	Point \| Array		可选视图跳转中心点
`zoom`	Number		可选视图跳转层级
`scale`	Number		可选视图跳转比例尺
`layer`	Layer \| SubLayer \| undefined		可选跳转的图层
`goToLayerMode`	String	'extent'	可选跳转图层的模式，仅在传入layer参数且layer为瓦片类图层时生效。支持两种模式，'extent' 表示根据图层范围进行跳转， 'fix-level'按范围并调整到到整数级
`target`	Geometry \| Array.<Geometry> \| Collection.<Geometry>		可选按范围跳转

options

动画参数

Name	Type	Default	Description
`animate`	Boolean	true	可选新视图的过渡是否开启动画，默认开启动画
`duration`	Number		可选动画的持续时间，以毫秒为单位，默认不设置，动画表现为引擎默认动画效果

Returns:

Type	Description
Promise.<Boolean>	视图跳转是否成功

Examples

中心点跳转示例

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

按范围跳转示例

// ES5引入方式
const { Map } = zondy
const { Extent, Circle } = zondy.geometry
const { MapView } = zondy.leaflet
// ES6引入方式
import { Map, Extent, Circle } from "@mapgis/webclient-common"
import { MapView } from "@mapgis/webclient-leaflet-plugin"
// 初始化图层管理容器
map = new Map();
// 初始化地图视图对象
mapView = new MapView({
  // 视图id
  viewId: "view-id",
  // 图层管理容器
  map: map
});
const extent1 = new Extent({
  xmin: 111.88463529230717,
  ymin: 28.646934514163803,
  xmax: 116.89989408129225,
  ymax: 33.07991791253288,
})
const geometry2 = new Circle({
  center: [111, 29],
  radius: 100,
  radiusUnit: "kilometers",
})
mapView
  .goTo({
    target: [extent1, geometry2],
  })
  .then(() => {
    console.log("gotoExtent callback")
  })

hitTest(screenPoint){Array} view/MapView.js, line 1939

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

Name	Type	Description
`screenPoint`	Object	屏幕像素坐标点，例如{ x: 900, y: 500 }

Returns:

Type	Description
Array	图元检测结果

Example

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

// ES5引入方式
const { Map, Feature } = zondy
const { Point, Polygon, MultiPolygon ,Extent, Circle } = zondy.geometry
const { GraphicsLayer, IGSFeatureLayer, IGSTileLayer } = zondy.layer
const { MapView } = zondy.leaflet
// 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(options){Object} view/MapView.js, line 1652

屏幕快照

Name Type Default Description

options

Object

{}

可选

屏幕快照配置配置

Name	Type	Default	Description
`format`	PictureFormat	PictureFormat.PNG	可选照片格式，支持png，jpeg格式
`filename`	String	'screenshotFile'	可选下载文件名
`width`	Number		可选图片宽度
`height`	Number		可选图片高度
`x`	Number		可选图片原点x
`y`	Number		可选图片原点y
`isDownload`	Boolean	true	可选是否下载图片

Returns:

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

Example

屏幕快照

// ES5引入方式
const { Map } = zondy
const { MapView } = zondy.leaflet
const { PictureFormat } = zondy.Enum
// ES6引入方式
import { Map, PictureFormat } from "@mapgis/webclient-common"
import { MapView } from "@mapgis/webclient-leaflet-plugin"
// 初始化图层管理容器
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(){Object} view/MapView.js, line 1526

导出场景视图的配置文件

Returns:

Type	Description
Object	导出的配置文件

toMap(screenPoint){Point} view/MapView.js, line 1576

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

Name	Type	Description
`screenPoint`	Object	屏幕像素坐标点，例如{ x: 900, y: 500 }

Returns:

Type	Description
Point	地理坐标点

Example

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

// 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){Object} view/MapView.js, line 1603

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

Name	Type	Description
`point`	Point	地理坐标点

Returns:

Type	Description
Object	屏幕像素坐标点

Example

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

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

Class: MapView

new MapView(options)

支持如下方法：

Fires

Example

Extends

Members

animationBoolean

centerPoint

engineTypeEngineType

extentExtent

fullExtentExtent

heightNumber

maxScaleNumber

minScaleNumber

popupPopup

preferCanvasBoolean

rotationBoolean

scaleNumber

spatialReferenceLockedBoolean

stationaryBoolean

widthNumber

zoomNumber

Methods

MapView.fromJSON(json){MapView}

Returns:

MapView.fromJSON(json){MapView}

Returns:

clone(){MapView}

Returns:

destroy()

flyTo(options)

Examples

getCenter(){Object}

Returns:

getExtent(){Extent}

Returns:

getMaxZoom(){Number}

Returns:

getMinZoom(){Number}

Returns:

getPixelCenter(){Object}

Returns:

getPixelExtent(){Object}

Returns:

getPixelWorldExtent(){Object}

Returns:

getScale(){Number}

Returns:

getSize(){Object}

Returns:

getZoom(){Number}

Returns:

getZoomByExtent(value){Number}

Returns:

goTo(goToTarget, options){Promise.<Boolean>}

Returns:

Examples

hitTest(screenPoint){Array}

Returns:

Example

takeScreenshot(options){Object}

Returns:

Example

toJSON(){Object}

Returns:

toMap(screenPoint){Point}

Returns:

Example

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

toScreen(point){Object}

Returns:

Example

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