底图qiepian

src/components/Map/Map.vue

@@ -82,13 +82,19 @@ export default {
     addProvinceLayer() {
       this.$api.data.getProvinceData().then(res => {
         this.map.addSource('province', {
-          type: 'geojson',
-          data: res.data
+          // type: 'geojson',
+          // data: res.data
+          tiles: [
+            'http://39.104.87.15/api/tileset/agnps_sjwj/{z}/{x}/{y}.vector.pbf'
+          ],
+          type: 'vector'
+          // "http://39.104.87.15/api/tileset/agnps_sjwj/{z}/{x}/{y}.vector.pbf"
         })
         this.map.addLayer({
           id: 'province',
           source: 'province',
           type: 'fill',
+          'source-layer': 'province',
           layout: {},
           paint: {
             'fill-outline-color': '#fff',

src/pages/methaneUpgrade/index.vue

@@ -80,7 +80,7 @@
         :value="leftObj.zj_capacity"
       ></PartWrap>
     </div>
-    <Lengend class="legend-part" :colors="colors" :range="colorLabel"/>
+    <Lengend class="legend-part" :colors="colors" :range="colorLabel" />
     <div class="right-part">
       <PartWrap class="bottom-part-echart" :title="'年末累计(处)'">
         <div style="width: 13vw; height: 38vh">
@@ -156,11 +156,11 @@ export default {
       map: '',
       // legendRange:[],
       colors: [
-        'rgb(75,250,2)',
-        'blue',
-        'rgb(229,246,0)',
-        'rgb(252,114,0)',
-        'rgb(238,76,0)',
+        'rgb(67, 134, 78)',
+        'rgb(178, 222, 145)',
+        'rgb(223, 238, 175)',
+        'rgb(245, 255, 163)',
+        'rgb(240, 145, 98)',
         'rgb(245,1,0)'
       ],
       colorLabel: [],
@@ -505,17 +505,10 @@ export default {
       this.colorLabel = range
       let a = [
         'match',
-        ['get', 'province_c']
-        // 1,
-        // 'rgb(0,255,81)',
-        // 2,
-        // '#F9E32B',
-        // 3,
-        // '#FB3941',
-        // 'rgb(0,255,81)'
+        ['get', 'code']
       ]
       data.forEach(item => {
-        a.push(Number(item.pcode))
+        a.push(item.pcode)
         a.push(this.getColorOfProvince(Number(item[this.statusValue1.key])))
       })
       console.log(a)
@@ -759,7 +752,7 @@ export default {
       flex: 1;
     }
   }
-  .legend-part{
+  .legend-part {
     position: absolute;
     z-index: 11;
     left: 300px;