openlayers添加弹出框
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/OpenLayers/ol.js"></script>
<script src="olStyle/Light.js"></script>
<title>Document</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
} .map {
width: 100%;
height: 100%;
background: #f6f6f4;
} input[type=range] {
-webkit-appearance: none;
width: 300px;
border-radius: 10px;
/*这个属性设置使填充进度条时的图形为圆角*/
} input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
} input[type=range]::-webkit-slider-runnable-track {
height: 15px;
border-radius: 10px;
/*将轨道设为圆角的*/
box-shadow: 0 1px 1px #65bdd3, inset 0 .125em .125em #127f9b;
/*轨道内置阴影效果*/
} input[type=range]:focus {
outline: none;
} input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 25px;
width: 25px;
margin-top: -5px;
/*使滑块超出轨道部分的偏移量相等*/
background: #08c1e6;
border-radius: 50%;
/*外观设置为圆形*/
border: solid 0.125em rgba(49, 155, 187, 0.5);
/*设置边框*/
box-shadow: 0 .125em .125em #08c1e6;
/*添加底部阴影*/
} /**
下面是弹框样式
*/ .ol-popup {
position: absolute;
background-color: white;
-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));
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: white;
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: 0px;
right: 8px;
} .ol-popup-closer:after {
content: "✖";
} .popup-top {
background-color: #eeeeee;
height: 30px;
line-height: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
} .popup-title {
padding-left: 10px;
} .popup-content {
padding: 10px;
} .popup-content ul {
list-style: none;
padding: 0px;
margin: 0px;
font-size: 12px;
}
</style>
</head> <body>
<input type="button" id="tempstop" value="暂停" />
<input type="button" id="start" value="开始" />
<input type="button" id="stop" value="停止" />
<input type="button" id="next" value="前进" />
<input type="button" id="prev" value="后退" />
<input type="range" id="sudu" value="800" max="2000" min="100" step="100" />
<div id="map" class="map" data-id="11"></div> <div id="popup" class="ol-popup">
<div class="popup-top">
<span class="popup-title">当前坐标信息</span>
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
</div>
<div class="popup-content">
<ul id="popup-content"> </ul>
</div>
</div>
</body> </html>
<script type="text/javascript">
var points = [
[120.27194738388057, 36.3357839481728,new Date()]
, [120.27194738388057, 36.33528166973691,new Date()]
, [120.2717328071594, 36.33459124591144,new Date()]
, [120.27145385742186, 36.333882530121315,new Date()]
, [120.270938873291, 36.33315652189482,new Date()]
, [120.27091741561887, 36.332741657013344,new Date()]
, [120.2705955505371, 36.33213664176766,new Date()]
, [120.27070283889768, 36.33139333089085,new Date()]
, [120.27057409286496, 36.33087473770719,new Date()]
, [120.27108907699584, 36.33006226811251,new Date()]
, [120.27177572250363, 36.32987211443067,new Date()]
, [120.27271986007688, 36.329664673521194,new Date()]
, [120.27357816696164, 36.32918064258463,new Date()]
, [120.27342796325681, 36.32826443293632,new Date()]
, [120.27364253997803, 36.32753837235599,new Date()]
, [120.27447938919066, 36.327088902892015,new Date()]
, [120.2756381034851, 36.326795017609925,new Date()]
, [120.27731180191037, 36.32632825635429,new Date()]
, [120.27881383895873, 36.32601708063062,new Date()]
, [120.28033733367917, 36.32572319130615,new Date()]
, [120.28138875961302, 36.32570590366433,new Date()]
, [120.2832770347595, 36.32555031471519,new Date()]
, [120.28469324111937, 36.32555031471519,new Date()]
, [120.28591632843013, 36.32548116397142,new Date()]
, [120.2876543998718, 36.325412013166286,new Date()]
, [120.2888774871826, 36.325412013166286,new Date()]
, [120.29087305068967, 36.3253774377407,new Date()]
, [120.29175281524657, 36.32485880451607,new Date()]
, [120.29284715652466, 36.3245649108233,new Date()]
] var map; var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer'); var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 50
}
}); closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
}; //轨迹
var layer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.5)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 2
})
})
}); //样式
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
snapToPixel: false,
fill: new ol.style.Fill({ color: 'rgba(30,144,255,1)' }),
stroke: new ol.style.Stroke({
color: 'rgb(30,144,255)', width: 2
})
})
}); //地图初始化
function InitMap() {
map = new ol.Map({
layers: [new ol.layer.Vector({
source: new ol.source.Vector(),
style: function (feature, resolution) {
switch (feature.get('layer')) {
case 'poi':
poiStyle.getText().setText(feature.get('name'));
return poiStyle;
case 'boundary': return boundaryStyle;
case 'lawn': return lawnStyle;
case 'road':
roadStyle.getText().setText(feature.get('name'));
return (resolution < 2) ? roadStyle : null;
case 'building':
return buildingStyle(feature, resolution);
case 'other':
otherStyle.getText().setText(feature.get('name'));
return otherStyle;
default: return null;
}
}
}), layer],
overlays: [overlay],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([120.277, 36.330]),
minZoom: 1,
zoom: 16
})
});
} var pointStyle = new ol.style.Style({
//把点的样式换成ICON图标
fill: new ol.style.Fill({
//填充颜色
color: 'rgba(37,241,239,0.2)'
}),
//图形样式，主要适用于点样式
image: new ol.style.Circle({
//半径大小
radius: 5,
//填充
fill: new ol.style.Fill({
//填充颜色
color: 'rgba(255,0,0,0.3)'
})
})
}); /*显示并编辑区域**********************************************************************************/
function AddPolygon() {
layer.getSource().clear(); for (var i = 0; i < points.length; i++) {
if (i == 0) {
AddPoint(style, points[i], i);
} else {
AddPoint(pointStyle, points[i], i);
}
}
} function AddPoint(style, lnglat, id) {
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat(lnglat))
}); //设置点的样式
newFeature.setStyle(style); newFeature.setId("PlayPoints" + id) //将当前要素添加到矢量数据源中
layer.getSource().addFeature(newFeature);
} InitMap(); map.on('click', function (evt) {
// var coordinate = evt.coordinate;
// var hdms = JSON.stringify(coordinate);
var pixel = map.getEventPixel(evt.originalEvent);
var feature = map.forEachFeatureAtPixel(pixel, function (feature) { return feature; });//查询方式有很多 var html = ''
if (feature) {
var id = feature.getId(); if (id == undefined) {
return false;
} id = id.replace('PlayPoints', ''); html += "<li>上传时间：" + points[id][2] + "</li>" content.innerHTML = html; overlay.setPosition(ol.proj.fromLonLat(points[id]));
}
}); layer.getSource().clear(); AddPolygon(); //动画
var index = 0;
var playInterval var trackPlay = {};
trackPlay.start = function () {
if (index == 0) {
layer.getSource().clear();
} var speed = 2000 / $("#sudu").val() * 50 $("#sudu").attr("disabled", "disabled") playInterval = setInterval(() => {
if (index == 0) {
AddPoint(style, points[index], index);
} else {
AddPoint(pointStyle, points[index], index);
} index = index + 1; if (index >= points.length) {
trackPlay.stop();
}
}, speed)
}
trackPlay.stop = function () {
index = 0;
// if (trackPlay.stop) {
clearInterval(playInterval);
$("#sudu").removeAttr("disabled")
// }
}
trackPlay.pause = function () {
// if (trackPlay.stop) {
clearInterval(playInterval); $("#sudu").removeAttr("disabled")
// }
}
trackPlay.next = function () {
if (index >= points.length) {
return false;
} AddPoint(pointStyle, points[index], index); index = index + 1;
}
trackPlay.prev = function () {
if (index == 0) {
return false;
} index = index - 1;
var feature = this.getLastFeature();
layer.getSource().removeFeature(feature);
}
trackPlay.getLastFeature = function () {
return layer.getSource().getFeatureById("PlayPoints" + index);
} $("#tempstop").click(function () {
trackPlay.pause();
}) $("#start").click(function () {
trackPlay.start();
}) $("#stop").click(function () {
trackPlay.stop();
AddPolygon();
}) $("#next").click(function () {
trackPlay.next();
}) $("#prev").click(function () {
trackPlay.prev();
}) </script>
openlayers添加弹出框的更多相关文章
- JSP中添加弹出框
JSP中添加弹出框 %> <script language="javascript" type="text/javascript"> aler ...
- JavaScript插件——弹出框
(JavaScript插件——弹出框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.htm ...
- 弹出框,先弹出遮罩有透明度灰色100%高宽,置顶z-index:999---再弹出框最顶部z-index:9999
<div class="mask"></div> <div class="maskbox"> <form id=&qu ...
- Bootstrap-Plugin：弹出框（Popover）插件
ylbtech-Bootstrap-Plugin:弹出框(Popover)插件 1.返回顶部 1. Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip ...
- Django：popup弹出框简单应用实例
效果:在p1.html页面点击,弹出p2的弹出框,填写数据,在 popup_response页面处理数据 1.url设置 urlpatterns = patterns( url(r'^p1.html' ...
- 【iOS】UIAlertController 弹出框
UIAlertView 虽然还能用,但已经废弃了.因此以后尽量用 UIAlertController.示例代码如下: UIAlertController *alert = [UIAlertContro ...
- easyui tree datagrid动态添加表头和表格数据，动态弹出框，修改和删除按钮
1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...
- elementUI 弹出框添加可自定义拖拽和拉伸功能，并处理边界问题
开发完后台管理系统的弹出框模块,被添加拖拽和拉伸功能,看了很多网上成熟的帖子引到项目里总有一点问题,下面是根据自己的需求实现的步骤: 首先在vue项目中创建一个js文件eg:dialog.js imp ...
- Bootstrap方法为页面添加一个弹出框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- input . type=number.使用后问题点
所有主浏览器都支持type属性,但是,并非所有主流浏览器都支持所有不同的 input 类型. 以下 input 类型是 HTML5 中的新类型:color.date.datetime.datetime ...
- 威联通（NAS）搭建个人图床
名词解释: 图床:一般是指储存图片的服务器,有国内和国外之分.国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度.国内也分为单线空间.多线空间和cdn加速三种. 更详细的内容,请左转查看百 ...
- Ambari HDP 下 SPARK2 与 Phoenix 整合
1.环境说明 操作系统 CentOS Linux release 7.4.1708 (Core) Ambari 2.6.x HDP 2.6.3.0 Spark 2.x Phoenix 4.10.0-H ...
- Apache的那些事-查找配置文件
在CentOS 6.5 里Apache的 安装后出现两个httpd.conf配置文件,一个在 /etc/httpd/conf/httpd.conf 这个事li ...
- python网络爬虫（三）requests库的13个控制访问参数及简单案例
酱酱~小编又来啦~
- 教你快速使用数据可视化BI软件创建4S店销售数据大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以4S店销售数据大屏为例为 ...
- 会话技术中的Cookie与session
关于会话技术 会话:一次会话中包含多次请求和响应. 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 功能:在一次会话的范围内的多次请求间,共享数据 方式: 客户端会话技术:C ...
- C#设置自定义文件图标实现双击启动
修改注册表,双击文件直接打开 string strProject = "Exec"; string p_FileTypeName =".cdb";//文件后缀 ...
- 如何避免FOUC，是如何产生的
FOUC(Flash Of Unstyled Content)即浏览器样式闪烁或者叫做无样式内存闪烁(用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁 ...
- smartforms设置表格脚标在最后一页显示
用户打印采购订单时,末尾计算一个合计金额,但是有多页时,合计显示在了每一页,现在希望合计项只显示在表格最后一行就可以. smartforms调整表格,将总计放在脚标内,设置脚标输出打印[在表结束处]即 ...