Leaflet - 更改地图颜色

Question

能否将叶片地图样式设为这样（水：灰色；陆地：黄色;)？ 我在文档中找不到参考资料。http://leafletjs.com/features.html

如果可以，是否像谷歌地图那样容易，还是必须以某种方式着色表示陆地和水的多边形？

我想利用leaflet的信息窗口，但必须将地图样式设为这样。

- Philipp Gfeller

---

这是一篇旧帖子，但我通过谷歌搜索找到了它；那么CSS滤镜呢？会对计算机/图形处理器造成很大的负担吗？理论上，您可以修改地图的外观。例如，为深色模式执行此操作以延长移动设备（OLED？）的电池寿命。 - Mathijs Segers

Answer 1

最简单的方法是通过将它们作为多边形添加到 Leaflet 的 L.GeoJSON 来完成。首先，您需要找到一个适当的世界边界数据集。我在这里找到了一个：https://github.com/johan/world.geo.json 将 world.geo.json 文件保存到您自己的服务器上，以便您可以使用它。现在初始化一个简单的地图：

var map = L.map('map', {
    'center': [0, 0],
    'zoom': 0,
    'layers': [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © OpenStreetMap contributors'
        })
    ]
});

使用您喜爱的XHR库（例如，我在此示例中使用jQuery）获取GeoJSON文件，然后使用该数据初始化一个GeoJSON图层并进行一些样式设置：

$.getJSON('world.geo.json', function (geojson) { // load file
    L.geoJson(geojson, { // initialize layer with data
        style: function (feature) { // Style option
            return {
                'weight': 1,
                'color': 'black',
                'fillColor': 'yellow'
            }
        }
    }).addTo(map); // Add layer to map
});

就是这样，没什么比这更简单的了。以下是在 Plunker 上的一个可行示例：

http://plnkr.co/edit/UGQ9xt?p=preview

（请注意，我直接通过 Gitraw/Github 加载 GeoJSON 文件，但在生产站点中不应该这样做）

这里是 L.GeoJSON 的参考文献：

http://leafletjs.com/reference.html#geojson

编辑：其他选项更加复杂，但没有你在评论中提到的一些缺点，以下是我能想到的最好的选项：

使用 Leaflet 和强大的D3库的结合。这里有一个快速示例：http://bost.ocks.org/mike/leaflet/ 它不会在平移时重绘，但难以理解。

另一种解决方案是使用Mapbox。他们有一个名为TileMill的工具，可让您生成自己的瓷砖集。那将是完美的解决方案，它不会有任何提到的缺点，并且几乎可以设置所有样式。唯一的缺点是您需要自己托管瓷砖。

- iH8

---

您的解决方案确实很简单，谢谢。尽管存在一些缺点，比如边框与轮廓线不完全匹配（使用更精确的数据集可能会更好），或者多边形在拖动地图时直到鼠标释放才更新。不幸的是，客户对颜色变化非常兴奋，并且可能会吹嘘提到的缺点。 - Philipp Gfeller

一个更精确的数据集确实是解决方案，我只是在演示。它会变得更大，所以加载时间会更长，但可以通过将数据集转换为 topojson 并在客户端上进行转换来解决这个问题。还有其他使用 Leaflet 的选项，我会在我的答案中添加它们。不用谢，您随时欢迎，这就是 SO 的目的。如果这是您问题的解决方案，请接受答案，以便其他遇到同样问题的人也能找到已批准的解决方案。 - iH8

@iH8因提到TileMill而获得+1up。它的表现非常棒。 - FredFury

我试图改变水的颜色，但是一直没有成功。有什么想法吗？ - Slartibartfast

Plunker已经消失了 :( - user122222

Answer 2

补充一下@iH8的回答：

我曾使用TileMill和TileStache来自定义一个基本的世界地图，效果很棒。它非常易于使用。如果你有需要，它还支持使用shape文件。

这里是.mss文件，你可以开始调整它以接近你想要的颜色方案:

Map {
  background-color: #e0e0e0;
}

#countries {
  ::outline {
    line-color: #000000;
    line-width: 2;
    line-join: round;
  }
  polygon-fill: #ffce0c;
}

制作完美的地图后，您可以生成MBtiles并使用TileStache进行服务。

这里有一个关于如何使用TileStache的tut教程。

希望能对您有所帮助！

- FredFury

---

页面已经上线了，但感谢您的反馈。这对未来的项目可能会有用。 - Philipp Gfeller