Vue+Openlayer中使用select选择要素

小鱼儿 2022-09-08 11:52 203阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_17_color_FFFFFF_t_70_g_se_x_16][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_17_color_FFFFFF_t_70_g_se_x_16 1][] 实现代码：

<template>
      <div id="map" style="width: 100vw; height: 100vh"></div>
    </template>
     
    <script>
    import "ol/ol.css";
    import { Map, View } from "ol";
    import { OSM, Vector as VectorSource } from "ol/source";
    import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
    import GeoJSON from "ol/format/GeoJSON";
    
    import Select from "ol/interaction/Select";
    import { click } from "ol/events/condition";
    
    export default {
      name: "gif",
      data() {
        return {
          map: {},
          layer: {},
          geojsonData: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                properties: {
                  title: "警报1",
                },
                geometry: {
                  type: "Point",
                  coordinates: [91.48879670091165, 37.83814884701121],
                },
              },
              {
                type: "Feature",
                properties: {
                  title: "警报2",
                },
                geometry: {
                  type: "Point",
                  coordinates: [99.19515576149941, 26.713646654711134],
                },
              },
              {
                type: "Feature",
                properties: {
                  title: "警报3",
                },
                geometry: {
                  type: "Point",
                  coordinates: [123.74363825288785, 44.363694825734726],
                },
              },
            ],
          },
          select: {},
        };
      },
      mounted() {
        this.initMap();
        this.pointerMove();
        this.selectFeature();
      },
      methods: {
        // 初始化地图
        initMap() {
          this.layer = new VectorLayer({
            source: new VectorSource({
              features: new GeoJSON().readFeatures(this.geojsonData),
            }),
          });
          this.map = new Map({
            target: "map",
            layers: [
              new TileLayer({
                source: new OSM(),
              }),
              this.layer,
            ],
            view: new View({
              projection: "EPSG:4326",
              center: [104.912777, 34.730746],
              zoom: 4.5,
            }),
          });
        },
        pointerMove() {
          // 设置鼠标划过矢量要素的样式
          this.map.on("pointermove", (e) => {
            const isHover = this.map.hasFeatureAtPixel(e.pixel);
            this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
          });
        },
        selectFeature() {
          this.select = new Select({
            condition: click, //将默认的singleClick声明为click，使点击无延迟
          });
          this.map.addInteraction(this.select);
          this.select.on("select", (e) => {
            let coordinate = e.mapBrowserEvent.coordinate; //获取选择的坐标
            let properties = e.selected[0].getProperties(); //获取当前要素的所有属性
    
            console.log("坐标：", coordinate);
            console.log(" properties:", properties);
          });
        },
      },
    };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210826114513611.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_Q1NETiBAfueWhg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_17_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/5b0f865d07214b93bd4a04bb54350402.png