section-positions-map.js
5.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/**
* @description : (TODO) 百度地图
*
* @author bsth@lq
*
* @version 1.0
*
*/
var SectionPWorldsBMap = function () {
// 定义地图对象、地图覆盖物、线性几何图形.
var mapValue = '',marker='', polyUpline='';
var Bmap = {
// 初始化地图.
init : function() {
// 设置中心点
var CENTER_POINT = {lng : 121.528733,lat : 31.237425};
// 百度API Key
var bdKey = '1TgEKvYqohJyeGXnN6yHSSTb4psOarQw';
// 初始化百度地图
mapValue = new BMap.Map('sectionPbmap_basic');
//中心点和缩放级别
mapValue.centerAndZoom(new BMap.Point(CENTER_POINT.lng,CENTER_POINT.lat), 15);
//启用地图拖拽事件，默认启用(可不写)
mapValue.enableDragging();
//启用地图滚轮放大缩小
mapValue.enableScrollWheelZoom();
//禁用鼠标双击放大
mapValue.disableDoubleClickZoom();
//启用键盘上下左右键移动地图
mapValue.enableKeyboard();
return mapValue;
},
// 绘制线路走向线性几何图形.
drawingUpline : function(r) {
var sectionBsectionVectorStr = r[0].sectionBsectionVector;
var tempStr = sectionBsectionVectorStr.substring(11,sectionBsectionVectorStr.length-1);
var lineArray = tempStr.split(',');
var polylineArray = [];
var lineaLen = lineArray.length
for(var i = 0;i<lineaLen;i++) {
polylineArray.push(new BMap.Point(lineArray[i].split(' ')[0],lineArray[i].split(' ')[1]));
}
var centerI = Math.ceil(lineaLen/2);
// 中心坐标点
var point = new BMap.Point(lineArray[centerI].split(' ')[0],lineArray[centerI].split(' ')[1]);
// 创建线路走向
polyUpline = new BMap.Polyline(polylineArray, {strokeColor : "#5298ff",strokeWeight : 6,strokeOpacity :1,strokeStyle:'solid'});
// 把折线添加到地图上
mapValue.addOverlay(polyUpline);
// 信息窗口参数属性
var opts = {
// 信息窗口宽度
width : 200,
// 信息窗口高度
height : 450,
// 信息窗位置偏移值。
offset: new BMap.Size(500,-80),
//标题
title : '<h4 style="color:#FFFFFF">'+r[0].sectionName+'站详情</h4>',
//设置不允许信窗发送短息
enableMessage : false,
//是否开启点击地图关闭信息窗口
enableCloseOnClick : false,
// 是否开启信息窗口打开时地图自动移动（默认开启）。(自 1.1 新增)
enableAutoPan:true
};
var htm = '<HR style="border:1 dashed #987cb9" width="100%" color=#987cb9 SIZE=1>'+
'<span style="color:#DDD;font-size: 15px;">路段名称：' + r[0].sectionName + '</span>' +
'<span class="help-block" style="color:#DDD;font-size: 15px;">路段编码：' + r[0].sectionCode + '</span>' +
'<span class="help-block" style="color:#DDD;font-size: 15px;">路段序号：' + r[0].sectionRouteCode + '</span>' +
'<span class="help-block" style="color:#DDD;font-size: 15px;">限 速：' + r[0].sectionSpeedLimit + '</span>' +
'<span class="help-block" style="color:#DDD;font-size: 15px;">路段长度：' + r[0].sectionDistance + '</span>' +
'<span class="help-block" style="color:#DDD;font-size: 15px;">路段时间：' + r[0].sectionTime + '</span>' +
'<span class="help-block" style="width: 100%;font-size: 15px;;color:#DDD; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; " title="'+ 'ddd' +'" >说明/描述：' + 'ddd' + '</span>' ;
// 创建信息窗口
var infoWindow_target = new BMap.InfoWindow(htm, opts);
// 自定义标注物图片
var icon_target = new BMap.Icon('/pages/base/stationroute/css/img/blank.gif',new BMap.Size(20, 20));
// 创建点
marker = new BMap.Marker(point,{icon : icon_target});
// 把标注添物加到地图上
mapValue.addOverlay(marker);
//开启信息窗口
marker.openInfoWindow(infoWindow_target,point);
var PanOptions_ ={noAnimation :true};
mapValue.reset();
mapValue.panTo(point,PanOptions_);
mapValue.panBy(0,-110,PanOptions_);
mapValue.setZoom(14);
},
// 编辑线路走向几何线性图形.
editPolyUpline : function() {
// 禁止覆盖物在map.clearOverlays方法中被清除。(自 1.1 新增)
polyUpline.disableMassClear();
SectionPWorldsBMap.clearMarkAndOverlays();
// 允许覆盖物在map.clearOverlays方法中被清除。(自 1.1 新增)
polyUpline.enableMassClear();
// 开启线路编辑
polyUpline.enableEditing();
// 添加双击折线保存事件
polyUpline.addEventListener('dblclick',function(e) {
// 关闭
layer.closeAll();
polyUpline.disableEditing();
// 获取折线坐标集合
var editPloyLineArray = polyUpline.getPath();
EditSectionObj.setEitdBsectionVector(JSON.stringify(editPloyLineArray));
polyUpline= '';
// 加载修改路段弹出层mobal页面
$.get('editsection.html', function(m){
$(pjaxContainer).append(m);
$('#edit_section_mobal').trigger('editSectionMobal_show', [SectionPWorldsBMap,GetAjaxData,EditSectionObj,PositionsPublicFunctions]);
});
});
},
// 清楚地图覆盖物
clearMarkAndOverlays : function() {
mapValue.clearOverlays();
mapValue.removeOverlay();
}
}
return Bmap;
}();