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>
<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',
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
})
});
} 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>
openlayers按坐标点播放的更多相关文章
- OpenLayers 根据坐标动态画多边形
找了一上午,发现都是鼠标点击画框的,那为什么不标明了是 “鼠标”点击 呢? 想实现的功能是数据库检索坐标集合,然后根据分组提取4点坐标,最后把多个多边形形成图层放在地图上. 最后的实现: <!D ...
- C#基础教程/适合初学者
C#基础教程 第一章 C#语言基础 本章介绍C#语言的基础知识,希望具有C语言的读者能够基本掌握C#语言,并以此为基础,能够进一步学习用C#语言编写window应用程序和Web应用程序.当 ...
- Openlayers 实现轨迹播放/暂停/重新播放/从点击处播放/提速/减速
说明: 我的需求是需要实现轨迹播放/暂停/重新播放/从点击处播放,因此封装了一个类 解决方案: 1.初始化:主要是处理一下图层以及数据,通过插值构造一个全局数组 /** * @description ...
- OpenLayers学习笔记（四）— QML显示html中openlayers地图的坐标
GitHub:八至 作者:狐狸家的鱼 本文链接:实现QML中显示html中地图的坐标 如何QML与HTML通信已经在这篇文章 QML与HTML通信之画图 详细讲述了 1.HTML var coord; ...
- openlayers轨迹匀速播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- openlayers轨迹播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iOS开发系列--音频播放、录音、视频播放、拍照、视频录制
--iOS多媒体 概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制, ...
- HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web ...
- delphi实现的RTMP播放
其实知道原理用什么语言实现都是可以的 1. 服务器 提供http服务, 点击start运行. 2. 测试客户端 定时获取http服务的数据, 坐标是服务器中写死的, 在中国地图中画了一个圈. 如: { ...
随机推荐
- Mac-Mysql忘记root密码
cd /usr/local/mysql/bin 切换到root权限 ,需要输入密码: sudo su 输入之后会看见如下信息: sh-3.2# 使用如下命令以安全模式运行mysql ./mysqld_ ...
- postman批量接口测试/批量导入/批量参数化简要全过程及遇到问题处理方法
简单说明下postman批量接口调用的过程及注意事项: 1.报文调试(建议先调通再批量执行,统筹安排时间) 2.参数化,例如: "address": "{{address ...
- 浅谈无线局域网WLAN
无线局域网WLAN 一.概述 有线局域网的组成如下图所示,多台计算机通过双绞线连接到一个集线器(hub)或交换机(switch)上,组成一个有限局域网. 无线局域网的组成如下图所示,多台计算机通过无线 ...
- filebeat+kafka
kafka出现接收不到filebeat数据,最后发现版本兼容问题 filebeat换成 filebeat-7.4.2-linux-x86_64 kafka是docker-compose启动的,版本是 ...
- php 安装 event 和 libevent 扩展
这里使用的是php7.0.24 ,php是yum安装的 一.安装event扩展 用yum无法安装event扩展 手动安装 php 必须要开启 sockets 功能,需要安装php的socket扩展,才 ...
- 根据map中的某一key进行排序（快速排序实现）
/** * @author Gaoxl * 根据key值排序,要求key值能够转为Long类型(快速排序) * @param maps * @param key * @return */ public ...
- drf认证组件、权限组件、jwt认证、签发、jwt框架使用
目录 一.注册接口 urls.py views.py serializers.py 二.登录接口 三.用户中心接口(权限校验) urls.py views.py serializers.py 四.图书 ...
- Chrome开发者工具使用指南
前言 工欲善其事,必先利其器. 在前端工作中,我们常常使用到Chrome开发者工具去做各种各样的事情. 但是您真的了解这些开发者工具吗? 官方文档还是挺详细的:chrome-devtools文档. 但 ...
- [MySQL]mysql binlog回滚数据
1.先开启binlog log-bin = /var/log/mysql/mysql_bin #binlog日志文件,以mysql_bin开头,六个数字结尾的文件:mysql_bin.000001,并 ...
- Lucene之索引库的维护：添加，删除，修改
索引添加 Field域属性分类 添加文档的时候,我们文档当中包含多个域,那么域的类型是我们自定义的,上个案例使用的TextField域,那么这个域他会自动分词,然后存储 我们要根据数据类型和数据的用途 ...