<!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 { 100%; height: 100%; margin: 0; } .map { 100%; height: 100%; background: #f6f6f4; } input[type=range] { -webkit-appearance: none; 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; 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; /*添加底部阴影*/ } </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> </body> </html> <script type="text/javascript"> var points = [ [120.27194738388057, 36.3357839481728] , [120.27194738388057, 36.33528166973691] , [120.2717328071594, 36.33459124591144] , [120.27145385742186, 36.333882530121315] , [120.270938873291, 36.33315652189482] , [120.27091741561887, 36.332741657013344] , [120.2705955505371, 36.33213664176766] , [120.27070283889768, 36.33139333089085] , [120.27057409286496, 36.33087473770719] , [120.27108907699584, 36.33006226811251] , [120.27177572250363, 36.32987211443067] , [120.27271986007688, 36.329664673521194] , [120.27357816696164, 36.32918064258463] , [120.27342796325681, 36.32826443293632] , [120.27364253997803, 36.32753837235599] , [120.27447938919066, 36.327088902892015] , [120.2756381034851, 36.326795017609925] , [120.27731180191037, 36.32632825635429] , [120.27881383895873, 36.32601708063062] , [120.28033733367917, 36.32572319130615] , [120.28138875961302, 36.32570590366433] , [120.2832770347595, 36.32555031471519] , [120.28469324111937, 36.32555031471519] , [120.28591632843013, 36.32548116397142] , [120.2876543998718, 36.325412013166286] , [120.2888774871826, 36.325412013166286] , [120.29087305068967, 36.3253774377407] , [120.29175281524657, 36.32485880451607] , [120.29284715652466, 36.3245649108233] ] var map; //轨迹 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', 2 }) }) }); //动画 var speed; //点标记 var geoMarker var endMarker //样式 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)', 2 }) }) }); var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector() }); //地图初始化 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, vectorLayer], 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(); layer.getSource().clear(); AddPolygon(); //动画 var index = 0; var playInterval var trackPlay = {}; trackPlay.move = function () { } trackPlay.start = function () { if (index == 0) { layer.getSource().clear(); } 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(); } }, 300) } trackPlay.stop = function () { index = 0; if (trackPlay.stop) { clearInterval(playInterval); } } trackPlay.pause = function () { if (trackPlay.stop) { clearInterval(playInterval); } } trackPlay.next = function () { if (index >= points.length) { return false; } 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>