传单-更改 map 颜色

Question

是否可以像这样设置传单 map 的样式(水:灰色；土地:黄色；)？
我无法在文档中找到引用。 http://leafletjs.com/features.html

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

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

Answer 1

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

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和Mike Bostock很棒的 D3库。这是一个简单的示例: http://bost.ocks.org/mike/leaflet/它不受平移重绘的影响，但更难掌握。

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