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 ...
随机推荐
- 开始使用THREE.JS
开始使用THREE.JS 译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏, ...
- hdu 1507
求能出售多少个1*2的矩形,,将原图染色,(i+j)%2==0的染白色,其余为黑色, 求白色跟黑色的最大匹配 #include<stdio.h> #include<string.h& ...
- hdu 1698 Just a Hook（线段树基础）
成段更新的线段树,加入了延时标记............ 线段树这种东西细节上的理解因人而异,还是要自己深入理解......慢慢来 #include <iostream> #include ...
- Citrix 服务器虚拟化之一 网络部署Xenserver 6.2
Citrix 服务器虚拟化之一 网络部署Xenserver 6.2 思杰的XenServer®是完整的服务器虚拟化平台. XenServer软件包中包含所有你需要创建和管理部署的虚拟x86计算机上运 ...
- POJ 1013 小水题 暴力模拟
Counterfeit Dollar Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 35774 Accepted: 11 ...
- 分享一个javascript alert精简框架
如果你不喜欢浏览器自带的alert你可以尝试总共不超过10KB somke js 下载地址:http://smoke-js.com/ 使用方法 somke.alert("hello wor ...
- java BigInteger源码学习
转载自http://www.hollischuang.com/archives/176 在java中,有很多基本数据类型我们可以直接使用,比如用于表示浮点型的float.double,用于表示字符型的 ...
- CKPlayer 只调用HTML5播放器时全屏问题 这只是Chrome浏览器的渲染bug
如题,在系统中使用CKPlayer播放器,一切顺利,偶然发现没有全屏按钮, 正常的全屏按钮是这样的: 经过一步步调试,发现问题出在iframe, 当视频页面在iframe内时,全屏按钮不显示了,这个和 ...
- Perception（1.2）
4.1.2 Definition of Coordinate Systems The global coordinate system is described by its origin lying ...
- CHM木马
一. 弹出计算器 打开EasyCHM,工具 -> 反编译指定的CHM,选择目标文件和反编译工作目录. 进入反编译的工作目录,找到并编辑主页文件,这里是index.html 在<body&g ...