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
});
创建一个名为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: "装备",
它将使用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);
创建一个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>
在下面的代码中，我们将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);
      });
编写一个函数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());
                                    本篇讲一下Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置，会像高德地图一样触发浏览器左上角位置权限，确认后就可以获取位置并控制地图中心点到用户所在位置。适用于Edge、firefox和移动端浏览器，pc端的chrome即使允许获取位置也会显示超时无法获取到位置。
                                    不论是google地图，异或是百度等其他地图，都有个搜索功能，可以填写搜索词做一个定位。本文调用一个插件，在openlayers中实现地理位置搜索定位，虽不是非常好用，但也能起到一定的帮助。
                                    为地图开发人员提供服务的专业地图工具。随机数据：框选范围，生成点线面随机数据。标绘数据：选择点线面，在地图上标绘数据；也可以通过搜索地名进行定位后操作。投影数据转换、火星百度坐标转换、GPS 坐标转换：输入WKTGeoJson格式数据，选择投影坐标。平滑曲线、曲面，缓冲，抽稀：输入WKTGeoJson格式数据。