openlayer 添加arcgis FeatureServer图层，并按需区分颜色

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { GeoJSON } from "ol/format";
import EsriJSON from "ol/format/EsriJSON";
import { tile } from "ol/loadingstrategy";
import { createXYZ } from "ol/tilegrid";
import { Fill, Stroke, Style, Text, Circle } from "ol/style";
import { Draw, Modify, Select } from "ol/interaction";

 /** 添加Feature 图层 */
    addFeatureLayer(data) {
      let self = this;
       // FeatureServer URL
      let serviceUrl = data.url;

      let vectorSources = new VectorSource({
        format: new GeoJSON(),
        loader: function (extent, resolution) {
          const url =
            serviceUrl +
            "/query/?f=json&" +
            "returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=" +
            encodeURIComponent(
              '{"xmin":' +
              extent[0] +
              ',"ymin":' +
              extent[1] +
              ',"xmax":' +
              extent[2] +
              ',"ymax":' +
              extent[3] +
              ',"spatialReference":{"wkid":4326}}' // 空间参考
            ) +
            "&geometryType=esriGeometryEnvelope&inSR=&outFields=*" +
            "&outSR=";

            /** self.getAxios 是axios请求，自己封装的。 */
          self.getAxios(url).then((response) => {
            if (response.features.length > 0) {
              const features = new EsriJSON().readFeatures(response);
              if (features.length > 0) {
                vectorSources.addFeatures(self.addFeaturesScreen(features, data.name));
                // vectorSources.addFeatures(features);
              }
            }
          });
        },
        strategy: tile(
          createXYZ({
            tileSize: 512,
          })
        ),
      });

      let featureLayer;

       // 根据需求添加不同线颜色
      if (data.name === "微格") {
        featureLayer = new VectorLayer({
          source: vectorSources,
          style: function (feature, resolution) {
            let style = null;
            if (feature.values_.MERGE_STATUS != '2') {

              style = new Style({
                stroke: new Stroke({
                  color: "#33cccc",
                  width: 2,
                }),
                fill: new Fill({
                  color: "rgba(0, 255, 255, .5)",
                }),
                image: new Icon({
                  src: fire,
                  scale: 0.6,
                  opacity: 1,
                }),
              });

            } else {
              style = new Style({
                stroke: new Stroke({
                  color: "#33cccc",
                  width: 2,
                }),
                fill: new Fill({
                  color: "rgba(241, 238, 13, .5)",
                })
              });
            }
            return [style];
          },
        });
      } else {
        featureLayer = new VectorLayer({
          source: vectorSources,
          visible: data.visible,
          style: new Style({
            stroke: new Stroke({
              color: "#33cccc",
              width: 2,
            }),
            fill: new Fill({
              color: "rgba(241, 238, 13, .5)",
            }),
          })
        });
      };

      this.gridVectorSources = vectorSources

       // 添加自定义属性  图层名称  图层URL
      featureLayer.set("layerName", data.layerName);
      featureLayer.set("paramUrl", serviceUrl);

      this.map.addLayer(featureLayer);
      let map = this.map;

      // 图层选中样式
      let select = new Select({
        condition: click,
        toggleCondition: click, // 多选
        style: new Style({
          fill: new Fill({
            // 填充样式
            color: "#ffffff",
          }),
          stroke: new Stroke({
            //线样式
            color: "yellow",
            width: 2,
          }),
          image: new Circle({
            //点样式
            radius: 5,
            fill: new Fill({
              color: "blue",
            }),
          }),
        }),
      });
       // 添加图层选中
      map.addInteraction(select);


      // 图层点击事件
      map.on("click", (event) => {
        // console.log(featureLayer)
        featureLayer.getFeatures(event.pixel).then(function (features) {
          const feature = features[0];
          if (!feature) {
            return;
          }
          console.log(feature);
        });
      });
    },
    /** 添加图层筛选 */
    addFeaturesScreen(features) {
      let self = this;
      let returnLayer = [];
      features.map((item) => {
          // COUNTY_CODE  服务图层的基础属性  
        if (item.values_.COUNTY_CODE === this.user.districtid1) {
            returnLayer.push(item);
          }
      });
      return returnLayer;
    },