您现在的位置是:首页 > 正文

Leaflet 操作OSM(OpenStreetMap) 设置地图style

2024-02-29 12:00:35阅读 1

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);

 

这是应用之后的效果展示~

希望对追求完美的朋友有帮助。

本文为博主原创,如需转载请注明出处。

 

转载于:https://www.cnblogs.com/RainyBear/p/6645945.html

网站文章

  • Gin学习

    Gin学习

    Gin是一个web框架。

    2024-02-29 12:00:28
  • 格式化时间间隔

    /** * 格式化时间 * <pre> * 时间间隔单位统一用小时来判断 * 时间据现在时间60分钟以内(包括60分钟)显示x分钟前 【小于1小时】 * 时间据现在时间1小时以上24小时以内(包括24小时)显示x小时前(1-24小时】 * 时间据现在时间24小时以上,10天以内(包括10天),显示x天前;(24-240小时】 *

    2024-02-29 11:59:58
  • E: 无法获得锁 /var/cache/apt/archives/lock - open (11: 资源暂时不可用) E: 无法对目录 /var/cache/apt/archives/ 加锁

    sudo rm /var/cache/apt/archives/lock sudo rm /var/lib/dpkg/lock 强制解锁 E: 无法获得锁 /var/cache/apt/archives/lock - open (11: 资源暂时不可用) E: 无法对目录 /var/cache/apt/archives/ 加锁 我是输入了两次才能够安装的 详情请看 ...

    2024-02-29 11:59:50
  • ajax使用pur请求怎么传参,jQuery使用ajaxSubmit()提交表单示例

    ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示:复制代码 代码如下:那么,如何通过ajaxSubmit(o...

    2024-02-29 11:59:42
  • 漫画:什么是中间人攻击

    漫画:什么是中间人攻击

    转载自 漫画:什么是中间人攻击故事发生在上世纪40年代......在解放战争初期,东北牡丹江一带,奶头山有一个土匪副官叫栾平。他计划将包含重要信息的先遣图,献给威虎山的土匪头子座山雕。而后栾平被共军抓...

    2024-02-29 11:59:13
  • Jsp与HTML的区别

    先了解一下什么叫动态页面和静态页面?1、静态页面,即静态网页,是实际存在的,无需经过服务器的编译,直接加载到客户浏览器上显示出来。静态页面需要占一定的服务器空间,且不能自主管理发布更新的页面,如果想更...

    2024-02-29 11:59:06
  • 如何使测试和开发沟通更有效

    一个缺陷的生命周期简单的可以分为三步:1、测试人员登记一个缺陷。2、开发人员阅读缺陷,并作出处理结果。3、测试人员进行验证,决定关闭或者打开。在这3个过程中,开发人员和测试人员更多的时候是靠文字沟通的...

    2024-02-29 11:58:59
  • Linux修改SSH远程端口教程

    Linux修改SSH远程端口教程

    1、切换目录至 /etc/ssh文件夹下,编辑sshd_config文件:找到 #Port 22; 去掉签名的#,并修改为:你需要的端口号;随后执行命令:vi sshd_config 修改端口号2、重...

    2024-02-29 11:58:29
  • AILabel.js之实例1:显示一张图像

    AILabel.js之实例1:显示一张图像

    元素必须赋值id属性。

    2024-02-29 11:58:24
  • 机床计算机数控技术论文,数控技术机床机械加工论文

    1数控技术在制造行业应用1.1在机床设备中应用数控机床是现代机电的重要组成,能够有效的提高制造业的工作效率。数控机床的应用改变了原来的零件加工方式,能够使用数字化技术处理零件的加工工艺,使用编程发布指...

    2024-02-29 11:58:16