diff --git a/.env.development b/.env.development
index 5431a9bc0..2ad1156bb 100644
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,6 @@
 NODE_ENV=development
-# VUE_APP_API_SERVER =  http://118.190.150.119:41080/api
-VUE_APP_API_SERVER =  http://192.168.1.140/api
+VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
+# VUE_APP_API_SERVER =  http://192.168.1.140/api
 # VUE_APP_API_SERVER =  http://192.168.51.36:8080/api
 # VUE_APP_API_SERVER =  https://epmet-dev.elinkservice.cn/api
 VUE_APP_NODE_ENV=dev 
diff --git a/.env.production.sit b/.env.production.sit
index 6e5b4e9b6..de86de77c 100644
--- a/.env.production.sit
+++ b/.env.production.sit
@@ -1,5 +1,5 @@
 NODE_ENV=production
-# VUE_APP_API_SERVER =  http://118.190.150.119:41080/api
-VUE_APP_API_SERVER =  http://192.168.1.140/api
+VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
+# VUE_APP_API_SERVER =  http://192.168.1.140/api
 VUE_APP_NODE_ENV=prod:sit
 VUE_APP_PUBLIC_PATH=epmet-oper
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 9805b5786..99efda61b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,6 +36,7 @@
   <!-- 开发环境 -->
   <% if (process.env.VUE_APP_NODE_ENV==='dev' ) { %>
     <script>
+    //  window.SITE_CONFIG['apiURL'] = 'http://192.168.1.140/api'
      window.SITE_CONFIG['apiURL'] = 'https://epmet-test.elinkservice.cn/api'
        // window.SITE_CONFIG['apiURL'] = 'http://118.190.150.119:41080/api'
       // window.SITE_CONFIG['apiURL'] = 'https://epmet-dev.elinkservice.cn/api'
diff --git a/src/assets/scss/modules/visual/processAnalyze.scss b/src/assets/scss/modules/visual/processAnalyze.scss
index 6aaea54c6..3a3a0f23b 100644
--- a/src/assets/scss/modules/visual/processAnalyze.scss
+++ b/src/assets/scss/modules/visual/processAnalyze.scss
@@ -19,23 +19,43 @@
   span {
     display: block;
   }
-  .customer_cascader {
-    margin-left: 10px;
-    width: 280px;
-  }
 
-  .customer_select {
-    margin-left: 10px;
+  .second-title {
     display: flex;
-    justify-content: flex-start;
-
-    > span {
-      width: auto;
-      font-size: 22px;
-      font-family: PingFang SC;
-      font-weight: 800;
-      color: #ffffff;
-      line-height: 34px;
+    align-items: center;
+
+    .second-select {
+      margin: 0 10px 0 40px;
+
+      ::v-deep .el-input {
+        width: 140px;
+        height: 36px;
+        .el-input__inner {
+          height: 100%;
+          padding: 0 10px;
+          color: #fff;
+          line-height: 36px;
+          background: #06186d;
+          border: 1px solid #1a64cc;
+        }
+        .el-icon-arrow-up:before {
+          content: '\e78f';
+        }
+      }
+      ::v-deep .el-date-editor {
+        .el-input__prefix {
+          left: unset;
+          right: 5px;
+        }
+      }
+    }
+    .cascader {
+      ::v-deep .el-input {
+        width: 220px;
+      }
+    }
+    .second-select:last-child {
+      margin-left: 0;
     }
   }
 }
@@ -43,8 +63,6 @@
 .g-cpt-resi {
   display: flex;
   flex-direction: row;
-  // flex-wrap: wrap;
-  // justify-content: center;
   height: calc(100vh - 170px);
 
   .g-l {
@@ -64,15 +82,6 @@
     .l_bottom {
       height: calc(100vh - 230px - 385px);
       margin-top: 20px;
-      > span {
-        font-size: 18px;
-        font-family: PingFang SC;
-        font-weight: 800;
-        color: #ffffff;
-      }
-      .echart-line {
-        margin-top: 10px;
-      }
     }
   }
 
@@ -83,6 +92,37 @@
     height: calc(100vh - 160px - 20px);
   }
 }
+
+.l_bottom {
+  .bottom_label {
+    position: relative;
+    padding-left: 40px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+  .bottom_label::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 20px;
+    width: 12px;
+    height: 12px;
+    box-sizing: border-box;
+    margin-top: -6px;
+    background: #2865fa;
+    border-radius: 50%;
+  }
+  > span {
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #ffffff;
+  }
+  .echart-line {
+    margin-top: 10px;
+  }
+}
 .g-count {
   margin-top: 104px;
   margin-left: 52px;
diff --git a/src/assets/scss/modules/visual/resibuzz.scss b/src/assets/scss/modules/visual/resibuzz.scss
index a5a03d3e1..a5c3918e1 100644
--- a/src/assets/scss/modules/visual/resibuzz.scss
+++ b/src/assets/scss/modules/visual/resibuzz.scss
@@ -19,27 +19,46 @@
   span {
     display: block;
   }
-  .customer_cascader {
-    margin-left: 10px;
-    width: 280px;
+
+  .second-select {
+    margin: 0 10px 0 40px;
+
+    ::v-deep .el-input {
+      width: 140px;
+      height: 36px;
+      .el-input__inner {
+        height: 100%;
+        padding: 0 10px;
+        color: #fff;
+        line-height: 36px;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-up:before {
+        content: '\e78f';
+      }
+    }
+    ::v-deep .el-date-editor {
+      .el-input__prefix {
+        left: unset;
+        right: 5px;
+      }
+    }
   }
 
-  .customer_select {
-    position: absolute;
-    right: 20px;
-    top: 30px;
-    display: flex;
-    justify-content: flex-start;
-
-    > span {
-      width: auto;
-      font-size: 22px;
-      font-family: PingFang SC;
-      font-weight: 800;
-      color: #ffffff;
-      line-height: 34px;
+  .cascader {
+    ::v-deep .el-input {
+      width: 220px;
     }
   }
+  .status-select {
+    position: absolute;
+    top: 20px;
+    right: 10px;
+  }
+  .second-select:last-child {
+    margin-left: 0;
+  }
 }
 
 .g-cpt-resi {
diff --git a/src/views/modules/communityService/ninePlaces/team/team.vue b/src/views/modules/communityService/ninePlaces/team/team.vue
index a828b7aea..9f93a0a0f 100644
--- a/src/views/modules/communityService/ninePlaces/team/team.vue
+++ b/src/views/modules/communityService/ninePlaces/team/team.vue
@@ -304,8 +304,11 @@ export default {
         this.tableData = data.list
 
         this.tableData.forEach(item => {
-          let timeArray = item.time.split(' ')
-          item.time = timeArray[0]
+          if (item.time) {
+            let timeArray = item.time.split(' ')
+            item.time = timeArray[0]
+          }
+
         });
       } else {
         this.$message.error(msg)
diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue
index d5f482582..10f8da5db 100644
--- a/src/views/modules/visual/communityGovern/processAnalyze.vue
+++ b/src/views/modules/visual/communityGovern/processAnalyze.vue
@@ -3,27 +3,27 @@
     <div class="title">
       <img src="@/assets/img/shuju/title-tip.png" />
       <span>项目处理分析</span>
-      <el-cascader class="customer_cascader"
-                   ref="myCascader"
-                   v-model="agencyIdArray"
-                   :key="iscascaderShow"
-                   :options="casOptions"
-                   :props="optionProps"
-                   @change="handleChangeAgency"
-                   clearable></el-cascader>
-
-      <div class="customer_select">
-
-        <el-select v-model="status"
-                   :popper-append-to-body="false"
-                   placeholder="请选择">
-          <el-option v-for="(item,index) in stateArray"
-                     :key="item.value"
-                     :label="item.label"
-                     :value="item.value"
-                     @click.native="handleChangeState(index)">
-          </el-option>
-        </el-select>
+
+      <div class="second-title">
+        <div class="second-select cascader">
+          <el-cascader class="customer_cascader"
+                       ref="myCascader"
+                       v-model="agencyIdArray"
+                       :key="iscascaderShow"
+                       :options="casOptions"
+                       :props="optionProps"
+                       @change="handleChangeAgency"
+                       clearable></el-cascader>
+        </div>
+        <div class="second-select">
+          <el-date-picker v-model="dateId"
+                          type="date"
+                          :clearable="false"
+                          prefix-icon="el-icon-caret-bottom"
+                          placeholder="选择日期"
+                          value-format="yyyyMMdd">
+          </el-date-picker>
+        </div>
       </div>
 
     </div>
@@ -47,7 +47,7 @@
           </div>
         </div>
         <div class="l_bottom">
-          <span>近12月新增项目数折线图</span>
+          <div class="bottom_label">党建单位分类统计</div>
           <screen-echarts-frame class="echart-line"
                                 @myChartMethod="lineInitOk"
                                 ref="lineChart"></screen-echarts-frame>
@@ -73,6 +73,7 @@ import { requestPost } from "@/js/dai/request";
 import cptCard from "@/views/modules/visual/cpts/card";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
+import screenMap from "@/views/modules/visual/components/screen-map";
 
 import { pieOption } from './processPieOption.js'
 import { lineOption } from './processLineOption.js'
@@ -95,6 +96,7 @@ export default {
       lineColorArray: [],
       lineData: [820, 932, 901, 934, 1290, 1330, 1320],
 
+      pieChartS: null,
       pieChart: '',
       pieOption: {},
       pieInitState: false,
@@ -125,7 +127,7 @@ export default {
         },
       ],
 
-      status: 'all',
+      dateId: '',
       agencyId: '',
 
       casOptions: [],
@@ -150,11 +152,16 @@ export default {
 
   async mounted () {
     this.userId = this.uid;
+    this.initData()
     this.getApiData();
   },
 
   methods: {
+    initData () {
+      var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
+      this.dateId = new Date(time); // 获取的是前一天日期
 
+    },
     async getApiData () {
       await this.getAgencylist()//获取组织级别
       await this.getProjectTotal()
@@ -190,7 +197,7 @@ export default {
       const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projecttotal";
       let params = {
         agencyId: '',
-        dateId: '',
+        dateId: this.dateId,
       };
 
       const { data, code, msg } = await requestPost(url, params);
@@ -222,8 +229,9 @@ export default {
       }
     },
 
-    pieInitOk () {
+    pieInitOk (dom) {
       console.log('pie准备好了')
+      this.pieChartS = dom
       this.pieInitState = true
 
     },
@@ -247,10 +255,11 @@ export default {
 
       const _that = this
       // this.$refs.pieChart.showLoading()
-      //  const url ="/gov/issue/issue/resibuzz-leftpiechart";
-      const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz-leftpiechart";
+      //  const url ="/data/aggregator/project/projectmonthincr";
+      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectmonthincr";
       let params = {
         agencyId: this.agencyId,
+        dateId: this.dateId,
       };
 
       const { data, code, msg } = await requestPost(url, params);
@@ -258,15 +267,28 @@ export default {
       if (code === 0) {
         // 获取pieChart配置
         this.lineOption = lineOption()
+        let xaxis = []
+        let totalIndexData = []
         if (data && data.length > 0) {
+          data.forEach(item => {
+            xaxis.push(item.type)
+            totalIndexData.push(item.value)
+          });
           // this.lineData = data
 
         } else {
-          this.lineData = [0]
+
         }
+        this.$refs.lineChart.setOption(this.lineOption, true)
+        this.$refs.lineChart.setOption({
+          xAxis: { data: xaxis },
+          series: [
+            { data: totalIndexData },
+
+          ]
+        }, true)
+
 
-        debugger
-        this.$refs.lineChart.setOption(this.lineOption)
       } else {
         this.$message.error(msg);
       }
@@ -291,7 +313,7 @@ export default {
       // this.$refs.pieChart.showLoading()
 
       // 获取pieChart配置
-      this.pieOption = pieOption()
+      this.pieOption = pieOption(this.pieChartS)
 
       this.pieData.forEach(item => {
         this.pieTotal = this.pieTotal + item.value
@@ -376,6 +398,7 @@ export default {
     cptCard,
     cptTb,
     screenEchartsFrame,
+    screenMap,
   },
 
   watch: {
diff --git a/src/views/modules/visual/communityGovern/processLineOption.js b/src/views/modules/visual/communityGovern/processLineOption.js
index 0d094b5c5..ef7dec010 100644
--- a/src/views/modules/visual/communityGovern/processLineOption.js
+++ b/src/views/modules/visual/communityGovern/processLineOption.js
@@ -1,21 +1,76 @@
-
+import * as echarts from 'echarts'
 export function lineOption () {
 
   return {
+   
     xAxis: {
       type: 'category',
-      boundaryGap: false,
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      // boundaryGap: false,
+      axisLabel: {
+        color: '#8ec7dc',
+        fontSize: 16
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#0c4b59'
+        }
+      }
     },
     yAxis: {
-      type: 'value'
+      nameTextStyle: {
+        color: '#8ec7dc',
+        fontSize: 18
+      },
+      splitNumber: 4,
+      minInterval: 1,
+      show: true,
+      type: 'value',
+      axisLabel: {
+        color: '#8ec7dc',
+        fontSize: 18
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#145968'],
+          type: 'dotted'
+        }
+      },
+      axisLine: {
+        show: true,
+        symbol: ['none', 'arrow'],
+        symbolOffset: [0, 15],
+        lineStyle: {
+          color: '#0c4b59'
+        }
+      }
     },
     series: [
       {
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        name: '项目数',
         type: 'line',
-        areaStyle: {}
-      }
+        barWidth: 15,
+        areaStyle: {},
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0, 1, 0, 0,
+            [
+              { offset: 0, color: 'rgba(121, 55, 255, 0)' },
+              { offset: 1, color: '#6339FF' }
+            ]
+          )
+        }
+      },
+      // {
+      //   data: [820, 932, 901, 934, 1290, 1330, 1320],
+      //   type: 'line',
+      //   areaStyle: {}
+      // }
     ]
 
   }
diff --git a/src/views/modules/visual/communityGovern/processPieOption.js b/src/views/modules/visual/communityGovern/processPieOption.js
index a58528b73..840629157 100644
--- a/src/views/modules/visual/communityGovern/processPieOption.js
+++ b/src/views/modules/visual/communityGovern/processPieOption.js
@@ -1,5 +1,5 @@
 
-export function pieOption () {
+export function pieOption (_charts) {
 const center= ['50%', '200px']
   return {
     title: {
@@ -81,37 +81,60 @@ const center= ['50%', '200px']
         avoidLabelOverlap: false,
         // top: top + '%',
         // height: '80%',
-        selectedMode: 'single',
+        // selectedMode: 'single',
         left: 'center',
         width: 400,
         label: {
-           position: 'outer',
-          // alignTo: 'edge',
-          formatter: '{a|{c}}\n\n{name|{b}}',
-          // minMargin: 100,
-          // edgeDistance: 0,
-          // lineHeight: 20,
+          // show: false,
+          position: 'outside',
+          alignTo: 'edge',
+          // formatter: '{a|{c}}\n\n{name|{b}}',
+          formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+          minMargin: 5,
+          edgeDistance: 1,
+          lineHeight: 15,
           color: '#fff',
           fontSize: 12,
-           distanceToLabelLine: -60,
+          // distanceToLabelLine: -60,
           rich: {
+            name: {
+              padding: [0, 6, 0, 6]
+            },
             a: {
-              fontSize: '30px',
-              color: ' #00F5FE',
-              
+              fontSize: 30,
+              color: '#fff',
+              padding: [0, 6, 6, 6]
             },
-            b: {
-              lineHeight: 0,
-              fontSize: '20px',
-              color: ' #FFFFFF'
-
+            r: {
+              backgroundColor: 'auto',
+              borderRadius: 6,
+              width: 6,
+              height: 6,
+              // padding: [3, 3, 0, -12]
             }
           }
         },
         labelLine: {
+          show: false,
           smooth: 0.2,
           length: 30,
-          length2: 90
+          length2: 0,
+          maxSurfaceAngle: 80
+        },
+        labelLayout: function (params) {
+          
+          const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+          const points = params.labelLinePoints;
+          // Update the end point.
+          if (points) {
+            points[2][0] = isLeft
+            ? params.labelRect.x
+            : params.labelRect.x + params.labelRect.width;
+          }
+          
+          return {
+            labelLinePoints: points
+          };
         },
         itemStyle: {
            color:function(params) {
diff --git a/src/views/modules/visual/communityGovern/resibuzz.vue b/src/views/modules/visual/communityGovern/resibuzz.vue
index 2d1ea2e2c..8b7406b6e 100644
--- a/src/views/modules/visual/communityGovern/resibuzz.vue
+++ b/src/views/modules/visual/communityGovern/resibuzz.vue
@@ -3,17 +3,19 @@
     <div class="title">
       <img src="@/assets/img/shuju/title-tip.png" />
       <span>居民热议</span>
-      <el-cascader class="customer_cascader"
-                   ref="myCascader"
-                   v-model="agencyIdArray"
-                   :key="iscascaderShow"
-                   :options="casOptions"
-                   :props="optionProps"
-                   @change="handleChangeAgency"
-                   clearable></el-cascader>
 
-      <div class="customer_select">
+      <div class="second-select cascader">
 
+        <el-cascader class="customer_cascader"
+                     ref="myCascader"
+                     v-model="agencyIdArray"
+                     :key="iscascaderShow"
+                     :options="casOptions"
+                     :props="optionProps"
+                     @change="handleChangeAgency"
+                     clearable></el-cascader>
+      </div>
+      <div class="second-select status-select">
         <el-select v-model="status"
                    :popper-append-to-body="false"
                    placeholder="请选择">
@@ -25,8 +27,8 @@
           </el-option>
         </el-select>
       </div>
-
     </div>
+
     <div class="g-cpt-resi">
       <div class="g-l">
         <screen-echarts-frame class="echart-wr"
@@ -316,18 +318,6 @@ export default {
 
           };
           console.log('zhilma')
-          // element.labelLayout = (params) => {
-          //   const isLeft = params.labelRect.x < this.pieChartS.getWidth() / 2;
-          //   const points = params.labelLinePoints;
-          //   console.log('isLeft', isLeft, points)
-          //   // Update the end point.
-          //   points[2][0] = isLeft
-          //     ? params.labelRect.x
-          //     : params.labelRect.x + params.labelRect.width;
-          //   return {
-          //     labelLinePoints: points
-          //   };
-          // }
 
         } else {
           element.label = {
@@ -440,82 +430,5 @@ export default {
   scoped
 ></style>
 
-<style lang=scss >
-.customer_select {
-  /* 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */
-  /deep/ input::-webkit-input-placeholder {
-    color: #fff;
-  }
-  /deep/ input::-moz-input-placeholder {
-    color: #fff;
-  }
-  /deep/ input::-ms-input-placeholder {
-    color: #fff;
-  }
-
-  /* 修改的是el-input的样式 */
-  /* 一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色 */
-  /* 另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色 */
-  /deep/ .el-select,
-  /deep/ .el-input,
-  /deep/ .el-input__inner {
-    background-color: #08164d00;
-    color: #fff;
-    border: 0px;
-    border-radius: 0px;
-    text-align: left;
-    font-size: 22px;
-    font-family: PingFang SC;
-    font-weight: 800;
-    color: #ffffff;
-    display: flex;
-  }
-
-  /* el-input聚焦的时候 外层的border会有一个样式 */
-  /deep/ .el-select .el-input.is-focus .el-input__inner {
-    border: 0px;
-  }
-
-  /* 修改的是el-input上下的小图标的颜色 */
-  /deep/ .el-select .el-input .el-select__caret::before {
-    color: #fff;
-    content: "";
-    background: url("../../../../assets/img/xiala.png") center center no-repeat;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  /* 修改总体选项的样式 最外层 */
-  /deep/ .el-select-dropdown {
-    background-color: #08164d;
-    margin: 0px;
-    border: 0px;
-    border-radius: 0px;
-  }
-
-  /* 修改选项整体的样式 */
-  /deep/ .el-select-dropdown__list {
-    padding: 6px 0 20px 0;
-  }
-  /* 修改单个的选项的样式 */
-  /deep/ .el-select-dropdown__item {
-    background-color: transparent;
-    color: #fff;
-  }
-
-  /* item选项的hover样式 */
-  /deep/ .el-select-dropdown__item.hover,
-  /deep/ .el-select-dropdown__item:hover {
-    color: #409eff;
-  }
-
-  /* 修改的是下拉框选项内容上方的尖角 */
-  /deep/ .el-popper .popper__arrow,
-  .el-popper .popper__arrow::after {
-    display: none;
-  }
-}
+<style lang=scss scoped>
+</style>
diff --git a/src/views/modules/visual/components/screen-map/index copy.vue b/src/views/modules/visual/components/screen-map/index copy.vue
new file mode 100644
index 000000000..09217e026
--- /dev/null
+++ b/src/views/modules/visual/components/screen-map/index copy.vue	
@@ -0,0 +1,516 @@
+<template>
+  <div style="position: relative">
+
+    <div class="div_map"
+         id="map"
+         ref="map">
+      <!-- <div id="map"
+             class="map"></div> -->
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile.js';
+import XYZ from 'ol/source/XYZ.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+import Point from "ol/geom/Point.js";
+import Feature from "ol/Feature.js";
+import Overlay from 'ol/Overlay';
+import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
+import { getCenter, boundingExtent } from 'ol/extent.js';
+import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
+
+import { mapGetters } from "vuex";
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+
+
+
+let loading;//加载动画
+
+let map;
+let mapView;
+let gaodeMapLayer;//背景地图图层
+let polygonLayer;//区域标注图层
+let iconLayer; // icon标注图层
+let iconSource; // icon
+let polygonSource;//标注多边形
+let select;//选中标注
+
+
+//url图标
+
+let iconUrlArray = [
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+];
+let textColorArray = [
+  'rgba(236, 69, 4, 0.66)',
+  'rgba(0, 146, 238, 0.75)',
+  'rgba(238, 151, 0, 0.8)'
+];
+let polygonColorArray = [
+  'rgba(210, 2, 2, 0.24)',
+  'rgba(43, 231, 253, 0.25)',
+  'rgba(183, 185, 0, 0.16)'
+];
+//变电站标注的文字样式
+var createTextStyle = function (feature) {
+  return new Text({
+    textAlign: undefined,
+    font: "18px Arial",
+    //fontFamily: "Courier New, monospace",
+    // fontWeight: "bold",
+    text: feature.values_.name,
+    backgroundFill: new Fill({
+      // color: 'rgba(0, 146, 238, 0.75)'
+      color: textColorArray[feature.values_.index - 1]
+    }),
+    padding: [4, 10, 4, 10],
+    //text: "变电站名称",
+    fill: new Fill({ color: "#ffffff" }),
+    // stroke: new Stroke({ color: "#ffffff", width: 3 }),
+    offsetY: -30,
+    offsetX: -50,
+    overflow: true,
+  });
+};
+
+//变电站标注样式
+
+var polygonStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      fill: new Fill({
+        // color: [255, 255, 255, 0.3]
+        color: polygonColorArray[feature.values_.index - 1]
+      }),
+      stroke: new Stroke({
+        color: polygonColorArray[feature.values_.index - 1],
+        width: 3
+      }),
+
+      text: createTextStyle(feature)
+    });;
+  };
+})()
+
+const vueGis = {
+  name: 'HomeMap',
+  data () {
+    return {
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      orgData: {},//当前组织对象
+      orgId: '',
+      orgLevel: '',
+
+      subAgencyArray: [],//下拉框数据
+      iconCoordinators: [],
+      currentCoordinate: null,
+      overlay: null,
+
+
+    }
+  },
+  async mounted () {
+    //加载组织数据
+    await this.loadOrgData()
+
+    //初始化地图
+    this.initMap()
+
+    //添加标注图层
+    this.addPolygonLayer()
+
+    //添加icontuceng
+    this.addIconLayer()
+
+    //加载当前园区的标注
+    this.loadPolygon(this.subAgencyArray)
+
+
+
+  },
+  methods: {
+
+    //刷新地图
+    async refreshMap (isRefreshView) {
+
+      //加载组织数据
+      await this.loadOrgData()
+
+      //加载当前园区的标注
+      await this.loadPolygon(this.subAgencyArray)
+
+      //重置地图中心点
+      if (isRefreshView) {
+        this.setMapLocation()
+        mapView.setCenter(this.centerPoint);
+        mapView.setZoom(this.zoom);
+      }
+
+
+    },
+
+
+    //加载组织数据
+    async loadOrgData () {
+
+      const url = "/gov/org/agency/maporg"
+      let params = {
+        orgId: this.orgId,
+        level: this.orgLevel
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+
+        this.orgData = data
+        this.orgId = this.orgData.id
+        this.orgLevel = this.orgData.level
+
+        if (data.children && data.children.length > 0) {
+          this.subAgencyArray = data.children
+        } else {
+          this.subAgencyArray = []
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载当前园区的标注
+    loadPolygon (subAgencyArray) {
+      polygonSource.clear()//清空多边形标注
+      iconSource.clear()//清空多边形标注
+
+      let featureData = []//标注数据
+      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        subAgencyArray.forEach(agencyItem => {
+
+          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
+            let urlNum = this.getRndBetween(1, 3)
+
+            oneData = {
+              type: 'Feature',
+              id: agencyItem.id,
+              properties: {
+                id: agencyItem.id,
+                level: agencyItem.level,
+                name: agencyItem.name,
+                index: urlNum//颜色随机的索引
+              },
+              geometry: {
+                type: 'Polygon',
+                coordinates: [],
+              },
+            }
+            let coorArray = agencyItem.coordinates.split(',')//坐标数组
+
+            let itemArray = []//单个点位的[lon,lat]，数组
+            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
+
+            coorArray.forEach((item, index) => {
+              itemArray.push(item)
+              if (index % 2 == 0) {//偶
+
+              } else {//奇
+                polygonArray.push(itemArray)
+                itemArray = []
+              }
+
+            });
+            oneData.geometry.coordinates.push(polygonArray)
+            featureData.push(oneData)
+          }
+        });
+      }
+
+      if (featureData && featureData.length > 0) {
+        var geojsonObject = {
+          'type': 'FeatureCollection',
+          'features': featureData
+        };
+        let feature = (new GeoJSON()).readFeatures(geojsonObject)
+
+        polygonSource.addFeatures(feature)
+
+        let iconFeatures = [];
+        feature.forEach(oneIcon => {
+
+          var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
+          // var center = getCenter(extent);   //获取边界区域的中心位置
+          //添加标注
+          let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
+          let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2
+
+          let oneArray = [x, y]
+          this.iconCoordinators.push(oneArray)
+          // debugger
+
+          let oneCctv = new Feature({
+            geometry: new Point([x, y]),
+            id: oneIcon.id_,
+            properties: {
+              type: "icon",
+              id: oneIcon.id_
+            }
+          });
+
+          let iconStyle = new Style({
+            image: new Icon({
+              // anchor: [0.5, 0.5],
+              // imgSize: [32, 32],
+              scale: 0.5,
+              src: iconUrlArray[oneIcon.values_.index - 1]
+            })
+          });
+
+          oneCctv.setStyle(iconStyle);
+          iconFeatures.push(oneCctv);
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+
+      // this.addGif()
+
+    },
+    //设置地图定位的中心点和缩放级别
+    setMapLocation () {
+      this.centerPoint = []
+
+      if (this.orgData.longitude && this.orgData.latitude) {
+        this.centerPoint.push(this.orgData.longitude)
+        this.centerPoint.push(this.orgData.latitude)
+      }
+
+      this.setZoom(this.orgData.agencyLevel)
+    },
+
+    //根据组织层级设置缩放级别
+    setZoom (agencyLevel) {
+      if (agencyLevel === 'district') {
+        this.zoom = 14
+      } else if (agencyLevel === 'street') {
+        this.zoom = 15
+      } else if (agencyLevel === 'community') {
+        this.zoom = 16
+      }
+
+    },
+
+    initMap () {
+      this.setMapLocation()
+
+      gaodeMapLayer = new TileLayer({
+        title: "地图",
+        source: new XYZ({
+          //指定url瓦片
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+          wrapX: true//x方向平铺，也可以选择false
+        }),
+        zIndex: 20
+      });
+
+      mapView = new View({
+        //中心点坐标
+        center: this.centerPoint,
+        // projection: 'EPSG:3857',
+        projection: 'EPSG:4326',
+        zoom: this.zoom,
+        minZoom: this.minZoom
+      })
+
+      //初始化map和地图底图
+      //创建地图容器
+      map = new Map({
+        layers: [gaodeMapLayer],
+        //加载瓦片图层数据
+        view: mapView,
+        target: 'map'
+        //目标加载到map中
+      })
+
+      map.on('singleclick', function (e) {
+        // console.log(e.coordinate)
+        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
+      })
+
+      //去除双击放大效果
+      const dblClickInteraction = map
+        .getInteractions()
+        .getArray()
+        .find(interaction => {
+          return interaction instanceof DoubleClickZoom;
+        });
+      map.removeInteraction(dblClickInteraction);
+
+    },
+
+    //添加变电站标注图层
+    addPolygonLayer () {
+      polygonSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      polygonLayer = new VectorLayer({
+        source: polygonSource,
+        style: polygonStyleFunction,
+        zIndex: 50
+      });
+
+      //选中多边形后的样式
+      var overlayStyle = (function () {
+
+        return function (feature) {
+          var styles = {};
+          styles['Polygon'] = [
+            new Style({
+              stroke: new Stroke({
+                color: '#ec9000',
+                width: 2
+              })
+            }),
+
+            new Style({
+              fill: new Fill({
+                color: 'rgba(0, 0, 255, 0.1)'
+              })
+            }),
+            new Style({
+              text: createTextStyle(feature)
+            })
+          ];
+          styles['MultiPolygon'] = styles['Polygon'];
+          return styles[feature.getGeometry().getType()];
+        };
+      })();
+
+      select = new Select({
+        style: overlayStyle
+      });
+
+
+      map.addLayer(polygonLayer)
+      map.addInteraction(select);
+
+
+
+    },
+
+    addIconLayer () {
+      iconSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      iconLayer = new VectorLayer({
+        source: iconSource,
+        zIndex: 70
+      });
+
+      map.addLayer(iconLayer);
+
+    },
+
+    //取随机数
+    getRndBetween (lowerLimit, upperLimit) {
+      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
+    },
+
+    //开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    endLoading () {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+  props: {
+    //是否显示多边形图层
+    showPolygonLayer: {
+      type: Boolean,
+      default: false
+    },
+
+    //是否显示标注
+    showIconLayer: {
+      type: Boolean,
+      default: false
+    }
+
+  },
+  computed: {
+
+    mapHeight () {
+
+      return this.clientHeight - 120;
+
+    },
+    // zoom: {
+    //   get () {
+    //     //根据不同屏幕分辨率，控制zoom大小
+    //     if (this.clientHeight < 900) {
+    //       return 2.3
+    //     } else {
+    //       return 2.8
+    //     }
+    //   },
+    //   set (value) {
+    //   }
+    // },
+    ...mapGetters(["clientHeight"])
+
+  },
+  components: {},
+}
+export default vueGis;
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_content {
+  .ol-viewport {
+    border-radius: 5px;
+  }
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+
+.el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
+</style>   
\ No newline at end of file
diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue
new file mode 100644
index 000000000..4dfac221a
--- /dev/null
+++ b/src/views/modules/visual/components/screen-map/index.vue
@@ -0,0 +1,612 @@
+<template>
+  <div style="position: relative">
+
+    <div class="div_map"
+         id="map"
+         ref="map">
+      <!-- <div id="map"
+             class="map"></div> -->
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile.js';
+import XYZ from 'ol/source/XYZ.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+import Point from "ol/geom/Point.js";
+import Feature from "ol/Feature.js";
+import Overlay from 'ol/Overlay';
+import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
+import { getCenter, boundingExtent } from 'ol/extent.js';
+import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
+
+import { mapGetters } from "vuex";
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+
+
+
+let loading;//加载动画
+
+let map;
+let mapView;
+let gaodeMapLayer;//背景地图图层
+let polygonLayer;//区域多边形标注图层
+let polygonSource;//标注多边形
+
+let polIconLayer; // 区域icon标注图层
+let polIconSource; // icon
+
+let iconLayer; // icon图层
+let iconSource; // icon
+
+let select;//选中标注
+
+
+//url图标
+
+
+let textColorArray = [
+  'rgba(236, 69, 4, 0.66)',
+  'rgba(0, 146, 238, 0.75)',
+  'rgba(238, 151, 0, 0.8)'
+];
+let polygonColorArray = [
+  'rgba(210, 2, 2, 0.24)',
+  'rgba(43, 231, 253, 0.25)',
+  'rgba(183, 185, 0, 0.16)'
+];
+//变电站标注的文字样式
+var createTextStyle = function (feature) {
+  return new Text({
+    textAlign: undefined,
+    font: "18px Arial",
+    //fontFamily: "Courier New, monospace",
+    // fontWeight: "bold",
+    text: feature.values_.name,
+    backgroundFill: new Fill({
+      // color: 'rgba(0, 146, 238, 0.75)'
+      color: textColorArray[feature.values_.index - 1]
+    }),
+    padding: [4, 10, 4, 10],
+    //text: "变电站名称",
+    fill: new Fill({ color: "#ffffff" }),
+    // stroke: new Stroke({ color: "#ffffff", width: 3 }),
+    offsetY: -30,
+    offsetX: -50,
+    overflow: true,
+  });
+};
+
+//变电站标注样式
+
+var polygonStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      fill: new Fill({
+        // color: [255, 255, 255, 0.3]
+        color: polygonColorArray[feature.values_.index - 1]
+      }),
+      stroke: new Stroke({
+        color: polygonColorArray[feature.values_.index - 1],
+        width: 3
+      }),
+
+      text: createTextStyle(feature)
+    });;
+  };
+})()
+
+const vueGis = {
+  name: 'HomeMap',
+  data () {
+    return {
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      mapInfo: {
+        agencyLevel: "community",
+        coordinates: "120.37342346270151,36.0950221490494,120.39931465567633,36.09693067926868,120.39740612545705,36.09113306860255,120.39762218548188,36.08911650837086,120.39999884575495,36.0859836380109,120.4010071258708,36.080978247435795,120.39258078490263,36.08094223743166,120.38537878407514,36.08303081767163,120.37616022301596,36.082382637597156,120.37342346270151,36.0950221490494",
+        id: "6e511da6816e53af4cda952365a26eb9",
+        latitude: 36.072227,
+        level: "agency",
+        longitude: 120.389455,
+        name: "南宁社区",
+      },
+
+      polygonArray: [
+        {
+          agencyLevel: "grid",
+          coordinates: "120.37421528296863,36.085017737014525,120.37551227771064,36.08181339174796,120.38108173804676,36.08303409283569,120.3852397566111,36.08318668276358,120.38539234391965,36.090816077003794,120.37410084117755,36.09096866431234,120.37421528296863,36.085017737014525",
+          id: "2a278c0ceb863359d263fda7aabf6752",
+          latitude: 36.072227,
+          level: "grid",
+          longitude: 120.389455,
+          name: "第三网格",
+        },
+        {
+          agencyLevel: "grid",
+          coordinates: "120.38577111171519,36.095762169637716,120.38544318588274,36.08317796726519,120.39339541546589,36.08080049372144,120.40122467708379,36.08026761565102,120.40188052874869,36.08276805856732,120.39929810296697,36.086990119140545,120.39757648953199,36.08981849070392,120.39901116927089,36.0943274884915,120.3977404524482,36.096418022709926,120.38577111171519,36.095762169637716",
+          id: "94227891bc4ad5f40cb95081761592d9",
+          latitude: 36.072227,
+          level: "grid",
+          longitude: 120.389455,
+          name: "南宁第二网格",
+        },
+        {
+          agencyLevel: "grid",
+          coordinates: "120.3736430792519,36.09505039184175,120.373948253869,36.09119754789451,120.38543049205646,36.09115940106737,120.38577381481036,36.0960803587938,120.3736430792519,36.09505039184175",
+          id: "a772a325e022484ef53e4a7d679726f1",
+          latitude: 36.072227,
+          level: "grid",
+          longitude: 120.389455,
+          name: "南宁第一网格",
+        },
+      ],
+
+      iconArrays: [
+        {
+          id: "2a278c0ceb863359d263fda7aabf6752",
+          latitude: 36.072227,
+          longitude: 120.389455,
+          level: "grid",
+          name: "第三网格",
+        },
+        {
+          id: "2a278c0ceb863359d263fda7aabf6753",
+          latitude: 36.072227,
+          longitude: 120.389455,
+          level: "grid",
+          name: "南宁第二网格",
+        },
+        {
+          id: "2a278c0ceb863359d263fda7aabf6742",
+          latitude: 36.072227,
+          longitude: 120.389455,
+          level: "grid",
+          name: "南宁第一网格",
+        }
+      ],
+
+      //policon图标样式
+      polIconUrlArray: [
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+      ],
+      //icon图标样式
+      iconUrlArray: [
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+      ],
+
+    }
+  },
+  async mounted () {
+
+
+  },
+  methods: {
+    //加载地图
+    loadMap (mapInfo) {
+      this.mapInfo = mapInfo
+
+      //初始化地图
+      this.initMap()
+
+      if (this.showPolygonLayer) {
+        //初始化多边形标注图层
+        this.initPolygonLayer()
+        //加载当前园区的标注
+        this.loadPolygon()
+      }
+      if (this.showPolIconLayer) {
+
+        //初始化多边形标注图层
+        this.initPolygonLayer()
+        //加载当前园区的标注
+        this.loadPolygon()
+      }
+
+      if (this.showIconLayer) {
+        //初始化icon图层
+        this.initIconLayer()
+      }
+
+
+    },
+
+    //刷新地图
+    async refreshMap (isRefreshView) {
+
+      //加载组织数据
+      await this.loadOrgData()
+
+      //加载当前园区的标注
+      await this.loadPolygon()
+
+      //重置地图中心点
+      if (isRefreshView) {
+        this.setMapLocation()
+        mapView.setCenter(this.centerPoint);
+        mapView.setZoom(this.zoom);
+      }
+
+
+    },
+
+    //加载多边形
+    loadPolygon () {
+      polygonSource.clear()//清空多边形标注
+
+      let featureData = []//多边形数据数据
+      if (polygonArray && polygonArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        polygonArray.forEach(polygonItem => {
+
+          if (polygonItem.coordinates && polygonItem.coordinates !== '') {//如果有坐标
+            let urlNum = this.getRndBetween(1, 3)
+
+            oneData = {
+              type: 'Feature',
+              id: polygonItem.id,
+              properties: {
+                id: polygonItem.id,
+                level: polygonItem.level,
+                name: polygonItem.name,
+                index: urlNum//颜色随机的索引
+              },
+              geometry: {
+                type: 'Polygon',
+                coordinates: [],
+              },
+            }
+            let coorArray = polygonItem.coordinates.split(',')//坐标数组
+
+            let itemArray = []//单个点位的[lon,lat]，数组
+            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
+
+            coorArray.forEach((item, index) => {
+              itemArray.push(item)
+              if (index % 2 == 0) {//偶
+
+              } else {//奇
+                polygonArray.push(itemArray)
+                itemArray = []
+              }
+
+            });
+            oneData.geometry.coordinates.push(polygonArray)
+            featureData.push(oneData)
+          }
+        });
+      }
+
+      if (featureData && featureData.length > 0) {
+        var geojsonObject = {
+          'type': 'FeatureCollection',
+          'features': featureData
+        };
+        let feature = (new GeoJSON()).readFeatures(geojsonObject)
+
+        polygonSource.addFeatures(feature)
+
+        if (this.showPolIconLayer) {
+          this.loadPolIcon(feature)
+        }
+
+      }
+
+    },
+
+    //加载多边形的icon
+    loadPolIcon (feature) {
+      let polyIconFeatures = [];
+      feature.forEach(oneIcon => {
+
+        var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
+        // var center = getCenter(extent);   //获取边界区域的中心位置
+        //添加标注
+        let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
+        let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2
+
+        let polyIcon = new Feature({
+          geometry: new Point([x, y]),
+          id: oneIcon.id_,
+          properties: {
+            type: "icon",
+            id: oneIcon.id_
+          }
+        });
+
+        let polyIconStyle = new Style({
+          image: new Icon({
+            // anchor: [0.5, 0.5],
+            // imgSize: [32, 32],
+            scale: 0.5,
+            src: polIconUrlArray[oneIcon.values_.index - 1]
+          })
+        });
+
+        polyIcon.setStyle(polyIconStyle);
+        polyIconFeatures.push(polyIcon);
+
+      });
+
+      polIconSource.addFeatures(polyIconFeatures);
+    },
+
+    //加载icon图标
+    loadIcon () {
+      iconSource.clear()//清空多边形标注
+      if (this.iconArrays && this.iconArrays.length > 0) {
+
+        let iconFeatures = [];
+        this.iconArrays.forEach(oneIcon => {
+
+          //添加标注
+          let iconItem = new Feature({
+            geometry: new Point([oneIcon.longitude, oneIcon.latitude]),
+            id: oneIcon.id,
+            properties: {
+              type: "icon",
+              id: oneIcon.id
+            }
+          });
+
+          let iconStyle = new Style({
+            image: new Icon({
+              // anchor: [0.5, 0.5],
+              // imgSize: [32, 32],
+              scale: 0.5,
+              src: iconUrlArray[oneIcon.values_.index - 1]
+            })
+          });
+
+          iconItem.setStyle(iconStyle);
+          iconFeatures.push(iconItem);
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+    },
+
+    //初始化地图
+    initMap () {
+      this.setMapLocation()
+      gaodeMapLayer = new TileLayer({
+        title: "地图",
+        source: new XYZ({
+          //指定url瓦片
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+          wrapX: true//x方向平铺，也可以选择false
+        }),
+        zIndex: 20
+      });
+
+      mapView = new View({
+        //中心点坐标
+        center: this.centerPoint,
+        // projection: 'EPSG:3857',
+        projection: 'EPSG:4326',
+        zoom: this.zoom,
+        minZoom: this.minZoom
+      })
+
+      //初始化map和地图底图
+      //创建地图容器
+      map = new Map({
+        layers: [gaodeMapLayer],
+        //加载瓦片图层数据
+        view: mapView,
+        target: 'map'
+        //目标加载到map中
+      })
+
+      map.on('singleclick', function (e) {
+        // console.log(e.coordinate)
+        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
+      })
+
+      //去除双击放大效果
+      const dblClickInteraction = map
+        .getInteractions()
+        .getArray()
+        .find(interaction => {
+          return interaction instanceof DoubleClickZoom;
+        });
+      map.removeInteraction(dblClickInteraction);
+
+    },
+    //设置地图定位的中心点和缩放级别
+    setMapLocation () {
+      this.centerPoint = []
+
+      if (this.mapInfo.longitude && this.mapInfo.latitude) {
+        this.centerPoint.push(this.mapInfo.longitude)
+        this.centerPoint.push(this.mapInfo.latitude)
+      }
+
+      this.setZoom(this.mapInfo.agencyLevel)
+    },
+
+    //根据组织层级设置缩放级别
+    setZoom (agencyLevel) {
+      if (agencyLevel === 'district') {
+        this.zoom = 14
+      } else if (agencyLevel === 'street') {
+        this.zoom = 15
+      } else if (agencyLevel === 'community') {
+        this.zoom = 16
+      }
+
+    },
+
+
+    //初始化多边形标注图层
+    initPolygonLayer () {
+      polygonSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      polygonLayer = new VectorLayer({
+        source: polygonSource,
+        style: polygonStyleFunction,
+        zIndex: 50
+      });
+
+      //选中多边形后的样式
+      var overlayStyle = (function () {
+
+        return function (feature) {
+          var styles = {};
+          styles['Polygon'] = [
+            new Style({
+              stroke: new Stroke({
+                color: '#ec9000',
+                width: 2
+              })
+            }),
+
+            new Style({
+              fill: new Fill({
+                color: 'rgba(0, 0, 255, 0.1)'
+              })
+            }),
+            new Style({
+              text: createTextStyle(feature)
+            })
+          ];
+          styles['MultiPolygon'] = styles['Polygon'];
+          return styles[feature.getGeometry().getType()];
+        };
+      })();
+
+      select = new Select({
+        style: overlayStyle
+      });
+
+
+      map.addLayer(polygonLayer)
+      map.addInteraction(select);
+
+    },
+
+    //初始化多边形icon图层
+    initPolIconLayer () {
+      polIconSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      polIconLayer = new VectorLayer({
+        source: polIconSource,
+        zIndex: 70
+      });
+
+      map.addLayer(polIconLayer);
+
+    },
+
+    //初始化icon图层
+    initIconLayer () {
+      iconSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      iconLayer = new VectorLayer({
+        source: iconSource,
+        zIndex: 90
+      });
+
+      map.addLayer(iconLayer);
+
+    },
+
+    //取随机数
+    getRndBetween (lowerLimit, upperLimit) {
+      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
+    },
+
+    //开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    endLoading () {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+  props: {
+    //是否显示多边形图层
+    showPolygonLayer: {
+      type: Boolean,
+      default: false
+    },
+    //是否显示多边形icon图层
+    showPolIconLayer: {
+      type: Boolean,
+      default: false
+    },
+
+    //是否显示标注
+    showIconLayer: {
+      type: Boolean,
+      default: false
+    }
+
+  },
+  computed: {
+
+    mapHeight () {
+      return this.clientHeight - 120;
+
+    },
+
+    ...mapGetters(["clientHeight"])
+
+  },
+  components: {},
+}
+export default vueGis;
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_content {
+  .ol-viewport {
+    border-radius: 5px;
+  }
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+
+.el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
+</style>   
\ No newline at end of file