@mapgis/webclient-leaflet-plugin

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Popup</title>  <link type="text/css" rel="stylesheet" href="styles/app.min.css"> <link type="text/css" rel="stylesheet" href="styles/iframe.css"> <link type="text/css" rel="stylesheet" href=""> </head> <body class="layout small-header"> <div id="stickyNavbarOverlay"></div> <div class="top-nav"> <div class="inner"> <a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> <div class="logo"> <h1> MapGIS Client for JavaScript API</h1> </div> <div class="menu"> <div class="navigation"> <a class="link user-link " href="/docs/cesium/index.html" > Cesium </a> <a class="link user-link " href="/docs/mapboxgl/index.html" > MapboxGL </a> <a class="link user-link " href="/docs/leaflet/index.html" > Leaflet </a> <a class="link user-link " href="/docs/openlayers/index.html" > OpenLayers </a> </div> </div> </div> </div> <div id="main"> <div class="sidebar " id="sidebarNav" > <div> <span class="mapgis-api-document-span"><a href="index.html">API文档</a></span> </div> <div class="search-wrapper"> <input id="search" type="text" placeholder="搜索文档..." class="input"> </div> <nav> <div class="category"><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">视图模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="DrawControl.html">DrawControl</a><span style="display: none;"><p>绘制工具</p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="MapView.html">MapView</a><span style="display: none;"><p>二维场景视图(leaflet引擎)，对地图引擎进行管理，如果要对地图图层进行管理请参考<code>Map</code>，<br/> 参考示例： <a href='#MapView'>[初始化二维场景视图]</a> <br>[ES5引入方式]：<br/> Zondy.MapView() <br/> [ES6引入方式]：<br/> import { MapView } from '@mapgis/webclient-leaflet-plugin' <br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Popup.html">Popup</a><span style="display: none;"><p>二维场景信息弹窗(leaflet引擎) 参考示例： <a href='#MapView'>[初始化二维场景视图]</a> [ES6引入方式]：<br/> import { Popup } from '@mapgis/webclient-leaflet-plugin' <br/> 自定义样式说明：<br/> zondy-popup__content 弹窗容器样式<br/> zondy-popup__tip 弹窗对话框箭头样式<br/> zondy-popup__header 弹窗头部样式<br/> zondy-popup__content 弹窗主体样式<br/> zondy-popup__footer 弹窗底部样式<br/></p></span></li><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Screenshot.html">Screenshot</a><span style="display: none;"><p>屏幕打印工具</p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">草图编辑模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchEditorLeaflet.html">SketchEditorLeaflet</a><span style="display: none;"><p>二维场景草图编辑类<br/> <br>[ES5引入方式]：<br/> const { SketchEditorLeaflet } = Zondy <br/> [ES6引入方式]：<br/> import { SketchEditorLeaflet } from "@mapgis/webclient-leaflet-plugin" <br/></p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">渲染器模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Zondy.ThemeLayer.GraphThemeLayer.html">GraphThemeLayer</a><span style="display: none;"><p>统计专题图通过为每个要素绘制统计图表来反映其对应的专题值的大小。它可同时表示多个字段属性信息，在区域本身与各区域之间形成横向和纵向的对比。<br>统计专题图多用于具有相关数量特征的地图上，比如表示不同地区多年的粮食产量、GDP、人口等，不同时段客运量、地铁流量等。目前提供的统计图类型有：柱状图（Bar），折线图（Line），饼图（Pie），三维柱状图（Bar3D），点状图（Point），环状图（Ring）。</p></span></li></ul></div> </nav> </div> <div class="core" id="main-content-wrapper"> <div class="content"> <header id="page-title" class="page-title"> <span class="page-title-main">类名</span> <span class="page-title-sub">Popup</span> </header> <section> <article> <div class="container-overview"> <div class='vertical-section'> <div class="members"> <div class="member"> <h4 class="name" id="Popup"> <a class="href-link" href="#Popup">#</a> <span class="code-name" style="font-size:30px"> new Popup<span class="signature">(options)</span> </span> </h4> <div class="description"> <p>二维场景信息弹窗(leaflet引擎) 参考示例： <a href='#MapView'>[初始化二维场景视图]</a> [ES6引入方式]：<br/> import { Popup } from '@mapgis/webclient-leaflet-plugin' <br/> 自定义样式说明：<br/> zondy-popup__content 弹窗容器样式<br/> zondy-popup__tip 弹窗对话框箭头样式<br/> zondy-popup__header 弹窗头部样式<br/> zondy-popup__content 弹窗主体样式<br/> zondy-popup__footer 弹窗底部样式<br/></p> </div> <h4>参数:</h4> <div class="table-container"> <table class="params table"> <thead> <tr> <th>名称</th> <th>类型</th> <th class="last">描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>构造参数</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>view</code></td> <td class="type"> <span class="param-type"><a href="MapView.html">MapView</a></span> </td> <td class="description last"><p>弹窗地图视图对象</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>id</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last"><p>弹窗ID</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>location</code></td> <td class="type"> <span class="param-type">Point</span> </td> <td class="description last"><p>弹窗定位点</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>title</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last"><p>弹窗标题</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>content</code></td> <td class="type"> <span class="param-type">String</span> | <span class="param-type">HTMLElement</span> </td> <td class="description last"><p>弹框内容</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>alignment</code></td> <td class="type"> <span class="param-type">String</span> </td> <td class="description last"><p>弹框方位，值为"auto"或"bottom-left"或"top-center"或"top-right"或"bottom-left"或"bottom-center"或"bottom-right"。</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>defaultButtons</code></td> <td class="type"> <span class="param-type">Array</span> </td> <td class="description last"><p>弹框内容，可选数组项有'toggle','close','zoom'。toggle：收缩主题内容按钮；close：关闭按钮；zoom：缩放按钮。</p></td> </tr> </tbody> </table> </div> <dl class="details"> <p class="tag-source"> <a href="view_utils_Popup.js.html" class="button">查看源代码</a> <span> <a href="view_utils_Popup.js.html">view/utils/Popup.js</a>, <a href="view_utils_Popup.js.html#line3">line 3</a> </span> </p> </dl> <h5>示例</h5> <p class="code-caption"><h7 id='Popup'>打开视图弹窗</h7></p> <pre class="prettyprint"><code>// 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 }); 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></code></pre> </div> </div> </div> </div> <div class='vertical-section'> <h3 id='member'>成员变量</h3> <div class="members"> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">String</span> </span> <h4 class="name" id="alignment"> <a class="href-link" href="#alignment">#</a> <span class="code-name"> alignment </span> </h4> <div class="description"> <p>弹框方位，值为"auto"|"bottom-left"|"top-center"|"top-right"|"bottom-left"|"bottom-center"|"bottom-right"</p> </div> <dl class="details"> <p class="tag-source"> <a href="view_utils_Popup.js.html" class="button">查看源代码</a> <span> <a href="view_utils_Popup.js.html">view/utils/Popup.js</a>, <a href="view_utils_Popup.js.html#line107">line 107</a> </span> </p> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">String</span> </span> <h4 class="name" id="content"> <a class="href-link" href="#content">#</a> <span class="code-name"> content </span> </h4> <div class="description"> <p>弹框内容</p> </div> <dl class="details"> <p class="tag-source"> <a href="view_utils_Popup.js.html" class="button">查看源代码</a> <span> <a href="view_utils_Popup.js.html">view/utils/Popup.js</a>, <a href="view_utils_Popup.js.html#line97">line 97</a> </span> </p> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">Array</span> </span> <h4 class="name" id="defaultButtons"> <a class="href-link" href="#defaultButtons">#</a> <span class="code-name"> defaultButtons </span> </h4> <div class="description"> <p>默认按钮 ['toggle','close','zoom']</p> </div> <dl class="details"> <p class="tag-source"> <a href="view_utils_Popup.js.html" class="button">查看源代码</a> <span> <a href="view_utils_Popup.js.html">view/utils/Popup.js</a>, <a href="view_utils_Popup.js.html#line112">line 112</a> </span> </p> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">String</span> </span> <h4 class="name" id="location"> <a class="href-link" href="#location">#</a> <span class="code-name"> location </span> </h4> <div class="description"> <p>弹框位置</p> </div> <dl class="details"> <p class="tag-source"> <a href="view_utils_Popup.js.html" class="button">查看源代码</a> <span> <a href="view_utils_Popup.js.html">view/utils/Popup.js</a>, <a href="view_utils_Popup.js.html#line87">line 87</a> </span> </p> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">String</span> </span> <h4 class="name" id="title"> <a class="href-link" href="#title">#</a> <span class="code-name"> title </span> </h4> <div class="description"> <p>弹框标题</p> </div> <dl class="details"> <p class="tag-source"> <a href="view_utils_Popup.js.html" class="button">查看源代码</a> <span> <a href="view_utils_Popup.js.html">view/utils/Popup.js</a>, <a href="view_utils_Popup.js.html#line92">line 92</a> </span> </p> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type"><a href="MapView.html">MapView</a></span> </span> <h4 class="name" id="view"> <a class="href-link" href="#view">#</a> <span class="code-name"> view </span> </h4> <div class="description"> <p>弹框的地图视野</p> </div> <dl class="details"> <p class="tag-source"> <a href="view_utils_Popup.js.html" class="button">查看源代码</a> <span> <a href="view_utils_Popup.js.html">view/utils/Popup.js</a>, <a href="view_utils_Popup.js.html#line77">line 77</a> </span> </p> </dl> </div> </div> </div> <div class='vertical-section'> <h3 id='function'>方法</h3> <div class="members"> <div class="member"> <h4 class="name" id="close"> <a class="href-link" href="#close">#</a> <span class="code-name" style="font-size:30px"> close<span class="signature">()</span> </span> </h4> <div class="description"> <p>关闭popup弹窗</p> </div> <dl class="details"> <p class="tag-source"> <a href="view_utils_Popup.js.html" class="button">查看源代码</a> <span> <a href="view_utils_Popup.js.html">view/utils/Popup.js</a>, <a href="view_utils_Popup.js.html#line485">line 485</a> </span> </p> </dl> </div> <div class="member"> <h4 class="name" id="open"> <a class="href-link" href="#open">#</a> <span class="code-name" style="font-size:30px"> open<span class="signature">(options)</span> </span> </h4> <div class="description"> <p>打开popup弹窗</p> </div> <h4>参数:</h4> <div class="table-container"> <table class="params table"> <thead> <tr> <th>名称</th> <th>类型</th> <th class="last">描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>弹窗属性对象</p></td> </tr> </tbody> </table> </div> <dl class="details"> <p class="tag-source"> <a href="view_utils_Popup.js.html" class="button">查看源代码</a> <span> <a href="view_utils_Popup.js.html">view/utils/Popup.js</a>, <a href="view_utils_Popup.js.html#line371">line 371</a> </span> </p> </dl> </div> <div class="member"> <h4 class="name" id="openPopup"> <a class="href-link" href="#openPopup">#</a> <span class="code-name" style="font-size:30px"> openPopup<span class="signature">(options)</span> </span> </h4> <div class="description"> <p>打开popup弹窗</p> </div> <h4>参数:</h4> <div class="table-container"> <table class="params table"> <thead> <tr> <th>名称</th> <th>类型</th> <th class="last">描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>弹窗属性对象</p></td> </tr> </tbody> </table> </div> <dl class="details"> <p class="tag-source"> <a href="view_utils_Popup.js.html" class="button">查看源代码</a> <span> <a href="view_utils_Popup.js.html">view/utils/Popup.js</a>, <a href="view_utils_Popup.js.html#line385">line 385</a> </span> </p> </dl> </div> </div> </div> </article> </section> </div> <footer class="footer"> <div class="content has-text-centered"> <p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p> <p class="sidebar-created-by"> <a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span> <a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a> </p> </div> </footer> </div> <div id="side-nav" class="side-nav"> <div style="margin-bottom: 10px;"> <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a> </div> <div style="margin-bottom: 10px;"> <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a> </div> <div style="margin-bottom: 10px;"> <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a> </div> <div> <img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a> </div> </div> </div> <script src="scripts/linenumber.js"> </script> <script src="scripts/search.js"> </script> </body> </html>