弹框 v-overlay

在地图上显示并附加到单个地图位置的元素。就像module:ol/control/Control~Control (opens new window)，叠加层是可见的小部件。与控件不同，它们不在屏幕上的固定位置，而是与地理坐标相关联，因此平移地图将移动覆盖而不是控件。

import { VOverlay } from 'v-ol-map'

参数 props

参数	类型	默认值	描述
overlayId	String	overlay-id-${uuid()}	设置 overlay id。 overlay id 可以与该module:ol/Map~Map#getOverlayById (opens new window)方法一起使用。
element	String	overlay-el-${uuid()}	overlay元素。
offset	Array	[0,0]	定位overlay时使用的像素偏移量。数组中的第一个元素是水平偏移量。正值将覆盖向右移动。数组中的第二个元素是垂直偏移量。正值会使叠加层向下移动。
position	module:ol/coordinate~Coordinate (opens new window) / undefined	undefined	地图投影中的overlay位置。
positioning	module:ol/OverlayPositioning (opens new window)	'top-left'	定义overlay相对于其position属性的实际定位方式。可能的值为'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', 和'top-right'。
autoPan	module:ol/Overlay~PanIntoViewOptions (opens new window) / Boolean	false	调用时平移地图 setPosition，使overlay在当前视口中完全可见
className	String	'ol-overlay-container ol-selectable'	CSS 类名。

示例

<template>
  <v-map>
    <v-vector :features="features" @singleclick="onClickFeature"></v-vector>
    <v-overlay :overlay-id="overlay.id" :element="overlay.element" :position="overlay.position" :auto-pan="true" class="overlay">
      <template>
        <span>{{overlay.content}}</span>
        <span @click="overlay.position = undefined">close</span>
      </template>
    </v-overlay>
  </v-map>
</template>
<script>
export default {
  data(){
    return {
      overlay:{
        id:'overlay1',
        element:'overlay1',
        position:undefined,
        content: ''
      },
      features: [{
        id: 'point1',
        coordinates: [118.140448, 24.512917],
        properties: {
          name: 'feature1'
        }
      }]
    }
  },
  methods:{
    onClickFeature(evt, feature){
      this.overlay.content = feature.get('properties')?.name || ''
      this.overlay.position = feature.get('coordinates') || evt.coordinate
    }
  }
}
</script>