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;
/*添加底部阴影*/
}
</style>
</head> <body>
<div id="map" class="map" data-id="11"></div>
<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" />
</body> </html>
<script type="text/javascript">
var points = [
[120.27194738388057, 36.3357839481728]
, [120.27194738388057, 36.33528166973691]
, [120.27194738388057, 36.33528266973691]
, [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 newPoints = [] function DealPoints() {
$.each(points, function (i, item) {
var currLng = parseFloat(item[0]);
var currLat = parseFloat(item[1]); newPoints.push(ol.proj.fromLonLat([currLng, currLat])); if ((i + 1) == points.length) {
return false;
} var nextLng = parseFloat(points[i + 1][0]);
var nextLat = parseFloat(points[i + 1][1]); var diffLng = nextLng - currLng;
var diffLat = nextLat - currLat; var currParamsLng = 0
var currParamsLat = 0 var base = 0.0001; currParamsLng = 0.0001
currParamsLat = (diffLat / diffLng) * 0.0001; if (diffLng < diffLat) {
currParamsLng = (diffLng / diffLat) * 0.0001;
currParamsLat = 0.0001
}
// currParamsLng = Math.sqrt(0.000000001 / (1 + (diffLng / diffLat) * (diffLng / diffLat)));
// currParamsLat = (diffLng / diffLat) * currParamsLng // currParamsLng = Math.abs(currParamsLng);
// currParamsLat = Math.abs(currParamsLat); if (currParamsLng < 0) {
currParamsLng = -currParamsLng;
} // if (diffLng < 0) {
// if (currParamsLng > 0) {
// currParamsLng = -currParamsLng;
// }
// } else {
// if (currParamsLng < 0) {
// currParamsLng = -currParamsLng;
// }
// } if (diffLat > 0) {
if (currParamsLat < 0) {
currParamsLat = -currParamsLat;
}
} else {
if (currParamsLat > 0) {
currParamsLat = -currParamsLat;
}
} if (diffLng == 0) {
currParamsLng = 0;
currParamsLat = 0.0001;
} if (diffLat == 0) {
currParamsLng = 0.0001;
currParamsLat = 0;
} if (diffLng > 0) {
currLng = currLng + currParamsLng;
currLat = currLat + currParamsLat;
while (currLng < nextLng) { newPoints.push(ol.proj.fromLonLat([currLng, currLat])); currLng = currLng + currParamsLng;
currLat = currLat + currParamsLat;
}
} else if (diffLng < 0) {
currLng = currLng - currParamsLng;
currLat = currLat + currParamsLat;
while (currLng > nextLng) { newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
currLng = currLng - currParamsLng;
currLat = currLat + currParamsLat;
}
} else {
currLng = currLng + currParamsLng;
currLat = currLat + currParamsLat;
while (currLat < nextLat) { newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
currLng = currLng + currParamsLng;
currLat = currLat + currParamsLat;
}
}
// if (diffLng > 0 && diffLat > 0) {
// currLng = currLng + currParamsLng;
// currLat = currLat + currParamsLat;
// while (currLng < nextLng) { // newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
// currLng = currLng + currParamsLng;
// currLat = currLat + currParamsLat;
// }
// }
// else if (diffLng > 0 && diffLat < 0) {
// currLng = currLng + currParamsLng;
// currLat = currLat - currParamsLat;
// while (currLng > nextLng) { // newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
// currLng = currLng + currParamsLng;
// currLat = currLat - currParamsLat;
// }
// }
// else if (diffLng < 0 && diffLat < 0) {
// currLng = currLng - currParamsLng;
// currLat = currLat - currParamsLat;
// while (currLng > nextLng) { // newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
// currLng = currLng - currParamsLng;
// currLat = currLat - currParamsLat;
// }
// }
// else {
// currLng = currLng - currParamsLng;
// currLat = currLat + currParamsLat;
// while (currLng > nextLng) { // newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
// currLng = currLng - currParamsLng;
// currLat = currLat + currParamsLat;
// }
// }
}) //console.log(newPoints);
} DealPoints(); 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',
width: 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)', width: 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
})
});
} /*显示并编辑区域**********************************************************************************/
function AddPolygon() {
layer.getSource().clear(); //var line = new ol.geom.LineString(points);
var line = new ol.geom.LineString(newPoints); var feature = new ol.Feature({
geometry: line
}); layer.getSource().addFeature(feature); SetMoveMark();
} function SetMoveMark() {
geoMarker = new ol.Feature({
geometry: new ol.geom.Point(newPoints[0])
});
geoMarker.setStyle(style) endMarker = new ol.Feature({
geometry: new ol.geom.Point(newPoints[newPoints.length - 1])
});
endMarker.setStyle(style); vectorLayer.getSource().addFeatures([geoMarker, endMarker]);
} InitMap(); AddPolygon(); ///////////////////////////////////////////////////////////////////////////////// //startMarker.setStyle(styles.geoMarker); //动画
var index = 0;
var date;
var tempDate;
var center = ol.proj.fromLonLat([120.277, 36.330]);
var moveFeature = function (event) {
var vectorContext = event.vectorContext; if (index >= newPoints.length) {
console.log(new Date());
stopAnimation();
clearInterval(inter);
return;
} var currentPoint = new ol.geom.Point(newPoints[index]);
var feature = new ol.Feature(currentPoint);
vectorContext.drawFeature(feature, style);
var frameState = event.frameState; if (ispuse == 0) {
var t = frameState.time - date; if (t / speed > index) {
index = index + 1;
}
}
}; function startAnimation() {
//now = new Date().getTime();
speed = 100 / $("#sudu").val() * 100;
geoMarker.setStyle(style);
map.on('postcompose', moveFeature);
map.render();
} /**
* @param {boolean} ended end of animation.
*/
function stopAnimation() {
index = 0;
date = 0;
tempDate = 0;
(geoMarker.getGeometry()).setCoordinates(newPoints[0]);
map.un('postcompose', moveFeature);
} var inter;
var ispuse = 0; $("#tempstop").click(function () {
//stopAnimation();
map.render();
clearInterval(inter);
tempDate = (new Date()).getTime();
ispuse = 1;
}) $("#start").click(function () {
console.log(new Date());
if (date == undefined || date == 0) {
date = (new Date()).getTime();
}
if (tempDate != undefined && tempDate != 0) {
date = date + ((new Date()).getTime() - tempDate);
}
ispuse = 0;
startAnimation();
startMove();
}) function startMove() {
inter = setInterval(function () {
map.render();
}, speed);
} $("#stop").click(function () {
stopAnimation();
clearInterval(inter);
}) $("#next").click(function () {
index = index + 1;
date = date - speed;
map.render();
}) $("#prev").click(function () {
index = index - 1;
date = date + speed;
map.render();
}) </script>
openlayers轨迹播放的更多相关文章
- Openlayers 实现轨迹播放/暂停/重新播放/从点击处播放/提速/减速
说明: 我的需求是需要实现轨迹播放/暂停/重新播放/从点击处播放,因此封装了一个类 解决方案: 1.初始化:主要是处理一下图层以及数据,通过插值构造一个全局数组 /** * @description ...
- openlayers轨迹匀速播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- WebGIS中使用ZRender实现前端动态播放轨迹特效的方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 项目中需要在地图上以时间轴方式播放人员.车辆在地图上的历史行进 ...
- 轨迹系列4——WebGIS中使用ZRender实现轨迹前端动态播放特效
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 项目中需要在地图上以时间轴方式播放人员.车辆在地图上的历史行进 ...
- 完整版openlayer的例子及中文注释（完整中文版）
//@sourceURL=PersonLocation.jsvar window_temp = { onbeforeunload: null, DEBUG_MODE: false, MAPLIST: ...
- WebGIS博客文本分析（词频分析）手动扒取 去除格式 词语分割 统计分析
1. [置顶](一)开篇—杂谈WebGIS 摘要: 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.前言 ...
- WebAppBuilder独立于Portal之arcgis for js应用框架研究
1．前言 最近在做项目过程中,用到了WAB,先做一下总结和归类.Webappbuilder(简称WAB)是运行在portal或者online的一款webGIS开发应用程序,其代码开源并且具有优秀的设计 ...
- WebAppBuilder独立于portal之arcgis for js应用框架研究之二
WAB采用ArcGIS JavaScript for API作为地图开发底层,采用Web AppBuilder作为开发框架,利用该框架即拿即用的Widget来构建应用,比如制图.查询.地理处理.编辑. ...
- JavaScript 关于setTimeout与setInterval的小研究
说明 在开发功能"轨迹播放"时,遇到了一个情况. 原先同事已经开发了一版,这次有个新功能:点击线上任意一点后可以从点击处重新播放. 看了一下原来的版本,发现同时使用了setTime ...
随机推荐
- Keras入门（六）模型训练实时可视化
在北京做某个项目的时候,客户要求能够对数据进行训练.预测,同时能导出模型,还有在页面上显示训练的进度.前面的几个要求都不难实现,但在页面上显示训练进度当时笔者并没有实现. 本文将会分享如何在K ...
- 曹工说Spring Boot源码（19）-- Spring 带给我们的工具利器，创建代理不用愁（ProxyFactory）
写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...
- KVM管理工具webvirtmgr的使用
WebVirtMgr的日常配置:添加宿主机,创建虚拟机,磁盘扩容,快照等具体操作记录如下: 一.创建虚拟机 1.创建存储池 点击创建的宿主机,进入虚拟机部署界面 点击“存储池”按钮,创建存储池(即创建 ...
- 4，ZooKeeper原理
1,ZooKeeper概述 ··· 作用: · ZooKeeper是为分布式应用程序提供的一个分布式开源协调框架,是Hadoop和Hbase的重要组件: · 主要用于解决分布式集群中应 ...
- float布局打破标准流,神助攻clear清浮动
布局是什么?根据功能划分小块,再根据设计稿还原,书写静态页面,然后再在块里面填充内容,完善功能,js施加交互效果.div作为一个容器,独占一行,代码书写习惯从上至下属于标准流,而浮动float的css ...
- SDRAM的引脚封装标准
SDRAM从发展到现在已经经历了五代,分别是:第一代SDR SDRAM,第二代DDR SDRAM,第三代DDR2 SDRAM,第四代DDR3 SDRAM,第五代DDR4 SDRAM.第一代SDRAM采 ...
- Linux发行版Ubuntu下的Python开发环境的配置
linux下的Python安装, 首先我们需要使用都Shell一系列的命令(前面的linux基础可不是白学的哦!) 1.更新软件安装源地址 sudo apt-get update apt-get,是一 ...
- 【已解决2】pyinstaller UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xce in position 110: invalid continuation byte
python打包exe解码错误问题 最近做了一个小项目,其中把自己写的python打包成exe文件.我用的是pyinstaller. 只需要打包主程序py文件就ok. 在打包过程中,遇到一 ...
- 聊聊spring之贯穿全局的重要对象BeanDefinition
BeanDefinition 在 spring 中贯穿始终,spring 要根据 BeanDefinition 对象来实 例化 bean,只要把解析的标签,扫描的注解类封装成 BeanDefiniti ...
- cjson库的移植和使用
cjson 下载链接 https://github.com/DaveGamble/cJSON 下载完成将其中的cJson.c cJson.h复制到自己的项目中引用即可: 1.字符串转json格式 cJ ...