openlayer矢量查询并弹出框显示-基于overlay

阳光穿透心脏的1/2处 2021-09-01 03:07 526阅读 0赞

# 例1： #

效果图：

![20200826234948350.gif][]

代码实现：

<template>
      <div class="_leftTop">
        <div id="map"></div>
        <div id="popup" class="olPopup">
          <div style="text-align: right;">
            <span @click="overlayer.setPosition(undefined)" class="popupClose">X</span>
          </div>
          <div id="popup-content"></div>
        </div>
      </div>
    </template>
    
    <script>
    import "ol/ol.css";
    import { Map, View, Overlay } from "ol";
    import { TileWMS, OSM, Vector as VectorSource, XYZ } from "ol/source";
    import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
    
    import Select from "ol/interaction/Select";
    import { altKeyOnly, click, pointerMove } from "ol/events/condition";
    
    import {
      defaults as defaultControls,
      OverviewMap,
      FullScreen,
      ScaleLine,
      ZoomSlider,
      MousePosition,
      ZoomToExtent
    } from "ol/control";
    import GeoJSON from "ol/format/GeoJSON";
    import { Fill, Stroke, Style, Text } from "ol/style";
    export default {
      components: {},
      data() {
        return {
          map: {},
          select: {},
          overlayer: {}
        };
      },
      created() {},
      mounted() {
        this.initMap();
      },
      computed: {},
      methods: {
        initMap() {
          var layer_osm = new TileLayer({
            source: new OSM()
          });
          var layer_xyz = new TileLayer({
            // source: new OSM()
            source: new XYZ({
              url: "http://t3.tianditu.com/DataServer?T=img_w&tk=5a257cd2df1b3311723bd77b0de14baf&x={x}&y={y}&l={z}"
            })
          });
          var style = new Style({
            fill: new Fill({
              //矢量图层填充颜色，以及透明度
              color: "rgba(33,194,219,0.5)"
            }),
            stroke: new Stroke({
              //边界样式
              color: "rgba(100, 90, 209, 0.6)",
              width: 3
            })
          });
          var layer_sichuan = new VectorLayer({
            source: new VectorSource({
              url: "xxx",
              format: new GeoJSON()
            }),
            style: style
          });
          var layers = [layer_osm, layer_xyz, layer_sichuan];
          this.map = new Map({
            layers: layers,
            target: "map",
            view: new View({
              projection: "EPSG:4326",
              center: [115, 39],
              zoom: 4
            })
          });
    
          var container = document.getElementById("popup");
          var content = document.getElementById("popup-content");
          var popupCloser = document.getElementById("popup-close");
          // 2. 创建Overlay图层
          var overlayer = new Overlay({
            element: container,
            autuPan: true
          });
    
          this.select = new Select({
            condition: click
          });
          this.map.addInteraction(this.select);
          this.select.on("select", e => {
            if (e.selected.length != 0) {
              // 当前点的坐标
              var coordinate = e.mapBrowserEvent.coordinate;
              // 当前点的属性信息
              var properties = e.selected[0].getProperties();
              // 将信息填入弹出框
              content.innerHTML =
                 `
                  <div>name：${properties.name}</div>
                  <br>
                  <div>center：${properties.center}</div>
              `
              // 调整overlayer层的位置
              overlayer.setPosition(coordinate);
              // 将overlayer层添加到map当中
              this.map.addOverlay(overlayer);
            } else {
              overlayer.setPosition(undefined);
            }
            this.overlayer = overlayer;
          });
    
          // 设置鼠标划过矢量要素的样式
          this.map.on("pointermove", e => {
            var pixel = this.map.getEventPixel(e.originalEvent); //pixel为当前鼠标屏幕坐标，如 [0,0],[304,642]
            var feature = this.map.forEachFeatureAtPixel(pixel, function(feature) {
              return feature;
            });
            console.log("feature", feature);
            if (feature == undefined) {
              this.map.getTargetElement().style.cursor = "auto";
            } else {
              this.map.getTargetElement().style.cursor = "pointer";
            }
          });
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    ._leftTop {
      height: 80vh;
      width: 80vw;
      #map {
        height: 100%;
        width: 100%;
      }
      .olPopup {
        position: absolute;
        background-color: rgba(47, 57, 90, 0.678);
        padding: 15px;
        color: white;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 20px;
        left: 30px;
        min-width: 280px;
        .popupClose {
          cursor: pointer;
        }
        .popupClose:hover {
          color: rgba(255, 255, 255, 0.719);
        }
      }
    }
    </style>

其中url地址可见：[https://blog.csdn.net/qq\_40323256/article/details/107817399][https_blog.csdn.net_qq_40323256_article_details_107817399]

# 例2：推荐 #

基于<el-popover>

![20210330222537539.gif][]

<template>
      <div class="test">
        <div id="map"></div>
        <el-popover
          id="popup"
          placement="bottom"
          :title="title"
          width="100"
          trigger="click"
          v-model="visible"
        >
          <el-image :src="img" fit="fill" style="margin: 5px;" />
        </el-popover>
      </div>
    </template>
     
    <script>
    import "ol/ol.css";
    import { Map, View, Overlay } from "ol";
    import { TileWMS, OSM, Vector as VectorSource, XYZ } from "ol/source";
    import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
    
    import Select from "ol/interaction/Select";
    import { altKeyOnly, click, pointerMove } from "ol/events/condition";
    
    import {
      defaults as defaultControls,
      OverviewMap,
      FullScreen,
      ScaleLine,
      ZoomSlider,
      MousePosition,
      ZoomToExtent
    } from "ol/control";
    import GeoJSON from "ol/format/GeoJSON";
    import { Fill, Stroke, Style, Circle } from "ol/style";
    
    export default {
      components: {},
      data() {
        return {
          map: {},
          select: {},
          overlayer: {},
          visible: true,
          title: "标题",
          img: ""
        };
      },
      created() {},
      mounted() {
        this.initMap();
      },
      computed: {},
      methods: {
        initMap() {
          let layer_osm = new TileLayer({
            source: new OSM()
          });
          let layer_xyz = new TileLayer({
            source: new XYZ({
              url:
                "http://t3.tianditu.com/DataServer?T=img_w&tk=5a257cd2df1b3311723bd77b0de14baf&x={x}&y={y}&l={z}"
            })
          });
          let style = new Style({
            image: new Circle({
              radius: 20,
              fill: new Fill({
                //矢量图层填充颜色，以及透明度
                color: "rgba(33,194,219,0.5)"
              }),
              stroke: new Stroke({
                //边界样式
                color: "rgba(100, 90, 209, 0.6)",
                width: 3
              })
            })
          });
          let layer_sichuan = new VectorLayer({
            source: new VectorSource({
              url: "test.json", //这个json文件在public文件夹里
              format: new GeoJSON()
            }),
            style: style
          });
          let layers = [layer_osm, layer_xyz, layer_sichuan];
          this.map = new Map({
            layers: layers,
            target: "map",
            view: new View({
              projection: "EPSG:4326",
              center: [104.1, 30.7],
              zoom: 9
            })
          });
    
          // 2. 创建Overlay图层
          let overlayer = new Overlay({
            element: document.getElementById("popup"),
            autuPan: true
          });
    
          this.select = new Select({
            condition: click
          });
          this.map.addInteraction(this.select);
          this.select.on("select", e => {
            if (e.selected.length != 0) {
              let coordinate = e.mapBrowserEvent.coordinate;
              let properties = e.selected[0].getProperties();
    
              this.title = properties.name;
              this.img = properties.img;
    
              overlayer.setPosition(coordinate);
              this.map.addOverlay(overlayer);
            } else {
              overlayer.setPosition(undefined);
            }
            this.overlayer = overlayer;
          });
    
          // 设置鼠标划过矢量要素的样式
          this.map.on("pointermove", e => {
            let pixel = this.map.getEventPixel(e.originalEvent); //pixel为当前鼠标屏幕坐标，如 [0,0],[304,642]
            let feature = this.map.forEachFeatureAtPixel(pixel, function(feature) {
              return feature;
            });
            if (feature) {
              this.map.getTargetElement().style.cursor = "pointer";
            } else {
              this.map.getTargetElement().style.cursor = "auto";
            }
          });
        }
      }
    };
    </script>
     
    <style lang="scss" scoped>
    .test {
      height: 80vh;
      width: 80vw;
      #map {
        height: 100%;
        width: 100%;
      }
      #popup {
        position: absolute;
        background-color: rgba(47, 57, 90, 0.678);
        bottom: 20px;
        left: 30px;
      }
    }
    </style>

public/test.json:

{
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {
                    "name": "金毛",
                    "img": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4137348304,121327190&fm=26&gp=0.jpg"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        104.35089111328125,
                        30.8951543714447
                    ]
                }
            },
            {
                "type": "Feature",
                "properties": {
                    "name": "二哈",
                    "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1247111737,2344380133&fm=26&gp=0.jpg"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        103.765869140625,
                        30.59772974841203
                    ]
                }
            }
        ]
    }

注意：

当实例化一个Overlay后，这个Overlay里面的元素（这里是popup元素）在页面中就会默认被隐藏

![20201030141318600.png][]

将overlay隐藏：

this.overlayer.setPosition(undefined);

注销事件：

import { unByKey } from "ol/Observable"; //移除事件

![20201030141941530.png][]

![20201030142010556.png][]

[20200826234948350.gif]: /images/20210725/24740df058504f60b51e7876d71ba963.png
[https_blog.csdn.net_qq_40323256_article_details_107817399]: https://blog.csdn.net/qq_40323256/article/details/107817399
[20210330222537539.gif]: /images/20210725/02d062d84c484082be56060a1051b5fe.png
[20201030141318600.png]: /images/20210725/5ff4b118dfe949599ad832404a9227af.png
[20201030141941530.png]: /images/20210725/1c5e1b5d15a449949d10a174a8969f0b.png
[20201030142010556.png]: /images/20210725/04cce9a11a7b48f390522a06e2527603.png