UNPKG

@mapgis/webclient-leaflet-plugin

Version:

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

3,479 lines (1,011 loc) 42.1 kB
<header id="page-title" class="page-title"> <span class="page-title-main">类名</span> <span class="page-title-sub">ThemeLayer</span> </header> <section> <article> <div class="container-overview"> <div class='vertical-section'> <div class="members"> <div class="member"> <h4 class="name" id="ThemeLayer"> <a class="href-link" href="#ThemeLayer">#</a> <span class="code-name" id="ThemeLayer" style="font-size:30px"> new ThemeLayer<span class="signature">(name, options)</span> </span> </h4> <h4>参数</h4> <div class="table-container"> <table class="params table"> <thead> <tr> <th>名称</th> <th>类型</th> <th style="min-width: 100px;">默认值</th> <th class="last">描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code>name</code></td> <td class="type"> <span class="param-type"> string </span> </td> <td class="default"> </td> <td class="description last"><p>专题图图层名称。</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>options</code></td> <td class="type"> <span class="param-type"> Object </span> </td> <td class="default"> </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="default"> </td> <td class="description last"><p>专题图层 ID。默认使用 CommonUtil.createUniqueID(&quot;themeLayer_&quot;) 创建专题图层 ID。</p></td> </tr> <tr class="deep-level-1"> <td class="name"><code>opacity</code></td> <td class="type"> <span class="param-type"> number </span> </td> <td class="default"> 1 </td> <td class="description last"><p>图层透明度。</p></td> </tr> </tbody> </table> </div> <dl class="details"> </dl> <div class="method-parameter columns"> <div class="column is-2"><label>绑定事件</label></div> <div class="column is-10"> <ul> <li><a href="#featuresremoved">featuresremoved</a></li> </ul> </div> </div> </div> </div> </div> </div> <h3 class="subsection-title">继承关系</h3> <ul> <li>L.Layer</li> </ul> <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="#addFeatures">addFeatures</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>向专题图图层中添加数据。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#destroyFeatures">destroyFeatures</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>销毁要素。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getEvents">getEvents</a></code></td> <td class="name"> <code> <span class="param-type"> Object </span> </code> </td> <td class="name"><code><p>获取图层事件。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getFeatureBy">getFeatureBy</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>在专题图的要素数组 features 里面遍历每一个 feature,当 feature[property] === value 时,返回此 feature(并且只返回第一个)。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getFeatureById">getFeatureById</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>通过给定一个 ID,返回对应的矢量要素,如果不存在则返回 null。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getFeatures">getFeatures</a></code></td> <td class="name"> <code> <span class="param-type"> Array </span> </code> </td> <td class="name"><code><p>查看当前图层中的有效数据。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getFeaturesByAttribute">getFeaturesByAttribute</a></code></td> <td class="name"> <code> <span class="param-type"> Array </span> </code> </td> <td class="name"><code><p>通过给定一个属性的 key 值和 value 值,返回所有匹配的要素数组。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#getLocalXY">getLocalXY</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>地理坐标转为像素坐标。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#off">off</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>移除专题要素事件监听。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#on">on</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>添加专题要素事件监听。添加专题要素事件监听。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#onRemove">onRemove</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>删除某个地图。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#redraw">redraw</a></code></td> <td class="name"> <code> <span class="param-type"> boolean </span> </code> </td> <td class="name"><code><p>重绘该图层。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#redrawThematicFeatures">redrawThematicFeatures</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>抽象方法,可实例化子类必须实现此方法。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#removeAllFeatures">removeAllFeatures</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>清除当前图层所有的矢量要素。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#removeFeatures">removeFeatures</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>从专题图中删除 feature。这个函数删除所有传递进来的矢量要素。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#setOpacity">setOpacity</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>设置图层的不透明度,取值 [0-1] 之间。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#update">update</a></code></td> <td class="name"> <code> </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="member"> <h4 class="name" id="addFeatures"> <a class="href-link" href="#addFeatures">#</a> <span class="code-name" id="addFeatures" style="font-size:30px"> addFeatures<span class="signature">(features)</span> </span> </h4> <div class="description"> <p>向专题图图层中添加数据。</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>features</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="destroyFeatures"> <a class="href-link" href="#destroyFeatures">#</a> <span class="code-name" id="destroyFeatures" style="font-size:30px"> destroyFeatures<span class="signature">(features)</span> </span> </h4> <div class="description"> <p>销毁要素。</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>features</code></td> <td class="type"> <span class="param-type"> Array.&lt;zondy.Feature.Vector> </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="getEvents"> <a class="href-link" href="#getEvents">#</a> <span class="code-name" id="getEvents" style="font-size:30px"> getEvents<span class="signature">()</span> </span> </h4> <div class="description"> <p>获取图层事件。</p> </div> <dl class="details"> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值</label></div> <div class="column is-10"> <div class="columns"> <div class='param-desc column is-7'><p>返回图层支持的事件。</p></div> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type"> Object </span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="getFeatureBy"> <a class="href-link" href="#getFeatureBy">#</a> <span class="code-name" id="getFeatureBy" style="font-size:30px"> getFeatureBy<span class="signature">(property, value)</span> </span> </h4> <div class="description"> <p>在专题图的要素数组 features 里面遍历每一个 feature,当 feature[property] === value 时,返回此 feature(并且只返回第一个)。</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>property</code></td> <td class="type"> <span class="param-type"> string </span> </td> <td class="description last"><p>要的某个属性名。</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>value</code></td> <td class="type"> <span class="param-type"> string </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="getFeatureById"> <a class="href-link" href="#getFeatureById">#</a> <span class="code-name" id="getFeatureById" style="font-size:30px"> getFeatureById<span class="signature">(featureId)</span> </span> </h4> <div class="description"> <p>通过给定一个 ID,返回对应的矢量要素,如果不存在则返回 null。</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>featureId</code></td> <td class="type"> <span class="param-type"> number </span> </td> <td class="description last"><p>要素 ID。</p></td> </tr> </tbody> </table> </div> <dl class="details"> </dl> </div> <div class="member"> <h4 class="name" id="getFeatures"> <a class="href-link" href="#getFeatures">#</a> <span class="code-name" id="getFeatures" style="font-size:30px"> getFeatures<span class="signature">()</span> </span> </h4> <div class="description"> <p>查看当前图层中的有效数据。</p> </div> <dl class="details"> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值</label></div> <div class="column is-10"> <div class="columns"> <div class='param-desc column is-7'><p>返回图层中的有效数据。</p></div> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type"> Array </span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="getFeaturesByAttribute"> <a class="href-link" href="#getFeaturesByAttribute">#</a> <span class="code-name" id="getFeaturesByAttribute" style="font-size:30px"> getFeaturesByAttribute<span class="signature">(attrName, attrValue)</span> </span> </h4> <div class="description"> <p>通过给定一个属性的 key 值和 value 值,返回所有匹配的要素数组。</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>attrName</code></td> <td class="type"> <span class="param-type"> string </span> </td> <td class="description last"><p>key 值。</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>attrValue</code></td> <td class="type"> <span class="param-type"> string </span> </td> <td class="description last"><p>value 值。</p></td> </tr> </tbody> </table> </div> <dl class="details"> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值</label></div> <div class="column is-10"> <div class="columns"> <div class='param-desc column is-7'><p>返回所有匹配的要素数组。</p></div> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type"> Array </span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="getLocalXY"> <a class="href-link" href="#getLocalXY">#</a> <span class="code-name" id="getLocalXY" style="font-size:30px"> getLocalXY<span class="signature">(coordinate)</span> </span> </h4> <div class="description"> <p>地理坐标转为像素坐标。</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>coordinate</code></td> <td class="type"> <span class="param-type"> Array </span> </td> <td class="description last"></td> </tr> </tbody> </table> </div> <dl class="details"> </dl> </div> <div class="member"> <h4 class="name" id="off"> <a class="href-link" href="#off">#</a> <span class="code-name" id="off" style="font-size:30px"> off<span class="signature">(event, callback, context)</span> </span> </h4> <div class="description"> <p>移除专题要素事件监听。</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>event</code></td> <td class="type"> <span class="param-type"> Event </span> </td> <td class="description last"><p>监听事件。</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>callback</code></td> <td class="type"> <span class="param-type"> function </span> </td> <td class="description last"><p>回调函数。</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>context</code></td> <td class="type"> <span class="param-type"> string </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="on"> <a class="href-link" href="#on">#</a> <span class="code-name" id="on" style="font-size:30px"> on<span class="signature">(event, callback, context)</span> </span> </h4> <div class="description"> <p>添加专题要素事件监听。添加专题要素事件监听。</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>event</code></td> <td class="type"> <span class="param-type"> Event </span> </td> <td class="description last"><p>监听事件。</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>callback</code></td> <td class="type"> <span class="param-type"> function </span> </td> <td class="description last"><p>回调函数。</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>context</code></td> <td class="type"> <span class="param-type"> string </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="onRemove"> <a class="href-link" href="#onRemove">#</a> <span class="code-name" id="onRemove" style="font-size:30px"> onRemove<span class="signature">(map)</span> </span> </h4> <div class="description"> <p>删除某个地图。</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>map</code></td> <td class="type"> <span class="param-type"> L.Map </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="redraw"> <a class="href-link" href="#redraw">#</a> <span class="code-name" id="redraw" style="font-size:30px"> redraw<span class="signature">()</span> </span> </h4> <div class="description"> <p>重绘该图层。</p> </div> <dl class="details"> </dl> <div class='columns method-parameter'> <div class="column is-2"><label>返回值</label></div> <div class="column is-10"> <div class="columns"> <div class='param-desc column is-7'><p>返回是否重绘成功。</p></div> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type"> boolean </span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="redrawThematicFeatures"> <a class="href-link" href="#redrawThematicFeatures">#</a> <span class="code-name" id="redrawThematicFeatures" style="font-size:30px"> redrawThematicFeatures<span class="signature">(bounds)</span> </span> </h4> <div class="description"> <p>抽象方法,可实例化子类必须实现此方法。</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>bounds</code></td> <td class="type"> <span class="param-type"> L.bounds </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="removeAllFeatures"> <a class="href-link" href="#removeAllFeatures">#</a> <span class="code-name" id="removeAllFeatures" style="font-size:30px"> removeAllFeatures<span class="signature">()</span> </span> </h4> <div class="description"> <p>清除当前图层所有的矢量要素。</p> </div> <dl class="details"> </dl> </div> <div class="member"> <h4 class="name" id="removeFeatures"> <a class="href-link" href="#removeFeatures">#</a> <span class="code-name" id="removeFeatures" style="font-size:30px"> removeFeatures<span class="signature">(features)</span> </span> </h4> <div class="description"> <p>从专题图中删除 feature。这个函数删除所有传递进来的矢量要素。</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>features</code></td> <td class="type"> <span class="param-type"> Array.&lt;zondy.Feature.Vector> </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="setOpacity"> <a class="href-link" href="#setOpacity">#</a> <span class="code-name" id="setOpacity" style="font-size:30px"> setOpacity<span class="signature">(opacity)</span> </span> </h4> <div class="description"> <p>设置图层的不透明度,取值 [0-1] 之间。</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>opacity</code></td> <td class="type"> <span class="param-type"> number </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="update"> <a class="href-link" href="#update">#</a> <span class="code-name" id="update" style="font-size:30px"> update<span class="signature">(bounds)</span> </span> </h4> <div class="description"> <p>更新图层。</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>bounds</code></td> <td class="type"> <span class="param-type"> L.bounds </span> </td> <td class="description last"><p>图层范围。</p></td> </tr> </tbody> </table> </div> <dl class="details"> </dl> </div> </div> </div> <div class='vertical-section' style='margin-top: 10px'> <h3 id='event'>事件</h3> <h4 style="margin-top: 20px;margin-bottom: 20px;">事件概述</h4> <div class="table-container"> <table class="params table"> <thead> <tr> <th>名称</th> <th>描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code><a href="#changelayer">changelayer</a></code></td> <td class="name"><code>changelayer</code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#featuresremoved">featuresremoved</a></code></td> <td class="name"><code>featuresremoved</code></td> </tr> </tbody> </table> </div> <h4 style="margin-top: 20px;margin-bottom: 20px;">事件详情</h4> <div class="members"> <div class="member"> <h4 class="name" id="event:changelayer"> <a class="href-link" href="#event:changelayer">#</a> <span class="code-name" id="changelayer" style="font-size:30px"> changelayer </span> </h4> <div class="description"> <p>图层属性改变之后触发。</p> </div> <h5 class="subsection-title">属性:</h5> <div class="table-container"> <table class="props table"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code>layer</code></td> <td class="type"> <span class="param-type"> Object </span> </td> <td class="description last"><p>图层。</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>property</code></td> <td class="type"> <span class="param-type"> string </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="event:featuresremoved"> <a class="href-link" href="#event:featuresremoved">#</a> <span class="code-name" id="featuresremoved" style="font-size:30px"> featuresremoved </span> </h4> <div class="description"> <p>删除的要素成功之后触发。</p> </div> <h5 class="subsection-title">属性:</h5> <div class="table-container"> <table class="props table"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name"><code>features</code></td> <td class="type"> <span class="param-type"> Array.&lt;zondy.Feature.Vector> </span> </td> <td class="description last"><p>事件对象。</p></td> </tr> <tr class="deep-level-0"> <td class="name"><code>succeed</code></td> <td class="type"> <span class="param-type"> boolean </span> </td> <td class="description last"><p>要输是否删除成功,true 为删除成功,false 为删除失败。</p></td> </tr> </tbody> </table> </div> <dl class="details"> </dl> </div> </div> </div> </article> </section>