mapbox中添加鹰眼

 main.js

import 'mapbox-gl/dist/mapbox-gl.css'
import mapBoxGl from 'mapbox-gl'
Vue.prototype.$mapboxgl = mapBoxGl

html:

<div id="overviewMap" class="overviewMap"></div>

js:

this.$mapboxgl.accessToken ='pk.eyJ1IjoibGlqaWFuZ2ppYW5namlhbmciLCJhIjoiY2s2b2czbmltMG14cDNkbXpldjhkd3c3ZiJ9.zBaMzJo2X2UVPyFTtd5hEQ'
window.ovmap = new this.$mapboxgl.Map({
        container: "overviewMap",
        style: "mapbox://styles/mapbox/streets-v11",
        center: 5,
        zoom: 2
      });
      var map_x; //地图的x坐标
      var map_y; //地图的y坐标
      var overview_x; //鹰眼的x坐标
      var overview_y; //鹰眼的y坐标
      var map_zoom; //地图的比例尺
      var overview_zoom; //鹰眼的比例尺

      // 拖拽
      function mapdrag() {
        map_x = map.getCenter().lng;
        map_y = map.getCenter().lat;
        ovmap.setCenter([map_x, map_y]);
      }
      function overviewdrag() {
        overview_x = ovmap.getCenter().lng;
        overview_y = ovmap.getCenter().lat;
        map.setCenter([overview_x, overview_y]);
      }
      //   放大缩小
      function mapzoom() {
        map_zoom = map.getZoom();
        ovmap.setZoom(map_zoom - 4);
      }
      function overviewzoom() {
        overview_zoom = ovmap.getZoom();
        map.setZoom(overview_zoom + 4);
      }

      map.on("drag", mapdrag);
      map.on("zoom", mapzoom);
      let overview = document.getElementById("overviewMap");
      overview.addEventListener("mouseover", function() {
        //移除地图的拖拽监听
        map.off("drag", mapdrag);
        map.off("zoom", mapzoom);
        //添加鹰眼的拖拽监听
        ovmap.on("drag", overviewdrag);
        ovmap.on("zoom", overviewzoom);
      });
      overview.addEventListener("mouseout", function() {
        //添加地图的拖拽监听
        map.on("drag", mapdrag);
        map.on("zoom", mapzoom);
        //移除鹰眼的拖拽监听
        ovmap.off("drag", overviewdrag);
        ovmap.off("zoom", overviewzoom);
      });

css:

 #overviewMap {
    width: 160px;
    height: 160px;
    position: absolute;
    right: 10px;
    top: 200px;
    border: 2px solid gray;
  }
  .mapboxgl-ctrl-attrib {
    display: none;
  }

效果图：

 

 

参考：https://blog.csdn.net/smss007/article/details/104015410

鹰眼控件github:https://github.com/aesqe/mapboxgl-minimap

在线演示 :http://aesqe.github.io/mapboxgl-minimap/