Question

是否可以像这样设计传单地图（水：灰色;土地：黄色;）？我无法在文档中找到引用。 http://leafletjs.com/features.html

如果是，谷歌地图是否容易，或者我必须以某种方式为代表土地和水的多边形着色？

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

enter image description here

Answer 1

最简单的方法是通过Leaflet＆＃39; 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和Mike Bostock的真棒D3库的组合。这是一个简单的例子：http://bost.ocks.org/mike/leaflet/它并没有受到重绘的影响，但它更难掌握。

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

Answer 2

要添加答案@ iH8给出：

我已使用TileMill和TileStache来自定义一个非常基本的世界地图，它看起来很棒。这很容易合作。它还支持使用形状文件 - 如果你这么倾向的话。

这是.mss你可以开始坐下来接近你想要的配色方案：

Map {
  background-color: #e0e0e0;
}

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

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

这是使用TileStache的tut。希望有所帮助！

宣传单 - 更改地图颜色

2 个答案: