openlayer根据不同的状态显示不同的图层颜色

根据不同的状态governanceType显示不同的颜色
数据格式
首先清楚别的图层
this.removeLayer();
javascript 复制代码
 // 创建一个映射，将governanceType映射到颜色
  const colorMapping1 = {
    '18': 'rgba(126, 97, 18, 0.5)',  // 假设治理类型1对应颜色选项0
    '19': 'rgba(160, 133, 254, 0.5)',  // 假设治理类型2对应颜色选项1
    '15': 'rgba(55, 43, 65, 0.5)',  // 假设治理类型3对应颜色选项2
    '20': 'rgba(178, 111, 173, 0.5)',  // 假设治理类型3对应颜色选项2
    '1': 'rgba(150, 209, 16, 0.5)',  // 假设治理类型4对应颜色选项3
    '3': 'rgba(49, 77, 92, 0.5)',  // 假设治理类型5对应颜色选项4
    '14': 'rgba(248, 49, 176, 0.5)',  // 假设治理类型6对应颜色选项5
    '16': 'rgba(141, 13, 63, 0.5)',  // 假设治理类型7对应颜色选项6
    '17': 'rgba(6, 206, 10, 0.5)',  // 假设治理类型7对应颜色选项6
    '2': 'rgba(37, 189, 131, 0.5)',  // 假设治理类型7对应颜色选项6
    // 其他治理类型映射
  };
  const colorMapping = {
    '18': 'rgba(126, 97, 18, 1)',  // 假设治理类型1对应颜色选项0
    '19': 'rgba(160, 133, 254, 1)',  // 假设治理类型2对应颜色选项1
    '15': 'rgba(55, 43, 65, 1)',  // 假设治理类型3对应颜色选项2
    '20': 'rgba(178, 111, 173, 1)',  // 假设治理类型3对应颜色选项2
    '1': 'rgba(150, 209, 16, 1)',  // 假设治理类型4对应颜色选项3
    '3': 'rgba(49, 77, 92, 1)',  // 假设治理类型5对应颜色选项4
    '14': 'rgba(248, 49, 176, 1)',  // 假设治理类型6对应颜色选项5
    '16': 'rgba(141, 13, 63, 1)',  // 假设治理类型7对应颜色选项6
    '17': 'rgba(6, 206, 10, 1)',  // 假设治理类型7对应颜色选项6
    '2': 'rgba(37, 189, 131, 1)',  // 假设治理类型7对应颜色选项6
    // 其他治理类型映射
  };

  // 已通过图层
  this.vectorLayer = new VectorLayer({
    source: new VectorSource({
      features: [], // 初始化features数组
    }),
    style: (feature) => {
      const governanceType = feature.get('governanceType'); //通过get方法获取feature里面governanceTyped属性值
      console.log(governanceType,'governanceType')
      return new Style({
        fill: new Fill({
          color: colorMapping1[governanceType] || this.drawColorOptions[2].fill, // 默认颜色
        }),
        stroke: new Stroke({
          color: colorMapping[governanceType],
          //  color: this.drawColorOptions[2].stroke,
          width: 2,
        }),
      });
    },
    visible: true,
    zIndex: 999,
  });
  let data = {
    type: "FeatureCollection",
    features: list
      .filter((item) => item.operationState === 1)
      .map((item) => {
        return {
          type: "Feature",
          geometry: item.pondGeomJson,
          properties: {
            governanceType: item.governanceType, // 确保governanceType在properties中
          },
        };
      }),
  };
  console.log(data,'data')
  let features = new GeoJSON().readFeatures(data);
  this.vectorLayer.getSource().addFeatures(features);
  this.map.addLayer(this.vectorLayer);