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的更多相关文章

  1. 百度地图API示例之设置地图显示范围

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  2. 百度地图API示例之根据城市名设置地图中心点

    代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

  3. 百度地图API示例之设置地图最大、最小级别

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  4. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  5. ArcGIS api for javascript——用第二个服务的范围设置地图范围

    描述 本例展示了如何设置地图的范围为地图其中一个图层的范围.本例有两个图层:ArcGIS Online上的世界地图图层ArcGISTiledMapServiceLayer和堪萨斯州的要素的图层ArcG ...

  6. arcgis server账号需要设置地图缓存的访问权限

    如果gis服务起不来,那么可以看看arcgis server账号有没有设置地图缓存的访问权限,有可能arcgis server账号没有这个文件夹的访问权限.  本文用菊子曰发布

  7. C#反射技术的简单操作(读取和设置类的属性)

    public class A { public int Property1 { get; set; } } static void Main(){ A aa = new A(); Type type ...

  8. Echarts 设置地图上文字大小及颜色

    Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...

  9. 为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别

    一直很困惑为什么canvas标签和其他标签不一样,宽高需要设置在canvas标签里,设置在style里就会有问题. 纯粹个人理解,有错误欢迎指出. > 结论写在头 设置在style里有问题其实是 ...

随机推荐

  1. nacos Failed to obtain JDBC Connection 连接异常

    在conf/目录下,将application.properties.example 改名为bootstrap.properties 将连接数据库信息添加到末尾 # db mysql spring.da ...

  2. php header 设置文件下载

    控制器 php 代码: $filepath = "http://www.jiesen365.com/uploadfile/20150519044903-897.pdf"; //下载 ...

  3. Docker 安装与卸载

    Docker卸载与安装 卸载旧的版本 卸载 yum -y remove docker-ce docker-cli-io containerd.io rm -rf var /var/lib/docker ...

  4. lanm环境

    1,apache (1),安装apache # yum install httpd (2)查看apaceh版本 # httpd -v (3)查看linux版本 # cat /etc/centos-re ...

  5. Mybatis学习笔记-第一个Mybatis程序

    思路 搭建环境 搭建数据库(略) CREATE DDATABASE CREATE TABLE INSERT VALUES 新建项目 普通Maven项目 删除src文件夹 --> 建立父工程 导入 ...

  6. NCB | 定量蛋白质组学揭示细胞外泌体通用标志物Syntenin-1

    外泌体 (exosomes) 是由哺乳动物细胞通过"内吞-融合-外排"等机制,主动向胞外释放的纳米级 (直径40~60 nm) 双层囊泡小体,携带蛋白质.核酸.脂质等多种生物活性分 ...

  7. 2020年Android开发市场真的饱和了吗?

    公司在杭州,根据我的不客观数据体验来看,最饱和的是iOS,同样发布一个职位iOS是其他技术岗位10倍的投递量. 当然Android作为一个已经市场化十余年的技术门类,它必然早已经是成熟常态.这样的技术 ...

  8. [C++]-vector 向量

    什么是向量容器 向量容器是一种支持高效的随机访问和高效的尾部插入新元素的容器. 向量容器一般实现为一个动态分配的数组,向量中的元素连续的存放在这个数组中,因此对向量容器进行随机访问具有和动态访问动态数 ...

  9. 计算机专业学了快一年, 只会一点C语言,你好意思说自己是IT专业的?

    目录 一.C/C++入门阶段 学习视频推荐:C++入门基础[B站 小甲鱼] 二.C/C++开发进阶 学习视频推荐:C++进阶[慕课网 免费课] 三.C++开发高级 视频教程:程序设计[中国大学MOOC ...

  10. Linux引导过程和服务过程

    目录 一.Linux操作系统引导过程 1.1.开机自检 1.2.MBR引导 1.3.GRUB菜单 1.4.加载Linux内核 1.5.init进程初始化 二.系统初始化进程 2.1.init进程 2. ...