icon样式

src/assets/scss/modules/visual/basicInfoMain.scss

@@ -237,7 +237,7 @@
     .item {
       background-color: #011168;
       margin-top: 12px;
-      width: 234px;
+      width: 244px;
       height: 190px;
       border: 1px solid #037ddc;
       border-radius: 8px;
@@ -266,11 +266,12 @@
 
       .icon_category {
         position: absolute;
-        bottom: 10px;
+        bottom: 14px;
         left: 9px;
-        margin-left: 9px;
+        // margin-left: 7px;
 
         > img {
+          margin-left: 5px;
           width: 21px;
           height: 20px;
         }

src/views/modules/visual/basicinfo/basicInfoMain.vue

@@ -37,10 +37,6 @@
              class="map"></div> -->
       </div>
 
-      <div class="popup"
-           ref="popup">
-      </div>
-
       <div class="div_data">
         <div class="div_search">
           <el-input size="mini"
@@ -112,22 +108,18 @@ 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 { toStringHDMS } from 'ol/coordinate'
 
-import { fromLonLat, toLonLat } from "ol/proj";
 import { mapGetters } from "vuex";
 import { Loading } from 'element-ui'; //引入Loading服务
 import { requestPost } from "@/js/dai/request";
 import BasicInfoCommunity from "./basicInfoCommunity";
 import PeopleSearch from "./peopleSearch";
 import People from "./people";
+import cptCard from "@/views/modules/visual/cpts/card";
 
 
 let loading;//加载动画
 
-let x = 1500
-let y = 700
-
 let map;
 let mapView;
 let gaodeMapLayer;//背景地图图层
@@ -587,42 +579,20 @@ const vueGis = {
         zoom: this.zoom,
         minZoom: this.minZoom
       })
-      // 弹窗
+
-      this.overlay = new Overlay({
-        element: this.$refs.popup, // 弹窗标签，在html里
-        autoPan: true, // 如果弹窗在底图边缘时，底图会移动
-        autoPanAnimation: { // 底图移动动画
-          duration: 250
-        }
-      })
-      console.log(this.overlay)
       //初始化map和地图底图
       //创建地图容器
       map = new Map({
         layers: [gaodeMapLayer],
         //加载瓦片图层数据
         view: mapView,
-        target: 'map',
+        target: 'map'
-        overlays: [this.overlay], // 把弹窗加入地图
         //目标加载到map中
       })
 
-      let that = this
       map.on('singleclick', function (e) {
         console.log(e.coordinate)
-        const coordinate = e.coordinate // 获取坐标
-        const hdms = toStringHDMS(toLonLat(coordinate)) // 转换坐标格式
-
-
-        setTimeout(() => {
-          // 设置弹窗位置
-          // 这里要设置定时器，不然弹窗首次出现，底图会跑偏
-          that.currentCoordinate = hdms // 保存坐标点
-          that.overlay.setPosition(coordinate)
-
-        }, 0)
         // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
-
       })
 
       //去除双击放大效果
@@ -755,7 +725,7 @@ const vueGis = {
     ...mapGetters(["clientHeight"])
 
   },
-  components: { BasicInfoCommunity, PeopleSearch, People },
+  components: { BasicInfoCommunity, PeopleSearch, People, cptCard },
 }
 export default vueGis;
 </script>