管道展示

src/main/webapp/jsp/z_bigScreen/bigScreen2.html

@@ -569,6 +569,159 @@ pageEncoding="UTF-8"%>
           document.webkitExitFullscreen();
         }
       }
+
+      function initMap() {
+          // 初始化地图
+          map = new T.Map('map-container');
+          // 设置中心点和缩放级别 (金山卫区域)
+          map.centerAndZoom(new T.LngLat(121.340000, 30.740000), 14);
+          // 启用滚轮缩放
+          map.enableScrollWheelZoom();
+          
+          // 加载转换后的 GeoJSON 数据
+          loadGeoJSON("pipeline_data.geojson");
+      }
+
+      function loadGeoJSON(url) {
+          $.getJSON(url, function(geojson) {
+            
+              if (!geojson || !geojson.features) {
+                  console.error("Invalid GeoJSON data");
+                  return;
+              }
+
+              geojson.features.forEach(function(feature) {
+                  var props = feature.properties;
+                  var geometry = feature.geometry;
+                  
+                  if (geometry.type === "LineString") {
+                      var points = [];
+                      geometry.coordinates.forEach(function(coord) {
+                          // GeoJSON 通常是 [lng, lat]
+                          points.push(new T.LngLat(coord[0], coord[1]));
+                      });
+
+                      // 根据属性设置颜色 (假设 GeoJSON 包含 type 属性)
+                      // 如果没有 type，默认蓝色
+                      var type = props.type || 'unknown';
+                      var color = "#0000FF"; 
+                      if (type.indexOf('雨水') > -1) color = "#00FFFF";
+                      if (type.indexOf('污水') > -1) color = "#FF00FF";
+
+                      var line = new T.Polyline(points, {
+                          color: color,
+                          weight: 3,
+                          opacity: 0.9,
+                          lineStyle: 'solid'
+                      });
+                      map.addOverLay(line);
+
+                      // 添加标注和流向
+                      // 构造一个模拟的 pipe 对象传给辅助函数
+                      var pipeData = {
+                          diameter: props.diameter || 'Unknown',
+                          type: type
+                      };
+                      addPipeLabelAndArrow(map, pipeData, points, color);
+                  }
+              });
+          }).fail(function(jqxhr, textStatus, error) {
+              var err = textStatus + ", " + error;
+              console.error("Request Failed: " + err);
+              // 如果加载失败，回退到模拟数据演示
+              console.log("Loading mock data as fallback...");
+              var pipelines = generateMockPipelines();
+              renderPipelines(pipelines);
+          });
+      }
+
+      // 提取原有的绘制逻辑为单独函数，用于回退
+      function renderPipelines(pipelines) {
+          pipelines.forEach(function(pipe) {
+              var points = [];
+              pipe.path.forEach(function(coord) {
+                  points.push(new T.LngLat(coord[0], coord[1]));
+              });
+              
+              var color = "#0000FF"; 
+              if (pipe.type === '雨水') color = "#00FFFF";
+              if (pipe.type === '污水') color = "#FF00FF";
+              
+              var line = new T.Polyline(points, {
+                  color: color,
+                  weight: 3,
+                  opacity: 0.9,
+                  lineStyle: 'solid'
+              });
+              map.addOverLay(line);
+              addPipeLabelAndArrow(map, pipe, points, color);
+          });
+      }
+
+      function addPipeLabelAndArrow(map, pipe, points, color) {
+          // 计算中心点
+          if (points.length < 2) return;
+          var p1 = points[0];
+          var p2 = points[points.length - 1];
+          // 简单的取两端点中点（假设直线）
+          var centerLng = (p1.getLng() + p2.getLng()) / 2;
+          var centerLat = (p1.getLat() + p2.getLat()) / 2;
+          var center = new T.LngLat(centerLng, centerLat);
+
+          // 计算角度
+          // var angle = Math.atan2(p2.getLat() - p1.getLat(), p2.getLng() - p1.getLng()) * 180 / Math.PI;
+
+          // 添加文字标注 (DN + 材质)
+          var typeStr = pipe.type || '';
+          if (typeof pipe.type === 'string' && pipe.type.indexOf('雨水') > -1) typeStr = 'PVC';
+          else if (typeof pipe.type === 'string' && pipe.type.indexOf('污水') > -1) typeStr = '砼';
+          
+          var labelText = "DN" + pipe.diameter + "-" + typeStr;
+          var label = new T.Label({
+              text: labelText,
+              position: center,
+              offset: new T.Point(0, -10)
+          });
+          label.setBackgroundColor("transparent");
+          label.setBorderColor("transparent");
+          label.setFontColor(color);
+          label.setFontSize(12);
+          label.setTitle(labelText);
+          map.addOverLay(label);
+
+          // 添加箭头
+          var arrowLabel = new T.Label({
+              text: "➤", 
+              position: center,
+              offset: new T.Point(0, 0)
+          });
+          arrowLabel.setBackgroundColor("transparent");
+          arrowLabel.setBorderColor("transparent");
+          arrowLabel.setFontColor(color);
+          arrowLabel.setFontSize(14);
+          map.addOverLay(arrowLabel);
+      }
+
+      function generateMockPipelines() {
+          var pipes = [];
+          var centerLng = 121.340000;
+          var centerLat = 30.740000;
+          
+          for (var i = 0; i < 100; i++) {
+              var startLng = centerLng + (Math.random() - 0.5) * 0.04;
+              var startLat = centerLat + (Math.random() - 0.5) * 0.04;
+              var endLng = startLng + (Math.random() - 0.5) * 0.01;
+              var endLat = startLat + (Math.random() - 0.5) * 0.01;
+              
+              pipes.push({
+                  id: i,
+                  type: Math.random() > 0.5 ? '雨水' : '污水',
+                  diameter: [300, 400, 500, 600, 800][Math.floor(Math.random() * 5)],
+                  path: [[startLng, startLat], [endLng, endLat]]
+              });
+          }
+          return pipes;
+      }
     </script>
   </body>
 </html>