Method _createVectorLayer

src/common/mapping/WebMapV2.js:953–1014

(layerInfo, features)

    }

    _createVectorLayer(layerInfo, features) {
      const type = layerInfo.featureType;
      const { layerID, minzoom, maxzoom, style, visible, parentLayerId = layerID } = layerInfo;
      const layerSource = this.map.getSource(layerID);
      const sourceData = {
        type: 'FeatureCollection',
        features: features
      };
      if (!layerSource) {
        const source = {
          type: 'geojson',
          data: sourceData
        };
        this.map.addSource(layerID, source);
      } else {
        layerSource.setData(sourceData);
      }
      const styleArr = Array.isArray(style) ? style : [style];
      if (styleArr.length === 2) {
        // 道路
        if (styleArr[0].lineDash === 'solid' && styleArr[1].lineDash === 'solid') {
          styleArr[0].strokeWidth = styleArr[1].strokeWidth;
          styleArr[1].strokeWidth = styleArr[1].strokeWidth - 2;
        }
        // 铁路
        if (styleArr[0].lineDash === 'solid' && styleArr[1].lineDash === 'dash') {
          styleArr[0].strokeWidth = styleArr[1].strokeWidth;
          styleArr[1].strokeWidth = styleArr[1].strokeWidth * 0.5;
          styleArr[1].lineDash = 'dashrailway';
        }
      }
      styleArr.forEach((element, index) => {
        const layerStyle = {
          style: this._transformStyleToMapBoxGl(element, type),
          layout: {
            visibility: visible
          }
        };
        const newLayerID = index === 0 ? layerID : `${layerID}-additional-${index}`;
        this._addOverlayToMap({
          type,
          source: layerID,
          layerID: newLayerID,
          parentLayerId,
          layerStyle,
          minzoom,
          maxzoom
        });
      });
      // 如果面有边框
      type === 'POLYGON' &&
        style.strokeColor &&
        this._addStrokeLineForPoly({
          style,
          source: layerID,
          layerID: layerID + '-strokeLine',
          parentLayerId: layerID,
          visible,