Openlayer中的Feature

注意：feature中不能直接getSource()，layer才可以直接getSource()。但是可以通过自己封装函数来实现通过feature获取layer。feature可以直接getGeometry()

基本用法：

<template>
  <div id="map" style="height: 100vh; width: 100vw"></div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";

import { Point, LineString, Polygon } from "ol/geom";
export default {
  data() {
    return {
      map: {},
      vectorLayer: {},
    };
  },
  created() {},
  mounted() {
    this.initMap();
    this.addLayer();
  },
  computed: {},
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [104.2979180563, 30.528298024],
          zoom: 18,
        }),
      });
    },
    addLayer() {
      this.vectorLayer = new VectorLayer({
        source: new VectorSource(),
      });
      this.vectorLayer.getSource().addFeature(
        //添加点图层
        new Feature({
          geometry: new Point([104.2979180563, 30.528298024]),
        })
        //添加线图层
        // new Feature({
        //   geometry: new LineString([
        //     [104.2979180563, 30.528298024],
        //     [104.2987389704, 30.527798338],
        //   ]),
        // })
        //添加面图层
        // new Feature({
        //   geometry: new Polygon([
        //     [
        //       [104.2979180563, 30.528298024],
        //       [104.2987389704, 30.527798338],
        //       [104.2974397847, 30.5265062907],
        //       [104.2979180563, 30.528298024],
        //     ],
        //   ]),
        // })
      );
      this.map.addLayer(this.vectorLayer);
    },
  },
};
</script>

引入：

import { Feature } from "ol";
import { Point, LineString, Polygon } from "ol/geom";

创建点要素Point：

    let feature = new Feature({
      geometry: new Point([104.2979180563, 30.528298024]),
    });

或者：

    let feature = new Feature(new Point([104.2979180563, 30.528298024]));

 

创建线要素LineString：

    let feature = new Feature({
      geometry: new LineString([
        [104.2979180563, 30.528298024],
        [104.2987389704, 30.527798338],
      ]),
    });

动态添加坐标：

let geometry = new LineString(); //线,Point 点,Polygon 面

let coordinate = [
        [105.6005859375, 30.65681556429287],
        [107.95166015624999, 31.98944183792288],
    ];

function addPonitToGeometry(arr) {
    for (let i = 0; i < arr.length; i++) {
        geometry.appendCoordinate(arr[i]);
    }
}
addPonitToGeometry(coordinate);

let LineStringFeature = new Feature(geometry); 

创建面要素Polygon：

    let feature = new Feature({
      geometry: new Polygon([
        [
          [106, 33],
          [108.03955078125, 32.2313896627376],
          [108.25927734375, 33.15594830078649],
          [106, 33],
        ],
      ]),
    });

给feature设置id

feature.setId(xxx)

获取feature的id

feature.getId()

通过feature的id获取feature

source.getFeatureById(xxx)

添加feature：

source.addFeature(xxx)

移除feature：

source.removeFeature(xxx)

数据源source中遍历所有要素feature：

source.forEachFeature(feature=>{})

数据源source中获取features数组：

source.getFeatures()

geojson中获取features数组：

import GeoJSON from "ol/format/GeoJSON";
  
 
    geojsonData: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [0, 0],
            },
          },
        ],
      },
 
let features = new GeoJSON().readFeatures(this.geojsonData)

给feature动态设置文本text

    change() {
      this.feature
        .getStyle()
        .getText()
        .setText("哈哈哈");
        
      this.feature.changed();
    }

给feature设置样式style

feature.setStyle(new Style(xxx))

 根据feature获取geometry

feature.getGeometry()

将feature置于视图中心-fly飞行

          this.map.getView().fit(feature.getGeometry(), {
            duration: 1000,
            padding: [100, 100, 100, 100],
          });

 根据feature获取geometry类型：

feature.getGeometry().getType()

如：Point、LineString、Polygon等 

给feature设置指定属性

feature.set("xx",xx)

给feature设置多个属性

feature.setProperties(Object)

获取feature中的指定属性

获取feature要素后，可以直接通过feature.get('属性名')来获取geojson中该feature的属性值

获取feature中的所有属性 

或者通过feature.getProperties()来获取geojson中该feature的所有的属性值，返回包含属性值的一个对象

获取feature的中点

let extent = feature.getGeometry().getExtent();
let center = ol.extent.getCenter(extent);

通过feature获取layer

适用于点要素和面要素，而线要素还有待研究。

参考：Openlayers通过feature获取Layer以及通过点获取线feature_openlayers getlayers_一又的博客-CSDN博客

   
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 {};
    },