Skip to content

Commit 3f78707

Browse files
libmwlibmw
committed
add page switch
1 parent 6c37837 commit 3f78707

File tree

2 files changed

+83
-45
lines changed

2 files changed

+83
-45
lines changed

‎_posts/2019-02-02-car-list.md

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -113,32 +113,6 @@
113113
});
114114
}
115115
},
116-
getFiles: function (fileList){
117-
var _this = this;
118-
var imgCtn = document.getElementById('imgCtn');
119-
for(var i = 0; i < fileList.length; i++){
120-
var file = fileList[i];
121-
if(file.type.indexOf('image') === -1){
122-
console.log('此文件不是图片：', file.name);
123-
continue;
124-
}
125-
if(window.URL.createObjectURL){ //使用完成后可以通过revokeObjectURL释放内存
126-
var tempImg = document.createElement('img');
127-
tempImg.src = window.URL.createObjectURL(file);
128-
console.log('通过URL创建图片',file);
129-
//imgCtn.appendChild(tempImg);
130-
EXIF.getData(file, function() {
131-
var lon = EXIF.getTag(this, "GPSLongitude");
132-
var lat = EXIF.getTag(this, "GPSLatitude");
133-
var GPSLongitudeRef = EXIF.getTag(this, "GPSLongitudeRef");
134-
var GPSLatitudeRef = EXIF.getTag(this, "GPSLatitudeRef");
135-
makeAndModel.innerHTML = `${lon} ${GPSLongitudeRef} ${lat} ${GPSLatitudeRef}`;
136-
_this.renderPoint(lon, lat, GPSLongitudeRef, GPSLatitudeRef);
137-
_this.renderPictureDetail(this);
138-
});
139-
}
140-
}
141-
},
142116
ConvertDMSToDD: function (degrees, minutes, seconds, direction) {
143117
var dd = degrees + minutes/60 + seconds/(60*60);
144118
if (direction == "S" || direction == "W") {

‎_posts/2019-02-02-car-location.md

Lines changed: 83 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,13 @@
4949
<label for="pointCount">点数量：</label>
5050
<input id="pointCount" type="text" value="500" />
5151
<input id="searchButton" type="submit" value="查询" />
52-
<input id="prevButton" type="button" value="前一天" />
53-
<input id="nextButton" type="button" value="后一天" />
52+
<input id="prevDateButton" type="button" value="前一天" />
53+
<input id="nextDateButton" type="button" value="后一天" />
54+
<input id="prevPageButton" type="button" value="上一页" />
55+
<input id="nextPageButton" type="button" value="下一页" />
5456
</form>
55-
<div id="log" class="log"></div>
57+
<div id="log" class="log">
58+
</div>
5659
</div>
5760
<div class="container" id="baiduMapCtn"></div>
5861
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=XwGhtOZnTOQk7lFssFiI1GR3"></script>
@@ -101,6 +104,9 @@
101104
}
102105
function splitDatapointsByVelocity(dataPoints){
103106
let splitedPoints = [];
107+
splitedPoints.count = dataPoints.length;
108+
splitedPoints.startTime = dataPoints[0].at;
109+
splitedPoints.endTime = dataPoints[dataPoints.length - 1].at;
104110
let currentVelocityGroup,
105111
previousVelocityGroup = getVelocityGroup(calcVelocity(dataPoints[0], dataPoints[1])),
106112
tempPoints = {
@@ -132,15 +138,20 @@
132138
var $startTime = $('startTime');
133139
var $endTime = $('endTime');
134140
var $pointCount = $('pointCount');
135-
var $prevButton = $('prevButton');
136-
var $nextButton = $('nextButton');
141+
var $prevDateButton = $('prevDateButton');
142+
var $nextDateButton = $('nextDateButton');
143+
var $prevPageButton = $('prevPageButton');
144+
var $nextPageButton = $('nextPageButton');
137145
var $searchButton = $('searchButton');
138146
var $log = $('log');
139147
$('baiduMapCtn').style.height = (document.body.offsetHeight - $('head').offsetHeight) + 'px'
140148
function CarMarker(deviceId, start, end){
141149
var _this = this;
142150
this.start = start;
143151
this.end = end;
152+
this.pointsCache = {};
153+
this.cursorListOfPageIndex = [1];
154+
this.currentPageIndex = 0;
144155
var api = new OneNetApi($apiKey.value);
145156
this._api = api;
146157
api.getDeviceInfo(deviceId).then(function(res){
@@ -150,40 +161,92 @@
150161
});
151162
}
152163
CarMarker.prototype.showHistory = function(deviceId){
164+
var _this = this;
153165
this._api.getDataPoints(deviceId, {datastream_id:'Gps', start: this.start, end: this.end, limit: $pointCount.value}).then(function(res){
154166
console.log('api调用完成，服务器返回data为：', res);
155-
$log.innerHTML = '本次共渲染' + res.data.count + '个点';
156-
pageControl.baiduMap.resetMarker(splitDatapointsByVelocity(res.data.datastreams[0].datapoints));
167+
$log.innerHTML = '当前第1页，本次共渲染' + res.data.count + '个点';
168+
if(res.data.cursor){ //加入第二页的corsor
169+
_this.cursorListOfPageIndex[1] = res.data.cursor;
170+
}
171+
var splitedPoints = splitDatapointsByVelocity(res.data.datastreams[0].datapoints);
172+
pageControl.baiduMap.resetMarker(splitedPoints);
173+
_this.pointsCache[1] = splitedPoints;
174+
});
175+
}
176+
CarMarker.prototype.showDataByPageIndex = function(pageIndex){
177+
var cursor = this.cursorListOfPageIndex[pageIndex];
178+
if(!cursor){
179+
$log.innerHTML = '当前第' + (pageIndex + 1) + '页，本次共渲染0个点';
180+
return;
181+
}
182+
var splitedPoints = this.pointsCache[cursor];
183+
if(splitedPoints){
184+
pageControl.baiduMap.resetMarker(splitedPoints);
185+
$log.innerHTML = '当前第' + (pageIndex + 1) + '页，本次共渲染' + splitedPoints.count + '个点';
186+
return;
187+
}
188+
var _this = this;
189+
this._api.getDataPoints($deviceId.value, {datastream_id:'Gps', start: this.start, end: this.end, limit: $pointCount.value, cursor: cursor}).then(function(res){
190+
if(res.data.cursor){ //加入下一页的corsor
191+
_this.cursorListOfPageIndex[pageIndex + 1] = res.data.cursor;
192+
}
193+
var splitedPoints = splitDatapointsByVelocity(res.data.datastreams[0].datapoints);
194+
pageControl.baiduMap.resetMarker(splitedPoints);
195+
_this.pointsCache[cursor] = splitedPoints;
196+
$log.innerHTML = '当前第' + (pageIndex + 1) + '页，本次共渲染' + splitedPoints.count + '个点';
157197
});
158198
}
199+
CarMarker.prototype.renderPrevPage = function(){
200+
if(this.currentPageIndex == 0){
201+
return;
202+
}
203+
this.showDataByPageIndex(--this.currentPageIndex);
204+
};
205+
CarMarker.prototype.renderNextPage = function(){
206+
this.showDataByPageIndex(++this.currentPageIndex);
207+
};
159208
var pageControl = {
160209
init: function(){
161-
this.baiduMapCtn = document.getElementById("baiduMapCtn");
210+
this.baiduMapCtn = document.getElementById('baiduMapCtn');
162211
this.baiduMap.init(this.baiduMapCtn);
163212
var _this = this;
164213
this.initTimeRound(new Date());
165-
if(localStorage.getItem('apiKey')){
166-
//0XlwMJm8U42KEZ394N4p8hm2p=s=
214+
if(localStorage.getItem('apiKey')){//0XlwMJm8U42KEZ394N4p8hm2p=s=
167215
$apiKey.value = localStorage.getItem('apiKey');
168216
}
217+
if(localStorage.getItem('deviceId')){//517162506
218+
$deviceId.value = localStorage.getItem('deviceId');
219+
}
220+
if(localStorage.getItem('pointCount')){//500
221+
$pointCount.value = localStorage.getItem('pointCount');
222+
}
169223
$searchButton.onclick = function(e){
170224
if($apiKey.value.trim()){
171225
localStorage.setItem('apiKey', $apiKey.value.trim());
172226
}
227+
if($deviceId.value.trim()){
228+
localStorage.setItem('deviceId', $deviceId.value.trim());
229+
}
230+
if($pointCount.value.trim()){
231+
localStorage.setItem('pointCount', $pointCount.value.trim());
232+
}
173233
e.preventDefault();
174-
new CarMarker($deviceId.value, $startTime.value, $endTime.value);
234+
_this.carMarker = new CarMarker($deviceId.value, $startTime.value, $endTime.value);
175235
}
176-
$prevButton.onclick = function(){
236+
$prevDateButton.onclick = function(){
177237
var dateCurrent = new Date($startTime.value);
178238
var dateNew = new Date(+dateCurrent - 3600 * 1000 * 24);
179239
_this.initTimeRound(dateNew);
180240
$searchButton.click();
181241
}
182-
$nextButton.onclick = function(){
183-
var dateCurrent = new Date($startTime.value);
184-
var dateNew = new Date(+dateCurrent + 3600 * 1000 * 24);
185-
_this.initTimeRound(dateNew);
186-
$searchButton.click();
242+
$nextDateButton.onclick = function(){
243+
_this.carMarker.renderPrevPage();
244+
}
245+
$prevPageButton.onclick = function(){
246+
_this.carMarker.renderPrevPage();
247+
}
248+
$nextPageButton.onclick = function(){
249+
_this.carMarker.renderNextPage();
187250
}
188251
},
189252
initTimeRound: function(date){
@@ -214,7 +277,6 @@
214277
resetMarker: function(splitedPoints){
215278
this.map.clearOverlays();
216279
var _this = this;
217-
console.log(splitedPoints)
218280
splitedPoints.forEach(item => {
219281
_this.drawLine(item.points, VelocityGroupColor[item.velocityGroup]);
220282
});
@@ -231,8 +293,11 @@
231293
});
232294
var endPoints = splitedPoints[splitedPoints.length - 1].points;
233295
var markerEnd = new BMap.Marker(endPoints[endPoints.length - 1], {icon:iconEnd});
296+
markerStart.setLabel(new BMap.Label(splitedPoints.startTime, {offset: new BMap.Size(-20,-20)}));
297+
markerEnd.setLabel(new BMap.Label(splitedPoints.endTime, {offset: new BMap.Size(-20,-20)}));
234298
this.map.addOverlay(markerStart);
235299
this.map.addOverlay(markerEnd);
300+
this.map.setViewport([splitedPoints[0].points[0], endPoints[endPoints.length - 1]]);
236301
},
237302
drawLine: function(pointsArr, color){
238303
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
@@ -250,7 +315,6 @@
250315
strokeColor: color //折线颜色
251316
});
252317
this.map.addOverlay(polyline);
253-
this.map.centerAndZoom(pointsArr[0], 15);
254318
}
255319
}
256320
};

0 commit comments

Comments
 (0)