Openlayer随记

小灰灰 2022-09-06 00:14 296阅读 0赞

#  绑定事件 #

> 鼠标点击事件：**click**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

# 鼠标滑过要素显示手势 #

// 设置鼠标划过矢量要素的样式
        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);
          });

![20210824091851992.png][]

#  获取点击处屏幕坐标 #

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

![2021081910305691.png][]

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

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

![20210819103333298.png][]

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

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

![20210819102501406.png][]

# 点击要素获取该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的属性值

![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.getProperties()**来获取geojson中该feature的所有的属性值，返回包含属性值的一个对象

# 图层常见操作 #

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

# 根据feature获取layer #

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

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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_14_color_FFFFFF_t_70_g_se_x_16][]![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_17_color_FFFFFF_t_70_g_se_x_16][]![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20220829/ae64339a741649789b8f802e1a0a0c80.png
[20210824091851992.png]: /images/20220829/78b99bfac1384ead9a1c8338c2d38a13.png
[2021081910305691.png]: /images/20220829/11b3842705284074af14e91b78e6b577.png
[20210819103333298.png]: /images/20220829/51f58ddd7b3d41e5929896b5c16ddabc.png
[20210819102501406.png]: /images/20220829/393283f4db62494198d757617fe267ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_41_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/29c91e973f49415cb2127a1ed70bec04.png
[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/103480cfaa9b495080ea70561ad5a471.png
[Openlayers_feature_Layer_feature_feishusang_-CSDN]: https://blog.csdn.net/feishusang/article/details/61616101
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210827100112799.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAfueWhg==,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210827100154868.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAfueWhg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/8251985f8d8a438683f67df5c3cc92a7.png