diff --git a/src/views/modules/base/epidemic/antiInfo.vue b/src/views/modules/base/epidemic/antiInfo.vue
index dc93596d..8e464525 100644
--- a/src/views/modules/base/epidemic/antiInfo.vue
+++ b/src/views/modules/base/epidemic/antiInfo.vue
@@ -152,6 +152,7 @@
       <el-table class="table"
                 :data="tableData"
                 border
+                ref="ref_table"
                 :height="tableHeight"
                 v-loading="tableLoading"
                 :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
@@ -554,6 +555,9 @@ export default {
     await this.loadTable()
     this.sHeight = this.$refs.div_search.offsetHeight + 230
   },
+  activated () {
+    this.$refs['ref_table'].doLayout()
+  },
 
   methods: {
     handleCnalceForm () {
diff --git a/src/views/modules/base/epidemic/natInfo/natList.vue b/src/views/modules/base/epidemic/natInfo/natList.vue
index f269abef..25cbcd3e 100644
--- a/src/views/modules/base/epidemic/natInfo/natList.vue
+++ b/src/views/modules/base/epidemic/natInfo/natList.vue
@@ -332,6 +332,10 @@ export default {
     await this.loadTable()
   },
 
+  activated () {
+    this.$refs['ref_table'].doLayout()
+  },
+
   methods: {
 
     async handleSearch () {
diff --git a/src/views/modules/communityParty/heart/heartForm.vue b/src/views/modules/communityParty/heart/heartForm.vue
index 14650b47..701b62df 100644
--- a/src/views/modules/communityParty/heart/heartForm.vue
+++ b/src/views/modules/communityParty/heart/heartForm.vue
@@ -84,7 +84,7 @@
                           prop="actQuota"
                           style="display: block"
                           label-width="150px">
-              <el-input-number class="item_width_6"
+              <el-input-number class="item_width_2"
                                v-model="formData.actQuota"
                                label="活动人数"></el-input-number>
             </el-form-item>
@@ -93,7 +93,7 @@
                           prop="reward"
                           style="display: block"
                           label-width="150px">
-              <el-input-number class="item_width_6"
+              <el-input-number class="item_width_2"
                                v-model="formData.reward"
                                label="活动积分"></el-input-number>
             </el-form-item>
@@ -141,7 +141,7 @@
                           style="display: block"
                           prop="signUpEndTime"
                           label-width="150px">
-              <el-date-picker class="item_width_6"
+              <el-date-picker class="item_width_2"
                               v-model="formData.signUpEndTime"
                               value-format="yyyy-MM-dd HH:mm"
                               format="yyyy-MM-dd HH:mm"
@@ -187,7 +187,7 @@
                           prop="signInRadius"
                           style="display: block"
                           label-width="150px">
-              <el-input-number class="item_width_6"
+              <el-input-number class="item_width_2"
                                v-model="formData.signInRadius"
                                label="签到有效范围"></el-input-number>
             </el-form-item>
@@ -424,7 +424,7 @@ export default {
         signInEndTime: "",
         signInLatitude: null,
         signInLongitude: null,
-        signInRadius: undefined,
+        signInRadius: 200,
         signInStartTime: "",
         signUpEndTime: "",
         sponsorContacts: "",
@@ -918,7 +918,7 @@ export default {
         signInEndTime: "",
         signInLatitude: null,
         signInLongitude: null,
-        signInRadius: undefined,
+        signInRadius: 200,
         signInStartTime: "",
         signUpEndTime: "",
         sponsorContacts: "",
@@ -1020,11 +1020,15 @@ export default {
 }
 
 .text_p {
+  width: 1000px;
   margin: 0 0;
   border: 3px;
 
-  > p {
-    margin: 0 0;
+  p {
+    margin: 0;
+    padding: 0;
+    -webkit-margin-start: 0;
+    -webkit-margin-end: 0;
   }
 }
 .div_content {
diff --git a/src/views/modules/communityParty/heart/heartList.vue b/src/views/modules/communityParty/heart/heartList.vue
index 37c2f935..f6cc8bca 100644
--- a/src/views/modules/communityParty/heart/heartList.vue
+++ b/src/views/modules/communityParty/heart/heartList.vue
@@ -283,6 +283,7 @@
                class="dialog-h"
                @closed="personDiaClose">
       <heart-person ref="ref_person"
+                    @personDiaClose="personDiaClose"
                     :status="status"></heart-person>
     </el-dialog>
 
@@ -586,6 +587,10 @@ export default {
 
       this.personShow = false//
     },
+    personDiaClose () {
+
+      this.personShow = false//
+    },
     finishDiaClose () {
 
       this.finishShow = false//
diff --git a/src/views/modules/communityParty/heart/heartPerson.vue b/src/views/modules/communityParty/heart/heartPerson.vue
index 0acab6d6..898a27b4 100644
--- a/src/views/modules/communityParty/heart/heartPerson.vue
+++ b/src/views/modules/communityParty/heart/heartPerson.vue
@@ -104,6 +104,11 @@
       </el-table>
 
     </div>
+    <div class="div_btn">
+      <el-button size="small"
+                 @click="handleCancle">关 闭</el-button>
+
+    </div>
 
   </div>
 </template>
@@ -220,6 +225,9 @@ export default {
       this.cancleShow = true
 
     },
+    handleCancle () {
+      this.$emit('personDiaClose')
+    },
 
     // 开启加载动画
     startLoading () {
@@ -278,6 +286,6 @@ export default {
 .div_btn {
   margin-top: 10px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
 }
 </style>
diff --git a/src/views/modules/visual/communityGovern/fivelayers/mapIndex copy 2.vue b/src/views/modules/visual/communityGovern/fivelayers/mapIndex copy 2.vue
new file mode 100644
index 00000000..7ee8f5f8
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/fivelayers/mapIndex copy 2.vue	
@@ -0,0 +1,2063 @@
+<template>
+  <div style="position: relative">
+
+    <!-- 组织路由 -->
+
+    <div class="div_top">
+      <div class="router_line"></div>
+      <div class="div_router">
+        <div v-if="!showPeopleInfo">
+          <span class="router_child">五大图层</span>
+        </div>
+        <div v-if="showPeopleInfo"> <span class="router_parents"
+                @click="handleClickRouter">五大图层<span class="arrow">></span></span>
+
+          <span class="router_child">个人档案</span>
+        </div>
+      </div>
+    </div>
+
+    <div v-show="!showPeopleInfo"
+         class="div_content">
+
+      <div class="div_map"
+           id="map"
+           ref="map">
+      </div>
+
+      <div class="div_data">
+
+        <div class="div_tips">
+
+          <div class="div_coverage">
+
+            <div class="coverage_item"
+                 @click="handleClickCoverage(index)"
+                 v-for="(item,index) in coverageTypesList"
+                 :key="index">
+              <img :src="item.select?selImg:noSelImg" />
+              <span>{{item.label}}</span>
+            </div>
+          </div>
+          <div class="div_category">
+            <el-scrollbar style="height:98%">
+
+              <div v-for="(item,index) in categoryListshow"
+                   :key="index"
+                   class="category_item">
+
+                <div v-for="(colItem,colIndex) in item"
+                     :key="colIndex"
+                     class="list_item"
+                     @click="handleClickCategory(index,colIndex)">
+                  <img :src="colItem.dataIcon"
+                       alt />
+                  <div :class="['item_content',colItem.sel?'item_content_sel':'']">{{colItem.categoryName}}
+
+                  </div>
+
+                </div>
+
+              </div>
+
+            </el-scrollbar>
+          </div>
+        </div>
+
+        <div class="div_info">
+          <div class="div_search_list">
+            <el-input size="mini"
+                      WarningColor='warning'
+                      placeholder="请输入搜索内容"
+                      v-model="search">
+              <i slot="prefix"
+                 class="icon">
+                <img src="../../../../../assets/img/modules/visual/sousuo.png"
+                     alt />
+              </i>
+            </el-input>
+
+            <div class="btn"
+                 @click="handleSearch">搜索</div>
+
+          </div>
+          <div class="m-tb">
+
+            <div class="tb">
+              <cpt-tb :col-list="demand.colList"
+                      :loading="demand.loading"
+                      :header="demand.header"
+                      :list="demand.list"
+                      @handleClickRow="handleClickRow"></cpt-tb>
+
+            </div>
+            <div class="m-pagination">
+              <el-pagination :current-page="demand.pageNo"
+                             :page-size="demand.pageSize"
+                             :total="demand.total"
+                             background
+                             layout="prev, pager, next,total"
+                             @current-change="handlePageNoChange_demand">
+              </el-pagination>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+    <div id="popup"
+         style="display: none;"
+         class="ol-popup">
+      <a href="#"
+         id="popup-closer"
+         class="ol-popup-closer"></a>
+
+      <div id="popup-content"
+           class="popup-content">
+        <div class="div-pop"
+             v-show="selPlaceType==='resi'|| selPlaceType === 'special_resi'">
+          <div class="popTitle">居民信息</div>
+          <div class="popContentTitle">姓名：
+            <span>{{ selInfo.icUserName }}</span>
+          </div>
+          <div class="popContentTitle">所属网格：
+            <span>{{ selInfo.gridName }}</span>
+          </div>
+          <div class="popContentTitle">所属小区：
+            <span>{{ selInfo.villageName }}</span>
+          </div>
+          <div class="popContentTitle">本地户籍：
+            <span>{{ selInfo.isBdhjShow }}</span>
+          </div>
+
+          <div class="popContentTitle">手机：
+            <span>{{ selInfo.mobile }}</span>
+          </div>
+          <div class="popContentTitle">性别：
+            <span>{{ selInfo.genderShow }}</span>
+          </div>
+          <div class="popContentTitle">身份证号：
+            <span>{{ selInfo.idCard }}</span>
+          </div>
+
+          <div class="popContentTitle">工作单位：
+            <span>{{ selInfo.gzdw?selInfo.gzdw:'--' }}</span>
+          </div>
+          <div class="popContentTitle">人户状况：
+            <span>{{ selInfo.rhzkShow }}</span>
+          </div>
+          <div class="div_resi_more">
+            <div @click="toPeople"
+                 class="span_resi_more">更多</div>
+          </div>
+        </div>
+        <div v-show="selPlaceType==='dangerous_chemicals'">
+          <div class="popTitle">企业信息</div>
+          <div class="popContentTitle">企业名称：
+            <span>{{ selInfo.name }}</span>
+          </div>
+          <div class="popContentTitle">企业类型：
+            <span>{{ selInfo.categoryName }}</span>
+          </div>
+          <div class="popContentTitle">周边安全距离：
+            <span>{{ selInfo.safeDistance }}</span>
+          </div>
+          <div class="popContentTitle">危化品种类：
+            <span>{{ selInfo.dangerTypeName }}</span>
+          </div>
+          <div class="popContentTitle">负责人：
+            <span>{{ selInfo.principalName }}</span>
+          </div>
+          <div class="popContentTitle">联系电话：
+            <span>{{ selInfo.principalMobile }}</span>
+          </div>
+          <div class="popContentTitle">经营地址：
+            <span>{{ selInfo.address }}</span>
+          </div>
+          <div class="popContentTitle">备注：
+            <span>{{ selInfo.remark }}</span>
+          </div>
+        </div>
+        <div v-show="selPlaceType==='public_service'||selPlaceType==='city_management'||selPlaceType==='superior_resource'">
+          <div class="popTitle">场所信息</div>
+          <div class="popContentTitle">场所名称：
+            <span>{{ selInfo.name }}</span>
+          </div>
+          <div class="popContentTitle">场所分类：
+            <span>{{ selInfo.categoryName }}</span>
+          </div>
+          <div class="popContentTitle">占地面积：
+            <span>{{ selInfo.areaCovered }}</span>
+          </div>
+          <div class="popContentTitle">容纳人数：
+            <span>{{ selInfo.capacity }}</span>
+          </div>
+          <div class="popContentTitle">地址：
+            <span>{{ selInfo.address }}</span>
+          </div>
+        </div>
+        <div v-show="selPlaceType==='event'">
+          <div class="popTitle">难点痛点</div>
+          <div class="popContentTitle">所属网格：
+            <span>{{ selInfo.gridName }}</span>
+          </div>
+          <div class="popContentTitle">发生时间：
+            <span>{{ selInfo.happenTime }}</span>
+          </div>
+          <div class="popContentTitle">事件内容：
+            <span>{{ selInfo.eventContent }}</span>
+          </div>
+
+          <div v-if="selInfo.imageList&&selInfo.imageList.length>0"
+               class="info-prop">
+            <span>图片：</span>
+            <div class="info-pics">
+              <img :src="src"
+                   :key="src"
+                   style="width:100px;height:100px;padding-right:10px"
+                   v-for="src in eventInfo.imageList"
+                   @click="watchImg(src)" />
+
+            </div>
+          </div>
+
+          <div v-if="selInfo.voiceList&&selInfo.voiceList.length>0"
+               class="info-prop">
+            <span>音频：</span>
+            <div class="info-pics">
+              <audio controls>
+                <source :src="item.url"
+                        type=""
+                        :key="item.url"
+                        v-for="item in eventInfo.voiceList" />
+              </audio>
+
+            </div>
+
+          </div>
+          <div class="popContentTitle">反映渠道：
+            <span>{{ selInfo.sourceTypeName|| "--" }}</span>
+          </div>
+          <div class="popContentTitle">地址：
+            <span>{{ selInfo.address || "--" }}</span>
+          </div>
+          <div class="popContentTitle">报事人：
+            <span>{{selInfo.name || "--" }}</span>
+          </div>
+          <div class="popContentTitle">手机号：
+            <span>{{ selInfo.mobile || "--" }}</span>
+          </div>
+          <div class="popContentTitle">身份证号：
+            <span>{{ selInfo.idCard || "--" }}</span>
+          </div>
+
+        </div>
+        <div v-show="selPlaceType==='community_org'">
+          <div class="popTitle">组织信息</div>
+          <div class="popContentTitle">组织名称：
+            <span>{{ selInfo.organizationName }}</span>
+          </div>
+          <div class="popContentTitle">组织分类：
+            <span>{{ selInfo.categoryName }}</span>
+          </div>
+          <div class="popContentTitle">组织人数：
+            <span>{{ selInfo.organizationPersonCount }}</span>
+          </div>
+          <div class="popContentTitle">组织成员：
+            <span>{{ selInfo.organizationPersonnelShow }}</span>
+          </div>
+          <div class="popContentTitle">服务事项：
+            <span>{{ selInfo.serviceItem }}</span>
+          </div>
+          <div class="popContentTitle">负责人：
+            <span>{{ selInfo.principalName }}</span>
+          </div>
+          <div class="popContentTitle">联系电话：
+            <span>{{ selInfo.principalPhone }}</span>
+          </div>
+          <div class="popContentTitle">创建时间：
+            <span>{{ selInfo.organizationCreatedTime }}</span>
+          </div>
+        </div>
+
+        <div v-show="selPlaceType==='group_rent'">
+          <div class="popTitle">房屋信息</div>
+          <div class="popContentTitle">房屋名称：
+            <span>{{ selInfo.houseName }}</span>
+          </div>
+          <div class="popContentTitle">房屋类型：
+            <span>{{ selInfo.houseTypeName }}</span>
+          </div>
+          <div class="popContentTitle">房屋用途：
+            <span>{{ selInfo.purposeName }}</span>
+          </div>
+          <div class="popContentTitle">房屋状态：
+            <span>{{ selInfo.rentName }}</span>
+          </div>
+          <div class="popContentTitle">房主姓名：
+            <span>{{ selInfo.ownerName }}</span>
+          </div>
+          <div class="popContentTitle">联系方式：
+            <span>{{ selInfo.ownerPhone }}</span>
+          </div>
+          <div class="popContentTitle">房主身份证：
+            <span>{{ selInfo.ownerIdCard }}</span>
+          </div>
+
+        </div>
+        <div v-show="selPlaceType==='enterprise_patrol'">
+          <div class="popTitle">企事业信息</div>
+          <div class="popContentTitle">场所类型：
+            <span>{{ selInfo.placeTypeName }}</span>
+          </div>
+          <div class="popContentTitle">场所区域：
+            <span>{{ selInfo.gridName }}</span>
+          </div>
+          <div class="popContentTitle">场所名称：
+            <span>{{ selInfo.placeOrgName }}</span>
+          </div>
+          <div class="popContentTitle">场所地址：
+            <span>{{ selInfo.address }}</span>
+          </div>
+          <div class="popContentTitle">规模：
+            <span>{{ selInfo.scale }}</span>
+          </div>
+          <div class="popContentTitle">负责人：
+            <span>{{ selInfo.personInCharge }}</span>
+          </div>
+          <div class="popContentTitle">联系电话：
+            <span>{{ selInfo.mobile }}</span>
+          </div>
+
+        </div>
+        <div v-show="selPlaceType==='party_unit'">
+          <div class="popTitle">联建单位信息</div>
+          <div class="popContentTitle">单位名称：
+            <span>{{ selInfo.unitName }}</span>
+          </div>
+          <div class="popContentTitle">分类：
+            <span>{{ selInfo.typeName }}</span>
+          </div>
+          <div class="popContentTitle">服务事项：
+            <span>{{ selInfo.serviceMatterListShow }}</span>
+          </div>
+          <div class="popContentTitle">联系人：
+            <span>{{ selInfo.contact }}</span>
+          </div>
+          <div class="popContentTitle">联系电话：
+            <span>{{ selInfo.contactMobile }}</span>
+          </div>
+          <div class="popContentTitle">在职党员：
+            <span>{{ selInfo.memberCount }}</span>
+          </div>
+          <div class="popContentTitle">备注：
+            <span>{{ selInfo.remark }}</span>
+          </div>
+          <div class="popContentTitle">地理位置：
+            <span>{{ selInfo.address }}</span>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <people v-if="showPeopleInfo"
+            :uid="selUserId"
+            ref="ref_people"></people>
+  </div>
+
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile.js';
+import ImageLayer from 'ol/layer/Image';
+import { Raster as RasterSource } from 'ol/source';
+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 nextTick from 'dai-js/tools/nextTick'
+import { mapGetters } from "vuex";
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost, requestGet } from "@/js/dai/request";
+
+
+import cptTb from "@/views/modules/visual/cpts/tb";
+import cptCard from "@/views/modules/visual/cpts/card";
+import ScreenLoading from "@/views/modules/visual/cpts/loading";
+import People from "../../basicinfo/people";
+
+var centerPointGlobal = [120.664619, 36.504963]
+
+let loading;//加载动画
+
+let map;
+let mapView;
+let gaodeMapLayer;//背景地图图层
+let parentLayer;//上级组织图层
+let parentSource;//上级组织多边形
+let polygonLayer;//标注图层
+let iconLayer; // icon标注图层
+let iconSource; // icon
+let polygonSource;//标注多边形
+let select;//选中标注
+
+let xoffset = 0
+let yoffset = 0
+
+
+//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 iconUrlArray = [
+  require('../../../../../assets/img/shuju/measure/lxdj.png'),
+  require('../../../../../assets/img/shuju/measure/qydw.png'),
+  require('../../../../../assets/img/shuju/measure/lxzz.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_.colorIndex]
+    }),
+    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 parentStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      // fill: new Fill({
+      //   color: [255, 255, 255, 0.3]
+      // }),
+      stroke: new Stroke({
+        color: [0, 103, 182, 1],
+        width: 2
+      }),
+
+      // text: createTextStyle(feature)
+    });;
+  };
+})()
+
+
+//标注样式
+var polygonStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      fill: new Fill({
+        // color: [255, 255, 255, 0.3]
+        color: polygonColorArray[feature.values_.colorIndex]
+      }),
+      stroke: new Stroke({
+        color: polygonColorArray[feature.values_.colorIndex],
+        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,
+
+      //右侧搜索
+      searchName: "",
+
+      //右侧列表
+      infoLoading: true,
+      listData: [],//得到的数据
+      listDatashow: [],//处理成一行两列的数据
+
+      //下钻层级记录
+      runNum: 0,
+      routerArray: [],
+      center: [],
+      zoom: null,
+      parentPolygon: [],
+
+      centerFlag: 'point',//定义中心点的flag  point点 fit 自适应
+
+      coverageTypesList: [//图层类型。五大图层：zhzl：综合治理图层；yjcl：应急处置图层；aqsc：安全生产图层；csgl：城市管理图层；ggfw：公共服务图层
+        {
+          select: true,
+          label: '综合治理图层',
+          value: 'zhzl'
+        },
+        {
+          select: false,
+          label: '应急处置图层',
+          value: 'yjcl'
+        },
+        {
+          select: false,
+          label: '安全生产图层',
+          value: 'aqsc'
+        },
+        {
+          select: false,
+          label: '城市管理图层',
+          value: 'csgl'
+        },
+        {
+          select: false,
+          label: '公共服务图层',
+          value: 'ggfw'
+        },
+      ],
+      categoryList: [],//分类列表
+      categoryListshow: [],//处理成一行四列的数据
+
+      selImg: require('../../../../../assets/img/shuju/xuanzhong.png'),
+      noSelImg: require('../../../../../assets/img/shuju/weixuan.png'),
+
+      coverageTypes: ['zhzl'],
+      categoryKeys: [],
+      search: '',
+      pageNo: 1,
+      pageSize: 10,
+
+      demand: {
+        loading: false,
+        colList: [
+          {
+            align: "center",
+            width: "15%",
+          },
+          {
+            align: "center",
+            width: "25%",
+          },
+          {
+            align: "center",
+            width: "60%",
+          },
+
+        ],
+        header: ["图例", "分类", "名称"],
+        list: [],
+        pageSize: 50,
+        pageNo: 1,
+        total: 0,
+      },
+
+      iconUrlArray: {
+
+        'anzhibangjiao': require('../../../../../assets/img/shuju/fiveLayer/anzhibangjiao.png'),
+        'buliangqingshaonian': require('../../../../../assets/img/shuju/fiveLayer/buliangqingshaonian.png'),
+        'shequjiaozheng': require('../../../../../assets/img/shuju/fiveLayer/shequjiaozheng.png'),
+        'resi_xfry': require('../../../../../assets/img/shuju/fiveLayer/resi_xfry.png'),
+        'xidurenyuan': require('../../../../../assets/img/shuju/fiveLayer/xidurenyuan.png'),
+        'xiejiaorenyuan': require('../../../../../assets/img/shuju/fiveLayer/xiejiaorenyuan.png'),
+        'zhaoshizhaohuojingshenbing': require('../../../../../assets/img/shuju/fiveLayer/zhaoshizhaohuojingshenbing.png'),
+
+
+        'yjdw': require('../../../../../assets/img/shuju/fiveLayer/yjdw.png'),
+        'sr_gy': require('../../../../../assets/img/shuju/fiveLayer/sr_gy.png'),
+        'sr_gc': require('../../../../../assets/img/shuju/fiveLayer/sr_gc.png'),
+        'whdw': require('../../../../../assets/img/shuju/fiveLayer/whdw.png'),
+        'sr_ggld': require('../../../../../assets/img/shuju/fiveLayer/sr_ggld.png'),
+        'lwh': require('../../../../../assets/img/shuju/fiveLayer/lwh.png'),
+        'sr_tyc': require('../../../../../assets/img/shuju/fiveLayer/sr_tyc.png'),
+        'lyjlb': require('../../../../../assets/img/shuju/fiveLayer/lyjlb.png'),
+        'sr_yjy': require('../../../../../assets/img/shuju/fiveLayer/sr_yjy.png'),
+        'zaxld': require('../../../../../assets/img/shuju/fiveLayer/zaxld.png'),
+        'other': require('../../../../../assets/img/shuju/fiveLayer/other.png'),
+        'sr_jzz': require('../../../../../assets/img/shuju/fiveLayer/sr_jzz.png'),
+        'sr_djc': require('../../../../../assets/img/shuju/fiveLayer/sr_djc.png'),
+        'sr_rfqck': require('../../../../../assets/img/shuju/fiveLayer/sr_rfqck.png'),
+        'ep_lg': require('../../../../../assets/img/shuju/fiveLayer/ep_lg.png'),
+        'sr_xfz': require('../../../../../assets/img/shuju/fiveLayer/sr_xfz.png'),
+        'pu_jgzsbm': require('../../../../../assets/img/shuju/fiveLayer/pu_jgzsbm.png'),
+
+        'gr_czw': require('../../../../../assets/img/shuju/fiveLayer/gr_czw.png'),
+        'ep_cycs': require('../../../../../assets/img/shuju/fiveLayer/ep_cycs.png'),
+        'dc_jyz': require('../../../../../assets/img/shuju/fiveLayer/dc_jyz.png'),
+        'ep_gwylcs': require('../../../../../assets/img/shuju/fiveLayer/ep_gwylcs.png'),
+        'dc_jqz': require('../../../../../assets/img/shuju/fiveLayer/dc_jqz.png'),
+        'dc_whpdw': require('../../../../../assets/img/shuju/fiveLayer/dc_whpdw.png'),
+        'ep_wb': require('../../../../../assets/img/shuju/fiveLayer/ep_wb.png'),
+        'ep_mrxycs': require('../../../../../assets/img/shuju/fiveLayer/ep_mrxycs.png'),
+        'dc_yqhjz': require('../../../../../assets/img/shuju/fiveLayer/dc_yqhjz.png'),
+        'dc_jzgd': require('../../../../../assets/img/shuju/fiveLayer/dc_jzgd.png'),
+        'ep_scjgqy': require('../../../../../assets/img/shuju/fiveLayer/ep_scjgqy.png'),
+
+        'cm_nmsc': require('../../../../../assets/img/shuju/fiveLayer/cm_nmsc.png'),
+        'event_tdnd': require('../../../../../assets/img/shuju/fiveLayer/event_tdnd.png'),
+        'cm_bhsc': require('../../../../../assets/img/shuju/fiveLayer/cm_bhsc.png'),
+        'cm_cjsc': require('../../../../../assets/img/shuju/fiveLayer/cm_cjsc.png'),
+        'ep_lssd': require('../../../../../assets/img/shuju/fiveLayer/ep_lssd.png'),
+
+
+        'resi_szry': require('../../../../../assets/img/shuju/fiveLayer/resi_szry.png'),
+        'ps_lyy': require('../../../../../assets/img/shuju/fiveLayer/ps_lyy.png'),
+        'resi_snry': require('../../../../../assets/img/shuju/fiveLayer/resi_snry.png'),
+        'ps_mzb': require('../../../../../assets/img/shuju/fiveLayer/ps_mzb.png'),
+        'ps_zs': require('../../../../../assets/img/shuju/fiveLayer/ps_zs.png'),
+        'ps_wss': require('../../../../../assets/img/shuju/fiveLayer/ps_wss.png'),
+        'ps_jjz': require('../../../../../assets/img/shuju/fiveLayer/ps_jjz.png'),
+        'ep_xx': require('../../../../../assets/img/shuju/fiveLayer/ep_xx.png'),
+        'ep_yy': require('../../../../../assets/img/shuju/fiveLayer/ep_yy.png'),
+
+      },
+      iconArrays: [],
+      overlay: null,
+      showPopup: false,
+
+      selPlaceType: '',
+      selInfo: {},
+      selUserId: '',
+      showPeopleInfo: false
+
+    }
+  },
+  async mounted () {
+
+    //加载组织数据
+    await this.loadOrgData()
+
+    //初始化地图
+    this.initMap()
+
+    await nextTick(300)
+    this.addParentLayer()
+    this.loadParentPolygon()
+    //添加标注图层
+    this.addPolygonLayer()
+
+    //添加icontuceng
+    this.addIconLayer()
+
+    //加载当前园区的标注
+    this.loadPolygon(this.subAgencyArray)
+
+
+    this.setMapLocation()
+    await this.loadCategoryList()
+    this.getTable();
+    await this.getMapTable();
+
+
+    //初始化icon图层
+    this.addOverlay()
+
+    this.addMapClick()
+
+  },
+  methods: {
+
+    toPeople () {
+      this.showPeopleInfo = true
+    },
+
+    //添加覆盖层
+    addOverlay () {
+      // 使用变量存储弹窗所需的 DOM 对象
+      var container = document.getElementById("popup");
+      var closer = document.getElementById("popup-closer");
+      var content = document.getElementById("popup-content");
+
+
+      // 创建一个弹窗 Overlay 对象
+      this.overlay = new Overlay({
+        element: container, //绑定 Overlay 对象和 DOM 对象的
+        autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
+        autoPanAnimation: {
+          duration: 250 //自动平移效果的动画时间 9毫秒
+        },
+        zIndex: 100
+      });
+      // 将弹窗添加到 map 地图中
+      map.addOverlay(this.overlay);
+      let _that = this;
+
+      /**
+       * 为弹窗添加一个响应关闭的函数
+       */
+      closer.onclick = function () {
+        _that.overlay.setPosition(undefined);
+        closer.blur();
+        return false;
+      };
+
+    },
+
+    //注册地图点击事件
+    addMapClick () {
+      let _that = this
+
+      map.on("click", function (evt) {
+        const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+          return feature;
+        });
+        if (feature) {
+          // console.log(feature)
+          _that.clickMapVolunteer(feature.values_.properties.info)
+
+        }
+
+      });
+    },
+
+    //点击项目
+    async clickMapVolunteer (info) {
+
+      if (!info.id) {
+        return false
+      }
+      if (!info.latitude || !info.longitude) {
+        this.$message.warning("请先完善坐标位置")
+        return false
+      }
+      this.selPlaceType = info.placeType
+      if (info.placeType === 'resi' || info.placeType === 'special_resi') {//综合治理图层和公共服务图层中的失能人员、失智人员
+        // info.id = "dd0bd55db0ca4b629c40bc914a08368e"
+        this.selUserId = info.id
+        this.loadResi(info)
+      }
+      if (info.placeType === 'public_service') {//公共服务图层
+        this.loadPublicService(info)
+      }
+      if (info.placeType === 'dangerous_chemicals') {//重点危化品企业
+        this.loadDangerousChemicals(info)
+      }
+      if (info.placeType === 'event') {//难点痛点
+        this.loadEvent(info)
+      }
+      if (info.placeType === 'city_management') {//城市管理图层
+        this.loadCityManagement(info)
+      }
+      if (info.placeType === 'community_org') {//社区自组织
+        this.loadCommunityOrg(info)
+      }
+      if (info.placeType === 'superior_resource') {//优势资源
+        this.loadSuperiorResource(info)
+      }
+      if (info.placeType === 'group_rent') {//群租房
+        this.loadGroupRent(info)
+      }
+
+
+      if (info.placeType === 'party_unit') {//来自联建单位的机关直属部门
+        this.loadPartyUnit(info)
+      }
+      if (info.placeType === 'enterprise_patrol') {//来自企事业查询的
+        this.loadEnterprisePartrol(info)
+      }
+
+
+    },
+
+    async loadResi (info) {
+      const url = "/epmetuser/icresiuser/resi-brief/" + info.id
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
+
+      let params = {}
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.icUserName = data.icUserName ? data.icUserName : '--'
+        data.gridName = data.gridName ? data.gridName : '--'
+        data.villageName = data.villageName ? data.villageName : '--'
+        data.mobile = data.mobile ? data.mobile : '--'
+        data.idCard = data.idCard ? data.idCard : '--'
+        data.birthday = data.birthday ? data.birthday : '--'
+        data.contacts = data.contacts ? data.contacts : '--'
+        data.contactsMobile = data.contactsMobile ? data.contactsMobile : '--'
+
+        data.isBdhjShow = data.isBdhj ? data.isBdhj === '0' ? '否' : '是' : '--'
+        data.genderShow = data.gender ? data.gender === '0' ? '女' : '男' : '--'
+        if (data.rhzk === 'rhyz') {
+          data.rhzkShow = '人户一致'
+        } else if (data.rhzk === 'rzhbz') {
+          data.rhzkShow = '人在户不在'
+        } else if (data.rhzk === 'hzrbz') {
+          data.rhzkShow = '户在人不在'
+        } else {
+          data.rhzkShow = '--'
+        }
+
+        let categoriesArray = []
+
+        for (let key in data.volunteerCategories) {
+          categoriesArray.push(data.volunteerCategories[key])
+
+        }
+
+        if (categoriesArray.length > 0) {
+          data.categories = categoriesArray.join(',')
+        } else {
+          data.categories = '--'
+        }
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadPublicService (info) {
+      const url = "/gov/org/icPublicService/detail"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/detail"
+
+      let params = {
+        icPublicServiceId: info.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.name = data.name ? data.name : '--'
+        data.categoryName = data.categoryName ? data.categoryName : '--'
+        data.areaCovered = data.areaCovered ? data.areaCovered + '平方公里' : '--'
+        data.capacity = data.capacity ? data.capacity : '--'
+        data.address = data.address ? data.address : '--'
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadEvent (info) {
+      const url = "/gov/project/icEvent/detail";
+      //const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/eventDetail/" + this.eventId;
+
+      const { data, code, msg } = await requestPost(url, {
+        icEventId: info.id,
+      });
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+        this.handleShowPopup(coordinate)
+
+
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadDangerousChemicals (info) {
+      const url = "/gov/org/icDangerousChemicals/detail"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icDangerousChemicals/detail"
+
+      let params = {
+        icSuperiorResourceId: info.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.name = data.name ? data.name : '--'
+        data.categoryName = data.categoryName ? data.categoryName : '--'
+        data.safeDistance = data.safeDistance ? data.safeDistance : '--'
+        data.dangerTypeName = data.dangerTypeName ? data.dangerTypeName : '--'
+        data.principalName = data.principalName ? data.principalName : '--'
+        data.principalMobile = data.principalMobile ? data.principalMobile : '--'
+        data.address = data.address ? data.address : '--'
+        data.remark = data.remark ? data.remark : '--'
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadCityManagement (info) {
+      const url = "/gov/org/icCityManagement/detail"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icCityManagement/detail"
+
+      let params = {
+        icCityManagementId: info.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.name = data.name ? data.name : '--'
+        data.categoryName = data.categoryName ? data.categoryName : '--'
+        data.areaCovered = data.areaCovered ? data.areaCovered + '平方公里' : '--'
+        data.capacity = data.capacity ? data.capacity : '--'
+        data.address = data.address ? data.address : '--'
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadCommunityOrg (info) {
+      // const url = "/gov/org/icCityManagement/detail"
+      const url = "/heart/iccommunityselforganization/community-self-org-detail/" + info.id
+
+      let params = {}
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.orgPersonArray = []
+        data.organizationPersonnel.forEach(element => {
+          let orgPersonnel = element.personName + "(" + element.personPhone + ")"
+          data.orgPersonArray.push(orgPersonnel)
+        });
+
+        data.organizationPersonnelShow = data.orgPersonArray.join(",")
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadSuperiorResource (info) {
+      const url = "/gov/org/icSuperiorResource/detail"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icSuperiorResource/detail"
+
+      let params = {
+        icSuperiorResourceId: info.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.name = data.name ? data.name : '--'
+        data.categoryName = data.categoryName ? data.categoryName : '--'
+        data.areaCovered = data.areaCovered ? data.areaCovered + '平方公里' : '--'
+        data.capacity = data.capacity ? data.capacity : '--'
+        data.address = data.address ? data.address : '--'
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadEnterprisePartrol (info) {
+      const url = "/gov/org/enterprise/detail/" + info.id
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/enterprise/detail"
+
+      const { data, code, msg } = await requestPost(url)
+
+      if (code === 0) {
+        // debugger
+        let coordinate = [info.longitude, info.latitude]
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+        this.handleShowPopup(coordinate)
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    async loadGroupRent (info) {
+      const url = "/gov/org/ichouse/" + info.id
+
+      const { data, code, msg } = await requestGet(url)
+
+      if (code === 0) {
+        // debugger
+        let coordinate = [info.longitude, info.latitude]
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    async loadPartyUnit (info) {
+      const url = '/heart/icpartyunit/detail'
+      // const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/detail'
+      let params = {
+        id: info.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        if (!data.serviceMatterList || !Array.isArray(data.serviceMatterList)) {
+          data.serviceMatterList = []
+        } else {
+          data.serviceMatterListShow = data.serviceMatterNameList.join(',')
+        }
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+        this.handleShowPopup(coordinate)
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+
+    handleShowPopup (coordinate) {
+
+      // console.log(this.overlay.getElement())
+      let content = document.getElementById("popup-content");
+      this.overlay.getElement().style.display = 'block'
+      this.overlay.getElement().parentNode.style.display = 'block'
+      this.overlay.getElement().parentNode.parentNode.style.display = 'block'
+      // content.innerHTML = showData;
+      this.overlay.setPosition(coordinate);
+      //把 overlay 显示到指定的 x,y坐标
+
+    },
+    // 关闭弹窗
+    handleClosePopup () {
+      this.overlay.setPosition(undefined);
+      document.getElementById("popup-closer").blur();
+      return false;
+    },
+
+    //点击图层
+    async handleClickCoverage (index) {
+      this.demand.pageNo = 1
+      this.coverageTypesList[index].select = !this.coverageTypesList[index].select
+      let item = this.coverageTypesList[index]
+
+      this.$set(this.coverageTypesList, index, item)
+
+      this.coverageTypes = []
+
+      this.coverageTypesList.forEach(element => {
+        if (element.select) {
+          this.coverageTypes.push(element.value)
+        }
+      });
+
+      await this.loadCategoryList()
+      this.getTable();
+      this.getMapTable();
+    },
+
+    //点击类别
+    async handleClickCategory (index, colIndex) {
+      this.demand.pageNo = 1
+      this.categoryListshow[index][colIndex].sel = !this.categoryListshow[index][colIndex].sel
+
+      // this.categoryList[index * 4 + colIndex].sel = !this.categoryList[index * 4 + colIndex].sel
+
+      let array = this.categoryListshow[index]
+      let item = this.categoryListshow[index][colIndex]
+
+
+      this.$set(this.categoryListshow[index], colIndex, item)
+      this.$set(this.categoryListshow, index, array)
+
+      this.categoryKeys = []
+
+      this.categoryList.forEach(element => {
+        if (element.sel) {
+          this.categoryKeys.push(element.categoryKey)
+        }
+      });
+
+      this.getTable();
+      this.getMapTable();
+    },
+    handleSearch () {
+      this.demand.pageNo = 1
+      this.getTable();
+      this.getMapTable();
+    },
+    //
+    handleClickRow (index) {
+      let selData = this.tableList[index]
+      if (selData.longitude && selData.latitude) {
+        mapView.setCenter([selData.longitude, selData.latitude]);
+      }
+
+      this.clickMapVolunteer(selData)
+
+      // alert(index)
+    },
+
+    handlePageNoChange_demand (val) {
+      this.demand.pageNo = val;
+      this.getTable();
+    },
+
+    async loadCategoryList () {
+      const url = "/gov/org/coverage/categoryList"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/coverage/categoryList"
+      let params = {
+        coverageTypes: this.coverageTypes,
+
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.categoryList = data
+
+        this.categoryKeys = []
+
+        this.categoryListshow = []
+        let itemArray = []
+
+        this.categoryList.forEach((item, index) => {
+
+          item.dataIcon = this.iconUrlArray[item.categoryKey]
+
+
+          item.sel = true
+          this.categoryKeys.push(item.categoryKey)
+
+        });
+
+        let chunk = 4
+        for (let i = 0, j = this.categoryList.length; i < j; i += chunk) {
+          this.categoryListshow.push(this.categoryList.slice(i, i + chunk))
+        }
+
+
+        // console.log(this.categoryListshow)
+        // console.log(this.categoryList)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //加载组织数据
+    async getTable () {
+      this.demand.loading = true
+      const url = "/data/aggregator/coverage/dataList";
+      // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList";
+      let params = {
+        coverageTypes: this.coverageTypes,
+        categoryKeys: this.categoryKeys,
+        search: this.search,
+        pageNo: this.demand.pageNo,
+        pageSize: this.demand.pageSize,
+        isPage: true
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.demand.loading = false;
+
+      if (code === 0) {
+
+        this.demand.total = data.total;
+
+        this.tableList = data.list
+        this.demand.list = data.list
+        this.demand.list.forEach(item => {
+          item.imgObj = {
+            type: 'img',
+            src: this.iconUrlArray[item.categoryKey]
+          }
+        });
+
+
+        this.demand.list = this.demand.list.map((item) => {
+          return [
+            // item.categoryKey ? item.categoryKey : '--',
+
+            item.imgObj,
+            item.categoryName,
+            item.content ? item.content : '',
+
+          ];
+        });
+        console.log(this.demand.list)
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    //加载组织数据
+    async getMapTable () {
+
+      const url = "/data/aggregator/coverage/dataList";
+      // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList";
+      let params = {
+        coverageTypes: this.coverageTypes,
+        categoryKeys: this.categoryKeys,
+        search: this.search,
+        // pageNo: 1,
+        // pageSize: 2000,
+        isPage: false
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+
+        this.demand.total = data.total;
+
+        this.iconArrays = data.list
+
+        this.iconArrays.forEach((item, index) => {
+          item.url = this.iconUrlArray[item.categoryKey]
+
+        });
+        // console.log(this.iconArrays)
+        this.loadIcon()
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载icon图标
+    loadIcon () {
+
+      iconSource.clear()//清空多边形标注
+      if (this.iconArrays && this.iconArrays.length > 0) {
+
+        let iconFeatures = [];
+
+        this.iconArrays.forEach((oneIcon, index) => {
+          //添加标注
+
+          let iconItem = new Feature({
+            geometry: new Point([oneIcon.longitude, oneIcon.latitude]),
+            id: oneIcon.id,
+            properties: {
+              type: "icon",
+              info: { ...oneIcon }
+            }
+          });
+          // console.log('oneIcon----', this.iconUrlArray[oneIcon.urlIndex])
+          let iconStyle = new Style({
+            image: new Icon({
+              // anchor: [0.5, 0.5],
+              imgSize: [60, 60],
+              // scale: 0.5,
+              // src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] || this.iconUrlArray[0]
+              src: oneIcon.url
+            }),
+            // text: createTextStyle(oneIcon)
+          });
+
+          iconItem.setStyle(iconStyle);
+
+          // if (this.distanceMax) {
+          //   if (this.computedDistance(oneIcon.longitude, oneIcon.latitude, this.distanceMax)) {
+          //     iconFeatures.push(iconItem);
+          //   }
+          // } else {
+          iconFeatures.push(iconItem);
+          // }
+
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+    },
+
+    //刷新地图
+    async refreshMap (isRefreshView) {
+
+      //加载组织数据
+      await this.loadOrgData()
+
+      //绘制父级组织数据
+      this.loadParentPolygon()
+      //绘制本级组织数据
+      this.loadPolygon(this.subAgencyArray)
+
+      //重置地图中心点
+
+      // if (isRefreshView) {
+      // this.setMapLocation()
+
+      // }
+
+      await this.getTable(false);
+
+    },
+
+    //设置地图定位的中心点和缩放级别
+    setMapLocation () {
+      if (!this.zoom) {
+        this.setZoom(this.orgData.agencyLevel)
+      }
+      this.centerPoint = []
+
+
+      //如果存在中心点（返回时赋值）
+      if (this.center && this.center.length > 0) {
+        this.centerPoint = this.center
+        this.centerFlag = 'point'
+        this.center = []
+
+      } else if (parentLayer.getSource().getFeatures()[0]) {//如果是初次进入，不存在下级组织，用父级组织
+        this.centerFlag = 'flag_parent'
+
+
+      } else if (polygonLayer.getSource().getFeatures()[0]) {//如果是初次进入,存在下级组织
+        this.centerFlag = 'flag_polygon'
+
+      } else if (this.orgData.longitude && this.orgData.latitude) {
+        this.centerPoint.push(this.orgData.longitude)
+        this.centerPoint.push(this.orgData.latitude)
+        this.centerFlag = 'point'
+
+      } else {
+        this.centerPoint = centerPointGlobal
+        this.centerFlag = 'point'
+      }
+      // debugger
+      if (this.centerFlag === 'flag_parent') {
+        let parentFeatures = parentLayer.getSource().getFeatures()[0]
+        let polygon = parentFeatures.getGeometry();
+        map.getView().fit(polygon, map.getSize());
+        this.zoom = map.getView().getZoom() - 1
+
+      } else if (this.centerFlag === 'flag_polygon') {
+        let polygonFeatures = polygonLayer.getSource().getFeatures()[0]
+        let polygon = polygonFeatures.getGeometry();
+        map.getView().fit(polygon, map.getSize());
+        this.zoom = map.getView().getZoom() - 1
+
+      } else {
+        mapView.setCenter(this.centerPoint);
+
+      }
+      mapView.setZoom(this.zoom);
+
+    },
+
+    //返回所选组织
+    handleClickRouter (index) {
+
+      this.showPeopleInfo = false
+
+
+
+    },
+
+    //加载组织数据
+    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
+        this.parentPolygon = []
+        this.parentPolygon.push(data)
+        if (data.children && data.children.length > 0) {
+          this.subAgencyArray = data.children
+        } else {
+          this.subAgencyArray = []
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载父级组织多边形
+    loadParentPolygon () {
+
+      parentSource.clear()//清空标注
+
+      let featureData = []//标注数据
+      if (this.parentPolygon && this.parentPolygon.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        this.parentPolygon.forEach(agencyItem => {
+
+          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
+            oneData = {
+              type: 'Feature',
+              id: agencyItem.id,
+              properties: {
+                id: agencyItem.id,
+                level: agencyItem.level,
+                name: agencyItem.name
+              },
+              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) => {
+
+              if (index % 2 == 0) {//偶
+                item = (parseFloat(item) + parseFloat(xoffset)) + ''
+                itemArray.push(item)
+              } else {//奇
+                item = (parseFloat(item) + parseFloat(yoffset)) + ''
+                itemArray.push(item)
+
+                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)
+        parentSource.addFeatures(feature)
+
+      }
+
+    },
+
+    //加载当前园区的标注
+    loadPolygon (subAgencyArray) {
+      polygonSource.clear()//清空多边形标注
+      iconSource.clear()//清空多边形标注
+
+      let featureData = []//标注数据
+      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        let count = 0
+        for (let i = 0; i < subAgencyArray.length; i++) {
+          const agencyItem = subAgencyArray[i]
+
+
+          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
+            let urlNum = count % 3
+            count++
+
+            oneData = {
+              type: 'Feature',
+              id: agencyItem.id,
+              properties: {
+                id: agencyItem.id,
+                level: agencyItem.level,
+                name: agencyItem.name,
+                colorIndex: 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) {//偶
+                item = (parseFloat(item) + parseFloat(xoffset)) + ''
+                itemArray.push(item)
+
+              } else {//奇
+
+                item = (parseFloat(item) + parseFloat(yoffset)) + ''
+                itemArray.push(item)
+                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)
+        // console.log(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
+          //地图icon样式
+          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: "/img/largeScreen/icon_camra.png"
+              // src: "https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png"
+              src: iconUrlArray[oneIcon.values_.colorIndex],
+
+            })
+          });
+
+          oneCctv.setStyle(iconStyle);
+          iconFeatures.push(oneCctv);
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+
+    },
+
+    //根据组织层级设置缩放级别
+    setZoom (agencyLevel) {
+      if (agencyLevel === 'district') {
+        this.zoom = 12
+      } else if (agencyLevel === 'street') {
+        this.zoom = 13
+      } else if (agencyLevel === 'community') {
+        this.zoom = 14
+      }
+
+    },
+
+    firstCenterMap () {
+      this.centerPoint = []
+      if (this.orgData.longitude && this.orgData.latitude) {
+        this.centerPoint.push(this.orgData.longitude)
+        this.centerPoint.push(this.orgData.latitude)
+
+      } else {
+        this.centerPoint = centerPointGlobal
+      }
+
+      if (!this.zoom) {
+        this.setZoom(this.orgData.agencyLevel)
+      }
+    },
+
+    initMap () {
+      this.firstCenterMap()
+
+      let layerOrigin = 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: false,
+          crossOrigin: 'anonymous'
+        }),
+        // zIndex: 20,
+
+      });
+
+
+      //openlayer 像素转换类，可以直接当做source使用
+      const raster = new RasterSource({
+        sources: [
+          //传入图层，这里是天地图矢量图或者天地图矢量注记
+          layerOrigin,
+        ],
+        //这里设置为image类型，与官方示例不同，优化速度
+        operationType: 'image',
+        operation: function (pixels, data) {
+          //执行颜色转换方法，注意，这里的方法需要使用lib引入进来才可以使用
+          // reverseFunc(pixels[0].data)
+          // debugger
+          // let pixelsTemp = pixels[0].data
+          //蓝色
+
+
+          for (var i = 0; i < pixels[0].data.length; i += 4) {
+            var r = pixels[0].data[i];
+            var g = pixels[0].data[i + 1];
+            var b = pixels[0].data[i + 2];
+            //运用图像学公式，设置灰度值
+            var grey = r * 0.3 + g * 0.59 + b * 0.11;
+            //将rgb的值替换为灰度值
+            pixels[0].data[i] = grey;
+            pixels[0].data[i + 1] = grey;
+            pixels[0].data[i + 2] = grey;
+
+            //基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整
+            pixels[0].data[i] = 55 - pixels[0].data[i];
+            pixels[0].data[i + 1] = 255 - pixels[0].data[i + 1];
+            pixels[0].data[i + 2] = 305 - pixels[0].data[i + 2];
+          }
+
+          return pixels[0];
+        },
+        //线程数量
+        threads: 10,
+        //允许operation使用外部方法
+        // lib: {
+        //   reverseFunc: reverseFunc,
+        // }
+      });
+
+
+      mapView = new View({
+        //中心点坐标
+        center: this.centerPoint,
+        // projection: 'EPSG:3857',
+        projection: 'EPSG:4326',
+        zoom: this.zoom,
+        minZoom: this.minZoom
+      })
+
+      //初始化map和地图底图
+      //创建地图容器
+      map = new Map({
+        layers: [layerOrigin],
+        //加载瓦片图层数据
+        view: mapView,
+        target: 'map'
+        //目标加载到map中
+      })
+
+      //创建新图层，注意，必须使用 ImageLayer
+      let layer = new ImageLayer({
+        name: "天地图矢量图层",
+        source: raster
+      });
+      //添加到地图
+      map.addLayer(layer)
+
+      // //标注图层
+      // var sourceMark = new XYZ({
+      //   url: 'http://t2.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}',
+      //   crossOrigin: 'anonymous'
+      // });
+      // var tileMark = new TileLayer({
+      //   id: "tileMark",
+      //   title: "标注图层",
+      //   layerName: "baseMap",
+      //   source: sourceMark,
+
+      // });
+
+      // map.addLayer(tileMark)
+
+      // mapView.setCenter([120.32283313, 36.11188423])
+      // mapView.setZoom(13)
+
+    },
+
+    reverseFunc (pixelsTemp) {
+      //蓝色
+      for (var i = 0; i < pixelsTemp.length; i += 4) {
+        var r = pixelsTemp[i];
+        var g = pixelsTemp[i + 1];
+        var b = pixelsTemp[i + 2];
+        //运用图像学公式，设置灰度值
+        var grey = r * 0.3 + g * 0.59 + b * 0.11;
+        //将rgb的值替换为灰度值
+        pixelsTemp[i] = grey;
+        pixelsTemp[i + 1] = grey;
+        pixelsTemp[i + 2] = grey;
+
+        //基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整
+        pixelsTemp[i] = 55 - pixelsTemp[i];
+        pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
+        pixelsTemp[i + 2] = 305 - pixelsTemp[i + 2];
+      }
+    },
+    //添加标注图层
+    addParentLayer () {
+      parentSource = new VectorSource({
+
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      parentLayer = new VectorLayer({
+        source: parentSource,
+        style: parentStyleFunction,
+        zIndex: 50
+      });
+
+
+      map.addLayer(parentLayer)
+
+
+    },
+
+    //添加标注图层
+    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);
+
+      // select.on('select', e => {
+
+      // });
+
+    },
+
+    addIconLayer () {
+      iconSource = new VectorSource({
+
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      iconLayer = new VectorLayer({
+        source: iconSource,
+        zIndex: 70
+      });
+
+      map.addLayer(iconLayer);
+
+    },
+
+    //开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    endLoading () {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+  props: {
+
+    // vueFlag: {
+    //   type: String,
+    //   default: "alarm"
+    // }
+  },
+  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: { cptTb, cptCard, ScreenLoading, People },
+}
+export default vueGis;
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/fiveLayerMap.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_content {
+  .ol-viewport {
+    border-radius: 5px;
+  }
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+</style> 
+
+<style lang="scss" scoped>
+.popTitle {
+  font-size: 16px;
+  color: #ffffff;
+  padding-bottom: 5px;
+}
+
+.info-prop {
+  position: relative;
+  margin: 10px 0;
+  display: flex;
+  padding-left: 15px;
+  font-size: 12px;
+
+  .info-pics {
+    display: flex;
+    margin: 10px 0;
+    img {
+      display: block;
+      width: 32%;
+      height: 90px;
+      margin-right: 9px;
+      object-fit: cover;
+    }
+  }
+  > span,
+  > div {
+    display: block;
+    max-width: 300px;
+  }
+}
+
+.popContentTitle {
+  font-size: 14px;
+  color: #ffffff;
+  margin-top: 5px;
+  line-height: 20px;
+}
+
+.div_resi_more {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.span_resi_more {
+  font-size: 16px;
+  text-decoration: underline;
+}
+.span_resi_more:hover {
+  cursor: pointer;
+}
+</style>
+
+<style lang="scss" >
+.div_search_list {
+  .el-input__inner[WarningColor="warning"] {
+    border-radius: 8px 0 0 8px;
+    height: 48px;
+    background-color: #01106800;
+    border: 0px solid #0082fb;
+    padding: 0 0 0 70px;
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+  }
+  .el-input__inner {
+    &::placeholder {
+      padding: 0;
+      margin: 0;
+
+      font-size: 18px;
+    }
+  }
+}
+
+.ol-popup {
+  position: absolute;
+  background-color: #1258c9da;
+  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #1257c9;
+  bottom: 12px;
+  left: -50px;
+  text-align: left;
+}
+.ol-popup:after,
+.ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: 1257c9;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #1257c9;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+.popup-content {
+  width: 300px;
+
+  .div-pop {
+  }
+}
+
+.ol-popup-closer:after {
+  content: "✖";
+  // color: rgba(1, 17, 104, 1);
+  color: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/visual/communityGovern/fivelayers/mapIndex copy.vue b/src/views/modules/visual/communityGovern/fivelayers/mapIndex copy.vue
new file mode 100644
index 00000000..efc340eb
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/fivelayers/mapIndex copy.vue	
@@ -0,0 +1,1987 @@
+<template>
+  <div style="position: relative">
+
+    <!-- 组织路由 -->
+
+    <div class="div_top">
+      <div class="router_line"></div>
+      <div class="div_router">
+        <div v-if="!showPeopleInfo">
+          <span class="router_child">五大图层</span>
+        </div>
+        <div v-if="showPeopleInfo"> <span class="router_parents"
+                @click="handleClickRouter">五大图层<span class="arrow">></span></span>
+
+          <span class="router_child">个人档案</span>
+        </div>
+      </div>
+    </div>
+
+    <div v-show="!showPeopleInfo"
+         class="div_content">
+
+      <div class="div_map"
+           id="map"
+           ref="map">
+      </div>
+
+      <div class="div_data">
+
+        <div class="div_tips">
+
+          <div class="div_coverage">
+
+            <div class="coverage_item"
+                 @click="handleClickCoverage(index)"
+                 v-for="(item,index) in coverageTypesList"
+                 :key="index">
+              <img :src="item.select?selImg:noSelImg" />
+              <span>{{item.label}}</span>
+            </div>
+          </div>
+          <div class="div_category">
+            <el-scrollbar style="height:98%">
+
+              <div v-for="(item,index) in categoryListshow"
+                   :key="index"
+                   class="category_item">
+
+                <div v-for="(colItem,colIndex) in item"
+                     :key="colIndex"
+                     class="list_item"
+                     @click="handleClickCategory(index,colIndex)">
+                  <img :src="colItem.dataIcon"
+                       alt />
+                  <div :class="['item_content',colItem.sel?'item_content_sel':'']">{{colItem.categoryName}}
+
+                  </div>
+
+                </div>
+
+              </div>
+
+            </el-scrollbar>
+          </div>
+        </div>
+
+        <div class="div_info">
+          <div class="div_search_list">
+            <el-input size="mini"
+                      WarningColor='warning'
+                      placeholder="请输入搜索内容"
+                      v-model="search">
+              <i slot="prefix"
+                 class="icon">
+                <img src="../../../../../assets/img/modules/visual/sousuo.png"
+                     alt />
+              </i>
+            </el-input>
+
+            <div class="btn"
+                 @click="handleSearch">搜索</div>
+
+          </div>
+          <div class="m-tb">
+
+            <div class="tb">
+              <cpt-tb :col-list="demand.colList"
+                      :loading="demand.loading"
+                      :header="demand.header"
+                      :list="demand.list"
+                      @handleClickRow="handleClickRow"></cpt-tb>
+
+            </div>
+            <div class="m-pagination">
+              <el-pagination :current-page="demand.pageNo"
+                             :page-size="demand.pageSize"
+                             :total="demand.total"
+                             background
+                             layout="prev, pager, next,total"
+                             @current-change="handlePageNoChange_demand">
+              </el-pagination>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+    <div id="popup"
+         style="display: none;"
+         class="ol-popup">
+      <a href="#"
+         id="popup-closer"
+         class="ol-popup-closer"></a>
+
+      <div id="popup-content"
+           class="popup-content">
+        <div v-show="selPlaceType==='resi'|| selPlaceType === 'special_resi'">
+          <div class="popTitle">居民信息</div>
+          <div class="popContentTitle">姓名：
+            <span>{{ selInfo.icUserName }}</span>
+          </div>
+          <div class="popContentTitle">所属网格：
+            <span>{{ selInfo.gridName }}</span>
+          </div>
+          <div class="popContentTitle">所属小区：
+            <span>{{ selInfo.villageName }}</span>
+          </div>
+          <div class="popContentTitle">本地户籍：
+            <span>{{ selInfo.isBdhjShow }}</span>
+          </div>
+
+          <div class="popContentTitle">手机：
+            <span>{{ selInfo.mobile }}</span>
+          </div>
+          <div class="popContentTitle">性别：
+            <span>{{ selInfo.genderShow }}</span>
+          </div>
+          <div class="popContentTitle">身份证号：
+            <span>{{ selInfo.idCard }}</span>
+          </div>
+
+          <div class="popContentTitle">工作单位：
+            <span>{{ selInfo.gzdw?selInfo.gzdw:'--' }}</span>
+          </div>
+          <div class="popContentTitle">人户状况：
+            <span>{{ selInfo.rhzkShow }}</span>
+          </div>
+          <div class="div_resi_more">
+            <div @click="toPeople"
+                 class="span_resi_more">更多</div>
+          </div>
+        </div>
+        <div v-show="selPlaceType==='dangerous_chemicals'">
+          <div class="popTitle">企业信息</div>
+          <div class="popContentTitle">企业名称：
+            <span>{{ selInfo.name }}</span>
+          </div>
+          <div class="popContentTitle">企业类型：
+            <span>{{ selInfo.categoryName }}</span>
+          </div>
+          <div class="popContentTitle">周边安全距离：
+            <span>{{ selInfo.safeDistance }}</span>
+          </div>
+          <div class="popContentTitle">危化品种类：
+            <span>{{ selInfo.dangerTypeName }}</span>
+          </div>
+          <div class="popContentTitle">负责人：
+            <span>{{ selInfo.principalName }}</span>
+          </div>
+          <div class="popContentTitle">联系电话：
+            <span>{{ selInfo.principalMobile }}</span>
+          </div>
+          <div class="popContentTitle">经营地址：
+            <span>{{ selInfo.address }}</span>
+          </div>
+          <div class="popContentTitle">备注：
+            <span>{{ selInfo.remark }}</span>
+          </div>
+        </div>
+        <div v-show="selPlaceType==='public_service'||selPlaceType==='city_management'||selPlaceType==='superior_resource'">
+          <div class="popTitle">场所信息</div>
+          <div class="popContentTitle">场所名称：
+            <span>{{ selInfo.name }}</span>
+          </div>
+          <div class="popContentTitle">场所分类：
+            <span>{{ selInfo.categoryName }}</span>
+          </div>
+          <div class="popContentTitle">占地面积：
+            <span>{{ selInfo.areaCovered }}</span>
+          </div>
+          <div class="popContentTitle">容纳人数：
+            <span>{{ selInfo.capacity }}</span>
+          </div>
+          <div class="popContentTitle">地址：
+            <span>{{ selInfo.address }}</span>
+          </div>
+        </div>
+        <div v-show="selPlaceType==='event'">
+          <div class="popTitle">难点痛点</div>
+          <div class="popContentTitle">所属网格：
+            <span>{{ selInfo.gridName }}</span>
+          </div>
+          <div class="popContentTitle">发生时间：
+            <span>{{ selInfo.happenTime }}</span>
+          </div>
+          <div class="popContentTitle">事件内容：
+            <span>{{ selInfo.eventContent }}</span>
+          </div>
+
+          <div v-if="selInfo.imageList&&selInfo.imageList.length>0"
+               class="info-prop">
+            <span>图片：</span>
+            <div class="info-pics">
+              <img :src="src"
+                   :key="src"
+                   style="width:100px;height:100px;padding-right:10px"
+                   v-for="src in eventInfo.imageList"
+                   @click="watchImg(src)" />
+
+            </div>
+          </div>
+
+          <div v-if="selInfo.voiceList&&selInfo.voiceList.length>0"
+               class="info-prop">
+            <span>音频：</span>
+            <div class="info-pics">
+              <audio controls>
+                <source :src="item.url"
+                        type=""
+                        :key="item.url"
+                        v-for="item in eventInfo.voiceList" />
+              </audio>
+
+            </div>
+
+          </div>
+          <div class="popContentTitle">反映渠道：
+            <span>{{ selInfo.sourceTypeName|| "--" }}</span>
+          </div>
+          <div class="popContentTitle">地址：
+            <span>{{ selInfo.address || "--" }}</span>
+          </div>
+          <div class="popContentTitle">报事人：
+            <span>{{selInfo.name || "--" }}</span>
+          </div>
+          <div class="popContentTitle">手机号：
+            <span>{{ selInfo.mobile || "--" }}</span>
+          </div>
+          <div class="popContentTitle">身份证号：
+            <span>{{ selInfo.idCard || "--" }}</span>
+          </div>
+
+        </div>
+        <div v-show="selPlaceType==='community_org'">
+          <div class="popTitle">组织信息</div>
+          <div class="popContentTitle">组织名称：
+            <span>{{ selInfo.organizationName }}</span>
+          </div>
+          <div class="popContentTitle">组织分类：
+            <span>{{ selInfo.categoryName }}</span>
+          </div>
+          <div class="popContentTitle">组织人数：
+            <span>{{ selInfo.organizationPersonCount }}</span>
+          </div>
+          <div class="popContentTitle">组织成员：
+            <span>{{ selInfo.organizationPersonnelShow }}</span>
+          </div>
+          <div class="popContentTitle">服务事项：
+            <span>{{ selInfo.serviceItem }}</span>
+          </div>
+          <div class="popContentTitle">负责人：
+            <span>{{ selInfo.principalName }}</span>
+          </div>
+          <div class="popContentTitle">联系电话：
+            <span>{{ selInfo.principalPhone }}</span>
+          </div>
+          <div class="popContentTitle">创建时间：
+            <span>{{ selInfo.organizationCreatedTime }}</span>
+          </div>
+        </div>
+
+        <div v-show="selPlaceType==='group_rent'">
+          <div class="popTitle">房屋信息</div>
+          <div class="popContentTitle">房屋名称：
+            <span>{{ selInfo.houseName }}</span>
+          </div>
+          <div class="popContentTitle">房屋类型：
+            <span>{{ selInfo.houseTypeName }}</span>
+          </div>
+          <div class="popContentTitle">房屋用途：
+            <span>{{ selInfo.purposeName }}</span>
+          </div>
+          <div class="popContentTitle">房屋状态：
+            <span>{{ selInfo.rentName }}</span>
+          </div>
+          <div class="popContentTitle">房主姓名：
+            <span>{{ selInfo.ownerName }}</span>
+          </div>
+          <div class="popContentTitle">联系方式：
+            <span>{{ selInfo.ownerPhone }}</span>
+          </div>
+          <div class="popContentTitle">房主身份证：
+            <span>{{ selInfo.ownerIdCard }}</span>
+          </div>
+
+        </div>
+        <div v-show="selPlaceType==='enterprise_patrol'">
+          <div class="popTitle">企事业信息</div>
+          <div class="popContentTitle">场所类型：
+            <span>{{ selInfo.placeTypeName }}</span>
+          </div>
+          <div class="popContentTitle">场所区域：
+            <span>{{ selInfo.gridName }}</span>
+          </div>
+          <div class="popContentTitle">场所名称：
+            <span>{{ selInfo.placeOrgName }}</span>
+          </div>
+          <div class="popContentTitle">场所地址：
+            <span>{{ selInfo.address }}</span>
+          </div>
+          <div class="popContentTitle">规模：
+            <span>{{ selInfo.scale }}</span>
+          </div>
+          <div class="popContentTitle">负责人：
+            <span>{{ selInfo.personInCharge }}</span>
+          </div>
+          <div class="popContentTitle">联系电话：
+            <span>{{ selInfo.mobile }}</span>
+          </div>
+
+        </div>
+        <div v-show="selPlaceType==='party_unit'">
+          <div class="popTitle">联建单位信息</div>
+          <div class="popContentTitle">单位名称：
+            <span>{{ selInfo.unitName }}</span>
+          </div>
+          <div class="popContentTitle">分类：
+            <span>{{ selInfo.typeName }}</span>
+          </div>
+          <div class="popContentTitle">服务事项：
+            <span>{{ selInfo.serviceMatterListShow }}</span>
+          </div>
+          <div class="popContentTitle">联系人：
+            <span>{{ selInfo.contact }}</span>
+          </div>
+          <div class="popContentTitle">联系电话：
+            <span>{{ selInfo.contactMobile }}</span>
+          </div>
+          <div class="popContentTitle">在职党员：
+            <span>{{ selInfo.memberCount }}</span>
+          </div>
+          <div class="popContentTitle">备注：
+            <span>{{ selInfo.remark }}</span>
+          </div>
+          <div class="popContentTitle">地理位置：
+            <span>{{ selInfo.address }}</span>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <people v-if="showPeopleInfo"
+            :uid="selUserId"
+            ref="ref_people"></people>
+  </div>
+
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile.js';
+import ImageLayer from 'ol/layer/Image';
+import { Raster as RasterSource } from 'ol/source';
+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 nextTick from 'dai-js/tools/nextTick'
+import { mapGetters } from "vuex";
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost, requestGet } from "@/js/dai/request";
+
+
+import cptTb from "@/views/modules/visual/cpts/tb";
+import cptCard from "@/views/modules/visual/cpts/card";
+import ScreenLoading from "@/views/modules/visual/cpts/loading";
+import People from "../../basicinfo/people";
+
+var centerPointGlobal = [120.664619, 36.504963]
+
+let loading;//加载动画
+
+let map;
+let mapView;
+let gaodeMapLayer;//背景地图图层
+let parentLayer;//上级组织图层
+let parentSource;//上级组织多边形
+let polygonLayer;//标注图层
+let iconLayer; // icon标注图层
+let iconSource; // icon
+let polygonSource;//标注多边形
+let select;//选中标注
+
+let xoffset = 0
+let yoffset = 0
+
+
+//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_.colorIndex]
+    }),
+    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 parentStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      // fill: new Fill({
+      //   color: [255, 255, 255, 0.3]
+      // }),
+      stroke: new Stroke({
+        color: [0, 103, 182, 1],
+        width: 2
+      }),
+
+      // text: createTextStyle(feature)
+    });;
+  };
+})()
+
+
+//标注样式
+var polygonStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      fill: new Fill({
+        // color: [255, 255, 255, 0.3]
+        color: polygonColorArray[feature.values_.colorIndex]
+      }),
+      stroke: new Stroke({
+        color: polygonColorArray[feature.values_.colorIndex],
+        width: 3
+      }),
+
+      text: createTextStyle(feature)
+    });;
+  };
+})()
+
+//定义颜色转换方法
+let reverseFunc = function (pixelsTemp) {
+  //蓝色
+  for (var i = 0; i < pixelsTemp.length; i += 4) {
+    var r = pixelsTemp[i];
+    var g = pixelsTemp[i + 1];
+    var b = pixelsTemp[i + 2];
+    //运用图像学公式，设置灰度值
+    var grey = r * 0.3 + g * 0.59 + b * 0.11;
+    //将rgb的值替换为灰度值
+    pixelsTemp[i] = grey;
+    pixelsTemp[i + 1] = grey;
+    pixelsTemp[i + 2] = grey;
+
+    //基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整
+    pixelsTemp[i] = 55 - pixelsTemp[i];
+    pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
+    pixelsTemp[i + 2] = 305 - pixelsTemp[i + 2];
+  }
+};
+
+
+const vueGis = {
+  name: 'HomeMap',
+  data () {
+    return {
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      orgData: {},//当前组织对象
+      orgId: '',
+      orgLevel: '',
+
+      subAgencyArray: [],//下拉框数据
+      iconCoordinators: [],
+      currentCoordinate: null,
+      overlay: null,
+
+      //右侧搜索
+      searchName: "",
+
+      //右侧列表
+      infoLoading: true,
+      listData: [],//得到的数据
+      listDatashow: [],//处理成一行两列的数据
+
+      //下钻层级记录
+      runNum: 0,
+      routerArray: [],
+      center: [],
+      zoom: null,
+      parentPolygon: [],
+
+      centerFlag: 'point',//定义中心点的flag  point点 fit 自适应
+
+      coverageTypesList: [//图层类型。五大图层：zhzl：综合治理图层；yjcl：应急处置图层；aqsc：安全生产图层；csgl：城市管理图层；ggfw：公共服务图层
+        {
+          select: true,
+          label: '综合治理图层',
+          value: 'zhzl'
+        },
+        {
+          select: false,
+          label: '应急处置图层',
+          value: 'yjcl'
+        },
+        {
+          select: false,
+          label: '安全生产图层',
+          value: 'aqsc'
+        },
+        {
+          select: false,
+          label: '城市管理图层',
+          value: 'csgl'
+        },
+        {
+          select: false,
+          label: '公共服务图层',
+          value: 'ggfw'
+        },
+      ],
+      categoryList: [],//分类列表
+      categoryListshow: [],//处理成一行四列的数据
+
+      selImg: require('../../../../../assets/img/shuju/xuanzhong.png'),
+      noSelImg: require('../../../../../assets/img/shuju/weixuan.png'),
+
+      coverageTypes: ['zhzl'],
+      categoryKeys: [],
+      search: '',
+      pageNo: 1,
+      pageSize: 10,
+
+      demand: {
+        loading: false,
+        colList: [
+          {
+            align: "center",
+            width: "15%",
+          },
+          {
+            align: "center",
+            width: "25%",
+          },
+          {
+            align: "center",
+            width: "60%",
+          },
+
+        ],
+        header: ["图例", "分类", "名称"],
+        list: [],
+        pageSize: 50,
+        pageNo: 1,
+        total: 0,
+      },
+
+      iconUrlArray: {
+
+        'anzhibangjiao': require('../../../../../assets/img/shuju/fiveLayer/anzhibangjiao.png'),
+        'buliangqingshaonian': require('../../../../../assets/img/shuju/fiveLayer/buliangqingshaonian.png'),
+        'shequjiaozheng': require('../../../../../assets/img/shuju/fiveLayer/shequjiaozheng.png'),
+        'resi_xfry': require('../../../../../assets/img/shuju/fiveLayer/resi_xfry.png'),
+        'xidurenyuan': require('../../../../../assets/img/shuju/fiveLayer/xidurenyuan.png'),
+        'xiejiaorenyuan': require('../../../../../assets/img/shuju/fiveLayer/xiejiaorenyuan.png'),
+        'zhaoshizhaohuojingshenbing': require('../../../../../assets/img/shuju/fiveLayer/zhaoshizhaohuojingshenbing.png'),
+
+
+        'yjdw': require('../../../../../assets/img/shuju/fiveLayer/yjdw.png'),
+        'sr_gy': require('../../../../../assets/img/shuju/fiveLayer/sr_gy.png'),
+        'sr_gc': require('../../../../../assets/img/shuju/fiveLayer/sr_gc.png'),
+        'whdw': require('../../../../../assets/img/shuju/fiveLayer/whdw.png'),
+        'sr_ggld': require('../../../../../assets/img/shuju/fiveLayer/sr_ggld.png'),
+        'lwh': require('../../../../../assets/img/shuju/fiveLayer/lwh.png'),
+        'sr_tyc': require('../../../../../assets/img/shuju/fiveLayer/sr_tyc.png'),
+        'lyjlb': require('../../../../../assets/img/shuju/fiveLayer/lyjlb.png'),
+        'sr_yjy': require('../../../../../assets/img/shuju/fiveLayer/sr_yjy.png'),
+        'zaxld': require('../../../../../assets/img/shuju/fiveLayer/zaxld.png'),
+        'other': require('../../../../../assets/img/shuju/fiveLayer/other.png'),
+        'sr_jzz': require('../../../../../assets/img/shuju/fiveLayer/sr_jzz.png'),
+        'sr_djc': require('../../../../../assets/img/shuju/fiveLayer/sr_djc.png'),
+        'sr_rfqck': require('../../../../../assets/img/shuju/fiveLayer/sr_rfqck.png'),
+        'ep_lg': require('../../../../../assets/img/shuju/fiveLayer/ep_lg.png'),
+        'sr_xfz': require('../../../../../assets/img/shuju/fiveLayer/sr_xfz.png'),
+        'pu_jgzsbm': require('../../../../../assets/img/shuju/fiveLayer/pu_jgzsbm.png'),
+
+        'gr_czw': require('../../../../../assets/img/shuju/fiveLayer/gr_czw.png'),
+        'ep_cycs': require('../../../../../assets/img/shuju/fiveLayer/ep_cycs.png'),
+        'dc_jyz': require('../../../../../assets/img/shuju/fiveLayer/dc_jyz.png'),
+        'ep_gwylcs': require('../../../../../assets/img/shuju/fiveLayer/ep_gwylcs.png'),
+        'dc_jqz': require('../../../../../assets/img/shuju/fiveLayer/dc_jqz.png'),
+        'dc_whpdw': require('../../../../../assets/img/shuju/fiveLayer/dc_whpdw.png'),
+        'ep_wb': require('../../../../../assets/img/shuju/fiveLayer/ep_wb.png'),
+        'ep_mrxycs': require('../../../../../assets/img/shuju/fiveLayer/ep_mrxycs.png'),
+        'dc_yqhjz': require('../../../../../assets/img/shuju/fiveLayer/dc_yqhjz.png'),
+        'dc_jzgd': require('../../../../../assets/img/shuju/fiveLayer/dc_jzgd.png'),
+        'ep_scjgqy': require('../../../../../assets/img/shuju/fiveLayer/ep_scjgqy.png'),
+
+        'cm_nmsc': require('../../../../../assets/img/shuju/fiveLayer/cm_nmsc.png'),
+        'event_tdnd': require('../../../../../assets/img/shuju/fiveLayer/event_tdnd.png'),
+        'cm_bhsc': require('../../../../../assets/img/shuju/fiveLayer/cm_bhsc.png'),
+        'cm_cjsc': require('../../../../../assets/img/shuju/fiveLayer/cm_cjsc.png'),
+        'ep_lssd': require('../../../../../assets/img/shuju/fiveLayer/ep_lssd.png'),
+
+
+        'resi_szry': require('../../../../../assets/img/shuju/fiveLayer/resi_szry.png'),
+        'ps_lyy': require('../../../../../assets/img/shuju/fiveLayer/ps_lyy.png'),
+        'resi_snry': require('../../../../../assets/img/shuju/fiveLayer/resi_snry.png'),
+        'ps_mzb': require('../../../../../assets/img/shuju/fiveLayer/ps_mzb.png'),
+        'ps_zs': require('../../../../../assets/img/shuju/fiveLayer/ps_zs.png'),
+        'ps_wss': require('../../../../../assets/img/shuju/fiveLayer/ps_wss.png'),
+        'ps_jjz': require('../../../../../assets/img/shuju/fiveLayer/ps_jjz.png'),
+        'ep_xx': require('../../../../../assets/img/shuju/fiveLayer/ep_xx.png'),
+        'ep_yy': require('../../../../../assets/img/shuju/fiveLayer/ep_yy.png'),
+
+      },
+      iconArrays: [],
+      overlay: null,
+      showPopup: false,
+
+      selPlaceType: '',
+      selInfo: {},
+      selUserId: '',
+      showPeopleInfo: false
+
+    }
+  },
+  async mounted () {
+
+    //加载组织数据
+    await this.loadOrgData()
+
+    //初始化地图
+    this.initMap()
+
+    await nextTick(300)
+    this.addParentLayer()
+    this.loadParentPolygon()
+    //添加标注图层
+    this.addPolygonLayer()
+
+    //添加icontuceng
+    this.addIconLayer()
+
+    //加载当前园区的标注
+    this.loadPolygon(this.subAgencyArray)
+
+
+    this.setMapLocation()
+    await this.loadCategoryList()
+    this.getTable();
+    await this.getMapTable();
+
+
+    //初始化icon图层
+    this.addOverlay()
+
+    this.addMapClick()
+
+  },
+  methods: {
+
+    toPeople () {
+      this.showPeopleInfo = true
+    },
+
+    //添加覆盖层
+    addOverlay () {
+      // 使用变量存储弹窗所需的 DOM 对象
+      var container = document.getElementById("popup");
+      var closer = document.getElementById("popup-closer");
+      var content = document.getElementById("popup-content");
+
+
+      // 创建一个弹窗 Overlay 对象
+      this.overlay = new Overlay({
+        element: container, //绑定 Overlay 对象和 DOM 对象的
+        autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
+        autoPanAnimation: {
+          duration: 250 //自动平移效果的动画时间 9毫秒
+        },
+        zIndex: 100
+      });
+      // 将弹窗添加到 map 地图中
+      map.addOverlay(this.overlay);
+      let _that = this;
+
+      /**
+       * 为弹窗添加一个响应关闭的函数
+       */
+      closer.onclick = function () {
+        _that.overlay.setPosition(undefined);
+        closer.blur();
+        return false;
+      };
+
+    },
+
+    //注册地图点击事件
+    addMapClick () {
+      let _that = this
+
+      map.on("click", function (evt) {
+        const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+          return feature;
+        });
+        if (feature) {
+          // console.log(feature)
+          _that.clickMapVolunteer(feature.values_.properties.info)
+
+        }
+
+      });
+    },
+
+    //点击项目
+    async clickMapVolunteer (info) {
+
+      if (!info.id) {
+        return false
+      }
+      if (!info.latitude || !info.longitude) {
+        this.$message.warning("请先完善坐标位置")
+        return false
+      }
+      this.selPlaceType = info.placeType
+      if (info.placeType === 'resi' || info.placeType === 'special_resi') {//综合治理图层和公共服务图层中的失能人员、失智人员
+        // info.id = "dd0bd55db0ca4b629c40bc914a08368e"
+        this.selUserId = info.id
+        this.loadResi(info)
+      }
+      if (info.placeType === 'public_service') {//公共服务图层
+        this.loadPublicService(info)
+      }
+      if (info.placeType === 'dangerous_chemicals') {//重点危化品企业
+        this.loadDangerousChemicals(info)
+      }
+      if (info.placeType === 'event') {//难点痛点
+        this.loadEvent(info)
+      }
+      if (info.placeType === 'city_management') {//城市管理图层
+        this.loadCityManagement(info)
+      }
+      if (info.placeType === 'community_org') {//社区自组织
+        this.loadCommunityOrg(info)
+      }
+      if (info.placeType === 'superior_resource') {//优势资源
+        this.loadSuperiorResource(info)
+      }
+      if (info.placeType === 'group_rent') {//群租房
+        this.loadGroupRent(info)
+      }
+
+
+      if (info.placeType === 'party_unit') {//来自联建单位的机关直属部门
+        this.loadPartyUnit(info)
+      }
+      if (info.placeType === 'enterprise_patrol') {//来自企事业查询的
+        this.loadEnterprisePartrol(info)
+      }
+
+
+    },
+
+    async loadResi (info) {
+      const url = "/epmetuser/icresiuser/resi-brief/" + info.id
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
+
+      let params = {}
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.icUserName = data.icUserName ? data.icUserName : '--'
+        data.gridName = data.gridName ? data.gridName : '--'
+        data.villageName = data.villageName ? data.villageName : '--'
+        data.mobile = data.mobile ? data.mobile : '--'
+        data.idCard = data.idCard ? data.idCard : '--'
+        data.birthday = data.birthday ? data.birthday : '--'
+        data.contacts = data.contacts ? data.contacts : '--'
+        data.contactsMobile = data.contactsMobile ? data.contactsMobile : '--'
+
+        data.isBdhjShow = data.isBdhj ? data.isBdhj === '0' ? '否' : '是' : '--'
+        data.genderShow = data.gender ? data.gender === '0' ? '女' : '男' : '--'
+        if (data.rhzk === 'rhyz') {
+          data.rhzkShow = '人户一致'
+        } else if (data.rhzk === 'rzhbz') {
+          data.rhzkShow = '人在户不在'
+        } else if (data.rhzk === 'hzrbz') {
+          data.rhzkShow = '户在人不在'
+        } else {
+          data.rhzkShow = '--'
+        }
+
+        let categoriesArray = []
+
+        for (let key in data.volunteerCategories) {
+          categoriesArray.push(data.volunteerCategories[key])
+
+        }
+
+        if (categoriesArray.length > 0) {
+          data.categories = categoriesArray.join(',')
+        } else {
+          data.categories = '--'
+        }
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadPublicService (info) {
+      const url = "/gov/org/icPublicService/detail"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/detail"
+
+      let params = {
+        icPublicServiceId: info.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.name = data.name ? data.name : '--'
+        data.categoryName = data.categoryName ? data.categoryName : '--'
+        data.areaCovered = data.areaCovered ? data.areaCovered + '平方公里' : '--'
+        data.capacity = data.capacity ? data.capacity : '--'
+        data.address = data.address ? data.address : '--'
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadEvent (info) {
+      const url = "/gov/project/icEvent/detail";
+      //const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/eventDetail/" + this.eventId;
+
+      const { data, code, msg } = await requestPost(url, {
+        icEventId: info.id,
+      });
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+        this.handleShowPopup(coordinate)
+
+
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadDangerousChemicals (info) {
+      const url = "/gov/org/icDangerousChemicals/detail"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icDangerousChemicals/detail"
+
+      let params = {
+        icSuperiorResourceId: info.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.name = data.name ? data.name : '--'
+        data.categoryName = data.categoryName ? data.categoryName : '--'
+        data.safeDistance = data.safeDistance ? data.safeDistance : '--'
+        data.dangerTypeName = data.dangerTypeName ? data.dangerTypeName : '--'
+        data.principalName = data.principalName ? data.principalName : '--'
+        data.principalMobile = data.principalMobile ? data.principalMobile : '--'
+        data.address = data.address ? data.address : '--'
+        data.remark = data.remark ? data.remark : '--'
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadCityManagement (info) {
+      const url = "/gov/org/icCityManagement/detail"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icCityManagement/detail"
+
+      let params = {
+        icCityManagementId: info.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.name = data.name ? data.name : '--'
+        data.categoryName = data.categoryName ? data.categoryName : '--'
+        data.areaCovered = data.areaCovered ? data.areaCovered + '平方公里' : '--'
+        data.capacity = data.capacity ? data.capacity : '--'
+        data.address = data.address ? data.address : '--'
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadCommunityOrg (info) {
+      // const url = "/gov/org/icCityManagement/detail"
+      const url = "/heart/iccommunityselforganization/community-self-org-detail/" + info.id
+
+      let params = {}
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.orgPersonArray = []
+        data.organizationPersonnel.forEach(element => {
+          let orgPersonnel = element.personName + "(" + element.personPhone + ")"
+          data.orgPersonArray.push(orgPersonnel)
+        });
+
+        data.organizationPersonnelShow = data.orgPersonArray.join(",")
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadSuperiorResource (info) {
+      const url = "/gov/org/icSuperiorResource/detail"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icSuperiorResource/detail"
+
+      let params = {
+        icSuperiorResourceId: info.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.name = data.name ? data.name : '--'
+        data.categoryName = data.categoryName ? data.categoryName : '--'
+        data.areaCovered = data.areaCovered ? data.areaCovered + '平方公里' : '--'
+        data.capacity = data.capacity ? data.capacity : '--'
+        data.address = data.address ? data.address : '--'
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+
+
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async loadEnterprisePartrol (info) {
+      const url = "/gov/org/enterprise/detail/" + info.id
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/enterprise/detail"
+
+      const { data, code, msg } = await requestPost(url)
+
+      if (code === 0) {
+        // debugger
+        let coordinate = [info.longitude, info.latitude]
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+        this.handleShowPopup(coordinate)
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    async loadGroupRent (info) {
+      const url = "/gov/org/ichouse/" + info.id
+
+      const { data, code, msg } = await requestGet(url)
+
+      if (code === 0) {
+        // debugger
+        let coordinate = [info.longitude, info.latitude]
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+        this.handleShowPopup(coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    async loadPartyUnit (info) {
+      const url = '/heart/icpartyunit/detail'
+      // const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/detail'
+      let params = {
+        id: info.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        if (!data.serviceMatterList || !Array.isArray(data.serviceMatterList)) {
+          data.serviceMatterList = []
+        } else {
+          data.serviceMatterListShow = data.serviceMatterNameList.join(',')
+        }
+
+        this.selInfo = JSON.parse(JSON.stringify(data))
+        this.handleShowPopup(coordinate)
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+
+    handleShowPopup (coordinate) {
+
+      // console.log(this.overlay.getElement())
+      let content = document.getElementById("popup-content");
+      this.overlay.getElement().style.display = 'block'
+      this.overlay.getElement().parentNode.style.display = 'block'
+      this.overlay.getElement().parentNode.parentNode.style.display = 'block'
+      // content.innerHTML = showData;
+      this.overlay.setPosition(coordinate);
+      //把 overlay 显示到指定的 x,y坐标
+
+    },
+    // 关闭弹窗
+    handleClosePopup () {
+      this.overlay.setPosition(undefined);
+      document.getElementById("popup-closer").blur();
+      return false;
+    },
+
+    //点击图层
+    async handleClickCoverage (index) {
+      this.demand.pageNo = 1
+      this.coverageTypesList[index].select = !this.coverageTypesList[index].select
+      let item = this.coverageTypesList[index]
+
+      this.$set(this.coverageTypesList, index, item)
+
+      this.coverageTypes = []
+
+      this.coverageTypesList.forEach(element => {
+        if (element.select) {
+          this.coverageTypes.push(element.value)
+        }
+      });
+
+      await this.loadCategoryList()
+      this.getTable();
+      this.getMapTable();
+    },
+
+    //点击类别
+    async handleClickCategory (index, colIndex) {
+      this.demand.pageNo = 1
+      this.categoryListshow[index][colIndex].sel = !this.categoryListshow[index][colIndex].sel
+
+      // this.categoryList[index * 4 + colIndex].sel = !this.categoryList[index * 4 + colIndex].sel
+
+      let array = this.categoryListshow[index]
+      let item = this.categoryListshow[index][colIndex]
+
+
+      this.$set(this.categoryListshow[index], colIndex, item)
+      this.$set(this.categoryListshow, index, array)
+
+      this.categoryKeys = []
+
+      this.categoryList.forEach(element => {
+        if (element.sel) {
+          this.categoryKeys.push(element.categoryKey)
+        }
+      });
+
+      this.getTable();
+      this.getMapTable();
+    },
+    handleSearch () {
+      this.demand.pageNo = 1
+      this.getTable();
+      this.getMapTable();
+    },
+    //
+    handleClickRow (index) {
+      let selData = this.tableList[index]
+      if (selData.longitude && selData.latitude) {
+        mapView.setCenter([selData.longitude, selData.latitude]);
+      }
+
+      this.clickMapVolunteer(selData)
+
+      // alert(index)
+    },
+
+    handlePageNoChange_demand (val) {
+      this.demand.pageNo = val;
+      this.getTable();
+    },
+
+    async loadCategoryList () {
+      const url = "/gov/org/coverage/categoryList"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/coverage/categoryList"
+      let params = {
+        coverageTypes: this.coverageTypes,
+
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.categoryList = data
+
+        this.categoryKeys = []
+
+        this.categoryListshow = []
+        let itemArray = []
+
+        this.categoryList.forEach((item, index) => {
+
+          item.dataIcon = this.iconUrlArray[item.categoryKey]
+
+
+          item.sel = true
+          this.categoryKeys.push(item.categoryKey)
+
+        });
+
+        let chunk = 4
+        for (let i = 0, j = this.categoryList.length; i < j; i += chunk) {
+          this.categoryListshow.push(this.categoryList.slice(i, i + chunk))
+        }
+
+
+        // console.log(this.categoryListshow)
+        // console.log(this.categoryList)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //加载组织数据
+    async getTable () {
+      this.demand.loading = true
+      const url = "/data/aggregator/coverage/dataList";
+      // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList";
+      let params = {
+        coverageTypes: this.coverageTypes,
+        categoryKeys: this.categoryKeys,
+        search: this.search,
+        pageNo: this.demand.pageNo,
+        pageSize: this.demand.pageSize,
+        isPage: true
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.demand.loading = false;
+
+      if (code === 0) {
+
+        this.demand.total = data.total;
+
+        this.tableList = data.list
+        this.demand.list = data.list
+        this.demand.list.forEach(item => {
+          item.imgObj = {
+            type: 'img',
+            src: this.iconUrlArray[item.categoryKey]
+          }
+        });
+
+
+        this.demand.list = this.demand.list.map((item) => {
+          return [
+            // item.categoryKey ? item.categoryKey : '--',
+
+            item.imgObj,
+            item.categoryName,
+            item.content ? item.content : '',
+
+          ];
+        });
+        console.log(this.demand.list)
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    //加载组织数据
+    async getMapTable () {
+
+      const url = "/data/aggregator/coverage/dataList";
+      // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList";
+      let params = {
+        coverageTypes: this.coverageTypes,
+        categoryKeys: this.categoryKeys,
+        search: this.search,
+        // pageNo: 1,
+        // pageSize: 2000,
+        isPage: false
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+
+        this.demand.total = data.total;
+
+        this.iconArrays = data.list
+
+        this.iconArrays.forEach((item, index) => {
+          item.url = this.iconUrlArray[item.categoryKey]
+
+        });
+        // console.log(this.iconArrays)
+        this.loadIcon()
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载icon图标
+    loadIcon () {
+
+      iconSource.clear()//清空多边形标注
+      if (this.iconArrays && this.iconArrays.length > 0) {
+
+        let iconFeatures = [];
+
+        this.iconArrays.forEach((oneIcon, index) => {
+          //添加标注
+
+          let iconItem = new Feature({
+            geometry: new Point([oneIcon.longitude, oneIcon.latitude]),
+            id: oneIcon.id,
+            properties: {
+              type: "icon",
+              info: { ...oneIcon }
+            }
+          });
+          // console.log('oneIcon----', this.iconUrlArray[oneIcon.urlIndex])
+          let iconStyle = new Style({
+            image: new Icon({
+              // anchor: [0.5, 0.5],
+              // imgSize: [32, 32],
+              // scale: 0.5,
+              // src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] || this.iconUrlArray[0]
+              src: oneIcon.url
+            }),
+            // text: createTextStyle(oneIcon)
+          });
+
+          iconItem.setStyle(iconStyle);
+
+          // if (this.distanceMax) {
+          //   if (this.computedDistance(oneIcon.longitude, oneIcon.latitude, this.distanceMax)) {
+          //     iconFeatures.push(iconItem);
+          //   }
+          // } else {
+          iconFeatures.push(iconItem);
+          // }
+
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+    },
+
+    //刷新地图
+    async refreshMap (isRefreshView) {
+
+      //加载组织数据
+      await this.loadOrgData()
+
+      //绘制父级组织数据
+      this.loadParentPolygon()
+      //绘制本级组织数据
+      this.loadPolygon(this.subAgencyArray)
+
+      //重置地图中心点
+
+      // if (isRefreshView) {
+      // this.setMapLocation()
+
+      // }
+
+      await this.getTable(false);
+
+    },
+
+    //设置地图定位的中心点和缩放级别
+    setMapLocation () {
+      if (!this.zoom) {
+        this.setZoom(this.orgData.agencyLevel)
+      }
+      this.centerPoint = []
+
+
+      //如果存在中心点（返回时赋值）
+      if (this.center && this.center.length > 0) {
+        this.centerPoint = this.center
+        this.centerFlag = 'point'
+        this.center = []
+
+      } else if (parentLayer.getSource().getFeatures()[0]) {//如果是初次进入，不存在下级组织，用父级组织
+        this.centerFlag = 'flag_parent'
+
+
+      } else if (polygonLayer.getSource().getFeatures()[0]) {//如果是初次进入,存在下级组织
+        this.centerFlag = 'flag_polygon'
+
+      } else if (this.orgData.longitude && this.orgData.latitude) {
+        this.centerPoint.push(this.orgData.longitude)
+        this.centerPoint.push(this.orgData.latitude)
+        this.centerFlag = 'point'
+
+      } else {
+        this.centerPoint = centerPointGlobal
+        this.centerFlag = 'point'
+      }
+      // debugger
+      if (this.centerFlag === 'flag_parent') {
+        let parentFeatures = parentLayer.getSource().getFeatures()[0]
+        let polygon = parentFeatures.getGeometry();
+        map.getView().fit(polygon, map.getSize());
+        this.zoom = map.getView().getZoom() - 1
+
+      } else if (this.centerFlag === 'flag_polygon') {
+        let polygonFeatures = polygonLayer.getSource().getFeatures()[0]
+        let polygon = polygonFeatures.getGeometry();
+        map.getView().fit(polygon, map.getSize());
+        this.zoom = map.getView().getZoom() - 1
+
+      } else {
+        mapView.setCenter(this.centerPoint);
+
+      }
+      mapView.setZoom(this.zoom);
+
+    },
+
+    //返回所选组织
+    handleClickRouter (index) {
+
+      this.showPeopleInfo = false
+
+
+
+    },
+
+    //加载组织数据
+    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
+        this.parentPolygon = []
+        this.parentPolygon.push(data)
+        if (data.children && data.children.length > 0) {
+          this.subAgencyArray = data.children
+        } else {
+          this.subAgencyArray = []
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载父级组织多边形
+    loadParentPolygon () {
+      parentSource.clear()//清空标注
+
+      let featureData = []//标注数据
+      if (this.parentPolygon && this.parentPolygon.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        this.parentPolygon.forEach(agencyItem => {
+
+          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
+            oneData = {
+              type: 'Feature',
+              id: agencyItem.id,
+              properties: {
+                id: agencyItem.id,
+                level: agencyItem.level,
+                name: agencyItem.name
+              },
+              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) => {
+
+              if (index % 2 == 0) {//偶
+                item = (parseFloat(item) + parseFloat(xoffset)) + ''
+                itemArray.push(item)
+              } else {//奇
+                item = (parseFloat(item) + parseFloat(yoffset)) + ''
+                itemArray.push(item)
+
+                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)
+        parentSource.addFeatures(feature)
+
+      }
+
+    },
+
+    //加载当前园区的标注
+    loadPolygon (subAgencyArray) {
+      polygonSource.clear()//清空多边形标注
+      iconSource.clear()//清空多边形标注
+
+      let featureData = []//标注数据
+      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        let count = 0
+        for (let i = 0; i < subAgencyArray.length; i++) {
+          const agencyItem = subAgencyArray[i]
+
+
+          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
+            let urlNum = count % 3
+            count++
+
+            oneData = {
+              type: 'Feature',
+              id: agencyItem.id,
+              properties: {
+                id: agencyItem.id,
+                level: agencyItem.level,
+                name: agencyItem.name,
+                colorIndex: 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) {//偶
+                item = (parseFloat(item) + parseFloat(xoffset)) + ''
+                itemArray.push(item)
+
+              } else {//奇
+
+                item = (parseFloat(item) + parseFloat(yoffset)) + ''
+                itemArray.push(item)
+                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)
+        // console.log(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
+          //地图icon样式
+          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: "/img/largeScreen/icon_camra.png"
+              // src: "https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png"
+              src: iconUrlArray[oneIcon.values_.colorIndex]
+            })
+          });
+
+          oneCctv.setStyle(iconStyle);
+          iconFeatures.push(oneCctv);
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+
+    },
+
+    //根据组织层级设置缩放级别
+    setZoom (agencyLevel) {
+      if (agencyLevel === 'district') {
+        this.zoom = 12
+      } else if (agencyLevel === 'street') {
+        this.zoom = 13
+      } else if (agencyLevel === 'community') {
+        this.zoom = 14
+      }
+
+    },
+
+    firstCenterMap () {
+      this.centerPoint = []
+      if (this.orgData.longitude && this.orgData.latitude) {
+        this.centerPoint.push(this.orgData.longitude)
+        this.centerPoint.push(this.orgData.latitude)
+
+      } else {
+        this.centerPoint = centerPointGlobal
+      }
+
+      if (!this.zoom) {
+        this.setZoom(this.orgData.agencyLevel)
+      }
+    },
+
+    initMap () {
+      this.firstCenterMap()
+
+      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,
+        crossOrigin: 'anonymous'
+      });
+
+
+
+
+      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中
+      })
+
+
+      //去除双击放大效果
+      const dblClickInteraction = map
+        .getInteractions()
+        .getArray()
+        .find(interaction => {
+          return interaction instanceof DoubleClickZoom;
+        });
+      map.removeInteraction(dblClickInteraction);
+
+
+
+    },
+    //添加标注图层
+    addParentLayer () {
+      parentSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      parentLayer = new VectorLayer({
+        source: parentSource,
+        style: parentStyleFunction,
+        zIndex: 50
+      });
+
+
+      map.addLayer(parentLayer)
+
+
+    },
+
+    //添加标注图层
+    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);
+
+      // select.on('select', e => {
+
+      // });
+
+    },
+
+    addIconLayer () {
+      iconSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      iconLayer = new VectorLayer({
+        source: iconSource,
+        zIndex: 70
+      });
+
+      map.addLayer(iconLayer);
+
+    },
+
+    //开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    endLoading () {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+  props: {
+
+    // vueFlag: {
+    //   type: String,
+    //   default: "alarm"
+    // }
+  },
+  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: { cptTb, cptCard, ScreenLoading, People },
+}
+export default vueGis;
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/fiveLayerMap.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_content {
+  .ol-viewport {
+    border-radius: 5px;
+  }
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+</style> 
+
+<style lang="scss" scoped>
+.popTitle {
+  font-size: 16px;
+  color: #ffffff;
+  padding-bottom: 5px;
+}
+
+.info-prop {
+  position: relative;
+  margin: 10px 0;
+  display: flex;
+  padding-left: 15px;
+  font-size: 12px;
+
+  .info-pics {
+    display: flex;
+    margin: 10px 0;
+    img {
+      display: block;
+      width: 32%;
+      height: 90px;
+      margin-right: 9px;
+      object-fit: cover;
+    }
+  }
+  > span,
+  > div {
+    display: block;
+    max-width: 300px;
+  }
+}
+
+.popContentTitle {
+  font-size: 12px;
+  color: #ffffff;
+  margin-top: 5px;
+}
+
+.div_resi_more {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.span_resi_more {
+  font-size: 16px;
+  text-decoration: underline;
+}
+.span_resi_more:hover {
+  cursor: pointer;
+}
+</style>
+
+<style lang="scss" >
+.div_search_list {
+  .el-input__inner[WarningColor="warning"] {
+    border-radius: 8px 0 0 8px;
+    height: 48px;
+    background-color: #01106800;
+    border: 0px solid #0082fb;
+    padding: 0 0 0 70px;
+    font-size: 18px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+  }
+  .el-input__inner {
+    &::placeholder {
+      padding: 0;
+      margin: 0;
+
+      font-size: 18px;
+    }
+  }
+}
+
+.ol-popup {
+  position: absolute;
+  background-color: #1257c9;
+  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #1257c9;
+  bottom: 12px;
+  left: -50px;
+  text-align: left;
+}
+.ol-popup:after,
+.ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: 1257c9;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #1257c9;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+.popup-content {
+  width: 300px;
+}
+
+.ol-popup-closer:after {
+  content: "✖";
+  // color: rgba(1, 17, 104, 1);
+  color: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue b/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
index 5535dc57..efc340eb 100644
--- a/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
+++ b/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
@@ -373,6 +373,8 @@
 import 'ol/ol.css'
 import { Map, View } from 'ol'
 import TileLayer from 'ol/layer/Tile.js';
+import ImageLayer from 'ol/layer/Image';
+import { Raster as RasterSource } from 'ol/source';
 import XYZ from 'ol/source/XYZ.js';
 import VectorLayer from 'ol/layer/Vector.js';
 import VectorSource from 'ol/source/Vector.js';
@@ -489,6 +491,28 @@ var polygonStyleFunction = (function () {
   };
 })()
 
+//定义颜色转换方法
+let reverseFunc = function (pixelsTemp) {
+  //蓝色
+  for (var i = 0; i < pixelsTemp.length; i += 4) {
+    var r = pixelsTemp[i];
+    var g = pixelsTemp[i + 1];
+    var b = pixelsTemp[i + 2];
+    //运用图像学公式，设置灰度值
+    var grey = r * 0.3 + g * 0.59 + b * 0.11;
+    //将rgb的值替换为灰度值
+    pixelsTemp[i] = grey;
+    pixelsTemp[i + 1] = grey;
+    pixelsTemp[i + 2] = grey;
+
+    //基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整
+    pixelsTemp[i] = 55 - pixelsTemp[i];
+    pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
+    pixelsTemp[i + 2] = 305 - pixelsTemp[i + 2];
+  }
+};
+
+
 const vueGis = {
   name: 'HomeMap',
   data () {
@@ -1642,9 +1666,13 @@ const vueGis = {
           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
+        zIndex: 20,
+        crossOrigin: 'anonymous'
       });
 
+
+
+
       mapView = new View({
         //中心点坐标
         center: this.centerPoint,
@@ -1674,6 +1702,8 @@ const vueGis = {
         });
       map.removeInteraction(dblClickInteraction);
 
+
+
     },
     //添加标注图层
     addParentLayer () {
diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue
index 58206f45..7e13d380 100644
--- a/src/views/modules/visual/components/screen-map/index.vue
+++ b/src/views/modules/visual/components/screen-map/index.vue
@@ -422,7 +422,7 @@ const vueGis = {
               // imgSize: [32, 32],
               // scale: 0.5,
               // src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] || this.iconUrlArray[0]
-              src: (oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex]) || (oneIcon.index &&this.iconUrlArray[oneIcon.index]) || this.iconUrlArray[0]
+              src: (oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex]) || (oneIcon.index && this.iconUrlArray[oneIcon.index]) || this.iconUrlArray[0]
             }),
             // text: createTextStyle(oneIcon)
           });
@@ -627,6 +627,8 @@ const vueGis = {
         this.zoom = 13
       } else if (level === 'community') {
         this.zoom = 14
+      } else {
+        this.zoom = 12
       }
 
     },