epmet-oper-gov/src/views/modules/visual/basicinfo/basicInfoMain.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>

    <people v-if="orgLevel==='people'"
            :uid="selUserId"
            ref="ref_people"></people>

    <div v-show="orgLevel!=='people' "
         class="div_content">

      <basic-info-community v-show="orgLevel==='neighborHood'"
                            @toSubAgency="toSubAgency"
                            ref="ref_community"
                            @refreshInfoList="refreshInfoList"></basic-info-community>

      <div v-show="orgLevel!=='people'  && orgLevel!=='neighborHood'"
           class="div_map"
           id="map"
           ref="map">

        <div class="m-sidebar">
          <div class="wrap"
               :class="[{'wrap-hidden':!showAgencyList}]">
            <div @click="hideAgencyList"
                 class="arrow_tip">
              <img src="@/assets/img/modules/visual/popup.png"
                   alt />
            </div>

            <div class="div_agency_list">
              <div class="agency_main">
                <el-scrollbar style="height:98%"
                              wrap-style="overflow-x:hidden">

                  <div v-if="subAgencyArray.length>0"
                       class="agency_list">
                    <div v-for="(item,index) in subAgencyArray"
                         :key="index"
                         @click="clickAgencyItem(item,index)"
                         :class="['agency_item',{'agency_item_on':index%2 ==0}]">
                      <div class="agency_item_name">{{item.name}}</div>

                    </div>
                  </div>
                  <div v-else>
                    <img src="@/assets/img/modules/visual/noData.png"
                         alt=""
                         srcset=""
                         class="no-data-img" />
                  </div>
                </el-scrollbar>

              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="div_data">
        <!-- <div @click="handleSearch"
             class="div_search">
          <div class="div_search_left">
            <i slot="prefix"
               class="icon">
              <img src="../../../../assets/img/modules/visual/sousuo.png"
                   alt />
            </i>
            <span>请输入姓名</span>
          </div>

          <div class="btn">搜索</div>

        </div> -->

        <div class="div_info">
          <el-scrollbar style="height:98%">
            <div class="info_tip">
              <img src="../../../../assets/img/shuju/title-tip.png"
                   alt />
              <div class="tip_title">分类列表</div>
            </div>

            <div class="info_loading"
                 v-if="infoLoading">
              <screen-loading>加载中</screen-loading>
            </div>

            <div v-if="!infoLoading"
                 class="info_list">
              <div v-for="(item,index) in listDatashow"
                   :key="index"
                   class="item">
                <div class="list_item">
                  <div v-for="(colItem,colIndex) in item"
                       :key="colIndex"
                       class="list_item_col"
                       @click="handleTo(colItem)">
                    <img :src="colItem.dataIcon"
                         alt />
                    <div class="item_content">
                      <div class="item_label">{{colItem.label}}</div>
                      <div class="item_count">{{colItem.count}}</div>
                    </div>

                  </div>
                </div>
                <div :class="['item_line',{'last_line':index==(listDatashow.length-1)}]"></div>
              </div>

            </div>
          </el-scrollbar>
        </div>

      </div>
    </div>

  </div>

</template>

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

import nextTick from 'dai-js/tools/nextTick'
import { mapGetters } from "vuex";
import { Loading } from 'element-ui'; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import BasicInfoCommunity from "./basicInfoCommunity";

import People from "./people";
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 {
      showAgencyList: false,
      agencyFadeIn: true,
      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 自适应

    }
  },
  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.loadList()

  },
  methods: {
    handleTo (item) {
      this.$router.push({
        path: `/main-shuju/visual-basicinfo-people-list`,
        query: {
          columnName: item.columnName,
          label: item.label,
          id: this.orgId,
          level: this.orgLevel
        }
      });
    },
    hideAgencyList () {
      this.showAgencyList = !this.showAgencyList
      // if (this.showAgencyList) {
      //   this.agencyFadeIn = false
      //   setTimeout(() => {
      //     this.showAgencyList = false
      //   }, 1000)

      // } else {
      //   this.agencyFadeIn = true
      //   this.showAgencyList = true
      // }


    },

    //获取右侧infolist数据
    async loadList () {
      this.infoLoading = true
      const url = "/epmetuser/statsresiwarn/list"
      // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/statsresiwarn/list"
      let params = {
        id: this.orgId,
        level: this.orgLevel
      }

      const { data, code, msg } = await requestPost(url, params)
      this.infoLoading = false
      if (code === 0) {
        this.listData = data
        // this.listData = this.listData1
        this.listDatashow = []
        let itemArray = []
        this.listData.forEach((item, index) => {
          if (!item.dataIcon) {
            item.dataIcon = require('../../../../assets/img/modules/visual/dibao.png')
          }

          if (index % 2 === 0) {//偶数
            itemArray.push(item)
          } else {
            itemArray.push(item)
            this.listDatashow.push(itemArray)
            itemArray = []
          }

        });


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

    //子组件点击房间，刷新右侧list
    refreshInfoList (selId, type) {
      this.orgId = selId
      this.level = ''
    },

    //点击组织列表数据
    clickAgencyItem (item, index) {

      let e = {
        selected: []
      }
      let one = {
        values_: item
      }
      e.selected.push(one)

      this.toSubAgency('polygon', e)
    },

    //下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区）    people 点击详情
    async toSubAgency (type, e, searchName) {

      //点击小区neighborHood显示楼栋，点击非小区，进入下一级地图
      if (type === 'people') {
        this.runNum++
        this.runAgencyArray.push(this.orgData)
        this.orgLevel = 'people'
        this.selUserId = e
        this.orgId = ''
        this.orgData = {
          id: '',
          level: 'people',
          name: '人员档案'
        }
        this.searchName = searchName

      } else {

        if (!e) {
          return false
        }
        if (!e.selected[0]) {
          return false
        }
        this.runNum++
        this.orgData.center = map.getView().getCenter()
        this.orgData.zoom = map.getView().getZoom()
        console.log('center', map.getView().getCenter())
        console.log('zoom', map.getView().getZoom())

        this.runAgencyArray.push(this.orgData)

        this.subAgencyArray.forEach(item => {
          if (item.id === e.selected[0].values_.id) {
            this.orgId = item.id
            this.orgLevel = item.level
            this.orgData = item
          }
        });

        if (this.orgLevel === 'neighborHood') {
          this.loadList()
          this.$nextTick(() => {
            // 小区id，小区名称
            this.$refs.ref_community.initData(this.orgData.id, this.orgData.name);
          });

        } else {
          this.refreshMap(true)
        }

      }

    },

    //刷新地图
    async refreshMap (isRefreshView) {

      //加载组织数据
      await this.loadOrgData()

      //绘制父级组织数据
      this.loadParentPolygon()
      //绘制本级组织数据
      this.loadPolygon(this.subAgencyArray)

      //重置地图中心点

      // if (isRefreshView) {
      this.setMapLocation()

      // }

      await this.loadList()

    },

    //设置地图定位的中心点和缩放级别
    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) {
      //如果是从小区返回，清空一下小区的人员显示列表
      if (this.orgLevel === 'neighborHood') {

        this.$nextTick(() => {
          // 小区id，小区名称
          this.$refs.ref_community.handleCloseAllUser();
        });

      }
      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

      if (this.orgLevel === 'people') {

      }

      else if (this.orgLevel === 'neighborHood') {//显示小区

      } else {

        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
      } else {
        this.zoom = 11
      }

    },

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

      map.on('singleclick', function (e) {
        // console.log(e.coordinate)
        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
      })

      //去除双击放大效果
      const dblClickInteraction = map
        .getInteractions()
        .getArray()
        .find(interaction => {
          return interaction instanceof DoubleClickZoom;
        });
      map.removeInteraction(dblClickInteraction);

    },
    //添加变电站标注图层
    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 => {
        this.toSubAgency('polygon', e)
      });

    },

    addIconLayer () {
      iconSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
      });

      iconLayer = new VectorLayer({
        source: iconSource,
        zIndex: 70
      });

      map.addLayer(iconLayer);

    },

    //取随机数
    getRndBetween (lowerLimit, upperLimit) {
      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
    },

    //开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, //是否锁定
        text: '正在加载……', //加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' //背景颜色
      });

    },

    //结束加载动画
    endLoading () {
      //clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  props: {

    // 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: { BasicInfoCommunity, People, cptCard, ScreenLoading },
}
export default vueGis;
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/basicInfoMain.scss"
  scoped
></style>

<style lang="scss" >
.div_content {
  .ol-viewport {
    border-radius: 5px;
  }
}
.ol-overlaycontainer-stopevent {
  display: none;
}
</style>  

<style lang="scss" scoped>
</style>