@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> document/theme/RankSymbolThemeLayer.js</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引擎)，对地图引擎进行管理，如果要对地图图层进行管理请参考[Map]{@link Map}，<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">document/theme/RankSymbolThemeLayer.js</span> </header> <section> <article> <pre class="prettyprint source linenums"><code>import { Zondy, Extent } from '@mapgis/webclient-common' import * as L from '@mapgis/leaflet' // eslint-disable-next-line import/no-extraneous-dependencies import { FeatureTheme } from '@mapgis/webclient-graphic-render' import GraphThemeLayer from './GraphThemeLayer' /** * @class Zondy.ThemeLayer.rankSymbolThemeLayer * @classdesc 符号专题图图层。 * @description 符号专题图通过为每个要素绘制符号大小来反映其对应的专题值的大小；它只能表示单个个字段属性信息。 * 符号专题图多用于具有相关数量特征的地图上，比如表示不同地区粮食产量、GDP、人口等。 * 即通过制作一个符号专题图，就可以清晰展示各个区域相关Value的分布差异等。 * 目前提供的符号图形有：圆形（后续进行扩展心形五角星多角心图片等） * @extends Zondy.ThemeLayer.GraphThemeLayer * @param {string} name - 专题图层名。 * @param {Zondy.ChartType} symbolType - 符号类型。目前支持："Circle"。 * @param {Object} options - 参数。 * @param {boolean} [options.isOverLay=true] - 是否进行压盖处理，如果设为 true，图表绘制过程中将隐藏对已在图层中绘制的图表产生压盖的图表。 * @param {string} options.themeFields - 指定创建专题图字段。 * @param {string} [options.id] - 专题图层 ID。默认使用 CommonUtil.createUniqueID("themeLayer_") 创建专题图层 ID。 * @param {number} [options.opacity=1] - 图层透明度。 */ const RankSymbolThemeLayer = GraphThemeLayer.extend({ /** * @member {Object} Zondy.ThemeLayer.rankSymbolThemeLayer.prototype.symbolSetting * @description 符号 Circle 配置对象。 * @property {Array} codomain - 值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。 * @property {number} [maxR] - 圆形的最大半径。 * @property {number} [minR] - 圆形的最小半径。 * @property {string} [fillColor] - 圆形的填充色，如：fillColor: "#FFB980"。 * @property {Object} [circleStyle] - 圆形的基础 style，此参数控制圆形基础样式，优先级低于 circleStyleByFields 和 circleStyleByCodomain。 * @property {number} [decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。 * @property {Object} [circleHoverStyle] - 圆形 hover 状态时的样式，circleHoverAble 为 true 时有效。 * @property {boolean} [circleHoverAble=true] - 是否允许圆形使用 hover 状态。同时设置 circleHoverAble 和 circleClickAble 为 false，可以直接屏蔽图形对专题图层事件的响应。 * @property {boolean} [circleClickAble=true] - 是否允许圆形被点击。同时设置 circleHoverAble 和 circleClickAble 为 false，可以直接屏蔽图形对专题图层事件的响应。 */ initialize(name, symbolType, options) { // eslint-disable-line no-unused-vars GraphThemeLayer.prototype.initialize.apply(this, arguments) this.symbolType = symbolType this.symbolSetting = {} }, /** * @function Zondy.ThemeLayer.rankSymbolThemeLayer.prototype.setSymbolType * @description 设置符号类型，此函数可动态改变图表类型。在调用此函数前请通过 symbolSetting 为新类型的图表做相关配置。 * @param symbolType - {Zondy.ChartType} 目前支持："Circle"。 */ setSymbolType(symbolType) { this.symbolType = symbolType this.redraw() }, /** * @function Zondy.ThemeLayer.rankSymbolThemeLayer.prototype.createThematicFeature * @description 创建专题要素（图形） * @param feature - {Zondy.Feature.Vector} 要创建的专题图形要素 * @return {Zondy.Theme} 专题图形 */ createThematicFeature(feature) { const me = this let thematicFeature // 检查图形创建条件并创建图形 if (FeatureTheme[me.symbolType] && me.themeField && me.symbolSetting) { thematicFeature = new FeatureTheme[me.symbolType]( feature, me, [me.themeField], me.symbolSetting, null, me.options ) } // thematicFeature 是否创建成功 if (!thematicFeature) { return false } // 对专题要素执行图形装载 thematicFeature.assembleShapes() return thematicFeature }, _addNoOverlayShape() { const me = this // 压盖判断所需 chartsBounds 集合 let mapBounds = me._map.getBounds() const crs = this._map.options.crs mapBounds = L.bounds( crs.project(mapBounds.getSouthWest()), crs.project(mapBounds.getNorthEast()) ) const mapPxLT = me.getLocalXY(mapBounds.min) const mapPxRB = me.getLocalXY(mapBounds.max) const mBounds = new Extent({ xmin: Math.min(parseFloat(mapPxLT[0]), parseFloat(mapPxRB[0])), xmax: Math.max(parseFloat(mapPxLT[0]), parseFloat(mapPxRB[0])), ymin: Math.min(parseFloat(mapPxLT[1]), parseFloat(mapPxRB[1])), ymax: Math.max(parseFloat(mapPxLT[1]), parseFloat(mapPxRB[1])) }) const charts = me.charts const chartsBounds = [] // 压盖处理 & 添加图形 for (let i = 0, len = charts.length; i < len; i++) { const chart = charts[i] // 图形参考位置 (reSetLocation 会更新 chartBounds) const shapeROP = chart.resetLocation() // 图表框 const cbs = chart.chartBounds // 地图范围外不绘制 if (mBounds && !me.isChartInMap(mBounds, cbs)) { continue } // 图形太大不绘制 const zoomLevel = me._map.getZoom() const zoomD = zoomLevel - me.options.fitZoom if ( mBounds && me.options.fitZoom > -1 && Math.abs(zoomLevel - me.options.fitZoom) > 1 ) { continue } // 是否压盖 let isOverlay = false for (let j = 0; j < chartsBounds.length; j++) { // 压盖判断 if (me.isQuadrilateralOverLap(cbs, chartsBounds[j])) { isOverlay = true break } } if (isOverlay) { continue } else { chartsBounds.push(cbs) } // 添加图形 const shapes = chart.shapes for (let j = 0, slen = shapes.length; j < slen; j++) { shapes[j].refOriginalPosition = shapeROP me.renderer.addShape(shapes[j]) } } } }) Zondy.ThemeLayer.RankSymbolThemeLayer = RankSymbolThemeLayer export default RankSymbolThemeLayer </code></pre> </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>