图例

src/api/modules/layer.js

 import ajax from "./base";
 
-export default {
+
   // 行政区获取
-  async query(dataSetCode, params = {}) {
+ export async function query(dataSetCode, params = {}) {
     const defaultParams = {};
     return ajax(
       `${dataSetCode}/query`,
       Object.assign({}, defaultParams, params),
       "POST"
     );
-  },
-  async aggregation(dataSetCode, params = {}) {
+  }
+  export async function aggregation(dataSetCode, params = {}) {
     const defaultParams = {};
     return ajax(
       `${dataSetCode}/aggregation`,
       Object.assign({}, defaultParams, params),
       "POST"
     );
-  },
-};
+  }
\ No newline at end of file

src/components/DateWidget/DateWidget.vue

@@ -22,25 +22,37 @@
 
 <script>
 export default {
+  props: {
+    range: {
+      type: Array
+    }
+  },
   data() {
     return {
       curTime: '2009',
       play: false,
-      range: ['2008', '2013'],
       pickerOptions: {
-        disabledDate(time) {
+        disabledDate: time => {
           return (
-            new Date('2008').getTime() > time.getTime() ||
-            new Date('2015').getTime() < time.getTime()
+            new Date(this.ranges[0]).getTime() > time.getTime() ||
+            new Date(this.ranges[1]).getTime() < time.getTime()
           )
         }
       }
     }
   },
+  computed: {
+    ranges() {
+      return this.range
+    }
+  },
+  watch: {
+    curTime(val) {
+      this.$emit('dateChange', val)
+    }
+  },
   methods: {
     showDatePicker() {
-      console.log('asdfsadf')
-
       console.log(this.$refs.datePicker.focus)
       this.$refs.datePicker.focus()
     },
@@ -59,11 +71,16 @@ export default {
           } else {
             this.clearPlay()
           }
-        }, 1000)
+        }, 2000)
       } else {
         this.clearPlay()
       }
     }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.curTime = this.ranges[0]
+    }, 1000)
   }
 }
 </script>

src/components/Echart/Echarts.vue

@@ -58,6 +58,7 @@ export default {
 
     // 扩大echarts点击面的大小，即点击灰色面也可以触发
     that.chart.getZr().on("click", function (params) {
+      console.log(params)
       const pointInPixel = [params.offsetX, params.offsetY];
       if (that.chart.containPixel("grid", pointInPixel)) {
         /*此处添加具体执行代码*/
@@ -66,7 +67,8 @@ export default {
           pointInPixel
         );
         //X轴序号
-        const xIndex = pointInGrid[0];
+        console.log(pointInGrid)
+        const xIndex = pointInGrid[1];
 
         //获取当前图表的option
         const op = that.chart.getOption();
@@ -75,6 +77,7 @@ export default {
         if (op.xAxis[0].type === "category") {
           name = op.xAxis[0].data[xIndex];
         } else {
+          console.log(xIndex)
           name = op.yAxis[0].data[xIndex];
         }
 

src/components/Lengend/Lengend.vue

+<template>
+  <div class="legend">
+    <div class="title">{{ title }}</div>
+    <div class="main">
+      <template v-for="(item, index) in colors">
+        <div :key="index">
+          <div class="item" v-if="index == 0">
+            <div class="circle" :style="{ 'background-color': item }"></div>
+            <label>- {{ range[index] }}</label>
+          </div>
+          <div class="item" v-else>
+            <div class="circle" :style="{ 'background-color': item }"></div>
+            <label>{{ range[index - 1] }} - {{ range[index] }}</label>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    title: {
+      type: String
+    },
+    colors: {
+      type: Array
+    },
+    range: {
+      type: Array
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.legend {
+  position: absolute;
+  right: 1vh;
+  bottom: 1vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  .title {
+    width: 100%;
+    text-align: left;
+    padding-left: 0;
+    margin-bottom: 5px;
+    color: @main-color;
+    font-size: 1.3vh;
+  }
+  .item {
+    display: flex;
+    align-items: center;
+    .circle {
+      border-radius: 2px;
+      width: 17px;
+      height: 10px;
+      margin-right: 0.5vh;
+    }
+    label {
+      color: @main-color;
+      font-size: 1.2vh;
+    }
+  }
+  .item + .item {
+    margin-top: 0.3vh;
+  }
+}
+</style>
\ No newline at end of file

src/components/Map/Map.vue

@@ -3,32 +3,32 @@
 </template>
 
 <script>
-import mapboxgl from "mapbox-gl";
-import { register } from "./config/map.js";
-import style from "./config/index.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() {
@@ -43,7 +43,7 @@ export default {
           zoom: 3,
           sources: {},
           layers: [],
-          glyphs: "./fonts/{fontstack}/{range}.pbf",
+          glyphs: './fonts/{fontstack}/{range}.pbf'
         },
         maxZoom: 19.9,
         minZoom: 0.1,
@@ -51,59 +51,60 @@ export default {
         trackResize: true,
         attributionControl: false,
         preserveDrawingBuffer: true,
-        renderWorldCopies: false, // 地图不重复
+        renderWorldCopies: false // 地图不重复
         // style
-      });
-      this.map.on("load", () => {
-        let map = this.map;
-        window.map = this.map;
+      })
+      this.map.on('load', async () => {
+        let map = this.map
+        window.map = this.map
 
         // 添加新的地图实例方法, 初始化相关状态
-        register(mapboxgl.Map.prototype);
+        register(mapboxgl.Map.prototype)
         // map._initMapState({
         //   center: this.center,
         //   zoom: this.zoom
         // })
         // console.log()
-        map.setBaseMap({ sources: style.sources, layers: style.layers });
+        map.setBaseMap({ sources: style.sources, layers: style.layers })
         // 添加source
-        Object.entries(style.sources).forEach((item) => {
-          map.addSource(item[0], item[1]);
-        });
+        Object.entries(style.sources).forEach(item => {
+          map.addSource(item[0], item[1])
+        })
 
         // 添加layers
-        style.layers.forEach((item) => {
-          map.addLayer(item);
-        });
-        this.addProvinceLayer();
-        this.$emit("onload", map);
-      });
+        style.layers.forEach(item => {
+          map.addLayer(item)
+        })
+        await this.addProvinceLayer()
+        this.$emit('onload', map)
+      })
     },
     addProvinceLayer() {
-      this.$api.data.getProvinceData().then((res) => {
-        this.map.addSource("province", {
-          type: "geojson",
-          data: res.data,
-        });
+      this.$api.data.getProvinceData().then(res => {
+        this.map.addSource('province', {
+          type: 'geojson',
+          data: res.data
+        })
         this.map.addLayer({
-          id: "province",
-          source: "province",
-          type: "fill",
+          id: 'province',
+          source: 'province',
+          type: 'fill',
           layout: {},
           paint: {
-            "fill-color": "rgba(0, 0, 0, 0)",
-          },
-        });
-        console.log(res);
-      });
-    },
-  },
-};
+            'fill-outline-color': '#fff',
+            'fill-color': 'rgba(0, 0, 0, 0)'
+          }
+        })
+        console.log(res)
+      })
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
 .__map {
-  position: absolute;
+  // position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;

src/config/city.config.js

+export default{
+  province:[
+    { code:'10',	name:'全国',},
+    { code:'11',	name:'北京',},
+    { code:'12',	name:'天津',},
+    { code:'13',	name:'河北',},
+    { code:'14',	name:'山西',},
+    { code:'15',	name:'内蒙',},
+    { code:'21',	name:'辽宁',},
+    { code:'22',	name:'吉林',},
+    { code:'23',	name:'黑龙江',},
+    { code:'31',	name:'上海',},
+    { code:'32',	name:'江苏',},
+    { code:'33',	name:'浙江',},
+    { code:'34',	name:'安徽',},
+    { code:'35',	name:'福建',},
+    { code:'36',	name:'江西',},
+    { code:'37',	name:'山东',},
+    { code:'41',	name:'河南',},
+    { code:'42',	name:'湖北',},
+    { code:'43',	name:'湖南',},
+    { code:'44',	name:'广东',},
+    { code:'45',	name:'广西',},
+    { code:'46',	name:'海南',},
+    { code:'50',	name:'重庆',},
+    { code:'51',	name:'四川',},
+    { code:'52',	name:'贵州',},
+    { code:'53',	name:'云南',},
+    { code:'54',	name:'西藏',},
+    { code:'61',	name:'陕西',},
+    { code:'62',	name:'甘肃',},
+    { code:'63',	name:'青海',},
+    { code:'64',	name:'宁夏',},
+    { code:'65',	name:'新疆',},
+  ]
+}
\ No newline at end of file

src/pages/methaneUpgrade/components/methaneMap.vue

@@ -5,22 +5,39 @@
 </template>
 
 <script>
-import Map from "@/components/Map/Map.vue";
+import Map from '@/components/Map/Map.vue'
 export default {
-  name: "methane",
+  name: 'methane',
   data() {
-    return {};
+    return {
+      map: ''
+    }
   },
   components: {
-    Map,
+    Map
   },
   computed: {},
   methods: {
-    onload() {
-      console.log("地图加载完成");
+    async onload(map) {
+      this.map = map
+      this.map.addLayer({
+        id: 'province',
+        source: 'province',
+        type: 'fill',
+        layout: {},
+        paint: {
+          'fill-outline-color': '#fff',
+          'fill-color': 'rgba(0, 0, 0, 0)'
+        }
+      })
+      await this.$emit('onload', map)
     },
-  },
-};
+    async setBackground(data) {
+      console.log(this.map.getStyle())
+      await this.map.setPaintProperty('province', 'fill-color', data)
+    }
+  }
+}
 </script>
 
 <style scoped lang="less">