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. form 表单提交的另一种方式 js

    <html> <head> <script type="text/javascript"> function formSubmit() { fm ...

  2. 解决跨网段intouch嵌入视频问题

    在自控项目中,一般会将视频网络和自控网络分开,分属于两个不同的逻辑网段,以避免局域网ip不够用的问题.这就造成了一个问题,如何实现在自控网络上位机访问摄像头并嵌入使用?这里其实很简单,因为这两个网络本 ...

  3. 预训练语言模型的前世今生 - 从Word Embedding到BERT

    预训练语言模型的前世今生 - 从Word Embedding到BERT 本篇文章共 24619 个词,一个字一个字手码的不容易,转载请标明出处:预训练语言模型的前世今生 - 从Word Embeddi ...

  4. Java面向对象01——什么是面向对象

    面向过程&面向对象 面向过程思想(微观): 步骤清晰简单,第一步做什么,第二部做什么....... 面向过程适合处理一些较为简单的问题 面向对象思想(宏观): 物以类聚,分类的思维模式,思考问 ...

  5. 清晰易懂的RxJava入门实践

    导入 我相信大家肯定对ReactiveX 和 RxJava 都不陌生,因为现在只要是和技术相关的网站,博客都会随处见到介绍ReactiveX和RxJava的文章. ReactiveX Reactive ...

  6. Python语言系列-07-面向对象2

    重构父类__init__方法 #!/usr/bin/env python3 # author:Alnk(李成果) # 需求:Dog类要新增一个实例属性,但是Cat类不需要 class Animal(o ...

  7. SpringBoot开发二十三-统一记录日志

    统一记录日志 AlphaAspect package com.nowcoder.community.aspect; import org.aspectj.lang.ProceedingJoinPoin ...

  8. Lab: 2FA bypass using a brute-force attack:暴力破解双重验证靶场复盘(困难级别)

    靶场内容: This lab's two-factor authentication is vulnerable to brute-forcing. You have already obtained ...

  9. mysql 局域网连接

    下面分别简述操作: 配置虚拟机网络 默认方式是NAT,但为了让宿主机之外的其它计算机也能访问虚拟机,NAT方式配置起来有些复杂,这里推荐用桥接模式,关于VM的几种网络方式的区别,可以参考这篇文章配置好 ...

  10. 使用git下载码云仓库文件步骤总结

    从码云下载文件的两种方式(私服时) 1.让私服管理者复制链接,然后你加入私服: 2.生成公钥,让私服管理者添加你的公钥. 在eclipse中找到git,输入自己的登录账号和密码,下载文件到本地仓库,然 ...