@mapgis/webclient-leaflet-plugin/documention/Popup.html

开发时需要引入MapGIS Client for JavaScript（Leaflet）开发包；其中包括必备的 CSS 文件和 JS 文件；

<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" id="Popup" 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">
    
             MapView
    
</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>弹框方位，值为&quot;auto&quot;或&quot;bottom-left&quot;或&quot;top-center&quot;或&quot;top-right&quot;或&quot;bottom-left&quot;或&quot;bottom-center&quot;或&quot;bottom-right&quot;。</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">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>























    <h5>示例</h5>
    
        <p class="code-caption"><h7 id='Popup'>打开视图弹窗</h7></p>
    
    
        <pre class="prettyprint"><code>// 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)
&lt;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;
}
&lt;/style></code></pre>
    



                    </div>
                </div>
            </div>
        
    
    </div>
    
    

    

    

    

    

    

    
        <div class='vertical-section'>
            <h3 id='member'>成员变量</h3>
            <h4 style="margin-top: 20px;margin-bottom: 20px;">成员变量概述</h4>
            <div class="table-container">
                <table class="params table">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>类型</th>
                        <th>描述</th>
                    </tr>
                    </thead>
                    <tbody>
                        
                            <tr class="deep-level-0">
                                <td class="name"><code><a href="#alignment">alignment</a></code></td>
                                <td class="name">
                                    <code>
                                        
<span class="param-type">
    
             String
    
</span>



                                    </code>
                                </td>
                                <td class="name"><code><p>弹框方位，值为&quot;auto&quot;|&quot;bottom-left&quot;|&quot;top-center&quot;|&quot;top-right&quot;|&quot;bottom-left&quot;|&quot;bottom-center&quot;|&quot;bottom-right&quot;</p></code></td>
                            </tr>
                        
                            <tr class="deep-level-0">
                                <td class="name"><code><a href="#content">content</a></code></td>
                                <td class="name">
                                    <code>
                                        
<span class="param-type">
    
             String
    
</span>



                                    </code>
                                </td>
                                <td class="name"><code><p>弹框内容</p></code></td>
                            </tr>
                        
                            <tr class="deep-level-0">
                                <td class="name"><code><a href="#defaultButtons">defaultButtons</a></code></td>
                                <td class="name">
                                    <code>
                                        
<span class="param-type">
    
             Array
    
</span>



                                    </code>
                                </td>
                                <td class="name"><code><p>默认按钮 ['toggle','close','zoom']</p></code></td>
                            </tr>
                        
                            <tr class="deep-level-0">
                                <td class="name"><code><a href="#location">location</a></code></td>
                                <td class="name">
                                    <code>
                                        
<span class="param-type">
    
             String
    
</span>



                                    </code>
                                </td>
                                <td class="name"><code><p>弹框位置</p></code></td>
                            </tr>
                        
                            <tr class="deep-level-0">
                                <td class="name"><code><a href="#title">title</a></code></td>
                                <td class="name">
                                    <code>
                                        
<span class="param-type">
    
             String
    
</span>



                                    </code>
                                </td>
                                <td class="name"><code><p>弹框标题</p></code></td>
                            </tr>
                        
                            <tr class="deep-level-0">
                                <td class="name"><code><a href="#view">view</a></code></td>
                                <td class="name">
                                    <code>
                                        
<span class="param-type">
    
             MapView
    
</span>



                                    </code>
                                </td>
                                <td class="name"><code><p>弹框的地图视野</p></code></td>
                            </tr>
                        
                    </tbody>
                </table>
            </div>
            <h4 style="margin-top: 20px;margin-bottom: 20px;">成员变量详情</h4>
            <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>弹框方位，值为&quot;auto&quot;|&quot;bottom-left&quot;|&quot;top-center&quot;|&quot;top-right&quot;|&quot;bottom-left&quot;|&quot;bottom-center&quot;|&quot;bottom-right&quot;</p>
</div>





<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

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

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

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

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

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

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

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

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>





</div>
            
                <div class="member">

    <span class="method-parameter is-pulled-right">
        <label>类型:</label>
        
<span class="param-type">
    
             MapView
    
</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">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>





</div>
            
            </div>
        </div>
    

    
        <div class='vertical-section'>
            <h3 id='function'>方法</h3>
            <h4 style="margin-top: 20px;margin-bottom: 20px;">方法概述</h4>
            <div class="members">
            <div class="table-container">
                <table class="params table">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>返回值类型</th>
                        <th>描述</th>
                    </tr>
                    </thead>
                    <tbody>
                        
                            <tr class="deep-level-0">
                                <td class="name"><code><a href="#close">close</a></code></td>
                                <td class="name">
                                    <code>
                                        
                                    </code>
                                </td>
                                <td class="name"><code><p>关闭popup弹窗</p></code></td>
                            </tr>
                        
                            <tr class="deep-level-0">
                                <td class="name"><code><a href="#open">open</a></code></td>
                                <td class="name">
                                    <code>
                                        
                                    </code>
                                </td>
                                <td class="name"><code><p>打开popup弹窗</p></code></td>
                            </tr>
                        
                            <tr class="deep-level-0">
                                <td class="name"><code><a href="#openPopup">openPopup</a></code></td>
                                <td class="name">
                                    <code>
                                        
                                    </code>
                                </td>
                                <td class="name"><code><p>打开popup弹窗</p></code></td>
                            </tr>
                        
                    </tbody>
                </table>
            </div>
            <h4 style="margin-top: 20px;margin-bottom: 20px;">方法详情</h4>
            
                <div class="member">


    
    <h4 class="name" id="close">
        <a class="href-link" href="#close">#</a>
        
        <span class="code-name" id="close" style="font-size:30px">
            
                close<span class="signature">()</span>
            
        </span>
    </h4>
    

    
    <div class="description">
        <p>关闭popup弹窗</p>
    </div>
    













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>























</div>
            
                <div class="member">


    
    <h4 class="name" id="open">
        <a class="href-link" href="#open">#</a>
        
        <span class="code-name" id="open" 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">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>























</div>
            
                <div class="member">


    
    <h4 class="name" id="openPopup">
        <a class="href-link" href="#openPopup">#</a>
        
        <span class="code-name" id="openPopup" 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">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>























</div>
            
            </div>
        </div>
    

    

    
</article>

</section>