OpenStreetMap 灰度图块？答案

【问题标题】：OpenStreetMap Grayscale tiles?OpenStreetMap 灰度图块？
【发布时间】：2015-09-20 21:24:34
【问题描述】：

我正在积累网络开发经验，我的下一个项目是一些网络地图。我查看了 Google Maps 和 Open Street Maps，并希望将 OSM 用于一个项目，因为它包含有关建筑足迹的更详细信息。

我尝试过设计 Google Maps 的样式，这看起来相当简单，但我对 OSM 有点迷茫。我已经到了尝试创建自己的渲染（使用 TileMill）的地步，但是由于数据量，这会使我的系统崩溃。

我基本上需要的是这个（但对于英国）；

http://maps.stamen.com/#terrain/12/37.7706/-122.3782

您有什么可以推荐的资源，或者创建我自己的难易程度如何？我想我需要创建地图（使用 TileMill 或类似工具，然后找到我自己的服务器来托管），或者是否有一种简单的方法可以将标准地图转换为灰度？

我想让它尽可能简单，请问有什么建议吗？

【问题讨论】：

标签： openstreetmap

【解决方案1】：

您可以使用https://github.com/Zverik/leaflet-grayscale 以灰度显示任何图块层。这是一个建立在传单地图展示库之上的插件。

【讨论】：

谢谢。但是，这只允许我放大到某个点。不幸的是不够远，看不到建筑物。这个可以改吗？
您应该能够像普通的TileLayers 一样自定义maxZoom 选项。你有一个 jsfiddle 或 gist 你看到这种行为吗？

【解决方案2】：

将标准地图转换为灰度：我可能已经很晚了，但对于遇到这个问题的其他人来说：如果您使用 OpenLayers 和标准 OpenStreetMap-Tile 处理 HTML 和 Javascript，我找到了一个非常简单的解决方案-颜色分层。我从这里获取了解决方案：https://openlayers.org/en/latest/examples/semi-transparent-layer.html

我对 Web 开发了解不多，但这个解决方案对我有用。在创建地图时，如链接示例中的 main.js 中所做的那样，定义了一个类名（'bw'）

      className: 'bw',

可以在 index.html 中使用来操作它在部件中的样式：

    <style>
      .bw {
        filter: grayscale(100%);
      }
    </style>

我的应用程序正在更改来自 QGIS 的 qgis2web 扩展的预构建网络地图。我能够将图块层从背景图转换为灰度图，这样结果会更加突出。

【讨论】：