openLayers实战(三)：图层layer与元素feature

在第一篇中，已经建立了map、view、source、layer之间的关系，并正确渲染，这里展开说明如何正确的创建图层和元素

创建图层与删除图层

创建时需要分配唯一id，可以自动分配，手动分配，为了删除的时候方便，这里推荐手动分配

// 创建图层
var layerId = 'myLayer'; // 设置图层 ID

var layer = new ol.layer.Vector({
  id: layerId, // 分配图层 ID
  source: new ol.source.Vector(),
  // 其他图层属性...
});

// 添加图层至地图
this.mapObj.addLayer(layer);

// 删除图层
var targetLayer = this.mapObj.getLayerById(layerId); // 通过图层 ID 获取目标图层

if (targetLayer) {
  map.removeLayer(targetLayer); // 使用获取到的图层进行删除操作
}

需要注意的是，在删除图层之前，使用 map.getLayerById 方法确保获取到了有效的图层引用。如果图层不存在或 ID 不匹配，可能会返回 undefined 或 null。

创建Feature

在创建 OpenLayers 数据源时，可以为每个 feature 分配唯一的 ID。这样做可以方便您在后续的操作中准确地引用和管理不同的 feature。下面是在创建数据源时如何为 feature 创建 ID 的方法：

方法一：手动指定 ID
可以在创建 feature 时手动指定一个唯一的 ID。例如：

var feature = new ol.Feature({
  geometry: new ol.geom.Point([0, 0]), // 假设这是 feature 的几何信息
  // 其他属性...
});

feature.setId('myUniqueID'); // 手动设置唯一的 ID

可以根据自己的需求选择任何形式的唯一 ID，例如自动生成的字符串、数据库中的唯一标识符等。

方法二：自动生成 ID
如果不想手动指定 ID，OpenLayers 也提供了自动生成 ID 的方法。在创建 feature 时，OpenLayers 会自动为其分配一个唯一的 ID。例如：

var feature = new ol.Feature({
  geometry: new ol.geom.Point([0, 0]), // 假设这是 feature 的几何信息
  // 其他属性...
});

// feature.getId() 会返回自动生成的唯一 ID

这种方法通过使用 OpenLayers 生成的唯一标识符为 feature 分配一个 ID，可以使用 `feature.getId()` 来访问这个 ID。

Feature添加到图层上

// 添加地理坐标点
    addPoint(location, src, id) {
      // 地理坐标数组
      const pointData = [location];

      pointData.map((item) => {
        // 创建点
        const point = new Feature({
          geometry: new Point([item.longitude, item.latitude]),
          data: item,
        });
        // 点的样式
        const iconStyle = new Style({
          image: new Icon({
            color: "#ffffff",
            crossOrigin: "anonymous",
            src: src,
          }),
        });
        // 设置样式
        point.setStyle(iconStyle);
        // point.setId(id);
        this.mapPointList.push(point);
      });

      // 创建geojson据源
      this.pointLayerSource = new VectorSource({ features: this.mapPointList });
      // 创建图层 并加载数据
      this.pointLayer = new VectorLayer({
        source: this.pointLayerSource,
        // 图层的id，这也非常重要
        id: id,
      });
      // 将图层添加地图上
      this.mapObj.addLayer(this.pointLayer);
    },

根据feature对象来删除feature

// 获取当前点击点的 feature，如果存在就移除
const feature = this.pointLayerSource.getFeatureById("curIconFeatureId");

if(feature) {
   this.pointLayerSource.removeFeature(feature);
}

根据图层id来获取图层

getLayerById 函数接受一个参数 layerId，是要查找的图层的ID。首先，通过调用地图对象的 getLayers 方法获取所有的图层数组。然后，遍历数组，并通过使用 get 方法来获取图层的ID属性，与传入的 layerId 进行比较。如果找到匹配的图层ID，就返回该图层对象。如果未找到匹配的图层，将返回 null。

getLayerById(layerId) {
  const layers = this.mapObj.getLayers().getArray();
  for (let i = 0; i < layers.length; i++) {
    if (layers[i].get('id') === layerId) {
      return layers[i];
    }
  }
  return null;
}

举例：

点击地图的时候，将点的坐标作为元素添加到地图上，确保每次只存在一个最新的点 

  mounted() {
    // 设置 默认的中心点坐标
    const location = { longitude: 121.70185, latitude: 31.298777 };
    this.addPoint(location, this.markerCenterIcon, "centerIconLayer");

    this.mapObj.on("click", (evt) => {
      // 获取当前点击点的 feature，如果存在就移除
      const feature = this.pointLayerSource.getFeatureById("curIconFeatureId");
      if(feature) {
        this.pointLayerSource.removeFeature(feature);
      }
      this.addFeature(evt, this.markerCurrentIcon, "curIconFeatureId");
    });
  },

methods: {
    // 地图点击事件
    addFeature(evt, src, id) {
      this.currentCoodinate = evt.coordinate;
      if (!Array.isArray(this.currentCoodinate)) {
        return;
      }
      const location = {
        longitude: this.currentCoodinate[0],
        latitude: this.currentCoodinate[1],
      };
      // 创建点击后的元素
      const point = new Feature({
        geometry: new Point([location.longitude, location.latitude]),
        data: location,
      });
      // 点的样式
      const iconStyle = new Style({
        image: new Icon({
          color: "#ffffff",
          crossOrigin: "anonymous",
          src: src,
        }),
      });
      // 设置样式
      point.setStyle(iconStyle);
      point.setId(id);
      this.addFeatureToLayer(point, "centerIconLayer");
    },
    // 在图层上新增元素
    addFeatureToLayer(feature, layerId) {
      const layer = this.getLayerById(layerId);
      const layerSource = layer.getSource();
      layerSource.addFeature(feature);
    },
    // 根据图层id来获取图层
    getLayerById(layerId) {
      const layers = this.map.getLayers().getArray();
      for (let i = 0; i < layers.length; i++) {
        if (layers[i].get("id") === layerId) {
          return layers[i];
        }
      }
      return null;
    },
}