feat: 初始化地图样式

.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/Map/config/map.js

+// 在mapboxgl.Map中添加新的方法
+
+const addedMapUtil = {
+  // base map state
+  _originalMapState: null,
+  // 设置初始地图状态
+  _initMapState(state) {
+    const { center, zoom } = state;
+    if (!center || !zoom) {
+      throw new Error("missing center or zoom!");
+    }
+    this._originalMapState = {
+      zoom,
+      center,
+    };
+  },
+  // recover map
+  recover() {
+    // this.setCenter(this._originalMapState.center)
+    // this.zoomTo(this._originalMapState.zoom)
+    this.flyTo({
+      center: this._originalMapState.center,
+      zoom: this._originalMapState.zoom,
+    });
+  },
+  baseMap: null,
+  /**
+   * @description 设置基础底图
+   * @param {Object} [baseMap.sources] 底图的sources, 和mapbox style中source格式一致
+   * @param {Array} [baseMap.layers] 底图的layers, 和mapbox style中layers格式一致
+   * @param {Object} options style中其它的选项，例如加载一些图层需要特定的字体和雪碧图。 注意：修改sprites、icon、glyphs会导致强制更新，这种情况下可能会导致某些图层丢失
+   */
+  setBaseMap(baseMap, options) {
+    const { sources, layers } = baseMap;
+    // init map
+    if (!this.baseMap) {
+      this.baseMap = baseMap; // 缓存地图的source和layer
+      return;
+    }
+
+    const style = this.getStyle();
+    // set sources
+    Object.assign(style.sources, sources);
+
+    // set layers
+    const oldLayers = style.layers;
+    const firstLayer = oldLayers[0];
+    if (!firstLayer) {
+      style.layers.push(...layers);
+    } else {
+      // step1. remove old base layers
+      const layerIds = this.baseMap.layers.map((layer) => layer.id);
+      layerIds.forEach((layerId) => {
+        const index = oldLayers.findIndex((l) => l.id === layerId);
+        if (index > -1) {
+          oldLayers.splice(index, 1);
+        }
+      });
+      // step2. add new base layers to the top of old layers
+      style.layers = layers.concat(oldLayers);
+
+      // other mapbox style options. eg. glyphs and sprite
+      if (options) {
+        Object.assign(style, options);
+      }
+      this.setStyle(style);
+    }
+    this.baseMap = { sources, layers }; // 缓存地图的source和layer
+  },
+  // 获取底图的配置
+  getBaseMap() {
+    return this.baseMap;
+  },
+};
+
+export function register(proto) {
+  Object.assign(proto, addedMapUtil);
+}

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/views/Home.vue

@@ -10,10 +10,7 @@
           <div class="a-menu" @click="$router.push('/methane_upgrade')">
             沼气
           </div>
-          <div
-            class="a-menu"
-            @click="$router.push('/biomass_energy_warm')"
-          >
+          <div class="a-menu" @click="$router.push('/biomass_energy_warm')">
             生物
           </div>
           <div
@@ -43,20 +40,19 @@
 
 <script>
 export default {
-  name: 'Home',
+  name: "Home",
   data() {
     return {
       // baseUrl: process.env.BASE_URL
-    }
+    };
   },
   components: {
     // HelloWorld,
-  }
-}
+  },
+};
 </script>
 
 <style scoped lang="less">
-@import url('../assets/css/public.less');
 .body {
   width: 100%;
   height: 100%;
@@ -94,7 +90,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 {
@@ -102,8 +98,8 @@ export default {
         align-items: center;
         margin-right: 40px;
         .a-menu {
-          width:50px ;
-          height:50px ;
+          width: 50px;
+          height: 50px;
           background-color: @main-color;
           margin-right: 20px;
           border-radius: 50%;
@@ -114,5 +110,10 @@ export default {
       }
     }
   }
+
+  .content-cont {
+    width: 100vw;
+    height: 100vh;
+  }
 }
 </style>