OpenLayers Popup（浮窗）的Vue组件

最新推荐文章于 2024-04-28 08:04:37 发布

原创

最新推荐文章于 2024-04-28 08:04:37 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#typescript

这篇博客介绍了如何基于OpenLayers官方的popup示例，使用Vue2和TypeScript创建一个简单的地图弹窗组件。示例中展示了如何在Vue组件中创建和定位弹窗，并且绑定了关闭按钮的点击事件。此外，还展示了如何在地图单击事件中显示坐标信息，并将这些信息展示在弹窗内。示例代码简洁，但样式仍有优化空间，未来考虑集成ElementUI等前端框架。

根据openlayers官方的popup实例改的，使用Vue2+TS，功能比较简单

OLPopop.vue

<template>
  <div ref="container" class="ol-popup">
    <a href="#" ref="closer" class="ol-popup-closer"></a>
    <slot></slot>
  </div>
</template>

import Overlay from "ol/Overlay";
import {
   
    Component, Vue, Ref } from "vue-property-decorator";

@Component
export default class OLPopup extends Vue {
   
   
  @Ref("container") container!: HTMLDivElement;
  @Ref("closer") closer!: HTMLDivElement;
  overlay = new Overlay({
   
   });
  private mounted() {
   
   
    this.overlay = n