basemap, town

public/static/config/config.js

@@ -12,6 +12,7 @@ var systemConfig = {
   },
   token:'65463DEE-620A-0ED5-2385-17ECD07CD351',//公共地图资源token
   mapService:'http://121.43.55.7:10011/proxy/',//地图服务
+  
 }
 //地图全局变量声明
 var map2DViewer = {

public/static/plugins/js/leaflet1.3.1/leaflet.label.css

@@ -4,7 +4,7 @@
 .leaflet-label {
     /* background:#ffffff; */
     border:0px solid #000000;
-    color: #333;
+    color: #ece5e5;
     display: block;
     font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
     padding:1px 4px;

src/components/layout/MenuCard.vue

@@ -443,7 +443,7 @@ export default {
   position: relative;
   padding-top: 10px;
   width: 100%;
-  height: calc(100% - 40px);
+  height: calc(100% - 30px);
   background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
   background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
   background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
@@ -482,7 +482,7 @@ export default {
   position: relative;
   margin: 0;
   width: 100%;
-  height: calc(100% - 40px);
+  height: calc(100% - 30px);
   background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
   background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
   background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);

src/components/map/MapHolder.vue

@@ -1,53 +1,137 @@
 <template>
-    <div id="map2DViewer">
-    </div>
+  <div id="map2DViewer"></div>
 </template>
 <script>
-import publicFun from '@/utils/publicFunction.js'
+import publicFun from "@/utils/publicFunction.js";
+import { get } from "@/utils/request";
 export default {
-    name: 'MapHolder',
-    data() {
-        return {
+  name: "MapHolder",
+  data() {
+    return {
+      town: "祝桥镇,南汇新城镇,川沙新镇,老港镇,惠南镇,航头镇,泥城镇,书院镇,新场镇,大团镇,唐镇,曹路镇,宣桥镇,张江镇,合庆镇,周浦镇,康桥镇,三林镇,高桥镇,高东镇,金桥镇,北蔡镇,万祥镇,高行镇",
+    };
+  },
+  mounted() {
+    var that = this;
+    //地图初始化
+    that.mapInit();
+    that.getJSonData();
+  },
+  methods: {
+    mapInit: function () {
+      map2DViewer.map = L.map("map2DViewer", {
+        attributionControl: false,
+        zoomControl: false,
+        minZoom:10,
+        maxZoom:15
+      }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
-        }
+      //添加默认图层
+      var guid = publicFun.buildGuid("baseLayer");
+      var layer = L.esri
+        .tiledMapLayer({
+          url:
+            systemConfig.mapService +
+            "?servertype=Street_Purplish_Blue&token=" +
+            systemConfig.token,
+        })
+        .addTo(map2DViewer.map);
+      layer.guid = guid;
+      map2DViewer.layers[guid] = layer;
     },
-    mounted() {
-        var that = this;
-        //地图初始化
-        that.mapInit();
+    // 读取浦东新区GeoJSON格式的区域数据
+    getJSonData() {
+      if (!map2DViewer.map) {
+        this.mapInit();
+      } else {
+        get("./static/json/pdgeojson.json", "").then((geoJson) => {
+          geoJson.features.map((feature) => {
+            if (
+              this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
+            ) {
+              let center = turf.center(feature.geometry);
+              this.renderPolygon(feature);
+            }
+          });
+        });
+      }
     },
-    methods: {
-        mapInit: function() {
-            map2DViewer.map = L.map("map2DViewer", {
-                attributionControl: false,
-                zoomControl: false,
-            }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
-
-            //添加默认图层
-            var guid = publicFun.buildGuid('baseLayer');
-            var layer = L.esri.tiledMapLayer({
-                    url: systemConfig.mapService+"?servertype=Street_Purplish_Blue&token="+systemConfig.token,
-                  })
-                  .addTo(map2DViewer.map);
-            layer.guid = guid;
-            map2DViewer.layers[guid] = layer;
-        },
-        setView:function(coord,zoom){
-            console.log(coord,"位置");
-            let center = L.latLng(coord[0],coord[1])
-            map2DViewer.map.setView(center,zoom)
-
+    setView: function (coord, zoom) {
+      console.log(coord, "位置");
+      let center = L.latLng(coord[0], coord[1]);
+      map2DViewer.map.setView(center, zoom);
+    },
+    renderPolygon: function (feature) {
+      let center = turf.center(feature.geometry);
+      let itemvalue = JSON.parse((Math.random() * 1000).toFixed(0));
+      let polygonData = JSON.parse(JSON.stringify(feature));
+      let coordinates = polygonData.geometry.coordinates[0];
+      let polygon = L.polygon(this.latLngsToReverse(coordinates), {
+        color: "#87d8fd",
+        weight: 3,
+        fillColor: this.getColor(itemvalue),
+        opacity: 1,
+        fillOpacity: 0.4,
+      }).addTo(map2DViewer.map);
+      center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
+      center.reverse();
+      let wmarker = L.circleMarker(center, {
+        radius: 10,
+        weight: 1,
+        fillOpacity: 0,
+        color: "#e6d273",
+      });
+      wmarker.bindLabel(feature.properties.NAME, {
+        noHide: true,
+        clickable: true,
+        offset: [-25, 10],
+      });
+      console.log(wmarker, "label");
+      wmarker.addTo(map2DViewer.map);
+      L.circleMarker(center, {
+        radius: 8,
+        weight: 1,
+        fillOpacity: 0,
+        color: "#e6d273",
+      }).addTo(map2DViewer.map);
+      L.circleMarker(center, {
+        radius: 5,
+        weight: 1,
+        fillOpacity: 1,
+        color: "#e6d273",
+      }).addTo(map2DViewer.map);
+    },
+    latLngsToReverse: function (latlngsAry) {
+      var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
+      if (typeof tempLatlngsAry[0] != "object") {
+        return tempLatlngsAry.reverse();
+      } else {
+        for (var i = 0, l = tempLatlngsAry.length; i < l; i++) {
+          tempLatlngsAry[i] = this.latLngsToReverse(tempLatlngsAry[i]);
         }
-    }
-}
+      }
+      return tempLatlngsAry;
+    },
+    getColor: function (val) {
+      var that = this;
+      if (val < 350) {
+        return "#e565ff";
+      } else if (val < 700 && val >= 350) {
+        return "#0055ff";
+      } else {
+        return "#00ffd5";
+      }
+    },
+  },
+};
 </script>
 <style scoped>
 #map2DViewer {
-    position: absolute;
-    width: 100%;
-    height: calc(100% - 60px);
-    z-index: 1;
-    top: 60px;
-    left: 0px;
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 60px);
+  z-index: 1;
+  top: 60px;
+  left: 0px;
 }
-</style>
+</style>

src/views/HomeView.vue

@@ -19,11 +19,31 @@
           type: 'card',
           title: '历年频发问题Top10',
           titleWidth: 85,
-          boxWidth: '400'
+          boxWidth: '400',
         }"
       >
-        <template slot="top"><TopCard /></template>
+        <template slot="top"><TopCard :dataSize="10" /></template>
       </MenuCard>
+      <div class="town-center">
+        <div class="town-center-top">
+          <!-- <h2>浦东新区</h2> -->
+          <div class="droplet-box-title">浦东新区</div>
+          <div class="droplet-box">
+            <div
+              class="droplet-box-item"
+              v-for="item in townCollection"
+              :key="item.name"
+            >
+              <div class="problem-num">{{ item.num }} 个</div>
+              <div class="problem-img"></div>
+              <div class="problem-title">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="town-center-bottom">
+          <div class="capital-title">资金投入TOP10</div>
+        </div>
+      </div>
     </div>
 
     <!-- Home页面 -->
@@ -153,7 +173,7 @@
       ></MenuCard>
       <MenuCard :menuData="menus.right[2]" v-if="$ifMenu('1', '')">
         <template slot="top">
-          <TopCard :dataSize="5"/>
+          <TopCard :dataSize="5" />
         </template>
       </MenuCard>
       <MenuCard :menuData="menus.right[3]" v-if="$ifMenu('2', '1')">
@@ -167,7 +187,7 @@
       ></MenuCard>
       <MenuCard :menuData="menus.right[4]" v-if="$ifMenu('2', '1')">
         <template slot="top">
-          <TopCard :dataSize="5"/>
+          <TopCard :dataSize="5" />
         </template>
       </MenuCard>
     </div>
@@ -237,7 +257,7 @@ export default {
             title: "基本农田被违规占用",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY1cq.png"
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY1cq.png",
           },
           {
             type: "imageMenu",
@@ -245,7 +265,7 @@ export default {
             title: "基本农田种林",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY3j0.png"
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY3j0.png",
           },
           {
             type: "imageMenu",
@@ -253,7 +273,7 @@ export default {
             title: "基本农田抛荒",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYl3n.png"
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYl3n.png",
           },
           {
             type: "imageMenu",
@@ -261,8 +281,8 @@ export default {
             title: "一般耕地被违规占用",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYQ9s.png"
-          }
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYQ9s.png",
+          },
         ],
         main: [
           {
@@ -276,7 +296,7 @@ export default {
         right: [
           { type: "card", title: "资金投入情况", titleWidth: 64 },
           { type: "card", title: "资源环境项目", titleWidth: 64 },
-          { type: "card", title: "历年频发问题TOP5", titleWidth: 81},
+          { type: "card", title: "历年频发问题TOP5", titleWidth: 81 },
           { type: "card", title: "土地类问题", titleWidth: 60 },
           { type: "card", title: "土地类问题TOP5", titleWidth: 81 },
         ],
@@ -301,6 +321,13 @@ export default {
       },
       streetSelectVal: "全部街道",
       streetOptions: [],
+      // 街镇专题
+      townCollection: [
+        { name: "土地资源问题", num: 67 },
+        { name: "水资源问题", num: 37 },
+        { name: "林地资源问题", num: 60 },
+        { name: "生态资源问题", num: 55 },
+      ],
     };
   },
   methods: {
@@ -388,7 +415,6 @@ export default {
 /* 镇域专题 */
 #TownContainer {
   position: relative;
-  background: rgba(100, 100, 100, 0.8);
   height: calc(100% - 60px);
   width: 100%;
   top: 60px;
@@ -397,7 +423,7 @@ export default {
   .select-title {
     position: absolute;
     left: 60px;
-    top: 27px;
+    top: 30px;
     width: 80px;
     height: 30px;
     color: #fff;
@@ -409,14 +435,85 @@ export default {
   .select-container {
     position: absolute;
     left: 150px;
-    top: 30px;
+    top: 33px;
     cursor: pointer;
     pointer-events: auto;
   }
   .town-right-problems {
     position: absolute;
     right: 10px;
-    top: 30px;
+    top: 25px;
+    pointer-events: auto;
+  }
+  .town-center {
+    position: absolute;
+    right: 420px;
+    top: 25px;
+    width: 450px;
+    height: 700px;
+    color: #fff;
+    pointer-events: auto;
+    &-top {
+      width: 100%;
+      height: 350px;
+
+      .droplet-box-title {
+        width: 100%;
+        height: 15%;
+        font-size: 30px;
+        font-weight: bold;
+        line-height: 50px;
+      }
+      .droplet-box {
+        display: flex;
+        width: 100%;
+        height: 85%;
+        display: flex;
+        flex-wrap: wrap;
+        .droplet-box-item {
+          width: 49.5%;
+          height: 49.5%;
+          .problem-num {
+            width: 35%;
+            height: 25%;
+            margin: 0 auto;
+            font-size: 22px;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #00aaff;
+          }
+          .problem-img {
+            width: 80%;
+            height: 45%;
+            background: url("../assets/home/droplet.png") no-repeat center;
+            margin: 0 auto;
+          }
+          .problem-title {
+            width: 80%;
+            height: 25%;
+            font-size: 24px;
+            font-weight: bold;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+    &-bottom {
+      width: 100%;
+      height: 320px;
+      .capital-title {
+        width: 100%;
+        height: 15%;
+        font-size: 30px;
+        font-weight: bold;
+        line-height: 50px;
+      }
+    }
   }
 }
 /* Home目录 -- 左侧菜单列 */
@@ -477,7 +574,7 @@ export default {
   }
   .legend-line {
     position: absolute;
-    left: 20px;
+    left: 24px;
     bottom: 211px;
     width: 104px;
     height: 20px;
@@ -487,13 +584,13 @@ export default {
   &_bottomLegend {
     position: absolute;
     left: 20px;
-    bottom: 30px;
+    bottom: 24px;
     color: #fff;
     z-index: 99999;
     .legend-container {
       margin: 0 auto;
-      width: 70%;
-      height: 100%;
+      width: 104px;
+      height: 130px;
       position: relative;
       .left-container {
         width: 50%;
@@ -502,12 +599,13 @@ export default {
         left: 0;
         display: flex;
         flex-direction: column;
-        justify-content: space-around;
+        justify-content: space-evenly;
         .legend-icon {
           width: 25px;
           height: 15px;
           background: #00aaff;
           border-radius: 2px;
+          margin: 0 auto;
         }
       }
       .right-container {
@@ -518,7 +616,7 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center;
-        justify-content: space-around;
+        justify-content: space-evenly;
         .legend-title {
           width: 30px;
           height: 20px;