geoserver服务点击某一元素显示高亮

geoserver服务点击某一元素显示高亮

针对vue结合openlayers的使用点击geoserver显示弹框文章中显示高亮的优化，弹框popup待优化

let self_map = this.map;
        self_map.on("singleclick", function(evt) {
        //点击只一个元素高亮
          if (this._wfs_layer_) {
            self_map.removeLayer(this._wfs_layer_);
          }
          let view = self_map.getView();
          let viewResolution = view.getResolution();
          let clicks = [];
          self_map.forEachLayerAtPixel(evt.pixel, function(l, b) {
            if (l.get("click") && l.getVisible()) {
              clicks.push(l);
            }
          });
          try {
            var l = clicks.shift();
            var url = l
              .getSource()
              .getFeatureInfoUrl(
                evt.coordinate,
                viewResolution,
                view.getProjection(), {
                  INFO_FORMAT: "application/json",
                }
              );
            axios(url).then(res => {
              console.log(res)
              let feature = new GeoJSON().readFeature(
                res.data.features[0].geometry
              );
              //创建矢量图层点击样式
              _wfs_source = new VectorSource();
              this._wfs_layer_ = new VectorLayer({
                source: _wfs_source,
                style: new Style({
                  fill: new Fill({
                    //填充样式
                    color: "rgba(255, 255, 255, 0.2)",
                  }),
                  stroke: new Stroke({
                    //线样式
                    color: "#0099FF",
                    width: 3,
                  }),
                }),
                visible: true,
                code: true,
                zIndex: 50,
              });
              self_map.addLayer(this._wfs_layer_);
              _wfs_source.addFeature(feature);
            })
          } catch (e) {
            console.log("未点到数据");
            //TODO handle the exception
          }
        })