From 9c6271f266700cd8a4106d0d654abffe7e5f2493 Mon Sep 17 00:00:00 2001
From: xzt <1113240624@qq.com>
Date: Mon, 8 Apr 2024 10:41:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=A0=87=E7=82=B9=E8=BF=9E?=
 =?UTF-8?q?=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jwtech-admin-page/package.json                |   1 +
 .../src/components/map/index.vue              | 720 ++++++++++++++++++
 .../src/views/building/projectInfo/index.vue  |  21 +-
 .../components/segmentProject.vue             |   2 +
 .../components/segmentProject.vue             |   2 +
 .../components/segmentProject.vue             |   2 +
 6 files changed, 746 insertions(+), 2 deletions(-)
 create mode 100644 jwtech-admin-page/src/components/map/index.vue

diff --git a/jwtech-admin-page/package.json b/jwtech-admin-page/package.json
index cb744f4f..8cd6d408 100644
--- a/jwtech-admin-page/package.json
+++ b/jwtech-admin-page/package.json
@@ -68,6 +68,7 @@
     "node-sass": "^4.12.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
+    "ol": "^6.4.0",
     "path-to-regexp": "2.4.0",
     "pdfjs-dist": "^3.1.81",
     "quill": "^2.0.0-dev.3",
diff --git a/jwtech-admin-page/src/components/map/index.vue b/jwtech-admin-page/src/components/map/index.vue
new file mode 100644
index 00000000..e9d88a68
--- /dev/null
+++ b/jwtech-admin-page/src/components/map/index.vue
@@ -0,0 +1,720 @@
+<template>
+  <div id="content">
+    <div id="map" ref="map"></div>
+    <div class="btn-box">
+      <div class="btn" id="drawPointBtn" @click="handlePointDraw">绘制点</div>
+      <div class="btn" id="drawLineBtn" @click="handleLineDraw">绘制线</div>
+      <div class="btn" id="drawBtn" @click="handleReturn">撤销</div>
+      <div class="btn" @click="handleClearDrawLayer">清除全部</div>
+      <div class="btn" @click="handleSaveCoords">保存绘制</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import "ol/ol.css";
+import { Map, View } from "ol";
+import { defaults as defaultControls } from "ol/control";
+import Tile from "ol/layer/Tile";
+import { fromLonLat } from "ol/proj";
+import OSM from "ol/source/OSM";
+import WMTS from "ol/source/WMTS";
+import WMTSTileGrid from "ol/tilegrid/WMTS.js";
+import VectorSource from "ol/source/Vector.js";
+// import TileSuperMapRest from "ol/source/TileSuperMapRest.js";
+
+import VectorLayer from "ol/layer/Vector.js";
+import { Style, Fill, Stroke, Circle, Text } from "ol/style";
+
+// import Style from "ol/style/Style.js";
+// import Fill from "ol/style/Fill.js";
+// import Stroke from "ol/style/Stroke.js";
+// import Circle from "ol/style/Circle.js";
+// import Text from "ol/style/Text.js";
+
+import Draw from "ol/interaction/Draw.js";
+
+import Feature from "ol/Feature.js";
+import LineString from "ol/geom/LineString.js";
+import Point from "ol/geom/Point.js";
+import { WMTSCapabilities, GML2 } from "ol/format";
+import { getWidth, getTopLeft } from "ol/extent";
+
+export default {
+  props: ["potMsg", "lineMsg", "allDrawMsg"],
+  data() {
+    return {
+      map: null,
+      // projection: "EPSG:4326",
+      pointDrawFlag: "",
+      lineDrawFlag: "",
+      sketch: "", // 存储草图
+      geometries: [], // 存储绘制的几何图形
+      lastPointFeature: null,
+      lastLineFeature: null,
+      all_draw_feature: [],
+      all_point_coords: [],
+      all_line_coords: [],
+      drawVectorSource: null,
+      drawVectorLayer: null,
+    };
+  },
+  created() {
+    if (this.potMsg.length > 0 || this.lineMsg.length > 0) {
+      this.all_point_coords = [...this.potMsg];
+      this.all_line_coords = [...this.lineMsg];
+      this.all_draw_feature = [...this.allDrawMsg];
+      console.log("点的数据", this.potMsg);
+      console.log("线的数据", this.lineMsg);
+      console.log("总的数据", this.allDrawMsg);
+    }
+  },
+  mounted() {
+    this.initMap();
+  },
+  methods: {
+    /**
+     * 初始化一个 openlayers 地图
+     */
+    initMap() {
+      // let target = "map"; //跟页面元素的 id 绑定来进行渲染
+      // let tileLayer = [
+      //   new Tile({
+      //     source: new OSM(),
+      //   }),
+      // ];
+      // let view = new View({
+      //   center: fromLonLat([115.36502, 22.7787]), //地图中心坐标
+      //   zoom: 9,
+      //   projection: this.projection,
+      //   multiWorld: true,
+      // });
+      // this.map = new Map({
+      //   target: target, //绑定dom元素进行渲染
+      //   layers: tileLayer, //配置地图数据源
+      //   view: view, //配置地图显示的options配置（坐标系，中心点，缩放级别等）
+      // });
+
+      const projection = "EPSG:4326";
+      this.map = new Map({
+        target: "map",
+        view: new View({
+          center: [115.36502, 22.7787],
+          zoom: 7,
+          // maxZoom: 12,
+          minZoom: 5,
+          projection: projection,
+          multiWorld: true,
+        }),
+      });
+      var matrixIds = new Array(18);
+      var resolutions = [];
+      for (var z = 0; z < 18; ++z) {
+        var res = 360 / 512; //0.703125
+        resolutions[z] = res / Math.pow(2, z - 1);
+        matrixIds[z] = z;
+      }
+
+      // 加载第一层地图轮廓图层
+      var osm = new Tile({
+        source: new WMTS({
+          url: "http://t0.tianditu.gov.cn/img_c/wmts?tk=42a5dfa93ea7a9cbf423c4c1bb9ec16d",
+          service: "wmts",
+          version: "1.0.0",
+          matrixSet: "c",
+          layer: "img",
+          format: "Tile",
+          projection: "EPSG:4326",
+          tileGrid: new WMTSTileGrid({
+            extent: [-180, -90, 180, 90],
+            origin: [-180, 90],
+            resolutions: resolutions,
+            matrixIds: matrixIds,
+          }),
+          style: "default",
+          // wrapX: false
+        }),
+      });
+      this.map.addLayer(osm);
+
+      // let point = new ol.geom.Point([115.36502, 22.7787]);
+      // this.map.addLayer(point);
+
+      // 加载其他数据图层
+      // 所需展示的所有图层列表
+      // 不同类型的地图服务主要区分于type
+      const layerList = [
+        // {
+        //   index: 0,
+        //   code: 'YZT1610609202768',
+        //   name: '广东2020年7_17级矢量图',
+        //   url: 'http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke',
+        //   type: 'YZT-WMTS'
+        // },
+        {
+          index: 1,
+          code: "YZT1597746916315",
+          name: "广东7_17级界线电子地图",
+          url: "http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke",
+          type: "YZT-WMTS",
+        },
+        {
+          index: 2,
+          code: "YZT1610609681389",
+          name: "广东2020年7_17级矢量注记",
+          url: "http://19.25.37.27:8081/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke",
+          type: "YZT-WMTS",
+        },
+        {
+          index: 3,
+          code: "0",
+          text: "",
+          url: "http://19.25.37.25:8090/iserver/services/map-XingZhengQuHua/rest/maps/行政区划",
+          type: "rest-map",
+        },
+        {
+          index: 4,
+          code: "0",
+          text: "",
+          url: "http://19.25.35.204:31190/iserver/services/map-GuangDongShengDaoLu/rest/maps/广东省道路",
+          type: "rest-map",
+        },
+        {
+          index: 5,
+          code: "0",
+          text: "",
+          url: "http://19.25.35.204:31190/iserver/services/map-ShengJiXingZhengQuHuaMian/rest/maps/省级行政区划面",
+          type: "rest-map",
+        },
+        // {
+        //   index: 6,
+        //   code: '0',
+        //   text: '',
+        //   url: 'http://19.25.35.204:31190/iserver/services/map-YiZhangTuShuiKu/rest/maps/水库',
+        //   type: 'rest-map'
+        // }
+        // {
+        //   index: 7,
+        //   code: '0',
+        //   text: '',
+        //   url: 'http://19.25.35.204:31190/iserver/services/map-ShiJiXingZhengQuHuaMian/rest/maps/市级行政区划面',
+        //   type: 'rest-map'
+        // }
+        //   index: 8,
+        //   code: '0',
+        //   text: '',
+        //   url: 'http://19.25.35.204:31190/iserver/services/map-XianJiXingZhengQuHuaMian/rest/maps/县级行政区划面',
+        //   type: 'rest-map'
+        // }
+        //   index: 9,
+        //   code: '0',
+        //   text: '',
+        //   url: 'http://19.25.35.204:31190/iserver/services/map-ZhenJiXingZhengQuHuaMian/rest/maps/镇级行政区划面',
+        //   type: 'rest-map'
+        // }
+        //   index: 10,
+        //   code: '0',
+        //   text: '',
+        //   url: 'http://19.25.35.204:31190/iserver/services/map-CunJiXingZhengQuHuaMian/rest/maps/村级行政区划面',
+        //   type: 'rest-map'
+        // }
+      ];
+      // 绘制图层列表
+      for (let i = 0; i < layerList.length; i++) {
+        loadIndex(layerList[i].type, i);
+      }
+
+      // 初始化绘制点、线图层
+      // 创建一个矢量数据源
+      this.drawVectorSource = new VectorSource({
+        wrapX: false,
+      });
+      // 创建一个矢量图层并将数据源与之关联
+      this.drawVectorLayer = new VectorLayer({
+        source: this.drawVectorSource,
+        style: new Style({
+          fill: new Fill({
+            color: "rgba(255, 255, 255, 0.2)", // 填充颜色
+          }),
+          stroke: new Stroke({
+            color: "#409eff", // 边框颜色
+            width: 4, // 边框宽度
+          }),
+          image: new Circle({
+            radius: 8, // 圆点半径
+            fill: new Fill({
+              color: "blue", // 圆点填充颜色
+            }),
+          }),
+        }),
+      });
+      this.map.addLayer(this.drawVectorLayer);
+
+      // 监听事件
+      // 监听点图层的change事件来获取点坐标
+
+      // this.map.getViewport().addEventListener('click', () => {
+      //    this.drawVectorSource.on('addfeature', (event) => {
+      //     const coordinate = event.feature.getGeometry().getCoordinates();
+      //     console.log(coordinate);
+      //   });
+      // });
+
+      function loadIndex(type, index) {
+        var path = "";
+        if (type === "YZT-WMTS") {
+          path = "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities";
+        } else if (type === "rest-map") {
+        } else {
+          path = "VERSION=1.0.0&REQUEST=GetFeature&SERVICE=WFS";
+        }
+        let xhr = new XMLHttpRequest();
+        let sign = "";
+        xhr.open(
+          "GET",
+          layerList[index].url.replace(
+            /{{serviceCode}}/,
+            layerList[index].code
+          ) +
+            sign +
+            path
+        );
+        xhr.onload = function () {
+          let data = xhr.response;
+          if (type === "YZT-WMTS") {
+            addYztWmtsLayer(data, index);
+          } else if (type === "YZT-YSFW") {
+            addYsfwLayer(data, index);
+          } else {
+            addRestMapLayer(layerList[index], index);
+          }
+        };
+        xhr.send();
+      }
+
+      // 加载wmts服务
+      function addYztWmtsLayer(res, index) {
+        console.log(layerList[index]);
+        console.log("加载次数");
+        // console.log("输出WMTS服务数据", res);
+        var format = new WMTSCapabilities();
+        if (!res) {
+          return;
+        }
+        var result = format.read(res);
+        const item = result.Contents.Layer[0];
+        const layerParam = {
+          layerName: item.Abstract || item.Title,
+          styleName: item.Style[0].Identifier,
+          tilematrixset: item.TileMatrixSetLink[0].TileMatrixSet,
+          format: item.Format[0],
+        };
+        var projectionExtent = [-180, -90, 180, 90];
+        const size = getWidth(projectionExtent) / 256;
+        const resolutionsYzt = [];
+        const matrixIdsTzt = [];
+        for (var z = 2; z < 19; ++z) {
+          resolutionsYzt[z] = size / Math.pow(2, z);
+          matrixIdsTzt.push(z - 2);
+        }
+        const source = new WMTS({
+          url:
+            layerList[index].url.replace(
+              /{{serviceCode}}/,
+              layerList[index].code
+            ) +
+            "?layer=" +
+            layerParam.layerName,
+          style: layerParam.styleName,
+          matrixSet: layerParam.tilematrixset,
+          format: layerParam.format,
+          wrapX: true,
+          tileGrid: new WMTSTileGrid({
+            origin: getTopLeft(projectionExtent),
+            resolutions: resolutionsYzt,
+            matrixIds: matrixIdsTzt,
+          }),
+        });
+        let lastIndex = index + 10 * (1 + index);
+        var layer = new Tile({
+          id: lastIndex,
+          source: source,
+        });
+        console.log(source.urls);
+        layer.setZIndex(lastIndex);
+        this.map.addLayer(layer);
+      }
+      // -------------------------------------------------------------------------------------
+      // 接入粤政图要素服务(wfs)
+      function addYsfwLayer(res, index) {
+        console.log("输出WFS服务数据", res);
+        var result = res;
+        var format = new GML2();
+        var features = format.readFeatures(result);
+        var style = null;
+        if (features[0].getGeometry() instanceof ol.geom.Polygon) {
+          style = new Style({
+            stroke: new Stroke({
+              color: "#868f98",
+              width: 1,
+            }),
+            fill: new Fill({
+              color: "#DEECFB",
+            }),
+          });
+        } else if (features[0].getGeometry() instanceof ol.geom.Point) {
+          features.forEach((each) => {
+            var info = each.values_;
+            var name = "";
+            for (let key in info) {
+              if (key.indexOf("名称") > -1) {
+                name = info[key];
+                break;
+              }
+            }
+            style = new Style({
+              image: new Circle({
+                fill: new Fill({
+                  color: "#ff0721",
+                }),
+                radius: 5,
+              }),
+              text: new Text({
+                text: name,
+                offsetY: 30,
+                font: "12px Calibri,sans-serif",
+                fill: new Fill({
+                  color: "#fff",
+                }),
+                stroke: new Stroke({
+                  color: "#f00",
+                  width: 3,
+                }),
+              }),
+            });
+            each.setStyle(style);
+          });
+        } else if (features[0].getGeometry() instanceof ol.geom.LineString) {
+          style = new Style({
+            stroke: new Stroke({
+              color: "#2899fb",
+              width: 4,
+            }),
+          });
+        }
+        var source = new VectorSource({
+          features: features,
+        });
+        var wfsObj = { source: source, style: style };
+
+        var vectorLayer = new VectorLayer({
+          id: layerList[index].code,
+          source: wfsObj.source,
+          style: wfsObj.style,
+        });
+        this.map.addLayer(vectorLayer);
+      }
+
+      // 接入rest-map服务
+      function addRestMapLayer(params, index) {
+        var restLayer = new Tile({
+          source: new TileSuperMapRest({
+            url: params.url,
+            prjCoordSys: { epsgCode: 4326 },
+            projection: "EPSG:4326",
+          }),
+        });
+        let lastIndex = index + 10 * (1 + index);
+        restLayer.setZIndex(lastIndex);
+        this.map.addLayer(restLayer);
+      }
+      // 回显
+      this.handleReturnShow();
+    },
+    // 绘制点按钮
+    handlePointDraw() {
+      let that = this;
+      let pointBtnDom = document.getElementById("drawPointBtn");
+      let pointBtnText = pointBtnDom.innerHTML;
+      let lineBtnDom = document.getElementById("drawLineBtn");
+      let lineBtnText = lineBtnDom.innerHTML;
+      if (this.lineDrawFlag) {
+        this.map.removeInteraction(this.lineDrawFlag);
+        lineBtnDom.innerHTML = "绘制线";
+      }
+      if (pointBtnText === "绘制点") {
+        pointBtnDom.innerHTML = "取消绘制点";
+        this.pointDrawFlag = new Draw({
+          type: "Point",
+          source: that.drawVectorSource,
+          freehand: false,
+          style: new Style({
+            fill: new Fill({
+              color: "rgba(255, 255, 255, 0.2)", // 填充颜色
+            }),
+            stroke: new Stroke({
+              color: "#409eff", // 边框颜色
+              width: 4, // 边框宽度
+            }),
+            image: new Circle({
+              radius: 8, // 圆点半径
+              fill: new Fill({
+                color: "blue", // 圆点填充颜色
+              }),
+            }),
+          }),
+        });
+        this.map.addInteraction(this.pointDrawFlag);
+      } else {
+        pointBtnDom.innerHTML = "绘制点";
+        this.map.removeInteraction(this.pointDrawFlag);
+      }
+
+      // 监听 draw 结束事件
+      this.pointDrawFlag.on("drawend", function (event) {
+        // console.log(77777, that.all_draw_feature, event);
+        that.all_draw_feature.push(["point", event.feature]);
+        // console.log(888888, that.all_draw_feature);
+        that.all_point_coords.push(event.target.sketchCoords_);
+        console.log(event);
+        console.log("坐标数组", that.all_point_coords);
+      });
+    },
+
+    // 绘制线按钮
+    handleLineDraw() {
+      let that = this;
+      let pointBtnDom = document.getElementById("drawPointBtn");
+      let pointBtnText = pointBtnDom.innerHTML;
+      let lineBtnDom = document.getElementById("drawLineBtn");
+      let lineBtnText = lineBtnDom.innerHTML;
+      if (this.pointDrawFlag) {
+        this.map.removeInteraction(this.pointDrawFlag);
+        pointBtnDom.innerHTML = "绘制点";
+      }
+      if (lineBtnText === "绘制线") {
+        lineBtnDom.innerHTML = "取消绘制线";
+        this.lineDrawFlag = new Draw({
+          type: "LineString",
+          source: that.drawVectorSource,
+          freehand: false,
+          // style: new Style({
+          //   fill: new Fill({
+          //     color: 'rgba(255, 255, 255, 0.2)' // 填充颜色
+          //   }),
+          //   stroke: new Stroke({
+          //     color: '#409eff', // 边框颜色
+          //     width: 4 // 边框宽度
+          //   }),
+          //   image: new Circle({
+          //     radius: 8, // 圆点半径
+          //     fill: new Fill({
+          //       color: 'blue' // 圆点填充颜色
+          //     })
+          //   })
+          // })
+        });
+        this.map.addInteraction(that.lineDrawFlag);
+      } else {
+        lineBtnDom.innerHTML = "绘制线";
+        this.map.removeInteraction(that.lineDrawFlag);
+      }
+
+      // 监听 draw 结束事件
+      this.lineDrawFlag.on("drawend", function (event) {
+        console.log(event);
+        that.all_draw_feature.push(["line", event.feature]);
+        that.all_line_coords.push(event.target.sketchCoords_);
+        console.log(that.all_draw_feature);
+      });
+    },
+
+    // 撤销
+    handleReturn() {
+      console.log(777, this.all_draw_feature);
+      var pop = this.all_draw_feature.pop();
+      console.log("当前图像内容 " + this.all_draw_feature.length, pop);
+      if (pop == undefined) {
+        alert("已全部撤销");
+      } else if (pop[0] === "point") {
+        this.drawVectorLayer.getSource().removeFeature(pop[1]);
+        this.all_point_coords.pop();
+      } else if (pop[0] === "line") {
+        this.drawVectorLayer.getSource().removeFeature(pop[1]);
+        this.all_line_coords.pop();
+      }
+    },
+
+    // 清空绘制图层
+    handleClearDrawLayer() {
+      this.drawVectorSource.clear();
+      this.all_draw_feature = [];
+      this.all_point_coords = [];
+      this.all_line_coords = [];
+    },
+
+    // 保存绘制
+    handleSaveCoords() {
+      if (this.all_point_coords.length == 0 && this.all_line_coords == 0) {
+        alert("暂无需要保存数据");
+        return;
+      }
+
+      console.log("保存所有的交互绘制");
+      console.log("all_draw_feature", this.all_draw_feature);
+      console.log("all_point_coords", this.all_point_coords);
+      console.log("all_line_coords", this.all_line_coords);
+
+      // 发送保存请求
+      // let url = "";
+      // let xhr = new XMLHttpRequest();
+      // let params = {
+      //   pointList: this.all_point_coords,
+      //   lineList: this.all_line_coords
+      // };
+      // xhr.setRequestHeader('Content-Type', 'application/json');
+      // xhr.open('POST', url, true);
+      // xhr.send(JSON.stringify(params));
+      // xhr.onreadystatechange = function () {
+      //   if (xhr.readyState === 4 && xhr.status === 200) {
+      //       // 请求成功
+      //       console.log(xhr.responseText);
+      //   }
+      // };
+
+      // 向父组件传数据
+      this.$emit(
+        "getMapData",
+        this.all_point_coords,
+        this.all_line_coords,
+        this.all_draw_feature
+      );
+
+      // 测试
+      // localStorage.setItem("pointList", this.all_point_coords);
+      // localStorage.setItem("lineList", this.all_line_coords);
+
+      // 清除所有
+      this.handleClearDrawLayer();
+      // 取消绘制,并修改文字
+      let pointBtnDom = document.getElementById("drawPointBtn");
+      let pointBtnText = pointBtnDom.innerHTML;
+      let lineBtnDom = document.getElementById("drawLineBtn");
+      let lineBtnText = lineBtnDom.innerHTML;
+      if (pointBtnText === "取消绘制点") {
+        pointBtnDom.innerHTML = "绘制点";
+        this.map.removeInteraction(this.pointDrawFlag);
+      }
+      if (lineBtnText === "取消绘制线") {
+        lineBtnDom.innerHTML = "绘制线";
+        this.map.removeInteraction(this.lineDrawFlag);
+      }
+      // alert("保存成功！");
+    },
+
+    // 处理回显
+    handleReturnShow() {
+      // 处理点数据
+      let features = [];
+      // this.all_point_coords.forEach((item) => {
+      //   let obj = new Feature({
+      //     geometry: new Point(item),
+      //   });
+      //   // 点样式
+      //   obj.setStyle(
+      //     new Style({
+      //       image: new Circle({
+      //         radius: 8,
+      //         fill: new Fill({
+      //           color: "blue",
+      //         }),
+      //       }),
+      //     })
+      //   );
+      //   features.push(obj);
+      //   // this.all_draw_feature.push(["point", obj]);
+      // });
+
+      // // 处理线数据
+      // this.all_line_coords.forEach((item) => {
+      //   let obj = new Feature({
+      //     geometry: new LineString(item),
+      //   });
+      //   // 线样式
+      //   obj.setStyle(
+      //     new Style({
+      //       stroke: new Stroke({
+      //         color: "#409eff",
+      //         width: 4,
+      //       }),
+      //     })
+      //   );
+      //   features.push(obj);
+      //   // this.all_draw_feature.push(["line", obj]);
+      // });
+
+      features = this.allDrawMsg.map((item) => item[1]);
+
+      console.log(features);
+      // 创建一个VectorSource并添加几个点
+      this.drawVectorSource = new VectorSource({
+        features,
+      });
+      let that = this;
+      // 创建一个VectorLayer并使用上面定义的VectorSource
+      this.drawVectorLayer = new VectorLayer({
+        source: that.drawVectorSource,
+        style: new Style({
+          fill: new Fill({
+            color: "rgba(255, 255, 255, 0.2)", // 填充颜色
+          }),
+          stroke: new Stroke({
+            color: "#409eff", // 边框颜色
+            width: 4, // 边框宽度
+          }),
+          image: new Circle({
+            radius: 8, // 圆点半径
+            fill: new Fill({
+              color: "blue", // 圆点填充颜色
+            }),
+          }),
+        }),
+        // style: new ol.style({
+        //     image: new ol.style({
+        //         radius: 5,
+        //         fill: new Fill({ color: 'red' }),
+        //         stroke: new Stroke({ color: 'black', width: 2 }),
+        //     }),
+        // }),
+      });
+      this.map.addLayer(this.drawVectorLayer);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+#map {
+  height: 700px;
+}
+.btn-box {
+  z-index: 999999;
+  position: absolute;
+  top: 40px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+}
+.btn-box .btn {
+  padding: 5px 15px;
+  background: blue;
+  border-radius: 4px;
+  margin: 0 8px;
+  font-size: 12px;
+  color: #fff;
+  user-select: none;
+  cursor: pointer;
+}
+.btn-box .btn:hover {
+  opacity: 0.6;
+}
+</style>
diff --git a/jwtech-admin-page/src/views/building/projectInfo/index.vue b/jwtech-admin-page/src/views/building/projectInfo/index.vue
index 9589e7c6..e5be23b8 100644
--- a/jwtech-admin-page/src/views/building/projectInfo/index.vue
+++ b/jwtech-admin-page/src/views/building/projectInfo/index.vue
@@ -931,11 +931,17 @@
       :title="drawTitle"
       :visible.sync="drawOpen"
       custom-class="draw"
-      width="1200px"
+      width="1500px"
       append-to-body
       :close-on-click-modal="false"
     >
-      <mapEle />
+      <mapEle
+        v-if="drawOpen"
+        :potMsg="potMsg"
+        :lineMsg="lineMsg"
+        :allDrawMsg="allDrawMsg"
+        @getMapData="getMapData"
+      />
     </el-dialog>
   </div>
 </template>
@@ -1218,6 +1224,10 @@ export default {
         emitPath: false,
         checkStrictly: true, //选择任意一级
       },
+      // 地图坐标数据
+      potMsg: [],
+      lineMsg: [],
+      allDrawMsg: [],
     };
   },
   created() {
@@ -1295,6 +1305,13 @@ export default {
     },
   },
   methods: {
+    getMapData(potMsg, lineMsg, allDrawMsg) {
+      this.potMsg = potMsg;
+      this.lineMsg = lineMsg;
+      this.allDrawMsg = allDrawMsg;
+      console.log("地图坐标数据", this.potMsg, this.lineMsg, this.allDrawMsg);
+      this.drawOpen = false;
+    },
     openDraw() {
       this.drawTitle = "项目标绘";
       this.drawOpen = true;
diff --git a/jwtech-admin-page/src/views/building/projectInfo/projectProcess/qualityControl/options/itemDivision/components/segmentProject.vue b/jwtech-admin-page/src/views/building/projectInfo/projectProcess/qualityControl/options/itemDivision/components/segmentProject.vue
index 771d7e07..d9d48998 100644
--- a/jwtech-admin-page/src/views/building/projectInfo/projectProcess/qualityControl/options/itemDivision/components/segmentProject.vue
+++ b/jwtech-admin-page/src/views/building/projectInfo/projectProcess/qualityControl/options/itemDivision/components/segmentProject.vue
@@ -416,6 +416,8 @@ export default {
     /** 查询分部工程列表 */
     getList() {
       this.loading = true;
+      this.queryParams.data.proNo = this.proNo;
+      this.queryParams.data.proCode = this.proCode;
       listSubProject(this.queryParams).then((response) => {
         this.subProjectList = response.records;
         this.total = response.total;
diff --git a/jwtech-admin-page/src/views/evaluationEarlyWarning/earlyWarningManage/warning/options/qualityControl/options/itemDivision/components/segmentProject.vue b/jwtech-admin-page/src/views/evaluationEarlyWarning/earlyWarningManage/warning/options/qualityControl/options/itemDivision/components/segmentProject.vue
index 5c1c8912..dd68a786 100644
--- a/jwtech-admin-page/src/views/evaluationEarlyWarning/earlyWarningManage/warning/options/qualityControl/options/itemDivision/components/segmentProject.vue
+++ b/jwtech-admin-page/src/views/evaluationEarlyWarning/earlyWarningManage/warning/options/qualityControl/options/itemDivision/components/segmentProject.vue
@@ -422,6 +422,8 @@ export default {
     /** 查询分部工程列表 */
     getList() {
       this.loading = true;
+      this.queryParams.data.proNo = this.proNo;
+      this.queryParams.data.proCode = this.proCode;
       listSubProject(this.queryParams).then((response) => {
         this.subProjectList = response.records;
         this.total = response.total;
diff --git a/jwtech-admin-page/src/views/projectStatistics/projectProcess/qualityControl/options/itemDivision/components/segmentProject.vue b/jwtech-admin-page/src/views/projectStatistics/projectProcess/qualityControl/options/itemDivision/components/segmentProject.vue
index c2645853..aca0b9e8 100644
--- a/jwtech-admin-page/src/views/projectStatistics/projectProcess/qualityControl/options/itemDivision/components/segmentProject.vue
+++ b/jwtech-admin-page/src/views/projectStatistics/projectProcess/qualityControl/options/itemDivision/components/segmentProject.vue
@@ -288,6 +288,8 @@ export default {
     /** 查询分部工程列表 */
     getList() {
       this.loading = true;
+      this.queryParams.data.proNo = this.proNo;
+      this.queryParams.data.proCode = this.proCode;
       listSubProject(this.queryParams).then((response) => {
         this.subProjectList = response.records;
         this.total = response.total;