Leaflet 操作OSM(OpenStreetMap) 设置地图style
2017-03-30 14:08
846 查看
Leaflet是一个开源的地图操作库,其中mapbox是其一个插件,这个插件可以自定义想要的地图格式。https://www.mapbox.com/mapbox-gl-js/api/这是其官网地址。
进去之后要先进行注册获取开发权限的key,这个与百度地图类似。
它提供了几种默认的style,本人对这个黑色格外钟爱,也可以自行设置DIY的style。
下面就说如何使用Leaflet加载OSM并应用这个style。在这里我打开的是Maxbox Dark 这个样式。
选择右侧的Leaflet会出现一个连接,该链接就是改格式的瓦片所在地址,将这个地址作为地图的url即可更改样式。
这是应用之后的效果展示~
希望对追求完美的朋友有帮助。
本文为博主原创,如需转载请注明出处。
进去之后要先进行注册获取开发权限的key,这个与百度地图类似。
它提供了几种默认的style,本人对这个黑色格外钟爱,也可以自行设置DIY的style。
下面就说如何使用Leaflet加载OSM并应用这个style。在这里我打开的是Maxbox Dark 这个样式。
选择右侧的Leaflet会出现一个连接,该链接就是改格式的瓦片所在地址,将这个地址作为地图的url即可更改样式。
var osmUrl = 'https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=your key', osm = L.tileLayer(osmUrl, { maxZoom: 18, minZoom: 11 }); var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(0,0), 11);
这是应用之后的效果展示~
希望对追求完美的朋友有帮助。
本文为博主原创,如需转载请注明出处。
相关文章推荐
- 利用OpenStreetMap(OSM)数据搭建一个地图服务
- [原]在GeoServer中为OpenStreetMap数据设置OSM样式
- leaflet加载离线OSM(OpenStreetMap)
- 利用OpenStreetMap(OSM)数据搭建一个地图服务
- OpenStreetMap初探(六)——获取地图数据
- Bing Maps进阶系列八:在Bing Maps中集成OpenStreetMap地图
- PostgreSQL+PostGIS安装以及用Osmosis导入openstreetmap地图数据
- OpenStreetMap初探(八)——制作地图瓦片Kosmos及Maperitive使用
- Bing Maps进阶系列八:在Bing Maps中集成OpenStreetMap地图
- OpenStreetMap开放街道图(OSM)
- OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)
- Android OpenStreetMap(OSM) 使用 osmbonuspack 进行导航
- 转 OpenStreetMap初探(六)——获取地图数据
- 共享免费世界地图OpenStreetMap(OSM)
- osm 数据格式(openstreet map)与Route --by wangsh
- osm 数据格式(openstreet map)与Route
- Bing Maps进阶系列八:在Bing Maps中集成OpenStreetMap地图 推荐
- Android OpenStreetMap(OSM) 使用 osmbonuspack 进行导航
- OpenStreetMap初探(八)——制作地图瓦片Kosmos及Maperitive使用
- OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)