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里有问题其实是 ...
随机推荐
- [考试总结]noip模拟6
我好菜啊 真上次第二这次倒二... 因为昨天还没有改完所有的题所以就留到今天来写博客了 这次考试总结的教训有很多吧,反正处处体现XIN某人的laji,自己考试的是后本以为一共四个题目,三个题目都没有看 ...
- Python基础之分离文件名和文件路径
参考链接:https://blog.csdn.net/qq_42110481/article/details/81104182 分离文件名与文件路径: import os if __name__ == ...
- OpenSUSE Leap 42.1 KDE Ultmate Linux Distribution终极Linux系统试用与SSH连接
系统安装环境: #一台旧笔记本电脑 #CPU Intel(R) Core(TM) i3 M 380 2.53GHz (4核) #内存 1G #硬盘存储 250G #系统型号 OpenSUSE Leap ...
- 3分钟搭建一个网站?腾讯云Serverless开发体验
作为一个开发者,应该都能理解一个网站从开发到上线,要经过很多繁琐的步骤. 编写代码,部署应用,部署数据库,申请域名,申请SSL证书,域名备案,到最终上线起码要几天时间. 作为一个不精通代码的业务玩家, ...
- JBoss JMXInvokerServlet 反序列化漏洞
poc地址:https://cdn.vulhub.org/deserialization/DeserializeExploit.jar
- 「必知必会」最细致的 ArrayList 原理分析
从今天开始也正式开 JDK 原理分析的坑了,其实写源码分析的目的不再是像以前一样搞懂原理,更重要的是看看他们编码风格更进一步体会到他们的设计思想.看源码前先自己实现一个再比对也许会有不一样的收获! ...
- Java 线程安全的实现方法
概述 在软件业发展的初期,程序编写都是以算法为核心的,程序员会把数据和过程分别作为独立的部分来考虑,数据代表问题空间中的客体, 程序代码则用于处理这些数据,这种思维方式直接站在计算机的角度去抽象问题和 ...
- Thunder DLL Hijacking
简记 原理基础啥的俺也不写了 1.寻找DLL 生成恶意dll文件 拿calc测试 2.放入 3.打开
- 双非本科字节跳动Android面试题分享(已拿offer)
基本情况 本人系非985非211普通本科生一枚,有实习有项目经历但成绩普通,在面试前刷了很多面经.面试题,这里也把自己的分享下,做个回报好了,顺便攒攒人品,一到这种时候人就迷信起来了. 面试是以视频面 ...
- Spring学习笔记--面向切面编程(AOP)
什么是AOP AOP(Aspect Oriented Programming),意为面向切面编程,通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的 ...