瀏覽代碼

镇域专题地图位置调整

Bella 2 年之前
父節點
當前提交
cceaf9bb39
共有 2 個文件被更改,包括 155 次插入58 次删除
  1. 34 1
      src/components/map/MapHolder.vue
  2. 121 57
      src/views/HomeView.vue

+ 34 - 1
src/components/map/MapHolder.vue

@@ -745,7 +745,7 @@ export default {
         this.mapInit();
       } else if (
         // 切换到首页和疑点筛查页且图层不存在时重新渲染区域图
-        (this.$ifMenu("1", "") || this.$ifMenu("2", "")) &&
+        this.$ifMenu("1", "") &&
         !map2DViewer.map.hasLayer(map2DViewer.groups["浦东新区_polygon"])
       ) {
         this.getJSonDataToStreet("", "");
@@ -759,6 +759,39 @@ export default {
           let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
           map2DViewer.map.fitBounds(polygon.getBounds());
         }
+      } else if (this.$ifMenu("2", "5")) {
+        this.getJSonDataToStreet("", "");
+        // 切换到镇域专题是时均往左偏移一些
+        if (this.$store.state.homeSpecialTown === "全部") {
+          let locationArr = townLocationMap.get(
+            this.$store.state.homeSpecialTown
+          );
+          this.setView([locationArr[0], locationArr[1] + 0.15], 3);
+        } else {
+          let locationArr = townLocationMap.get(
+            this.$store.state.homeSpecialTown
+          );
+          this.setView([locationArr[0], locationArr[1]], 5);
+          // let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
+          // map2DViewer.map.fitBounds(polygon.getBounds());
+        }
+      } else if (
+        this.$ifMenu("2", "1") ||
+        this.$ifMenu("2", "2") ||
+        this.$ifMenu("2", "3") ||
+        this.$ifMenu("2", "4")
+      ) {
+        this.getJSonDataToStreet("", "");
+        // 切换到疑点筛查时均往右偏移一些
+        if (this.$store.state.homeSpecialTown === "全部") {
+          this.setView(
+            townLocationMap.get(this.$store.state.homeSpecialTown),
+            3
+          );
+        } else {
+          let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
+          map2DViewer.map.fitBounds(polygon.getBounds());
+        }
       } else if (
         !(this.$ifMenu("1", "") || this.$ifMenu("2", "")) &&
         map2DViewer.map.hasLayer(map2DViewer.groups["浦东新区_polygon"])

+ 121 - 57
src/views/HomeView.vue

@@ -23,10 +23,15 @@
           menuIndex: '2',
           subMenuIndex: '5',
           legendIcon: legendIcon,
-          legendTitle: legendTitle
+          legendTitle: legendTitle,
         }"
       />
-      <div class="select-title" :style="{ left: $ifMenu('2', '5') ? '20px' : 'calc(50% - 80px)' }">所属街道</div>
+      <div
+        class="select-title"
+        :style="{ left: $ifMenu('2', '5') ? '20px' : 'calc(50% - 80px)' }"
+      >
+        所属街道
+      </div>
       <NewSelect
         class="select-container"
         :style="{ left: $ifMenu('2', '5') ? '100px' : '50%' }"
@@ -38,7 +43,10 @@
     </div>
 
     <!-- 综合分析 -->
-    <ComprehensiveAnalysis id="ComprehensiveContainer" v-show="$ifMenu('3', '')" />
+    <ComprehensiveAnalysis
+      id="ComprehensiveContainer"
+      v-show="$ifMenu('3', '')"
+    />
 
     <!-- 消息提醒 -->
     <MessageList id="MessageListContainer" v-if="$ifMenu('6', '')" />
@@ -62,7 +70,8 @@
     </div>
     <!-- 左侧菜单列(较宽,两列) -- 疑点筛查 -->
     <div id="leftMenusW" v-for="(item, index) in menus.leftW" :key="index">
-      <MenuCard :menuData="item2" v-for="item2 in item" :key="item2.title"> </MenuCard>
+      <MenuCard :menuData="item2" v-for="item2 in item" :key="item2.title">
+      </MenuCard>
     </div>
     <!-- 中部菜单列 -->
     <div id="mainMenus">
@@ -75,7 +84,11 @@
         @selectEvent="homeSelect"
         v-if="$ifMenu('1', '')"
       />
-      <div id="mainMenus_topRight" v-if="menus.main[0]" v-show="$ifMenu('1', '')">
+      <div
+        id="mainMenus_topRight"
+        v-if="menus.main[0]"
+        v-show="$ifMenu('1', '')"
+      >
         <MenuCard :menuData="menus.main[0]">
           <div class="bar-btn">
             <div
@@ -108,17 +121,35 @@
           boxHeight: '180',
           menuIndex: '1',
           legendIcon: legendIcon,
-          legendTitle: legendTitle
+          legendTitle: legendTitle,
         }"
       />
     </div>
     <!-- 首页右侧菜单列 -->
-    <div class="rightMenus" v-for="(item, index) in menus.right" :key="'rightBox' + index">
-      <MenuCard :menuData="item2" v-for="(item2, index2) in item" :key="'right' + index2"> </MenuCard>
+    <div
+      class="rightMenus"
+      v-for="(item, index) in menus.right"
+      :key="'rightBox' + index"
+    >
+      <MenuCard
+        :menuData="item2"
+        v-for="(item2, index2) in item"
+        :key="'right' + index2"
+      >
+      </MenuCard>
     </div>
     <!-- 首页右侧菜单列 -->
-    <div class="rightMenusW" v-for="(item, index) in menus.rightW" :key="'rightBoxW' + index">
-      <MenuCard :menuData="item2" v-for="(item2, index2) in item" :key="'rightW' + index2"> </MenuCard>
+    <div
+      class="rightMenusW"
+      v-for="(item, index) in menus.rightW"
+      :key="'rightBoxW' + index"
+    >
+      <MenuCard
+        :menuData="item2"
+        v-for="(item2, index2) in item"
+        :key="'rightW' + index2"
+      >
+      </MenuCard>
     </div>
   </div>
 </template>
@@ -170,7 +201,7 @@ export default {
     LawView,
     IndexSystem,
     CapitalInput,
-    MessageList
+    MessageList,
   },
   data() {
     return {
@@ -179,7 +210,7 @@ export default {
         type: "lr",
         title: "林地面积",
         value: 654,
-        unit: "公顷"
+        unit: "公顷",
       },
       testTitle: "土地资源",
       activeIndex: 1,
@@ -188,38 +219,38 @@ export default {
         left: [],
         leftW: [],
         main: [],
-        right: []
+        right: [],
       },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
       legendTitle: [
         {
           name: "A类",
-          info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷"
+          info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷",
         },
         {
           name: "B类",
-          info: "有一定的自然资源资产(耕地林地总和 900-3000公项)"
+          info: "有一定的自然资源资产(耕地林地总和 900-3000公项)",
         },
         {
           name: "C类",
-          info: "自然资源资产较少(耕地林地总和低于 900公项)"
-        }
+          info: "自然资源资产较少(耕地林地总和低于 900公项)",
+        },
       ],
       // legendData: ["#E565FF", "#0055FF", "#00FFD5"],
       legendIcon: [
         {
           background: "#E565FF",
-          border: "none"
+          border: "none",
         },
         {
           background: "#0055FF",
-          border: "none"
+          border: "none",
         },
         {
           background: "#00FFD5",
-          border: "none"
-        }
+          border: "none",
+        },
       ],
       btnChecked: "A",
       soil: [],
@@ -230,19 +261,19 @@ export default {
         soil: [],
         other: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       BData: {
         soil: [],
         other: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       CData: {
         soil: [],
         other: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       streetSelectVal: "全部",
       streetOptions: [],
@@ -251,12 +282,12 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 }
+        { name: "生态资源问题", num: 55 },
       ],
       // 综合分析
       analysis: {
-        searchInput: ""
-      }
+        searchInput: "",
+      },
     };
   },
   mounted() {
@@ -277,12 +308,12 @@ export default {
       let params = new FormData();
       params = {
         type: type,
-        cName: cName
+        cName: cName,
       };
-      this.$Post(this.urlsCollection.selectByCNameAType, params).then(res => {
+      this.$Post(this.urlsCollection.selectByCNameAType, params).then((res) => {
         if (res.code === 200 && res.content.length > 0) {
           this.classTextToIndex[keyName] = new Map();
-          res.content.forEach(v => {
+          res.content.forEach((v) => {
             this.classTextToIndex[keyName].set(v.index + "", v.name);
           });
         }
@@ -328,12 +359,12 @@ export default {
       params.append("type", type);
       params.append("cName", cName);
       this.$Post(this.urlsCollection.selectByCNameAType, params).then(
-        res => {
+        (res) => {
           if (res.code === 200 && res.content.length > 0) {
             this.$store.state.selectSelectDataMap[keyName] = res.content;
           }
         },
-        error => {
+        (error) => {
           this.$message.error(error);
           console.log(error);
         }
@@ -353,11 +384,30 @@ export default {
     specialTownSelect(val) {
       this.$store.commit("changeHomeSpecialTown", val);
       if (val === "全部") {
-        this.$refs.mapLoaderRef.setView(townLocationMap.get(val), 3);
+        let locationArr = townLocationMap.get(val);
+        this.$refs.mapLoaderRef.setView(
+          [locationArr[0], locationArr[1] + 0.15],
+          3
+        );
       } else {
         let polygon = townPolygonMap.get(val);
         map2DViewer.map.fitBounds(polygon.getBounds());
       }
+      // if (val === "全部") {
+      //   let locationArr = townLocationMap.get(val);
+      //   this.$refs.mapLoaderRef.setView(
+      //     [locationArr[0], locationArr[1] - 0.2],
+      //     3
+      //   );
+      // } else {
+      //   let locationArr = townLocationMap.get(val);
+      //   this.$refs.mapLoaderRef.setView(
+      //     [locationArr[0], locationArr[1] - 0.2],
+      //     5
+      //   );
+      //   // let polygon = townPolygonMap.get(val);
+      //   // map2DViewer.map.fitBounds(polygon.getBounds());
+      // }
     },
     // 获取自然资源分类数据接口(24个镇的数据)
     getSourcesData() {
@@ -367,10 +417,10 @@ export default {
         columnId: 30,
         states: "0,1,2,3",
         pageSize: 30,
-        page: 0
+        page: 0,
       };
       this.$Post(this.urlsCollection.selectContentList, params)
-        .then(res => {
+        .then((res) => {
           if (res.code === 200 && res.content.data.length > 0) {
             // console.log(res.content.data, "getSourcesData接口获取成功");
             this.soil = [];
@@ -380,32 +430,38 @@ export default {
             let ADataArr = [];
             let BDataArr = [];
             let CDataArr = [];
-            data.map(v => {
+            data.map((v) => {
               if (v.zy_type === "0") {
                 ADataArr.push({
-                  name: this.classTextToIndex["浦东新区行政区划"].get(v.zy_town),
+                  name: this.classTextToIndex["浦东新区行政区划"].get(
+                    v.zy_town
+                  ),
                   soil: v.c_land_area,
                   other: v.other_area,
                   forest: v.c_forest_area,
-                  sum: v.c_land_area + v.other_area + v.c_forest_area
+                  sum: v.c_land_area + v.other_area + v.c_forest_area,
                 });
               }
               if (v.zy_type === "1") {
                 BDataArr.push({
-                  name: this.classTextToIndex["浦东新区行政区划"].get(v.zy_town),
+                  name: this.classTextToIndex["浦东新区行政区划"].get(
+                    v.zy_town
+                  ),
                   soil: v.c_land_area,
                   other: v.other_area,
                   forest: v.c_forest_area,
-                  sum: v.c_land_area + v.other_area + v.c_forest_area
+                  sum: v.c_land_area + v.other_area + v.c_forest_area,
                 });
               }
               if (v.zy_type === "2") {
                 CDataArr.push({
-                  name: this.classTextToIndex["浦东新区行政区划"].get(v.zy_town),
+                  name: this.classTextToIndex["浦东新区行政区划"].get(
+                    v.zy_town
+                  ),
                   soil: v.c_land_area,
                   other: v.other_area,
                   forest: v.c_forest_area,
-                  sum: v.c_land_area + v.other_area + v.c_forest_area
+                  sum: v.c_land_area + v.other_area + v.c_forest_area,
                 });
               }
             });
@@ -415,20 +471,20 @@ export default {
             CDataArr.sort(publicFun.compare("sum"));
 
             // 按A,B,C分出各自资源的排序数组
-            ADataArr.forEach(item => {
+            ADataArr.forEach((item) => {
               this.AData.soil.push(item.soil);
               this.AData.other.push(item.other);
               this.AData.forestry.push(item.forest);
               this.AData.categoryData.push(item.name);
             });
-            BDataArr.forEach(item => {
+            BDataArr.forEach((item) => {
               this.BData.soil.push(item.soil);
               this.BData.other.push(item.other);
               this.BData.forestry.push(item.forest);
               this.BData.categoryData.push(item.name);
             });
 
-            CDataArr.forEach(item => {
+            CDataArr.forEach((item) => {
               this.CData.soil.push(item.soil);
               this.CData.other.push(item.other);
               this.CData.forestry.push(item.forest);
@@ -447,10 +503,10 @@ export default {
             });
           }
         })
-        .catch(error => {
+        .catch((error) => {
           console.log(error, "getSourcesData");
         });
-    }
+    },
   },
   created() {
     this.classDictQuery("0", "浦东新区行政区划", "浦东新区行政区划");
@@ -459,10 +515,10 @@ export default {
     for (let key in street) {
       this.streetOptions.push({
         value: street[key],
-        label: street[key]
+        label: street[key],
       });
     }
-  }
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -776,14 +832,22 @@ export default {
     transform: translate(-50%, -50%) rotate(45deg);
     width: 110px;
     height: 100px;
-    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat;
+    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor)
+        left top no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top
+        no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat;
     background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
   }
 }