区域化党建地图修改

src/views/modules/visual/communityParty/community.vue

@@ -6,8 +6,7 @@
              src="../../../../assets/img/shuju/title-tip.png" />
         <div class="title-label">
           区域化党建&nbsp;&nbsp;
-          <el-cascader 
-            v-model="selectAgency"
+          <el-cascader v-model="selectAgency"
                        :options="propTree"
                        :props="{ checkStrictly: true }"
                        :show-all-levels="false"
@@ -37,8 +36,7 @@
                           prefix-icon="el-icon-caret-bottom"
                           value-format="yyyy-MM-dd HH:mm:ss"
                           :clearable="false"
-                            :default-time="['00:00:00', '23:59:59']"
-                            >
+                          :default-time="['00:00:00', '23:59:59']">
           </el-date-picker>
         </div>
       </div>
@@ -48,7 +46,9 @@
       </div>
       <div class="box-wr box-wr-400">
         <div class="box-left">
-          <div v-for="(item, index) in cateInfo" :key="index" class="box-left-item">
+          <div v-for="(item, index) in cateInfo"
+               :key="index"
+               class="box-left-item">
             <div class="box-label">{{ item.label }}</div>
             <div class="box-num">{{ item.value }}</div>
           </div>
@@ -113,7 +113,8 @@
       </div>
 
     </cpt-card>
-    <dialog-info v-show="showedMoreInfo" :info="detailInfo"
+    <dialog-info v-show="showedMoreInfo"
+                 :info="detailInfo"
                  @close="showedMoreInfo = false" />
   </div>
 </template>
@@ -166,34 +167,7 @@ export default {
       selectAgency: '',
       unitList: [],
       propTree: [],
-      partyItem: [
-        {
-          name: '楼宇党建',
-          value: 1,
-          color: 'rgba(250, 32, 10, 1)',
-          icon: require('../../../../assets/img/shuju/measure/ly@2x.png')
-        }, {
-          name: '机关直属部门',
-          value: 2,
-          color: 'rgba(65, 181, 104, 1)',
-          icon: require('../../../../assets/img/shuju/measure/jgzs@2x.png')
-        }, {
-          name: '两新党建',
-          value: 3,
-          color: 'rgba(251, 177, 4, 1)',
-          icon: require('../../../../assets/img/shuju/measure/lxdj@2x.png')
-        }, {
-          name: '辖区单位',
-          value: 4,
-          color: 'rgba(80, 194, 237, 1)',
-          icon: require('../../../../assets/img/shuju/measure/xq@2x.png')
-        }, {
-          name: '其他',
-          value: 5,
-          color: 'rgba(192, 21, 195, 1)',
-          icon: require('../../../../assets/img/shuju/measure/qita.png')
-        }
-      ],
+      partyItem: [],
       cateInfo: [],
       //地图相关数据
       isfirstInit: true,//记录是否是首次加载地图
@@ -256,7 +230,7 @@ export default {
     await this.getMapUnitList(this.agencyId)
   },
   watch: {
-    timeRange(val) {
+    timeRange (val) {
       console.log('val-www', val)
       this.getList(this.agencyId);
     }
@@ -293,7 +267,7 @@ export default {
       }
       this.visibleLoading = false
     },
-    async getAgencyList() {
+    async getAgencyList () {
       // const url = "/gov/org/customeragency/staffinagencylist";
       // const url = '/gov/org/customeragency/agencygridtree'
       const url = '/gov/org/customeragency/staffinagencylist'
@@ -314,7 +288,7 @@ export default {
         this.$message.error(msg)
       }
     },
-    getTreeData(data){
+    getTreeData (data) {
       if (!Array.isArray(data)) return []
       let arr = data.map(item => {
         let _item = {}
@@ -330,7 +304,8 @@ export default {
             label: item.agencyName,
             value: item.agencyId + '-' + item.level,
             level: item.level,
-            children: this.getTreeData(item.subAgencyList)}
+            children: this.getTreeData(item.subAgencyList)
+          }
         } else {
           _item = {
             label: item.agencyName,
@@ -373,19 +348,19 @@ export default {
         const colorItem = {
           0: {
             color: 'rgba(250, 32, 10, 1)',
-            icon: require('../../../../assets/img/shuju/measure/ly@2x.png')
+            icon: require('../../../../assets/img/shuju/measure/lxdj.png')
           },
           1: {
             color: 'rgba(251, 177, 4, 1)',
-            icon: require('../../../../assets/img/shuju/measure/lxdj@2x.png')
+            icon: require('../../../../assets/img/shuju/measure/lxzz.png')
           },
           2: {
             color: 'rgba(80, 194, 237, 1)',
-            icon: require('../../../../assets/img/shuju/measure/xq@2x.png')
+            icon: require('../../../../assets/img/shuju/measure/qydw.png')
           },
           3: {
             color: 'rgba(65, 181, 104, 1)',
-            icon: require('../../../../assets/img/shuju/measure/jgzs@2x.png')
+            icon: require('../../../../assets/img/shuju/measure/jgzs.png')
           },
           4: {
             color: 'rgba(192, 21, 195, 1)',
@@ -417,11 +392,11 @@ export default {
         this.$message.error(msg)
       }
     },
-    handleCascader(val) {
+    handleCascader (val) {
       console.log('val-vvv', val)
       if (val.length > 0) {
         const _arr = val[val.length - 1].split('-')
-        const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+        const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
         this.getList(_arr[0])
         this.getMapUnitList(_arr[0])
         this.getCateCount(_arr[0])
@@ -429,14 +404,14 @@ export default {
       }
 
     },
-    initTime() {
+    initTime () {
       const end = new Date();
       const start = new Date();
       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
       console.log('time-rtt', this.timeFormat(start), this.timeFormat(end))
       this.timeRange = [this.timeFormat(start), this.timeFormat(end)]
     },
-    timeFormat(date) {
+    timeFormat (date) {
       if (!date || typeof date === 'string') {
         return false
       }
@@ -554,11 +529,11 @@ export default {
 
 
         this.iconUrlArray = [
-          require('../../../../assets/img/shuju/measure/ly@2x.png'),//未处理
-          require('../../../../assets/img/shuju/measure/jgzs@2x.png'),//已处理
-          require('../../../../assets/img/shuju/measure/lxdj@2x.png'),//已处理
-          require('../../../../assets/img/shuju/measure/xq@2x.png'),//已处理
-          require('../../../../assets/img/shuju/measure/qita.png')//已处理
+          require('../../../../assets/img/shuju/measure/lxdj.png'),//楼宇党建
+          require('../../../../assets/img/shuju/measure/lxzz.png'),//两新组织
+          require('../../../../assets/img/shuju/measure/qydw.png'),//区域单位党建
+          require('../../../../assets/img/shuju/measure/jgzs.png'),//机关直属部门
+          require('../../../../assets/img/shuju/measure/qita.png')//其他
         ]
 
 
@@ -589,7 +564,7 @@ export default {
     clickProject (feature) {
       console.log('标注信息', feature.values_.properties)
     },
-    async handleLook(val) {
+    async handleLook (val) {
 
       this.detailId = val.id
       await this.getDetail(val.id)
@@ -636,7 +611,8 @@ export default {
     &::-webkit-scrollbar-corner,
       /* 滚动条角落 */
     &::-webkit-scrollbar-thumb,
-    &::-webkit-scrollbar-track {      /*滚动条的轨道*/
+    &::-webkit-scrollbar-track {
+      /*滚动条的轨道*/
       border-radius: 4px;
     }
 
@@ -644,13 +620,13 @@ export default {
     &::-webkit-scrollbar-track {
       /* 滚动条轨道 */
 
-      background: rgba(12, 129, 254, .24);
+      background: rgba(12, 129, 254, 0.24);
       // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
     }
 
     &::-webkit-scrollbar-thumb {
       /* 滚动条手柄 */
-      background: linear-gradient(270deg, #0063FE, #0095FF);
+      background: linear-gradient(270deg, #0063fe, #0095ff);
     }
   }
 }
@@ -666,7 +642,6 @@ export default {
     margin-right: 6px;
   }
   .title-label {
-
     font-size: 20px;
     font-weight: 800;
     ::v-deep .el-input {
@@ -713,7 +688,6 @@ export default {
     background: #2865fa;
     border-radius: 50%;
   }
-  
 }
 .second-select {
   margin: 0 10px 0 10px;
@@ -758,10 +732,10 @@ export default {
       right: 5px;
     }
   }
-  }
-  .second-select:last-child {
+}
+.second-select:last-child {
   margin-left: 0;
-  }
+}
 .box-wr {
   display: flex;
   box-sizing: border-box;

src/views/modules/visual/components/screen-map/index.vue

@@ -1,5 +1,25 @@
 <template>
   <div class="div_content_map">
+    <!-- <div>
+      <el-input v-model="input_lat"></el-input>
+      <el-input v-model="input_lon"></el-input>
+      <el-button @click="showPosition"></el-button>
+    </div> -->
+
+    <!-- <div id="mouse-position"
+         style="
+        color: #fff;
+        position: absolute;
+        bottom:10px;
+        right:10px;
+        z-index: 10000000;
+        width: 200px;
+        line-height: 30px;
+        background: rgba(0,0,0,0.5);
+    "> 
+
+  </div>-->
+
     <div class="div_map"
          id="map"
          ref="map">
@@ -27,12 +47,15 @@ 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 { 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 { altKeyOnly, click, pointerMove } from 'ol/events/condition';
 import { getDistance } from 'ol/sphere';
 
+import MousePosition from 'ol/control/MousePosition';
+import { createStringXY } from 'ol/coordinate';
+import { defaults as defaultControls } from 'ol/control';
 import { mapGetters } from "vuex";
 import { Loading } from 'element-ui'; //引入Loading服务
 
@@ -141,6 +164,8 @@ const vueGis = {
       iconTextColor: '#ffffff',
       distanceMax: null,//显示的坐标距离中心点的范围                                                    
 
+      input_lat: null,
+      input_lon: null
     }
   },
   async mounted () {
@@ -148,6 +173,10 @@ const vueGis = {
 
   },
   methods: {
+    showPosition () {
+      let array = [this.input_lat, this.input_lon]
+      map.getView().setCenter(array)
+    },
     //加载地图:地图基本信息，多边形区域信息，多边形icon
     loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray, iconTextStyle, distanceMax) {
       this.mapInfo = mapInfo
@@ -417,6 +446,7 @@ const vueGis = {
       //初始化map和地图底图
       //创建地图容器
       map = new Map({
+
         layers: [gaodeMapLayer],
         //加载瓦片图层数据
         view: mapView,
@@ -424,6 +454,14 @@ const vueGis = {
         //目标加载到map中
       })
 
+      var mousePositionControl = new MousePosition({
+        coordinateFormat: createStringXY(6),//获取位置
+        projection: 'EPSG:4326',
+        className: 'custom-mouse-position',
+        target: document.getElementById('mouse-position'), //将位置数据放到那里
+        undefinedHTML: '&nbsp'
+      });
+      map.addControl(mousePositionControl);
 
 
       //去除双击放大效果