DataMap.html 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722
  1. <!DOCTYPE html>
  2. <html class="x-admin-sm">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="renderer" content="webkit">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport"
  8. content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
  9. <link rel="shortcut icon" href="https://osscold.baozhida.cn/favicon.ico">
  10. <link rel="bookmark" href="https://osscold.baozhida.cn/favicon.ico">
  11. <link rel="stylesheet" href="https://osscold.baozhida.cn/css/font.css">
  12. <link rel="stylesheet" href="https://osscold.baozhida.cn/css/xadmin.css">
  13. <script src="https://osscold.baozhida.cn/js/jquery.min.js"></script>
  14. <script src="https://osscold.baozhida.cn/js/jquery.cookie.min.js"></script>
  15. <script src="https://osscold.baozhida.cn/lib/layui/layui.js" charset="utf-8"></script>
  16. <script src="https://osscold.baozhida.cn/js/echarts.js" charset="utf-8"></script>
  17. <script type="text/javascript" src="https://osscold.baozhida.cn/js/xadmin.js"></script>
  18. </head>
  19. <body>
  20. <div class="x-nav">
  21. <span class="layui-breadcrumb">
  22. <a href="">首页</a>
  23. <a><cite>宝智达</cite></a>
  24. </span>
  25. <a class="layui-btn layui-btn-normal" style="line-height:1.6em;margin-top:3px;float:right"
  26. onclick="location.reload()" title="刷新">
  27. <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
  28. </a>
  29. </div>
  30. <div class="layui-fluid">
  31. <div class="layui-row">
  32. <!-- // 传感器 选择-->
  33. <div class="layui-col-md4">
  34. <div class="layui-card">
  35. <div class="layui-card-body ">
  36. <form class="layui-form layui-col-space5" οnsubmit="return false;">
  37. <div class="layui-input-inline layui-show-xs-block">
  38. <input value="" type="text" id="D_T_sn" name="D_T_sn" placeholder="请输入 SN"
  39. autocomplete="off"
  40. class="layui-input"></div>
  41. <div class="layui-input-inline layui-show-xs-block">
  42. <input value="" type="text" id="D_Name" name="D_Name" placeholder="请输入 传感器名称"
  43. autocomplete="off"
  44. class="layui-input"></div>
  45. <div class="layui-input-inline layui-show-xs-block">
  46. <select id="Class_1" name="Class_1">
  47. <option value=0>所有分类</option>
  48. {{range $index, $elem := .Class_List}}
  49. <option value={{$elem.Id}}>{{$elem.T_name}}
  50. </option>
  51. {{end}}
  52. </select>
  53. </div>
  54. <div class="layui-input-inline layui-show-xs-block">
  55. <div class="layui-btn layui-btn-normal"
  56. onclick="get_DeviceSensor_list(0)">
  57. <i class="layui-icon">&#xe615;</i></div>
  58. </div>
  59. </form>
  60. <hr>
  61. </div>
  62. <div class="layui-card-body " style="margin-top: -20px">
  63. <div id="DeviceSensor_list" style="width: 98%; overflow: hidden;">
  64. <div style="color: #1E9FFF;text-align: center;font-size: 15px;margin-top: 150px">加载中...</div>
  65. <!-- <div class="layui-col"-->
  66. <!-- style="height: 52px;background-color: #fafafa;border-radius:5px;padding-top: 2px;">-->
  67. <!-- <img style="float: left;width: 50px;margin: 0px 10px" src="https://osscold.baozhida.cn/images/温湿度传感器-1.png"-->
  68. <!-- height="50"-->
  69. <!-- width="40"/>-->
  70. <!-- <div style="float: left;">-->
  71. <!-- <div style="margin-top: 4px;font-size: 14px">士大夫撒地方递四方速递</div>-->
  72. <!-- <div style="margin-top: -3px;font-size: 12px">SN:KF20210510143443 [1]</div>-->
  73. <!-- </div>-->
  74. <!-- <div class="layui-card-header"-->
  75. <!-- style="float: right;padding-left: 0px;padding-top: 6px;color: #1E9FFF">-->
  76. <!-- 》-->
  77. <!-- </div>-->
  78. <!-- </div>-->
  79. </div>
  80. </div>
  81. <div class="layui-card-body ">
  82. <div style="height: 70px">
  83. <div class="layui-card-body ">
  84. <div class="page">
  85. <div id="DeviceSensor_list_Pages">
  86. <!-- <a class="prev" href="">&lt;&lt;</a>-->
  87. <!-- <a class="num" href="">1222</a>-->
  88. <!-- <span class="current">111</span>-->
  89. <!-- <a class="num" href="">444</a>-->
  90. <!-- <a class="next" href="">&gt;&gt;</a>-->
  91. </div>
  92. </div>
  93. <div style="color: #1E9FFF;text-align: center" id="DeviceSensor_list_Pages_x"></div>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <!-- // 传感器 选择-->
  100. <div class="layui-col-md8">
  101. <div class="layui-card">
  102. <div class="layui-card-body ">
  103. <form class="layui-form layui-col-space5" οnsubmit="return false;">
  104. <div class="layui-input-inline layui-show-xs-block">
  105. <div class="layui-btn layui-btn-normal"
  106. onclick="quick_1()">
  107. <i class="layui-icon">今天</i>
  108. </div>
  109. </div>
  110. <div class="layui-input-inline layui-show-xs-block">
  111. <div class="layui-btn layui-btn-normal"
  112. onclick="quick_2()">
  113. <i class="layui-icon">近一周</i>
  114. </div>
  115. </div>
  116. <div class="layui-input-inline layui-show-xs-block">
  117. <div class="layui-btn layui-btn-normal"
  118. onclick="quick_3()">
  119. <i class="layui-icon">近两周</i>
  120. </div>
  121. </div>
  122. <!-- <div class="layui-input-inline layui-show-xs-block">-->
  123. <!-- <div class="layui-btn layui-btn-normal"-->
  124. <!-- onclick="quick_4()">-->
  125. <!-- <i class="layui-icon">近一季度</i>-->
  126. <!-- </div>-->
  127. <!-- </div>-->
  128. <div class="layui-input-inline layui-show-xs-block">
  129. 时间:
  130. </div>
  131. <div class="layui-inline layui-show-xs-block">
  132. <input class="layui-input" autocomplete="off" placeholder="开始日" name="Time_start" id="Time_start" lay-key="1"></div>
  133. <div class="layui-inline layui-show-xs-block">
  134. <input class="layui-input" autocomplete="off" placeholder="截止日" name="Time_end" id="Time_end" lay-key="2"></div>
  135. <!-- <div class="layui-input-inline layui-show-xs-block">-->
  136. <!-- <div class="layui-btn layui-btn-normal"-->
  137. <!-- onclick="get_DeviceSensor_data(0)">-->
  138. <!-- <i class="layui-icon">&#xe615;</i>-->
  139. <!-- </div>-->
  140. <!-- </div>-->
  141. </form>
  142. <hr>
  143. </div>
  144. <div class="layui-card-body " >
  145. <div id="container" style="width: 100%;height:735px;"></div>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </body>
  153. <script>
  154. //获取GET
  155. function getPar(par) {
  156. //获取当前URL
  157. var local_url = document.location.href;
  158. //获取要取得的get参数位置
  159. var get = local_url.indexOf(par + "=")
  160. ;
  161. if (get == -1) {
  162. return false;
  163. }
  164. //截取字符串
  165. //截取字符串
  166. var get_par = local_url.slice(par.length + get + 1);
  167. //判断截取后的字符串是否还有其他get参数
  168. var nextPar = get_par.indexOf("&")
  169. ;
  170. if (nextPar != -1) {
  171. get_par = get_par.slice(0, nextPar);
  172. }
  173. return get_par;
  174. }
  175. layui.use(['laydate', 'form'],
  176. function () {
  177. var laydate = layui.laydate;
  178. // //执行一个laydate实例
  179. // laydate.render({
  180. // elem: '#Time_start' //指定元素
  181. // ,type: 'datetime'
  182. // });
  183. //
  184. // //执行一个laydate实例
  185. // laydate.render({
  186. // elem: '#Time_end' //指定元素
  187. // ,type: 'datetime'
  188. // });
  189. });
  190. var T_name = ""
  191. var T_sn = ""
  192. var T_class_id = 0
  193. var T_id = 0
  194. var T_sn_T_id = ""
  195. var Time_start = ""
  196. var Time_end = ""
  197. var DeviceSensor_lite = []
  198. var DeviceSensor_data = []
  199. /// --------------- 传感器列表
  200. // 页面 加载完成后执行
  201. window.onload = function () {
  202. console.log("页面 加载完成后执行")
  203. quick_1()
  204. get_DeviceSensor_list(0)
  205. // var map = new AMap.Map('container', {
  206. // resizeEnable: true, //是否监控地图容器尺寸变化
  207. // zoom:11, //初始化地图层级
  208. // center: [116.397428, 39.90923] //初始化地图中心点
  209. // });
  210. }
  211. function ChangeDiv(e) {
  212. var divs = document.getElementsByClassName("ChangeDiv");
  213. var len = divs.length;
  214. for(var i=0;i<len;i++){
  215. divs[i].style.border = "1px solid #ffffff";
  216. }
  217. e.style.border = "1px solid #ed0000";
  218. }
  219. // 今天
  220. function quick_1() {
  221. var myDate = new Date();
  222. y = myDate.getFullYear(); //获取当前年份(2位)
  223. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  224. d = myDate.getDate(); //获取当前日(1-31)
  225. console.log(y+"-"+m+"-"+d)
  226. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  227. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  228. $("#Time_start").val(Time_start)
  229. $("#Time_end").val(Time_end)
  230. get_DeviceSensor_data(0)
  231. }
  232. // 近一周
  233. function quick_2() {
  234. var myDate = new Date();
  235. y = myDate.getFullYear(); //获取当前年份(2位)
  236. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  237. d = myDate.getDate(); //获取当前日(1-31)
  238. console.log(y+"-"+m+"-"+d)
  239. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  240. $("#Time_end").val(Time_end)
  241. myDate=myDate.setDate(myDate.getDate() - 7);
  242. myDate=new Date(myDate);
  243. y = myDate.getFullYear(); //获取当前年份(2位)
  244. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  245. d = myDate.getDate(); //获取当前日(1-31)
  246. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  247. $("#Time_start").val(Time_start)
  248. get_DeviceSensor_data(0)
  249. }
  250. // 近一月
  251. function quick_3() {
  252. var myDate = new Date();
  253. y = myDate.getFullYear(); //获取当前年份(2位)
  254. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  255. d = myDate.getDate(); //获取当前日(1-31)
  256. console.log(y+"-"+m+"-"+d)
  257. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  258. $("#Time_end").val(Time_end)
  259. myDate=myDate.setDate(myDate.getDate() - 14);
  260. myDate=new Date(myDate);
  261. y = myDate.getFullYear(); //获取当前年份(2位)
  262. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  263. d = myDate.getDate(); //获取当前日(1-31)
  264. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  265. $("#Time_start").val(Time_start)
  266. get_DeviceSensor_data(0)
  267. }
  268. // 近一季度
  269. function quick_4() {
  270. var myDate = new Date();
  271. y = myDate.getFullYear(); //获取当前年份(2位)
  272. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  273. d = myDate.getDate(); //获取当前日(1-31)
  274. console.log(y+"-"+m+"-"+d)
  275. Time_end = y+"-"+m+"-"+d + " 23:59:59"
  276. $("#Time_end").val(Time_end)
  277. myDate=myDate.setDate(myDate.getDate() - 30 * 3);
  278. myDate=new Date(myDate);
  279. y = myDate.getFullYear(); //获取当前年份(2位)
  280. m = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
  281. d = myDate.getDate(); //获取当前日(1-31)
  282. Time_start = y+"-"+m+"-"+d + " 00:00:00"
  283. $("#Time_start").val(Time_start)
  284. get_DeviceSensor_data(0)
  285. }
  286. function get_DeviceSensor_list(page) {
  287. T_sn = $("#D_T_sn").val();
  288. T_name = $("#D_Name").val();
  289. T_class_id = $("#Class_1").val();
  290. $.ajax({
  291. type: 'POST',
  292. url: 'Device_Sensor_List',//发送请求
  293. data: {
  294. User_tokey: $.cookie("User_tokey"),
  295. T_sn: T_sn,
  296. T_name: T_name,
  297. T_class_id: parseInt(T_class_id),
  298. page: page,
  299. SN_type: "YD",
  300. },
  301. success: function (result) {
  302. console.log(result)
  303. if (result.Code == 200) {
  304. $('#DeviceSensor_list').html("")
  305. $('#DeviceSensor_list_Pages').html("")
  306. $('#DeviceSensor_list_Pages_x').html("")
  307. DeviceSensor_lite = result.Data.DeviceSensor_lite
  308. if (DeviceSensor_lite.length == 0) {
  309. $('#DeviceSensor_list').html("<div style=\"color: #1E9FFF;text-align: center;font-size: 15px;margin-top: 150px\">没有设备</div>")
  310. return
  311. }
  312. Add_DeviceSensor_list(result.Data.DeviceSensor_lite) // 列表
  313. Add_DeviceSensor_list_Pages(result.Data.Pages) // 分页
  314. $('#DeviceSensor_list_Pages_x').append("页数:" + result.Data.Page + "/" + result.Data.Page_size + " 总数:" + result.Data.Num);
  315. } else {
  316. }
  317. }
  318. });
  319. return false
  320. }
  321. function Add_DeviceSensor_list(DS_lite) {
  322. for (let i = 0; i < DS_lite.length; i++) {
  323. if(T_id == 0){
  324. T_id = DS_lite[i].T_id;
  325. T_sn_T_id = DS_lite[i].T_sn;
  326. get_DeviceSensor_data(0)
  327. }
  328. $('#DeviceSensor_list').append("" +
  329. "<div class=\"layui-col ChangeDiv\" onclick=\"ChangeDiv(this); T_id = " + DS_lite[i].T_id + ";T_sn_T_id = '" + DS_lite[i].T_sn + "';get_DeviceSensor_data(0)\" \n" +
  330. " style=\"border: 1px solid #ffffff;height: 52px;background-color: #fafafa;border-radius:5px;padding-top: 2px;margin-top: 6px\">\n" +
  331. " <img style=\"float: left;width: 50px;margin: 0px 10px\" src=\"https://osscold.baozhida.cn/images/温湿度传感器-1.png\"\n" +
  332. " height=\"50\"\n" +
  333. " width=\"40\"/>\n" +
  334. " <div style=\"float: left;\">\n" +
  335. " <div style=\"margin-top: 4px;font-size: 14px;height: 24px;\">" + DS_lite[i].T_name + "</div>\n" +
  336. " <div style=\"margin-top: -3px;font-size: 12px\">SN:" + DS_lite[i].T_sn + " [" + DS_lite[i].T_id + "]</div>\n" +
  337. " </div>\n" +
  338. " <div class=\"layui-card-header\"\n" +
  339. " style=\"float: right;padding-left: 0px;padding-top: 6px;color: #1E9FFF\">\n" +
  340. " 》\n" +
  341. " </div>\n" +
  342. " </div>")
  343. }
  344. }
  345. function Add_DeviceSensor_list_Pages(Pages) {
  346. for (let i = 0; i < Pages.length; i++) {
  347. elem = Pages[i]
  348. switch (elem.A) {
  349. case 1:
  350. $('#DeviceSensor_list_Pages').append("<a class=\"prev\" onclick='get_DeviceSensor_list(" + elem.V + ")' >&lt;&lt;</a>\n");
  351. break;
  352. case 2:
  353. $('#DeviceSensor_list_Pages').append("<a class=\"num\" onclick='get_DeviceSensor_list(" + elem.V + ")' >" + elem.V + "</a>\n");
  354. break;
  355. case 3:
  356. $('#DeviceSensor_list_Pages').append("<span class=\"current\">" + elem.V + "</span>\n");
  357. break;
  358. case 4:
  359. $('#DeviceSensor_list_Pages').append("<a class=\"num\" onclick='get_DeviceSensor_list(" + elem.V + ")' >" + elem.V + "</a>\n");
  360. break;
  361. case 5:
  362. $('#DeviceSensor_list_Pages').append("<a class=\"next\" onclick='get_DeviceSensor_list(" + elem.V + ")' >&gt;&gt;</a>\n");
  363. break;
  364. }
  365. }
  366. }
  367. function get_DeviceSensor_data(page) {
  368. if($("#Time_start").val().length > 0){
  369. Time_start = $("#Time_start").val();
  370. }else {
  371. Time_start = ""
  372. }
  373. if($("#Time_end").val().length > 0){
  374. Time_end = $("#Time_end").val();
  375. }else {
  376. Time_end = ""
  377. }
  378. $.ajax({
  379. type: 'POST',
  380. url: 'Device_Sensor_Data',//发送请求
  381. data: {
  382. User_tokey: $.cookie("User_tokey"),
  383. Time_start:Time_start,
  384. Time_end:Time_end,
  385. T_sn: T_sn_T_id,
  386. T_id: T_id,
  387. page: 0,
  388. page_z: 9000,
  389. },
  390. success: function (result) {
  391. console.log(result)
  392. if (result.Code == 200) {
  393. DeviceSensor_data = result.Data.DeviceSensor_data
  394. T_fhand(result.Data.DeviceSensor_data)
  395. } else {
  396. }
  397. }
  398. });
  399. return false
  400. }
  401. //// --------- 地图
  402. var graspRoad;
  403. function T_fhand(data) {
  404. var map = new AMap.Map('container', {
  405. resizeEnable: true,
  406. center: [104.101765,41.561402],
  407. zoom: 4
  408. });
  409. var lineArr = [
  410. // ['75.757904', '38.118117'],
  411. // ['117.375719', '24.598057']
  412. ];
  413. if(!data) {
  414. return
  415. }
  416. for (let i = 0; i < data.length; i++) {
  417. // 026.5610665,106.6644807
  418. if(data[i].T_site.length < 5){
  419. continue;
  420. }
  421. T_site_split = data[i].T_site.split(",")
  422. // 地理经纬度坐标
  423. var lon = parseFloat(T_site_split[1]);
  424. var lat = parseFloat(T_site_split[0]);
  425. // console.log(data,lon,lat)
  426. lineArr.unshift(new AMap.LngLat(lon,lat)) //unshift push
  427. }
  428. console.log("lineArr:",lineArr)
  429. if(!graspRoad) {
  430. graspRoad = new AMap.GraspRoad()
  431. }
  432. // 坐标转换
  433. AMap.convertFrom(lineArr, 'gps', function (status, result) {
  434. if (result.info === 'ok') {
  435. var path2 = result.locations;
  436. console.log("path2:",path2)
  437. var polyline = new AMap.Polyline({
  438. path: path2,
  439. isOutline: true,
  440. outlineColor: '#ffeeff',
  441. borderWeight: 3,
  442. strokeColor: "#3366FF",
  443. strokeOpacity: 1,
  444. strokeWeight: 6,
  445. // 折线样式还支持 'dashed'
  446. strokeStyle: "solid",
  447. // strokeStyle是dashed时有效
  448. strokeDasharray: [10, 5],
  449. lineJoin: 'round',
  450. lineCap: 'round',
  451. zIndex: 50,
  452. })
  453. // 创建一个 icon
  454. var endIcon = new AMap.Icon({
  455. size: new AMap.Size(25, 34),
  456. image: 'https://osscold.baozhida.cn/images/dir-marker.png',
  457. imageSize: new AMap.Size(135, 40),
  458. imageOffset: new AMap.Pixel(-95, -3)
  459. });
  460. // 将 icon 传入 marker
  461. var endMarker = new AMap.Marker({
  462. position: new AMap.LngLat(path2[path2.length-1].lng,path2[path2.length-1].lat),
  463. icon: endIcon,
  464. offset: new AMap.Pixel(-13, -30)
  465. });
  466. AMap.event.addListener(endMarker, 'click', function () {
  467. //创建信息窗口
  468. infoWindow = new AMap.InfoWindow({
  469. isCustom: true, //使用自定义窗体
  470. content: "<div style='height: 28px;background-color: "+style_s+";border: 1px solid #ccc;padding: 2px;float: contour'>" +
  471. "<div style='background-color: #69d1ff;position: absolute;top: -15px;left: 1px;padding: 0px 4px'>终点</div>" +
  472. "<span style='background-color: #FF9E9E;padding: 0px 2px;line-height'>温度:"+data[0].T_t+"</span>"+
  473. "<span style='background-color: #52FEEC;margin-left: 6px;padding: 0px 2px;line-height'>湿度:"+data[0].T_rh+"</span><br>"+
  474. "<span style='line-height'>"+data[0].T_time+"</span></div>",
  475. offset: new AMap.Pixel(0, -30)
  476. });
  477. //打开信息窗口
  478. infoWindow.open(map, [path2[path2.length-1].lng,path2[path2.length-1].lat]); //后面的参数指的是经纬度,在此显示窗口
  479. });
  480. // 创建一个 Icon
  481. var startIcon = new AMap.Icon({
  482. // 图标尺寸
  483. size: new AMap.Size(25, 34),
  484. // 图标的取图地址
  485. image: 'https://osscold.baozhida.cn/images/dir-marker.png',
  486. // 图标所用图片大小
  487. imageSize: new AMap.Size(135, 40),
  488. // 图标取图偏移量
  489. imageOffset: new AMap.Pixel(-9, -3)
  490. });
  491. // 创建一个 Icon
  492. var dianIcon = new AMap.Icon({
  493. // 图标的取图地址
  494. image: 'https://osscold.baozhida.cn/images/poi-marker-default.png',
  495. size: new AMap.Size(22, 28), //图标所处区域大小
  496. imageSize: new AMap.Size(22,28) //图标大小
  497. });
  498. // 将 icon 传入 marker
  499. var startMarker = new AMap.Marker({
  500. position: new AMap.LngLat(path2[0].lng,path2[0].lat),
  501. icon: startIcon,
  502. offset: new AMap.Pixel(-13, -30)
  503. });
  504. AMap.event.addListener(startMarker, 'click', function () {
  505. //创建信息窗口
  506. infoWindow = new AMap.InfoWindow({
  507. isCustom: true, //使用自定义窗体
  508. content: "<div style='height: 28px;background-color: "+style_s+";border: 1px solid #ccc;padding: 2px;float: contour'>" +
  509. "<div style='background-color: #69d1ff;position: absolute;top: -15px;left: 1px;padding: 0px 4px'>起点</div>" +
  510. "<span style='background-color: #FF9E9E;padding: 0px 2px;line-height'>温度:"+data[data.length - 1].T_t+"</span>"+
  511. "<span style='background-color: #52FEEC;margin-left: 6px;padding: 0px 2px;line-height'>湿度:"+data[data.length - 1].T_rh+"</span><br>"+
  512. "<span style='line-height'>"+data[data.length - 1].T_time+"</span></div>",
  513. offset: new AMap.Pixel(0, -30)
  514. });
  515. //打开信息窗口
  516. infoWindow.open(map, [path2[0].lng,path2[0].lat]); //后面的参数指的是经纬度,在此显示窗口
  517. });
  518. list_marker = []
  519. // 所有 标记点 信息
  520. for (let ix = 0; ix < path2.length; ix++) {
  521. if(ix == 0 || ix == path2.length - 1){
  522. continue
  523. }
  524. var marker = new AMap.Marker({
  525. position: new AMap.LngLat(path2[ix].lng,path2[ix].lat),
  526. icon: dianIcon,
  527. });
  528. list_marker.push(marker)
  529. ddid = data.length - ix - 1 // -
  530. style_s = "#ffffff"
  531. if(data[ddid].T_t < data[ddid].T_Tlower || data[ddid].T_rh < data[ddid].T_RHlower){
  532. style_s = "#ff7070"
  533. }
  534. if(data[ddid].T_t > data[ddid].T_Tupper || data[ddid].T_rh > data[ddid].T_RHupper){
  535. style_s = "#ff7070"
  536. }
  537. // label默认蓝框白底左上角显示,样式className为:amap-marker-label
  538. // marker.setLabel({
  539. // offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
  540. // content: "<spen style='background: transparent;'>"+ddid+"</spen>", //设置文本标注内容
  541. // direction: 'center' //设置文本标注方位
  542. // });
  543. AMap.event.addListener(list_marker[list_marker.length - 1], 'click', function () {
  544. console.log("ix:",ix)
  545. ddid = data.length - ix - 1
  546. //创建信息窗口
  547. infoWindow = new AMap.InfoWindow({
  548. isCustom: true, //使用自定义窗体
  549. content: "<div style='height: 28px;background-color: "+style_s+";border: 1px solid #ccc;padding: 2px;float: contour'>" +
  550. "<div style='background-color: #69d1ff;position: absolute;top: -15px;left: 1px;padding: 0px 4px'>"+ddid+"</div>" +
  551. "<span style='background-color: #FF9E9E;padding: 0px 2px;line-height'>温度:"+data[ddid].T_t+"</span>"+
  552. "<span style='background-color: #52FEEC;margin-left: 6px;padding: 0px 2px;line-height'>湿度:"+data[ddid].T_rh+"</span><br>"+
  553. "<span style='line-height'>"+data[ddid].T_time+"</span></div>",
  554. offset: new AMap.Pixel(0, -30)
  555. });
  556. //打开信息窗口
  557. infoWindow.open(map, [path2[ix].lng,path2[ix].lat]); //后面的参数指的是经纬度,在此显示窗口
  558. });
  559. marker.setMap(map);
  560. }
  561. // 条纹
  562. var polyline1 = new AMap.Polyline({
  563. path:path2,
  564. strokeWeight:8,
  565. strokeOpacity:0.8,
  566. strokeColor:'#9991ea',
  567. showDir:true
  568. });
  569. polyline1.setMap(map);
  570. map.add([ startMarker, endMarker]);
  571. map.setFitView(null, false, [150, 60, 100, 60]);
  572. // 轨迹纠偏
  573. // map.getCenter();
  574. // if(!graspRoad) {
  575. // graspRoad = new AMap.GraspRoad()
  576. // }
  577. // var pathParam = []
  578. // for(var i=0;i<path2.length;i+=1){
  579. // pathParam.push({"x":path2[i].R,"y":path2[i].Q,"sp":1,"ag":1, "tm":1})
  580. // }
  581. // console.log("pathParam:",pathParam)
  582. // graspRoad.driving(pathParam,function(error,result) {
  583. // if (!error) {
  584. // var path3 = [];
  585. // var newPath = result.data.points;
  586. // console.log("newPath:",newPath)
  587. // for (var i = 0; i < newPath.length; i += 1) {
  588. // path3.push([newPath[i].x, newPath[i].y])
  589. // }
  590. // var newLine = new AMap.Polyline({
  591. // path: path3,
  592. // strokeWeight: 8,
  593. // strokeOpacity: 0.8,
  594. // strokeColor: '#0091ea',
  595. // showDir: true
  596. // })
  597. // map.add(newLine)
  598. // map.setFitView()
  599. // }else {
  600. // console.log(error)
  601. // }
  602. //
  603. // })
  604. //
  605. }
  606. });
  607. }
  608. </script>
  609. <script src="https://webapi.amap.com/maps?v=1.4.15&key=f41c8fbdd908f420f6babe5ab38bf574&callback=init&plugin=AMap.GraspRoad"></script>
  610. <style>
  611. .amap-marker-label{
  612. background: transparent;
  613. }
  614. .layui-card-body{
  615. line-height: 16px;
  616. }
  617. #container .amap-marker-label{border:0 none;white-space: nowrap; margin: 0px;padding: 0px}
  618. </style>
  619. </html>