# new Popup(options)
二维场景信息弹窗(leaflet引擎)
参考示例：
[初始化二维场景视图]
[ES6引入方式]：
import { Popup } from '@mapgis/webclient-leaflet-plugin'
自定义样式说明：
zondy-popup__content 弹窗容器样式
zondy-popup__tip 弹窗对话框箭头样式
zondy-popup__header 弹窗头部样式
zondy-popup__content 弹窗主体样式
zondy-popup__footer 弹窗底部样式
参数:
| 名称 | 类型 | 描述 |
|---|---|---|
options |
Object | 构造参数 |
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：缩放按钮。 |
示例
// 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)
<style>
.zondy-popup__container{
background-color: #40a9ff;
margin: 0
}
.zondy-popup__tip{
// display: none;
background-color: #ffffff;
}
.zondy-popup__header{
background-color: #40a9ff;
}
.zondy-popup__content{
background-color: #ffffff;
}
.zondy-popup__footer{
// display: none;
background-color: #40a9ff;
}
</style>