1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css">
  9.  
  10.     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  11.     <script src="lib/OpenLayers/ol.js"></script>
  12.     <script src="olStyle/Light.js"></script>
  13.     <title>Document</title>
  14.     <style>
  15.         html,
  16.         body {
  17.             width: 100%;
  18.             height: 100%;
  19.             margin: 0;
  20.         }
  21.  
  22.         .map {
  23.             width: 100%;
  24.             height: 100%;
  25.             background: #f6f6f4;
  26.         }
  27.  
  28.         input[type=range] {
  29.             -webkit-appearance: none;
  30.             width: 300px;
  31.             border-radius: 10px;
  32.             /*这个属性设置使填充进度条时的图形为圆角*/
  33.         }
  34.  
  35.         input[type=range]::-webkit-slider-thumb {
  36.             -webkit-appearance: none;
  37.         }
  38.  
  39.         input[type=range]::-webkit-slider-runnable-track {
  40.             height: 15px;
  41.             border-radius: 10px;
  42.             /*将轨道设为圆角的*/
  43.             box-shadow: 0 1px 1px #65bdd3, inset 0 .125em .125em #127f9b;
  44.             /*轨道内置阴影效果*/
  45.         }
  46.  
  47.         input[type=range]:focus {
  48.             outline: none;
  49.         }
  50.  
  51.         input[type=range]::-webkit-slider-thumb {
  52.             -webkit-appearance: none;
  53.             height: 25px;
  54.             width: 25px;
  55.             margin-top: -5px;
  56.             /*使滑块超出轨道部分的偏移量相等*/
  57.             background: #08c1e6;
  58.             border-radius: 50%;
  59.             /*外观设置为圆形*/
  60.             border: solid 0.125em rgba(49, 155, 187, 0.5);
  61.             /*设置边框*/
  62.             box-shadow: 0 .125em .125em #08c1e6;
  63.             /*添加底部阴影*/
  64.         }
  65.  
  66.         /**
  67.         下面是弹框样式
  68.         */
  69.  
  70.         .ol-popup {
  71.             position: absolute;
  72.             background-color: white;
  73.             -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  74.             filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  75.             border-radius: 10px;
  76.             border: 1px solid #cccccc;
  77.             bottom: 12px;
  78.             left: -50px;
  79.             min-width: 280px;
  80.         }
  81.  
  82.         .ol-popup:after,
  83.         .ol-popup:before {
  84.             top: 100%;
  85.             border: solid transparent;
  86.             content: " ";
  87.             height: 0;
  88.             width: 0;
  89.             position: absolute;
  90.             pointer-events: none;
  91.         }
  92.  
  93.         .ol-popup:after {
  94.             border-top-color: white;
  95.             border-width: 10px;
  96.             left: 48px;
  97.             margin-left: -10px;
  98.         }
  99.  
  100.         .ol-popup:before {
  101.             border-top-color: #cccccc;
  102.             border-width: 11px;
  103.             left: 48px;
  104.             margin-left: -11px;
  105.         }
  106.  
  107.         .ol-popup-closer {
  108.             text-decoration: none;
  109.             position: absolute;
  110.             top: 0px;
  111.             right: 8px;
  112.         }
  113.  
  114.         .ol-popup-closer:after {
  115.             content: "✖";
  116.         }
  117.  
  118.         .popup-top {
  119.             background-color: #eeeeee;
  120.             height: 30px;
  121.             line-height: 30px;
  122.             border-top-left-radius: 5px;
  123.             border-top-right-radius: 5px;
  124.         }
  125.  
  126.         .popup-title {
  127.             padding-left: 10px;
  128.         }
  129.  
  130.         .popup-content {
  131.             padding: 10px;
  132.         }
  133.  
  134.         .popup-content ul {
  135.             list-style: none;
  136.             padding: 0px;
  137.             margin: 0px;
  138.             font-size: 12px;
  139.         }
  140.     </style>
  141. </head>
  142.  
  143. <body>
  144.     <input type="button" id="tempstop" value="暂停" />
  145.     <input type="button" id="start" value="开始" />
  146.     <input type="button" id="stop" value="停止" />
  147.     <input type="button" id="next" value="前进" />
  148.     <input type="button" id="prev" value="后退" />
  149.     <input type="range" id="sudu" value="800" max="2000" min="100" step="100" />
  150.     <div id="map" class="map" data-id="11"></div>
  151.  
  152.     <div id="popup" class="ol-popup">
  153.         <div class="popup-top">
  154.             <span class="popup-title">当前坐标信息</span>
  155.             <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  156.         </div>
  157.         <div class="popup-content">
  158.             <ul id="popup-content">
  159.  
  160.             </ul>
  161.         </div>
  162.     </div>
  163. </body>
  164.  
  165. </html>
  166. <script type="text/javascript">
  167.     var points = [
  168.         [120.27194738388057, 36.3357839481728,new Date()]
  169.         , [120.27194738388057, 36.33528166973691,new Date()]
  170.         , [120.2717328071594, 36.33459124591144,new Date()]
  171.         , [120.27145385742186, 36.333882530121315,new Date()]
  172.         , [120.270938873291, 36.33315652189482,new Date()]
  173.         , [120.27091741561887, 36.332741657013344,new Date()]
  174.         , [120.2705955505371, 36.33213664176766,new Date()]
  175.         , [120.27070283889768, 36.33139333089085,new Date()]
  176.         , [120.27057409286496, 36.33087473770719,new Date()]
  177.         , [120.27108907699584, 36.33006226811251,new Date()]
  178.         , [120.27177572250363, 36.32987211443067,new Date()]
  179.         , [120.27271986007688, 36.329664673521194,new Date()]
  180.         , [120.27357816696164, 36.32918064258463,new Date()]
  181.         , [120.27342796325681, 36.32826443293632,new Date()]
  182.         , [120.27364253997803, 36.32753837235599,new Date()]
  183.         , [120.27447938919066, 36.327088902892015,new Date()]
  184.         , [120.2756381034851, 36.326795017609925,new Date()]
  185.         , [120.27731180191037, 36.32632825635429,new Date()]
  186.         , [120.27881383895873, 36.32601708063062,new Date()]
  187.         , [120.28033733367917, 36.32572319130615,new Date()]
  188.         , [120.28138875961302, 36.32570590366433,new Date()]
  189.         , [120.2832770347595, 36.32555031471519,new Date()]
  190.         , [120.28469324111937, 36.32555031471519,new Date()]
  191.         , [120.28591632843013, 36.32548116397142,new Date()]
  192.         , [120.2876543998718, 36.325412013166286,new Date()]
  193.         , [120.2888774871826, 36.325412013166286,new Date()]
  194.         , [120.29087305068967, 36.3253774377407,new Date()]
  195.         , [120.29175281524657, 36.32485880451607,new Date()]
  196.         , [120.29284715652466, 36.3245649108233,new Date()]
  197.     ]
  198.  
  199.     var map;
  200.  
  201.     var container = document.getElementById('popup');
  202.     var content = document.getElementById('popup-content');
  203.     var closer = document.getElementById('popup-closer');
  204.  
  205.     var overlay = new ol.Overlay({
  206.         element: container,
  207.         autoPan: true,
  208.         autoPanAnimation: {
  209.             duration: 50
  210.         }
  211.     });
  212.  
  213.     closer.onclick = function () {
  214.         overlay.setPosition(undefined);
  215.         closer.blur();
  216.         return false;
  217.     };
  218.  
  219.     //轨迹
  220.     var layer = new ol.layer.Vector({
  221.         source: new ol.source.Vector(),
  222.         style: new ol.style.Style({
  223.             fill: new ol.style.Fill({
  224.                 color: 'rgba(255, 0, 0, 0.5)'
  225.             }),
  226.             stroke: new ol.style.Stroke({
  227.                 color: 'red',
  228.                 width: 2
  229.             })
  230.         })
  231.     });
  232.  
  233.     //样式
  234.     var style = new ol.style.Style({
  235.         image: new ol.style.Circle({
  236.             radius: 5,
  237.             snapToPixel: false,
  238.             fill: new ol.style.Fill({ color: 'rgba(30,144,255,1)' }),
  239.             stroke: new ol.style.Stroke({
  240.                 color: 'rgb(30,144,255)', width: 2
  241.             })
  242.         })
  243.     });
  244.  
  245.     //地图初始化
  246.     function InitMap() {
  247.         map = new ol.Map({
  248.             layers: [new ol.layer.Vector({
  249.                 source: new ol.source.Vector(),
  250.                 style: function (feature, resolution) {
  251.                     switch (feature.get('layer')) {
  252.                         case 'poi':
  253.                             poiStyle.getText().setText(feature.get('name'));
  254.                             return poiStyle;
  255.                         case 'boundary': return boundaryStyle;
  256.                         case 'lawn': return lawnStyle;
  257.                         case 'road':
  258.                             roadStyle.getText().setText(feature.get('name'));
  259.                             return (resolution < 2) ? roadStyle : null;
  260.                         case 'building':
  261.                             return buildingStyle(feature, resolution);
  262.                         case 'other':
  263.                             otherStyle.getText().setText(feature.get('name'));
  264.                             return otherStyle;
  265.                         default: return null;
  266.                     }
  267.                 }
  268.             }), layer],
  269.             overlays: [overlay],
  270.             target: 'map',
  271.             view: new ol.View({
  272.                 center: ol.proj.fromLonLat([120.277, 36.330]),
  273.                 minZoom: 1,
  274.                 zoom: 16
  275.             })
  276.         });
  277.     }
  278.  
  279.     var pointStyle = new ol.style.Style({
  280.         //把点的样式换成ICON图标
  281.         fill: new ol.style.Fill({
  282.             //填充颜色
  283.             color: 'rgba(37,241,239,0.2)'
  284.         }),
  285.         //图形样式，主要适用于点样式
  286.         image: new ol.style.Circle({
  287.             //半径大小
  288.             radius: 5,
  289.             //填充
  290.             fill: new ol.style.Fill({
  291.                 //填充颜色
  292.                 color: 'rgba(255,0,0,0.3)'
  293.             })
  294.         })
  295.     });
  296.  
  297.     /*显示并编辑区域**********************************************************************************/
  298.     function AddPolygon() {
  299.         layer.getSource().clear();
  300.  
  301.         for (var i = 0; i < points.length; i++) {
  302.             if (i == 0) {
  303.                 AddPoint(style, points[i], i);
  304.             } else {
  305.                 AddPoint(pointStyle, points[i], i);
  306.             }
  307.         }
  308.     }
  309.  
  310.     function AddPoint(style, lnglat, id) {
  311.         var newFeature = new ol.Feature({
  312.             geometry: new ol.geom.Point(ol.proj.fromLonLat(lnglat))
  313.         });
  314.  
  315.         //设置点的样式
  316.         newFeature.setStyle(style);
  317.  
  318.         newFeature.setId("PlayPoints" + id)
  319.  
  320.         //将当前要素添加到矢量数据源中
  321.         layer.getSource().addFeature(newFeature);
  322.     }
  323.  
  324.     InitMap();
  325.  
  326.     map.on('click', function (evt) {
  327.         // var coordinate = evt.coordinate;
  328.         // var hdms = JSON.stringify(coordinate);
  329.         var pixel = map.getEventPixel(evt.originalEvent);
  330.         var feature = map.forEachFeatureAtPixel(pixel, function (feature) { return feature; });//查询方式有很多 
  331.  
  332.         var html = ''
  333.         if (feature) {
  334.             var id = feature.getId();
  335.  
  336.             if (id == undefined) {
  337.                 return false;
  338.             }
  339.  
  340.             id = id.replace('PlayPoints', '');
  341.  
  342.             html += "<li>上传时间：" + points[id][2] + "</li>"
  343.  
  344.             content.innerHTML = html;
  345.  
  346.             overlay.setPosition(ol.proj.fromLonLat(points[id]));
  347.         }
  348.     });
  349.  
  350.     layer.getSource().clear();
  351.  
  352.     AddPolygon();
  353.  
  354.     //动画
  355.     var index = 0;
  356.     var playInterval
  357.  
  358.     var trackPlay = {};
  359.     trackPlay.start = function () {
  360.         if (index == 0) {
  361.             layer.getSource().clear();
  362.         }
  363.  
  364.         var speed = 2000 / $("#sudu").val() * 50
  365.  
  366.         $("#sudu").attr("disabled", "disabled")
  367.  
  368.         playInterval = setInterval(() => {
  369.             if (index == 0) {
  370.                 AddPoint(style, points[index], index);
  371.             } else {
  372.                 AddPoint(pointStyle, points[index], index);
  373.             }
  374.  
  375.             index = index + 1;
  376.  
  377.             if (index >= points.length) {
  378.                 trackPlay.stop();
  379.             }
  380.         }, speed)
  381.     }
  382.     trackPlay.stop = function () {
  383.         index = 0;
  384.         // if (trackPlay.stop) {
  385.         clearInterval(playInterval);
  386.         $("#sudu").removeAttr("disabled")
  387.         // }
  388.     }
  389.     trackPlay.pause = function () {
  390.         // if (trackPlay.stop) {
  391.         clearInterval(playInterval);
  392.  
  393.         $("#sudu").removeAttr("disabled")
  394.         // }
  395.     }
  396.     trackPlay.next = function () {
  397.         if (index >= points.length) {
  398.             return false;
  399.         }
  400.  
  401.         AddPoint(pointStyle, points[index], index);
  402.  
  403.         index = index + 1;
  404.     }
  405.     trackPlay.prev = function () {
  406.         if (index == 0) {
  407.             return false;
  408.         }
  409.  
  410.         index = index - 1;
  411.         var feature = this.getLastFeature();
  412.         layer.getSource().removeFeature(feature);
  413.     }
  414.     trackPlay.getLastFeature = function () {
  415.         return layer.getSource().getFeatureById("PlayPoints" + index);
  416.     }
  417.  
  418.     $("#tempstop").click(function () {
  419.         trackPlay.pause();
  420.     })
  421.  
  422.     $("#start").click(function () {
  423.         trackPlay.start();
  424.     })
  425.  
  426.     $("#stop").click(function () {
  427.         trackPlay.stop();
  428.         AddPolygon();
  429.     })
  430.  
  431.     $("#next").click(function () {
  432.         trackPlay.next();
  433.     })
  434.  
  435.     $("#prev").click(function () {
  436.         trackPlay.prev();
  437.     })
  438.  
  439. </script>

　　

openlayers添加弹出框的更多相关文章

  1. JSP中添加弹出框

    JSP中添加弹出框 %> <script language="javascript" type="text/javascript"> aler ...

  2. JavaScript插件——弹出框

    (JavaScript插件——弹出框) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.htm ...

  3. 弹出框,先弹出遮罩有透明度灰色100%高宽,置顶z-index:999---再弹出框最顶部z-index:9999

    <div class="mask"></div> <div class="maskbox"> <form id=&qu ...

  4. Bootstrap-Plugin：弹出框（Popover）插件

    ylbtech-Bootstrap-Plugin:弹出框(Popover)插件 1.返回顶部 1. Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip ...

  5. Django：popup弹出框简单应用实例

    效果:在p1.html页面点击,弹出p2的弹出框,填写数据,在 popup_response页面处理数据 1.url设置 urlpatterns = patterns( url(r'^p1.html' ...

  6. 【iOS】UIAlertController 弹出框

    UIAlertView 虽然还能用,但已经废弃了.因此以后尽量用 UIAlertController.示例代码如下: UIAlertController *alert = [UIAlertContro ...

  7. easyui tree datagrid动态添加表头和表格数据，动态弹出框，修改和删除按钮

    1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...

  8. elementUI 弹出框添加可自定义拖拽和拉伸功能，并处理边界问题

    开发完后台管理系统的弹出框模块,被添加拖拽和拉伸功能,看了很多网上成熟的帖子引到项目里总有一点问题,下面是根据自己的需求实现的步骤: 首先在vue项目中创建一个js文件eg:dialog.js imp ...

  9. Bootstrap方法为页面添加一个弹出框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. pytoch之 encoder,decoder

    import torch import torch.nn as nn import torch.utils.data as Data import torchvision import matplot ...

  2. Webpack之(progressive web application) - PWA中的 Service Workers 是什么

    学习文档:https://webpack.docschina.org/guides/progressive-web-application/ 参考文档:https://developers.googl ...

  3. IO流之File对象

    File类: 用来将文件或者文件夹封装成对象 方便对文件与文件夹的属性等信息进行操作(因为流只能操作文件中的数据) File对象可以作为参考传递给流的构造函数 上下级文件夹之间使用分隔符分开: 在Wi ...

  4. Debian 10 安装无线网卡驱动 （rtl8822be）

    apt install firmware-realtek

  5. bootstrap-daterangepicker

    1,依赖关系 使用之前需要引用bootstrap.css   daterangpicker.css    jquery.js   boostrap.js  moment.js   daterangpi ...

  6. UI自动化技术在高德的实践

    一.背景汽车导航作为ToB业务,需要满足不同汽车厂商在功能和风格上体现各自特色的需求.针对这种情况,传统的UI开发方式,基本上是一对一的特别定制.但是这种方式动辄就要500~600人日的工作量投入,成 ...

  7. 2、CentOS7密码重置

    一.重启系统,在开机过程中,快速按下键盘上的方向键↑和↓.目的是告知引导程序,我们需要在引导页面选择不同的操作,以便让引导程序暂停.  以下是暂停后的界面,可以查看下方的英文可知↑和↓的作用.  二. ...

  8. 在pycharm中如何设置代码对齐竖线

    方法:启动pycharm软件,打开一个文件,点 file 菜单,选择 settings,在弹出的setting菜单中依次选择editor-->general-->appearance,然后 ...

  9. Openshift V3系列各组件版本

    Openshift V3.* 系列各组件版本 Components 3.0 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.9 3.10 3.11 Core Components dock ...

  10. Android开发中按钮的语法

    按钮的主要作用就是触发一个动作,所以会用到监听器. 如何为按钮添加单机事件监听器: 1.匿名内部类作为单机事件监听器 案例: 首先在.xml文件中添加一个按钮一,然后设置其id属性,然后在main里获 ...