类名 MapViewLeaflet

# new MapViewLeaflet(options)

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

参数

名称 类型 默认值 描述
options Object

构造参数

Map Map

图层管理容器对象

viewId String

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

limitedMinZoom Number

视图加载最小缩放级数

zoom Number 1

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

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 new Point({coordinates:[0,0]})

地图视图中心点

extent Extent

地图视图可视范围

scale Number

地图视图比例尺(比例尺的分母)

maxScale Number

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

minScale Number

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

popup Object

地图弹框

rotation Number 0

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

支持如下方法:
[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, MapViewLeaflet } = zondy
// ES6引入方式
import { Map, MapViewLeaflet } from "@mapgis/webclient-leaflet-plugin"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapViewLeaflet({
  // 二维场景视图的容器(html的div标签)ID
  viewId: "二维场景视图的容器的id",
  // 图层管理容器
  map: map
});

继承关系

成员变量

成员变量概述

名称 类型 描述
animation Boolean

是否启用视角跳转动画

center Point

地图视图中心点

engineType Object

引擎类型,为'leaflet'

extent Extent

地图视图可视范围

fullExtent Extent

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

height Number

地图视图高度

maxScale Number

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

minScale Number

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

popup Popup

地图视图弹框popup

preferCanvas Boolean

视图渲染方式是否为canvas

rotation Boolean

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

scale Number

地图视图比例尺(比例尺的分母)

spatialReference SpatialReference

视图空间参考系

spatialReferenceLocked Boolean

是否锁定视图空间参考系

stationary Boolean

试图是否静止

width Number

地图视图宽度

zoom Number

视图层级

成员变量详情

Boolean

# animation

是否启用视角跳转动画

Point

# center

地图视图中心点

Object

# readonly engineType

引擎类型,为'leaflet'

Extent

# extent

地图视图可视范围

Extent

# fullExtent

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

Number

# readonly height

地图视图高度

Number

# maxScale

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

Number

# minScale

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

Popup

地图视图弹框popup

Boolean

# preferCanvas

视图渲染方式是否为canvas

Boolean

# rotation

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

Number

# scale

地图视图比例尺(比例尺的分母)

SpatialReference

# readonly spatialReference

视图空间参考系

Boolean

# spatialReferenceLocked

是否锁定视图空间参考系

Boolean

# readonly stationary

试图是否静止

Number

# readonly width

地图视图宽度

Number

# zoom

视图层级

方法

方法概述

名称 返回值类型 描述
fromJSON MapViewLeaflet

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

fromJSON MapViewLeaflet

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

clone MapViewLeaflet

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

destroy

销毁视图对象

flyTo

视点跳转

getCenter Object

获取当前视图的中心点

getExtent Extent

获取当前视图的地理范围

getMaxZoom Number

获取最大缩放级数

getMinZoom Number

获取最小缩放级数

getPixelCenter Object

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

getPixelExtent Object

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

getPixelWorldExtent Object

获取当前视图的像素范围

getScale Number

getSize Object

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

getZoom Number

获取当前缩放级数

getZoomByExtent Number

goTo

视点跳转为给定的目标

hitTest Array

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

takeScreenshot Object

屏幕快照

toJSON Object

导出场景视图的配置文件

toMap Point

toScreen Object

方法详情

# static fromJSON(json)

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

参数

名称 类型 描述
json Object

json对象

一个新的场景视图对象

MapViewLeaflet

# static fromJSON(json)

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

参数

名称 类型 描述
json Object

场景视图配置

MapViewLeaflet

# clone()

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

一个新的场景视图对象

MapViewLeaflet

# destroy()

销毁视图对象

# flyTo(options)

视点跳转

参数

名称 类型 默认值 描述
options

跳转参数

center Array

跳转中心点

zoom Number 1

地图层级

extent Extent

按范围跳转

示例

中心点跳转示例

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

按范围跳转示例

// ES5引入方式
const { Map, MapViewLeaflet } = zondy
const { Extent } = zondy.Geometry
// ES6引入方式
import { Map, MapViewLeaflet, Extent } from "@mapgis/webclient-leaflet-plugin"
// 初始化图层管理容器
map = new Map();
// 初始化地图视图对象
mapView = new MapViewLeaflet({
  // 视图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()

获取当前视图的中心点

中心点对象

Object

# getExtent()

获取当前视图的地理范围

获取当前视图的地理范围

Extent

# getMaxZoom()

获取最大缩放级数

最大缩放级数

Number

# getMinZoom()

获取最小缩放级数

最小缩放级数

Number

# getPixelCenter()

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

像素中心点对象

Object

# getPixelExtent()

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

视图宽高对象

Object

# getPixelWorldExtent()

获取当前视图的像素范围

当前视图的像素范围

Object

# getScale()

获取当前比例尺

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

Number

# getSize()

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

当前视图容器的宽高对象

Object

# getZoom()

获取当前缩放级数

当前缩放级数

Number

# getZoomByExtent(value)

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

参数

名称 类型 描述
value Extent

范围对象

视野范围获取对应的层级

Number

# goTo(goToTarget, options)

视点跳转为给定的目标

参数

名称 类型 默认值 描述
goToTarget

跳转参数

center Point | Array

视图跳转中心点

zoom Number

视图跳转层级

scale Number

视图跳转比例尺

target Geometry | Array.<Geometry> | Collection.<Geometry>

按范围跳转

options

动画参数

animate Boolean true

新视图的过渡是否开启动画,默认开启动画

duration Number 200

动画的持续时间,以毫秒为单位,默认200毫秒

示例

中心点跳转示例

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

按范围跳转示例

// ES5引入方式
const { Map, MapViewLeaflet } = zondy
const { Extent, Circle } = zondy.Geometry
// ES6引入方式
import { Map, MapViewLeaflet as MapViewLeaflet } from "@mapgis/webclient-leaflet-plugin"
// 初始化图层管理容器
map = new Map();
// 初始化地图视图对象
mapView = new MapViewLeaflet({
  // 视图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)

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

参数

名称 类型 描述
screenPoint Object

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

图元检测结果

Array
示例

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

// ES6引入方式
import { MapViewLeaflet } 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 MapViewLeaflet({
  // 视图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

是否下载图片

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

Object
示例

屏幕快照

// ES5引入方式
const { Map, MapViewLeaflet } = zondy
const { PictureFormat } = zondy.Enum
// ES6引入方式
import { Map, MapViewLeaflet } from "@mapgis/webclient-leaflet-plugin"
import { PictureFormat } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapViewLeaflet({
  // 二维场景视图的容器(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

# toMap(screenPoint)

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

参数

名称 类型 描述
screenPoint Object

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

地理坐标点

Point
示例

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

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

# toScreen(point)

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

参数

名称 类型 描述
point Point

地理坐标点

屏幕像素坐标点

Object
示例

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

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