leaflet 图层管理（增加 、删除 、显隐控制）加载4326坐标系的图层（一）

最新推荐文章于 2024-09-18 12:18:23 发布
最新推荐文章于 2024-09-18 12:18:23 发布
阅读量8.2k 收藏 21
点赞数 3
分类专栏： openlayers/leaflet javaScript vue 文章标签： vue js gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44523653/article/details/109745120
版权
本文介绍了如何在Leaflet中管理4326坐标系的图层，包括加载地图、添加和清除图层以及实现单个图层的显隐控制。由于Leaflet默认使用3857坐标系，加载4326坐标系地图时需注意坐标系对应。对于图层显隐控制，通过移除和添加图层来实现，同时提出了图层对象管理以避免内存占用过大的问题。
摘要由CSDN通过智能技术生成

加载4326坐标系

leaflet默认使用3857的坐标系，如果之前使用的是openlayers,会发现leaflet坐标写法和openlayers坐标相反，因为openlayers默认使用4326坐标系。

1、加载4326坐标系的地图

	const map = L.map("map", {
   
      center: [35.8374, 104.28225],//维度在前，精度在后
      zoom: 4,
      minZoom:  1,
      maxZoom: 19,
      zoomControl:  false,
      crs:  L.CRS.EPSG4326
    })

这里需要注意，如果是用了4326的坐标系，加载图层的时候要注意坐标系是否对应，否则图像是出不来，像leaflet.chinatmsprovi

最低0.47元/天 解锁文章
翠莲
关注
专栏目录
leafletjs 加载WMTS服务，4326和3857
一醉千秋的专栏
01-05 2943
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.js加载天地图的WMTS服务（EPSG4326类型）
02-18
通过修改Leaflet扩展插件leaflet-tilelayer-wmts.js加载天地图的wmts服务（epsg4326类型）。具体介绍见：http://blog.csdn.net/dahongdahong/article/details/49685653 补充： 对于新版本的leaflet不建议使用插件方式，其本身已经支持4326坐标系了
Cesium入门（六）：加载EPSG4326网格的瓦片地图
程序员猴小萌的博客
01-01 6959
本章介绍Cesium JS库的TilingScheme类，并以GeoServer服务器为例演示了加载EPSG:4326网络的瓦片地图。
Leaflet交互式地图图层控制技巧：显示与隐藏
最新发布
weixin_35797963的博客
09-18 1398
本文还有配套的精品资源，点击获取 简介：Leaflet是一个用于创建交互式地图的轻量级JavaScript库，它允许开发者添加和管理图层以控制地图内容。本文将介绍如何在Leaflet中通过API函数实现图层的显示与隐藏，从而提升用户交互体验。文章将详细解释基础图层（Tile Layers）和覆盖图层（Feature Layers）的概念，演示如何添加和移除图层，以及如何使用...
leaflet1.3.1加载天地图WMTS影像（EPSG:4326）
04-04
leaflet1.3.1版本引用了leaflet-tilelayer-wmts.js做了修改可加载天地图WMTS影像（EPSG:4326）Demo
leaflet 改进4326坐标系下切片加载规则
一醉千秋的专栏
06-13 2018
var crs = new L.Proj.CRS('', '+proj=longlat +datum=WGS84 +no_defs', { origin: [-180, 90], resolutions: [//1-19级 0.703913007855028, 0.35195650392751515, 0.17...
《Leaflet 基础知识点》- 图层添加与删除(两种方式)
前端技术
12-10 1699
方式一 通过 L.Map 对象的方法添加 L.Layer 对象。点此进入API 方式二 通过L.Layer 对象的方法添加 L.Map对象中。点此进入API
leaflet加载天地图、叠加2000坐标wmts服务
weixin_38738760的博客
10-25 1922
Leaflet加载天地图、叠加2000坐标的wmts服务
Leaflet 调用百度瓦片地图服务
jiangteng
06-22 4183
在使用 leaflet 调用第三方瓦片地图服务的项目，主要谷歌地图、高德地图、百度地图和 OSM 地图，与其他三种地图对比，百度地图的瓦片组织方式是不同的。百度从中心点经纬度(0,0)度开始计算瓦片，而谷歌地图是从左上角经纬度(-180,90)度开始计算瓦片；如果直接使用百度瓦片地图服务会请求不到瓦片，因此需要转换一下。借助 leaflet-tileLayer-baidu 这个插件： //需要引入 proj4.js 和 proj4leaflet.js 插件，使用script标签引入的方式 L.CRS.Bai
77.（leaflet篇）leaflet图层显示与隐藏.zip
03-29
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/123814322
25.（leaflet篇）leaflet删除所有图层（不含地图）.zip
07-20
"25.（leaflet篇）leaflet删除所有图层（不含地图）.zip"这个压缩包文件显然提供了一个关于如何在Leaflet中删除所有图层但不删除地图本身的教程或示例代码。 在Leaflet中，图层可以是标记（Marker）、多边形...
使用Leaflet.js加载天地图WMTS服务，采用EPSG4326坐标系
06-23
介绍了如何通过修改Leaflet扩展插件leaflet-tilelayer-wmts.js来加载天地图的WMTS服务，该服务使用EPSG4326坐标系。更多信息请访问：http://blog.csdn.net/dahongdahong/article/details/49685653。另外，对于最新...
leaflet-tileLayer-baidugaode:leaflet 加载百度瓦片地图图层 以及高德 、天地图等国内常用地图
05-22
Leaflet加载国内百度、高德、谷歌、天地图等地图 加载百度地图 //注意将map的crs赋值 crs: L.CRS.Baidu 详情请阅读示例页面 var map = L.map('map', { crs: L.CRS.Baidu, minZoom: 3, maxZoom: 18, ...
使用 JavaScript 为 Leaflet 添加多个标记点
TechNovaX的博客
08-31 555
在本教程中，我们将学习如何使用 Leaflet JavaScript 库为地图添加多个标记点。通过以上步骤，你已经成功地使用 Leaflet JavaScript 库为地图添加了多个标记点。你可以根据需要自定义标记点的位置和标题，以创建你自己的交互式地图应用程序。接下来，我们将在一个独立的 JavaScript 文件中编写代码来创建地图并添加标记点。现在，打开你的 HTML 文件，并在浏览器中查看结果。你将看到一个 Leaflet 地图，其中包含三个标记点，每个标记点都带有相应的标题。
leaflet 加载天地图及坐标系设置
qq_37550440的博客
12-06 1439
【代码】leaflet 加载天地图（卫星图 路网图）
leaflet 转化坐标系 加载超图
weixin_43903629的博客
10-24 478
leaflet 转化坐标系 加载超图
leaflet 显示地图加载的瓦片的行列号
liuchao的博客
04-12 1167
在开发过程中，对接wmts服务的时候，调试参数过程中有时候需要直观看到当前地图加载的瓦片的行列号。利用Leaflet的L.GridLayer图层，加载一个网格图层，重写其createTile方法，来专门显示瓦片的行列号。
leaflet加载地图出现瓦片乱序的问题
铭净止水的博客
11-21 3701
记得加上leaflet.css 记得加上leaflet.css 记得加上leaflet.css
leaflet：入门基础（三）之加载数据
热门推荐
Puzzle的博客
07-17 1万+
前言 上一篇 leaflet：入门基础（二） 讲了如何加载底图 这一篇将讲解如何加载自己已有的数据（未更完 1：加载Geojson数据 需要的数据：一个geojson数据（可以是点/线/面 注：如果手上有shp数据，可以通过https://mapshaper.org/转换得到geojson数据（使用说明[链接]） var map = new L.Map('map', { center: new L.LatLng(39.86,116...
Leaflet.js实现天地图WMTS服务加载与EPSG4326坐标系应用
资源摘要信息:"本文主要介绍了如何通过修改Leaflet扩展插件leaflet-tilelayer-wmts.js来加载天地图的WMTS服务，并指明了该服务使用的是EPSG4326坐标系。EPSG4326是一种地理坐标系，它以度为单位描述经纬度位置。此...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值