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>
岁月无情催人老,请珍爱生命,远离代码!!!