Class: Popup

Popup

view/utils/Popup.js, line 9

二维场景信息弹窗(leaflet引擎) 参考示例: [初始化二维场景视图] [ES6引入方式]:
import { Popup } from '@mapgis/webclient-leaflet-plugin'
自定义样式说明:
zondy-popup__container 弹窗容器样式
zondy-popup__tip 弹窗对话框箭头样式
zondy-popup__header 弹窗头部样式
zondy-popup__content 弹窗主体样式
zondy-popup__footer 弹窗底部样式

Name Type Description
options Object

构造参数

Name Type Description
view MapView 可选

弹窗地图视图对象

id String 可选

弹窗ID

location Point 可选

弹窗定位点

title String 可选

弹窗标题

content String | HTMLElement 可选

弹框内容

alignment String 可选

弹框方位,值为"auto"或"bottom-left"或"top-center"或"top-right"或"bottom-left"或"bottom-center"或"bottom-right"。

defaultButtons Array 可选

弹框内容,可选数组项有'toggle','close','zoom'。toggle:收缩主题内容按钮;close:关闭按钮;zoom:缩放按钮。

Example

打开视图弹窗

// ES5引入方式
const { Map } = zondy
const { MapView } = zondy.leaflet
// ES6引入方式
import { MapView } from "@mapgis/webclient-leaflet-plugin"
import { Map } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapView({
  // 二维场景视图的容器(html的div标签)ID
  viewId: "二维场景视图的容器的id",
  // 图层管理容器
  map: map
});
const popupObj = {
 title: "标题",
 content:"弹出窗口主题内容,详细内容",
 location: new Point({coordinates:[123,34]}),
 alignment: "bottom-center"
}
mapView.popup.open(popupObj)
mapView.popup.close(popupObj)

Members

alignmentString

弹框方位,值为"auto"|"bottom-left"|"top-center"|"top-right"|"bottom-left"|"bottom-center"|"bottom-right"

contentString

弹框内容

defaultButtonsArray

默认按钮 ['toggle','close','zoom']

locationString

弹框位置

titleString

弹框标题

viewMapView

弹框的地图视野

Methods

close()

view/utils/Popup.js, line 527

关闭popup弹窗

open(options)

view/utils/Popup.js, line 396

打开popup弹窗

Name Type Description
options Object

弹窗属性对象

openPopup(options)

view/utils/Popup.js, line 410

打开popup弹窗

Name Type Description
options Object

弹窗属性对象