| 
					
				 | 
			
			
				@@ -0,0 +1,664 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!DOCTYPE html>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<html xmlns:th="http://www.thymeleaf.org" lang="en">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<head>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <meta charset="UTF-8" />
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <title>首页</title>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> -->
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <script src="http://10.48.37.32:8080/arcgis_js_api/library/3.16/rgis/Rinit.js"></script>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <!-- <script src="https://js.arcgis.com/3.16/"></script> -->
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <style>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        html,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        body {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            height: 100%;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            width: 100%;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            margin: 0;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding: 0;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .webMap {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            height: 100%;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            width: 100%;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .legend {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            position: absolute;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            bottom: 120px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            right: 24px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border-radius: 6px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            background-color: #fff;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            display: flex;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            flex-direction: column;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            gap: 6px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            z-index: 1;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding: 12px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .legend>div {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            cursor: pointer;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            display: flex;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            align-items: center;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #define {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            cursor: pointer;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            background: #fff;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding: 12px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            text-align: center;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            width: 100px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            position: absolute;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border-radius: 8px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .info {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border: 1px solid #ccc;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            position: absolute;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            left: 0;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            right: 0;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            width: 60%;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            margin: auto;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            margin-top: 100px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            z-index: 1;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            background: #fff;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding-bottom: 12px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .info>.head {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            display: flex;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            justify-content: space-between;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            align-items: center;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding: 0 12px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            height: 40px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border-bottom: 1px solid #ccc;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .info>.content {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            display: flex;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            gap: 12px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding: 12px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .info>.content p {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            margin-top: 0px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            margin-bottom: 6px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .info>.foot {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            display: flex;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            justify-content: center;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            align-items: center;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .esriPopupWrapper>div:first-child,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .esriPopupWrapper>div:nth-child(3) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            display: none;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #cameraTop {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            width: 240px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            height: 130px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #cameraTop>foreignObject {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            width: 100%;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            height: 100%;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #cameraTop .content {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            font-size: 12px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            width: 100%;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            height: 100%;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border-radius: 6px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            background: #fff;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border: 1px solid #ccc;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            box-sizing: border-box;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #cameraTop .content>*:first-child {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            display: flex;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            justify-content: space-between;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding: 6px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border-bottom: 1px solid #ccc;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            text-overflow: ellipsis;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            overflow: hidden;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #cameraTop .content>*:first-child>div:first-child {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            font-weight: bold;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            font-size: 14px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #cameraTop .content>*:first-child>div:last-child {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            cursor: pointer;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            transform: scale(1.3);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #cameraTop .content>*:first-child>div:last-child:hover {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            color: red;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #cameraTop .content>*:last-child {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            outline-style: none;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding: 6px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding-top: 0;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            margin: 0;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #cameraTop .content>*:last-child li {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            margin-top: 10px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            display: flex;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            justify-content: space-between;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .highligh {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border: dashed #00f;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border-radius: 10px;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .esriPopup .contentPane {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            padding: 0 !important;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            background-color: unset !important;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .outerPointer.left {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            z-index: 1;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            box-shadow: none;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border-left: 1px solid #ccc;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            border-bottom: 1px solid #ccc;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            background: #fff;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .esriPopupWrapper {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            width: 200px !important;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            box-shadow: 0 4px 4px 0px #ccc !important;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #graphicsLayer3_layer>* {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            cursor: pointer;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        .sizer .content {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            width: 100% !important;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        #map111_graphics_layer {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            display: none !important;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </style>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</head>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<body>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <div id="define" style="display: none;">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <span>费奥军</span>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <img src="" height="20" width="6" alt="">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <span>费奥军11</span>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <div>11231231</div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <!-- <div id="cameraTop">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <div class="content">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <div>XXX线路</div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <div>×</div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <ul>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <li><span>里程位置</span><span>k1+400km</span></li>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <li><span>里程范围</span><span>k1+400km</span></li>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <li><span>经纬度</span><span>k1+400km</span></li>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </ul>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </div> -->
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <!-- <svg id="cameraTop" viewBox="0 0 220 122" font-size="12">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <rect x="10" y="10" width="200" height="102" fill="#fff" stroke="#ccc" rx="6"></rect>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <g>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <text x="18" y="28">XXX线路</text>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <text x="190" y="28">X</text>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </g>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <line x1="10" y1="38" x2="210" y2="38" stroke="#ccc"></line>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <g>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <text x="18" y="58">里程位置</text>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <text x="200" y="58" text-anchor="end">k1+400km</text>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </g>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <g>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <text x="18" y="78">里程范围</text>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <text x="200" y="78" text-anchor="end">k1+400km</text>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </g>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <g>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <text x="18" y="98">经纬度</text>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <text x="200" y="98" style="text-anchor:end">k1+400km</text>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </g>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </svg> -->
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <!-- <div class=" info">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <div class="head">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <div>报警信息提示</div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <div>❓</div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <div class="content">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <img src="" width="200" height="100" alt="">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        <p>报警线路xx线路</p>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        <p>危岩落石 ,上行, 里程位置k1+400km</p>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        <p>2023.01.02 01:30:00</p>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <div class="foot">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <div
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        style="text-align: center;line-height: 36px;cursor: pointer;width: 100px;height: 36px;color: #fff;background-color: #2866dd;">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        立即查看</div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <div onclick="infoShow()"
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        style="border: 1px solid #2866dd ;text-align: center;line-height: 36px;cursor: pointer;;width: 100px;height: 36px;margin-left: 12px;">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        我知道了</div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                </div> -->
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <div class="legend">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <img src="/map/blueTrain.png" width="32" height="32" alt="">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            重车线
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <img src="/map/greenTrain.png" width="32" height="32" alt="">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            空车线
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <div class="webMap" id="map111"></div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    <script>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function infoShow() {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            document.body.querySelector('.info').style.display = 'none'
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function throttle(fn, delay) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            let timer = null;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            return function () {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                let context = this;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                let args = arguments;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (!timer) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    timer = setTimeout(function () {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        fn.apply(context, args);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        timer = null;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    }, delay);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        self.addEventListener('message', (e) => {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (typeof e.data === "boolean") {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                cameraShow = e.data
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                cameraPoints.forEach(({ graphic }) => {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    e.data ? graphic.show() : (graphic.hide(), map.infoWindow.hide())
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                })
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            const { type, data } = e.data
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (type === 1)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                vehicleList = data
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            else if (type === 2)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                cameraList = data
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            else if (type === 3) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                searchInfo = data;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const cameraTops = self.document.querySelectorAll("#cameraTop")
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                cameraTops?.forEach?.(item => {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    searchInfo.camera === item?.dataset?.index ?
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        item.classList.add("highligh") :
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        item.classList.remove("highligh")
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                })
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            generatePoints()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, false)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let mapLoaded = false
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let vehicleList = []
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let cameraList = []
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let blue
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let green
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let camera
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let panelPoints = []
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let cameraPoints = []
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let cameraShow = true
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let searchInfo = {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            camera: '',
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            vehicle: ''
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        let topInfo = {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            1: {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                start: '神池南',
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                end: '黄骅港'
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            },
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            2: {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                start: '神池南',
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                end: '黄骅港'
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var map;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var graphicsLayer;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var mapObject;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var Point
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var PictureMarkerSymbol
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var Graphic
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var webMercatorUtils
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var InfoTemplate
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var InfoWindow
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var GraphicsLayer
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        require([
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/map",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/InfoTemplate",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/dijit/InfoWindow",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/geometry/Extent",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/geometry/Point",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/geometry/Polyline",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/layers/ArcGISDynamicMapServiceLayer",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/layers/ArcGISTiledMapServiceLayer",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/layers/GraphicsLayer",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/symbols/SimpleLineSymbol",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/symbols/SimpleMarkerSymbol",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/symbols/TextSymbol",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/symbols/Font",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/Color",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/graphic",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/geometry/webMercatorUtils",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/SpatialReference",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/geometry/Circle",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/symbols/SimpleFillSymbol",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "esri/symbols/PictureMarkerSymbol",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            "dojo/domReady!"
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        ], function (Map, _InfoTemplate, _InfoWindow, Extent, _Point, Polyline, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, _GraphicsLayer, SimpleLineSymbol,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            SimpleMarkerSymbol, TextSymbol, Font, Color, _Graphic, _webMercatorUtils, SpatialReference, Circle, SimpleFillSymbol, _PictureMarkerSymbol, SwipeTool) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            Point = _Point
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            PictureMarkerSymbol = _PictureMarkerSymbol
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            Graphic = _Graphic
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            webMercatorUtils = _webMercatorUtils
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            InfoTemplate = _InfoTemplate
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            InfoWindow = _InfoWindow
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            GraphicsLayer = _GraphicsLayer
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            map = new Map("map111", {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                logo: false,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                autoResize: true,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                // sliderPosition: "bottom-right",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                center: [114.906005859375, 38.38897705078125],
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                scale: 4017396,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            });
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var layer = new ArcGISDynamicMapServiceLayer("http://10.48.37.32:8080/OneMapServer/rest/services/BaseMap_write/MapServer")
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // var layer = new ArcGISDynamicMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer")
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var xlLayer = new ArcGISDynamicMapServiceLayer("http://10.48.37.32:8080/OneMapServer/rest/services/SH_XL/MapServer")
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            var czLayer = new ArcGISDynamicMapServiceLayer("http://10.48.37.32:8080/OneMapServer/rest/services/SH_CZ/MapServer")
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            map.addLayer(layer);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            map.addLayer(xlLayer);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            map.addLayer(czLayer);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            graphicsLayer = new GraphicsLayer()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            map.addLayer(graphicsLayer)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            map.on('load', () => {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                mapLoaded = true
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                blue = new PictureMarkerSymbol('/map/blueTrain.png', 32, 32)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                green = new PictureMarkerSymbol('/map/greenTrain.png', 32, 32)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                camera = new PictureMarkerSymbol('/map/camera1.png', 60, 60)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                // camera = new PictureMarkerSymbol('https://bpic.588ku.com/element_origin_min_pic/16/10/28/d438fb1a4c9de459ff7736b050f77199.jpg', 32, 32)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                // blue = new PictureMarkerSymbol('https://img0.baidu.com/it/u=1482373880,50717570&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500', 32, 32)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                generatePoints()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            })
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            graphicsLayer.on('click', (e) => {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                console.log(e, 1111111)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                e.graphic.symbol.data &&
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    self.parent.postMessage({
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        name: e.graphic.symbol.name,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        data: e.graphic.symbol.data
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    })
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //     if (e.graphic?.attributes?.show) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //         if (cameraPoints[e.graphic.attributes.index].active) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //             cameraPoints[e.graphic.attributes.index].active = false
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //             cameraPoints[e.graphic.attributes.index].topPanel.hide()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //         } else {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //             cameraPoints[e.graphic.attributes.index].active = true
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //             cameraPoints[e.graphic.attributes.index].topPanel.show()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //         }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //     }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            })
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        })
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const vehicleList1 = [
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "ids": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "id": 79,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleCode": "HXD1 7084A",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleName": "",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "createBy": "af09aac6340744d6be5b64b1697d7415",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "createTime": "2023-10-18 15:05:32",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "updateBy": "c0917e58bb254c7b825a6ce974e42d96",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "updateTime": "2023-10-19 09:58:19",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "terminalName": "车载终端01",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "remark": "神华号",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleTerminalDto": {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "id": "44",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalCode": "CZZD06",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "vehicleCode": "HXD1 7084A",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "vehicleName": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "lineDir": "2",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "travelMile": 196500,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalLongitude": "114.38200",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalLatitude": "39.2284",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "railwayName": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "railwayCode": "SHTL"
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            },
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "ids": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "id": 80,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleCode": "HXD1 7084B",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleName": "",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "createBy": "af09aac6340744d6be5b64b1697d7415",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "createTime": "2023-10-18 15:11:50",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "updateBy": "c0917e58bb254c7b825a6ce974e42d96",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "updateTime": "2023-10-19 09:58:13",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "terminalName": "车载终端02",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "remark": "神华号",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleTerminalDto": {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "id": "42",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalCode": "CZZD08",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "vehicleCode": "HXD1 7084B",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "vehicleName": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "lineDir": "1",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "travelMile": 49822,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalLongitude": "113.7253",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalLatitude": "38.3942",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "railwayName": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "railwayCode": "SHTL"
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        ]
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const cameraList1 = [
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "ids": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "id": 79,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleCode": "HXD1 7084A",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleName": "",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "createBy": "af09aac6340744d6be5b64b1697d7415",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "createTime": "2023-10-18 15:05:32",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "updateBy": "c0917e58bb254c7b825a6ce974e42d96",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "updateTime": "2023-10-19 09:58:19",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "terminalName": "车载终端01",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "remark": "神华号",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                installLongitude: "115.7253",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                installLatitude: "38.3942",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                cameraCode: "123",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleTerminalDto": {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "id": "44",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalCode": "CZZD06",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "vehicleCode": "HXD1 7084A",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "vehicleName": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "lineDir": "1",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "travelMile": 48018,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalLongitude": "114.38200",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalLatitude": "39.2284",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "railwayName": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "railwayCode": "SHTL"
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            },
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "ids": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "id": 80,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleCode": "HXD1 7084B",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleName": "",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "createBy": "af09aac6340744d6be5b64b1697d7415",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "createTime": "2023-10-18 15:11:50",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "updateBy": "c0917e58bb254c7b825a6ce974e42d96",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "updateTime": "2023-10-19 09:58:13",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "terminalName": "车载终端02",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "remark": "神华号",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                installLongitude: "114.7253",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                installLatitude: "38.3942",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                cameraCode: "234",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                "vehicleTerminalDto": {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "id": "42",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalCode": "CZZD08",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "vehicleCode": "HXD1 7084B",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "vehicleName": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "lineDir": "1",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "travelMile": 49822,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalLongitude": "113.7253",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "terminalLatitude": "38.3942",
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "railwayName": null,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    "railwayCode": "SHTL"
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        ]
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function createTopPanelGraphic(point, item) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            const scale = 2;
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            let width = 160 * scale, height = 80 * scale
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            const arrowLen = 50
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            const cvs = document.createElement('canvas')
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            cvs.width = width
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            cvs.height = height
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            const ctx = cvs.getContext('2d')
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.translate(0.5, 0.5)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.save()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.beginPath()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.roundRect(20, 20, width - 40, height - 40, 6)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.fillStyle = '#fff'
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.strokeStyle = '#ccc'
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.shadowColor = item.data.lineDir === 1 ? '#006aef' : '#38e731'
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // ctx.shadowOffsetY = 4
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.shadowBlur = 20
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.stroke()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.fill()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.restore()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (searchInfo.vehicle === item.id) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.save()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.beginPath()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.lineWidth = 4
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.strokeStyle = '#00f'
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.setLineDash([5, 5])
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.roundRect(20, 20, width - 40, height - 40, 6)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.stroke()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.restore()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.fillStyle = '#000'
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.font = `bold ${12 * scale}px serif`
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.textAlign = "right"
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.fillText(item.direct ? item.start : item.end, width / 2 - arrowLen / 2 - 10, 30 * scale)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            // const x = width / 2 - arrowLen / 2, y = 20 * scale + 4 * scale, w = arrowLen - 10, h = 4 * scale
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            const w = arrowLen - 10, h = 4 * scale
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.save()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.translate(width / 2 - arrowLen / 2 + (arrowLen - 10) / 2, 20 * scale + 4 * scale + 4 * scale / 2)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (item.direct) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.fillRect(-w / 2, -h / 2, w, h)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.fill(new Path2D(`m${arrowLen / 2 - 10} ${-h / 2 - 4}L${arrowLen / 2} 0L${arrowLen / 2 - 10} ${h / 2 + 4}z`))
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            else {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.rotate(Math.PI)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.fillRect(-w / 2, -h / 2, w, h)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ctx.fill(new Path2D(`m${arrowLen / 2 - 10} ${-h / 2 - 4}L${arrowLen / 2} 0L${arrowLen / 2 - 10} ${h / 2 + 4}z`))
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.restore()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.textAlign = "left"
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.fillText(item.direct ? item.end : item.start, width / 2 + arrowLen / 2 + 10, 30 * scale)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.textAlign = "center"
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            ctx.fillText(item.code, width / 2, height - 20 * scale)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            const url = cvs.toDataURL('image/png', 1)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            const symbol = new PictureMarkerSymbol({ url, width: 160, height: 80, yoffset: 52, name: item.name, data: item.data })
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            return new Graphic(point, symbol)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function createCameraInfo(point, item) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            const temp = document.querySelector('#cameraTop').cloneNode(true)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            temp.style.display = 'block'
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            const svgUrl = new XMLSerializer().serializeToString(temp)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            try {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const url = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgUrl)))
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return new Graphic(point, new PictureMarkerSymbol({ url, width: 220, height: 122, yoffset: 52 }))
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            } catch (e) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                console.error(e)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function closeInfo(index) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            map.infoWindow.hide()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        function generatePoints() {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            if (!mapLoaded) return
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            graphicsLayer.clear()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            panelPoints = []
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            cameraPoints = []
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (let i = 0; i < vehicleList.length; i++) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const item = vehicleList[i];
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                console.log(i, item)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                let picSymbol
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (item.vehicleTerminalDto?.lineDir === 1)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    picSymbol = blue
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                else if (item.vehicleTerminalDto?.lineDir === 2)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    picSymbol = green
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var point = new Point(parseFloat(+item.vehicleTerminalDto?.terminalLongitude), parseFloat(+item.vehicleTerminalDto?.terminalLatitude), map.spatialReference);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                panelPoints.push({ point, item })
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var webMercator = webMercatorUtils.geographicToWebMercator(point);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                point.x = webMercator.x
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                point.y = webMercator.y
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                picSymbol.name = item.remark
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const lineDir = item.vehicleTerminalDto?.lineDir
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                picSymbol.data = {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    lineDir: lineDir,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    travelMile: item.vehicleTerminalDto?.travelMile,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    railwayCode: item.vehicleTerminalDto?.railwayCode
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const graphic = new Graphic(point, picSymbol, item, '')
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                graphicsLayer.add(graphic)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                graphicsLayer.add(createTopPanelGraphic(point, {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    start: topInfo[lineDir]?.start, end: topInfo[lineDir]?.end, code: '火车编号:' + item.vehicleTerminalDto?.vehicleCode, direct: lineDir === 1,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    id: item.vehicleTerminalDto?.vehicleCode,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    name: item.remark,
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    data: picSymbol.data
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                })); // direct表示箭头方向:true向右,false向左
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            for (let i = 0; i < cameraList.length; i++) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const item = cameraList[i];
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var point = new Point(parseFloat(+item.installLongitude), parseFloat(+item.installLatitude), map.spatialReference);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                var webMercator = webMercatorUtils.geographicToWebMercator(point);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                point.x = webMercator.x
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                point.y = webMercator.y
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const graphic = new Graphic(point, camera, { show: true, data: item, index: i, active: false }, '')
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                const topPanel = new InfoTemplate(item.vehicleCode, `
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                <div id="cameraTop" data-index="${item.cameraCode}" class="${item.cameraCode === searchInfo.camera ? 'highligh' : ''}">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <div class="content">
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        <div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <div>${item.railwayName}</div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <div onclick="closeInfo(${i})">×</div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        <ul>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <li><span>里程位置</span><span>${item.installMiles}</span></li>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <li><span>里程范围</span><span>${item.milesRange}</span></li>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            <li><span>经纬度</span><span>${item.installLatitude},${item.installLongitude}</span></li>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        </ul>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                </div>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                `)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                map.infoWindow.anchor = 'top'
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                graphic.setInfoTemplate(topPanel)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                graphicsLayer.add(graphic)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                cameraPoints.push({ graphic, topPanel, point });
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                cameraShow ? graphic.show() : graphic.hide();
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                //     graphic.draw()
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                if (searchInfo.camera === item.cameraCode) {
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    // map.infoWindow.show(point)
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    map.infoWindow.show(point);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    map.infoWindow.setFeatures([graphic]);
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </script>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</body>
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+
 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</html> 
			 |