openlayers上添加点击事件
有很多场景会有这个需求,就是我绘制了图标,点击图标需要展示一些对应的信息
openlayer的事件主要是通过监听来完成的,你所有的icon的点击事件都是可以通过监听map的点击事件来处理对应的逻辑的
话不多说直接上代码
// 监听singleclick事件,通过点击事件,获取对应点的feature图标
const that: any = this;
var overlay: any
var popupCloser = document.getElementById("popup-closer") as HTMLElement;
that.map.on('singleclick', function (e: any) {
var container = document.getElementById("popup") as HTMLElement;
var content = document.getElementById("popup-content") as HTMLElement;
overlay = new olOverlay({
//设置弹出框的容器
element: container,
//是否自动平移,即假如标记在屏幕边缘,弹出时自动平移地图使弹出框完全可见
autoPan: true
});
console.log(e.coordinate)
if (that.map.hasFeatureAtPixel(e.pixel)) {
var feature = that.map.getFeaturesAtPixel(e.pixel)
console.log(feature)
var pixel = that.map.getEventPixel(e.originalEvent);
that.map.forEachFeatureAtPixel(pixel, function (feature: any) {
//coodinate存放了点击时的坐标信息
var coodinate = e.coordinate;
//设置弹出框内容,可以HTML自定义
content.innerHTML = "<p>你点击的坐标为:" + coodinate + "</p>";
//设置overlay的显示位置
overlay.setPosition(coodinate);
//显示overlay
that.map.addOverlay(overlay);
});
}
}) popupCloser.addEventListener('click', function () {
overlay.setPosition(undefined);
});
你会发现里面很多dom的操作方式,没错,openlayer就是这么强大,就是你所有的渲染等都是对应的一个dom,就是div这种,不想pixijs等是通过canvas去绘制的
在此之前你还需要在你html里添加对应的dom元素,如下
<template>
<div class="main">
<div id="map" class="map">
<div id="mouse-position"></div>
</div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
</div>
</template>
顺表丢上css样式,哈哈
.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: "✖";
}
接下来看看效果
索嘎,点击事件完工
openlayers上添加点击事件的更多相关文章
- 如何在UILable上添加点击事件?
最近开始学习iOS开发,今天上来写第一个iOS笔记 昨天碰到一个需求,在UILable上添加点击事件,网上找了写资料,有人建议用透明的UIButton覆盖,有人建议写一个集成自UILable的类,扩展 ...
- vue router-link 上添加点击事件
在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...
- 关于JavaScript中的事件代理(例子:ul中无数的li上添加点击事件)
面试题:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy. 看到这个题目,我们一般首先想到的思路是,for循环,遍历1000次 ...
- iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...
- C#给整个panel添加点击事件的方法
首先要明白两点: panel直接添加点击事件无效 panel添加透明按钮覆盖无法实现 那么方法就是 在panel上添加pictureBox 设置 //充满整个panel pictureBox1.Doc ...
- a标签添加点击事件
a标签添加点击事件 CreateTime--2017年8月8日09:11:34 Author:Marydon 一.基础用法 方式一:(不推荐使用) <a href="javascr ...
- 使用for循环添加点击事件时,获取i值的方法
比如页面上有一个ul,数个li,现在给li添加点击事件. var li = document.getElementsByTagName("li"); for(var i = 0; ...
- [Swift通天遁地]一、超级工具-(1)动态标签:给UILabel文字中的Flag和url添加点击事件
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 家庭版记账本app进度之关于listview显示账单,并为其添加点击事件
这个主要学习是关于listview的学习. 怎样去自定义adapter,以及使用.自己创建文件,还有就是为listview的每一个子控件添加点击事件. 在整个过程中收获到的知识点如下: 一.对于数据库 ...
随机推荐
- B1013
python语言运行这道题有一个点运行超时,需要对求素数的算法进一步的优化 def isPrime(n): if n <= 1: return False i = 2 while i * i & ...
- (二十八)golang--二维数组
初始化: var array [2][3]int = [2][3]int{{0,0,0},{0,0,0}} var array [2][3]int = [...][3]int{{0,0,0},{0,0 ...
- CentOS7安装Oracle 11g数据库
转载:https://blog.csdn.net/lia17/article/details/82256565 rpm -ivh --force --nodeps *.rpm 强制装 rpm依赖包下载 ...
- HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法
块级元素div分析 1.外边距 margin 2.内边距 padding 3.边框 border Div的真实宽度=width+margin-left+margin-right+border*2+ ...
- css隐藏页面元素的方法
用css隐藏页面元素有许多种方法. 第一种方法[opacity: 0;] opacity属性通常用于设置一个元素的透明度,从另一个角度来看,如果透明度为0,也就从视觉上隐藏了该元素. 这个属性不是为改 ...
- 理解类、对象、实例、原型链以及继承 - WPF特工队内部资料
理解类.对象.实例.原型链以及继承 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- C# - VS2019调用ZXing.NET实现条码、二维码和带有Logo的二维码生成
前言 C# WinFrm程序调用ZXing.NET实现条码.二维码和带有Logo的二维码生成. ZXing.NET导入 GitHub开源库 ZXing.NET开源库githib下载地址:https:/ ...
- 2019年ASP.NET Core学习路线
- [先决条件] + C# + Entity Framework + ASP.NET Core + SQL 基础知识 - [通用开发技能] + 学习 GIT, 在 GitHub 中创建开源项目 + 掌 ...
- java--标准输入输出流
//读取键盘录入的数据写到a.txt //方式一 private static void method() throws IOException { //创建输入流对象 InputStream is ...
- Django基本知识
一.安装及使用 下载安装 命令行:pip3 install django==1.11.21 pycharm 创建项目 命令行: 找一个文件夹存放项目文件,打开终端: django-admin star ...