MapBox添加比例尺和鹰眼

最新推荐文章于 2024-03-19 09:07:32 发布

豆脑就要吃咸的

最新推荐文章于 2024-03-19 09:07:32 发布

阅读量4.5k

点赞数 3

分类专栏： MapBox 文章标签： MapBox 鹰眼比例尺

本文链接：https://blog.csdn.net/smss007/article/details/104015410

版权

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"

关注