Openlayer中的Feature

妖狐艹你老母 2022-09-09 10:54 640阅读 0赞

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

![20210906143936256.png][]![20210906143955403.png][]![20210906144017913.png][]

基本用法：

<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]),
        });

# 创建线要素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的属性值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_41_color_FFFFFF_t_70_g_se_x_16][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_35_color_FFFFFF_t_70_g_se_x_16][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_13_color_FFFFFF_t_70_g_se_x_16][]

# 获取feature中的所有属性  #

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

# 通过feature获取layer #

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

参考：[https://blog.csdn.net/feishusang/article/details/61616101][https_blog.csdn.net_feishusang_article_details_61616101]

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

[20210906143936256.png]: https://img-blog.csdnimg.cn/20210906143936256.png
[20210906143955403.png]: https://img-blog.csdnimg.cn/20210906143955403.png
[20210906144017913.png]: /images/20220829/441b61654a36474f9face2cd36e31e75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_41_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210826102456215.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBAfueWhg==,size_41,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_35_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210826102358246.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBAfueWhg==,size_35,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a0acc6d6345c4c46a889b530e94dcfd5.png
[https_blog.csdn.net_feishusang_article_details_61616101]: https://blog.csdn.net/feishusang/article/details/61616101