openlayers select 鼠标点击要素指定图层高亮

一、概述

使用openlayers 点击要素高亮显示方法可以使用select来实现，对于一个页面显示多个图层如何进行指定图层进行高亮，其他图层不高亮，select也提供相应的方式

二、点击高亮的实现方法

（1）es6的方式按钮加载模块

import { Select } from "ol/interaction";
import { click } from "ol/events/condition";

（2）实现高亮

 let selectClick = new Select({
        // 事件类型
        condition: click,
        // 点击后的样式
        style:  new Style({
	                    stroke: new Stroke({
	                        color: 'rgba(255,92,92, 1)',
	                        // lineDash: [5],
	                        width: 10
	                    })
	                }),
	                
      });
    map.addInteraction(selectClick);

三、扩展进行指定图层进行高亮显示

（1）方法一，采用layers属性，指定起作用的图层

 let selectClick = new Select({
        // 事件类型
        condition: click,
        layers:[this.pipline.layer ],
        // 点击后的样式
        style: function(fea, res){
          
          console.log("----------",fea,res,selectClick.getLayer(fea))
          return [
	                new Style({
	                    stroke: new Stroke({
	                        color: 'rgba(255,92,92, 0.2)',
	                        // lineDash: [5],
	                        width: 10
	                    })
	                }),
	                new Style({
	                    stroke: new Stroke({
	                        color: "rgba(255,92,92, 1)",
	                        // lineDash: [5],
	                        width: 4
	                    }),
	                })
	            ]
        }
      });
    map.addInteraction(selectClick);

(2)方法二：根据选择的要素使用 getLayer的方式获取每种图层的唯一标识值进行分辨图层类型

   let selectClick = new Select({
        // 事件类型
        condition: click,
        layers:[this.pipline.layer ],
        // 点击后的样式
        style: function(fea, res){
          
          let layer = selectClick.getLayer(fea)
          switch（layer .id）{
            case "管网":
          return [
	                new Style({
	                    stroke: new Stroke({
	                        color: 'rgba(255,92,92, 0.2)',
	                        // lineDash: [5],
	                        width: 10
	                    })
	                }),
	                new Style({
	                    stroke: new Stroke({
	                        color: "rgba(255,92,92, 1)",
	                        // lineDash: [5],
	                        width: 4
	                    }),
	                })
	            ]
            break;
           }
        }
      });
    map.addInteraction(selectClick);