- 综合排序
- 最热优先
- 最新优先
- 来自专栏偷得浮生半日闲
走进地图(5)-矢量瓦片
随着Web技术的不断发展，WebMap的功能和应用也越来越丰富和多样化，地图不再仅仅是2D的显示，更多需要3D的显示效果和交互。这个时候就需要地图数据不能以图片方式出现了。 上一篇文章中提到了地图的瓦片，一般瓦片都是图片格式，但是在3D Web地图下图片格式就无法更好的显示3D效果，这就出现在矢量瓦片（Vector Tiles）格式。 与传统的栅格瓦片（Raster Tiles）相比，矢量瓦片以矢量数据形式存储和传输地理信息，具有许多优势和应用潜力。 矢量瓦片的特点和优势： 数据灵活性：矢量瓦片存储的是矢量数据，例如点、线、面等地理要素，而不是预先渲染的像素图像。这意味着矢量瓦片可以根据需要进行动态样式化、交互和分析，提供更灵活的地图呈现方式。 invite_code=3ofjyh3kdag40
4.2K30编辑于 2023-05-24 - 来自专栏gis
GeoServer扩展功能之发布矢量瓦片
矢量瓦片类似栅格瓦片，是将矢量数据用多层次模型分割成矢量要素描述文件存储在服务器端，再到客户端根据指定样式进行渲染绘制地图，在单个矢量瓦片上存储着投影于一个矩形区域内的几何信息和属性信息。 本文将首先简单介绍矢量瓦片的基本知识，同时将矢量瓦片和栅格瓦片进行简单对比，最后以GeoServer为例，重点讲述在GeoServer中如何发布矢量瓦片，并在GeoServer中进行数据浏览展示。 2、适量瓦片处理步骤 矢量瓦片处理基本步骤： ①获取矢量数据； 1.1、获取矢量文件（.shp/.tab等）； 1.2、矢量数据入库形成矢量数据表格 3、下载 并安装插件在Extensions中找到Vector Tiles超链接，具体如下图所示：点击后，自动跳转到插件下载页面。您只需将压缩包保存到本地即可。 本文将首先简单介绍矢量瓦片的基本知识，同时将矢量瓦片和栅格瓦片进行简单对比，最后以GeoServer为例，重点讲述在GeoServer中如何发布矢量瓦片，并在GeoServer中进行数据浏览展示。
43600编辑于 2026-05-15 - 来自专栏Leaflet
浅谈前端自定义VectorGrid矢量瓦片样式
前言 在上一篇博客中，详细讲述了在LeafLet.js中集成VectorGrid插件进行矢量瓦片渲染的案例，原文连接基于VectorGrid加载GeoServer发布的矢量瓦片实例，感兴趣的朋友可以直接点击链接进行查阅之前的博文 用来展示具体的底图以及叠加矢量瓦片。<! 要实现矢量瓦片的接入，本文以PBF瓦片为演示类型。 需要在Map页面定义后，将影像底图和矢量瓦片实现动态叠加。 _province_4326@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf";3、矢量瓦片样式定义 按照第一章节的样式详解介绍，这里将完成矢量瓦片的样式具体定义。
19000编辑于 2026-05-15 - 来自专栏gis
基于Mapbox的Mvt矢量瓦片集成实践
前言 熟悉矢量瓦片的朋友一定知道，在Webgis当中，矢量瓦片的格式除了pbf的格式，还有geojson等格式。 而提出mvt等pbf格式的，是大名鼎鼎的Mapbox，关于Mapbox中的矢量瓦片生成和加载，在Mapbox中最为完备，在之前的博客中，对于矢量瓦片的应用和展示有几个篇幅的介绍。 本文将为各位朋友简单介绍Mapbox，以及如何基于Mapbox来进行Mvt矢量瓦片的集成展示，最后为朋友们生成一个完整的案例，如果您当前业务当中有需要，可以作为参考。 一、数据说明 本次实战数据采用Mapbox自带的底图，矢量瓦片数据是以湖南省的行政区划数据。 ，注意source-layer和发布的矢量瓦片的id对应。
22310编辑于 2026-05-23 - 来自专栏Leaflet
基于VectorGrid加载GeoServer发布的矢量瓦片实例
前言 闲言少叙，在之前的博文中GeoServer扩展功能之发布矢量瓦片，简单介绍了如何在Geoserver中进行矢量瓦片的发布以及预览。 在当时的场景下，在Geoserver默认的数据浏览框架下，进行了矢量瓦片的瓦片浏览。那么如果您需要在其他场景，比如Leaflet中进行矢量瓦片的展示，又该如何做呢？ 本文即解决这个问题，重点讲解在LeafLet中使用VectorGrid如何加载 Geoserver发布的矢量瓦片，以及在GeoServer中进行跨域访问设置的 基本操作，让您在实践时遇到同样问题有地方参考 这里简单介绍VectorGrid插件，以及其它可以选择的矢量瓦片展示插件。·在Leaflet的官方网站上可以看到以下的介绍瓦片的介绍，其中有一个是关于Vector Tiles的介绍。 1、开源地址 Vector grid可以基于Leaflet进行GeoJson、TopoJson、pbf瓦片等矢量瓦片的加载展示。开源地址：Vector Grid 官网地址。
14700编辑于 2026-05-15 - 来自专栏Leaflet
解决基于VectorGrid的矢量瓦片Y轴偏移的问题
前言 在前面的博文介绍中，在线连接如下：浅谈前端自定义VectorGrid矢量瓦片样式，基于VectorGrid加载GeoServer发布的矢量瓦片实例，这里介绍了在Leaflet中加载矢量瓦片 因此，跟栅格瓦片的原理一样，我们是否可以类似于栅格瓦片的原理，直接访问已经生成好的矢量瓦片，来进行访问加速。 在GeoServer发布的矢量瓦片请求格式跟Google的xyz瓦片访问不太一致，有一点点儿小复杂。 在此背景下，我们尝试使用将矢量瓦片直接瓦片化，然后再使用VectorGrid进行展示，但是发现，使用自己切好的矢量瓦片的加载方式跟GeoServer发布的矢量瓦片，加载出来的效果不一致，Y轴出现了偏移。 3、瓦片访问 通过查看上面的瓦片发布地址可以看到，其瓦片的pbf访问路径与常见的xyz瓦片不一致。
12110编辑于 2026-05-23 - 来自专栏JSAPIThree
JSAPIThree 加载 Mapbox 数据学习笔记：使用 Mapbox 矢量瓦片地图
听说这个功能可以加载 Mapbox 的矢量瓦片地图，还能自定义样式！想想就期待！第一次听说 Mapbox 数据加载今天在文档里看到了"Mapbox"这个词。 文档说 Mapbox 数据加载可以：加载 Mapbox 官方地图支持自定义 MVT 路径需要配置 AccessToken我的理解：简单说就是"用 Mapbox 的矢量瓦片地图"，让场景有 Mapbox mapvthree.MapboxVectorTileProvider({ // accessToken: '您的accessToken', // 如果没有全局配置，可以在这里直接传入 }),}));我的发现：MVT 地图是 Mapbox 标准的矢量瓦片地图 我的理解：优点：矢量瓦片，无级缩放不模糊，传输渲染速度快缺点：需要 AccessToken适用场景：需要 Mapbox 风格地图的场景第三步：自定义 MVT 路径看到可以加载 Mapbox 地图后，我想 解决：确保样式路径正确确保 AccessToken 有权限访问该样式坑 3：地图显示空白原因：在引擎初始化时设置了 provider，但没有正确配置。
44910编辑于 2025-12-05 - 来自专栏gis
离线使用Mapbox进行矢量瓦片属性标注报错的解决之道
前言 在之前的博客中基于Mapbox的Mvt矢量瓦片集成实践，我们已经介绍了如何在Mapbox中展示Mvt的矢量瓦片。 但是在之前的博文中，我们仅仅进行了矢量瓦片的展示，在实际项目开展的过程当中。 就像栅格瓦片一样，标注的作用也是一样的明显。因此如何Mapbox中基于矢量瓦片进行属性标注也是非常值得学习和探索的。在很多mapbox的应用中，都是在线应用，您一定也见识了很多的在校标注。 一、问题描述 按照之前博文的介绍，我们决定使用mapbox进行矢量瓦片的展示，同时把矢量瓦片中的属性信息进行标注展示。按照上一篇博文的代码，我们把代码编写完毕。 如下图所示：实际上，矢量瓦片是已经正常加载了，但是并没有达到我们的预期。因为在界面上并没有把属性标注展示出来。
14800编辑于 2026-05-30 - 来自专栏点滴积累
geotrellis使用（三十四）矢量瓦片技术研究——矢栅一体化
前言 本文所涉及技术与Geotrellis并无太大关系，仅是矢量瓦片前端渲染和加载技术，但是其实我这是在为Geotrellis的矢量瓦片做铺垫。 其实不然，首先Geotrellis可以用分布式技术进行快速矢量瓦片切割，当然这不是主要的，因为单台服务器基本也能很快处理矢量瓦片的切割，重要的是Geotrellis可以使用矢量瓦片进行空间计算，这样可以矢栅一体化 当然这只是我个人的看法，有待后续研究，并且Geotrellis的矢量瓦片还并在测试当中。本文仅介绍前端矢量瓦片技术。 一、什么是矢量瓦片 目前高德、百度等互联网地图基本都使用了矢量瓦片技术。 二、前端显示技术 矢量瓦片的生成还未研究，本文只是调用OSM公开发布的矢量瓦片进行前端展示试验。 三、矢量瓦片解析 我们知道了如何在前端进行矢量瓦片渲染，下面来看一下矢量瓦片的具体内容，当我们下载一幅矢量瓦片时可以看到其中都是二进制数据，这是为了减小传输压力进行的压缩，也有一些开源的软件可以进行解压缩
3.8K111发布于 2018-05-02 - 来自专栏DevOps
影像瓦片切割
storeHeight * bandCount; GByte *imgBuf = new GByte[imgBufNum]; memset(imgBuf, 0, imgBufNum); //读取N列瓦片影像 size_t rowTileWidth = storeWidth * tilesize; //计算N行瓦片的长度 int nRowTileWidth = rowTileWidth * y; for (size_t iBand = 0;iBand < bandCount;++iBand) { //计算数据瓦片的波段起始位置 size_t dstStart size_t rowTileWidth = storeWidth * tilesize; //计算N行瓦片的长度 size_t nRowTileWidth = rowTileWidth * y; for (size_t iBand = 0;iBand < bandCount;++iBand) { //计算数据瓦片的波段起始位置 size_t dstStart
87910编辑于 2024-03-29 - 来自专栏偷得浮生半日闲
走进地图(4)-地图瓦片
如果我们提供N层的瓦片，第1层 X 轴和 Y 轴1张图（21-1），第2层X 轴和 Y 轴2张图（22-1），第3层X 轴和 Y 轴4张图（23-1），如此下去第N张是X 轴和 Y 轴是(2n-1)张图 我们再给每张图的X轴，Y轴的按左上角为0开始给序号，再加上层级就出现了瓦片图所需要的X，Y，Z 3个元素了。 如下图： 网上有很多开源的具体转换算法，如：https://github.com/DenisCarriere/global-mercator 有算法，有数据，得有服务才能生成浏览这一张张的瓦片 ，在自有矢量数据源的情况下，可以通过部署GeoServer来提供瓦片图服务，GeoServer采用的是OGC标准的WMTS服务来生成瓦片图（另外提一句，瓦片服务标准除了OGC标准的WMTS，还有OSGeo 在没有自己的数据的就可以使用公共的瓦片服务接口了： OpenStreetMap 天地图
2.1K20编辑于 2023-05-24 - 来自专栏Leaflet
Leaflet.VectorGrid加载点矢量瓦片鼠标点击报Cannot read properties of undefined的解决办法
序号博客地址1解决基于VectorGrid的矢量瓦片Y轴偏移的问题2浅谈前端自定义VectorGrid矢量瓦片样式3基于VectorGrid加载GeoServer发布的矢量瓦片实例 以上的博客中关于如何使用 VectorGrid来进行矢量瓦片的渲染进行了详细的说明，但是上述矢量瓦片的数据类型均是面和线数据居多，没有对点数据进行渲染展示。 地图上主要包含3中数据，底图采用的高德的在线影像，全国省份数据用的是自己发布的面矢量瓦片，点数据是全国地质灾害的点数据。从灾害类型可分为：小型、中型、大型。 /{z}/{x}/{y}.pbf3地灾瓦片http://localhost:8086/data/dizai1228/{z}/{x}/{y}.pbf1、矢量瓦片元数据上述的两种矢量瓦片，省和地灾瓦片是采用本地存储的方式 以省份瓦片为例，其目录如下： 其中，metadata.json是用于描述矢量瓦片的元数据信息，通过上述的json描述可以知道，矢量瓦片的参数信息，比如中心点位置、边界、数据格式、图层信息包括图层唯一标识符还有属性字段
15810编辑于 2026-05-23 - 来自专栏跟牛老师一起学WEBGIS
跟牛老师一起学WEBGIS——WEBGIS基础（地图切片）
3.dpi 专用输出设备的每英寸点数。如果所选择的 DPI 与输出设备（通常是显示器）的分辨率不匹配，则切片将显示错误比例。默认值为 96。 3.切片的分类 GIS的底图一直使用金字塔技术进行切图，使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片，无法进行交互。 2.矢量切片 基于栅格瓦片底图的劣势，矢量瓦片针对矢量电子地图，按照一定的标准和技术将其保存为多种比例尺的矢量分块数据，在前端显示电子地图时，可直接调用矢量分块进行绘制。 矢量瓦片分辨率高达4096*4096，是栅格瓦片的16倍，可保证缩放过程中的细节高度还原，且满足高分屏绘制需求； 自定义渲染样式。客户端显示矢量瓦片底图时，可以按照用户赋予的样式渲染。 如导航地图有白天和黑夜两种模式，只需共用一份矢量瓦片底图，利用两套样式进行渲染即可；可以通过属性过滤条件可以任意过滤筛选图元，实现个性化定制；可以编辑底图中每一个矢量图层的可见状态，调整矢量层的叠加压盖顺序
4.8K30发布于 2020-08-25 - 来自专栏机器人技术与系统Robot
3D矢量和6D矢量机器人建模的对比
基于6D矢量的机器人动力学是由学者Featherstone首先提出，并被机器人其他很多动力学建模软件广泛应用。包括开源机器人软件kdl. 下面给出基于3D矢量和6D矢量的机器人动力学建模。 1 3D矢量 image.png image.png image.png 2 6D空间矢量 两个刚体 和 铰接成一个刚体，关节处无驱动力矩， 是旋转轴。 image.png 对比上述结果可以看出来，基于6D矢量和3D矢量建立的机器人动力学模型是完全一致的，而基于6D矢量的计算量则相对来说更小。 3 多体系统 image.png 铰接体（Articulated-Body， AB） 是指多个具有相对运动的刚体通过铰链连接而成的系统。
3.6K327257发布于 2020-10-24 - 来自专栏Godot游戏开发引擎介绍和入门
Godot3游戏引擎入门之六：制作TileMap瓦片地图
Godot3游戏引擎入门之六：制作TileMap瓦片地图 2018-10-19 by Liuqingwen | Tags: Godot | Hits 一、前言 收到一个高兴的消息： 瓦片地图，简单地说就是一个个瓦片堆积起来的一个地图。 另外，熟悉 Unity3D 的朋友们也知道，在 Unity 2018 版本之前，使用 Unity 制作 2D 游戏的地图也是很不方便的，如果你想在 Android 或者 Window/Linux 等其他操作系统上开发游戏 要打造瓦片地图，我们首先需要准备好所有的瓦片——也就是所谓的 TileSet 瓦片集。 如果你能坚持从我的 Godot 系列第一篇文章读到本篇文章，那么非常感谢你的阅读，其实我最近更新的速度越来越慢，写完一篇文章至少要耗费我 3 天的闲暇时间，这篇文章更是花费了我一周，因为平时要工作，闲余时间还不一定有空
5K40发布于 2019-01-08 - 来自专栏前端博客
Cesium笔记(3):基本控件简介—ImageryProvider地图瓦片地图配
Cesium支持多种标准化格式的GIS瓦片服务，可以把栅格图层绘制到地球的表面——cesiumjs的地图图层本质上是一些瓦片数据，这些图层的亮度、对比度、色相均可以动态调整。 Cesium ionCesium ion是一个提供瓦片图和3D地理空间数据的平台，Cesium ion支持把数据添加到用户自己的CesiumJS应用中。 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMTg2Mzk0My02NWJmLTQ1ODgtOWRiMy0wODM1ZTkwNGM1NTYiLCJpZCI6MjM0NzYsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1ODM0NjEyMDN9 ，方便调试GridImageryProvider渲染每一个瓦片内部的格网，了解每个瓦片的精细度配置影像服务比如使用bing地图服务：查看官方服务文档，https://cesium.com/docs/cesiumjs-ref-doc 比如轮询机制，我们知道天地图提供了't0','t1','t2','t3','t4','t5','t6','t7'8个域名，服务端TCP最大链接数是有限制的，轮询机制下瓦片下载的速度更有保证，很可惜，尽管
5.6K20编辑于 2023-05-14 - 来自专栏前端架构
Cesium笔记(3):基本控件简介—ImageryProvider地图瓦片地图配
Cesium支持多种标准化格式的GIS瓦片服务，可以把栅格图层绘制到地球的表面——cesiumjs的地图图层本质上是一些瓦片数据，这些图层的亮度、对比度、色相均可以动态调整。 Cesium ion Cesium ion是一个提供瓦片图和3D地理空间数据的平台，Cesium ion支持把数据添加到用户自己的CesiumJS应用中。 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMTg2Mzk0My02NWJmLTQ1ODgtOWRiMy0wODM1ZTkwNGM1NTYiLCJpZCI6MjM0NzYsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1ODM0NjEyMDN9 ，方便调试 GridImageryProvider 渲染每一个瓦片内部的格网，了解每个瓦片的精细度 配置影像服务 比如使用bing地图服务：查看官方服务文档，https://cesium.com/docs 比如轮询机制，我们知道天地图提供了't0','t1','t2','t3','t4','t5','t6','t7'8个域名，服务端TCP最大链接数是有限制的，轮询机制下瓦片下载的速度更有保证，很可惜，尽管
7.1K00发布于 2020-06-06 - 来自专栏Opensource翻译专栏
如何用Scratch 3绘制矢量图形 【Gaming】
什么是矢量？ 矢量绘图不同于使用常规绘图应用程序绘图。无论放大或缩小多远，矢量图像看起来都很平滑，没有像素化。矢量可以创建任意大小的平滑的作品。 在Scratch中，游戏中可玩的角色称为精灵。 绘图工具 Scratch的矢量绘图工具箱是您找到绘制对象所需工具的地方： 图片7.png 下面是一些与绘制矢量图形相关的词汇： 画布Canvas：你画的地方；白色和灰色的盘是透明的 节点Node：沿对象路径确定对象形状的点 图片9.png 3. 选择节点工具。单击对象的中心将其选中。您将看到四个节点均匀分布在圆的边缘。 图片10.png 移动任何节点都会改变圆的形状单击圆的边可以添加更多节点。 3. 使用箭头工具选择杆。要将茎移到苹果后面，请单击画布上方的“后退”按钮。 图片14.png 添加突出显示形状 1. 选择线条工具。在苹果形状上画一个三角形，把每一条新线和前一条线的末端连接起来。 3. 使用“节点”工具添加和调整节点以创建高光形状。如果节点过于尖锐，可以将其更改为曲线。选择要弯曲的节点，然后单击“弯曲”按钮。
8.2K00发布于 2019-11-10 - 来自专栏python3
Python爬取地图瓦片
由于要在内网开发地图项目，不能访问在线的地图服务了，就想把地图瓦片下载下来，网上找了一些下载器都是需要注册及收费的，否则下载到的图都是打水印的，如下： 因为地图瓦片就是按照层级、行、列规则组织的一张张图片 主要可以分为三步： 1.确定要下载的瓦片的级别，经度和纬度范围（可以通过百度坐标拾取获得，http://api.map.baidu.com/lbsapi/getpoint/index.html） 2.计算出这个范围内瓦片的起始和终止行列号 根据行列号拼接出瓦片的url地址 1 #Google地图瓦片为例，zoom是地图层级,x,y为行列号 2 tilepath = 'http://www.google.cn/maps/vt/pb=! 1m3!1i'+str(zoom)+'!2i'+str(x)+'!3i'+str(y)+'!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4! Python获取地图瓦片的完整代码 Openlayers加载离线瓦片参考例子 Leaflet加载离线瓦片参考例子
3.5K20发布于 2020-01-17 - 来自专栏gis
基于QGIS的研究区域遥感影像裁切下载方法-以岳麓区为例
当时考虑有两种实现方案，第一种就是看研究区域的大小，如果可以提供原始的tif数据，再使用研究区域的矢量数据进行掩膜处理裁切就好。这种方式如果是一些在线图源和瓦片图源，几乎比较麻烦。 也有朋友指导，说可以自己在后端去处理瓦片和研究区域的空间关系，相当与是空间分析，如果瓦片在研究区域中，则将瓦片放到包中，供用户打包下载，如果不再研究区域中，则忽略。 最近在看一个GIS思维的实操案例，它支持按照空间矢量范围把在线的遥感影像瓦片转为tif。有了tif不是巧妇难为无米之炊了。 3、设置裁切范围 下面设置导出范围，值得注意的是，这里的导出范围其实并不是空间范围的实际边界，而是这个矢量编辑的外包框，也就是bbox。 3、执行掩膜 参数设置完毕后，点击运行，执行掩膜操作，可以在操作界面中看到以下的操作日志记录。执行完毕后，得到以下的掩膜结果，这个跟我们的需要的是一致的。
16300编辑于 2026-06-06
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号