沼气模块

.gitignore

 .DS_Store
 node_modules
 /dist
+/public/fonts
 
 
 # local env files

src/components/Map/Map.vue

@@ -3,61 +3,83 @@
 </template>
 
 <script>
-import mapboxgl from 'mapbox-gl'
-import { register } from './map'
-// import style from '@/config/mapStyle.js'
+import mapboxgl from "mapbox-gl";
+import { register } from "./config/map.js";
+import style from "./config/index.js";
 export default {
   props: {
     center: {
       type: Array,
-      default: () => [110, 30]
+      default: () => [110, 30],
     },
     zoom: {
       type: Number,
-      default: 2
+      default: 2,
     },
     mapId: {
       // 接收图层容器的ID
       type: String || undefined,
-      default: 'map'
-    }
+      default: "map",
+    },
   },
   data() {
     return {
-      map: null
-    }
+      map: null,
+    };
   },
   mounted() {
-    this.initMap()
+    this.initMap();
   },
   methods: {
     initMap() {
       this.map = new mapboxgl.Map({
         container: this.mapId,
         zoom: this.zoom,
-        center: this.center,
-        maxZoom: 18,
+        center: [110, 30],
         // style: "mapbox://styles/mapbox/dark-v10",
-        style: `${process.env.VUE_APP_BASE_MAP_URL}grey_simple.json`
+        style: {
+          version: 8,
+          center: [110, 36],
+          zoom: 3,
+          sources: {},
+          layers: [],
+          glyphs: "./fonts/{fontstack}/{range}.pbf",
+        },
+        maxZoom: 19.9,
+        minZoom: 0.1,
+        // dragRotate: false,
+        trackResize: true,
+        attributionControl: false,
+        preserveDrawingBuffer: true,
+        renderWorldCopies: false, // 地图不重复
         // style
-      })
-      this.map.on('load', () => {
-        let map = this.map
+      });
+      this.map.on("load", () => {
+        let map = this.map;
+        window.map = this.map;
 
         // 添加新的地图实例方法, 初始化相关状态
-        register(mapboxgl.Map.prototype)
-        map._initMapState({
-          center: this.center,
-          zoom: this.zoom
-        })
+        register(mapboxgl.Map.prototype);
+        // map._initMapState({
+        //   center: this.center,
+        //   zoom: this.zoom
+        // })
         // console.log()
-        // map.setBaseMap({ sources: style.sources, layers: style.layers })
-        console.log('loadload', map)
-        this.$emit('onload', map)
-      })
-    }
-  }
-}
+        map.setBaseMap({ sources: style.sources, layers: style.layers });
+        // 添加source
+        Object.entries(style.sources).forEach((item) => {
+          map.addSource(item[0], item[1]);
+        });
+
+        // 添加layers
+        style.layers.forEach((item) => {
+          map.addLayer(item);
+        });
+        this.$emit("onload", map);
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -65,6 +87,7 @@ export default {
   position: absolute;
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 
 // .pop-class {

src/components/Map/config/index.js

+export default {
+  version: 8,
+  // glyphs: "./fonts/{fontstack}/{range}.pbf",
+  sources: {
+    "gt-basemap-streets-v1": {
+      type: "vector",
+      tiles: [
+        process.env.VUE_APP_MAP_INIT_STYLE +
+          "/gt-basemap-streets-v1/{z}/{x}/{y}.vector.pbf",
+      ],
+      minzoom: 0,
+      maxzoom: 21,
+    },
+    area: {
+      tiles: [
+        `${process.env.VUE_APP_MAP_INIT_STYLE}/gx_area/{z}/{x}/{y}.vector.pbf`,
+      ],
+      type: "vector",
+      maxzoom: 12,
+    },
+    area_title: {
+      tiles: [
+        `${process.env.VUE_APP_MAP_INIT_STYLE}/area_title/{z}/{x}/{y}.vector.pbf`,
+      ],
+      type: "vector",
+      maxzoom: 5,
+    },
+  },
+  layers: [
+    {
+      id: "china_land",
+      source: "gt-basemap-streets-v1",
+      "source-layer": "china_land",
+      minzoom: 0,
+      maxzoom: 21,
+      type: "line",
+      paint: {
+        "line-color": "rgba(252, 249, 242, 1)",
+      },
+    },
+    {
+      id: "province_title",
+      type: "symbol",
+      source: "area_title",
+      "source-layer": "province",
+      layout: {
+        "text-font": ["open-sans"],
+        "text-field": "{PXZQMC}",
+        "text-size": 17,
+        "text-max-width": 5,
+      },
+      maxzoom: 7,
+      minzoom: 1,
+      paint: {
+        "text-color": "#fff",
+        "text-halo-color": "#000",
+        "text-halo-width": 1,
+      },
+    },
+    {
+      id: "province_outline",
+      type: "line",
+      source: "area",
+      "source-layer": "province",
+      layout: {},
+      paint: {
+        "line-color": "#fff",
+        "line-width": 2,
+        "line-blur": 1,
+      },
+    },
+  ],
+};

src/components/statusControl/index.vue

+<template>
+  <div class="statusControl" :style="statusStyle">
+    <ul>
+      <li
+        v-for="(item, index) in list"
+        :key="index"
+        :class="{ acitive: value === item.key }"
+        @click="onStatusChange(item.key)"
+      >
+        {{ item.value }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+// #144683
+export default {
+  name: "statusControl",
+  props: {
+    list: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    statusStyle: {
+      type: [Object, String],
+      default: "",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onStatusChange(key) {
+      this.$emit("input", key);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.statusControl {
+  ul li {
+    margin-bottom: 10px;
+    border-radius: 5px;
+    padding: 5px 10px;
+    width: 150px;
+    color: #333;
+    background-color: #fff;
+    box-shadow: 0 0 5px #fff9;
+    text-align: center;
+    cursor: pointer;
+    &.acitive {
+      color: #fff;
+      background-color: #144683;
+    }
+  }
+}
+</style>

src/pages/methaneUpgrade/components/methaneMap.vue

+<template>
+  <div class="methane">
+    <Map mapId="methane" @onload="onload"></Map>
+  </div>
+</template>
+
+<script>
+import Map from "@/components/Map/Map.vue";
+export default {
+  name: "methane",
+  data() {
+    return {};
+  },
+  components: {
+    Map,
+  },
+  computed: {},
+  methods: {
+    onload() {
+      console.log("地图加载完成");
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.methane {
+  height: inherit;
+}
+</style>

src/pages/methaneUpgrade/index.vue

 <template>
   <!-- 农村沼气转型升级 -->
-  <div class="contain">
-    <!-- <PartInfo class="part-info" :param="{ title: 'adf', value: 'adf' }" /> -->
-    <div v-show="false" style="width: 100%; height: 400px">
-      <Echart ref="echart3" :options="echart3_option" />
-    </div>
+  <div class="methaneUpgrade">
     <div class="bottom-part">
       <PartWrap class="bottom-part-table">
         <div class="bottom-part-table-cont">
@@ -108,6 +104,12 @@
         </div>
       </PartWrap>
     </div>
+    <MethaneMap></MethaneMap>
+    <StatusControl
+      :statusStyle="{ position: 'absolute', right: 0, top: '100px' }"
+      :list="statusControlList"
+      v-model="statusValue"
+    ></StatusControl>
   </div>
 </template>
 
@@ -116,10 +118,19 @@ import DateWidget from '../../components/DateWidget/DateWidget.vue'
 // import PartInfo from '../../components/PartInfo/PartInfo.vue'
 import Echart from '../../components/Echart/Echarts.vue'
 import PartWrap from '../../components/PartWrap/PartWrap.vue'
+import StatusControl from '@/components/statusControl/index.vue'
+import MethaneMap from './components/methaneMap'
 export default {
   name: 'MethaneUpgrade',
   data() {
     return {
+      statusControlList: [
+        { key: 'small', value: '小型沼气工程' },
+        { key: 'middle', value: '中型沼气工程' },
+        { key: 'big', value: '大型沼气工程' },
+        { key: 'ExtraLarge', value: '特大型沼气工程' }
+      ],
+      statusValue: 'small',
       thisTable: '供气户数',
       echart3_option: {
         xAxis: {
@@ -174,7 +185,10 @@ export default {
     DateWidget,
     // PartInfo,
     Echart,
-    PartWrap
+    PartWrap,
+
+    MethaneMap,
+    StatusControl
   },
   methods: {}
 }
@@ -182,7 +196,7 @@ export default {
 
 <style lang="less" scoped>
 // @import url('../../assets/css/public.less');
-.contain {
+.methaneUpgrade {
   width: 100%;
   height: 100%;
   position: relative;
@@ -233,4 +247,4 @@ export default {
     justify-content: space-around;
   }
 }
-</style>
\ No newline at end of file
+</style>

src/views/Home.vue

@@ -40,16 +40,16 @@
 
 <script>
 export default {
-  name: 'Home',
+  name: "Home",
   data() {
     return {
       // baseUrl: process.env.BASE_URL
-    }
+    };
   },
   components: {
     // HelloWorld,
-  }
-}
+  },
+};
 </script>
 
 <style scoped lang="less">
@@ -95,7 +95,7 @@ export default {
           font-weight: 700;
           letter-spacing: 0.1vh;
           color: @main-color;
-          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+          font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
         }
       }
       .menu {
@@ -115,5 +115,10 @@ export default {
       }
     }
   }
+
+  .content-cont {
+    width: 100vw;
+    height: 100vh;
+  }
 }
 </style>