Method _createRankSymbolLayer

src/common/mapping/WebMapV2.js:1316–1377

(layerInfo, features)

    }

    _createRankSymbolLayer(layerInfo, features) {
      const { minzoom, maxzoom } = layerInfo;
      const fieldName = layerInfo.themeSetting.themeField;
      const colors = layerInfo.themeSetting.colors;
      const style = layerInfo.style;
      const featureType = layerInfo.featureType;
      const styleSource = this.createRankStyleSource(layerInfo, features);
      const styleGroups = styleSource.styleGroups;
      features = this.getFilterFeatures(layerInfo.filterCondition, features);
      // 获取 expression
      const expression = ['match', ['get', 'index']];
      const colorExpression = ['match', ['get', 'index']];
      for (let index = 0; index < features.length; index++) {
        const row = features[index];
        const tartget = parseFloat(row.properties[fieldName]);
        if (styleGroups) {
          for (let i = 0; i < styleGroups.length; i++) {
            if (styleGroups[i].start <= tartget && tartget < styleGroups[i].end) {
              const radius =
                style.type === 'SYMBOL_POINT' || style.type === 'IMAGE_POINT'
                  ? style.type === 'SYMBOL_POINT'
                    ? styleGroups[i].radius * 2
                    : Number.parseFloat((styleGroups[i].radius / style.imageInfo.size.h).toFixed(2)) * 2
                  : styleGroups[i].radius;
              expression.push(row.properties.index, radius);
              colorExpression.push(row.properties.index, styleGroups[i].color);
              break;
            }
          }
        }
      }
      expression.push(1);
      colorExpression.push('rgba(0, 0, 0, 0)');
      // 图例处理
      this._initLegendConfigInfo(layerInfo, styleGroups);
      if (colors && colors.length > 0) {
        style.fillColor = colorExpression;
      }
      if (style.type === 'SYMBOL_POINT') {
        this._createSymbolLayer(layerInfo, features, expression);
      } else if (['SVG_POINT', 'IMAGE_POINT'].includes(style.type)) {
        this._createGraphicLayer(layerInfo, features, expression);
      } else {
        const source = {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: features
          }
        };
        // 获取样式
        const layerStyle = {
          layout: {
            visibility: layerInfo.visible
          },
          style: this._transformStyleToMapBoxGl(layerInfo.style, featureType, expression, 'circle-radius')
        };
        const layerID = layerInfo.layerID;