@mapgis/webclient-leaflet-plugin/documention/L.zondy.MapvBaseLayer.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">MapvBaseLayer</span>
    
</header>





<section>

<article>
    <div class="container-overview">
    
        
            <div class='vertical-section'>
                <div class="members">
                    <div class="member">
                        


    
    <h4 class="name" id="MapvBaseLayer">
        <a class="href-link" href="#MapvBaseLayer">#</a>
        
        <span class="code-name" id="MapvBaseLayer" style="font-size:30px">
            
                new MapvBaseLayer<span class="signature">(map, dataSet, options, leafletLayer)</span>
            
        </span>
    </h4>
    

    









    <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>map</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Object
    
</span>



  
  </td>

  

  <td class="description last"><p>传入的leaflet的地图对象</p></td>
</tr>



        

            
<tr class="deep-level-0">
  
      <td class="name"><code>dataSet</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             MapvDataSet
    
</span>



  
  </td>

  

  <td class="description last"><p>传入的mapv的属性。 <br></p></td>
</tr>



        

            
<tr class="deep-level-0">
  
      <td class="name"><code>options</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             MapvOption
    
</span>



  
  </td>

  

  <td class="description last"><p>可选参数。<br></p></td>
</tr>



        

            
<tr class="deep-level-0">
  
      <td class="name"><code>leafletLayer</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Object
    
</span>



  
  </td>

  

  <td class="description last"><p>传入的leaflet的实际渲染图层。<br></p></td>
</tr>



        
        </tbody>
    </table>
</div>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>























    <h5>示例</h5>
    
    
        <pre class="prettyprint"><code>options = {
    zIndex: 1, // 层级
    size: 5, // 大小值
    unit: 'px', // 'px': 以像素为单位绘制,默认值。'm': 以米制为单位绘制，会跟随地图比例放大缩小
    mixBlendMode: 'normal', // 不同图层之间的叠加模式，参考[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)
    fillStyle: 'rgba(200, 200, 50, 1)', // 填充颜色
    strokeStyle: 'rgba(0, 0, 255, 1)', // 描边颜色
    lineWidth: 4, // 描边宽度
    globalAlpha: 1, // 透明度
    globalCompositeOperation: 'lighter', // 颜色叠加方式
    coordType: 'bd09ll', // 可选百度墨卡托坐标类型bd09mc和百度经纬度坐标类型bd09ll(默认)
    shadowColor: 'rgba(255, 255, 255, 1)', // 投影颜色
    shadowBlur: 35,  // 投影模糊级数
    updateCallback: function (time) { // 重绘回调函数，如果是时间动画、返回当前帧的时间
    },
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    context: '2d', // 可选2d和webgl，webgl目前只支持画simple模式的点和线
    lineCap: 'butt',
    lineJoin: 'miter',
    miterLimit: 10,
    methods: { // 一些事件回调函数
        click: function (item) { // 点击事件，返回对应点击元素的对象值
            console.log(item);
        },
        mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值
            console.log(item);
        }
    },
    animation: {
        type: 'time', // 按时间展示动画
        stepsRange: { // 动画时间范围,time字段中值
            start: 0,
            end: 100
        },
        trails: 10, // 时间动画的拖尾大小
        duration: 5, // 单个动画的时间，单位秒
    }
}</code></pre>
    



                    </div>
                </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="#clickEvent">clickEvent</a></code></td>
                                <td class="name">
                                    <code>
                                        
                                    </code>
                                </td>
                                <td class="name"><code><p>百度mapv原本的事件只有clickEvent和mousemoveEvent</p></code></td>
                            </tr>
                        
                            <tr class="deep-level-0">
                                <td class="name"><code><a href="#initDevicePixelRatio">initDevicePixelRatio</a></code></td>
                                <td class="name">
                                    <code>
                                        
                                    </code>
                                </td>
                                <td class="name"><code><p>window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips,该函数主要应用与移动设备</p></code></td>
                            </tr>
                        
                            <tr class="deep-level-0">
                                <td class="name"><code><a href="#mousemoveEvent">mousemoveEvent</a></code></td>
                                <td class="name">
                                    <code>
                                        
                                    </code>
                                </td>
                                <td class="name"><code><p>百度mapv原本的事件只有clickEvent和mousemoveEvent</p></code></td>
                            </tr>
                        
                    </tbody>
                </table>
            </div>
            <h4 style="margin-top: 20px;margin-bottom: 20px;">方法详情</h4>
            
                <div class="member">


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

    
    <div class="description">
        <p>百度mapv原本的事件只有clickEvent和mousemoveEvent</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>e</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Object
    
</span>



  
  </td>

  

  <td class="description last"><p>点击事件对象 {latlng, layerPoint, containerPoint, originalEvent}</p></td>
</tr>



        
        </tbody>
    </table>
</div>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>























    <h5>示例</h5>
    
    
        <pre class="prettyprint"><code>//mapv.map.Layer.clickEvent
clickEvent(pixel, e) {
   var dataItem = this.isPointInPath(this.getContext(), pixel);
   if (dataItem) {
      this.options.methods.click(dataItem, e);
   } else {
      this.options.methods.click(null, e);
   }
 }</code></pre>
    


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


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

    
    <div class="description">
        <p>window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips,该函数主要应用与移动设备</p>
    </div>
    













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>























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


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

    
    <div class="description">
        <p>百度mapv原本的事件只有clickEvent和mousemoveEvent</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>e</code></td>
  

  <td class="type">
  
      
<span class="param-type">
    
             Object
    
</span>



  
  </td>

  

  <td class="description last"><p>点击事件对象 {latlng, layerPoint, containerPoint, originalEvent}</p></td>
</tr>



        
        </tbody>
    </table>
</div>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    
    

    

    

    
</dl>























    <h5>示例</h5>
    
    
        <pre class="prettyprint"><code>//mapv.map.Layer.mousemoveEvent
mousemoveEvent(pixel, e) {
  var dataItem = this.isPointInPath(this.getContext(), pixel);
  if (dataItem) {
      this.options.methods.mousemove(dataItem, e);
  } else {
      this.options.methods.mousemove(null, e);
  }
}</code></pre>
    


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

    

    
</article>

</section>