vue+mapboxgl 鷹眼展示

一、實現效果

話不多說直接上圖，查看了 這個博主地址，https://blog.csdn.net/u014529917/article/details/62216130  他是用openlayer 寫的

二、什麼是鷹眼

1、首先要有兩個地圖 大圖，小圖，鷹眼範圍圖（簡稱鷹眼）

2、大圖移動，放大縮小的時候要相應的放大和縮小

3、小圖不動，鷹眼圖放大和縮小時，大圖展示相應的位置

三、實現思路

1、小圖比大圖的層級小4（我這邊設置的是小4，也可以是2和3看需要）

2、獲取大圖的屏幕四點座標

3、鷹眼中繪製一個面圖層，將2中獲取的四點座標整理面數據

4、大圖放大縮小的時候，小圖和大圖聯動

5、大圖在移動的時候鷹眼始終保持中的位置並監聽大圖的四點座標給鷹眼

6、鷹眼移動的時候將移動的中心點給大圖中心點並監聽大圖的四點座標給鷹眼

四、代碼

<template>
  <div class="hello" style="height:100%;width:100%;position:relative;">
    <div id="map" src style="width: 100%;height: 100%;position: relative;">
      <div
        style="position: absolute;bottom:0px;right: 0px;z-index: 200;width: 308px;height:208px;background-color: #fff;border: 1px solid #555;border-radius: 1px;"
      >
        <div
          id="overview"
          style="background-color: #fff;width:300px;height:200px;margin: 3px 3px 3px 3px;border:1px solid #7b98bc"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Map",
  components: {  },
  data() {
    return {
      map_x: null, //地圖的x座標
      map_y: null, //地圖的y座標
      overview_x: null, //鷹眼的x座標
      overview_y: null, //鷹眼的y座標
      map_zoom: null, //地圖的比例尺
      overview_zoom: null //鷹眼的比例尺
    };
  },
  methods: {
    initmap(mapId, zoom) {
      if (!window.havevec) {
        window.STYLE.layers.unshift(window.layerVec);
        window.STYLE.layers.unshift(window.layerTer); //地形
        window.STYLE.layers.unshift(window.layerImg); //影像
        window.havevec = true;
      }
      let initMap = new mapboxgl.Map({
        container: mapId,
        style: window.STYLE,
        zoom: zoom,
        center: [116.28076521512813, 39.85685373066069],
        preserveDrawingBuffer: true,
        trackResize: false,
        minZoom: 1,
        maxZoom: 16
      });
      return initMap;
    },
    initextent() {
      console.log(map.getBounds(), " map.getBounds();");
      var extent = map.getBounds();
      var coor = [
        [
          [extent._sw.lng, extent._ne.lat],
          [extent._ne.lng, extent._ne.lat],
          [extent._ne.lng, extent._sw.lat],
          [extent._sw.lng, extent._sw.lat],
          [extent._sw.lng, extent._ne.lat]
        ]
      ];
      var polygon = turf.polygon(coor);
      overview.on("load", function() {
        overview.addSource("maine", {
          type: "geojson",
          data: polygon
        });
        overview.addLayer({
          id: "maine",
          type: "fill",
          source: "maine",
          paint: {
            "fill-color": "red",
            "fill-opacity": 0.2,
            "fill-outline-color": "red"
          },
          layout: {
            visibility: "visible"
          }
        });
      });
    },
    // 拖拽
    mapdrag() {
      this.map_x = map.getCenter().lng;
      this.map_y = map.getCenter().lat;
      overview.setCenter([this.map_x, this.map_y]);
      this.extent();
    },
    overviewdrag() {
      this.overview_x = overview.getCenter().lng;
      this.overview_y = overview.getCenter().lat;
      map.setCenter([this.overview_x, this.overview_y]);
    },
    // 放大縮小
    mapzoom() {
      this.map_zoom = map.getZoom();
      overview.setZoom(this.map_zoom - 4);
      this.extent();
    },
    overviewzoom() {
      this.overview_zoom = overview.getZoom();
      map.setZoom(this.overview_zoom + 4);
    },
    //移動大圖，鷹眼始終在中間
    extent() {
      console.log(map.getBounds(), " map.getBounds();");
      var extent = map.getBounds();
      var coor = [
        [
          [extent._sw.lng, extent._ne.lat],
          [extent._ne.lng, extent._ne.lat],
          [extent._ne.lng, extent._sw.lat],
          [extent._sw.lng, extent._sw.lat],
          [extent._sw.lng, extent._ne.lat]
        ]
      ];
      var polygon = turf.polygon(coor);
      console.log(polygon, "polygon");
      overview.getSource("maine").setData({
        type: "FeatureCollection",
        features: [polygon]
      });
    },
    onMove(e) {
      var coords = e.lngLat;
      var canvas = map.getCanvasContainer();
      canvas.style.cursor = "grab";
      map.setCenter(coords);
      this.extent();
    },
    onUp(e) {
      var coords = e.lngLat;
      var canvas = map.getCanvasContainer();
      overview.off("mousemove", this.onMove);
      overview.off("touchmove", this.onMove);
    }
  },
  mounted() {
    let self = this;
    var map = this.initmap("map", 5);
    var overview = this.initmap("overview", 1);
    overview.scrollZoom.disable();
    overview.dragPan.disable();
    window.map = map;
    window.overview = overview;
    self.initextent();
    map.on("drag", self.mapdrag);
    map.on("zoom", self.mapzoom);
    var canvas = map.getCanvasContainer();
    overview.on("mousedown", "maine", function(e) {
      e.preventDefault();
      console.log(e, "eeeeeeeeeeeeeeeee");
      canvas.style.cursor = "grab";
      overview.on("mousemove", self.onMove);
      overview.once("mouseup", self.onUp);
    });
  }
};
</script>
<style scoped>
.datalist {
  width: 500px;
  height: 200px;
  position: absolute;
  /* background: pink; */
  left: 5px;
  top: 5px;
}
</style>