管道GIS展示

src/main/webapp/jsp/bigScreen2.jsp

@@ -7,6 +7,8 @@ pageEncoding="UTF-8"%>
     <title>区域管线大屏展示</title>
     <script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
+    <!-- 天地图 API -->
+    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=f423193014cde7bf44b224c6ab2b1210"></script>
     <!-- <script
       type="text/javascript"
       src="../../node_modules/jquery/dist/jquery.min.js"
@@ -162,6 +164,7 @@ pageEncoding="UTF-8"%>
 <%--      </div>--%>
 <%--    </div>--%>
     <div class="screen-container">
+      <div id="map-container" style="position: absolute; top: 280px; left: 70px; width: 1760px; height: 1470px; background-color: white;"></div>
       <div class="stat-card card-1">53829.5</div>
       <div class="stat-card card-2">2495</div>
       <div class="stat-card card-3">2460</div>
@@ -198,6 +201,138 @@ pageEncoding="UTF-8"%>
     </div>
 
     <script>
+      // ==================== 天地图初始化 ====================
+      var contextPath = "<%=request.getContextPath()%>";
+      var map = null;
+      var pipelineOverlays = [];
+      
+      // 初始化天地图
+      function initTiandituMap() {
+        // 创建地图实例
+        map = new T.Map("map-container");
+        
+        // 放大地图级别 (15比13更放大)
+        map.centerAndZoom(new T.LngLat(121.34, 30.74), 15);
+        map.enableScrollWheelZoom();
+        
+        // 设置暗色主题 - 切换为卫星影像底图
+        map.setMapType(TMAP_SATELLITE_MAP);
+        
+        // 添加控件
+        var scale = new T.Control.Scale();
+        map.addControl(scale);
+        var zoom = new T.Control.Zoom();
+        map.addControl(zoom);
+        
+        // 隐藏地图类型切换控件，保持暗色主题
+        setTimeout(function() {
+          var mapTypeCtrl = document.querySelector(".TMAP_maptype");
+          if (mapTypeCtrl) {
+            mapTypeCtrl.style.display = "none";
+          }
+        }, 500);
+        
+        console.log("[天地图] 初始化完成 - 暗色主题，缩放级别15");
+        
+        // 加载管道数据
+        loadPipelineData();
+      }
+      
+      // 加载管道数据
+      function loadPipelineData() {
+        $.ajax({
+          url: contextPath + '/jsp/z_bigScreen/geo.json',
+          type: 'GET',
+          dataType: 'json',
+          success: function(data) {
+            if (data && data.features) {
+              var pipelines = data.features.map(function(feature) {
+                var attr = feature.attributes || {};
+                var geom = feature.geometry || {};
+                var paths = geom.paths || null;
+                var lengthM = attr.Shape_Leng ? (attr.Shape_Leng * 111000).toFixed(2) : '-';
+                
+                return {
+                  id: attr.FID,
+                  name: '管线-' + attr.FID,
+                  length: lengthM,
+                  elevation: attr.Elevation || 0,
+                  color: attr.Color || 6,
+                  layer: attr.Layer || 'WS_LINE',
+                  paths: paths
+                };
+              });
+              
+              renderPipelines(pipelines);
+              console.log("[管道数据] 加载完成，共", pipelines.length, "条");
+            }
+          },
+          error: function(xhr, status, error) {
+            console.error("[管道数据] 加载失败:", error);
+          }
+        });
+      }
+      
+      // 渲染管道到地图
+      function renderPipelines(pipelines) {
+        // 先清除之前的管线
+        clearPipelines();
+        
+        pipelines.forEach(function(item) {
+          if (!item.paths || !item.paths.length) return;
+          
+          var pathsArray = item.paths;
+          
+          // 如果 paths 的第一个元素不是数组，说明是单路径格式，需要包装
+          if (!Array.isArray(pathsArray[0]) || !Array.isArray(pathsArray[0][0])) {
+            pathsArray = [pathsArray];
+          }
+          
+          // 按颜色区分管线 (Color === 6 为深蓝色，其他为深红色)
+          var lineColor = item.color === 6 ? '#0066cc' : '#0ea6c1';
+          
+          // 渲染每条路径
+          pathsArray.forEach(function(pathCoords) {
+            if (!pathCoords || pathCoords.length < 2) return;
+            
+            var points = pathCoords.map(function(p) {
+              return new T.LngLat(p[0], p[1]);
+            });
+            
+            var polyline = new T.Polyline(points, {
+              color: lineColor,
+              weight: 8,
+              opacity: 1
+            });
+            map.addOverLay(polyline);
+            pipelineOverlays.push(polyline);
+            
+            // 信息窗口
+            var infoHtml = '<div style="font-size:13px;line-height:1.5;">' +
+              '<strong style="color:#007bff;">管线 #' + item.id + '</strong><br>' +
+              '名称: ' + (item.name || '-') + '<br>' +
+              '管长: ' + (item.length || '-') + ' m<br>' +
+              '高程: ' + (item.elevation || 0).toFixed(2) + ' m' +
+              '</div>';
+            
+            var infoWindow = new T.InfoWindow(infoHtml, { offset: new T.Point(0, 0) });
+            polyline.addEventListener('click', function(e) {
+              map.openInfoWindow(infoWindow, e.lnglat);
+            });
+          });
+        });
+        
+        console.log("[管线渲染] 完成，共渲染", pipelineOverlays.length, "条管线段");
+      }
+      
+      // 清除管道覆盖物
+      function clearPipelines() {
+        pipelineOverlays.forEach(function(overlay) {
+          map.removeOverLay(overlay);
+        });
+        pipelineOverlays = [];
+      }
+      
       // ==================== 数据统一管理 ====================
       var pageData = {
         // 统计卡片数据
@@ -414,6 +549,9 @@ pageEncoding="UTF-8"%>
       }
 
       $(document).ready(function () {
+        // 初始化天地图
+        initTiandituMap();
+        
         // 初始化统计数据
         updateStatCards();