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 ...
随机推荐
- Visual Studio 2013 Preview - ASP.NET, MVC 5, Web API 2新功能搶先看
Visual Studio 2013 Preview - ASP.NET, MVC 5, Web API 2新功能搶先看 來自TechEd North America 2013的第一手消息 以下資訊均 ...
- U盘安装CentOS 6.4 + Windows 7双系统 （Windows 7下安装 CentOS 6.4)
最近在看<鸟哥私房菜:基础学习篇>,觉得很不错,想要装个windows 7 和 CentOS 6.4 双系统,在网上找了很多教程,觉得乱七八糟的,弄得很复杂,而且很多都不是很完整,对于新手 ...
- ext2 源代码解析之 “从路径名到目标结点” （一）
两个主要函数,path_init和path_walk,他们结合在一起根据给定的文件路径名称在内存中找到或者建立代表着目标文件或目录的dentry和inode结构.注意,最终是信息是读取到内存中的.其中 ...
- 通用高性能 Windows Socket 组件 HP-Socket v2.2.2 更新发布
HP-Socket 是一套通用的高性能 Windows Socket 组件包,包含服务端组件(IOCP 模型)和客户端组件(Event Select 模型),广泛适用于 Windows 平台的 TCP ...
- computer专业术语总结
计算机专业真可谓是博大精深,光语言就有N多种,而且各种算法计数,各个领域,加之新技术的不断出现, 如果想要穷尽 计算机的知识,那绝对是不那个可能的,只能在若干领域才能取得一定的成果,但是多了解一些专业 ...
- function返回值Python特殊语法：filter、map、reduce、lambda
废话就不多说了,开始... Python内置了一些非常有趣但非常有用的函数,充分体现了Python的语言魅力! filter(function, sequence):对sequence中的item顺次 ...
- avalon1.5+中组件的定义方式
avalon在1.5之后引入新的组件定义和使用方式,其总的宗旨是为了使定义和使用组件更加简单 组件库的概念 首先,需要注意的是,引入了组件库的概念(也可以理解为namespace),之后定义的组件必须 ...
- 结构-行为-样式-Css Div 居中的一个最佳实践
最近在做项目的时候,经常会有需要各种居中的情况,现在分享一个最佳实践. <div class="success-bottom"> <div class=" ...
- .Net基于RealProxy实现AOP
一.概述 关于AOP(面向切面编程)还是先讲一个日常经常碰到的场景"错误日志的记录",一般来说我们编码的时候想记录错误日志都是用try..catch来进行捕捉和记录,慢慢的你会发现 ...
- USACO 3.4 Electric Fence
Electric FenceDon Piele In this problem, `lattice points' in the plane are points with integer coord ...