行政区高亮显示

vue结合openlayer使用

geoserver发布服务根据下拉框选择对应属性显示高亮，并根据中心坐标定位放大,
显示结果为：

加载整体的geoserver服务：

this.sxboundary = new ImageLayer({
          source: new ImageWMS({
            ratio: 1,
            url: geoserver图层工作区,
            params: {
              FORMAT: "image/png",
              VERSION: "1.1.0",
              SRS: "EPSG:4326",
              tiled: true,
              LAYERS: "图层名称",
            },
            crossOrigin: "Anonymous",
            serverType: "geoserver",
            projection: "EPSG:4326",
          }),
          visible: true,
          zIndex: 999,
          click: true,
        });
        this.map.addLayer(this.sxboundary);

根据下拉选择筛选属性加载边界：

	this.sxboundary = new ImageLayer({
            source: new ImageWMS({
              crossOrigin: "Anonymous",
              ratio: 1,
              url: "图层工作区",
              params: {
                FORMAT: "image/png",
                VERSION: "1.1.0",
                SRS: "EPSG:4326",
                tiled: true,
                LAYERS: "图层名",
                CQL_FILTER: 筛选的属性,
              },
              serverType: "geoserver",
              projection: "EPSG:4326",
            }),
            zIndex: 999,
            visible: true,
            type: "wms",
            click: true,
          });

添加高亮属性：

// 添加高亮
      addhigh() {
        let _this = this
        let view = _this.map.getView();
        let viewResolution = view.getResolution();
        let pointCoordinate = [_this.xdata, _this.ydata];//xdata,ydata选择行政区中心坐标
        _this._wfs_layer_ = new VectorLayer({
          source: new VectorSource(),
          style: new Style({
            fill: new Fill({
              //填充样式
              color: "rgba(255, 255, 255, 0.3)",
            }),
            stroke: new Stroke({
              //线样式
              color: "#0099FF",
              width: 3,
            }),
          }),
          visible: true,
          code: true,
          zIndex: 999,
        });
        const url = _this.sxboundary.getSource().getFeatureInfoUrl(
          pointCoordinate,
          viewResolution,
          view.getProjection(), {
            INFO_FORMAT: 'application/json',
          },
        );
        //进行中心定位并放大zoom
        if (_this.xdata == '' && _this.ydata == '') {
          _this.map.getView().animate({
            center: [],//整体geoserver图层的中心点
            zoom: 7.5,
            duration: 2000
          })
        }else{
        _this.map.getView().animate({
            center: _this.xdata, _this.ydata,
            zoom: 7.5,
            duration: 2000
          })
          }
          //根据选择属性添加高亮图层
        axios(url).then(res => {
          _this.currentfeature = new GeoJSON().readFeature(
            res.data.features[0].geometry
          );
          _this._wfs_layer_.getSource().addFeature(_this.currentfeature);
          _this.map.addLayer(_this._wfs_layer_);
        })
      },