Method _createSymbolLayer

src/common/mapping/WebMapV2.js:1491–1550

(layerInfo, features, textSizeExpresion, textRotateExpresion, addToMap = true, filter)

    }

    _createSymbolLayer(layerInfo, features, textSizeExpresion, textRotateExpresion, addToMap = true, filter) {
      // 用来请求symbol_point字体文件
      const target = document.getElementById(`${this.target}`);
      target.classList.add('supermapol-icons-map');
      const { layerID, minzoom, maxzoom, style } = layerInfo;
      const unicode = style.unicode;
      const text = String.fromCharCode(parseInt(unicode.replace(/^&#x/, ''), 16));
      const textSize =
        textSizeExpresion ||
        (Array.isArray(style.fontSize) ? style.fontSize : (style.fontSize && parseFloat(style.fontSize)) || 12);
      const rotate = Array.isArray(style.rotation) ? style.rotation : ((style.rotation || 0) * 180) / Math.PI;
      if (!this.map.getSource(layerID)) {
        this.map.addSource(layerID, {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: []
          }
        });
      }
      const layerOptions = {
        id: layerID,
        type: 'symbol',
        source: layerID,
        paint: {
          'text-color': Array.isArray(style.fillColor)
            ? style.fillColor
            : ColorsPickerUtil.getColorWithOpacity(style.fillColor, style.fillOpacity),
          // 'text-opacity': style.fillOpacity === 0 ? 0.1 : style.fillOpacity,
          'text-halo-color': Array.isArray(style.strokeColor)
            ? style.strokeColor
            : ColorsPickerUtil.getColorWithOpacity(style.strokeColor || 'rgba(0,0,0,0)', style.strokeOpacity),
          'text-halo-width': style.strokeWidth || 0
        },
        layout: {
          'text-field': text,
          'text-size': textSize,
          'text-font': ['supermapol-icons'],
          'text-rotate': textRotateExpresion || rotate || 0,
          'text-offset': Array.isArray(style.offsetX)
            ? style.offsetX
            : [style.offsetX / 2 || 0, style.offsetY / 2 || 0],
          'text-allow-overlap': true,
          visibility: layerInfo.visible
        },
        minzoom: minzoom || 0,
        maxzoom: maxzoom || this.map.getMaxZoom() + 1
      };
      if (filter) {
        layerOptions.filter = filter;
      }
      this._addLayer(layerOptions);
      this.map.getSource(layerID).setData({
        type: 'FeatureCollection',
        features: features
      });
      if (addToMap) {
        this._addLayerSucceeded({ layerInfo, features });