根据全景图切图(瓦片图)代码，leaflet可用

原创 于 2023-09-20 20:53:02 发布 · 459 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#图像处理 #前端 #无人机

博客介绍地理空间切图相关内容，需下载OSGEO镜像，切图代码依赖该开源技术，代码支持TMS和谷歌标准，在容器中执行，使用--xyz可输出谷歌标准瓦片图，还通俗解释了TMS和谷歌标准瓦片的坐标原点，大疆智图输出为谷歌标准瓦片。

1.下载OSGEO镜像(地理空间技术)，切图代码依赖该开源技术

docker pull osgeo/gdal:ubuntu-full-3.6.3

2.代码GitHub - lmikolajczak/gdal2tiles: Convert a raster into TMS or XYZ tiles in a directory with multithreading support.Convert a raster into TMS or XYZ tiles in a directory with multithreading support. - GitHub - lmikolajczak/gdal2tiles: Convert a raster into TMS or XYZ tiles in a directory with multithreading support.icon-default.png?t=N7T8https://github.com/lmikolajczak/gdal2tiles

在容器中执行，




                

        

    


  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
webgis之制作地图切片方法(二) —— gdal2tiles.py

				
			

			

				

					imxiezy的博客
				

				

					03-26
					
					2292
					
				

			

		

		

			
				
接续前面文章《》，本文介绍另外一种切片工具gdal2tiels。通常遥感影像数据非常大，要在webgis应用中使用遥感影像数据需要对其进行切片，提升用户体验，降低客户端性能要求。gdal2tiels.py切片工具可以实现对栅格数据的切片。

			
		

	



                

            
              



	

		

			

				
					
leaflet加载离线瓦片地图

				
			

			

				

					weixin_46081202的博客
				

				

					07-28
					
					1417
					
				

			

		

		

			
				
【代码】leaflet加载离线瓦片地图。

			
		

	



              


  
  
              

                


	

		

			

				
					
全景照片切片工具

				
			

			

				

					01-08
				

			

		

		

			
				
全景照片的切片工具，支持一张全景图切换成apache-tomcat-6.0.37实用的前后左右视图的照片。

			
		

	





	

		

			

				
					
 Leaflet 瓦片地图切割工具 用于切割本地图片

				
			

			

				

					09-14
				

			

		

		

			
				
Window系统 Leaflet 瓦片切割工具，用于切割本地图片，按自己需求切割。切割完成后直接可用于地图展示，使用简单傻瓜操作

			
		

	



		

			
		



	

		

			

				
					
Leaflet 瓦片切割工具 切割本地图片+示例

				
			

			

				

					m0_38060858的博客
				

				

					12-06
					
					1594
					
				

			

		

		

			
				
这里写自定义目录标题Leaflet 瓦片切割工具 切割本地图片使用步骤
Leaflet 瓦片切割工具 切割本地图片
使用步骤
双击打开图示切割工具：选择要切割的图片文件

选择切割后瓦片的目录

选择最大的缩放级别，同时生成瓦片大小，建议瓦片大小200px左右

点击下一步开始切图

切图完成，点击输出目录index.html,可以看到效果


...

			
		

	





	

		

			

				
					
自定义地图底图（瓦片）Demo

				
			

			

				

					04-15
				

			

		

		

			
				
地图的每一层（例如，卫星图像、道路图等）都由一系列瓦片组成，根据用户的缩放级别加载相应的瓦片。  2. **地图投影**：  地图的绘制需要考虑地球表面的曲率，因此需要选择合适的地图投影方法，如Mercator投影、UTM...

			
		

	





	

		

			

				
					
leaflet 加载普通瓦片地图

				
			

			

				

					抄经书的程序猿
				

				

					08-30
					
					1519
					
				

			

		

		

			
				
vue 框架

node -v 12.14.0

leaflet 1.7.1

主要代码：


<template>
  <div id="refSuperMap" ref="refSuperMap" class="my-chart-leaflet">
  </div>
</template>

import '../node_modules/leaflet/dist/leaflet.css';
import L from 'leaflet';

  data

			
		

	





	

		

			

				
					
leaflet上加载自己发布的瓦片地图geoserver

				
			

			

				

					m0_61177996的博客
				

				

					09-02
					
					1116
					
				

			

		

		

			
				
leaflet上加载自己发布的瓦片地图geoserver

			
		

	





	

		

			

				
					
Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)

				
			

			

				

					danshiming的博客
				

				

					10-12
					
					2639
					
				

			

		

		

			
				
Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)

			
		

	





	

		

			

				
					
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,
	attributionControl: false,
	center: [31.834912, 117.220102],
	zoom: 12
});
//控制地图底图
L.control.layers({
	"百度地图": L.tileLayer.baidu({ layer: 'vec' }).addTo(map),
	"百度卫星": L.tileLayer.baidu({ layer: 'img' }),
	"百度地图-大字体": L.tileLayer.baidu({ layer: 've

			
		

	





	

		

			

				
					
360全景图切片预览工具

				
			

			

				

					01-17
				

			

		

		

			
				
基于QT界面+OGRE引擎的360全景图切片工具，可实时预览全景效果。

			
		

	





	

		

			

				
					
利用Leaflet+heatmap加载本地google瓦片地图实现热力图

				
			

			

				

					08-10
				

			

		

		

			
				
通过Leaflet加载本地下载的谷歌离线地图瓦片，在离线地图的基础上加载热力图。

			
		

	





	

		

			

				
					
切图全景js框架快速布局网页场景

				
			

			

				

					12-26
				

			

		

		

			
				
切图全景js框架快速布局网页场景，适应ie6

			
		

	





	

		

			

				
					
瓦片地图加载示例

				
			

			

				

					03-24
				

			

		

		

			
				
瓦片地图加载示例

			
		

	





	

		

			

				
					
opencv教程（二）切割全景图

				
			

			

				

					qq_40164094的博客
				

				

					04-13
					
					1067
					
				

			

		

		

			
				
#include <opencv2/imgproc/imgproc.hpp>
#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>
#include<math.h>
#include <iostream>

using namespace cv;
using namespace std;
static const float M_PI = 3.1415926.

			
		

	





	

		

			

				
					
vue3中使用leaflet加载瓦片地图

				
			

			

				

					mostrichman的博客
				

				

					04-18
					
					2707
					
				

			

		

		

			
				
lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'是在线的瓦片地图源，在内网上使用需要下载瓦片地图放到服务器上。我的项目中有右键菜单的需求，有需要的可以引入以下两个文件，在引入之前需要npm先安装，指令 npm install leaflet-contextmenu --save。找到项目的main.js文件引入并全局注册,也可以在需要使用的vue页面单独引入，由于我的项目在多个页面都有使用到，全局引入更方便些，小伙伴们可以根据需求自行选择。

			
		

	





	

		

			

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

					
热门推荐

				
			

			

				

					weixin_44959182的博客
				

				

					07-07
					
					1万+
					
				

			

		

		

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

npm install leaflet --save
npm install leaf.

			
		

	





	

		

			

				
					
MATLAB 全景图切割及盒图显示

				
			

			

				

					slandarer的博客
				

				

					05-12
					
					2693
					
				

			

		

		

			
				
part1 全景图切割
原图：

切割效果：


以下是切割部分步骤：
举这张图为例，图片格式hdr,png啥的都行：

1.1 边缘剔除
有些全景图会自带白灰色边缘，若是直接进行切割便会出现如下效果：

这时候我们首先要对原图进行白边剔除，代码如下：
oriPic=imread('test.hdr');
[rows,cols,~]=size(oriPic);

for i=cols:-1:1
    tempListR=oriPic(floor(rows/4):ceil(3*rows/4),i,1);
 

			
		

	





	

		

			

				
					
本地图片瓦片切割工具：快速制图Leaflet与Mapbox

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息: "本资源是一份关于Leaflet瓦片地图切割工具的使用说明，该工具专门为Windows系统用户设计，用于将本地图片切割成适合于地图展示的小型瓦片图。操作简便易懂，适合不熟悉编程操作的用户。通过使用该...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			
			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值