leaflet 使用 wmts

最新推荐文章于 2024-08-20 15:09:25 发布

路上行人_

最新推荐文章于 2024-08-20 15:09:25 发布

阅读量1.1w

点赞数 3

分类专栏： leaflet地图文章标签： leaflet 地图 wmts 坐标系瓦片

本文链接：https://blog.csdn.net/qq_37540634/article/details/65440804

版权

本文介绍了如何在Leaflet中使用WMTS服务，包括寻找并使用WMTS的Leaflet插件，理解图层、比例尺集和瓦片格式等关键参数，并解决坐标系不匹配的问题，最终成功接入WMTS地图服务。

摘要由CSDN通过智能技术生成

leaflet 使用 wmts

一直做地图方面的页面开发，这次接到一个新需求，使用leaflet对接公司的WMTS服务。
开始干活，查看leaflet文档

http://leafletjs.com/examples/wms/wms.html，原生只支持WMS接入。于是想到了必然会有大牛添加leaflet编写支持WMTS的插件，在Plugins去找，果然:
leaflet.TileLayer.WMTS

根据插件demo，按需求写入参数

参数设置
layer
必传，服务器约定的wmts图层名;
TileMatrixSet
比例尺

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

路上行人_

关注关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

003：vue+leaflet 清除所有图层的通用方法

大剑师兰特的GIS世界

09-08

2839

本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。

099：vue+leaflet 加载WMTS数据显示图形，解决 leaflet.TileLayer.WMTS的bug问题

大剑师兰特的GIS世界

03-01

826

第099个本示例的目的是介绍演示如何在vue+leaflet中加载WMTS数据，显示地图。在做这个示例的时候，引用了 leaflet.TileLayer.WMTS组件，发现了重大的问题，后来做出修改，才正确显示图形，请参考源代码。

2 条评论您还未登录，请先登录后发表或查看评论

Leaflet.js加载天地图的WMTS服务（EPSG4326类型）

02-18

通过修改Leaflet扩展插件leaflet-tilelayer-wmts.js加载天地图的wmts服务（epsg4326类型）。具体介绍见：http://blog.csdn.net/dahongdahong/article/details/49685653 补充：对于新版本的leaflet不建议使用插件方式，其本身已经支持4326坐标系了

Leaflet的基本使用【入门】

最新发布

qq_58978006的博客

08-20

385

Leaflet的基本使用【入门】——Leaflet的初始化；Leaflet的基本事件：onMapClick 点击事件；marker标记、polyline折线的添加；removeLayer删除图层；popup弹出窗口；Leaflet的使用：1、绘制多条polyline折线；2、自定义marker标记并高亮替换

leaflet加载本地Geoserver发布的WMTS

qq_38436431的博客

10-26

2036

原生leaflet不支持 wmts 图层，需要到插件库中选则需要的 wmts 图层插件类型。可以到 leaflet 官网上查找需要的插件。也可以在官网上搜索关键词找到相关插件。: github 上的项目可以在 npm 上找到对应的项目，可以通过如安装对应的包。

leaflet-wmts:leaflet 加载 WMTS 服务地图底图，如国内各级天地图服务

05-22

leaflet加载wmts图层 L.tileLayer.wmts("http://www.ais.msa.gov.cn/MapService",{ "layer": "default", "style": "default", "format": "image/png", "tilematrixSet": "advsea" //高级海图 advsea ,基础海陆混合 basicsearoad ,高级海陆混合 advsearoad }).addTo(map); 其他更多Leaflet示例请点击：

leaflet1.3.1加载天地图WMTS影像（EPSG:4326）

04-04

leaflet1.3.1版本引用了leaflet-tilelayer-wmts.js做了修改可加载天地图WMTS影像（EPSG:4326）Demo

wmts_getfeatureinfo_by_leaflet:WMTS GetFeatureInfo by Leaflet

05-31

wmts_getfeatureinfo_by_leaflet WMTS GetFeatureInfo by Leaflet Demo ： : 添加 WMTS // 4326 //900913 Chồng lớp, phải dùng srid:900913 WMTS 获取特征信息 # WMTS ...

leafletjs 加载WMTS服务，4326和3857

一醉千秋的专栏

01-05

2899

Leaflet js api中加载WMTS服务，在地图对象初始化是设置坐标系，一旦设定，切片划分的格网规则就确定了 1.4326坐标系加载标准的WMTS服务，http://localhost:8080/geoserver/gwc/service/wmts 重载L.TileLayer类，实现WMTS服务切片自定义获取 define([ "dojo/_base/declare" ], function(declare) { return declare("WMTSLayer", [L....

leaflet讲解:vue中使用leaflet加载wmts瓦片地图（1）

热门推荐

weixin_44959182的博客

07-07

1万+

哈喽大家好，很高兴在CSDN博客跟大家第一次见面。前几天做了一个基于leaflet加载wmts瓦片离线地图的项目。发现由于VUE最近的兴起leafle并没有根据vue中如何使用它的教程。这对于我们这些小白很不友好所以我准备在这里分几个步骤为大家讲解。今天我们就来先尝试使用leaflet加载瓦片地图。首页我们要在vue文件中安装leafle和leafle.wmts插件（注：leafle并不具备加载wmts功能） npm install leaflet --save npm install leaf.

leaflet 加载天地图wmts 显示图片不对，坐标系EPSG:4490

qq_32290021的博客

07-16

888

【代码】leaflet 加载天地图wmts。

Leaflet加载geowebcache的WMTS服务

shanshanqwertyuiop的博客

04-22

537

leaflet加载WMTS服务

leaflet加载天地图、叠加2000坐标wmts服务

weixin_38738760的博客

10-25

1830

Leaflet加载天地图、叠加2000坐标的wmts服务

Leaflet加载Portable Basemap Server的WMTS服务

itas109的专栏

04-17

3089

如需转载请标明出处：http://blog.csdn.net/itas109 QQ技术交流群：129518033 通过Portable Basemap Server发布地图服务之后，会有两种服务： 1.ArcGIS REST URL 2.OGC WMTS URL 这里我们采用通用的OGC WMTS URL方式。 Leaflet默认不支持wmts服务，需要使用wtms...

Leaflef笔记-使用leaflet-tilelayer-wmts插件获取地图及坐标（含错误分析思路）

IT1995的博客

09-07

1万+

目录如何调用插件并实现功能对WMTS服务的进一步了解及可能会遇到的问题如何调用插件并实现功能首先说明下本篇博文的环境，本篇博文利用了Geoserver，搭建了一个中国地图的WMTS服务，地图层级为4-9级。详细搭建过程请参考这篇博文：https://blog.csdn.net/qq78442761/article/details/100581622 下面来个...

使用leaflet加载wms图层

qq_45739389的博客

02-08

1630

VUE学习，使用leaflet加载wms图层

leaflet加载geoserver发布的wms或者wmts离线地图

qq_42005992的博客

11-11

1337

前端代码如下：首先加载wms第三方瓦片图层 var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/cite/wms", { layers: 'cite:bou2_4p',//需要加载的图层（geoserver发布时定义的名称） format: 'image/png',//返回的数据格式（或image/jpeg） transparent: true, //如果为true，WMS服务将返回具有透明性的图像

vue + Leaflet加载天地图+加载wmts瓦片+动态绘制多边形+手摸手

候郑青

03-16

3344

喜欢的话，支持一下我把，写作不易，收藏+关注鼓励一下吧~项目要求实现下图所示的效果，底图使用天地图的卫星图，点击绘制多边形，绘制好点击运行请求都断接口，接口返回如下的data,用data的数据请求瓦片信息，然后将请求的瓦片显示在地图上，全部代码如下图所示：

leaflet 加载wmts 4326

09-05

要加载WMTS（Web地图瓦片服务）中的4326坐标系，我们需要使用leaflet库来实现。首先，我们需要在HTML文件中引入leaflet相关的CSS和JS文件，以及WMTS插件。 ```html <!DOCTYPE html> <html> <head> <title>Leaflet WMTS 4326</title> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet.tilelayer.wmts/dist/leaflet-tilelayer-wmts.js"></script> </head> <body> <div id="map" style="width: 100%; height: 600px;"></div> <script> // 创建地图容器 var map = L.map('map').setView([0, 0], 2); // 创建WMTS图层 var wmtsLayer = L.tileLayer.wmts('https://example.com/wmts', { layer: 'layer_name', style: '', format: 'image/png', tilematrixSet: '4326', attribution: 'Map data © <a href="https://www.example.com">Map Provider</a>', }); // 将WMTS图层添加到地图中 wmtsLayer.addTo(map); </script> </body> </html> ``` 在以上代码中，我们首先创建一个包含id为"map"的div元素，用作地图容器。然后，使用`L.map('map')`创建一个地图对象，并通过`setView([0, 0], 2)`设置地图的初始中心点坐标和缩放级别。接下来，使用`L.tileLayer.wmts()`创建一个WMTS图层对象。在该函数中，我们需要传入WMTS服务的URL以及相关配置参数。其中，`layer`参数是指WMTS服务中的图层名，`tilematrixSet`参数是指定坐标系为4326，`attribution`参数是指定地图数据的来源。最后，通过`wmtsLayer.addTo(map)`将WMTS图层添加到地图中。需要注意的是，以上代码仅为简单示例，实际应用中，你需要根据WMTS服务的具体配置进行相应的调整。