mapbox中添加鹰眼

亦凉 2021-08-27 16:07 619阅读 0赞

main.js

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

html:

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;
      }

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

参考：[https://blog.csdn.net/smss007/article/details/104015410][https_blog.csdn.net_smss007_article_details_104015410]

鹰眼控件github:[https://github.com/aesqe/mapboxgl-minimap][https_github.com_aesqe_mapboxgl-minimap]

在线演示 :[http://aesqe.github.io/mapboxgl-minimap/][http_aesqe.github.io_mapboxgl-minimap]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/1ce6842d599848ec814d811014cd99fe.png
[https_blog.csdn.net_smss007_article_details_104015410]: https://blog.csdn.net/smss007/article/details/104015410
[https_github.com_aesqe_mapboxgl-minimap]: https://github.com/aesqe/mapboxgl-minimap
[http_aesqe.github.io_mapboxgl-minimap]: http://aesqe.github.io/mapboxgl-minimap/