Openlayer随记

 绑定事件

鼠标点击事件：click

this.map.on("click", (e) => {
        console.log("e:", e);
      });

鼠标滑过要素显示手势

    // 设置鼠标划过矢量要素的样式
    pointerMove() {
      this.map.on("pointermove", (e) => {
        const isHover = this.map.hasFeatureAtPixel(e.pixel);
        this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
      });
    },

获取点击处地理空间坐标

      this.map.on("click", (e) => {
        console.log("e.coordinate:", e.coordinate);
      });

 获取点击处屏幕坐标

1. 通过e.pixel获取屏幕坐标（推荐）
2. 通过this.map.getEventPixel(e.originalEvent)获取屏幕坐标

      this.map.on("click", (e) => {
        console.log("e.pixel:", e.pixel);
        console.log(
          "this.map.getEventPixel(e.originalEvent)来获取屏幕坐标,屏幕左上角为[0,0]",
          this.map.getEventPixel(e.originalEvent)
        );
      });

 根据屏幕坐标获取当前所有要素

      this.map.on("click", (e) => {
        console.log(
          "this.map.getFeaturesAtPixel(e.pixel):",
          this.map.getFeaturesAtPixel(e.pixel)
        );
      });

  

 根据屏幕坐标遍历当前所有要素

      this.map.on("click", (e) => {
        let pixel = this.map.getEventPixel(e.originalEvent);//屏幕坐标。左上角为[0,0]
        //根据屏幕坐标遍历当前所有要素
        this.map.forEachFeatureAtPixel(pixel, (feature) => {
          console.log("feature:", feature);
        });
      });

点击要素获取该feature要素

    clickFeature() {
      this.map.on("click", (e) => {
        let feature = this.map.forEachFeatureAtPixel(e.pixel, (feature) => {
          return feature;
        });
        this.$message.success(feature.get("title"));
      });
    },

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

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

图层常见操作

1. 添加图层：map.addLayer(layer)
2. 移除图层：map.removeLayer(layer)
3. 清空图层上的所有要素：layer.getSource().clear()     

根据feature获取layer

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

参考：Openlayers通过feature获取Layer以及通过点获取线feature_feishusang的博客-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 {};
    },

删除传入的feature

基于上面的【根据feature获取layer】中的方法获取layer，再通过layer.getSource().removeFeature(feature)即可

this.getLayer(feature, this.map).getSource().removeFeature(feature);

根据geojson数据获取坐标集

    getCoordinatesByGeojson(geojsonData) {
      let coordinates = [];
      geojsonData.features.map((feature) => {
        coordinates = [...coordinates, feature.geometry.coordinates];
      });
      return coordinates;
    },

调整图标，文本，弹出框位置

通过layer获取source：

layer.getSource()

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

source.forEachFeature(feature=>{})

数据源source中获取features数组：

source.getFeatures()

返回feature数组

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)

飞行到指定geometry,并设置geometry的显示范围

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

飞行到指定范围

像切片影像这种没有geometry的，可以飞行到指定的显示范围，如下：

    this.map.getView().fit(
        [
          105.06825540402254, 28.82748694609426, 105.07362846356229,
          28.83261203911692,
        ],
        {
          duration: 1000,
          padding: [100, 100, 50, 100],
        }
      );

获取要素的坐标数组-feature.getGeometry().getCoordinates()

      this.draw.on("drawend", function (e) {
        console.log(" e:", e);
        console.log(" e.feature:", e.feature);
        console.log(" e.feature.getGeometry():", e.feature.getGeometry());
        console.log(
          " e.feature.getGeometry().getCoordinates():",
          e.feature.getGeometry().getCoordinates()
        );
      });