openlayers 属性查询

目的

输入框输入属性值，点击查询。当输入值与图中属性值相等时，将查询出的图形高亮显示

实现

const querySource = new VectorSource();
const queryLayer = new VectorLayer({
        source: querySource,
        style: new Style({
          stroke: new Stroke({
          color: "#10C3FB",
          width: 4,
        }),
    }),
});
state.map.addLayer(queryLayer);


const search = () => {
      const featureRequest = new WFS().writeGetFeature({
        srsName: "EPSG:4326",
        featureNS: "http://localhost:8080/geoserver/test", // 命名空间URL
        featurePrefix: "test", // 工作区名字
        featureTypes: ["shi", "xian", "xiang"], // 查询的图层
        outputFormat: "application/json",
        filter: equalTo("name", state.casVal[state.casVal.length - 1]),
      });
      const str = new XMLSerializer().serializeToString(featureRequest);
      querySource.clear(true);
      // geoQueryPost是自定义axios请求
      geoQueryPost("http://localhost:8080/geoserver/test/wfs", str).then(
        (res) => {
          const features = new GeoJSON().readFeatures(res);
          querySource.addFeatures(features);
          state.map.getView().fit(querySource.getExtent(), { duration: 500 });
        }
      );
};

成果