MapBox添加比例尺和鹰眼

2023-10-20 05:20

文章标签 mapbox 鹰眼比例尺

本文主要是介绍MapBox添加比例尺和鹰眼，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

MapBox是提供了比例尺微键，但是不是很好看，也没有鹰眼微键，所以我自己写了一个鹰眼微键。
在这里插入图片描述

1、首先是比例尺，初始化Map以后直接添加即可。

   var scale = new mapboxgl.ScaleControl({maxWidth: 100,unit: 'metric'});map.addControl(scale, "bottom-left");

加载完了如上图，但是要怎么才能实现上图2的效果呢？那就需要你自己修改CSS样式了

.mapboxgl-ctrl.mapboxgl-ctrl-scale {height: 10px;background-color:transparent;line-height:10%;text-align:center
}

2、然后是鹰眼，这个是没有的，然后我自己写了一个。

var ovmap = new mapboxgl.Map({container: "overview", // container idstyle: "mapbox://styles/mapbox/streets-v11", // stylesheet locationcenter: [108, 35], // starting position [lng, lat]zoom: 1 // starting zoom});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("overview");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);	});