宣传单 - 更改地图颜色

Question

是否可以像这样设计传单地图(水:灰色;土地:黄色;)？我无法在文档中找到参考.http://leafletjs.com/features.html

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

我想从传单的infowindows中受益,但我必须像这样设计地图.

Answer 1

最简单的方法是通过将它们添加为Leaflet的Polygons来实现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库获取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的工具,它允许您生成自己的tileset.这将是一个完美的解决方案,它不会有任何上述缺点,你可以几乎所有的风格.唯一的缺点是你需要自己托管瓷砖.