npm - @mapgis/webclient-mapboxgl-plugin - Versions diffs - 10.3.4 → 17.0.0 - Mend

@mapgis/webclient-mapboxgl-plugin 10.3.4 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/README.md +51 -124
package/dist/es5/webclient-common.min.js +90 -0
package/dist/es5/webclient-mapboxgl-plugin.min.js +1 -0
package/dist/webclient-mapboxgl-plugin-es6.min.js +1 -0
package/documention/EchartsLayer.html +379 -0
package/documention/MapViewMapboxgl.html +3587 -0
package/documention/Popup.html +1523 -0
package/documention/Screenshot.html +1089 -0
package/documention/SketchEditorMapboxgl.html +3383 -0
package/documention/document_ArcGISVectorTileLayerView.js.html +265 -0
package/documention/document_EchartsLayerView.js.html +246 -0
package/documention/document_GraphicsLayerView.js.html +314 -0
package/documention/document_IGSFeatureLayerView.js.html +218 -0
package/documention/document_IGSMapImageLayerView.js.html +240 -0
package/documention/document_IGSTileLayerView.js.html +236 -0
package/documention/document_IGSVectorTileLayerView.js.html +264 -0
package/documention/document_MapVLayerView.js.html +247 -0
package/documention/document_WMSLayerView.js.html +240 -0
package/documention/document_WMTSLayerView.js.html +234 -0
package/documention/document_WebTileLayerView.js.html +240 -0
package/documention/document_support_FeatureRenderView.js.html +682 -0
package/documention/document_support_MapboxglGraphicsLayer.js.html +1184 -0
package/documention/document_support_SourceMetaData.js.html +223 -0
package/documention/document_support_Utils.js.html +624 -0
package/documention/document_support_mapbox_mapboxCustomUtil.js.html +322 -0
package/documention/global.html +252 -0
package/documention/index.html +251 -0
package/documention/module-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%8F%AF%E8%A7%86%E5%8C%96.MapvLayer.html +445 -0
package/documention/scripts/app.min.js +1 -0
package/documention/scripts/linenumber.js +26 -0
package/documention/scripts/search.js +45 -0
package/documention/scripts/sideBar.js +11 -0
package/documention/sketchEditor_SketchEditorMapboxgl.js.html +875 -0
package/documention/styles/anchor.png +0 -0
package/documention/styles/app.min.css +1 -0
package/documention/styles/c.png +0 -0
package/documention/styles/iframe.css +29 -0
package/documention/styles/m.png +0 -0
package/documention/styles/prettify-jsdoc.css +111 -0
package/documention/styles/prettify-tomorrow.css +132 -0
package/documention/styles/reset.css +44 -0
package/documention/styles/up-arrow.png +0 -0
package/documention/tutorial-1./345/277/253/351/200/237/345/205/245/351/227/250.html +165 -0
package/documention/util_ConvertRendererToStyleLayerUtil.js.html +844 -0
package/documention/util_MapboxglFeatureRender.js.html +225 -0
package/documention/util_MapboxglPlugin.js.html +284 -0
package/documention/view_MapViewMapboxgl.js.html +1882 -0
package/documention/view_utils_ArcGISVectorTileLayerUtil.js.html +382 -0
package/documention/view_utils_EchartsLayerUtil.js.html +194 -0
package/documention/view_utils_IGSMapImageUtil.js.html +373 -0
package/documention/view_utils_IGSTileLayerUtil.js.html +285 -0
package/documention/view_utils_IGSVectorTileLayerUtil.js.html +379 -0
package/documention/view_utils_MapVLayerUtil.js.html +197 -0
package/documention/view_utils_Popup.js.html +525 -0
package/documention/view_utils_Screenshot.js.html +320 -0
package/documention/view_utils_WMSLayerUtil.js.html +337 -0
package/documention/view_utils_WMTSLayerUtil.js.html +331 -0
package/documention/view_utils_WebTileLayerUtil.js.html +284 -0
package/documention/view_utils_echarts_EchartsLayerPlugin.js.html +419 -0
package/documention/view_utils_mapV_MapVLayerPlugin.js.html +527 -0
package/documention/view_utils_mapV_MapvBaseLayer.js.html +477 -0
package/documention/view_utils_support_rasterLayerUtil.js.html +244 -0
package/documention/view_utils_support_vectorLayerUtil.js.html +503 -0
package/package.json +20 -20
package/core/Base.js +0 -15
package/core/index.js +0 -5
package/index.js +0 -6
package/overlay/D3Layer.js +0 -108
package/overlay/EchartsLayer.js +0 -242
package/overlay/ElsCubeLayer.js +0 -125
package/overlay/MapvLayer.js +0 -296
package/overlay/StreamLayer.js +0 -83
package/overlay/TimeSpaceCubeLayer.js +0 -135
package/overlay/dthree/mapbox-d3.css +0 -9
package/overlay/echarts/MapCoordSys.js +0 -105
package/overlay/echarts/MapModel.js +0 -0
package/overlay/echarts/MapView.js +0 -0
package/overlay/echarts/index.js +0 -4
package/overlay/index.js +0 -31
package/overlay/mapv/MapvBaseLayer.js +0 -299
package/overlay/mapv/index.js +0 -5
package/overlay/stream/GeojsonStreamLayer.js +0 -135
package/overlay/stream/MapvStreamLayer.js +0 -79
package/overlay/stream/index.js +0 -3
package/overlay/stream/popup.css +0 -31
package/service/index.js +0 -1
package/service/socket/ISocketService.js +0 -121
package/service/socket/SocketEvent.js +0 -50
package/service/socket/SocketService.js +0 -90
package/util/Evented.js +0 -295
package/util/Util.js +0 -348

package/documention/document_support_Utils.js.html ADDED Viewed

@@ -0,0 +1,624 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Client for JavaScript document/support/Utils.js</title>
+  <!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+  <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="/static/modules/common/api/common-mapgis/index.html"
+                        >
+                            Common
+                        </a>
+                        <a
+                            class="link user-link "
+                            href="/static/modules/cesium/api/cesium-mapgis/index.html"
+                        >
+                            Cesium
+                        </a>
+                        <a
+                            class="link user-link "
+                            href="/static/modules/mapboxgl/api/mapboxgl-mapgis/index.html"
+                        >
+                            MapboxGL
+                        </a>
+                        <a
+                            class="link user-link "
+                            href="/static/modules/leaflet/api/leaflet-mapgis/index.html"
+                        >
+                            Leaflet
+                        </a>
+                        <a
+                            class="link user-link "
+                            href="/static/modules/openlayers/api/openLayers-mapgis/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="">undefined</div><ul class="mapgis-sidebar-menus"><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></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="">undefined</div><ul class="mapgis-sidebar-menus"><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="SketchEditorMapboxgl.html">SketchEditorMapboxgl</a><span style="display: none;"><p>二维场景草图编辑类<br/>
+<br>[ES5引入方式]：<br/>
+const { SketchEditorMapboxgl } = Zondy <br/>
+[ES6引入方式]：<br/>
+import { SketchEditorMapboxgl } from &quot;@mapgis/webclient-leaflet-plugin&quot; <br/></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/support/Utils.js</span>
+                </header>
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>import {
+  Color,
+  defaultValue,
+  GeometryType,
+  SimpleFillSymbol,
+  SimpleLineSymbol,
+  SimpleMarkerSymbol,
+  Symbol,
+  UniqueValueRenderer
+} from '@mapgis/webclient-common'
+/**
+ * 获取圆形聚类的paint样式
+ * @param {ClusterRenderer} renderer 聚类渲染器对象
+ * @param {Object} options 额外参数
+ * @param {Number} [options.opacity = 1] 图层透明度
+ * @return {Object} paint mapbox的圆形聚类的paint样式
+ * */
+function getClusterCirclePaint(renderer, options) {
+  options = defaultValue(options, {})
+  // 图层透明度
+  options.opacity = defaultValue(options.opacity, 1)
+  // 聚类分段参数
+  const clusterInfos = renderer.clusterInfos
+  // 默认样式
+  const defaultSymbol = renderer.defaultSymbol
+  // mapbox的圆形聚类的paint样式
+  const paint = {
+    // 设置圆形几何的填充颜色
+    'circle-color': ['step', ['get', 'point_count']],
+    // 圆形几何的填充颜色的透明度
+    'circle-opacity': ['step', ['get', 'point_count']],
+    // 设置圆形几何的半径
+    'circle-radius': ['step', ['get', 'point_count']],
+    // 设置外边线颜色
+    'circle-stroke-color': ['step', ['get', 'point_count']],
+    // 设置外边线透明度
+    'circle-stroke-opacity': ['step', ['get', 'point_count']],
+    // 设置外边线宽度
+    'circle-stroke-width': ['step', ['get', 'point_count']]
+  }
+  for (let i = 0; i &lt; clusterInfos.length; i++) {
+    // 设置圆形几何的填充颜色
+    const _color = Color.fromColor(clusterInfos[i].symbol.color)
+    paint['circle-color'].push(_color.toCssRGBAString())
+    paint['circle-color'].push(clusterInfos[i].maxValue)
+    // 设置透明度,图层透明度*符号透明度，才是最终的透明度
+    paint['circle-opacity'].push(_color.alpha * options.opacity)
+    paint['circle-opacity'].push(clusterInfos[i].maxValue)
+    // 设置圆形几何的半径
+    paint['circle-radius'].push(clusterInfos[i].symbol.size)
+    paint['circle-radius'].push(clusterInfos[i].maxValue)
+    // 获取外边线样式
+    const _outline = Symbol.fromJSON(clusterInfos[i].symbol.outline)
+    // 设置外边线颜色
+    paint['circle-stroke-color'].push(_outline.color.toCssRGBAString())
+    paint['circle-stroke-color'].push(clusterInfos[i].maxValue)
+    // 设置透明度,图层透明度*符号透明度，才是最终的透明度
+    paint['circle-stroke-opacity'].push(_outline.color.alpha * options.opacity)
+    paint['circle-stroke-opacity'].push(clusterInfos[i].maxValue)
+    // 设置外边线宽度
+    paint['circle-stroke-width'].push(_outline.width)
+    paint['circle-stroke-width'].push(clusterInfos[i].maxValue)
+  }
+  // 下面这些是必填项
+  // 超出最大数值时的填充颜色
+  const _defaultColor = Color.fromColor(defaultSymbol.color)
+  paint['circle-color'].push(_defaultColor.toCssRGBAString())
+  paint['circle-opacity'].push(1)
+  // 超出最大数值时的几何的半径
+  paint['circle-radius'].push(defaultSymbol.size)
+  // 超出最大数值时的外边线样式
+  const _defaultOutline = Symbol.fromJSON(defaultSymbol.outline)
+  paint['circle-stroke-color'].push(_defaultOutline.color.toCssRGBAString())
+  paint['circle-stroke-opacity'].push(1)
+  paint['circle-stroke-width'].push(_defaultOutline.width)
+  return paint
+}
+/**
+ * 获取圆符号聚类的layout样式
+ * @param {ClusterRenderer} renderer 聚类渲染器对象
+ * @return {Object} paint mapbox的圆形聚类的layout样式
+ * */
+function getSymbolLayout(renderer) {
+  // 获取聚类参数
+  const clusterInfos = renderer.clusterInfos
+  // 获取默认文字符号
+  const _defaultLabelSymbol = renderer.defaultLabelSymbol
+  // 获取字体
+  let _fontFamily = '宋体'
+  // 找到第一个含有字体的符号
+  for (let i = 0; i &lt; clusterInfos.length; i++) {
+    // 获取文字符号
+    const _labelSymbol = Symbol.fromJSON(clusterInfos[i].labelSymbol)
+    if (_labelSymbol &amp;&amp; _labelSymbol.font &amp;&amp; _labelSymbol.font.family) {
+      _fontFamily = _labelSymbol.font.family
+    }
+  }
+  // 如果没有，则在默认文字符号中查找
+  if (
+    !_fontFamily &amp;&amp;
+    _defaultLabelSymbol &amp;&amp;
+    _defaultLabelSymbol.font &amp;&amp;
+    _defaultLabelSymbol.font.family
+  ) {
+    _fontFamily = _defaultLabelSymbol.font.family
+  }
+  const layout = {
+    // 显示字段名，先固定后面再说
+    'text-field': '{point_count}',
+    // 字体，先固定后面再说
+    'text-font': [_fontFamily, _fontFamily],
+    // 设置字体大小
+    'text-size': ['step', ['get', 'point_count']]
+  }
+  for (let i = 0; i &lt; clusterInfos.length; i++) {
+    // 获取文字符号
+    const _labelSymbol = Symbol.fromJSON(clusterInfos[i].labelSymbol)
+    // 设置字体大小
+    layout['text-size'].push(_labelSymbol.font.size)
+    layout['text-size'].push(clusterInfos[i].maxValue)
+  }
+  // 下面这些是必填项
+  // 超出最大数值时的字体大小
+  let _extraTextSize = 30
+  if (
+    _defaultLabelSymbol &amp;&amp;
+    _defaultLabelSymbol.font &amp;&amp;
+    _defaultLabelSymbol.font.size
+  ) {
+    _extraTextSize = _defaultLabelSymbol.font.size
+  }
+  layout['text-size'].push(_extraTextSize)
+  return layout
+}
+/**
+ * 获取圆符号聚类的paint样式
+ * @param {ClusterRenderer} renderer 聚类渲染器对象
+ * @param {Object} options 额外参数
+ * @param {Number} [options.opacity = 1] 图层透明度
+ * @return {Object} paint mapbox的圆形聚类的paint样式
+ * */
+function getSymbolPaint(renderer, options) {
+  options = defaultValue(options, {})
+  // 图层透明度
+  options.opacity = defaultValue(options.opacity, 1)
+  // 获取聚类参数
+  const clusterInfos = renderer.clusterInfos
+  const paint = {
+    // 文字透明度
+    'text-opacity': 1
+  }
+  for (let i = 0; i &lt; clusterInfos.length; i++) {
+    // 获取文字符号
+    const _labelSymbol = Symbol.fromJSON(clusterInfos[i].labelSymbol)
+    // 图层透明度*符号透明度，才是最终的透明度
+    paint['text-opacity'] = _labelSymbol.color.alpha * options.opacity
+  }
+  return paint
+}
+/**
+ * 获取不在聚类范围内的圆形paint样式
+ * @param {ClusterRenderer} renderer 聚类渲染器对象
+ * @param {Object} options 额外参数
+ * @param {Number} [options.opacity = 1] 图层透明度
+ * @return {Object} paint 不在聚类范围内的圆形paint样式
+ * */
+function getUnClusterCirclePaint(renderer, options) {
+  options = defaultValue(options, {})
+  // 图层透明度
+  options.opacity = defaultValue(options.opacity, 1)
+  // 拷贝颜色和外边线参数
+  const _defaultSymbol = renderer.defaultSymbol
+  const _defaultColor = Color.fromColor(_defaultSymbol.color)
+  const _defaultOutline = Symbol.fromJSON(_defaultSymbol.outline)
+  const _defaultOutlineColor = Color.fromColor(_defaultOutline.color)
+  return {
+    // 图层透明度*符号透明度，才是最终的透明度
+    'circle-opacity': _defaultColor.alpha * options.opacity,
+    // 不支持在颜色属性上设置透明度
+    'circle-color': _defaultColor.toCssRGBAString(),
+    'circle-radius': _defaultSymbol.size,
+    'circle-stroke-width': _defaultOutline.width,
+    // 不支持在颜色属性上设置透明度
+    'circle-stroke-color': _defaultOutlineColor.toCssRGBAString(),
+    // 图层透明度*符号透明度，才是最终的透明度
+    'circle-stroke-opacity': _defaultOutlineColor.alpha * options.opacity
+  }
+}
+/**
+ * 通过随机准提图和要素集合，构造一个单值专题图，注意随机专题图必须指定字段名，不指定则寻找字段名为oid的字段，没找到，则默认用属性里面的第一个字段名
+ * @param {RandomRenderer} randomRenderer 随即专题图
+ * @param {FeatureSet} featureSet 要素集合
+ * @return {UniqueValueRenderer} 单值专题图
+ * */
+function getUniqueRendererFromRandomRenderer(randomRenderer, featureSet) {
+  // 获取要素数组
+  const _features = featureSet.features
+  // MapBox做专题图必须要字段名
+  let _field = randomRenderer.field
+  // 没找到字段名
+  if (!_field) {
+    // 获取要素里的所有字段名数组
+    const _keys = Object.keys(_features[0].attributes)
+    // 查看有没有oid字段名
+    for (let i = 0; i &lt; _keys.length; i++) {
+      if (_keys[i].toLowerCase() === 'oid') {
+        _field = _keys[i]
+        break
+      }
+    }
+    // 没有oid字段名，则用找到的第一个
+    _field = _keys[0]
+  }
+  // 构造单值专题图渲染器
+  const _uniqueValueInfos = []
+  for (let i = 0; i &lt; _features.length; i++) {
+    let _uniqueValueInfo
+    switch (_features[i].geometry.type) {
+      case GeometryType.polygon:
+      case GeometryType.multiPolygon:
+      case GeometryType.extent:
+      case GeometryType.circle:
+      default:
+        _uniqueValueInfo = {
+          value: _features[i].attributes[_field],
+          symbol: new SimpleFillSymbol({
+            color: new Color(
+              parseInt(Math.random() * 255),
+              parseInt(Math.random() * 255),
+              parseInt(Math.random() * 255),
+              1
+            )
+          })
+        }
+        break
+      case GeometryType.lineString:
+      case GeometryType.multiLineString:
+        _uniqueValueInfo = {
+          value: _features[i].attributes[_field],
+          symbol: new SimpleLineSymbol({
+            color: new Color(
+              parseInt(Math.random() * 255),
+              parseInt(Math.random() * 255),
+              parseInt(Math.random() * 255),
+              1
+            ),
+            width: 3
+          })
+        }
+        break
+      case GeometryType.point:
+      case GeometryType.multiPoint:
+        _uniqueValueInfo = {
+          value: _features[i].attributes[_field],
+          symbol: new SimpleMarkerSymbol({
+            color: new Color(
+              parseInt(Math.random() * 255),
+              parseInt(Math.random() * 255),
+              parseInt(Math.random() * 255),
+              1
+            )
+          })
+        }
+        break
+    }
+    _uniqueValueInfos.push(_uniqueValueInfo)
+  }
+  return new UniqueValueRenderer({
+    field: _field,
+    uniqueValueInfos: _uniqueValueInfos
+  })
+}
+/**
+ * 获取圆形的等级符号绘制样式
+ * @param {Array&lt;Feature>} features 要素数组
+ * @param {RankRenderer} renderer
+ * @param {Object} options 其他初始化参数
+ * @param {Number} [options.defaultSize = 20] 当未匹配到半径时的默认半径
+ * @return {Object} 绘制样式
+ * */
+function getRankCircleStyle(features, renderer, options) {
+  options = defaultValue(options, {})
+  options.defaultSize = defaultValue(options.defaultSize, 20)
+  // 获取符号
+  const _symbol = renderer.symbol
+  // 获取默认符号
+  const _defaultSymbol = defaultValue(renderer.defaultSymbol, {})
+  // 默认半径大小
+  let _defaultSize = options.defaultSize
+  // 如果defaultSymbol设置了,则使用defaultSymbol设置的
+  if (_defaultSymbol &amp;&amp; _defaultSymbol.size) {
+    _defaultSize = _defaultSymbol.size
+  }
+  // 外边线样式
+  const _outline = _symbol.outline
+  // mapbox的ATSL语法树说明
+  // [
+  //   注释: 写死为case
+  //   'case',
+  //   注释: ['get', 'name'] 表示获取字段名为name的数据,'==' 表示进行相等判断,'武昌区' 表示当值为武昌区时设置半径
+  //   ['==', ['get', 'name'], '武昌区'],
+  //   注释: 当['==', ['get', 'name'], '武昌区']判断成立时, 设置半径大小为15
+  //   15,
+  //   ['==', ['get', 'name'], '汉阳区'],
+  //   25,
+  //   注释: 当上述判断不成立时,使用的默认大小
+  //   20
+  // ]
+  // 设置半径的绘制样式
+  const circleRadiusATSL = ['case']
+  // 获取字段名
+  const _field = renderer.field
+  // 数据去重，如果相同字段值对应的半径不同，则取遇到的第一个
+  const _attributes = {}
+  for (let i = 0; i &lt; features.length; i++) {
+    if (!_attributes.hasOwnProperty(features[i].attributes[_field])) {
+      _attributes[features[i].attributes[_field]] = features[i].symbol.size
+    }
+  }
+  // 通过要素上的符号,生成ATSL语法树
+  Object.keys(_attributes).forEach(function (key) {
+    circleRadiusATSL.push(['==', ['get', _field], key])
+    circleRadiusATSL.push(_attributes[key])
+  })
+  // 当未匹配到半径时使用默认半径
+  circleRadiusATSL.push(_defaultSize)
+  // 返回圆形样式
+  return {
+    paint: {
+      // 设置圆形几何的填充颜色
+      'circle-color': _symbol.color.toCssRGBString(),
+      // 圆形几何的填充颜色的透明度
+      'circle-opacity': _symbol.color.alpha,
+      // 设置圆形几何的半径
+      'circle-radius': circleRadiusATSL,
+      // 设置外边线颜色
+      'circle-stroke-color': _outline.color.toCssRGBString(),
+      // 设置外边线透明度
+      'circle-stroke-opacity': _outline.color.alpha,
+      // 设置外边线宽度
+      'circle-stroke-width': _outline.width
+    }
+  }
+}
+/**
+ * 获取文字的等级符号绘制样式
+ * @param {Array&lt;Feature>} features 要素数组
+ * @param {RankRenderer} renderer
+ * @param {Object} options 其他初始化参数
+ * @param {Number} [options.defaultSize = 20] 当未匹配到半径时的默认半径
+ * @param {Number} [options.fontFamily = '宋体'] 字体，需要mapbox中加载了该字体资源
+ * @return {Object} 绘制样式
+ * */
+function getRankTextStyle(features, renderer, options) {
+  options = defaultValue(options, {})
+  options.defaultSize = defaultValue(options.defaultSize, 20)
+  options.fontFamily = defaultValue(options.fontFamily, '宋体')
+  // 获取字段名
+  const _field = renderer.field
+  // 获取符号
+  const _symbol = renderer.symbol
+  // 获取默认符号
+  const _defaultSymbol = defaultValue(renderer.defaultSymbol, {})
+  // 获取字体
+  let _fontFamily = options.fontFamily
+  const _font = _symbol.font
+  const _defaultFont = _defaultSymbol.font
+  if (_font &amp;&amp; _font.family) {
+    _fontFamily = _font.family
+  } else if (_defaultFont &amp;&amp; _defaultFont.family) {
+    _fontFamily = _defaultFont.family
+  }
+  // 默认字体大小
+  let _defaultSize = options.defaultSize
+  // 如果defaultSymbol设置了,则使用defaultSymbol设置的
+  if (_defaultSymbol &amp;&amp; _defaultSymbol.size) {
+    _defaultSize = _defaultSymbol.size
+  }
+  // 数据去重，如果相同字段值对应的半径不同，则取遇到的第一个
+  const _attributes = {}
+  for (let i = 0; i &lt; features.length; i++) {
+    if (!_attributes.hasOwnProperty(features[i].attributes[_field])) {
+      _attributes[features[i].attributes[_field]] = features[i].symbol.font.size
+    }
+  }
+  // 设置文字大小的绘制样式
+  // mapbox的ATSL语法树说明
+  // [
+  //   注释: 写死为case
+  //   'case',
+  //   注释: ['get', 'name'] 表示获取字段名为name的数据,'==' 表示进行相等判断,'武昌区' 表示当值为武昌区时设置半径
+  //   ['==', ['get', 'name'], '武昌区'],
+  //   注释: 当['==', ['get', 'name'], '武昌区']判断成立时, 设置文字大小为15
+  //   15,
+  //   ['==', ['get', 'name'], '汉阳区'],
+  //   25,
+  //   注释: 当上述判断不成立时,使用的默认大小
+  //   20
+  // ]
+  const textSizeATSL = ['case']
+  // 通过要素上的符号,生成ATSL语法树
+  Object.keys(_attributes).forEach(function (key) {
+    textSizeATSL.push(['==', ['get', _field], key])
+    textSizeATSL.push(_attributes[key])
+  })
+  // 当未匹配到半径时使用默认文字大小
+  textSizeATSL.push(_defaultSize)
+  // 获取文字颜色
+  let _color
+  if (_symbol &amp;&amp; _symbol.color) {
+    _color = _symbol.color
+  } else if (_defaultSymbol &amp;&amp; _defaultSymbol.color) {
+    _color = _symbol.color
+  } else {
+    _color = new Color(0, 0, 0, 1)
+  }
+  // 返回文字样式
+  return {
+    paint: {
+      // 文字颜色
+      'text-color': _color.toCssRGBString(),
+      // 文字透明度
+      'text-opacity': _color.alpha
+    },
+    layout: {
+      // 显示字段名，先固定后面再说
+      'text-field': _field,
+      // 字体，先固定后面再说
+      'text-font': [_fontFamily, _fontFamily],
+      // 设置字体大小
+      'text-size': textSizeATSL
+    }
+  }
+}
+export {
+  getClusterCirclePaint,
+  getSymbolLayout,
+  getSymbolPaint,
+  getUnClusterCirclePaint,
+  getUniqueRendererFromRandomRenderer,
+  getRankCircleStyle,
+  getRankTextStyle
+}
+</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>