瓦片地图原理

article/2025/7/21 7:32:47

GIS介绍

地理信息系统(Geographic Information System或 Geo-Information system,GIS)有时又称为“地学信息系统”。它是一种特定的十分重要的空间信息系统。它是在计算机硬、软件系统支持下,对整个或部分地球表层(包括大气层)空间中的有关地理分布数据进行采集、储存、管理、运算、分析、显示和描述的技术系统。和维护性。

常见类型

  • WebGIS
  • MoblieGIS
  • GIS System Platform (军事、专业桌面程序等)

GIS的功能

定位、导航、跟踪、轨迹、规划等

GIS的用途

农业、林业、国土资源、地矿、军事、交通、测绘、水利、广播电视、通讯、电力、公安、社区管理、教育、能源等

普通地图分类

  • 按照比例尺大小
    1. 大比例尺地形图:1:5千—1:2.5万比例尺地形图 (1cm:5k cm — 1cm:25k cm)
    2. 中比例尺地形图:1:5万—1:25 万比例尺地形图
    3. 小比例尺地形图:1:50万-1:100万比例尺地形图
    4. 我国称1:1万、1:2.5万、1:5万、1:10万、1:25万、1:50万、1:100万七种比例尺普通地图为国家基本比例尺地形图
  • 按照用途
    参考图、教学图、地形图、航空图、海图、海岸图、天文图、交通图、旅游图等
  • 按照制图区域范围
    世界图、半球图、大洲图、大洋图、大海图、国家(地区)图、省区图、市县图、乡镇图等
  • 数据类型
    数字线划图(DLG)
    数字栅格图(DRG)
    数字正射影象图(DOQ)
    数字高程模型(DEM)
  • 实现方式
    瓦片地图:由一张一张的正方形小图片拼接成的地图。
    矢量地图:根据矢量数据,绘制出来的地图。

地图数据类型

数字线划图
数字线划地图(DLG, Digital Line Graphic):是与现有线划基本一致的各地图要素的矢量 数据集,且保存各要素间的空间关系和相关的属性信息。
数字线划图.png

数字栅格图
数字栅格图.png

数字正射影像图
数字正射影像图.png

数字高程模型
数字高程模型.png

瓦片地图原理

瓦片

指将一定范围内的地图按照一定的尺寸和格式,按缩放级别或者比例尺,切成若干行和列的正方形栅格图片,对切片后的正方形栅格图片被形象的称为瓦片(Tile)。

瓦片.png

地图瓦片.png

层次模型

瓦片地图金字塔模型是一种多分辨率层次模型,从瓦片金字塔的底层到顶层,分辨率越来越低,但表示的地理范围不变。

地图瓦片金字塔模型.png

地图瓦片层级关系.png

地图坐标系

  • 经纬度坐标系
  • 像素坐标系
    像素坐标系,也可以成为屏幕坐标系,像素坐标系和地图的经纬度坐标系存在对应关系,屏幕上的每一个像素都对应一个经纬度点位置。 不同缩放级别下,像素坐标系和经纬度坐标系的对应关系是不同的。
  • 投影坐标系
    投影坐标系在GIS系统中非常的重要,作用是将经纬度坐标系和屏幕的像素坐标系关联起来。理解投影坐标系也是GIS系统研究中的一个重要环节。

地图投影

地图投影是利用一定数学法则把地球表面的经、纬线转换到平面上的理论和方法。由于地球是一个赤道略宽两极略扁的不规则的梨形球体,故其表面是一个不可展平的曲面,所以运用任何数学方法进行这种转换都会产生误差和变形,为按照不同的需求缩小误差,就产生了各种投影方法。

地图投影示意及分类图.png

常见的投影类型

  1. 高斯-克吕格投影
  2. 斜轴等面积方位投影
  3. 双标准纬线等角圆锥投影
  4. 等差分纬线多圆锥投影
  5. 正轴方位投影
  6. 墨卡托投影(正轴等角圆柱投影)

墨卡托投影
墨卡托投影,是正轴等角圆柱投影。由荷兰地图学家墨卡托(G.Mercator)于1569年创立。假想一个与地轴方向一致的圆柱切或割于地球,按等角条件,将经纬网投影到圆柱面上,将圆柱面展为平面后,即得本投影。等角条件是使地球面上微分区域内两个方向的夹角投影到平面以后,保持角度不变的条件。
百度地图和Google Maps使用的投影方法都是墨卡托投影。

墨卡托投影示意图.png

墨卡托投影结果区域图.png

投影结果

  1. 图中红色矩形区域是真实投影结果。
  2. 图中蓝色正方形区域,是数学计算区域。
  3. 正方形的边长是赤道周长。
  4. 纵轴方向,纬度的变化是非线性的。
  5. 横轴方向,经度的变化是线性的。
  6. 横轴和纵轴方向,投影区域和都比真实区域大, 处于拉伸状态。

墨卡托投影坐标算法

墨卡托坐标算法.png

手机与地图的位置关系

手机与地图的位置关系.png


http://chatgpt.dhexx.cn/article/lLoBvECF.shtml

相关文章

Unity(9)-TileMap瓦片地图

文章目录 前言相关介绍其他介绍上一篇笔记下一篇笔记 一、图片预处理二、创建调色板(TilePalette)三、创建瓦片(Tile)[1]. 方式一[2]. 方式二 四、修改瓦片(Tile)[1]. 参数介绍[2]. 修改Sprite[3]. 修改Color[4]. 修改ColliderType 五、创建瓦…

cocos2d-x瓦片地图制作详解

瓦片地图制作详解 瓦片地图的原理是把图片中的元素进行单位化,将大图片拆成一张张小图块,然后通过组合拼接的方式,重新拼出整个地图。其流程为:项目定好游戏中瓦片的大小,然后美术绘制瓦片并制作成瓦片图集&#xff0c…

Unity学习:瓦片地图

目录 一、tilemap 二、rule tiles 三、rule override tile 四、advanced override tile 五、伪透视图 这里首先给出unity的官方文档: https://docs.unity3d.com/Manual/class-Tilemap.htmlhttps://docs.unity3d.com/Manual/class-Tilemap.html 一、tilemap 创建 创…

GIS理论知识(四)之地图的图层(切片/瓦片)概念

1.图层中数据的分类 在日常使用中,常用的数据有两种即矢量数据和栅格数据,都可直接导入到GIS软件(ArcMap,SuperMapIDeskTop,Udig,QGIS)中对其作相应的处理。 1.1.矢量数据 矢量数据是利用欧几里德几何学中点、线、面及其组合体…

瓦片地图服务与地图瓦片原理

本文字数:9099字 预计阅读时间:25分钟 这里,首先我们从概念出发,搞清楚瓦片地图服务以及地图瓦片的原理,读起来似乎有点拗口,但是从字面上看得出它们必定拥有着区别与联系,前者是WebGIS中的一个…

【Unity入门计划】基本概念(8)-瓦片地图 TileMap 01

目录 1 TileMap概念 主要思想 优点 创建的层级 2 Unity中的TileMap 2.1 自动父级Grid 网格 2.2 Sprite精灵 2.3 Tile 瓦片 2.4 Tile Palette 调色板 2.5 Brush 笔刷 3 Tilemap Renderer 瓦片地图渲染器 3.1 Sort Order 瓦片排列顺序 3.2 Mode 渲染模式 Chunk 分块…

SDL游戏开发之三-瓦片地图

一.瓦片地图 1)瓦片地图简介 瓦片地图(Tiled Map),又称为瓷砖地图,是在游戏开发中经常使用到的技术,它是由少量的尺寸相同的、小的瓦片图片拼接而成的很大的地图。相对于使用一张张图片来绘制地图而言,瓦片地图不仅大…

瓦片地图是什么鬼

瓦片地图的诞生 地图数据通常体量较大,需要充足的带宽和数据渲染能力。瓦片地图诞生以前,地图多在局域网的桌面软件中使用。互联网的发展,催生了通过浏览器使用地图的需求,于是在1999年,出现了WMS(Web Map …

Unity-瓦片地图详解

前言 在学习瓦片地图的使用时,我发现无论国内外还是Unity官方的相关教程都比较散,接触的比较浅,学的我挺难受的,所以就把各个地方看的教程加上我自己的理解,和官方的API手册,总结出了这个详解。 0. 瓦片地…

html2canvas页面截图图片不显示

前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下。 在github上将html2canvas源码下载到本地,examples文件夹…

js如何实现页面截图生成并分享功能,如何向后端传递

通过html2canvas生成分享图片 什么是 html2canvs? html2canvas 的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。它的屏幕截图是基于 DOM 的,因此可能不会 100% 精确到真实的表示,因为它不会生成实际的屏幕截图,而是基…

移动端H5页面截图【含 domtoimage、html2canvas 】

起因: 由于云栖大会项目需要支持 名片保存到本地功能【如下图红框】,所以,需要单独截取页面中的名片信息,并且保存到本地。 推荐给:需要获取页面内容,给页面截图的小伙伴 介绍两个工具: html2c…

小程序 超长页面截图保存web-view+html2canvas

web-view文档建议参考----支付宝提供的文档,html2canvas官方文档(官网可以下载html2canvas.js 和 html2canvas.min.js)。由于篇幅受限,这里就贴了一下用法,对于web-view的配置情况,需要自己去查看文档&…

服务端实现对页面截图 - PhantomJs

版权声明 : 本文为博主原创文章,如需转载,请注明出处(https://blog.csdn.net/F1004145107/article/details/97786555) 目录 / 1 / 前言 / 2 / 使用方式 / 3 / 结语 / 1 / 前言 本文主要讲解的是关于在Java服务端使用PhandomJs来实现对指定页面(页面可包含echarts等图表)进…

js保存当前页面的截图 (leaflet下载当前页面截图,线会偏移问题解决)

这是保存的leaflet地图 上代码: html <div id="map" class="map"></div>ts代码: var mapid = document.querySelector(#map);const scale = window.devicePixelRatio;// // 传入节点原始宽高const _width = mapid["offsetWidth"]…

react单个页面截图和多个页面截图

之前有一个需求是点击导出按钮&#xff0c;然后去各个页面截图&#xff0c;将图片传给后端&#xff0c;后端返回文件流&#xff0c;导出ppt报告。这个需求听到的时候头都大了&#xff0c;不知道怎么做&#xff0c;之后有思路了&#xff0c;在实现过程中也出现了各种问题&#x…

JS页面截图

1、引入 js 【密码&#xff1a;gf33】 点击下载 html2canvas.min.js <script src"{url:static/octzz/js/html2canvas.min.js}"></script>2、html代码 <body><div><button type"button" class"layui-btn" onclick&q…

使用html2canvas.js实现页面截图

由于最近项目需求&#xff0c;需要实现html页面截图&#xff0c;经过查资料&#xff0c;找到了这个东东html2canvas&#xff0c;刚开始截出来的图片&#xff0c;空白、模糊、图片不完整&#xff0c;各种问题&#xff0c;但幸好有各路大神的见解&#xff0c;把问题解决了&#x…

vue页面截图;H5页面截图;vue项目中将特定网页内容生成图片(截图);html2canvas截图

功能&#xff1a; 1.兼容 PC 和 Mobile&#xff1b; 2.对指定的区域进行截取&#xff1b; 3.可以控制截图大小&#xff1b; 4.截图生成base64图片地址 一、安装插件 npm install html2canvas --save 或 yarn add html2canvas二、在.vue页面引入使用 import html2canvas fro…

Java实现HTML页面截图功能

概述 业务开发中&#xff0c;经常会有HTML页面截图&#xff0c;或打印另存为PDF文件的需求。本文即是HTML页面截图需求的技术调研过程的成文。不想看长篇大论的同学&#xff0c;可以直接看Selenium部分&#xff0c;本人最后也是采取此方案。 html2canvas 直接上代码&#xf…