From b65febdb4b558abd4247b58232bcb444837d3a85 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Thu, 9 Dec 2021 14:21:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 .env.production.sit                           |   4 +-
 public/index.html                             |   3 +-
 .../visual/communityGovern/processAnalyze.vue |   2 +
 .../communityGovern/processPieOption.js       |   2 +-
 .../{basicInfoMain.vue => index copy.vue}     |  35 +-
 .../visual/components/screen-map/index.vue    | 612 ++++++++++++++++++
 7 files changed, 635 insertions(+), 27 deletions(-)
 rename src/views/modules/visual/components/screen-map/{basicInfoMain.vue => index copy.vue} (94%)
 create mode 100644 src/views/modules/visual/components/screen-map/index.vue

diff --git a/.env.development b/.env.development
index 5431a9bc..2ad1156b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,6 @@
 NODE_ENV=development
-# VUE_APP_API_SERVER =  http://118.190.150.119:41080/api
-VUE_APP_API_SERVER =  http://192.168.1.140/api
+VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
+# VUE_APP_API_SERVER =  http://192.168.1.140/api
 # VUE_APP_API_SERVER =  http://192.168.51.36:8080/api
 # VUE_APP_API_SERVER =  https://epmet-dev.elinkservice.cn/api
 VUE_APP_NODE_ENV=dev 
diff --git a/.env.production.sit b/.env.production.sit
index 6e5b4e9b..de86de77 100644
--- a/.env.production.sit
+++ b/.env.production.sit
@@ -1,5 +1,5 @@
 NODE_ENV=production
-# VUE_APP_API_SERVER =  http://118.190.150.119:41080/api
-VUE_APP_API_SERVER =  http://192.168.1.140/api
+VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
+# VUE_APP_API_SERVER =  http://192.168.1.140/api
 VUE_APP_NODE_ENV=prod:sit
 VUE_APP_PUBLIC_PATH=epmet-oper
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index a156e939..99efda61 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,7 +36,8 @@
   <!-- 开发环境 -->
   <% if (process.env.VUE_APP_NODE_ENV==='dev' ) { %>
     <script>
-     window.SITE_CONFIG['apiURL'] = 'http://192.168.1.140/api'
+    //  window.SITE_CONFIG['apiURL'] = 'http://192.168.1.140/api'
+     window.SITE_CONFIG['apiURL'] = 'https://epmet-test.elinkservice.cn/api'
        // window.SITE_CONFIG['apiURL'] = 'http://118.190.150.119:41080/api'
       // window.SITE_CONFIG['apiURL'] = 'https://epmet-dev.elinkservice.cn/api'
     </script>
diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue
index 1517c453..10f8da5d 100644
--- a/src/views/modules/visual/communityGovern/processAnalyze.vue
+++ b/src/views/modules/visual/communityGovern/processAnalyze.vue
@@ -73,6 +73,7 @@ import { requestPost } from "@/js/dai/request";
 import cptCard from "@/views/modules/visual/cpts/card";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
+import screenMap from "@/views/modules/visual/components/screen-map";
 
 import { pieOption } from './processPieOption.js'
 import { lineOption } from './processLineOption.js'
@@ -397,6 +398,7 @@ export default {
     cptCard,
     cptTb,
     screenEchartsFrame,
+    screenMap,
   },
 
   watch: {
diff --git a/src/views/modules/visual/communityGovern/processPieOption.js b/src/views/modules/visual/communityGovern/processPieOption.js
index 0ab2bfd2..84062915 100644
--- a/src/views/modules/visual/communityGovern/processPieOption.js
+++ b/src/views/modules/visual/communityGovern/processPieOption.js
@@ -81,7 +81,7 @@ const center= ['50%', '200px']
         avoidLabelOverlap: false,
         // top: top + '%',
         // height: '80%',
-        selectedMode: 'single',
+        // selectedMode: 'single',
         left: 'center',
         width: 400,
         label: {
diff --git a/src/views/modules/visual/components/screen-map/basicInfoMain.vue b/src/views/modules/visual/components/screen-map/index copy.vue
similarity index 94%
rename from src/views/modules/visual/components/screen-map/basicInfoMain.vue
rename to src/views/modules/visual/components/screen-map/index copy.vue
index 6f48ebd4..09217e02 100644
--- a/src/views/modules/visual/components/screen-map/basicInfoMain.vue
+++ b/src/views/modules/visual/components/screen-map/index copy.vue	
@@ -38,10 +38,10 @@ let loading;//加载动画
 let map;
 let mapView;
 let gaodeMapLayer;//背景地图图层
-let polygonLayer;//变电站标注图层
+let polygonLayer;//区域标注图层
 let iconLayer; // icon标注图层
 let iconSource; // icon
-let polygonSource;//变电站标注多边形
+let polygonSource;//标注多边形
 let select;//选中标注
 
 
@@ -120,18 +120,6 @@ const vueGis = {
       currentCoordinate: null,
       overlay: null,
 
-      //右侧搜索
-      searchName: "",
-
-      //右侧列表
-      listData: [],//得到的数据
-      listDatashow: [],//处理成一行两列的数据
-
-      //下钻层级记录
-      runNum: 0,
-      runAgencyArray: [],
-      selUserId: '',
-
 
     }
   },
@@ -275,7 +263,7 @@ const vueGis = {
           let oneArray = [x, y]
           this.iconCoordinators.push(oneArray)
           // debugger
-          //视频监控样式
+
           let oneCctv = new Feature({
             geometry: new Point([x, y]),
             id: oneIcon.id_,
@@ -290,8 +278,6 @@ const vueGis = {
               // 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_.index - 1]
             })
           });
@@ -468,11 +454,18 @@ const vueGis = {
     },
   },
   props: {
+    //是否显示多边形图层
+    showPolygonLayer: {
+      type: Boolean,
+      default: false
+    },
+
+    //是否显示标注
+    showIconLayer: {
+      type: Boolean,
+      default: false
+    }
 
-    // vueFlag: {
-    //   type: String,
-    //   default: "alarm"
-    // }
   },
   computed: {
 
diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue
new file mode 100644
index 00000000..4dfac221
--- /dev/null
+++ b/src/views/modules/visual/components/screen-map/index.vue
@@ -0,0 +1,612 @@
+<template>
+  <div style="position: relative">
+
+    <div class="div_map"
+         id="map"
+         ref="map">
+      <!-- <div id="map"
+             class="map"></div> -->
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile.js';
+import XYZ from 'ol/source/XYZ.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+import Point from "ol/geom/Point.js";
+import Feature from "ol/Feature.js";
+import Overlay from 'ol/Overlay';
+import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
+import { getCenter, boundingExtent } from 'ol/extent.js';
+import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
+
+import { mapGetters } from "vuex";
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+
+
+
+let loading;//加载动画
+
+let map;
+let mapView;
+let gaodeMapLayer;//背景地图图层
+let polygonLayer;//区域多边形标注图层
+let polygonSource;//标注多边形
+
+let polIconLayer; // 区域icon标注图层
+let polIconSource; // icon
+
+let iconLayer; // icon图层
+let iconSource; // icon
+
+let select;//选中标注
+
+
+//url图标
+
+
+let textColorArray = [
+  'rgba(236, 69, 4, 0.66)',
+  'rgba(0, 146, 238, 0.75)',
+  'rgba(238, 151, 0, 0.8)'
+];
+let polygonColorArray = [
+  'rgba(210, 2, 2, 0.24)',
+  'rgba(43, 231, 253, 0.25)',
+  'rgba(183, 185, 0, 0.16)'
+];
+//变电站标注的文字样式
+var createTextStyle = function (feature) {
+  return new Text({
+    textAlign: undefined,
+    font: "18px Arial",
+    //fontFamily: "Courier New, monospace",
+    // fontWeight: "bold",
+    text: feature.values_.name,
+    backgroundFill: new Fill({
+      // color: 'rgba(0, 146, 238, 0.75)'
+      color: textColorArray[feature.values_.index - 1]
+    }),
+    padding: [4, 10, 4, 10],
+    //text: "变电站名称",
+    fill: new Fill({ color: "#ffffff" }),
+    // stroke: new Stroke({ color: "#ffffff", width: 3 }),
+    offsetY: -30,
+    offsetX: -50,
+    overflow: true,
+  });
+};
+
+//变电站标注样式
+
+var polygonStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      fill: new Fill({
+        // color: [255, 255, 255, 0.3]
+        color: polygonColorArray[feature.values_.index - 1]
+      }),
+      stroke: new Stroke({
+        color: polygonColorArray[feature.values_.index - 1],
+        width: 3
+      }),
+
+      text: createTextStyle(feature)
+    });;
+  };
+})()
+
+const vueGis = {
+  name: 'HomeMap',
+  data () {
+    return {
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      mapInfo: {
+        agencyLevel: "community",
+        coordinates: "120.37342346270151,36.0950221490494,120.39931465567633,36.09693067926868,120.39740612545705,36.09113306860255,120.39762218548188,36.08911650837086,120.39999884575495,36.0859836380109,120.4010071258708,36.080978247435795,120.39258078490263,36.08094223743166,120.38537878407514,36.08303081767163,120.37616022301596,36.082382637597156,120.37342346270151,36.0950221490494",
+        id: "6e511da6816e53af4cda952365a26eb9",
+        latitude: 36.072227,
+        level: "agency",
+        longitude: 120.389455,
+        name: "南宁社区",
+      },
+
+      polygonArray: [
+        {
+          agencyLevel: "grid",
+          coordinates: "120.37421528296863,36.085017737014525,120.37551227771064,36.08181339174796,120.38108173804676,36.08303409283569,120.3852397566111,36.08318668276358,120.38539234391965,36.090816077003794,120.37410084117755,36.09096866431234,120.37421528296863,36.085017737014525",
+          id: "2a278c0ceb863359d263fda7aabf6752",
+          latitude: 36.072227,
+          level: "grid",
+          longitude: 120.389455,
+          name: "第三网格",
+        },
+        {
+          agencyLevel: "grid",
+          coordinates: "120.38577111171519,36.095762169637716,120.38544318588274,36.08317796726519,120.39339541546589,36.08080049372144,120.40122467708379,36.08026761565102,120.40188052874869,36.08276805856732,120.39929810296697,36.086990119140545,120.39757648953199,36.08981849070392,120.39901116927089,36.0943274884915,120.3977404524482,36.096418022709926,120.38577111171519,36.095762169637716",
+          id: "94227891bc4ad5f40cb95081761592d9",
+          latitude: 36.072227,
+          level: "grid",
+          longitude: 120.389455,
+          name: "南宁第二网格",
+        },
+        {
+          agencyLevel: "grid",
+          coordinates: "120.3736430792519,36.09505039184175,120.373948253869,36.09119754789451,120.38543049205646,36.09115940106737,120.38577381481036,36.0960803587938,120.3736430792519,36.09505039184175",
+          id: "a772a325e022484ef53e4a7d679726f1",
+          latitude: 36.072227,
+          level: "grid",
+          longitude: 120.389455,
+          name: "南宁第一网格",
+        },
+      ],
+
+      iconArrays: [
+        {
+          id: "2a278c0ceb863359d263fda7aabf6752",
+          latitude: 36.072227,
+          longitude: 120.389455,
+          level: "grid",
+          name: "第三网格",
+        },
+        {
+          id: "2a278c0ceb863359d263fda7aabf6753",
+          latitude: 36.072227,
+          longitude: 120.389455,
+          level: "grid",
+          name: "南宁第二网格",
+        },
+        {
+          id: "2a278c0ceb863359d263fda7aabf6742",
+          latitude: 36.072227,
+          longitude: 120.389455,
+          level: "grid",
+          name: "南宁第一网格",
+        }
+      ],
+
+      //policon图标样式
+      polIconUrlArray: [
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+      ],
+      //icon图标样式
+      iconUrlArray: [
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+        'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+      ],
+
+    }
+  },
+  async mounted () {
+
+
+  },
+  methods: {
+    //加载地图
+    loadMap (mapInfo) {
+      this.mapInfo = mapInfo
+
+      //初始化地图
+      this.initMap()
+
+      if (this.showPolygonLayer) {
+        //初始化多边形标注图层
+        this.initPolygonLayer()
+        //加载当前园区的标注
+        this.loadPolygon()
+      }
+      if (this.showPolIconLayer) {
+
+        //初始化多边形标注图层
+        this.initPolygonLayer()
+        //加载当前园区的标注
+        this.loadPolygon()
+      }
+
+      if (this.showIconLayer) {
+        //初始化icon图层
+        this.initIconLayer()
+      }
+
+
+    },
+
+    //刷新地图
+    async refreshMap (isRefreshView) {
+
+      //加载组织数据
+      await this.loadOrgData()
+
+      //加载当前园区的标注
+      await this.loadPolygon()
+
+      //重置地图中心点
+      if (isRefreshView) {
+        this.setMapLocation()
+        mapView.setCenter(this.centerPoint);
+        mapView.setZoom(this.zoom);
+      }
+
+
+    },
+
+    //加载多边形
+    loadPolygon () {
+      polygonSource.clear()//清空多边形标注
+
+      let featureData = []//多边形数据数据
+      if (polygonArray && polygonArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        polygonArray.forEach(polygonItem => {
+
+          if (polygonItem.coordinates && polygonItem.coordinates !== '') {//如果有坐标
+            let urlNum = this.getRndBetween(1, 3)
+
+            oneData = {
+              type: 'Feature',
+              id: polygonItem.id,
+              properties: {
+                id: polygonItem.id,
+                level: polygonItem.level,
+                name: polygonItem.name,
+                index: urlNum//颜色随机的索引
+              },
+              geometry: {
+                type: 'Polygon',
+                coordinates: [],
+              },
+            }
+            let coorArray = polygonItem.coordinates.split(',')//坐标数组
+
+            let itemArray = []//单个点位的[lon,lat]，数组
+            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
+
+            coorArray.forEach((item, index) => {
+              itemArray.push(item)
+              if (index % 2 == 0) {//偶
+
+              } else {//奇
+                polygonArray.push(itemArray)
+                itemArray = []
+              }
+
+            });
+            oneData.geometry.coordinates.push(polygonArray)
+            featureData.push(oneData)
+          }
+        });
+      }
+
+      if (featureData && featureData.length > 0) {
+        var geojsonObject = {
+          'type': 'FeatureCollection',
+          'features': featureData
+        };
+        let feature = (new GeoJSON()).readFeatures(geojsonObject)
+
+        polygonSource.addFeatures(feature)
+
+        if (this.showPolIconLayer) {
+          this.loadPolIcon(feature)
+        }
+
+      }
+
+    },
+
+    //加载多边形的icon
+    loadPolIcon (feature) {
+      let polyIconFeatures = [];
+      feature.forEach(oneIcon => {
+
+        var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
+        // var center = getCenter(extent);   //获取边界区域的中心位置
+        //添加标注
+        let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
+        let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2
+
+        let polyIcon = new Feature({
+          geometry: new Point([x, y]),
+          id: oneIcon.id_,
+          properties: {
+            type: "icon",
+            id: oneIcon.id_
+          }
+        });
+
+        let polyIconStyle = new Style({
+          image: new Icon({
+            // anchor: [0.5, 0.5],
+            // imgSize: [32, 32],
+            scale: 0.5,
+            src: polIconUrlArray[oneIcon.values_.index - 1]
+          })
+        });
+
+        polyIcon.setStyle(polyIconStyle);
+        polyIconFeatures.push(polyIcon);
+
+      });
+
+      polIconSource.addFeatures(polyIconFeatures);
+    },
+
+    //加载icon图标
+    loadIcon () {
+      iconSource.clear()//清空多边形标注
+      if (this.iconArrays && this.iconArrays.length > 0) {
+
+        let iconFeatures = [];
+        this.iconArrays.forEach(oneIcon => {
+
+          //添加标注
+          let iconItem = new Feature({
+            geometry: new Point([oneIcon.longitude, oneIcon.latitude]),
+            id: oneIcon.id,
+            properties: {
+              type: "icon",
+              id: oneIcon.id
+            }
+          });
+
+          let iconStyle = new Style({
+            image: new Icon({
+              // anchor: [0.5, 0.5],
+              // imgSize: [32, 32],
+              scale: 0.5,
+              src: iconUrlArray[oneIcon.values_.index - 1]
+            })
+          });
+
+          iconItem.setStyle(iconStyle);
+          iconFeatures.push(iconItem);
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+    },
+
+    //初始化地图
+    initMap () {
+      this.setMapLocation()
+      gaodeMapLayer = new TileLayer({
+        title: "地图",
+        source: new XYZ({
+          //指定url瓦片
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+          wrapX: true//x方向平铺，也可以选择false
+        }),
+        zIndex: 20
+      });
+
+      mapView = new View({
+        //中心点坐标
+        center: this.centerPoint,
+        // projection: 'EPSG:3857',
+        projection: 'EPSG:4326',
+        zoom: this.zoom,
+        minZoom: this.minZoom
+      })
+
+      //初始化map和地图底图
+      //创建地图容器
+      map = new Map({
+        layers: [gaodeMapLayer],
+        //加载瓦片图层数据
+        view: mapView,
+        target: 'map'
+        //目标加载到map中
+      })
+
+      map.on('singleclick', function (e) {
+        // console.log(e.coordinate)
+        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
+      })
+
+      //去除双击放大效果
+      const dblClickInteraction = map
+        .getInteractions()
+        .getArray()
+        .find(interaction => {
+          return interaction instanceof DoubleClickZoom;
+        });
+      map.removeInteraction(dblClickInteraction);
+
+    },
+    //设置地图定位的中心点和缩放级别
+    setMapLocation () {
+      this.centerPoint = []
+
+      if (this.mapInfo.longitude && this.mapInfo.latitude) {
+        this.centerPoint.push(this.mapInfo.longitude)
+        this.centerPoint.push(this.mapInfo.latitude)
+      }
+
+      this.setZoom(this.mapInfo.agencyLevel)
+    },
+
+    //根据组织层级设置缩放级别
+    setZoom (agencyLevel) {
+      if (agencyLevel === 'district') {
+        this.zoom = 14
+      } else if (agencyLevel === 'street') {
+        this.zoom = 15
+      } else if (agencyLevel === 'community') {
+        this.zoom = 16
+      }
+
+    },
+
+
+    //初始化多边形标注图层
+    initPolygonLayer () {
+      polygonSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      polygonLayer = new VectorLayer({
+        source: polygonSource,
+        style: polygonStyleFunction,
+        zIndex: 50
+      });
+
+      //选中多边形后的样式
+      var overlayStyle = (function () {
+
+        return function (feature) {
+          var styles = {};
+          styles['Polygon'] = [
+            new Style({
+              stroke: new Stroke({
+                color: '#ec9000',
+                width: 2
+              })
+            }),
+
+            new Style({
+              fill: new Fill({
+                color: 'rgba(0, 0, 255, 0.1)'
+              })
+            }),
+            new Style({
+              text: createTextStyle(feature)
+            })
+          ];
+          styles['MultiPolygon'] = styles['Polygon'];
+          return styles[feature.getGeometry().getType()];
+        };
+      })();
+
+      select = new Select({
+        style: overlayStyle
+      });
+
+
+      map.addLayer(polygonLayer)
+      map.addInteraction(select);
+
+    },
+
+    //初始化多边形icon图层
+    initPolIconLayer () {
+      polIconSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      polIconLayer = new VectorLayer({
+        source: polIconSource,
+        zIndex: 70
+      });
+
+      map.addLayer(polIconLayer);
+
+    },
+
+    //初始化icon图层
+    initIconLayer () {
+      iconSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      iconLayer = new VectorLayer({
+        source: iconSource,
+        zIndex: 90
+      });
+
+      map.addLayer(iconLayer);
+
+    },
+
+    //取随机数
+    getRndBetween (lowerLimit, upperLimit) {
+      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
+    },
+
+    //开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    endLoading () {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+  props: {
+    //是否显示多边形图层
+    showPolygonLayer: {
+      type: Boolean,
+      default: false
+    },
+    //是否显示多边形icon图层
+    showPolIconLayer: {
+      type: Boolean,
+      default: false
+    },
+
+    //是否显示标注
+    showIconLayer: {
+      type: Boolean,
+      default: false
+    }
+
+  },
+  computed: {
+
+    mapHeight () {
+      return this.clientHeight - 120;
+
+    },
+
+    ...mapGetters(["clientHeight"])
+
+  },
+  components: {},
+}
+export default vueGis;
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_content {
+  .ol-viewport {
+    border-radius: 5px;
+  }
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+
+.el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
+</style>   
\ No newline at end of file