openlayers4实现地图POI信息检索和定位显示功能

1. 创建地图对象，并将其加载到HTML页面中。可以使用OpenLayers的Map类来创建地图对象，并将其显示在指定的容器中。例如，以下代码创建了一个地图对象并将其加载到id为“map”的DIV元素中：

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});

2. 创建一个名为poiData的数组，其中包含5个POI数据，每个数据包含名称、经度和纬度属性。

var poiData = [
        { name: "POI1", lon: 116.254175, lat: 39.959698, type: "飞机" },
        {
          name: "POI2",
          lon: 116.257616188910561,
          lat: 39.968835485021259,
          type: "人员",
        },
        {
          name: "POI3",
          lon: 116.257679006681542,
          lat: 39.968576599663663,
          type: "装备",
        },
        {
          name: "POI4",
          lon: 116.266000739280997,
          lat: 39.966299136237829,
          type: "飞机",
        },
        {
          name: "POI5",
          lon: 116.25306436462462,
          lat: 39.969261735072706,
          type: "装备",
        },
      ];

3. 它将使用map对象的addLayer方法创建一个名为vectorLayer的矢量图层，并将其添加到地图中。vectorLayer矢量图层使用poiData数组中的数据来创建Feature对象

var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: poiData.map(function (poi) {
            return new ol.Feature({
              geometry: new ol.geom.Point([poi.lon, poi.lat]),
              name: poi.name,
              type: poi.type,
            });
          }),
        }),
      });

map.addLayer(vectorLayer);

4. 创建一个HTML搜索框元素，并添加到您的页面中

<input type="text" id="search-input" placeholder="Search for POI" />
<button id="search-button">搜索</button>
//如果需要实现多种类型选择，则可以将下拉框的选项修改为不同类型的选项，例如
<select id="search-select">
     <option value="all">全部</option>
     <option value="person">人员</option>
     <option value="aircraft">飞机</option>
    <option value="equipment">装备</option>
</select>

5. 在下面的代码中，我们将searchInput元素和一个按钮元素searchButton进行了绑定，当按钮被点击时，我们获取搜索框中的文本，并使用filter函数从poiData数组中筛选出符合条件的POI。

//需要下拉框的获取searchSelect，单纯搜索不需要哈
var searchSelect = document.getElementById("search-select");
var searchInput = document.getElementById("search-input");
var searchButton = document.getElementById("search-button");
//不需要下拉框不用进行匹配直接下面代码即可
searchButton.addEventListener('click', function() {
  var searchText = searchInput.value.toLowerCase();
  var filteredPoiData = poiData.filter(function(poi) {
    return poi.name.toLowerCase().indexOf(searchText) !== -1;
  });
  
  // 调用定位函数
  locatePoi(filteredPoiData);
//在搜索按钮的点击事件中，根据下拉框的选项和搜索框的输入，同时对类型和名称进行匹配
      searchButton.addEventListener("click", () => {
        var searchType = searchSelect.value;
        var searchText = searchInput.value.toLowerCase();

        var filteredPoiData = poiData.filter((poi) => {
          if (searchType === "all") {
            return (
              poi.name.toLowerCase().indexOf(searchText) !== -1 ||
              poi.type.toLowerCase().indexOf(searchText) !== -1
            );
          } else if (searchType === "person") {
            return (
              poi.type === "人员" &&
              poi.name.toLowerCase().indexOf(searchText) !== -1
            );
          } else if (searchType === "aircraft") {
            return (
              poi.type === "飞机" &&
              poi.name.toLowerCase().indexOf(searchText) !== -1
            );
          } else if (searchType === "equipment") {
            return (
              poi.type === "装备" &&
              poi.name.toLowerCase().indexOf(searchText) !== -1
            );
          }
        });

        // 调用定位函数
        this.locatePoi(filteredPoiData);
      });

6. 编写一个函数locatePoi，该函数将接受一个POI数组作为参数，并将这些POI显示在地图上并将地图视图定位到这些点中心。以下是一个实现locatePoi函数的示例代码：

   locatePoi(poiArray) {
      // 移除之前的矢量图层
      this.map.getLayers().forEach((layer) => {
        if (layer.get("name") === "poi-layer") {
          this.map.removeLayer(layer);
        }
      });

      // 创建一个新的矢量图层，并添加到地图上
      var vectorSource = new ol.source.Vector();
      var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        name: "poi-layer",
      });
      this.map.addLayer(vectorLayer);

      // 将POI添加到矢量图层上
      poiArray.forEach(function (poi) {
        var feature = new ol.Feature({
          geometry: new ol.geom.Point([poi.lon, poi.lat]),
          name: poi.name,
          type:poi.type
        });
        vectorSource.addFeature(feature);
      });

      // 将地图视图定位到POI中心
      if (poiArray.length > 0) {
        var poiCoords = poiArray.map(function (poi) {
          return [poi.lon, poi.lat];
        });
        // 获取所有POI点位的坐标范围的，它将POI点位的坐标数组 poiCoords 作为参数传递给 ol.extent.boundingExtent() 方法，该方法将返回一个由最小和最大坐标组成的数组，这个数组就代表了所有POI点位的坐标范围。该方法可以用于调整地图视图，使所有POI点位都能在地图范围内可见。
        var extent = ol.extent.boundingExtent(poiCoords);
        var view = this.map.getView();
        //使用view.fit函数将地图视图定位到POI的中心。
        view.fit(extent, this.map.getSize());
      }
    },