传单 - 更改地图颜色

Question

是否可以像这样设置传单地图的样式（水：灰色；土地：黄色；）？我无法在文档中找到参考。 http://leafletjs.com/features.html

如果是，是否像使用 google 地图一样容易，还是我必须以某种方式为代表陆地和水的多边形着色？

我想从传单的信息窗口中受益，但我必须像这样设置地图样式。

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 &copy; OpenStreetMap contributors'
        })
    ]
});

使用您最喜欢的 XHR 库获取 GeoJSON 文件（在此示例中我使用 jQuery），然后使用数据初始化 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 和 awesome D3 library by Mike Bostock. Here's a quick example: http://bost.ocks.org/mike/leaflet/ 它不会受到 pan 重绘的影响，但更难掌握。

另一种解决方案是使用 Mapbox They have a tool called TileMill，它允许您生成自己的图块集。那将是完美的解决方案，它不会有任何提到的缺点，您几乎可以设计所有内容。唯一的缺点是您需要自己托管磁贴。

Answer 2

添加@iH8 给出的答案：

我已经使用 TileMill with TileStache 自定义了一个非常基本的世界地图，它看起来很棒。它真的很容易使用。它还支持使用形状文件——如果您愿意的话。

这是 .mss，您可以开始使用它来接近您想要的配色方案：

Map {
  background-color: #e0e0e0;
}

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

制作漂亮的地图后，您可以生成 MBtiles 并使用 TileStache 提供它。

这里是关于使用 TileStache 的 tut。希望对您有所帮助！

传单 - 更改地图颜色

Leaflet - change map color

leaflet