fix: 修改api引入方式，添加地图省市绘制图层

package.json

@@ -9,16 +9,17 @@
   },
   "dependencies": {
     "ant-design-vue": "^1.7.6",
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "echarts": "^5.1.1",
+    "echarts-gl": "^2.0.4",
+    "element-resize-detector": "^1.2.2",
     "element-ui": "^2.15.3",
     "less-loader": "7",
     "mapbox-gl": "1.13.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0",
-    "echarts": "^5.1.1",
-    "echarts-gl": "^2.0.4",
-    "element-resize-detector": "^1.2.2"
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/api/index.js

+import Vue from "vue";
+/*
+ * 1. 引入各个模块下的api请求，api请求按照模块功能划分
+ * 2. 各个模块下js文件名为命名空间,
+ * 3. 在组件中使用api： this.$api[js文件名][文件内导出的api请求]
+ * */
+const apis = {};
+const moduleContext = require.context("./modules/", false, /\.js$/);
+moduleContext.keys().forEach((key) => {
+  const name = key
+    .split("/") // ./test.js
+    .pop() // test.js
+    .replace(/\.\w+$/, ""); // test
+  apis[name] = moduleContext(key);
+});
+
+export default {
+  install() {
+    Vue.prototype.$api = apis;
+  },
+};

src/api/modules/data.js

+import axios from "axios";
+
+// 行政区获取
+export async function getProvinceData() {
+  return axios("/data/province.geojson", {}, "GET");
+}

src/components/Map/Map.vue

@@ -75,9 +75,28 @@ export default {
         style.layers.forEach((item) => {
           map.addLayer(item);
         });
+        this.addProvinceLayer();
         this.$emit("onload", map);
       });
     },
+    addProvinceLayer() {
+      this.$api.data.getProvinceData().then((res) => {
+        this.map.addSource("province", {
+          type: "geojson",
+          data: res.data,
+        });
+        this.map.addLayer({
+          id: "province",
+          source: "province",
+          type: "fill",
+          layout: {},
+          paint: {
+            "fill-color": "rgba(0, 0, 0, 0)",
+          },
+        });
+        console.log(res);
+      });
+    },
   },
 };
 </script>

src/components/Map/config/index.js

@@ -39,7 +39,7 @@ export default {
       },
     },
     {
-      id: "province_title",
+      id: "__province_title",
       type: "symbol",
       source: "area_title",
       "source-layer": "province",
@@ -58,7 +58,7 @@ export default {
       },
     },
     {
-      id: "province_outline",
+      id: "__province_outline",
       type: "line",
       source: "area",
       "source-layer": "province",

src/components/PartInfo/PartInfo.vue

-<template>
-  <div class="part info">
-    <label class="title" for="title">
-      <i class="el-icon-s-flag"></i>
-      {{ param.title }}
-    </label>
-    <label class="main" for="pm">
-      {{ param.value }}
-      <!-- <label class="sub">吨</label> -->
-    </label>
-    <div class="border border-left-top"></div>
-    <div class="border border-right-top"></div>
-    <div class="border border-left-bottom"></div>
-    <div class="border border-right-bottom"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    param: {
-      type: Object
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-</style>
\ No newline at end of file

src/main.js

@@ -3,11 +3,13 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import mapboxgl from "mapbox-gl";
+import apis from "./api/index";
 
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
 
 Vue.use(ElementUI);
+Vue.use(apis);
 mapboxgl.accessToken =
   "pk.eyJ1IjoiZmVuZ3ppZGFuIiwiYSI6ImNrY2s3ajF2cTFzc20ycnFrZWVuaDZwbngifQ.yneVi9iccAwqb6QoipjHrA";
 Vue.config.productionTip = false;

src/router/index.js

@@ -20,9 +20,7 @@ const routes = [
         path: "biomass_energy_warm",
         name: "BiomassEnergyWarm",
         component: () =>
-          import(
-            /* webpackChunkName: "about" */ "../pages/biomassEnergyWarm"
-          ),
+          import(/* webpackChunkName: "about" */ "../pages/biomassEnergyWarm"),
       },
       {
         path: "biogas_manure_eco_agriculture",

yarn.lock

@@ -1981,6 +1981,13 @@ aws4@^1.8.0:
   resolved "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-eslint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -2070,6 +2077,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch-processor@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -2546,6 +2558,11 @@ classnames@^2.2.5:
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
+claygl@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
+  integrity sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==
+
 clean-css@4.2.x:
   version "4.2.3"
   resolved "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -3483,6 +3500,22 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts-gl@^2.0.4:
+  version "2.0.7"
+  resolved "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.7.tgz#25f9a2631050c85eb7b0c514859723db05853cb9"
+  integrity sha512-ZP6BSIEhA4uj4VRphbASV4lfa0Vszp17zMumLo5f48IP6T9zzxRa/fr/UwGaqYMCNh5qbJ8OvWkP28AV7zi06w==
+  dependencies:
+    claygl "^1.2.1"
+    zrender "^5.1.1"
+
+echarts@^5.1.1:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/echarts/-/echarts-5.1.2.tgz#aa1ab0cef5b74fa2f7c620261a5f286893d30fd1"
+  integrity sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==
+  dependencies:
+    tslib "2.0.3"
+    zrender "5.1.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -3498,6 +3531,13 @@ electron-to-chromium@^1.3.723:
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.789.tgz#c3ea060ba1e36e41c87943a47ed2daadc545be2b"
   integrity sha512-lK4xn6C6ZF1kgLaC/EhOtC1MSKENExj3rMwGVnBTfHW81Z/Hb1Rge5YaWawN/YOXy3xCaESuE4KWSD50kOZ9rQ==
 
+element-resize-detector@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.3.tgz#5078d9b99398fe4c589f8c8df94ff99e5d413ff3"
+  integrity sha512-+dhNzUgLpq9ol5tyhoG7YLoXL3ssjfFW+0gpszXPwRU6NjGr1fVHMEAF8fVzIiRJq57Nre0RFeIjJwI8Nh2NmQ==
+  dependencies:
+    batch-processor "1.0.0"
+
 element-ui@^2.15.3:
   version "2.15.3"
   resolved "https://registry.npmjs.org/element-ui/-/element-ui-2.15.3.tgz#55108ab82a3bcc646e7b0570871c48ba96300652"
@@ -4146,7 +4186,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.10.0:
   version "1.14.1"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
   integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==
@@ -8316,6 +8356,11 @@ ts-pnp@^1.1.6:
   resolved "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+tslib@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+
 tslib@^1.10.0, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -9051,3 +9096,10 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@5.1.1, zrender@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/zrender/-/zrender-5.1.1.tgz#0515f4f8cc0f4742f02a6b8819550a6d13d64c5c"
+  integrity sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==
+  dependencies:
+    tslib "2.0.3"