Skip to content

Commit 6cc1b7d

Browse files
libmwlibmw
committed
add segments
1 parent d624b4e commit 6cc1b7d

File tree

1 file changed

+104
-73
lines changed

1 file changed

+104
-73
lines changed

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

Lines changed: 104 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
</form>
6060
<div id="log" class="log">
6161
</div>
62+
<div id="lineGroupControl"></div>
6263
</div>
6364
<div class="container" id="baiduMapCtn"></div>
6465
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=XwGhtOZnTOQk7lFssFiI1GR3"></script>
@@ -224,6 +225,7 @@
224225
var $searchButton = $('searchButton');
225226
var $searchForm = $('searchForm');
226227
var $log = $('log');
228+
var $lineGroupControl = $('lineGroupControl');
227229
$searchForm.onsubmit = function(e){
228230
e.preventDefault();
229231
}
@@ -252,7 +254,7 @@
252254
}
253255
var splitedPoints = convertPoints(res.data.datastreams[0].datapoints);
254256
$log.innerHTML = '当前第1页，本次共渲染' + splitedPoints.count + '个点';
255-
pageControl.baiduMap.resetMarker(splitedPoints);
257+
pageControl.renderLineGroup(splitedPoints);
256258
_this.pointsCache[1] = splitedPoints;
257259
});
258260
}
@@ -264,7 +266,7 @@
264266
}
265267
var splitedPoints = this.pointsCache[cursor];
266268
if(splitedPoints){
267-
pageControl.baiduMap.resetMarker(splitedPoints);
269+
pageControl.renderLineGroup(splitedPoints);
268270
$log.innerHTML = '当前第' + (pageIndex + 1) + '页，本次共渲染' + splitedPoints.count + '个点';
269271
return;
270272
}
@@ -275,7 +277,7 @@
275277
}
276278
//var pointsTimeGroup = splitDatapointsByTime(res.data.datastreams[0].datapoints);
277279
var splitedPoints = convertPoints(res.data.datastreams[0].datapoints);
278-
pageControl.baiduMap.resetMarker(splitedPoints);
280+
pageControl.renderLineGroup(splitedPoints);
279281
_this.pointsCache[cursor] = splitedPoints;
280282
$log.innerHTML = '当前第' + (pageIndex + 1) + '页，本次共渲染' + splitedPoints.count + '个点';
281283
});
@@ -336,6 +338,17 @@
336338
$nextPageButton.onclick = function(){
337339
_this.carMarker.renderNextPage();
338340
}
341+
$lineGroupControl.onclick = function(e){
342+
//console.log(e,e.target.nodeName,e.target.checked,e.target.getAttribute('data-index'));
343+
var target = e.target;
344+
var currentLineGroup;
345+
if(target.nodeName.toUpperCase() == 'INPUT'){
346+
var index = parseInt(target.getAttribute('data-index'));
347+
var showCurrent = target.checked;
348+
currentLineGroup = _this.lineGroupArr[index];
349+
currentLineGroup[showCurrent ? 'show' : 'hide']();
350+
}
351+
}
339352
},
340353
initTimeRound: function(date){
341354
var dateNow = new Date(date);
@@ -350,78 +363,96 @@
350363
// 创建点坐标
351364
map.centerAndZoom(point, 15);
352365
// 初始化地图，设置中心点坐标和地图级别
353-
var marker = new BMap.Marker(point); // 创建点
354366
map.enableScrollWheelZoom(true);
355-
map.addOverlay(marker);
356-
this.marker = marker;
357367
this.map = map;
358-
},
359-
generateMarker: function(point){
360-
// 初始化地图，设置中心点坐标和地图级别
361-
var marker = new BMap.Marker(point); // 创建点
362-
this.map.addOverlay(marker);
363-
return marker;
364-
},
365-
resetMarker: function(splitedPoints){
366-
this.map.clearOverlays();
367-
var _this = this;
368-
var edgePoints = [];
369-
splitedPoints.forEach(pointsGroup => {
370-
edgePoints = edgePoints.concat(_this.drawGroup(pointsGroup));
371-
});
372-
this.map.setViewport(edgePoints);
373-
},
374-
drawGroup: function(pointsGroup){
375-
var _this = this;
376-
var count = 0;
377-
console.log(pointsGroup);
378-
pointsGroup.forEach(item => {
379-
count+= item.points.length;
380-
_this.drawLine(item.points, VelocityGroupColor[item.velocityGroup]);
381-
});
382-
console.log('实际渲染',count);
383-
//加入marker
384-
var iconStart = new BMap.Icon('/resource/2019/markers_bg.png', new BMap.Size(25,40), {
385-
imageSize: new BMap.Size(50, 40),
386-
anchor: new BMap.Size(12, 40)
387-
});
388-
var markerStart = new BMap.Marker(pointsGroup[0].points[0], {icon:iconStart});
389-
var iconEnd = new BMap.Icon('/resource/2019/markers_bg.png', new BMap.Size(25,40), {
390-
imageOffset: new BMap.Size(-25,0),
391-
imageSize: new BMap.Size(50, 40),
392-
anchor: new BMap.Size(12, 40)
393-
});
394-
var endPoints = pointsGroup[pointsGroup.length - 1].points;
395-
var markerEnd = new BMap.Marker(endPoints[endPoints.length - 1], {icon:iconEnd});
396-
markerStart.setLabel(new BMap.Label(pointsGroup.startTime, {offset: new BMap.Size(-20,-20)}));
397-
markerEnd.setLabel(new BMap.Label(pointsGroup.endTime, {offset: new BMap.Size(-20,-20)}));
398-
this.map.addOverlay(markerStart);
399-
this.map.addOverlay(markerEnd);
400-
return [pointsGroup[0].points[0], endPoints[endPoints.length - 1]];
401-
},
402-
drawLine: function(pointsArr, color){
403-
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
404-
scale: 0.6,//图标缩放大小
405-
strokeColor:'#fff',//设置矢量图标的线填充颜色
406-
strokeWeight: '2',//设置线宽
407-
});
408-
var icons = new BMap.IconSequence(sy, '10', '30');
409-
var polyline =new BMap.Polyline(pointsArr, {
410-
enableEditing: false,//是否启用线编辑，默认为false
411-
enableClicking: false,//是否响应点击事件，默认为true
412-
//icons:[icons],
413-
strokeWeight:'7',//折线的宽度，以像素为单位
414-
strokeOpacity: 1,//折线的透明度，取值范围0 - 1
415-
strokeColor: color //折线颜色
416-
});
417-
this.map.addOverlay(polyline);
418368
}
419-
}
369+
},
370+
renderLineGroup: function(splitedPoints){
371+
var map = this.baiduMap.map;
372+
map.clearOverlays();
373+
var _this = this;
374+
var edgePoints = [];
375+
var lineGroupArr = [];
376+
splitedPoints.forEach(pointsGroup => {
377+
let lineGroup = new LineGroup(map, pointsGroup);
378+
edgePoints = edgePoints.concat([lineGroup.startPoint, lineGroup.endPoint]);
379+
lineGroupArr.push(lineGroup);
380+
});
381+
map.setViewport(edgePoints);
382+
this.lineGroupArr = lineGroupArr;
383+
this.renderLineGroupController(lineGroupArr);
384+
},
385+
renderLineGroupController: function(lineGroupArr){
386+
var html = '';
387+
lineGroupArr.forEach((i, index) => {
388+
html += `<label><input type="checkbox" data-index="${index}" checked />第${index + 1}段</label>`;
389+
});
390+
$lineGroupControl.innerHTML = html;
391+
}
420392
};
421393
pageControl.init();
422-
/* new CarMarker(517341974);
423-
new CarMarker(517341975);
424-
new CarMarker(517341976);
425-
new CarMarker(517341977);
426-
new CarMarker(517341978); */
427-
</script>
394+
function LineGroup(baiduMap, pointsGroup){
395+
this.baiduMap = baiduMap;
396+
this.startPoint = pointsGroup[0].points[0];
397+
var endPoints = pointsGroup[pointsGroup.length - 1].points;
398+
this.endPoint = endPoints[endPoints.length - 1];
399+
this.overlayGroup = [];
400+
this.draw(pointsGroup);
401+
}
402+
LineGroup.prototype.draw = function(pointsGroup){
403+
var _this = this;
404+
var count = 0;
405+
pointsGroup.forEach(item => {
406+
count += item.points.length;
407+
var polyline = _this.drawLine(item.points, VelocityGroupColor[item.velocityGroup]);
408+
this.overlayGroup.push(polyline);
409+
});
410+
//起始点
411+
var startIcon = new BMap.Icon('/resource/2019/markers_bg.png', new BMap.Size(25,40), {
412+
imageSize: new BMap.Size(50, 40),
413+
anchor: new BMap.Size(12, 40)
414+
});
415+
var startMarker = new BMap.Marker(this.startPoint, {icon: startIcon});
416+
startMarker.setLabel(new BMap.Label(pointsGroup.startTime, {offset: new BMap.Size(-20,-20)}));
417+
//结束点
418+
var endIcon = new BMap.Icon('/resource/2019/markers_bg.png', new BMap.Size(25,40), {
419+
imageOffset: new BMap.Size(-25,0),
420+
imageSize: new BMap.Size(50, 40),
421+
anchor: new BMap.Size(12, 40)
422+
});
423+
var endMarker = new BMap.Marker(this.endPoint, {icon: endIcon});
424+
endMarker.setLabel(new BMap.Label(pointsGroup.endTime, {offset: new BMap.Size(-20,-20)}));
425+
this.baiduMap.addOverlay(startMarker);
426+
this.baiduMap.addOverlay(endMarker);
427+
this.overlayGroup.push(startMarker);
428+
this.overlayGroup.push(endMarker);
429+
}
430+
LineGroup.prototype.drawLine = function(pointsArr, color){
431+
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
432+
scale: 0.6,//图标缩放大小
433+
strokeColor:'#fff',//设置矢量图标的线填充颜色
434+
strokeWeight: '2',//设置线宽
435+
});
436+
var icons = new BMap.IconSequence(sy, '10', '30');
437+
var polyline = new BMap.Polyline(pointsArr, {
438+
enableEditing: false,//是否启用线编辑，默认为false
439+
enableClicking: false,//是否响应点击事件，默认为true
440+
//icons:[icons],
441+
strokeWeight:'7',//折线的宽度，以像素为单位
442+
strokeOpacity: 1,//折线的透明度，取值范围0 - 1
443+
strokeColor: color //折线颜色
444+
});
445+
this.baiduMap.addOverlay(polyline);
446+
return polyline;
447+
}
448+
LineGroup.prototype.show = function(){
449+
this._setVisible(1);
450+
}
451+
LineGroup.prototype.hide = function(){
452+
this._setVisible(0);
453+
}
454+
LineGroup.prototype._setVisible = function(visible){
455+
var map = this.baiduMap;
456+
this.overlayGroup.forEach(overlay => overlay[visible ? 'show' : 'hide']());
457+
}
458+
</script>

0 commit comments

Comments
 (0)