当前位置：首页 > news >正文

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

news 2025/7/29 6:42:15

根据不同的状态governanceType显示不同的颜色
数据格式
在这里插入图片描述
首先清楚别的图层
this.removeLayer();

 // 创建一个映射，将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);