区域化党建地图修改

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

@@ -6,49 +6,49 @@
              src="../../../../assets/img/shuju/title-tip.png" />
         <div class="title-label">
           区域化党建&nbsp;&nbsp;
-          <el-cascader 
-            v-model="selectAgency"
-            :options="propTree" 
-            :props="{ checkStrictly: true }" 
-            :show-all-levels="false"
-            clearable 
-            @change="handleCascader">
+          <el-cascader v-model="selectAgency"
+                       :options="propTree"
+                       :props="{ checkStrictly: true }"
+                       :show-all-levels="false"
+                       clearable
+                       @change="handleCascader">
           </el-cascader>
-          
+
         </div>
         <div class="second-select">
-            <el-select v-model="serviceMatter"
-                      placeholder="请选择"
-                      @change="handleSelectChange"
-                      @clear="handleSelectChange">
-              <el-option v-for="item in unitList"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-              </el-option>
-            </el-select>
-          </div>
-          <div class="second-select">
-            <el-date-picker v-model="timeRange"
-                            type="daterange"
-                            range-separator="至"
-                            start-placeholder="开始日期"
-                            end-placeholder="结束日期"
-                            prefix-icon="el-icon-caret-bottom"
-                            value-format="yyyy-MM-dd HH:mm:ss"
-                            :clearable="false"
-                            :default-time="['00:00:00', '23:59:59']"
-                            >
-            </el-date-picker>
-          </div>
+          <el-select v-model="serviceMatter"
+                     placeholder="请选择"
+                     @change="handleSelectChange"
+                     @clear="handleSelectChange">
+            <el-option v-for="item in unitList"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="second-select">
+          <el-date-picker v-model="timeRange"
+                          type="daterange"
+                          range-separator="至"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期"
+                          prefix-icon="el-icon-caret-bottom"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          :clearable="false"
+                          :default-time="['00:00:00', '23:59:59']">
+          </el-date-picker>
+        </div>
       </div>
       <div class="second-title">
         <div class="second-title-label">党建单位分类统计</div>
-        
+
       </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,//记录是否是首次加载地图
@@ -251,12 +225,12 @@ export default {
     this.getList(this.agencyId)
     this.getCateCount(this.agencyId)
     this.getCateType(this.agencyId)
-    
+
     await this.getWorkUserInfo()
     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,25 +288,26 @@ export default {
         this.$message.error(msg)
       }
     },
-    getTreeData(data){
+    getTreeData (data) {
       if (!Array.isArray(data)) return []
       let arr = data.map(item => {
         let _item = {}
         if (item.subAgencyList) {
           if (item.subAgencyList.length === 0) {
-            _item = { 
+            _item = {
               label: item.agencyName,
               value: item.agencyId + '-' + item.level,
               level: item.level,
-              children: undefined 
+              children: undefined
             }
-          } else _item = { 
+          } else _item = {
             label: item.agencyName,
             value: item.agencyId + '-' + item.level,
             level: item.level,
-            children: this.getTreeData(item.subAgencyList)}
+            children: this.getTreeData(item.subAgencyList)
+          }
         } else {
-          _item = { 
+          _item = {
             label: item.agencyName,
             value: item.agencyId + '-' + item.level,
             level: item.level,
@@ -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,26 +392,26 @@ 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])
         this.getCateType(_arr[0])
       }
-      
+
     },
-    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,8 +564,8 @@ export default {
     clickProject (feature) {
       console.log('标注信息', feature.values_.properties)
     },
-    async handleLook(val) {
-      
+    async handleLook (val) {
+
       this.detailId = val.id
       await this.getDetail(val.id)
       this.showedMoreInfo = true
@@ -636,21 +611,22 @@ export default {
     &::-webkit-scrollbar-corner,
       /* 滚动条角落 */
     &::-webkit-scrollbar-thumb,
-    &::-webkit-scrollbar-track {      /*滚动条的轨道*/
+    &::-webkit-scrollbar-track {
+      /*滚动条的轨道*/
       border-radius: 4px;
     }
 
     &::-webkit-scrollbar-corner,
     &::-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 {
@@ -680,7 +655,7 @@ export default {
         border: 1px solid #1a64cc;
       }
       .el-icon-arrow-down::before {
-          content: "\e790";
+        content: "\e790";
       }
     }
   }
@@ -713,55 +688,54 @@ export default {
     background: #2865fa;
     border-radius: 50%;
   }
-  
 }
 .second-select {
-    margin: 0 10px 0 10px;
-    ::v-deep .el-input {
-      width: 180px;
-      height: 36px;
-      .el-input__inner {
-        height: 100%;
-        padding: 0 10px;
-        color: #fff;
-        line-height: 36px;
-        background: #06186d;
-        border: 1px solid #1a64cc;
-      }
-
-      .el-icon-arrow-up:before {
-        content: "\e78f";
-      }
-      // .el-select__caret:before {
-      //   content: '\E790'
-      // }
-    }
-    ::v-deep .el-date-editor {
-      width: 360px;
-      position: relative;
+  margin: 0 10px 0 10px;
+  ::v-deep .el-input {
+    width: 180px;
+    height: 36px;
+    .el-input__inner {
+      height: 100%;
+      padding: 0 10px;
+      color: #fff;
+      line-height: 36px;
       background: #06186d;
       border: 1px solid #1a64cc;
-      .el-range-input {
-        color: #fff;
-        background: #06186d;
-      }
-      .el-range-separator {
-        color: #fff;
-      }
-      .el-range__icon {
-        position: absolute;
-        right: 5px;
-        // float: right;
-      }
-      .el-input__prefix {
-        left: unset;
-        right: 5px;
-      }
     }
+
+    .el-icon-arrow-up:before {
+      content: "\e78f";
+    }
+    // .el-select__caret:before {
+    //   content: '\E790'
+    // }
   }
-  .second-select:last-child {
-    margin-left: 0;
+  ::v-deep .el-date-editor {
+    width: 360px;
+    position: relative;
+    background: #06186d;
+    border: 1px solid #1a64cc;
+    .el-range-input {
+      color: #fff;
+      background: #06186d;
+    }
+    .el-range-separator {
+      color: #fff;
+    }
+    .el-range__icon {
+      position: absolute;
+      right: 5px;
+      // float: right;
+    }
+    .el-input__prefix {
+      left: unset;
+      right: 5px;
+    }
   }
+}
+.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服务
 
@@ -139,8 +162,10 @@ const vueGis = {
       //icon图标样式
       iconUrlArray: [],
       iconTextColor: '#ffffff',
-      distanceMax: null,//显示的坐标距离中心点的范围
+      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);
 
 
       //去除双击放大效果