vue+mapboxgl 鹰眼展示

一、实现效果

话不多说直接上图，查看了 这个博主地址，openlayers3 自定义鹰眼缩略图_凡事有果必有因-CSDN博客_openlayers鹰眼图  他是用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>

    <!-- <baseMap></baseMap> -->
  </div>
</template>
<script>
//import baseMap from "./baseMap.vue";
export default {
  name: "Map",
  components: { 
    //baseMap 
  },
  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();
    },
    // 放大缩小
    mapzoom() {
      this.map_zoom = map.getZoom();
      overview.setZoom(this.map_zoom - 4);
      this.map_x = map.getCenter().lng;
      this.map_y = map.getCenter().lat;
      overview.setCenter([this.map_x, this.map_y]);
      this.extent();
    },
    //移动大图，鹰眼始终在中间
    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();
      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>