资产图例

src/views/property/main-gis/index.html

@@ -2,7 +2,7 @@
   <Legend class="legend_pos">
     <div class="legend_full">
       <div v-for="item in LegendData" class="legend_item">
-        <div class="icon" :style="[item.iconStyle]"></div>
+        <img :src="item.icon" class="icon" alt="">
         <p>{{item.name}}</p>
       </div>
     </div>

src/views/property/main-gis/index.js

@@ -8,6 +8,13 @@ import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js";
 import { attachmentList } from "@/api/common/uploadAttachment.js";
 let gis = null;
 import Legend from '@/components/legend/index.vue';
+
+const iconMap = {
+  '1': require('./icon/组 4665@2x.png'), // 自用
+  '2': require('./icon/组 4665@2x(1).png'), // 闲置
+  '3': require('./icon/组 4665@2x(2).png'), // 出租或出借
+  '4': require('./icon/组 4665@2x(3).png') // 其他
+}
 export default {
   components: {
     Legend
@@ -16,31 +23,19 @@ export default {
     return {
       LegendData: [
         {
-          iconStyle: {
-            background: 'rgba(38,252,128,0.45)',
-            border: '2px solid #26FC80'
-          },
+          icon: require('./icon/组 4665@2x.png'),
           name: '自用'
         },
         {
-          iconStyle: {
-            background: 'rgba(232,246,0,0.45)',
-            border: '2px solid #E8F600'
-          },
+          icon: require('./icon/组 4665@2x(1).png'),
           name: '闲置'
         },
         {
-          iconStyle: {
-            background: 'rgba(16,252,252,0.45)',
-            border: '2px solid #10FCFC'
-          },
+          icon: require('./icon/组 4665@2x(2).png'),
           name: '出租'
         },
         {
-          iconStyle: {
-            background: 'rgba(198,0,255,0.45)',
-            border: '2px solid #C600FF'
-          },
+          icon: require('./icon/组 4665@2x(3).png'),
           name: '其他'
         }
       ],
@@ -53,7 +48,6 @@ export default {
         checkStrictly: true,
       },
       yellowIcon: require('./icon/yellow.png'),
-      zcIcon: require('./icon/zc_icon.png'),
       mapGeoServerUrl: "",
       villageBorderLayerName: "",
       headerTitle: '',
@@ -321,7 +315,7 @@ export default {
       this.addDeptLayer(deptList, 'yellow.png');
       gis.getMapContainer().getView().animate({
         // 只设置需要的属性即可
-        center: ol.proj.fromLonLat([dept.lng, dept.lat]), // 中心点
+        center: fromLonLat([dept.lng, dept.lat]), // 中心点
         duration: 500, // 缩放持续时间，默认不需要设置
       });
     },
@@ -344,7 +338,10 @@ export default {
       let features = [];
       permanentList.forEach(item => {
         if (item.theGeom != null && item.theGeom !== '') {
-          let fs = gis.getFeature2(item, this.zcIcon)
+          // console.log(222, useType, item);
+          const { useType } = item
+          let icon = iconMap[useType + '']
+          let fs = gis.getFeature2(item, icon)
           features.push(fs);
         }
       });
@@ -370,8 +367,6 @@ export default {
         let fs = gis.getFeature(item, this.yellowIcon)
         features.push(fs);
       });
-
-
       gis.getVectorLayerByFs(features)
       gis.mapSetFit(features)
     },
@@ -531,8 +526,6 @@ export default {
         this.addDeptLayer(deptList);
         // // 获取资产列表
         this.getPermanentList(deptId);
-        // // 获取资源列表
-        this.getResourceList(deptId);
 
         var that = this;
         //点击查询详细信息
@@ -543,7 +536,6 @@ export default {
           );
           if (feature) {
             var ifConsole = feature.values_.level;
-            console.log(ifConsole);
             if (ifConsole == "permanent") {
               that.listDialogHidden('detail');
               that.openPermanentDialog(feature.values_.detail);
@@ -571,10 +563,7 @@ export default {
           let fs = gis.getFeature3(item)
           features.push(fs);
         }
-
       });
-
-
       gis.getVectorLayerByFs(features)
       gis.mapSetFit(features)
     },

src/views/property/main-gis/index.scss

@@ -24,9 +24,6 @@
         align-items: center;
 
         .icon {
-          width: 16px;
-          height: 16px;
-          border-radius: 50%;
           margin-right: 10px;
         }
       }

src/views/resources/main-gis/index.html

@@ -9,7 +9,7 @@
   </Legend>
   <div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
   <!--选择地址-->
-  <!-- <div class="select_address">
+  <div class="select_address">
     <div class="dot left"></div>
     <div class="dot right"></div>
     <el-cascader :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader">
@@ -18,6 +18,6 @@
         <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
       </template>
     </el-cascader>
-  </div> -->
+  </div>
 </div>
 

src/views/resources/main-gis/index.js

@@ -4,7 +4,7 @@ import {
   fromLonLat
 } from 'ol/proj'
 import { getUserGeo, getUserGeoList } from "@/api/dataScreen/stockCooperative/index.js";
-
+import { getInfo } from "@/api/login";
 import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js";
 import Legend from '@/components/legend/index.vue';
 let gis = null;
@@ -51,72 +51,78 @@ export default {
   created () {
   },
   mounted () {
-    this.initMap();
+    getInfo().then(res => {
+      this.initMap(res.user.loginDeptId);
+      // 加载地图
+    })
+
   },
   methods: {
     // 加载地图
-    initMap () {
+    initMap (deptId) {
       gis = new GisUtils('map2')
       gis.addTianDiTuLayer()
       gis.addAnnotationLayer()
       const initZoom = 11;
+      // // 获取资源列表
+      this.getResourceList(deptId);
       //初始加载当前用户级别的geojson数据
-      getUserGeo().then((res) => {
-        if (res.code == 200) {
-          // 存在geojson数据，加载边界图层，定位到当前位置
-          if (res.data.geoJson != null && res.data.geoJson != "") {
-            // 解析geojson数据,添加轮廓图层
-            require(["@/assets/maps/" + res.data.geoJson], (data) => {
+      // getUserGeo().then((res) => {
+      //   if (res.code == 200) {
+      //     // 存在geojson数据，加载边界图层，定位到当前位置
+      //     if (res.data.geoJson != null && res.data.geoJson != "") {
+      //       // 解析geojson数据,添加轮廓图层
+      //       require(["@/assets/maps/" + res.data.geoJson], (data) => {
 
-              this.map.addLayer(boundaryLayer);
+      //         this.map.addLayer(boundaryLayer);
 
-              //定位查询位置
-              const maxXMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.maxX;
-              const maxYMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.maxY;
-              const minXMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.minX;
-              const minYMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.minY;
-              //获取边界区域的中心位置
-              const center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]);
-              this.map.getView().animate({
-                // 只设置需要的属性即可
-                center: center, // 中心点
-                zoom: initZoom, // 缩放级别
-                rotation: undefined, // 缩放完成view视图旋转弧度
-                duration: 1000, // 缩放持续时间，默认不需要设置
-              });
-            });
-          } else { // 不存在geojson数据，直接定位到当前位置
-            gis.getMapContainer().getView().animate({
-              // 只设置需要的属性即可
-              center: fromLonLat([res.data.lng, res.data.lat]), // 中心点
-              zoom: initZoom, // 缩放级别
-              rotation: undefined, // 缩放完成view视图旋转弧度
-              duration: 1000, // 缩放持续时间，默认不需要设置
-            });
-          }
-          //村级组级只定位坐标点   deptLevel：  1 组级、2 村级、3 乡镇级、4 区县级
-          if (res.data.deptLevel === '3' || res.data.deptLevel === '4') {
-            let locationIcon;
-            if (res.data.deptLevel === '3') {
-              locationIcon = "red.png";
-            } else if (res.data.deptLevel === '4') {
-              locationIcon = "yellow.png";
-            }
-            //获取用户级别的下级区域
-            setTimeout(() => {
-              getUserGeoList(res.data.deptId).then((res) => {
-                if (res.code == 200) {
-                  this.addDeptLayer(res.data, require(`./icon/${locationIcon}`))
-                }
-              });
-            }, 500);
-          } else {
-            let lowestOrder = [];
-            lowestOrder.push(res.data);
-            this.addDeptLayer(lowestOrder, require('./icon/green.png'));
-          }
-        }
-      });
+      //         //定位查询位置
+      //         const maxXMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.maxX;
+      //         const maxYMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.maxY;
+      //         const minXMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.minX;
+      //         const minYMap = boundaryLayer.values_.source.featuresRtree_.rbush_.data.minY;
+      //         //获取边界区域的中心位置
+      //         const center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]);
+      //         this.map.getView().animate({
+      //           // 只设置需要的属性即可
+      //           center: center, // 中心点
+      //           zoom: initZoom, // 缩放级别
+      //           rotation: undefined, // 缩放完成view视图旋转弧度
+      //           duration: 1000, // 缩放持续时间，默认不需要设置
+      //         });
+      //       });
+      //     } else { // 不存在geojson数据，直接定位到当前位置
+      //       gis.getMapContainer().getView().animate({
+      //         // 只设置需要的属性即可
+      //         center: fromLonLat([res.data.lng, res.data.lat]), // 中心点
+      //         zoom: initZoom, // 缩放级别
+      //         rotation: undefined, // 缩放完成view视图旋转弧度
+      //         duration: 1000, // 缩放持续时间，默认不需要设置
+      //       });
+      //     }
+      //     //村级组级只定位坐标点   deptLevel：  1 组级、2 村级、3 乡镇级、4 区县级
+      //     if (res.data.deptLevel === '3' || res.data.deptLevel === '4') {
+      //       let locationIcon;
+      //       if (res.data.deptLevel === '3') {
+      //         locationIcon = "red.png";
+      //       } else if (res.data.deptLevel === '4') {
+      //         locationIcon = "yellow.png";
+      //       }
+      //       //获取用户级别的下级区域
+      //       setTimeout(() => {
+      //         getUserGeoList(res.data.deptId).then((res) => {
+      //           if (res.code == 200) {
+      //             this.addDeptLayer(res.data, require(`./icon/${locationIcon}`))
+      //           }
+      //         });
+      //       }, 500);
+      //     } else {
+      //       let lowestOrder = [];
+      //       lowestOrder.push(res.data);
+      //       this.addDeptLayer(lowestOrder, require('./icon/green.png'));
+      //     }
+      //   }
+      // });
 
       gis.getMapContainer().on("click", (evt) => {
         let feature = gis.getMapContainer().forEachFeatureAtPixel(
@@ -169,6 +175,7 @@ export default {
     // 获取资源列表
     getResourceList (deptId) {
       getResourceListByDeptId(deptId).then(response => {
+        console.log(22222, response);
         if (response.data && response.data.length > 0) {
           this.addResourceLayer(response.data);
         }