<!DOCTYPE html>
<html>
<head>
<title>leaflet扰动图斑历史时空播放</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="timelinejs/dist/css/timeline.css"/>
<script src="timelinejs/dist/js/timeline.js"></script>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
</style>
</head>
<body>
<!--<div id='map'>-->
<div class="timeline-container timeline-theme-1">
<div class="timeline js-timeline">
<div data-time="2019-08-27">
<div id="map"></div>
</div>
<div data-time="2019-08-26" style="display:none">
</div>
<div data-time="2019-08-25" style="display:none">
</div>
<div data-time="2019-08-24" style="display:none">
</div>
<div data-time="2019-08-23" style="display:none">
</div>
<div data-time="2019-08-22" style="display:none">
</div>
<div data-time="2019-08-21" style="display:none">
</div>
<div data-time="2019-08-20" style="display:none">
</div>
<div data-time="2019-08-19" style="display:none">
</div>
<div data-time="2019-08-18" style="display:none">
</div>
</div>
</div>
<!--</div>-->
<script>
$(function(){
//时间轴timeline控件引用github地址:https://github.com/ilkeryilmaz/timelinejs
$('.js-timeline').Timeline({
autoplay: false,//设置是否自动播放
isreplay:true,//在timeline原有的源码基础上，自己添加的一个属性，用来设置是否循环播放
autoplaySpeed:1500,//设置播放时间间隔
pauseOnHover: false
});
//动态计算map容器大小
$("#map").width($(".timeline-list").width());
$("#map").height($(".timeline-list").height());
var map = L.map('map',
{
attributionControl: false,
//crs: L.CRS.EPSG4326,
center: [23.431365122122635, 113.2348930835724],
zoom: 15
}
);
baseLayer = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 18
}).addTo(map);
timeSpotList = ['2019-08-27T16:00:00Z','2019-08-26T16:00:00Z','2019-08-25T16:00:00Z','2019-08-24T16:00:00Z','2019-08-23T16:00:00Z','2019-08-22T16:00:00Z','2019-08-21T16:00:00Z','2019-08-20T16:00:00Z','2019-08-19T16:00:00Z','2019-08-18T16:00:00Z'];
//地图叠加历史扰动图斑
spotWmsLayer = L.tileLayer.wms("http://localhost:8180/geoserver/gwc/service?", {
layers: 'DGSYS:historySpot', //需要加载的图层
format: "image/png", //返回的数据格式
transparent: true,
cql_filter: "atime = 2019-08-27T16:00:00Z"
}).addTo(map);
});
</script>
</body>
</html>
leaflet图斑历史时空播放.zip
版权申诉
17 浏览量
2024-06-19
16:39:30
上传
评论
收藏 9.65MB ZIP 举报
leaflet图斑历史时空播放.zip （46个子文件） 
leaflet图斑历史时空播放 
20191127_150850_ev.gif 2.98MB
123.png 1.97MB
spaceTimeSpot.html 3KB spot 
historySpot.shx 180B historySpot.shp.xml 9KB historySpot.prj 176B historySpot.dbf 5KB historySpot.qix 100B historySpot.sbn 204B historySpot.sbx 116B historySpot.shp 7KB timelinejs .git index 4KB HEAD 23B refs heads master 41B tags remotes origin HEAD 32B objects pack pack-f2e0dad8b2374a0c98d9bd98e7807d0e3153bb55.idx 9KB pack-f2e0dad8b2374a0c98d9bd98e7807d0e3153bb55.pack 1.69MB info description 73B packed-refs 242B info exclude 240B logs HEAD 184B refs heads master 184B remotes origin HEAD 184B hooks post-update.sample 189B prepare-commit-msg.sample 1KB commit-msg.sample 896B pre-receive.sample 544B update.sample 4KB pre-commit.sample 2KB pre-rebase.sample 5KB applypatch-msg.sample 478B fsmonitor-watchman.sample 3KB pre-applypatch.sample 424B pre-push.sample 1KB config 308B dist js timeline.min.js 5KB timeline.js 14KB img timeline-bg.png 79B date-icon-vertical.png 977B date-icon.png 141B timeline-vertical-bg.png 934B icons.png 15KB css timeline.min.css 2KB timeline.css 5KB timeline.scss 3KB
20191127_150850.mp4 3.16MB资源评论
skyJ
- 粉丝: 2669
- 资源: 2148
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
