openlayers轨迹移动_openlayers箭头线资源-CSDN下载

共8个文件

png：3个

js：3个

html：1个

openlayers

轨迹回放

5星 · 超过95%的资源需积分: 50 4 浏览量 2017-12-07 16:30:50 上传评论 6 收藏 512KB RAR 举报

OpenLayers 是一个开源的JavaScript库，用于在Web浏览器中创建交互式地图应用。"openlayers 轨迹移动"指的是利用OpenLayers的功能来显示和操作地理轨迹数据，具体包括获取坐标、实时渲染以及轨迹回放等操作。这些功能在地理信息系统（GIS）应用中非常常见，例如交通监控、物流跟踪或户外运动路径分析。 1. **OpenLayers基础知识** - OpenLayers 提供了丰富的API，可以方便地与各种地图服务（如WMS、WMTS等）交互，加载不同类型的图层。 - 它支持多种地图源，包括矢量图层、图像图层和瓦片图层，满足不同的地图展示需求。 - OpenLayers 支持动态交互，如点击地图获取坐标、拖动地图、缩放地图等。 2. **轨迹数据处理** - 轨迹通常由一系列地理位置坐标点构成，这些点可以通过时间戳进行排序，形成一个路径。 - 数据格式可能为GeoJSON、KML或GPX，OpenLayers能够解析这些格式，将轨迹数据转化为可操作的对象。 3. **实时渲染坐标位置** - 使用OpenLayers的矢量图层，可以动态地在地图上绘制轨迹点，根据时间序列更新点的位置，实现坐标位置的实时渲染。 - 可以通过监听时间间隔事件（如setInterval）来周期性地改变图层中的几何对象位置，模拟物体的移动轨迹。 4. **轨迹回放功能** - 轨迹回放允许用户按照预设速度或自定义速度重新播放轨迹。 - 实现这一功能，需要维护一个时间轴，根据每个坐标点的时间戳，计算出移动的速度和方向，然后更新地图上的图标位置。 - 可以添加控制按钮，让用户暂停、播放、快进或倒退轨迹回放。 5. **olTrackPlayback 示例** - "olTrackPlayback"可能是示例代码或脚本文件，用于演示如何在OpenLayers中实现轨迹回放功能。 - 这个文件可能包含了加载轨迹数据、创建图层、设置动画循环、控制速度等功能的代码片段。 - 通过分析和学习这个示例，开发者可以了解具体的实现细节，并在自己的项目中应用类似的功能。 6. **优化与性能** - 对于大规模轨迹数据，可能需要使用数据减量化技术，如抽稀算法，减少绘制的点数量，提高渲染效率。 - 使用Web Worker进行计算密集型任务（如轨迹回放），以避免阻塞主线程，提升用户体验。 7. **互动界面设计** - 用户友好的界面设计是关键，如提供清晰的控制面板，显示当前时间、速度等信息，以及易于操作的播放控制按钮。 - 可以结合其他前端框架（如React或Vue.js）构建更复杂的用户界面。 "openlayers 轨迹移动"涉及OpenLayers库的基础知识、轨迹数据处理、实时渲染和轨迹回放功能的实现。通过深入理解这些概念和技术，开发者可以创建出功能丰富的地图应用，展示和分析地理轨迹信息。

资源推荐

资源详情

资源评论

收起资源包目录

olTrackPlayback.rar （8个子文件）

olTrackPlayback

plug-in

openlayer3

ol.js 492KB

jquery-1.8.3.min.js 91KB

ol-debug.js 2.48MB

css

ol.css 3KB

images

mark_b.png 688B

mark_r.png 883B

point_r.png 2KB

playback.html 8KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轨迹回放</title> <link rel="stylesheet" href="plug-in/openlayer3/css/ol.css"> <script type="text/javascript" src="plug-in/openlayer3/js/ol-debug.js"></script> <style type="text/css"> html,body,#map{ height: 100%; width: 100%; padding: 0px; margin: 0px; overflow: hidden; } </style> <script type="text/javascript"> function init() { var map=new ol.Map({ target:"map", layers:[ getTdtLayer('vec_c'), getTdtLayer('cva_c') ], controls:ol.control.defaults({ attribution: false, zoom:true }), //loadTilesWhileAnimating:true, view:new ol.View({ projection:"EPSG:4326", center: [116.390373,39.9078], zoom: 10, minZoom: 2, maxZoom: 18 }) }); var routeCoords=[]; for(var i=0;i<=800;i++){ routeCoords.push([116.390373,39.9078+0.005*i]); } var route=new ol.geom.LineString(routeCoords); var routeLength=routeCoords.length; var routeFeature=new ol.Feature({ type:'route', geometry:route }); var geoMarker=new ol.Feature({ type:'geoMarker', geometry:new ol.geom.Point(routeCoords[0]) }); var startMarker=new ol.Feature({ type:'icon', geometry:new ol.geom.Point(routeCoords[0]) }); var endMarker=new ol.Feature({ type:'icon', geometry:new ol.geom.Point(routeCoords[routeLength-1]) }); var styles={ 'route':new ol.style.Style({ stroke:new ol.style.Stroke({ width:6, color:[237,212,0,0.8] }) }), 'icon':new ol.style.Style({ image:new ol.style.Icon({ anchor:[0.5,1], scale:1, src:'plug-in/openlayer3/css/images/mark_b.png' }) }), 'geoMarker':new ol.style.Style({ image:new ol.style.Icon({ anchor:[0.5,0.5], scale:0.8, src:'plug-in/openlayer3/css/images/mark_r.png' }) }) }; var animating=false; var speed,now; var speedInput=document.getElementById("speed"); var startButton=document.getElementById("start-animation"); var vectorLayer=new ol.layer.Vector({ source:new ol.source.Vector({ features:[routeFeature,geoMarker,startMarker,endMarker] }), style:function (feature) { if(animating&&feature.get('type')==='geoMarker'){ return null; } return styles[feature.get('type')]; } }); map.addLayer(vectorLayer); var moveFeature=function (event) { var vectorContent=event.vectorContext; var frameState=event.frameState; if(animating){ //开始渲染时间 frameState.time(毫秒) var elapsedTime=frameState.time-now;//运行时间 //增加速度跳一些索引lineString坐标 var index=Math.round(speed*elapsedTime/1000);//一秒等于1000毫秒转换成秒即索引递增 if(index>=routeLength){ stopAnimation(true); return; } var currentPoint=new ol.geom.Point(routeCoords[index]); var feature=new ol.Feature(currentPoint); vectorContent.drawFeature(feature,styles.geoMarker); } //告诉OpenLayers继续postcompose渲染动画 map.render(); } function startAnimation() { if(animating){ stopAnimation(false); }else{ animating=true; now=new Date().getTime();//从 1970/01/01 至今已过去的时间(毫秒) speed=speedInput.value; startButton.textContent="取消"; geoMarker.setStyle(null); map.getView().setCenter([116.390373,39.9078]); map.on('postcompose',moveFeature);//地图渲染事件 map.render(); } } function stopAnimation(ended) { animating=false; startButton.textContent="开始"; var coord=ended?routeCoords[routeLength-1]:routeCoords[0]; (geoMarker.getGeometry()).setCoordinates(coord); map.un('postcompose',moveFeature); } startButton.addEventListener('click',startAnimation,false); } //获取天地图图层加载CGCS2000坐标系地图方式 function getTdtLayer(lyr) { var url = "http://t4.tianditu.com/DataServer?T="+lyr+"&x={x}&Y={y}&L={z}"; var projection = ol.proj.get("EPSG:4326"); var projectionExtent = [ -180, -90, 180, 90 ]; var maxResolution = (ol.extent.getWidth(projectionExtent) / (256 * 2)); var resolutions = new Array(19); for (var z = 0; z < 19; ++z) { resolutions[z] = maxResolution / Math.pow(2, z); } var tileOrigin = ol.extent.getTopLeft(projectionExtent); var layer = new ol.layer.Tile({ extent: [ -180, -90, 180, 90], source: new ol.source.TileImage({ tileUrlFunction: function(tileCoord) { var z = tileCoord[0]+1; var x = tileCoord[1]; var y = -tileCoord[2]-1; var n = Math.pow(2, z + 1); x = x % n; if (x * n < 0) { x = x + n; } return url.replace('{z}', z.toString()) .replace('{y}', y.toString()) .replace('{x}', x.toString()); }, projection: projection, tileGrid: new ol.tilegrid.TileGrid({ origin: tileOrigin, resolutions: resolutions, tileSize: 256 }) }) }); layer.set("title","tdtMap"); return layer; } </script> </head> <body onload="init()"> <div id="map"> <label for="speed">速度：<input id="speed" type="range" min="10" max="999" step="10" value="60"></label> <button id="start-animation">开始</button> </div> </body> </html>

评论收藏

内容反馈