Openlayers的交互功能（二）——Feature

• 上一篇文章介绍了Openlayers的基本情况和初始化地图的流程，在对图斑进行操作之前，要先了解什么是图斑，也就是Feature。

一、Feature

1.Feature是什么？

• Feature是Openlayers的基础概念之一，用来表示地图上的对象。
• 在Openlayers中，Feature是一个JavaScript对象，其最基本的属性是geometry和attributes，geometry表示Feature的空间位置，attributes表示Feature的属性信息。

2.Feature的Geometry

• geometry属性表示Feature的空间位置，它可以是点（Point）、线（LineString）、多边形（Polygon）或集合（MultiPoint、MultiLineString、MultiPolygon）。在使用时，需要根据实际情况选择合适的geometry。
• 以Point为例，我们可以通过下面的代码创建一个点的Feature：

  vectorLayer.getSource().addFeature(
    new Feature({
      geometry: new Point([125.35, 43.88]),
    })
  )

• 下面两段代码分别是加入线图层和面图层

  vectorLayer.getSource().addFeature(
    // 添加线图层
    new Feature({
      geometry: new LineString([
        [125.3579180563, 43.888298024],
        [125.3587389704, 43.887798338],
      ]),
    })
  )

  vectorLayer.getSource().addFeature(
    // 添加面图层
    new Feature({
      geometry: new Polygon([
        [
          [125.3579180563, 43.888298024],
          [125.3587389704, 43.887798338],
          [125.3574397847, 43.8865062907],
          [125.3579180563, 43.888298024],
        ],
      ]),
    })
  )

需要注意的是：面图层的第一个顶点坐标应该和最后一个顶点坐标是一样的，也就是说他们两个应该是一个点。否则无法构成一个闭合图形。

3.对Feature的操作

1. 添加Feature

source.addFeature(feature)

2. 移除Feature

source.removeFeature(feature)

3. 获取所有Feature

source.getFeatures()

函数会返回当前source中的所有Feature，返回值是一个数组

4. 通过Feature获取Layer（参考其他博主实现）

   
import {Vector as VectorSource } from "ol/source";
 
 //根据feature获取layer
    getLayer(feature = {}, map = {}) {
      let layers = map.getLayers().getArray();
      for (let i in layers) {
        let source = layers[i].getSource();
        if (source instanceof VectorSource) {
          let features = source.getFeatures();
          if (features.length > 0) {
            for (let j in features) {
              if (features[j] === feature) {
                return layers[i];
              }
            }
          }
        }
      }
      return {};
    },

二、结语

• 本文对Feature进行了简单的介绍，以及一些常用的对Feature的操作，后续将继续更新Feature的添加、选中、删除、平移、框选平移等操作。

• 如有错误，请批评指正！

• 欢迎关注星林社区，文章将同步更新在星林社区中！