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_MapboxglGraphicsLayer.js.html ADDED Viewed

@@ -0,0 +1,1184 @@
+<!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/MapboxglGraphicsLayer.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/MapboxglGraphicsLayer.js</span>
+                </header>
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>import {
+  defaultValue,
+  getGUID,
+  Log,
+  Feature,
+  GeometryType,
+  SimpleMarkerSymbol,
+  SimpleLineSymbol,
+  SimpleFillSymbol,
+  TextSymbol,
+  SymbolType,
+  PictureMarkerSymbol
+} from '@mapgis/webclient-common'
+import MapboxglPlugin from '../../util/MapboxglPlugin'
+import SourceMetaData from './SourceMetaData'
+class MapboxglGraphicsLayer {
+  constructor(options) {
+    options = defaultValue(options, {})
+    this.id = options.id || getGUID()
+    this._opacity = options.opacity || 1
+    this._visible = options.visible || true
+    // 缓存ids
+    this.renderTypes = ['fill', 'line', 'circle', 'text', 'icon']
+    // source and layers
+    this._sourceMetaDatas = {}
+    this.renderTypes.forEach((v) => {
+      const metaData = {}
+      metaData['sourceId'] = `${this.id}_${v}`
+      metaData['featureCollection'] = []
+      metaData[`layerId`] = `${this.id}_${v}_layer`
+      metaData[`renderType`] = v
+      this._sourceMetaDatas[v] = new SourceMetaData(metaData)
+    })
+  }
+  /**
+   * @description: 添加到地图容器中
+   * @param {*} map
+   * @return {*}
+   */
+  onAdd(map) {
+    if (!map) return
+    this._map = map
+    const self = this
+    function init() {
+      self.renderTypes.forEach((type) => {
+        const metaData = self._sourceMetaDatas[type]
+        map.addSource(metaData.sourceId, {
+          type: 'geojson',
+          data: {
+            type: 'FeatureCollection',
+            features: []
+          }
+        })
+        if (type === 'text' || type === 'icon') {
+          type = 'symbol'
+        }
+        // 初始化图层
+        map.addLayer({
+          id: metaData.layerId,
+          source: metaData.sourceId,
+          type
+        })
+      })
+    }
+    return new Promise((resolve) => {
+      // 判断map的load状态
+      // 加载完毕直接添加
+      let mapLoadedInterval
+      const setup = () => {
+        init()
+        resolve(this)
+        if (mapLoadedInterval) {
+          clearInterval(mapLoadedInterval)
+        }
+      }
+      if (map.loaded()) {
+        setup()
+      } else {
+        map.once('load', setup)
+        mapLoadedInterval = setInterval(() => {
+          if (map.loaded()) setup()
+        }, 16)
+      }
+    })
+  }
+  /**
+   * @description: 从地图容器中移除
+   * @param {*} map
+   * @return {*}
+   */
+  onRemove(map) {
+    if (!map) return
+    this.renderTypes.forEach((type) => {
+      const metaData = this._sourceMetaDatas[type]
+      // 删除图层
+      map.removeLayer(metaData.layerId)
+      // 删除source
+      map.removeSource(metaData.sourceId)
+    })
+  }
+  /**
+   * @description: 获取style layer IDs
+   * @return {Array} id数组
+   */
+  getStyleLayerIds() {
+    const layerIds = []
+    this.renderTypes.forEach((type) => {
+      const metaData = this._sourceMetaDatas[type]
+      layerIds.push(metaData.layerId)
+    })
+    return layerIds
+  }
+  /**
+   * @description: 添加graphic或graphics
+   * @param {Array&lt;Feature>|Feature} graphic
+   * @return {*}
+   */
+  add(graphic) {
+    // 添加到容器内
+    if (Array.isArray(graphic)) {
+      graphic.forEach((v) => {
+        this._updateGraphicToCollection(v)
+      })
+    } else {
+      this._updateGraphicToCollection(graphic)
+    }
+    // 更新source资源
+    this._refreshSourceAndLayers()
+  }
+  /**
+   * @description: 移除graphics
+   * @param {*} graphics
+   * @return {*}
+   */
+  _removeGraphicsToCollection(graphics) {
+    // 移除缓存
+    const sourceMetaDatas = Object.values(this._sourceMetaDatas)
+    for (let i = 0; i &lt; sourceMetaDatas.length; i++) {
+      const sourceMetaData = sourceMetaDatas[i]
+      const { featureCollection } = sourceMetaData
+      // 删除的下标
+      const indexs = []
+      for (let j = 0; j &lt; featureCollection.length; j++) {
+        const feature = featureCollection[j]
+        if (graphics.indexOf(feature) > -1) {
+          indexs.push(j)
+        }
+      }
+      if (indexs.length > 0) {
+        // 过滤不删除的数据
+        sourceMetaData.featureCollection = featureCollection.filter(
+          (v, i) => indexs.indexOf(i) === -1
+        )
+        sourceMetaData.setSourceDirty(true)
+      }
+    }
+  }
+  /**
+   * @description: 更新graphic
+   * @param {Array&lt;Feature>|Feature} graphic
+   * @return {*}
+   */
+  update(graphic, updateDetails) {
+    if (!graphic) return
+    const graphics = Array.isArray(graphic) ? graphic : [graphic]
+    // 设置styleLayer dirty
+    for (let i = 0; i &lt; graphics.length; i++) {
+      const graphic = graphics[i]
+      const updateDetail = updateDetails[i] || {}
+      // 将graphic进行分组
+      const sourceMetaData = this._updateGraphicToCollection(graphic)
+      if (sourceMetaData) {
+        // 处理几何更新
+        if (updateDetail.geometryUpdated) {
+          sourceMetaData.setSourceDirty(true)
+        }
+        // 处理样式更新
+        if (updateDetail.symbolUpdated) {
+          sourceMetaData.setStyleLayerDirty(true)
+        }
+      }
+    }
+    this._refreshSourceAndLayers()
+  }
+  _updateGraphicToCollection(graphic) {
+    let sourceMetaData
+    if (!graphic) return
+    if (!(graphic instanceof Feature)) return
+    if (!graphic.geometry) {
+      Log.error('几何不存在')
+      return
+    }
+    const geometry = graphic.geometry
+    switch (geometry.type) {
+      case GeometryType.multiPoint:
+      case GeometryType.point: {
+        sourceMetaData = this._dividePointGraphic(graphic)
+        break
+      }
+      case GeometryType.multiLineString:
+      case GeometryType.lineString: {
+        sourceMetaData = this._dividePolylineGraphic(graphic)
+        break
+      }
+      case GeometryType.extent:
+      case GeometryType.circle:
+      case GeometryType.multiPolygon:
+      case GeometryType.polygon: {
+        sourceMetaData = this._dividePolygonGraphic(graphic)
+        break
+      }
+      default: {
+        break
+      }
+    }
+    return sourceMetaData
+  }
+  /**
+   * @description: 移除graphic
+   * @param {*} graphic
+   * @return {*}
+   */
+  remove(graphic) {
+    if (!graphic) return
+    if (Array.isArray(graphic)) {
+      this._removeGraphicsToCollection(graphic)
+    } else {
+      this._removeGraphicsToCollection([graphic])
+    }
+    // 更新source资源
+    this._refreshSourceAndLayers()
+  }
+  /**
+   * @description: 移除全部
+   * @return {*}
+   */
+  removeAll() {
+    const sourceMetaDatas = Object.values(this._sourceMetaDatas)
+    for (let i = 0; i &lt; sourceMetaDatas.length; i++) {
+      const sourceMetaData = sourceMetaDatas[i]
+      sourceMetaData.featureCollection = []
+      sourceMetaData.setDirty(true)
+    }
+    // 更新source资源
+    this._refreshSourceAndLayers()
+  }
+  /**
+   * @description: 刷新source数据和图层数据
+   * @return {Boolean} 是否进行刷新
+   */
+  _refreshSourceAndLayers() {
+    // 是否更新完source
+    const keys = Object.keys(this._sourceMetaDatas)
+    // 无须更新
+    if (!keys.some((v) => this._sourceMetaDatas[v].getDirty())) {
+      return false
+    }
+    // 如果未添加到source地图容器内，无法渲染
+    if (!this._map) return false
+    const map = this._map
+    // 更新source
+    keys.forEach((key) => {
+      const sourceMetaData = this._sourceMetaDatas[key]
+      // 更新style layer
+      if (sourceMetaData.getStyleLayerDirty()) {
+        this._setSourceMetaDataStyle(sourceMetaData)
+        // 更新渲染样式逻辑
+        sourceMetaData.setStyleLayerDirty(false)
+      }
+      // 更新source
+      if (sourceMetaData.getSourceDirty()) {
+        const { sourceId, featureCollection } = sourceMetaData
+        const geojsonSource = map.getSource(sourceId)
+        geojsonSource.setData({
+          type: 'FeatureCollection',
+          features: featureCollection.map(function (v) {
+            const geojson = MapboxglPlugin.convertToGeoJSON(v)
+            return geojson
+          })
+        })
+        sourceMetaData.setSourceDirty(false)
+      }
+    })
+    // 触发更新
+    map._update(true)
+    return true
+  }
+  /**
+   * @description: 设置sourceMetaData style
+   * @param {*} sourceMetaData
+   * @return {*}
+   */
+  _setSourceMetaDataStyle(sourceMetaData) {
+    const style = {}
+    const paint = {}
+    const layout = {}
+    const { renderType } = sourceMetaData
+    switch (renderType) {
+      case 'circle': {
+        // as SMS
+        this._setCircleStyle(sourceMetaData, paint, layout)
+        break
+      }
+      case 'line': {
+        // as SLS
+        this._setLineStyle(sourceMetaData, paint, layout)
+        break
+      }
+      case 'fill': {
+        // as SFS
+        this._setFillStyle(sourceMetaData, paint, layout)
+        break
+      }
+      case 'text': {
+        // as TS
+        this._setTextStyle(sourceMetaData, paint, layout)
+        break
+      }
+      case 'icon': {
+        // as PMS
+        this._setIconStyle(sourceMetaData, paint, layout)
+        break
+      }
+      default: {
+        break
+      }
+    }
+    style.paint = paint
+    style.layout = layout
+    return style
+  }
+  /**
+   * @description: 设置styleLayer样式
+   * @param {*} sourceMetaData
+   * @param {*} paint
+   * @param {*} layout
+   * @return {*}
+   */
+  _setCircleStyle(sourceMetaData, paint, layout) {
+    if (!this._map) return
+    const map = this._map
+    const style = map.style
+    const { layerId, featureCollection } = sourceMetaData
+    const opacity = this._opacity
+    const visible = this._visible
+    const paintCaches = {
+      'circle-color': {
+        values: [],
+        def: '#000000'
+      },
+      'circle-opacity': {
+        values: [],
+        def: 1
+      },
+      'circle-stroke-color': {
+        values: [],
+        def: '#000000'
+      },
+      'circle-stroke-opacity': {
+        values: [],
+        def: 1
+      },
+      'circle-stroke-width': {
+        values: [],
+        def: 0
+      },
+      'circle-radius': {
+        values: [],
+        def: 5
+      }
+    }
+    const layoutCaches = {}
+    featureCollection.forEach((feature) => {
+      // 此处symbol必须为SMS
+      const { id } = feature
+      let symbol = feature.symbol
+      if (!(symbol instanceof SimpleMarkerSymbol)) {
+        Log.info(`不支持类型为${symbol.type}的符号！`)
+        symbol = new SimpleMarkerSymbol()
+      }
+      // color
+      const color = MapboxglPlugin.applyVisibleAndOpacityToColor(
+        symbol.color,
+        visible,
+        opacity
+      )
+      paintCaches['circle-color'].values.push(id, color.toCssRGBString())
+      paintCaches['circle-opacity'].values.push(id, color.alpha)
+      // stroke color
+      const strokeColor = MapboxglPlugin.applyVisibleAndOpacityToColor(
+        symbol.outline.color,
+        visible,
+        opacity
+      )
+      paintCaches['circle-stroke-color'].values.push(
+        id,
+        strokeColor.toCssRGBString()
+      )
+      paintCaches['circle-stroke-opacity'].values.push(id, strokeColor.alpha)
+      paintCaches['circle-stroke-width'].values.push(id, symbol.outline.width)
+      // size
+      paintCaches['circle-radius'].values.push(id, symbol.size / 2)
+    })
+    // 设置样式
+    this._setLayoutAndPaintCaches(
+      layerId,
+      paintCaches,
+      layoutCaches,
+      paint,
+      layout,
+      style
+    )
+  }
+  /**
+   * @description: 设置styleLayer样式
+   * @param {*} sourceMetaData
+   * @param {*} paint
+   * @param {*} layout
+   * @return {*}
+   */
+  _setLineStyle(sourceMetaData, paint, layout) {
+    if (!this._map) return
+    const map = this._map
+    const style = map.style
+    const { layerId, featureCollection } = sourceMetaData
+    const opacity = this._opacity
+    const visible = this._visible
+    const paintCaches = {
+      'line-color': {
+        values: [],
+        def: '#000000'
+      },
+      'line-width': {
+        values: [],
+        def: 1
+      },
+      'line-opacity': {
+        values: [],
+        def: 1
+      }
+    }
+    const layoutCaches = {
+      'line-join': {
+        values: [],
+        def: 'round'
+      }
+    }
+    // 不支持line-dasharray line-miter-limit line-cap
+    featureCollection.forEach((feature) => {
+      // 此处symbol必须为SMS
+      const { id } = feature
+      let symbol = feature.symbol
+      if (!(symbol instanceof SimpleLineSymbol)) {
+        Log.info(`不支持类型为${symbol.type}的符号！`)
+        symbol = new SimpleLineSymbol()
+      }
+      // paint
+      const color = MapboxglPlugin.applyVisibleAndOpacityToColor(
+        symbol.color,
+        visible,
+        opacity
+      )
+      paintCaches['line-color'].values.push(id, color.toCssRGBString())
+      paintCaches['line-opacity'].values.push(id, color.alpha)
+      paintCaches['line-width'].values.push(id, symbol.width)
+      // layout
+      layoutCaches['line-join'].values.push(id, symbol.join)
+    })
+    // 设置样式
+    this._setLayoutAndPaintCaches(
+      layerId,
+      paintCaches,
+      layoutCaches,
+      paint,
+      layout,
+      style
+    )
+  }
+  /**
+   * @description: 设置styleLayer样式
+   * @param {*} sourceMetaData
+   * @param {*} paint
+   * @param {*} layout
+   * @return {*}
+   */
+  _setFillStyle(sourceMetaData, paint, layout) {
+    if (!this._map) return
+    const map = this._map
+    const style = map.style
+    const { layerId, featureCollection } = sourceMetaData
+    const opacity = this._opacity
+    const visible = this._visible
+    const paintCaches = {
+      'fill-color': {
+        values: [],
+        def: '#ffffff'
+      },
+      'fill-opacity': {
+        values: [],
+        def: 0.25
+      },
+      'fill-outline-color': {
+        values: [],
+        def: '#000000'
+      }
+    }
+    const layoutCaches = {}
+    featureCollection.forEach((feature) => {
+      // 此处symbol必须为SMS
+      const { id } = feature
+      let symbol = feature.symbol
+      if (!(symbol instanceof SimpleFillSymbol)) {
+        Log.info(`不支持类型为${symbol.type}的符号！`)
+        symbol = new SimpleFillSymbol()
+      }
+      // paint
+      const color = MapboxglPlugin.applyVisibleAndOpacityToColor(
+        symbol.color,
+        visible,
+        opacity
+      )
+      const outlineColor = MapboxglPlugin.applyVisibleAndOpacityToColor(
+        symbol.outline.color,
+        visible,
+        opacity
+      )
+      paintCaches['fill-color'].values.push(id, color.toCssRGBString())
+      paintCaches['fill-opacity'].values.push(id, color.alpha)
+      paintCaches['fill-outline-color'].values.push(
+        id,
+        outlineColor.toCssRGBAString()
+      )
+      // layout
+    })
+    // 设置样式
+    this._setLayoutAndPaintCaches(
+      layerId,
+      paintCaches,
+      layoutCaches,
+      paint,
+      layout,
+      style
+    )
+  }
+  /**
+   * @description: 设置styleLayer样式
+   * @param {*} sourceMetaData
+   * @param {*} paint
+   * @param {*} layout
+   * @return {*}
+   */
+  _setTextStyle(sourceMetaData, paint, layout) {
+    if (!this._map) return
+    const map = this._map
+    const style = map.style
+    const { layerId, featureCollection } = sourceMetaData
+    const opacity = this._opacity
+    const visible = this._visible
+    const paintCaches = {
+      'text-color': {
+        values: [],
+        def: '#000000'
+      },
+      'text-opacity': {
+        values: [],
+        def: 1
+      },
+      'text-halo-color': {
+        values: [],
+        def: '#000000'
+      },
+      'text-halo-width': {
+        values: [],
+        def: 0
+      }
+    }
+    const layoutCaches = {
+      'text-field': {
+        values: [],
+        def: ''
+      },
+      'text-size': {
+        values: [],
+        def: 12
+      },
+      'text-justify': {
+        values: [],
+        def: 'center'
+      },
+      'text-letter-spacing': {
+        values: [],
+        def: 0
+      },
+      'text-rotate': {
+        values: [],
+        def: 0
+      }
+    }
+    featureCollection.forEach((feature) => {
+      // 此处symbol必须为SMS
+      const { id } = feature
+      let symbol = feature.symbol
+      if (!(symbol instanceof TextSymbol)) {
+        Log.info(`不支持类型为${symbol.type}的符号！`)
+        symbol = new TextSymbol()
+      }
+      // ----------------- paint -----------------------------
+      const color = MapboxglPlugin.applyVisibleAndOpacityToColor(
+        symbol.color,
+        visible,
+        opacity
+      )
+      const haloColor = MapboxglPlugin.applyVisibleAndOpacityToColor(
+        symbol.haloColor,
+        visible,
+        opacity
+      )
+      paintCaches['text-color'].values.push(id, color.toCssRGBString())
+      paintCaches['text-opacity'].values.push(id, color.alpha)
+      paintCaches['text-halo-color'].values.push(
+        id,
+        haloColor.toCssRGBAString()
+      )
+      paintCaches['text-halo-width'].values.push(id, symbol.haloSize)
+      // ----------------- layout -----------------------------
+      // 设置默认文字field
+      layoutCaches['text-field'].values.push(id, symbol.text)
+      // 开启注记避让
+      layoutCaches['text-allow-overlap'] = false
+      layoutCaches['text-font'] = [
+        'Open Sans Regular',
+        'Arial Unicode MS Regular'
+      ]
+      layoutCaches['text-size'].values.push(id, symbol.font.size)
+      layoutCaches['text-justify'].values.push(id, symbol.horizontalAlignment)
+      layoutCaches['text-letter-spacing'].values.push(
+        id,
+        symbol.kerning ? 0.1 : 0
+      )
+      layoutCaches['text-rotate'].values.push(
+        id,
+        symbol.rotated &amp;&amp; symbol.angle !== 0 ? symbol.angle : 0
+      )
+    })
+    // 设置样式
+    this._setLayoutAndPaintCaches(
+      layerId,
+      paintCaches,
+      layoutCaches,
+      paint,
+      layout,
+      style,
+      ['text-allow-overlap', 'text-font']
+    )
+  }
+  /**
+   * @description: 设置styleLayer样式
+   * @param {*} sourceMetaData
+   * @param {*} paint
+   * @param {*} layout
+   * @return {*}
+   */
+  _setIconStyle(sourceMetaData, paint, layout) {
+    if (!this._map) return
+    const map = this._map
+    const style = map.style
+    const { layerId, featureCollection } = sourceMetaData
+    const opacity = this._opacity
+    const visible = this._visible
+    const paintCaches = {
+      'icon-color': {
+        values: [],
+        def: '#000000'
+      },
+      'icon-opacity': {
+        values: [],
+        def: 1
+      }
+    }
+    const layoutCaches = {
+      'icon-size': {
+        values: [],
+        def: 20
+      },
+      'icon-rotate': {
+        values: [],
+        def: 0
+      },
+      'icon-image': {
+        values: [],
+        def: 'marker-15'
+      }
+    }
+    featureCollection.forEach((feature) => {
+      // 此处symbol必须为PMS
+      const { id } = feature
+      let symbol = feature.symbol
+      if (!(symbol instanceof PictureMarkerSymbol)) {
+        Log.info(`不支持类型为${symbol.type}的符号！`)
+        symbol = new PictureMarkerSymbol()
+      }
+      // ----------------- paint -----------------------------
+      const color = MapboxglPlugin.applyVisibleAndOpacityToColor(
+        symbol.color,
+        visible,
+        opacity
+      )
+      paintCaches['icon-color'].values.push(id, color.toCssRGBString())
+      paintCaches['icon-opacity'].values.push(id, color.alpha)
+      // ----------------- layout -----------------------------
+      layoutCaches['icon-allow-overlap'] = false
+      layoutCaches['icon-size'].values.push(
+        id,
+        Math.max(symbol.width, symbol.height) / 20
+      )
+      layoutCaches['icon-rotate'].values.push(id, symbol.angle)
+      layoutCaches['icon-image'].values.push(id, 'marker-15')
+    })
+    // 设置样式
+    this._setLayoutAndPaintCaches(
+      layerId,
+      paintCaches,
+      layoutCaches,
+      paint,
+      layout,
+      style,
+      ['icon-allow-overlap']
+    )
+  }
+  /**
+   * @description: 设置布局和绘制样式
+   * @param {*} layerId 图层id
+   * @param {*} paintCaches
+   * @param {*} layoutCaches
+   * @param {*} paint
+   * @param {*} layout
+   * @param {*} style
+   * @return {*}
+   */
+  _setLayoutAndPaintCaches(
+    layerId,
+    paintCaches,
+    layoutCaches,
+    paint,
+    layout,
+    style,
+    filterKeys
+  ) {
+    if (!filterKeys) {
+      filterKeys = []
+    }
+    // 绘制属性样式
+    for (const item in paintCaches) {
+      if (filterKeys.findIndex((v) => v === item) > -1) {
+        paint[item] = paintCaches[item]
+        style.setPaintProperty(layerId, item, paintCaches[item])
+      } else if (paintCaches[item].values.length > 0) {
+        // 为空时，设置默认值
+        let express = []
+        express.push('match')
+        express.push(['get', 'id'])
+        express = express.concat(paintCaches[item].values)
+        express.push(paintCaches[item].def)
+        paint[item] = express
+        style.setPaintProperty(layerId, item, express)
+      } else {
+        paint[item] = paintCaches[item].def
+        style.setPaintProperty(layerId, item, paintCaches[item].def)
+      }
+    }
+    // 布局属性样式
+    for (const item in layoutCaches) {
+      if (filterKeys.findIndex((v) => v === item) > -1) {
+        layout[item] = layoutCaches[item]
+        style.setLayoutProperty(layerId, item, layoutCaches[item])
+      } else if (layoutCaches[item].values.length > 0) {
+        let express = []
+        express.push('match')
+        express.push(['get', 'id'])
+        express = express.concat(layoutCaches[item].values)
+        express.push(layoutCaches[item].def)
+        layout[item] = express
+        style.setLayoutProperty(layerId, item, express)
+      } else {
+        layout[item] = layoutCaches[item].def
+        style.setLayoutProperty(layerId, item, layoutCaches[item].def)
+      }
+    }
+  }
+  /**
+   * @description: 将点类型graphic按符号分组
+   * @param {*} graphic
+   * @return {SourceMetaData}
+   */
+  _dividePointGraphic(graphic) {
+    const { symbol } = graphic
+    let hasMetaData = false
+    let sourceMetaData = this._sourceMetaDatas['circle']
+    switch (symbol.type) {
+      case SymbolType.simpleMarker: {
+        // 清空其他图层的graphic
+        hasMetaData = this._replaceSourceLayer(graphic, 'circle')
+        sourceMetaData = this._sourceMetaDatas['circle']
+        break
+      }
+      case SymbolType.text: {
+        hasMetaData = this._replaceSourceLayer(graphic, 'text')
+        sourceMetaData = this._sourceMetaDatas['text']
+        break
+      }
+      case SymbolType.pictureMarker: {
+        hasMetaData = this._replaceSourceLayer(graphic, 'icon')
+        sourceMetaData = this._sourceMetaDatas['icon']
+        break
+      }
+      default: {
+        break
+      }
+    }
+    // 寻找是否已经有要素缓存
+    // 新增
+    if (!hasMetaData) {
+      const { featureCollection } = sourceMetaData
+      featureCollection.push(graphic)
+      // 全部更新
+      sourceMetaData.setDirty(true)
+    }
+    return sourceMetaData
+  }
+  /**
+   * @description: 替换graphic的SoureCache
+   * @param {*} graphic
+   * @param {*} layerType
+   * @return {Boolean} 是否添加
+   */
+  _replaceSourceLayer(graphic, layerType) {
+    const clearTypes = this.renderTypes
+    const sourceMetaData = this._hasGraphicInCollection(clearTypes, graphic)
+    if (sourceMetaData) {
+      if (sourceMetaData.renderType === layerType) {
+        return true
+      } else {
+        this._removeGraphicsToCollection([graphic])
+      }
+    }
+    return false
+  }
+  /**
+   * @description: 将线类型graphic按符号分组
+   * @param {*} graphic
+   * @return {*}
+   */
+  _dividePolylineGraphic(graphic) {
+    const metaDataCache = this._hasGraphicInCollection(['line'], graphic)
+    const sourceMetaData = this._sourceMetaDatas['line']
+    if (!metaDataCache) {
+      const { featureCollection } = sourceMetaData
+      featureCollection.push(graphic)
+      sourceMetaData.setDirty(true)
+    }
+    return sourceMetaData
+  }
+  /**
+   * @description: 将区类型graphic按符号分组
+   * @param {*} graphic
+   * @return {*}
+   */
+  _dividePolygonGraphic(graphic) {
+    let hasMetaData = false
+    const { symbol } = graphic
+    let sourceMetaData = this._sourceMetaDatas['fill']
+    switch (symbol.type) {
+      case SymbolType.simpleMarker: {
+        // 清空其他图层的graphic
+        hasMetaData = this._replaceSourceLayer(graphic, 'circle')
+        sourceMetaData = this._sourceMetaDatas['circle']
+        break
+      }
+      case SymbolType.text: {
+        hasMetaData = this._replaceSourceLayer(graphic, 'text')
+        sourceMetaData = this._sourceMetaDatas['text']
+        break
+      }
+      case SymbolType.pictureMarker: {
+        hasMetaData = this._replaceSourceLayer(graphic, 'icon')
+        sourceMetaData = this._sourceMetaDatas['icon']
+        break
+      }
+      case SymbolType.pictureFill:
+      case SymbolType.simpleFill: {
+        hasMetaData = this._replaceSourceLayer(graphic, 'fill')
+        sourceMetaData = this._sourceMetaDatas['fill']
+        break
+      }
+      default: {
+        break
+      }
+    }
+    if (!hasMetaData) {
+      const { featureCollection } = sourceMetaData
+      featureCollection.push(graphic)
+      sourceMetaData.setDirty(true)
+    }
+    return sourceMetaData
+  }
+  /**
+   * @description: 判断graphic是否在某类型或类型组中的featureCollection中
+   * @param {Array&lt;String>} renderType
+   * @param {*} graphic
+   * @return {SourceMetaData}
+   */
+  _hasGraphicInCollection(renderType, graphic) {
+    const renderTypes = Array.isArray(renderType) ? renderType : [renderType]
+    let metaData
+    for (let i = 0; i &lt; renderTypes.length; i++) {
+      const sourceMetaData = this._sourceMetaDatas[renderTypes[i]]
+      if (!sourceMetaData) {
+        break
+      }
+      const { featureCollection } = sourceMetaData
+      if (featureCollection.indexOf(graphic) > -1) {
+        metaData = sourceMetaData
+        break
+      }
+    }
+    return metaData
+  }
+  set opacity(opacity) {
+    this._opacity = opacity
+    this._updatePaintAndLayoutStyles()
+  }
+  get opacity() {
+    return this._opacity
+  }
+  set visible(visible) {
+    this._visible = visible
+    this._updatePaintAndLayoutStyles()
+  }
+  get visible() {
+    return this._visible
+  }
+  /**
+   * @description: 更新样式
+   * @return {*}
+   */
+  _updatePaintAndLayoutStyles() {
+    const sourceMetaDatas = Object.values(this._sourceMetaDatas)
+    for (let i = 0; i &lt; sourceMetaDatas.length; i++) {
+      const sourceMetaData = sourceMetaDatas[i]
+      sourceMetaData.setStyleLayerDirty(true)
+    }
+    this._refreshSourceAndLayers()
+  }
+}
+export default MapboxglGraphicsLayer
+</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>