Openlayer 3 的点击弹出框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/ol.css" type="text/css">
<script src="js/jquery-1.11.3.js"></script>
<script src="js/ol.js"></script>
<style>
#map{
width:100%;
height:100%;
}
.label,.title{
background: #000;
color:#fff;
padding:3px;
}
.popup-content{
background: #fff;
padding:3px;
}
.ol-popup-closer {
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "x";
color: #fff;
}
</style> </head>
<body>
<div id="map"></div>
<script>
$(document).ready(function(){
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({})
]),
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([106.20, 37.30], 'EPSG:4326', 'EPSG:3857'),
maxZoom: 19,
zoom: 5
}),
logo: false
});//地图初始化
initMenuAndAllCar()
var carPositionLayer = new ol.layer.Vector({
style: function (feature, resolution) {
var online = feature.get("online");
var status;
switch(online){
case "0":
status= '离线';
break;
case "1":
status= '在线';
break;
case "无法获取状态":
status= online;
break;
}
var opacity = (online !== "1") ? 0.4 : 1;
var icon_url = "image/" + feature.get("image");
var style = new ol.style.Style({
image: new ol.style.Icon({
opacity: opacity,
scale: 1.2,
src: icon_url
})
});
feature.setStyle(style);
var label_element = document.createElement('div');
label_element.className = 'label';
label_element.innerHTML = status;
var label = new ol.Overlay({
element: label_element,
offset: [20, 6],
stopEvent: false
});
var coordinate = feature.getGeometry().getCoordinates();
label.setPosition(coordinate);
map.addOverlay(label);
}
});// 车辆位置图层
map.addLayer(carPositionLayer);
var map_click = map.on('click', function (evt) {
var pixel = map.getEventPixel(evt.originalEvent);
var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});//判断当前单击处是否有要素，捕获到要素时弹出popup
var coordinate = evt.coordinate;
if (feature !== undefined) {
removeAllOverlay(map);
var popup_element = document.createElement('div');
popup_element.className = 'ol-popup';
var closer = document.createElement('a');
closer.href = '#';
closer.className = 'ol-popup-closer';
var title = document.createElement('div');
title.className = 'title';
var content = document.createElement('div');
content.className = 'popup-content';
$(popup_element).append(closer);
$(popup_element).append(title);
$(popup_element).append(content);
var info_popup = new ol.Overlay(({
element: popup_element,
autoPan: true,
autoPanAnimation: {
duration: 250 //当Popup超出地图边界时，地图移动的速度
}
}));
map.addOverlay(info_popup);
$(closer).on('click', function (event) {
event.preventDefault();
info_popup.setPosition(undefined);
});// 点击关闭的按钮
var name = feature.get("name");
var user_contact = feature.get("user_contact");
var time = feature.get("time");
var speed = parseFloat(feature.get("speed")).toFixed(2);
title.innerHTML ='<div><strong></strong>'+name+'</div></div>';
content.innerHTML = '<div><div>联系方式:'+user_contact+'</div><div>时 刻:'+time+'</div><div>速 度'+speed+'</div></div>';
info_popup.setPosition(coordinate);
}
});//为map添加点击事件监听，弹出popup
function initMenuAndAllCar(){
$.ajax({
url:"json/allAllPosition.json",
success:function(results){
var features = (new ol.format.GeoJSON()).readFeatures(results, {featureProjection: 'EPSG:3857'});
var carSource = new ol.source.Vector({
features: features
});
carPositionLayer.setSource(carSource);
var extent = carSource.getExtent();
map.getView().fit(extent, map.getSize(),{padding: [10,10,10,10]});
}
});
}//初始化所有车的位置
function removeAllOverlay(map){
map.getOverlays().getArray().slice(0).forEach(function(overlay) {
map.removeOverlay(overlay);
});
}//清除所有车
});
</script>
</body>
</html>
Openlayer 3 的点击弹出框的更多相关文章
- 点击datagrid弹出ldhdialog，点击弹出框的按钮，关闭且刷新datagrid
datagrid里的js这么写 //点击添加按钮触发 function superadd(title,addurl,gname,width,height) { gridname=gname; crea ...
- Openlayer 3 最简单的弹出框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jq实现点击弹出框代码
废话不多说,先贴代码吧 <script> function showBg() { //定义 showBg 函数 var bh = $("body").height(); ...
- form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法
针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...
- 经验总结：WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法
经验总结:WebBrowser自动点击弹出提示框alert.弹出对话框confirm.屏蔽弹出框.屏蔽弹出脚本错误的解决办法 网上有好多解决方法,可是不一定好使,本人经过多次试验,针对WebBrows ...
- 【代码笔记】iOS-轮询弹出框
一,效果图. 二,工程图. 三,代码. RootViewController.m #import "RootViewController.h" //加入弹出框的头文件 #impor ...
- 利用BootStrap Table插件实现自己的弹出框分页。
参考链接1: 官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/ 开始使用:http://bootstrap-table. ...
- ALV屏幕捕捉回车及下拉框事件&ALV弹出框回车及下拉框事件
示例展示: 屏幕依据输入的物料编码或下拉框物料编码拍回车自动带出物料描述: 点击弹出框,输入物料编码拍回车带出物料描述,点击确认,更新ALV: 1.创建屏幕9000,用于处理ALV弹出框: 2.针对屏 ...
- echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件
1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...
随机推荐
- python 提供INI配置文件的操作 ConfigParser
原文地址:http://www.cnblogs.com/pumaboyd/archive/2008/08/11/1265416.html 红色的为标注信息 +++++++++++++++++引用+++ ...
- A*算法&博弈树α-β剪枝
A*算法&博弈树α-β剪枝 A*算法/博弈树 前阵子考试学了A*算法.博弈树和回溯,自己真是愚蠢至极,根本没就搞明白这些,所以对于这些算法问道的话就不能说清楚,也记不住,所以才有了这篇笔记.在 ...
- C语言中判断int,long型等变量是否赋值的方法
博主这段时间在写一些C程序的代码,由于以前对C不是了解很多,故遇到很多瓶颈,当然,其中也有很多有趣的方法可以利用以解决这些难题,下面这个问题就是博主遇到的一个麻烦. 声明了 int ,long 型等局 ...
- 保护模式特权级别DPL,RPL,CPL 之间的联系和区别
RPL是段选择子里面的bit 0和bit 1位组合所得的值,但这里要首先搞清楚什么是段选择子,根据Intel 的文件(IA-32 IntelR Architecture Software Develo ...
- 关于SQL 数据表中的密码加密
首先,都知道一个字节(byte)等于八位二进制数.在数据表中将密码字段设置为binary类型,再结合哈希散列运算可以实现密码加密. 下面介绍下binary 和 varbinary: binary 和 ...
- Jquery Form表单取值
之前js取form表单的值都是一个一个的取,数量一多之后容易出错而且烦透了.感谢那些愿意分享的人. 页面定义form,并给form指定id值,里面的元素只要是需要键值对应的都赋予name属性,并且na ...
- 关于angularjs的$state.go()与ui-sref传参问题
上次转发过关于angularjs回退的文章,回退用到的还是js的回退功能,直接用history.back();实现功能,当时顺便提了下$state.go()有关路由跳转. 那这回就全面解析下$stat ...
- sublime vue 语法高亮插件安装
默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下: 第一,在 s ...
- linux ftp安装和配置
1. 启动VSFTP服务器 A:cenos下运行:yum install vsftpd B. 登录Linux主机后,运行命令:"service vsftpd start"C. ...
- [SOJ]寻找第k大数字(numberk)
Description 经过长时间的筹备工作,在Jourk,Ronny,Plipala,阿长,阿沈等人的努力下,DM实验室建立起自己的系列网站,其中包括三个大板块:DMOJ首页.DMOJ论坛.DMOJ ...