嘿，作为初级Web开发者遇到这个问题很正常，我看了你的代码后马上就找到问题根源啦！

问题原因 #

你在代码中同时添加了两个瓦片图层：

1. 第一个是正常的彩色OpenStreetMap图层：

L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18,
zoomControl: true,
detectRetina: true
}).addTo(map);

2. 第二个是带有100%灰度滤镜的Wikimedia瓦片图层，而且它被添加在第一个图层之后，完全覆盖了彩色背景，导致地图显示灰色：

let myFilter = ['grayscale:100%'];
let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
filter: myFilter,
}).addTo(map);

解决方案 #

你可以根据需求选择以下两种方法之一：

方法1：移除灰度滤镜图层

直接删除这段带有灰度滤镜的图层代码，保留原来的彩色OSM图层即可。删除后地图就会立即恢复正常彩色显示。

方法2：修改滤镜（如果需要保留Wikimedia图层但要彩色）

如果想使用Wikimedia的瓦片图层，只需要把灰度滤镜去掉，将myFilter改为空数组：

let myFilter = []; // 移除灰度滤镜
let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
filter: myFilter,
}).addTo(map);

同时建议你只保留一个瓦片图层，避免图层叠加导致的显示冲突和不必要的性能损耗。

修改后的核心代码示例 #

这里是移除灰度图层后的核心地图初始化代码：

var map = L.map('mapdiv', { editable: true, fadeAnimation: false }).setView([54.35070881441067, 18.641191756395074], 12);
// 只保留彩色OSM图层
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18,
zoomControl: true,
detectRetina: true
}).addTo(map);

// 以下你原有的标记、AJAX加载点位等代码可以保持不变

这样修改后，你的地图就会恢复正常的彩色背景啦！

内容的提问来源于stack exchange，提问作者trifelak