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里有问题其实是 ...
随机推荐
- SpringBoot之yaml语法及静态资源访问
配置文件-yaml 在spring Boot开发中推荐使用yaml来作为配置文件. 基本语法: key: value:kv之间有空格 大小写敏感 使用缩进表示层级关系 缩进不允许使用tab,只允许空格 ...
- odoo中接口开发
文章参考:https://blog.csdn.net/qq_33472765/article/details/81913627案例0000001接口调用请求说明:https请求方式:GET(请使用ht ...
- SPRING.NET FRAMEWORK 3.0 GA啦
THE SPRING.NET FRAMEWORK http://www.springframework.net/ 1. INTRODUCTION Spring.NET contains: A full ...
- 本地Git项目搭建和文件操作
Git项目搭建 git init ---在该文件夹下进入cmd/terminal git clone [url] ---克隆远程仓库到本地 Git文件操作 文件的四种状态: · Untracked:未 ...
- .NET 6 预览版 7:新功能已完成 ,将专注于改进
.NET 团队的项目经理 Richard Lander在宣布 .NET 6 Preview 7 时说:"这是 .NET 预览的又一季的结束.", 中文翻译:.NET 6 预览版 7 ...
- ElasticSearch进阶篇(一)--版本控制
一.前言 ElasticSearch(以下简称ES)的数据写入支持高并发,高并发就会带来很普遍的数据一致性问题.常见的解决方法就是加锁.同样,ES为了保证高并发写的数据一致性问题,加入了类似于锁的实现 ...
- WooYun虚拟机的搭建及配置方法
"当时代需要时,他们勇敢地站了出来.当潮水褪去时,他们等待新的使命.他们等待被抛弃或者被怀念,等待这个世界告诉他们善恶和对错." 记录一下复活乌云的过程. 第一步:虚拟机下载 网上 ...
- AWS(amazon ec2)服务器流量查询
aws ec2流量监控 亚马逊云服务新用户绑定信用卡免费使用一年,相信很多人白嫖过,选用micro最低配置+流量免费15G,包含上下行.这种配置用来测试玩玩还行,生产使用的话容易超标.很多人想知道流量 ...
- DG:11.2.0.4 RAC在线duplicate恢复DG
1.环境介绍 测试环境, 在一个双节点的RAC上使用duplicate搭建DG,使用在线的方式搭建 主机 IP 操作系统 实例 db_name db_unique_name db_version 配置 ...
- 题解 block
传送门 如果不想让next_permutation()自动忽略重复元素,可以在比较函数里加个rk之类的东西使它们不同(next_permutation()不用等于号) 关于第一问:貌似也是一个挺常见的 ...