Method _addLabelLayer

src/common/mapping/WebMapV2.js:1411–1489

(layerInfo, features, addSource = false)

    }

    _addLabelLayer(layerInfo, features, addSource = false) {
      const labelLayerId = this._getSymbolLabelLayerName(layerInfo.layerID);
      if (this.map.getLayer(labelLayerId)) {
        return;
      }
      const labelStyle = layerInfo.labelStyle;
      const properties = features[0] && features[0].properties;
      const textField = labelStyle.labelField.replace(/{(.+)}/g, '$1');
      if (!properties || !Object.prototype.hasOwnProperty.call(properties, textField)) {
          return;
      }
      let { backgroundFill = [255, 255, 255, 0] } = labelStyle;
      const fontFamily = labelStyle.fontFamily;
      const { minzoom, maxzoom } = layerInfo;
      const textSize = parseFloat(labelStyle.fontSize || 14);
      let textBackgroundImageId = '';
      if (labelStyle.placement !== 'line') {
        textBackgroundImageId = this._addTextBackgroundImage(backgroundFill);
      }
      backgroundFill = `rgba(${backgroundFill.join(',')})`;
      let textHaloColor = 'rgba(255,255,255,0)';
      if (labelStyle.outlineColor && labelStyle.outlineWidth > 0) {
        textHaloColor = labelStyle.outlineColor;
      }

      let textHaloWidth = (labelStyle.outlineWidth || 0) / 2;
      let textAnchor = labelStyle.textAlign || 'center';
      if (labelStyle.textBaseline && labelStyle.textBaseline !== 'middle') {
        textAnchor = `${labelStyle.textBaseline}${textAnchor === 'center' ? '' : `-${textAnchor}`}`;
      }

      const textOffset =
        layerInfo.featureType === 'POINT'
          ? [labelStyle.offsetX / textSize || 0, labelStyle.offsetY / textSize || 0]
          : [0, 0];
      const layout = {
        'text-field': `{${labelStyle.labelField}}`,
        'text-size': textSize,
        'text-offset': textOffset,
        'text-font': fontFamily ? [fontFamily] : ['DIN Offc Pro Italic', 'Arial Unicode MS Regular'],
        'symbol-placement':
          labelStyle.placement === 'line' ? (layerInfo.featureType === 'POLYGON' ? 'line' : 'line-center') : 'point',
        'text-max-angle': layerInfo.featureType === 'POLYGON' ? 40 : 30,
        'symbol-spacing': layerInfo.featureType === 'POLYGON' ? 200 : 50,
        'text-anchor': textAnchor,
        'text-line-height': 1.2,
        visibility: layerInfo.visible
      };
      if (textBackgroundImageId) {
        Object.assign(layout, {
          'icon-image': textBackgroundImageId,
          'icon-allow-overlap': true,
          'icon-text-fit': 'both',
          'icon-text-fit-padding': [2, 4, 2, 4]
        });
      }
      this._addLayer(
        {