Vue利用openlayers实现点击弹窗的方法详解

目录
  • 解释
  • 编写弹窗
  • 引入
  • openlayer使用弹窗组件
  • 点击事件

这个写的稍微简单一点就行了，其实呢，这个不是很难，主要是知道原理就可以了。

我想实现的内容是什么意思呢？就是说页面上有很多坐标点，点击坐标点的时候在相应的位置弹出一个框，然后框里显示出这个坐标点的相关数据。

解释

这个内容的其实就是添加一个弹窗图层，然后在点击的时候让他显示出来罢了。

编写弹窗

首先一点，我们这个弹窗需要自己写一下，具体的样式，展示的内容之类的，所以说写一个弹窗组件，然后在openlayer文件中引用加载。

比如我们创建一个 msgModel.vue

<template>
  <div class="msg-div">
    <p class="msg-title">{{data.title}}</p>
  </div>
</template>
<script>
  export default {
    props: ['data'],
    data() {
      return {

      }
    },
    methods: {

    },
  }
</script>
<style scoped>
.msg-div {
  min-width: 200px;
  padding: 0px;
  background-color: #fff;
  padding-bottom: 5px;
}
.msg-title {
  margin: 0;
  padding-left: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  color: #fff;
}
</style>

上边是我自己随便写的DEMO，然后具体按照你自己的来。

引入

然后在openlayer文件引入。

import msgModel from '@/views/modules/wjw/demo/msgModel'

然后像正常使用子组件一样加载一下就行。

    components: {
      msgModel,
    },

然后在界面加上。

<msg-model ref="msgForm" :data="data"></msg-model>

其中这个data是传递过去要展示的值。

openlayer使用弹窗组件

初始化地图的时候，我们把这个弹窗加载到openlayer里面。

	overlayForm = new Overlay({  // 创建一个图层
          element: this.$refs.msgForm.$el,   // 图层绑定我们上边的弹窗
          autoPan: true,
          autoPanAnimation: {
            duration: 250,
          }
        })
        overlayForm.setPosition(undefined)   // 设置弹窗位置，刚开始我们不让他显示，就是undefined就行
        map.addOverlay(overlayForm)  // 然后把弹窗的图层加载到地图上

上面的代码写完之后，地图是没有弹窗的，因为我没没有设置他的位置。

然后实现点击弹出来。

点击事件

比如说地图上有坐标点，我点击坐标点，然后弹出这个弹框，同时展示点击坐标点的数据信息。

	map.on('click', ev => {
          let pixel = ev.pixel   // 鼠标点击的位置，这个应该是像素
          let mouse = ev.coordinate  // 鼠标点击的坐标位置
          let feature = map.forEachFeatureAtPixel(pixel, (feature) => {
            return feature   // 查找出点击的哪个坐标
          })
          if (feature) {  // 如果是点击了坐标点
            this.data= feature.get('data')  // 获取坐标点的数据
            overlayForm.setPosition(mouse)  // 设置弹窗的位置
          } else {
            overlayForm.setPosition(undefined)  // 如果没有点击坐标点，就隐藏弹窗
          }
        })

好了，上边代码基本上就实现了点击坐标点弹出信息框功能，就不截图了，凑合看吧

到此这篇关于Vue利用openlayers实现点击弹窗的方法详解的文章就介绍到这了,更多相关Vue openlayers点击弹窗内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件 需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件 方法一,vue自定义指令 direc

  • vue如何通过点击事件弹出弹窗页面详解

    目录 步骤一 步骤二 总结 步骤一 创建一个弹窗页面,我们给该页面命名为dialogComponent,弹窗页面中要设置以下内容: <template> <!--1.首先,弹窗页面中要有el-dialog组件即弹窗组件,我们把弹窗中的内容放在el-dialog组件中--> <!--2.设置:visible.sync属性,动态绑定一个布尔值,通过这个属性来控制弹窗是否弹出--> <el-dialog title="弹窗" :visible.syn

  • vue实现点击按钮“查看详情”弹窗展示详情列表操作

    html: <template> <div> <Modal v-model="classStatus" width="900" title="详情:" :styles="{top: '80px'}"> <Table stripe class="task-table" :columns="columnsName4" :data="task

  • vue集成openlayers加载geojson并实现点击弹窗教程

    本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol 第三步:写业务代码 1.删除掉HelloWorld.vue 新建 olmap.vue组件 comp

  • Vue利用openlayers实现点击弹窗的方法详解

    目录 解释 编写弹窗 引入 openlayer使用弹窗组件 点击事件 这个写的稍微简单一点就行了,其实呢,这个不是很难,主要是知道原理就可以了. 我想实现的内容是什么意思呢?就是说页面上有很多坐标点,点击坐标点的时候在相应的位置弹出一个框,然后框里显示出这个坐标点的相关数据. 解释 这个内容的其实就是添加一个弹窗图层,然后在点击的时候让他显示出来罢了. 编写弹窗 首先一点,我们这个弹窗需要自己写一下,具体的样式,展示的内容之类的,所以说写一个弹窗组件,然后在openlayer文件中引用加载. 比

  • 利用Vue3实现可复制表格的方法详解

    目录 前言 最基础的表格封装 实现复制功能 处理表格中的不可复制元素 测试 前言 表格是前端非常常用的一个控件,但是每次都使用v-for指令手动绘制tr/th/td这些元素是非常麻烦的.同时,基础的 table 样式通常也是不满足需求的,因此一个好的表格封装就显得比较重要了. 最基础的表格封装 最基础基础的表格封装所要做的事情就是让用户只关注行和列的数据,而不需要关注 DOM 结构是怎样的,我们可以参考 AntDesign,columns dataSource 这两个属性是必不可少的,代码如下:

  • vue iview组件表格 render函数的使用方法详解

    如果要在标签中加入属性,例如img 中src属性   a标签中href属性  此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '8px' }, on

  • 对Vue table 动态表格td可编辑的方法详解

    项目中需求用到可编辑表格 下图这种 ↓ element UI 组件table表格中 增加template 模版 翻入input 根据业务逻辑增加全局变量 isEdit 是否变化. <el-table-column label="名称" width="140"> <template scope="scope"> <el-input v-if="scope.row.isEdit && scope

  • 利用Android实现光影流动特效的方法详解

    利用Android实现光影流动特效的方法详解

    目录 前言 MaskFilter 类简介 MaskFilter 的几种效果对比 光影流动 光影流动效果1 光影流动效果2 光影流动效果3 光影流动效果4:光影沿贝塞尔曲线流动 总结 前言 Flutter 的画笔类 Paint 提供了很多图形绘制的配置属性,来供我们绘制更丰富多彩的图形.前面几篇我们介绍了 shader 属性来绘制全屏渐变的聊天气泡背景.渐变流动的边框和毛玻璃效果的背景图片,具体可以参考下面几篇文章. 让你的聊天气泡丰富多彩! 手把手教你实现一个流动的渐变色边框 利用光影变化构建立

  • 利用Pytorch实现获取特征图的方法详解

    目录 简单加载官方预训练模型 图片预处理 提取单个特征图 提取多个特征图 简单加载官方预训练模型 torchvision.models预定义了很多公开的模型结构 如果pretrained参数设置为False,那么仅仅设定模型结构:如果设置为True,那么会启动一个下载流程,下载预训练参数 如果只想调用模型,不想训练,那么设置model.eval()和model.requires_grad_(False) 想查看模型参数可以使用modules和named_modules,其中named_modul

  • vant/vue实现小程序下拉刷新功能方法详解

    首先先把van-list控件放入列表项中 <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <list-nav :list="list"></list-nav> </van-list> data(){ return{ list: [],

  • 在 Vue 应用中使用 Netlify 表单功能的方法详解

    Netlify 带有内置表单处理功能,可以用来存储表单数据,下载 csv 文件,同时可以在接收到新的提交时发送邮件通知或者通过配置 webhook 发送请求. 它是通过在部署应用时直接解析 HTML 文件,识别 html 中的 form 标签来实现的,本文记录如何在一个 Vue 应用中使用表单功能. 开发 首先使用@vue/cli 新建一个 Vue 应用,完成一系列步骤后,运行应用 vue create my-awesome-app ... yarn serve 创建一个 form 表单 <!-

  • vue实现购物车抛物线小球动画效果的方法详解

    vue实现购物车抛物线小球动画效果的方法详解

    本文实例讲述了vue实现购物车抛物线小球动画效果的方法.分享给大家供大家参考,具体如下: 先上最终效果图,在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果 此文章只写了商品页面购物小球的实现,商品详情页原理类似 实现步骤: 1. 需要三个组件,最下方包含蓝色购物车的[购物车]组件shopCart.vue(子组件),每个[加减号]组成的购物小球组件cartControl.vue(子组件),和包含每个商品信息的goods组件goods.vue(父组件) 2. 原理,

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

随机推荐