Vue + Openlayers入门教程（二）：矢量要素搜索功能

一、技术栈

Vue 3 + Typescript +Openlayers 7 + GeoServer + Element plus

二、组件代码

代码部分均已注释

<template>
  <div class="searchDiv">
    <el-input
      class="searchInput"
      v-model="searchTerm"
      placeholder="请输入关键字"
    />
    <el-button class="dataButtonSearch" @click="searchFeatures">查询</el-button>
    <el-button class="dataButtonClear" @click="clearFeatures">清除</el-button>
  </div>
</template>
<script setup lang="ts">
import { Ref, ref } from "vue";
import { Map } from "ol";
import bus from "@/utils/bus.ts";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { Style, Stroke, Fill } from "ol/style";
import { Geometry } from "ol/geom";
import { Feature } from "ol";

let mapCopy: Map;
//监听map数据
bus.on("mapToChecked", (res: Map) => {
  // 传参由回调函数中的形参接受
  mapCopy = res;
});

const searchTerm: Ref<string> = ref<string>(""); //搜索框的关键字
let featuresList: Feature<Geometry>[] = [];    //定义一个数组用于接收矢量图层中GeoJSON的要素
let selectedFeaturesList: Feature<Geometry>[] = []; //定义一个数组用于接收查询搜索到的要素

//属性模糊查询
const searchFeatures = () => {
  if (searchTerm.value) {
    //输入关键字不为空
    selectedFeaturesList.length = 0; //初始化匹配选中的要素的数组
    const geojsonSource: VectorSource<Geometry> = mapCopy
      .getAllLayers()[2]
      .getSource() as VectorSource;
    featuresList = geojsonSource.getFeatures(); //获取矢量图层中GeoJSON的要素
    const regex: RegExp = new RegExp(searchTerm.value, "i"); //创建正则表达式
    featuresList.forEach((element) => {       //对要素进行遍历
      const name: string = element.getProperties().district; //接收要素名称
      if (regex.test(name)) {
        selectedFeaturesList.push(element); //将要素添加进要素数组
      }
    });
    drawFeatures(selectedFeaturesList); //调用绘制要素函数
    searchTerm.value = ""; //置空关键字
  }
};
// 绘制选择
let selectedVectorLayer: VectorLayer<VectorSource<Geometry>>; //创建一个VectorLayer变量
const drawFeatures = (list: Feature<Geometry>[]) => {
  if (list.length != 0) {
    //传入的要素数组不能为空
    selectedVectorLayer = new VectorLayer({
      source: new VectorSource({
        features: list,      //使用传入的要素数组
      }),
      style: new Style({     //创建选中样式
        fill: new Fill({
          color: "rgba(170, 198, 238)",
        }),
        stroke: new Stroke({
          color: "#ff0000",
          width: 2,
        }),
      }),
      properties: {  //任意可观察属性，即自定义属性
        title: "selectedLayer",
        name: "选择图层",
        type: "VectorLayer",
      },
    });
    mapCopy.addLayer(selectedVectorLayer); //将选中要素创建的图层添加进map
  }
};
//清除选择
const clearFeatures = () => {
  mapCopy.removeLayer(selectedVectorLayer); //利用removeLayer移除选中的图层
};
</script>
<style>
.searchDiv {
  display: flex;
  margin-right: 10px;
}
.dataButton,
.dataButtonSearch,
.dataButtonClear,
.searchInput {
  margin: 0px;
}
.el-button+.el-button{
  margin: 0px;
}
</style>
.dataButtonClear,
.searchInput {
  margin: 0px;
}
.el-button+.el-button{
  margin: 0px;
}
</style>