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 id
		style: "mapbox://styles/mapbox/streets-v11", // stylesheet location
		center: [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);	
	});

 弄了两个div，一个是Map，一个是鹰眼。然后new了两个mapboxgl（Map的那个就没写，都一样的。）效果图如下：

没有效果图，不会弄gif图，wtm。。。后期有时间补一张GIF图吧