Leaflet 操作OSM(OpenStreetMap) 设置地图style
Leaflet是一个开源的地图操作库,其中mapbox是其一个插件,这个插件可以自定义想要的地图格式。https://www.mapbox.com/mapbox-gl-js/api/这是其官网地址。
进去之后要先进行注册获取开发权限的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);

这是应用之后的效果展示~
希望对追求完美的朋友有帮助。
本文为博主原创,如需转载请注明出处。
Leaflet 操作OSM(OpenStreetMap) 设置地图style的更多相关文章
- 百度地图API示例之设置地图显示范围
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之根据城市名设置地图中心点
代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
- 百度地图API示例之设置地图最大、最小级别
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- ArcGIS api for javascript——用第二个服务的范围设置地图范围
描述 本例展示了如何设置地图的范围为地图其中一个图层的范围.本例有两个图层:ArcGIS Online上的世界地图图层ArcGISTiledMapServiceLayer和堪萨斯州的要素的图层ArcG ...
- arcgis server账号需要设置地图缓存的访问权限
如果gis服务起不来,那么可以看看arcgis server账号有没有设置地图缓存的访问权限,有可能arcgis server账号没有这个文件夹的访问权限. 本文用菊子曰发布
- C#反射技术的简单操作(读取和设置类的属性)
public class A { public int Property1 { get; set; } } static void Main(){ A aa = new A(); Type type ...
- Echarts 设置地图上文字大小及颜色
Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...
- 为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别
一直很困惑为什么canvas标签和其他标签不一样,宽高需要设置在canvas标签里,设置在style里就会有问题. 纯粹个人理解,有错误欢迎指出. > 结论写在头 设置在style里有问题其实是 ...
随机推荐
- python -- 负数平方根-虚数的使用
负数的平方根是虚数. 不能使用sqrt,因为它只能处理浮点数,而虚数是完全不同的--这也是由另外一个叫做cmath(即 complex math, 复数)的模块来实现这些功能的原因. >> ...
- windows 10家庭版安装SQL Server 2014出现.net 3.5失败问题解决。
在安装SQL Server 2014的过程中,出现.net 3.5缺失,导致失败问题. 后来,研究了下,解决思路如下: 先将电脑更新到了windows 10专业版,(因为需要用到专业版才有的组策略管理 ...
- 模版引擎RazorEngine简介
ASP.NET MVC的Razor想必大家都比较熟悉,这里介绍一个独立于ASP.NET的RazorEngine. RazorEngine是一个开源的项目,它的基础就是ASP.NET MVC的Razor ...
- 偷天换日 树形DP+背包
A. 偷天换日 内存限制:256 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目描述 神偷对艺术馆内的名画垂涎欲滴准备大捞一把.艺术馆由若干个展览厅和若干 ...
- 3个月零基础入门Python+数据分析,详细时间表+计划表分享
大家好,我是白云. 今天想给大家分享的是三个月零基础入门数据分析学习计划.有小伙伴可能会说,英语好像有点不太好,要怎么办?所以今天我给大家分享的资源呢就是对国内的小伙伴很友好,还附赠大家一份三个月学 ...
- Salesforce Integration 概览(五) Remote Call-In(远程操作 外部->salesforce)
本篇参考:https://resources.docs.salesforce.com/sfdc/pdf/integration_patterns_and_practices.pdf 本篇博客介绍 Re ...
- 月薪60k,仍无人问津,腾讯阿里到底有多缺这类程序员?
不知道大家发现没,近几年,国内对音视频人才需求越来越大了,在某招聘网站上居然薪酬高达60k. 从未来的大趋势来看,随着5G时代的到来,音视频慢慢变成人们日常生活中的必须品.除了在线教育.音视频会议.即 ...
- 线程状态Thread.State
线程状态Thread.State 线程状态.线程可以处于下列状态之一: NEW 至今尚未启动的线程处于这种状态. RUNNABLE 正在 Java 虚拟机中执行的线程处于这种状态. BLOCKED 受 ...
- srt文件的时间轴平移处理
有时srt字幕文件与视频文件的时间不完全吻合,有一个时间差,这就需要对srt文件的时间轴进行平移,具备这个功能的软件很多,比如:Subtitle Tool, subresync, sabbu, Sub ...
- anaconda的报错:Anaconda:There is an instance of anaconda navigator already running error
anaconda的报错:Anaconda:There is an instance of anaconda navigator already running error 出现这个问题的时候人蒙了,主 ...