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 ...
随机推荐
- 一步一步深入spring(3)--spring的依赖注入方式
对于spring配置一个bean时,如果需要给该bean提供一些初始化参数,则需要通过依赖注入方式,所谓的依赖注入就是通过spring将bean所需要的一些参数传递到bean实例对象的过程,sprin ...
- 输入参数能动态调决定调用哪个实现类 spring的一个特性
今天做公司的以前项目的时候发现项目中有个特别好的东西,记录下来,分享一下 发现spring有个这样的功能,我也不知道这个是东西应该怎么称呼,就是通过输入参数,动态决定调用接口的实现类.简单理解就是在s ...
- iOS 测试驱动开发
测试驱动开发是敏捷开发的一部分,它一般有“red-green- refactor”步骤 iOS测试驱动开发的工具 一. OCUnit 是Xcode自带的测试工具 其使用步骤分为 1 建立测试的Targ ...
- apache cxf笔记之Spring客户端访问和调用webservice服务
继续上次的spring服务的问题,这边介绍一种spring配置客户端的方法. 1.src目录下新建client-beans.xml文件 <?xml version="1.0" ...
- spring_boot打jar包及打包错误的解决方法
问题产生及解决 对于刚接手spring_boot的人,可能会感觉到很茫然无措,看到书上写的spring_boot是直接打包成jar包,使用java -jar *运行.然而却不知道该怎么打包.而创建sp ...
- TypeScript 中的 SOLID 原则
下面的文章解释了正确使用 TypeScrip的 SOLID原则. 原文地址:https://samueleresca.net/2016/08/solid-principles-using-typesc ...
- [转]HTTP请求模型和头信息参考
[转]HTTP请求模型和头信息参考 参考: http://blog.csdn.net/baggio785/archive/2006/04/13/661410.aspx模型: http://blog.c ...
- Mac下使用charles遇到的问题以及解决办法
最近使用上了Charles,因为之前一直使用Fidder,所以还是碰到了一些问题,这里记录一下. 如何安装破解版 打开charles后,发现访问但是抓不到包 抓取HTTPS的接口,看response是 ...
- Fortran中将多个文件进行编译运行的方法
问题:在编译一个单独的Module文件中,发现CentOS7系统中直接使用如下命令无法运行: gfortran program.f90 module.f90 && ./a.out 查找 ...
- H3 BPM报销流程开发示例
以报销流程为示例,介绍H3 BPM的流程开发过程. 报销流程的表单效果如下: 审核流程为填写报销申请.主管审核.总监审核(1000以上).出纳付款,显示如下: 步骤一:准备工作 使用管理员账号的登录H ...