leaflet如何去掉或自定义左下角的链接和版权

2023-09-23 10:20:39

缘起

有时候为了项目更加简洁美观或者需要自定义地图右下角的链接标志，还有其它可能的一些小心思，我们想去掉它或者自定义内容来替代。
高德、腾讯、百度地图的官方API貌似是不提供这个功能的，毕竟自家广告还是要有的。
leaflet在这一点上还是非常值得称道的。

官方API
Control.Attribution

实现方法

如何移除右下角

不废话，上Demo

var map = L.map('map', { attributionControl:false });

如何自定义logo和版权信息

var map = new L.Map('map').setView([0, 0], 0);
attribution = map.attributionControl;
// setPrefix是替换默认的leaflet前缀改为自定义的logo和文字链接作为前缀
attribution.setPrefix('<img src="logo.png">');
// addAttribution 是在前缀后添加附属信息
attribution.addAttribution('Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>');

知识扩展

leaflet的control API都是啥？

Zoom：通常见到的＋和－样式的放大缩小按钮，位置可自定义，位置可自定义默认在左上角；
Attribution：就是我们现在说的地图角落显示版权、LOGO等附加信息的地方，位置可自定义，默认在右下角；
Layers：就是铺满整个地图容器的底图
Scale：比例尺，位置可自定义，默认在左下角；

参考链接

https://*.com/questions/33076745/possible-to-remove-leaflet-link-with-image
control.attribution API

码农公寓