section-positions-map.js
6.27 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/**
* @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};
// 初始化百度地图
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(section) {
var bsectionVectorWkt = section.bsectionVectorWkt;
var tempStr = bsectionVectorWkt.substring(11, bsectionVectorWkt.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'});
polyUpline.cdata = section;
// 把折线添加到地图上
mapValue.addOverlay(polyUpline);
// 信息窗口参数属性
var opts = {
// 信息窗口宽度
width : 200,
// 信息窗口高度
height : 350,
// 信息窗位置偏移值。
offset: new BMap.Size(0, 0),
//标题
title : '<h4 style="color:#FFFFFF">' + section.sectionName + ' 路段详情</h4>',
//设置不允许信窗发送短息
enableMessage : false,
//是否开启点击地图关闭信息窗口
enableCloseOnClick : true,
// 是否开启信息窗口打开时地图自动移动（默认开启）。(自 1.1 新增)
enableAutoPan:true
};
var html = new Array();
html.push('<HR style="border:1 dashed #987cb9" width="100%" color=#987cb9 SIZE=1>');
html.push('<span style="color:#DDD;font-size: 15px;">路段名称：');html.push(section.sectionName);html.push('</span>');
html.push('<span class="help-block" style="color:#DDD;font-size: 15px;">路段编码：');html.push(section.sectionCode);html.push('</span>');
html.push('<span class="help-block" style="color:#DDD;font-size: 15px;">交叉路段：');html.push(section.crosesRoad);html.push('</span>');
html.push('<span class="help-block" style="color:#DDD;font-size: 15px;">东西向：');html.push((section.ewDirection === undefined ? '' : section.ewDirection == 0 ? '东->西' : '西->东'));html.push('</span>');
html.push('<span class="help-block" style="color:#DDD;font-size: 15px;">南北向：');html.push((section.snDirection === undefined ? '' : section.snDirection == 0 ? '南->北' : '北->南'));html.push('</span>');
html.push('<span class="help-block" style="color:#DDD;font-size: 15px;">路段限速：');html.push(section.speedLimit);html.push('</span>');
html.push('<span class="help-block" style="color:#DDD;font-size: 15px;">路段长度：');html.push(section.sectionDistance);html.push('</span>');
html.push('<button class="info_win_btn" onclick="SectionPWorldsBMap.editSection(');html.push(section.id);html.push(');">修改路段信息</button>');
html.push('<button class="info_win_btn" onclick="SectionPWorldsBMap.editPolyUpline(');html.push(section.id);html.push(');">移动路段位置</button>');
// 创建信息窗口
var infoWindow = new BMap.InfoWindow(html.join(''), 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);
var PanOptions_ ={noAnimation :true};
mapValue.reset();
mapValue.panTo(point,PanOptions_);
mapValue.panBy(0,-110,PanOptions_);
mapValue.setZoom(14);
polyUpline.addEventListener("click", function(event) {
mapValue.addOverlay(marker);
marker.setPosition(event.target.getPath()[0]);
marker.openInfoWindow(infoWindow);
});
},
// 编辑线路走向几何线性图形.
editPolyUpline : function() {
polyUpline.disableMassClear();
SectionPWorldsBMap.clearMarkAndOverlays();
polyUpline.enableMassClear();
polyUpline.enableEditing();
polyUpline.addEventListener('rightclick', Bmap.confirmPolyline);
layer.msg('拖动路段至相应位置，然后右击确定!');
},
confirmPolyline: function (event) {
polyUpline.removeEventListener('rightclick', Bmap.confirmPolyline);
polyUpline.disableEditing();
var points = event.target.getPath(), bsectionVectorWkt = new Array();
for (var i = 0;i < points.length;i++) {
bsectionVectorWkt.push(points[i].lng + ' ' + points[i].lat);
}
GetAjaxData.sectionUpdate({id: event.target.cdata.id, bsectionVectorWkt: 'LINESTRING(' + bsectionVectorWkt.join(',') + ')'}, function(result) {
if (result.status == 'SUCCESS') {
// 弹出添加成功提示消息
layer.msg('修改成功...');
} else {
// 弹出添加失败提示消息
layer.msg('修改失败...');
}
});
},
editSection: function() {
// 关闭
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_modal').trigger('modal.show', [SectionPWorldsBMap,GetAjaxData,EditSectionObj,PositionsPublicFunctions]);
});
},
// 清楚地图覆盖物
clearMarkAndOverlays : function() {
mapValue.clearOverlays();
mapValue.removeOverlay();
}
}
return Bmap;
}();