epmet-oper-gov/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue

<template>
  <div style="position: relative">

    <!-- 组织路由 -->
    <div class="div_top">
      <div class="router_line"></div>
      <div class="div_router">
        <span class="router_parents"
              v-for="(item,index) in runAgencyArray"
              @click="handleClickAgency(index)"
              :key="index">{{item.name}}<span class="arrow">></span></span>

        <span class="router_child">{{orgData.name}}</span>
      </div>
    </div>

    <div 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 === 'specil_resi'">
          <div class="popTitle">居民信息</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.icUserName }}</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.birthday }}</span>
          </div>
          <div class="popContentTitle">联系人：
            <span>{{ selInfo.contacts }}</span>
          </div>
          <div class="popContentTitle">联系人手机：
            <span>{{ selInfo.contactsMobile }}</span>
          </div>
          <div class="popContentTitle">志愿者类别：
            <span>{{ selInfo.categories }}</span>
          </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="m-info">
            <div class="info-prop">
              <span>所属网格：</span>
              <span>{{ selInfo.gridName }}</span>
            </div>
            <div class="info-prop">
              <span>发生时间：</span>
              <span>{{ selInfo.happenTime }}</span>
            </div>

            <div class="info-prop">
              <span>事件内容：</span>
              <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="info-prop">
              <span>反映渠道：</span>
              <span>{{ selInfo.sourceTypeName || "--" }}</span>
            </div>
            <div class="info-prop">
              <span>地址：</span>
              <span>{{ selInfo.address || "--" }}</span>
            </div>
            <div class="info-prop">
              <span>报事人：</span>
              <span>{{ selInfo.name || "--" }}</span>
            </div>
            <div class="info-prop">
              <span>手机号：</span>
              <span>{{ selInfo.mobile || "--" }}</span>
            </div>
            <div class="info-prop">
              <span>身份证号：</span>
              <span>{{ selInfo.idCard || "--" }}</span>
            </div>

          </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_partrol'">
          <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>
      <a href="#"
         id="popup-goMore"
         class="popup-goMore">更多>>>></a>
    </div>
  </div>

</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import Point from "ol/geom/Point.js";
import Feature from "ol/Feature.js";
import Overlay from 'ol/Overlay';
import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
import { getCenter, boundingExtent } from 'ol/extent.js';
import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';

import nextTick from 'dai-js/tools/nextTick'
import { mapGetters } from "vuex";
import { Loading } from 'element-ui'; //引入Loading服务
import { requestPost } 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";

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)
    });;
  };
})()

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,
      runAgencyArray: [],
      selUserId: '',
      center: [],
      zoom: null,
      parentPolygon: [],

      centerFlag: 'point',//定义中心点的flag  point点 fit 自适应

      coverageTypesList: [//图层类型。五大图层：zhzl：综合治理图层；yjcl：应急处置图层；aqsc：安全生产图层；csgl：城市管理图层；ggfw：公共服务图层
        {
          select: true,
          label: '综合治理图层',
          value: 'zhzl'
        },
        {
          select: true,
          label: '应急处置图层',
          value: 'yjcl'
        },
        {
          select: true,
          label: '安全生产图层',
          value: 'aqsc'
        },
        {
          select: true,
          label: '城市管理图层',
          value: 'csgl'
        },
        {
          select: true,
          label: '公共服务图层',
          value: 'ggfw'
        },
      ],
      categoryList: [],//分类列表
      categoryListshow: [],//处理成一行四列的数据

      selImg: require('../../../../../assets/img/shuju/xuanzhong.png'),
      noSelImg: require('../../../../../assets/img/shuju/weixuan.png'),

      coverageTypes: ['zhzl', 'yjcl', 'aqsc', 'csgl', 'ggfw'],
      categoryKeys: [],
      search: '',
      pageNo: 1,
      pageSize: 10,

      demand: {
        loading: false,
        colList: [
          {
            align: "center",
            width: "25%",
          },
          {
            align: "center",
            width: "75%",
          },

        ],
        header: ["分类", "名称"],
        list: [],
        pageSize: 10,
        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'),


        'co_yjdw': require('../../../../../assets/img/shuju/fiveLayer/co_yjdw.png'),
        'sr_gy': require('../../../../../assets/img/shuju/fiveLayer/sr_gy.png'),
        'sr_gc': require('../../../../../assets/img/shuju/fiveLayer/sr_gc.png'),
        'co_whdw': require('../../../../../assets/img/shuju/fiveLayer/co_whdw.png'),
        'sr_ggld': require('../../../../../assets/img/shuju/fiveLayer/sr_ggld.png'),
        'co_lwh': require('../../../../../assets/img/shuju/fiveLayer/co_lwh.png'),
        'sr_tyc': require('../../../../../assets/img/shuju/fiveLayer/sr_tyc.png'),
        'co_lyjlb': require('../../../../../assets/img/shuju/fiveLayer/co_lyjlb.png'),
        'sr_yjy': require('../../../../../assets/img/shuju/fiveLayer/sr_yjy.png'),
        'co_zaxld': require('../../../../../assets/img/shuju/fiveLayer/co_zaxld.png'),
        'co_qt': require('../../../../../assets/img/shuju/fiveLayer/co_qt.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: {}

    }
  },
  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: {

    //添加覆盖层
    addOverlay () {
      // 使用变量存储弹窗所需的 DOM 对象
      var container = document.getElementById("popup");
      var closer = document.getElementById("popup-closer");
      var content = document.getElementById("popup-content");
      var goMore = document.getElementById("popup-goMore") ? document.getElementById("popup-goMore") : null

      // 创建一个弹窗 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;
      };
      if (goMore) {
        goMore.onclick = function () {
          _that.$emit('lookMore')
        };
      }
    },

    //注册地图点击事件
    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) {

      // info.placeType = 'resi'
      if (!info.id) {
        return false
      }
      this.selPlaceType = info.placeType
      if (info.placeType === 'resi' || info.placeType === 'specil_resi') {//综合治理图层和公共服务图层中的失能人员、失智人员
        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_partrol') {//来自企事业查询的
        this.loadEnterprisePartrol(info)
      }


    },

    async loadResi (info) {
      const url = "/epmetuser/icresiuser/resi-brief/" + 'dd0bd55db0ca4b629c40bc914a08368e'
      // 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' ? '女' : '男' : '--'
        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, true)

      } 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, false)

      } 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: this.eventId,
      });

      if (code === 0) {
        let coordinate = [info.longitude, info.latitude]
        this.selInfo = JSON.parse(JSON.stringify(data))

        this.handleShowPopup(coordinate, false)



      } 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, false)

      } 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, false)

      } 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, false)

      } 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, false)

      } else {
        this.$message.error(msg)
      }
    },

    async loadEnterprisePartrol (info) {
      // const url = "/gov/org/enterprise/detail" 
      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/enterprise/detail"

      const { data, code, msg } = await requestGet(url)

      if (code === 0) {
        // debugger
        let coordinate = [info.longitude, info.latitude]

        this.selInfo = JSON.parse(JSON.stringify(data))

      } 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))

      } 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))
      } else {
        this.$message.error(msg)
      }
    },


    handleShowPopup (coordinate, isShowMore) {
      if (isShowMore) {
        document.getElementById("popup-goMore").style.display = 'block'
      } else {
        document.getElementById("popup-goMore").style.display = 'none'
      }
      // 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.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.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 () {

    },
    //
    handleClickRow (index) {
      let selData = this.tableList[index]
      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 (isPage) {
      // 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;

        data.list = [
          {
            categoryKey: "resi_xfry",
            content: "信访人员",
            id: "123",
            latitude: "36.082230",
            longitude: "120.3868167667315",
            placeType: 'resi'
          },
          {
            categoryKey: "sr_gy",
            content: "公园",
            id: "123",
            latitude: "36.062227",
            longitude: "120.389455",
            placeType: 'public_service'
          },
          {
            categoryKey: "ep_scjgqy",
            content: "生产加工企业",
            id: "123",
            latitude: "36.072214",
            longitude: "120.389455",
            placeType: 'dangerous_chemicals'
          },
          {
            categoryKey: "ps_wss",
            content: "卫生所（室）",
            id: "123",
            latitude: "36.07394505338441",
            longitude: "120.3868167667315",
            placeType: 'city_management'
          }
        ]
        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.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,

        isPage: false
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.iconArrays = data.list
        // this.iconArrays = [
        //   {
        //     categoryKey: "resi_xfry",
        //     content: "信访人员",
        //     id: "123",
        //     latitude: "36.082230",
        //     longitude: "120.3868167667315",
        //     placeType: 'resi'
        //   },
        //   {
        //     categoryKey: "sr_gy",
        //     content: "公园",
        //     id: "123",
        //     latitude: "36.062227",
        //     longitude: "120.389455",
        //     placeType: 'public_service'
        //   },
        //   {
        //     categoryKey: "ep_scjgqy",
        //     content: "生产加工企业",
        //     id: "123",
        //     latitude: "36.072214",
        //     longitude: "120.389455",
        //     placeType: 'dangerous_chemicals'
        //   },
        //   {
        //     categoryKey: "ps_wss",
        //     content: "卫生所（室）",
        //     id: "123",
        //     latitude: "36.07394505338441",
        //     longitude: "120.3868167667315",
        //     placeType: 'city_management'
        //   }
        // ]
        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);

    },

    //返回所选组织
    handleClickAgency (index) {

      const cutNum = this.runAgencyArray.length - index//要减去的长度
      this.runNum = this.runNum - cutNum

      this.orgData = this.runAgencyArray[index]

      for (let i = 0; i < cutNum; i++) {
        this.runAgencyArray.pop()
      }

      this.orgId = this.orgData.id
      this.orgLevel = this.orgData.level
      this.center = this.orgData.center
      this.zoom = this.orgData.zoom

      this.$nextTick(() => {
        this.refreshMap(true)
        this.$forceUpdate()
      });


    },

    //加载组织数据
    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
      });

      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 },
}
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;
}

.popContentTitle {
  font-size: 12px;
  color: #ffffff;
  margin-top: 5px;
}
</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;
}
.popup-goMore {
  margin: 20px 0;
}
.ol-popup-closer:after {
  content: "✖";
  // color: rgba(1, 17, 104, 1);
  color: #fff;
}
</style>