bmap.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481
  1. function bmap(_div ) {
  2. return bmap(_div , null , null,false , false,false);
  3. }
  4. /**
  5. * 创建百度地图
  6. * @param _div 地图所处div
  7. * @param _centerPoint 地图当前中心点
  8. * @param _mapZoom 当前缩放层级 0-19
  9. * @param _is_hybrid_map 是否卫星图
  10. * @param _overView 是否包含鹰眼图
  11. * @returns 百度地图 Bmap
  12. */
  13. function bmap(_div ,_centerPoint , _mapZoom , _is_hybrid_map , _overView , _navigation ) {
  14. var map = _is_hybrid_map ? new BMap.Map(_div, {mapType: BMAP_HYBRID_MAP}) : new BMap.Map(_div); // 创建Map实例
  15. if(_centerPoint && _mapZoom) {
  16. map.centerAndZoom(_centerPoint, _mapZoom); // 初始化地图,设置中心点坐标和地图级别
  17. } else {
  18. var point = new BMap.Point(116.404, 39.915);//, 11
  19. map.centerAndZoom(point, 11);
  20. }
  21. map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  22. if(_navigation) {
  23. var top_left_navigation = new BMap.NavigationControl(/*{type:BMAP_NAVIGATION_CONTROL_ZOOM}*/); //左上角,添加默认缩放平移控件
  24. map.addControl(top_left_navigation); //
  25. }
  26. if(_overView) {
  27. var overView = new BMap.OverviewMapControl();
  28. var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
  29. map.addControl(overView); //添加默认缩略地图控件
  30. map.addControl(overViewOpen); //右下角,打开
  31. }
  32. return map ;
  33. }
  34. function ComplexCustomOverlay(point ){
  35. this._point = point;
  36. }
  37. ComplexCustomOverlay.prototype = new BMap.Overlay();
  38. ComplexCustomOverlay.prototype.initialize = function(map){
  39. this._map = map;
  40. var div = this._div = document.createElement("div");
  41. div.style.position = "absolute";
  42. var arrow = this._arrow = document.createElement("div");
  43. arrow.style.position = "absolute";
  44. arrow.style.overflow = "hidden";
  45. div.appendChild(arrow);
  46. arrow.className="css_animation";
  47. map.getPanes().labelPane.appendChild(div);
  48. return div;
  49. }
  50. ComplexCustomOverlay.prototype.draw = function(){
  51. var map = this._map;
  52. var pixel = map.pointToOverlayPixel(this._point);
  53. this._div.style.left = pixel.x - 25 + "px";
  54. this._div.style.top = pixel.y - 25 + "px";
  55. }
  56. ComplexCustomOverlay.prototype.setPosition = function(point) {
  57. this._point = point ;
  58. }
  59. /**
  60. * 添加一个闪烁点
  61. * @param lon
  62. * @param lat
  63. * @returns
  64. */
  65. function addComplexOverlay(map , point , iconUrl , id , info) {
  66. if(!id) {
  67. id = -1;
  68. }
  69. var c = new ComplexCustomOverlay(point);
  70. c.id = id ;
  71. cs.push(c);
  72. map.addOverlay(c);
  73. var m = new BMap.Marker(point ); // 创建标注
  74. m.id = id;
  75. ms.push(m);
  76. if(info) {
  77. var label = new BMap.Label(info ); // 创建文本标注对象
  78. //label.setStyle({ color : "white", fontSize : "14px" });
  79. m.setLabel(label);
  80. }
  81. if(iconUrl) {
  82. var size = new BMap.Size(36,36);
  83. var icon = new BMap.Icon( iconUrl , size , {imageOffset: new BMap.Size(0, 0)} );
  84. m.setIcon(icon);
  85. }
  86. map.addOverlay(m); // 将标注添加到地图中
  87. }
  88. var ms = [] ;
  89. var cs = [] ;
  90. /**
  91. * 添加一个闪烁点
  92. * @param lon
  93. * @param lat
  94. * @returns
  95. */
  96. function mergeComplexOverlay(map , point , iconUrl , id , info) {
  97. var m , c ;
  98. if(!id) {
  99. id = -1;
  100. }
  101. for(var i = 0 ; i < ms.length ; i++) {
  102. if(ms[i].id = id){
  103. m = ms[i];
  104. c = cs[i];
  105. break ;
  106. }
  107. }
  108. if(m && c) {
  109. //已存在,修改经纬度
  110. //var point = new BMap.Point(lon , lat);
  111. m.setPosition(point);
  112. c.setPosition(point);
  113. c. draw();
  114. } else {
  115. //不存在重新绘制
  116. addComplexOverlay(map ,point , iconUrl , id , info);
  117. }
  118. }
  119. function removeComplexOverlay(id) {
  120. var m , c ;
  121. if(!id) {
  122. id = -1;
  123. }
  124. for(var i = 0 ; i < ms.length ; i++) {
  125. if(ms[i].id = id){
  126. m = ms[i];
  127. c = cs[i];
  128. ms.splice(i,1);
  129. cs.splice(i,1);
  130. break;
  131. }
  132. }
  133. if(m)
  134. map.removeOverlay(m);
  135. if(c)
  136. map.removeOverlay(c);
  137. m = null;
  138. c = null;
  139. }
  140. var cls = [];
  141. /**
  142. * 地图画一个圆圈
  143. * @param center_point 中心点 point
  144. * @param radius 半径 单位为米
  145. * @returns
  146. */
  147. function addCircle( center_point , radius ,id) {
  148. if(!id) {
  149. id = -1;
  150. }
  151. removeCircle(id);
  152. var c = new BMap.Circle(center_point , radius);
  153. c.id = id;
  154. map.addOverlay(c);
  155. cls.push(c);
  156. }
  157. function removeCircle(id) {
  158. if(!id) {
  159. id = -1;
  160. }
  161. var c ;
  162. for(var i = 0 ; i < cls.length ; i++) {
  163. if(cls[i].id = id){
  164. c = cls[i];
  165. cls.splice(i,1);
  166. break;
  167. }
  168. }
  169. if(c) {
  170. map.removeOverlay(c);
  171. }
  172. }
  173. function formatDistance(distance) {
  174. var str = '' ;
  175. if(distance > 1000) {
  176. str = (distance / 1000).toFixed(1) + '千米';
  177. } else {
  178. str = distance.toFixed(1) + '米';
  179. }
  180. return str ;
  181. }
  182. function createInfoMarker(point , iconUrl , info) {
  183. var m = new BMap.Marker(point ); // 创建标注
  184. if(info) {
  185. var label = new BMap.Label(info ,{
  186. offset: new BMap.Size(20, -20)
  187. }); // 创建文本标注对象
  188. label.setStyle({ color : "#000", fontSize : "14px" });
  189. m.setLabel(label);
  190. }
  191. if(iconUrl) {
  192. console.log('iconUrl ' + iconUrl);
  193. var size = new BMap.Size(36,36);
  194. var icon = new BMap.Icon( iconUrl , size , {imageOffset: new BMap.Size(0, 0)} );
  195. m.setIcon(icon);
  196. }
  197. return m ;
  198. }
  199. /**
  200. * 拼接设备信息
  201. * @param equi
  202. */
  203. function createEquiInfo(equi) {
  204. var iconUrl = equi.icon && equi.icon != '' && equi.icon.length > 2 ? equi.icon : ctx + '/comm/img/equi/1' + equi.icon ;
  205. var str =
  206. '<table style="background: white;color: black;z-index: 1000000;">'+
  207. '<tr>'+
  208. '<td> 设备名称: </td>'+
  209. '<td> ' + equi.equi_name + '</td>'+
  210. ' </tr>'+
  211. '<tr>'+
  212. '<td> 布设位置: </td>'+
  213. '<td> ' + (equi.location ? equi.location : '') + ' </td>'+
  214. '</tr>'+
  215. ' <tr>'+
  216. '<td> 经纬度: </td>'+
  217. '<td> ' + equi.lon + "," + equi.lat + ' </td>'+
  218. ' </tr>'+
  219. '<tr>'+
  220. '<td> 设备状态: </td>'+
  221. '<td> 正在防护 </td>'+
  222. ' </tr>'+
  223. ' <tr>'+
  224. '<td> 设备图片: </td>'+
  225. '<td> <img alt="" src="' + iconUrl + '"> </td>'+
  226. '</tr>'+
  227. '<tr>'+
  228. '<td > 设备介绍: </td>'+
  229. '<td > ' + equi.equi_description + ' </td>'+
  230. '</tr>'+
  231. '<tr>'+
  232. '<td> 技术指标: </td>'+
  233. '<td > </td>'+
  234. ' </tr>'+
  235. '</table>';
  236. return str ;
  237. }
  238. /*
  239. * 创造空情渲染结构 参考curr_air
  240. * 返回格式 //当前地图上要加载的空情 结构{id:air_id,sleep:休眠时间,air:air_info,points:[移动的所有点] ,index:当前位置,line:和目标单位的连线,label:和目标单位的距离,air_marker:无人机marker,
  241. * //open_defend_index:开启防护index,close_defend_index:关闭防护index,open_order_index:开启上级指令index,close_order_index:关闭上级指令index}
  242. *
  243. */
  244. function createCurrAir(air , min_unit_radis) {
  245. var unit_point = new BMap.Point(air.unit_lon , air.unit_lat);
  246. var points = [] ;
  247. var index = 0;
  248. //open_defend_index:开启防护index,close_defend_index:关闭防护index,open_order_index:开启上级指令index,close_order_index:关闭上级指令index
  249. var open_defend_index ;
  250. var close_defend_index ;
  251. var open_order_index ;
  252. var close_order_index ;
  253. //根据空情和防护目标来确定角度和无人机飞行轨迹
  254. var air_point = new BMap.Point(air.lon , air.lat);
  255. //算出距离
  256. var distance = map.getDistance(unit_point,air_point );
  257. //根据速度算出 步数
  258. var cnt = parseInt((distance - air_unit_mindistance) / air.speed) ;
  259. //实际按照500毫秒一个步长
  260. cnt = cnt * 2 ;
  261. var cha_lon = (unit_point.lng - air_point.lng) * (distance - air_unit_mindistance) / distance;
  262. var cha_lat = (unit_point.lat - air_point.lat) * (distance - air_unit_mindistance) / distance;
  263. //每一步的进步经纬度
  264. var add_lon = cha_lon / cnt;
  265. var add_lat = cha_lat / cnt;
  266. for(var i = 0 ; i < cnt ; i++) {
  267. // 计算每步新的位置
  268. var _lon = air_point.lng + i * add_lon;
  269. var _lat = air_point.lat + i * add_lat;
  270. var new_point = new BMap.Point(_lon , _lat);
  271. //距离小于防护半径*1.1的时候开启防护
  272. var p_d = map.getDistance(unit_point,new_point );
  273. if(p_d <= min_unit_radis * 1.1 && !open_defend_index) {
  274. //防护index
  275. open_defend_index = i ;
  276. }
  277. //指令是1.2倍
  278. if(p_d <= min_unit_radis * 1.2 && !open_order_index) {
  279. //防护index
  280. open_order_index = i ;
  281. }
  282. points.push(new_point);
  283. }
  284. //前进的位置
  285. if(air.type == 1) {
  286. //无人机
  287. //返回的位置 如果是导弹,这里就没有了,导弹在这里被销毁
  288. for(var i = cnt - 1 ; i >= 0 ; i--) {
  289. // 计算每步新的位置
  290. var _lon = air_point.lng + i * add_lon;
  291. var _lat = air_point.lat + i * add_lat;
  292. var new_point = new BMap.Point(_lon , _lat);
  293. points.push(new_point);
  294. //距大于防护半径*1.1的时候开启防护
  295. var p_d = map.getDistance(unit_point,new_point );
  296. if(p_d >= min_unit_radis * 1.1 && !close_defend_index) {
  297. //防护index
  298. close_defend_index = points.length ;
  299. }
  300. //指令是1.2倍
  301. if(p_d >= min_unit_radis * 1.2 && !close_order_index) {
  302. //防护index
  303. close_order_index = points.length ;
  304. }
  305. }
  306. }
  307. if(!close_order_index) {
  308. close_order_index = points.length - 4;
  309. }
  310. if(!close_defend_index) {
  311. close_defend_index = points.length - 4;
  312. }
  313. //距离label修改
  314. var p_distance = map.getDistance(unit_point,air_point );
  315. var format_distance = formatDistance(p_distance);
  316. var c_lon = (unit_point.lng + air_point.lng)/2;
  317. var c_lat = (unit_point.lat + air_point.lat)/2;
  318. var label = new BMap.Label(format_distance , {
  319. position : new BMap.Point(c_lon , c_lat)
  320. }); // 创建文本标注对象
  321. //label.setStyle({ color : "white", fontSize : "14px" });
  322. label.id=air.id;
  323. // 连线
  324. var line = new BMap.Polyline([unit_point,air_point ], {strokeColor:"red", strokeWeight:3, strokeOpacity:0.8}); //创建折线
  325. line.id=air.id;
  326. var info = air.info_no + '(高度:' + air.height + '米,速度:' + air.speed + '米/秒)' ;
  327. var icon_ = air.type == 1 ? ctx + '/resource/images/equi_icons/11_36.png' : ctx + '/resource/images/equi_icons/10_36.png';
  328. var air_marker = createInfoMarker(air_point , icon_ , info);
  329. //动画
  330. var air_complex = new ComplexCustomOverlay(air_point);
  331. var air_info = {id:air.id,air:air,points:points,index:0,line:line,label:label,air_marker:air_marker,air_complex:air_complex,
  332. open_defend_index : open_defend_index,close_defend_index:close_defend_index,open_order_index:open_order_index,
  333. close_order_index:close_order_index};
  334. //console.log("id:" + air.id + " , open_defend_index " + open_defend_index + " , close_defend_index " + close_defend_index);
  335. return air_info ;
  336. }
  337. /**
  338. * 缩放到可以看到地图上所有的自定义标记
  339. * @returns
  340. */
  341. function zoomAllOverlay() {
  342. var ps = [];
  343. var os = map.getOverlays();
  344. for(var i in os) {
  345. if(os[i] instanceof BMap.Marker)
  346. ps.push(os[i].getPosition());
  347. }
  348. map.setViewport(ps);
  349. }