更改移动设备上的Leaflet层控件图标？
更改移动设备上的Leaflet层控件图标？
提问于 2020-07-31 17:41:41
我怀着极大的兴趣关注了这篇文章的Change leaflet layer control icons，并实现了建议的代码来更改传单图层切换按钮的图标。这在桌面浏览器上运行良好，请参阅图像collapsed layers switch和expanded layers switch
然而，我在不同的移动设备上测试了相当多的浏览器，它总是出现在图层开关(collapsed layers switch, mobile)上的默认传单图标。我们如何在移动设备上更改图标？
回答 1
Stack Overflow用户
发布于 2020-07-31 22:42:29
在尝试了一段时间后，我想到了https://jsitor.com/WIM0PnQH2。它适用于我在安卓9、火狐和Chrome浏览器上的工作。
我通常不会建议深入到Leaflet内部方法，但我没有看到一种更干净的实现方式。您还需要实现CSS。
var map = L.map("map").setView([19.04469, 72.9258], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var controllayer1 = L.control.layers({ map: map }, {}).addTo(map);
L.Control.Layers2 = L.Control.Layers.extend({
_initLayout: function () {
L.Control.Layers.prototype._initLayout.call(this);
//replacing rather than overriding in case leaflet internal methods change in the future
let ownclasses = this._layersLink.getAttribute('class');
this._layersLink.setAttribute('class', ownclasses.replace('leaflet-control-layers-toggle', 'leaflet-control-layers-toggle-2'))
}
});
L.control.layers2 = function (...args) {
return new L.Control.Layers2(...args);
};
var controllayer2 = L.control.layers2({ map: map }, {}).addTo(map);#map {
height: 500px;
width: 80%;
}
.leaflet-bar a,
.leaflet-control-layers-toggle-2 {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-control-layers-toggle-2 {
background-image: url(https://mejrs.github.io/mejrs.github.io/images/favicon_skavid_map.png);
width: 36px;
height: 36px;
}
//Should really be a higher detail version
.leaflet-retina .leaflet-control-layers-toggle-2 {
background-image: url(https://mejrs.github.io/mejrs.github.io/images/favicon_skavid_map.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle-2 {
width: 44px;
height: 44px;
}
.leaflet-control-layers-expanded .leaflet-control-layers-toggle-2 {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63189379
复制相关文章
相似问题
腾讯云开发者
