diff --git a/jwtech-admin-page/src/views/largeScreen/index2.vue b/jwtech-admin-page/src/views/largeScreen/index2.vue
index 2d1f6dae..e150c212 100644
--- a/jwtech-admin-page/src/views/largeScreen/index2.vue
+++ b/jwtech-admin-page/src/views/largeScreen/index2.vue
@@ -47,10 +47,17 @@
         </div>
         <div class="group_4 flex-col justify-between">
           <div class="group_5 flex-col justify-end">
-            <div
-              class="map-wrapper"
-              style="background-color: aliceblue; width: 100px; height: 100px"
-            ></div>
+            <div class="map-wrapper" style="">
+              <div id="content">
+                <div id="map" ref="map"></div>
+                <!-- <div id="popup" class="ol-popup" style="background-color: #fff">
+                  <div id="popup-closer" class="popup-closer">
+                    <i class="el-icon-error"></i>
+                  </div>
+                  <div id="popup-content" class="popup-content"></div>
+                </div> -->
+              </div>
+            </div>
             <!-- <div class="box_13 flex-row">
               <div class="text-wrapper_11 flex-col">
                 <span class="text_30">预警中心</span>
@@ -338,6 +345,32 @@ import { getTypeNum, getForewarningNum } from "@/api/projectStatistics/sort";
 import { getInfo, getSourceFundsNum } from "@/api/projectStatistics/sort";
 import { codeToText } from "element-china-area-data";
 import { information, getWarnNumber } from "@/api/enterprise/enterpriseInfo";
+
+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 Cluster from "ol/source/Cluster.js";
+import { TileSuperMapRest } from "@supermap/iclient-ol/mapping/TileSuperMapRest";
+
+import VectorLayer from "ol/layer/Vector.js";
+import { Style, Fill, Stroke, Circle, Text } from "ol/style";
+
+import { Draw, Select } from "ol/interaction";
+import { SingleClick } from "ol/events/condition";
+
+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";
+import GeoJSON from "ol/format/GeoJSON.js";
+import Overlay from "ol/Overlay";
 export default {
   data() {
     return {
@@ -381,6 +414,30 @@ export default {
       rightInfoData: [],
       warnInfo: [],
       zd_warnTypeOptions: [],
+
+      map: null,
+      // projection: "EPSG:4326",
+      pointDrawFlag: "",
+      lineDrawFlag: "",
+      sketch: "", // 存储草图
+      geometries: [], // 存储绘制的几何图形
+      lastPointFeature: null,
+      lastLineFeature: null,
+      all_draw_feature: [],
+      all_point_coords: [],
+      all_line_coords: [],
+      pointVectorSource: null,
+      lineVectorSource: null,
+      ClusterSource: null,
+      pointVectorLayer: null,
+      lineVectorLayer: null,
+      zoom: 10,
+      interaction: null,
+      lonALat: {
+        lon: null,
+        lat: null,
+      },
+      viewCenter: [113.36502, 22.9787],
     };
   },
   created() {
@@ -442,6 +499,7 @@ export default {
       this.rightInfoData = res.data;
       this.FunnelChartInit();
     });
+    this.initMap();
   },
   methods: {
     goIndex() {
@@ -750,6 +808,405 @@ export default {
     zdWarningType(key) {
       return this.selectDictLabel(this.zd_warnTypeOptions, key);
     },
+
+    /**
+     * 初始化一个 openlayers 地图
+     */
+    initMap() {
+      let that = this;
+      const projection = "EPSG:4326";
+      this.map = new Map({
+        target: "map",
+        view: new View({
+          center: that.viewCenter,
+          zoom: 10,
+          // 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 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'
+        // }
+        {
+          index: 11,
+          code: "0",
+          text: "",
+          url: "http://19.25.35.204:31190/iserver/services/map-YiZhangTuShuiZha/rest/maps/水闸",
+          type: "rest-map",
+        },
+        {
+          index: 12,
+          code: "0",
+          text: "",
+          url: "http://19.25.35.204:31190/iserver/services/map-YiZhangTuDiFang/rest/maps/堤防",
+          type: "rest-map",
+        },
+      ];
+      // 绘制图层列表
+      for (let i = 0; i < layerList.length; i++) {
+        loadIndex(layerList[i].type, i);
+      }
+
+      // 初始化绘制点、线图层
+      // 创建一个矢量数据源
+      this.pointVectorSource = new VectorSource({
+        wrapX: false,
+      });
+      // 创建一个矢量图层并将数据源与之关联
+      this.pointVectorLayer = new VectorLayer({
+        source: this.pointVectorSource,
+        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.lineVectorLayer = new VectorLayer({
+        source: this.lineVectorSource,
+        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.pointVectorLayer);
+      this.map.addLayer(this.lineVectorLayer);
+
+      // 监听事件
+      // 监听点图层的change事件来获取点坐标
+
+      // this.map.getViewport().addEventListener('click', () => {
+      //    this.pointVectorSource.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);
+        that.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,
+        });
+        that.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);
+        that.map.addLayer(restLayer);
+      }
+
+      // 缩放
+      this.map.on("moveend", function () {
+        that.zoom = that.map.getView().getZoom();
+        console.log("zomm", that.zoom);
+      });
+      // 鼠标移入元素样式
+      this.map.on("pointermove", (e) => {
+        let pixel = this.map.getEventPixel(e.originalEvent);
+        let feature = this.map.forEachFeatureAtPixel(pixel, (feature) => {
+          return feature;
+        });
+
+        if (feature != undefined) {
+          this.map.getTargetElement().style.cursor = "pointer";
+        } else {
+          this.map.getTargetElement().style.cursor = "auto";
+        }
+      });
+
+      // this.addGuangdongJson();
+      // this.ProjectCoordinatePoint();
+      // this.addPopup();
+    },
   },
 };
 </script>
@@ -777,4 +1234,39 @@ export default {
     height: 100vh;
   }
 }
+
+.map-wrapper {
+  width: 100%;
+  height: 650px;
+
+  #content {
+    width: 100%;
+    height: 100%;
+
+    #map {
+      width: 100%;
+      height: 100%;
+    }
+
+    .ol-popup {
+      position: relative;
+      padding: 20px;
+      width: 400px;
+      height: auto;
+      background-color: rgb(255, 255, 255);
+      border-radius: 5px;
+
+      .popup-closer {
+        cursor: pointer;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+
+        &:hover {
+          opacity: 0.6;
+        }
+      }
+    }
+  }
+}
 </style>