ol之弹窗

Posted 2021-02-27 s313139232

ol之弹窗

openlayers的弹窗主要通过 Overlay 添加。

1.首先需要创建弹框dom：

<div id="popup" ref="popup" class="ol-popup">
      <a href="#" ref="popup-closer" class="ol-popup-closer" @click="closeOverlay"></a>
      <div ref="popup-content">
        坐标：{{x}}，{{y}}
      </div>
</div>

2.创建弹框对象

this.overlay = new ol.Overlay({
        // 设置弹出框的容器
        element: this.$refs.popup,
        // 是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
        autoPan: true
      })

3.当点击地图时打开弹框

this.map.on(‘click‘, (e) => {
        // 获取弹框显示位置
        let coodinate = e.coordinate
        // 设置overlay的显示位置
        this.overlay.setPosition(coodinate)
        // 显示overlay
        this.map.addOverlay(this.overlay)
      })

4.设置弹框样式

<style scoped lang="scss">
.ol-popup {
  position: absolute;
  background-color: #eeeeee;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: #eeeeee;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "?";
}
</style>

View Code

5.此时点击地图时即可看到弹框，但是一般弹框的展示是有展示条件的，如点击点显示、点击面显示。

6.如果点击的是一个要素图层，即可通过  forEachFeatureAtPixel  方法获取到点击的要素，并获取点击要素的属性值，将属性值显示在弹框上。

this.map.on(‘click‘, (e) => {
        // 在点击时获取像素区域
        let pixel = this.map.getEventPixel(e.originalEvent)
        this.map.forEachFeatureAtPixel(pixel, (feature) => {
          // coodinate存放了点击时的坐标信息
          let coodinate = e.coordinate
          let lonlat = ol.proj.toLonLat(coodinate)
          this.x = lonlat[0]
          this.y = lonlat[1]
          // 设置overlay的显示位置
          this.overlay.setPosition(coodinate)
          // 显示overlay
          this.map.addOverlay(this.overlay)
        })
      })

7.如果点击的是一个矢量数据发布的tile图层，则需要通过要素查询去获取电机的要素进行高亮、获取数据等操作。

 

注意：需要注意坐标系和投影的问题。

 

 

 

钻研不易，转载请注明出处、、、、、、