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. linux下快速安装pyenv管理多版本python

    起因 一直服务器python项目都是放docker跑,这次为了测试,不得不在宿主机跑,就必须安装python3.7,但是ubuntu16.04下有点麻烦 尝试 源码安装,懒,算了,也不想污染服务器环境 ...

  2. 深入刨析tomcat 之---第12篇 how tomcat works( 第17章 ) 解析catalina.bat 梳理启动流程

    我们如何启动tomcat呢? 答案是双击startup.bat文件,这个文件在bin目录下 @echo off    不显示批处理命令 rem Licensed to the Apache Softw ...

  3. 🔥 LeetCode 热题 HOT 100(41-50)

    102. 二叉树的层序遍历 思路:使用队列. /** * Definition for a binary tree node. * public class TreeNode { * int val; ...

  4. 记一次WindowsServer2012提权 - 烂土豆

    此次主题:烂土豆 shell咋拿的 我也忘了 好像是添加友情链接那里还是啥 不重要了 直接获取shell后 先用systeminfo > 1.txt了一下 然后放到了 windows-explo ...

  5. 线程休眠_sleep

    线程休眠_sleep sleep(时间)指定当前线程阻塞的毫秒数: sleep存在异常InterruptedException: sleep时间到达后线程进入就绪状态: sleep可以模拟网络延时,倒 ...

  6. IOC(概念和原理)

    什么是 IOC (1)控制反转,把对象创建和对象之间的调用过程,交给 Spring 进行管理 (2)使用 IOC 目的:为了耦合度降低 (3)做入门案例就是 IOC 实现 IOC 底层原理 xml 解 ...

  7. JAVA基础语法:java编程规范和常用数据类型(转载)

    JAVA基础语法:java编程规范和常用数据类型 摘要 本文主要介绍了最基本的java程序规则,和常用数据类型,其中侧重说了数组的一些操作. 面向java编程 java是纯面向对象语言,所有的程序都要 ...

  8. 暴力破解 安鸾 Writeup

    前三题可以使用hydra进行破解 hydra使用教程 https://www.cnblogs.com/zhaijiahui/p/8371336.html D:\soft\hydra-windows&g ...

  9. Java社区——个人项目开发笔记(二)

    1.B\S架构通信原理 浏览器,服务器之间产生通信,浏览器访问服务器,服务器返回一个HTML,浏览器会对HTML进行解析,并渲染相关的内容. 在解析过程中,会发现HTML里引用了css文件,js文件, ...

  10. SpringBoot和mybatis整合报错:Caused by: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 152; columnNumber: 10; 元素类型为 "mapper"

    很明显,报错是xml有问题,于是去检查,发现: 由于粗心,保存的时候,按的太频繁,多按了个s在里面,导致启动报错!