UNPKG

@mapgis/webclient-common

Version:

mapgis ES6 format for igserver

2,213 lines (838 loc) 36.3 kB
<header id="page-title" class="page-title"> <span class="page-title-main">类名</span> <span class="page-title-sub">ClusterRenderer</span> </header> <section> <article> <div class="container-overview"> <div class='vertical-section'> <div class="members"> <div class="member"> <h4 class="name" id="ClusterRenderer"> <a class="href-link" href="#ClusterRenderer">#</a> <span class="code-name" id="ClusterRenderer" style="font-size:30px"> new ClusterRenderer<span class="signature">(options)</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 style="min-width: 100px;">默认值</th> <th class="last">描述</th> </tr> </thead> <tbody> <tr class="deep-level-0"> <td class="name" id="options"><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" id="radius"><code>radius</code></td> <td class="type"> <span class="param-type">Number</span> </td> <td class="default"> 80 </td> <td class="description last"><p>聚合半径,单位像素</p></td> </tr> <tr class="deep-level-1"> <td class="name" id="clusterBoundSymbol"><code>clusterBoundSymbol</code></td> <td class="type"> <span class="param-type"><a link="SimpleFillSymbol.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="SimpleFillSymbol" SimpleFillSymbol.html>SimpleFillSymbol</a></span> </td> <td class="default"> </td> <td class="description last"><p>聚合边界,显示聚合区域的范围,仅支持部分样式</p></td> </tr> <tr class="deep-level-1"> <td class="name" id="clusterInfos"><code>clusterInfos</code></td> <td class="type"> <span class="param-type">Array.&lt;<a link="Array.<ClusterInfo>.html" onclick="getTypeHTML(event)" href="ClusterInfo.html">ClusterInfo</a>></span> </td> <td class="default"> </td> <td class="description last"><p>聚合信息,描述聚合点数量区间内显示的符号信息。</p></td> </tr> <tr class="deep-level-1"> <td class="name" id="defaultSymbol"><code>defaultSymbol</code></td> <td class="type"> <span class="param-type"><a link="Symbol.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="Symbol" Symbol.html>Symbol</a></span> </td> <td class="default"> </td> <td class="description last"><p>默认的聚合点符号,目前仅支持SimpleMarkerSymbol|PcitureMarkerSymbol部分样式,不支持线图层</p></td> </tr> <tr class="deep-level-1"> <td class="name" id="maxScale"><code>maxScale</code></td> <td class="type"> <span class="param-type">Number</span> </td> <td class="default"> 20 </td> <td class="description last"><p>最大聚类比例尺,单位为m,超过这个比例尺范围不进行聚类</p></td> </tr> <tr class="deep-level-1"> <td class="name" id="isExpandOnClick"><code>isExpandOnClick</code></td> <td class="type"> <span class="param-type">Boolean</span> </td> <td class="default"> true </td> <td class="description last"><p>点击聚类点是否展开</p></td> </tr> <tr class="deep-level-1"> <td class="name" id="isHoverShowBound"><code>isHoverShowBound</code></td> <td class="type"> <span class="param-type">Boolean</span> </td> <td class="default"> false </td> <td class="description last"><p>鼠标悬停显示聚类边界</p></td> </tr> <tr class="deep-level-1"> <td class="name" id="defaultLabelSymbol"><code>defaultLabelSymbol</code></td> <td class="type"> <span class="param-type"><a link="TextSymbol.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="TextSymbol" TextSymbol.html>TextSymbol</a></span> </td> <td class="default"> </td> <td class="description last"><p>默认的文字符号</p></td> </tr> <tr class="deep-level-1"> <td class="name" id="defaultLabelExpressionInfo"><code>defaultLabelExpressionInfo</code></td> <td class="type"> <span class="param-type">Object</span> | <span class="param-type">null</span> </td> <td class="default"> </td> <td class="description last"><p>默认的文字表达式。以$cluster_count表示聚类点数量,例如 { expression: &quot;$cluster_count + '个'&quot;}。</p></td> </tr> </tbody> </table> </div> <dl class="details"> </dl> <p class="summary"><h5>支持如下方法:</h5> <a href='#fromJSON'>[1、通过json构造ClusterRenderer对象]</a><br/> <a href='#toJSON'>[2、导出json对象]</a><br/> <a href='#clone'>[3、克隆ClusterRenderer对象]</a></p> <h5>示例</h5> <p class="code-caption"><h7 id='new-PictureMarkerSymbol'>创建聚类渲染器对象</h7></p> <pre class="prettyprint"><code>// ES5引入方式 const { ClusterRenderer } = Zondy.Renderer const { TextSymbol, SimpleMarkerSymbol } = Zondy.Symbol // ES6引入方式 import { ClusterRenderer, TextSymbol, SimpleMarkerSymbol } from "@mapgis/webclient-common" // 初始化聚类渲染器对象 const clusterRenderer = new ClusterRenderer({ // 聚类参数 clusterInfos:[ // 聚类分段1 { // 最小聚类数量 minValue: 0, // 最大聚类数量 maxValue: 2, // 聚类文字样式 labelSymbol: new TextSymbol({ // 文字颜色 color:'#ffffff', // 文字大小 font:{ size:20 }, }), // 聚类符号样式 symbol: new SimpleMarkerSymbol({ // 符号颜色 color: 'rgba(112, 0, 255, 0.6)', // 符号大小 size: 20, // 符号外边线样式 outline: { // 外边线颜色 color: 'rgba(122, 211, 22, 0.6)', // 外边线宽度 width: 4 } }) }, // 聚类分段2 { // 最小聚类数量 minValue: 2, // 最大聚类数量 maxValue: 6, // 聚类文字样式 labelSymbol:new TextSymbol({ // 文字颜色 color: '#000000', // 文字大小 font: { size: 12 }, }), // 聚类符号样式 symbol: new SimpleMarkerSymbol({ // 符号颜色 color: 'rgba(240, 194, 12, 0.6)', // 符号大小 size: 30, // 符号外边线样式 outline: { // 外边线颜色 color: 'rgba(241, 211, 87, 0.6)', // 外边线宽度 width: 5 } }) }, // 聚类分段3 { // 最小聚类数量 minValue: 6, // 最大聚类数量 maxValue: 10, // 聚类文字样式 labelSymbol: new TextSymbol({ // 文字颜色 color: '#000000', // 文字大小 font: { size: 12 }, }), // 聚类符号样式 symbol: new SimpleMarkerSymbol({ // 符号颜色 color: 'rgba(255, 0, 0, 0.6)', // 符号大小 size: 30, // 符号外边线样式 outline: { // 外边线颜色 color: 'rgba(111, 111, 111, 0.6)', // 外边线宽度 width: 5 } }) } ] })</code></pre> <p class="code-caption"><h7 id=''>二维Leaflet上聚类专题图使用介绍</h7></p> <pre class="prettyprint"><code>二维Leaflet上聚类的实现依赖于Leaflet.markercluster插件 链接地址:https://github.com/Leaflet/Leaflet.markercluster const layer = new IGSFeatureLayer({ url: "http://webclient.smaryun.com:8089/igs/rest/services/Map/%E6%B9%96%E5%8C%97%E7%9C%814326/FeatureServer/1-0", renderer: new ClusterRenderer({ // 聚类参数 clusterInfos: [ // 聚类分段2 { // 最小聚类数量 minValue: 1, // 最大聚类数量 maxValue: 6, // 聚类文字样式 labelSymbol: new TextSymbol({ // 文字颜色 color: "#000000", // 文字大小 font: { size: 12, }, }), // 聚类符号样式 symbol: new SimpleMarkerSymbol({ // 符号颜色 color: "rgba(240, 194, 12, 0.6)", // 符号大小 size: 30, // 符号外边线样式 outline: { // 外边线颜色 color: "rgba(241, 211, 87, 0.6)", // 外边线宽度 width: 5, }, }), }, // 聚类分段3 { // 最小聚类数量 minValue: 6, // 最大聚类数量 maxValue: 300, // 聚类文字样式 labelExpressionInfo: { expression: "$cluster_count + '个'", }, labelSymbol: new TextSymbol({ // 文字颜色 color: "#000000", // 文字大小 font: { size: 12, }, }), // 聚类符号样式 symbol: new SimpleMarkerSymbol({ // 符号颜色 color: "rgba(255, 0, 0, 0.6)", // 符号大小 size: 30, // 符号外边线样式 outline: { // 外边线颜色 color: "rgba(111, 111, 111, 0.6)", // 外边线宽度 width: 5, }, }), }, ], isExpandOnClick: true, isHoverShowBound: true, defaultLabelSymbol: new TextSymbol({ // 文字颜色 color: "#ff0000", // 文字大小 font: { size: 20, family: "SimHei", }, haloColor: "#ffffff", haloSize: 3, }), defaultLabelExpressionInfo: { expression: "$cluster_count + '个'"}, }) }) map.add(layer) layer.on("layerview-created", (result) => { console.log("加载完毕:", result.layer); //视点跳转 view.flyTo({ extent: result.layer.extent, }); const layer = result.layer; const layerView = result.layerView; // 获取innerLayer,这个innerLayer就是Leaflet.markercluster插件中的L.markerClusterGroup图层,相关api可以参考上述链接 const innerLayer = layerView.innerLayer; });</code></pre> </div> </div> </div> </div> <h3 class="subsection-title">继承关系</h3> <ul> <li><a link="BaseRenderer.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="BaseRenderer" BaseRenderer.html>BaseRenderer</a></li> </ul> <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="#clusterBoundSymbol">clusterBoundSymbol</a></code></td> <td class="name"> <code> <span class="param-type"><a link="SimpleFillSymbol.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="SimpleFillSymbol" SimpleFillSymbol.html>SimpleFillSymbol</a></span> </code> </td> <td class="name"><code><p>聚合边界,显示聚合区域的范围</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#clusterInfos">clusterInfos</a></code></td> <td class="name"> <code> <span class="param-type">Array.&lt;<a link="Array.<ClusterInfo>.html" onclick="getTypeHTML(event)" href="ClusterInfo.html">ClusterInfo</a>></span> </code> </td> <td class="name"><code><p>聚合信息,描述聚合点数量区间内显示的符号信息。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#defaultLabelExpressionInfo">defaultLabelExpressionInfo</a></code></td> <td class="name"> <code> <span class="param-type">Object</span> | <span class="param-type">null</span> </code> </td> <td class="name"><code><p>默认的文字表达式</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#defaultLabelSymbol">defaultLabelSymbol</a></code></td> <td class="name"> <code> <span class="param-type"><a link="TextSymbol.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="TextSymbol" TextSymbol.html>TextSymbol</a></span> </code> </td> <td class="name"><code><p>默认的文字符号</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#defaultSymbol">defaultSymbol</a></code></td> <td class="name"> <code> <span class="param-type"><a link="Symbol.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="Symbol" Symbol.html>Symbol</a></span> </code> </td> <td class="name"><code><p>默认的聚合点符号,目前仅支持SimpleMarkerSymbol|PcitureMarkerSymbol部分样式</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#isExpandOnClick">isExpandOnClick</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="#isHoverShowBound">isHoverShowBound</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="#maxScale">maxScale</a></code></td> <td class="name"> <code> <span class="param-type">Number</span> </code> </td> <td class="name"><code><p>最大聚类比例尺,单位为m,超过这个比例尺范围不进行聚类</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#radius">radius</a></code></td> <td class="name"> <code> <span class="param-type">Number</span> </code> </td> <td class="name"><code><p>聚合半径,目前仅支持像素。</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#type">type</a></code></td> <td class="name"> <code> <span class="param-type">String</span> </code> </td> <td class="name"><code><p>类型,默认为'cluster'</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"><a link="SimpleFillSymbol.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="SimpleFillSymbol" SimpleFillSymbol.html>SimpleFillSymbol</a></span> </span> <h4 class="name" id="clusterBoundSymbol"> <a class="href-link" href="#clusterBoundSymbol">#</a> <span class="code-name"> clusterBoundSymbol </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.&lt;<a link="Array.<ClusterInfo>.html" onclick="getTypeHTML(event)" href="ClusterInfo.html">ClusterInfo</a>></span> </span> <h4 class="name" id="clusterInfos"> <a class="href-link" href="#clusterInfos">#</a> <span class="code-name"> clusterInfos </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">Object</span> | <span class="param-type">null</span> </span> <h4 class="name" id="defaultLabelExpressionInfo"> <a class="href-link" href="#defaultLabelExpressionInfo">#</a> <span class="code-name"> defaultLabelExpressionInfo </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"><a link="TextSymbol.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="TextSymbol" TextSymbol.html>TextSymbol</a></span> </span> <h4 class="name" id="defaultLabelSymbol"> <a class="href-link" href="#defaultLabelSymbol">#</a> <span class="code-name"> defaultLabelSymbol </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"><a link="Symbol.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="Symbol" Symbol.html>Symbol</a></span> </span> <h4 class="name" id="defaultSymbol"> <a class="href-link" href="#defaultSymbol">#</a> <span class="code-name"> defaultSymbol </span> </h4> <div class="description"> <p>默认的聚合点符号,目前仅支持SimpleMarkerSymbol|PcitureMarkerSymbol部分样式</p> </div> <dl class="details"> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">Boolean</span> </span> <h4 class="name" id="isExpandOnClick"> <a class="href-link" href="#isExpandOnClick">#</a> <span class="code-name"> isExpandOnClick </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">Boolean</span> </span> <h4 class="name" id="isHoverShowBound"> <a class="href-link" href="#isHoverShowBound">#</a> <span class="code-name"> isHoverShowBound </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">Number</span> </span> <h4 class="name" id="maxScale"> <a class="href-link" href="#maxScale">#</a> <span class="code-name"> maxScale </span> </h4> <div class="description"> <p>最大聚类比例尺,单位为m,超过这个比例尺范围不进行聚类</p> </div> <dl class="details"> </dl> </div> <div class="member"> <span class="method-parameter is-pulled-right"> <label>类型:</label> <span class="param-type">Number</span> </span> <h4 class="name" id="radius"> <a class="href-link" href="#radius">#</a> <span class="code-name"> radius </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="type"> <a class="href-link" href="#type">#</a> <span class='tag'>readonly</span> <span class="code-name"> type </span> </h4> <div class="description"> <p>类型,默认为'cluster'</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="#fromJSON">fromJSON</a></code></td> <td class="name"> <code> <span class="param-type"><a link="ClusterRenderer.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="ClusterRenderer" ClusterRenderer.html>ClusterRenderer</a></span> </code> </td> <td class="name"><code><a id='fromJSON'/> 通过json构造ClusterRenderer对象</code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#clone">clone</a></code></td> <td class="name"> <code> <span class="param-type"><a link="ClusterRenderer.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="ClusterRenderer" ClusterRenderer.html>ClusterRenderer</a></span> </code> </td> <td class="name"><code><a id='clone'/> 克隆ClusterRenderer对象</code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#fromJSON">fromJSON</a></code></td> <td class="name"> <code> </code> </td> <td class="name"><code><p>将JSON格式的渲染规则转换为JS对象</p></code></td> </tr> <tr class="deep-level-0"> <td class="name"><code><a href="#toJSON">toJSON</a></code></td> <td class="name"> <code> <span class="param-type">Object</span> </code> </td> <td class="name"><code><a id='toJSON'/> 导出json对象</code></td> </tr> </tbody> </table> </div> <h4 style="margin-top: 20px;margin-bottom: 20px;">方法详情</h4> <div class="member"> <h4 class="name" id=".fromJSON"> <a class="href-link" href="#.fromJSON">#</a> <span class='tag'>static</span> <span class="code-name" id="fromJSON" style="font-size:30px"> fromJSON<span class="signature">(json)</span> </span> </h4> <div class="description"> <a id='fromJSON'/> 通过json构造ClusterRenderer对象 </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" id="json"><code>json</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>json对象</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>ClusterRenderer实例</p></div> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type"><a link="ClusterRenderer.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="ClusterRenderer" ClusterRenderer.html>ClusterRenderer</a></span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="clone"> <a class="href-link" href="#clone">#</a> <span class="code-name" id="clone" style="font-size:30px"> clone<span class="signature">()</span> </span> </h4> <div class="description"> <a id='clone'/> 克隆ClusterRenderer对象 </div> <dl class="details"> <dt class="tag-overrides">Overrides:</dt> <dd class="tag-overrides"><ul class="dummy"><li> <a class="mapgis-link-name" title="BaseRenderer#clone" BaseRenderer.html#clone>BaseRenderer#clone</a> </li></ul></dd> </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>克隆后的ClusterRenderer实例</p></div> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type"><a link="ClusterRenderer.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="ClusterRenderer" ClusterRenderer.html>ClusterRenderer</a></span> </div> </div> </div> </div> </div> <div class="member"> <h4 class="name" id="fromJSON"> <a class="href-link" href="#fromJSON">#</a> <span class="code-name" id="fromJSON" style="font-size:30px"> fromJSON<span class="signature">(json)</span> </span> </h4> <div class="description"> <p>将JSON格式的渲染规则转换为JS对象</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" id="json"><code>json</code></td> <td class="type"> <span class="param-type">Object</span> </td> <td class="description last"><p>渲染规则的实例化JSON</p></td> </tr> </tbody> </table> </div> <dl class="details"> <dt class="inherited-from">Inherited From:</dt> <dd class="inherited-from"><ul class="dummy"><li> <a goto="fromJSON" link="BaseRenderer.html" onclick="getTypeHTML(event)" class="mapgis-link-name" title="BaseRenderer#fromJSON" BaseRenderer.html#fromJSON>BaseRenderer#fromJSON</a> </li></ul></dd> </dl> </div> <div class="member"> <h4 class="name" id="toJSON"> <a class="href-link" href="#toJSON">#</a> <span class="code-name" id="toJSON" style="font-size:30px"> toJSON<span class="signature">()</span> </span> </h4> <div class="description"> <a id='toJSON'/> 导出json对象 </div> <dl class="details"> <dt class="tag-overrides">Overrides:</dt> <dd class="tag-overrides"><ul class="dummy"><li> <a class="mapgis-link-name" title="BaseRenderer#toJSON" BaseRenderer.html#toJSON>BaseRenderer#toJSON</a> </li></ul></dd> </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>json对象</p></div> <div class='column is-5 has-text-left'> <label>类型: </label> <span class="param-type">Object</span> </div> </div> </div> </div> </div> </div> </div> </article> </section>