如何自定义Leaflet Map CSS

时间:2013-10-14 19:28:39

标签: javascript maps leaflet

我想改变传单地图的样式。我想让它看起来更像谷歌地图默认主题。是否有不同的css文件被引用以不同的方式设置地图样式?在任何地方都有主题存储库吗?

3 个答案:

答案 0 :(得分:8)

Leaflet有一个插件,它有许多不同的底图图块集。它被称为leaflet-providers。其中一些非常好。

通过another plugin您可以获得Google,Bing和Yandex的图块集(虽然不是Google可自定义的图块集)。

最后,您可以通过Cloudmade制作自己的自定义图块集并将其加载到Leaflet中。前500,000个瓷砖(每月)是免费的,但如果您需要更多,您需要付费。在基本的Leaflet教程中,他们有一行:

L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

您可以在创建自定义磁贴集后使用Cloudmade中提供的详细信息修改网址。

答案 1 :(得分:3)

Leaflet只是用于显示各种地图的库。您可能使用OpenStreetMap项目中的地图,但如果您想创建自己的地图样式,则需要使用专门的软件,如Mapbox的TileMill,设置数据库,下载原始数据等。

无论如何,OSM地图的当前渲染是用CartoCSS编写的,你可以找到Github repo here

您可以在OpenStreetMap wiki找到各种地图效果图。

答案 2 :(得分:0)

您还可以使用Mapbox Studio来设置地图样式-它们可以与Leaflet结合使用/一起使用