基于Mapbox的Mvt矢量瓦片集成实践

目录

前言

一、数据说明

1、基本数据

2、属性数据

二、Mapbox集成Mvt矢量瓦片

1、关于访问令牌

2、定义html

3、初始地图

4、加载矢量瓦片

5、效果展示

 总结


前言

        熟悉矢量瓦片的朋友一定知道,在Webgis当中,矢量瓦片的格式除了pbf的格式,还有geojson等格式。而提出mvt等pbf格式的,是大名鼎鼎的Mapbox,关于Mapbox中的矢量瓦片生成和加载,在Mapbox中最为完备,在之前的博客中,对于矢量瓦片的应用和展示有几个篇幅的介绍。但是暂时没有涉及Mapbox的相关实践博客。

        本文将为各位朋友简单介绍Mapbox,以及如何基于Mapbox来进行Mvt矢量瓦片的集成展示,最后为朋友们生成一个完整的案例,如果您当前业务当中有需要,可以作为参考。

一、数据说明

        本次实战数据采用Mapbox自带的底图,矢量瓦片数据是以湖南省的行政区划数据。

1、基本数据

序号参数说明
1文件格式

ESRI Shapefile

2编码

ISO-8859-1

3几何图形

Polygon (MultiPolygon)

4坐标参照系

EPSG:4326 - WGS 84 - 地理的

5范围

108.6201356299999929,24.4147307699999985 : 114.4100520700000061,30.3505439400000014

6要素数目

2,664

2、属性数据

序号字段名类型长度
1

gml_id

String

80
2

Name

String

80

3

layer

String80
4

code

String80
5

grade

Integer

9

属性列数据展示如下:

二、Mapbox集成Mvt矢量瓦片

        关于Mapbox的知识,大家可以到mapbox的官方网站去学习,在C站也有很多优秀的博主分享了相关的博客。大家可以去找找,资料非常详细,这里不再赘述,mapbox官网。

1、关于访问令牌

        在Mapbox当中,有一个令牌的概念,因此在每个应用创建之前需要申请一个令牌,申请的流程也不复杂,还是比较简单的。大家有兴趣的可以到官网自己申请,开发者没有任何限制,大家直接申请后直接在项目中学习使用即可。申请的参考博客mapbox申请链接。

        如果想更加偷懒的,可以直接使用官网的示例token,不过可能会过期,在国企后再去官网找一个可以用的继续使用。 本文中使用的token是从官网演示示例中获取的。

2、定义html

首先定义一个html文件,里面定义基础网页,关键代码如下:

<!DOCTYPE html>
<html>
<head><meta charset='utf-8' /><title>基于Mapbox的矢量瓦片集成实例</title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><script src='./mapbox/mapbox-gl.js'></script><link href='./mapbox/mapbox-gl.css' rel='stylesheet' /><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}</style>
</head>
<body><div id='map'></div>
</body></html>

这里采用了mapbox-gl框架实现,在页面中引入以下资源。

<script src='./mapbox/mapbox-gl.js'></script>
<link href='./mapbox/mapbox-gl.css' rel='stylesheet' />

3、初始地图

        下面定义了mapbox的地图容器,并设置了访问token,关键代码如下:

<script>mapboxgl.accessToken = 'pk.eyJ1IjoibGFicy1zYW5kYm94IiwiYSI6ImNqejl3a2o0NDBieWczZXBqNnI4OGxjd24ifQ.PeWoqmCrmHKgMwM6GCAfEg';var tileset = 'mapbox.streets';var map = new mapboxgl.Map({container: 'map',zoom: 6,center: [112.742578, 27.669359],style: 'mapbox://styles/mapbox/light-v9',hash: false,});    
</script>

4、加载矢量瓦片

        使用以下代码加载矢量瓦片,

<script>map.on('load', function loaded() {//添加刚才发布的mvt数据源map.addSource('tile', {"type": "vector","tiles": ['http://localhost:8050/zgis/vector/tile/{z}/{x}/{y}'],"minZoom": 1,"maxZoom": 7})//添加各图层map.addLayer({"id": "area-layer","type": "fill","source": "tile",// 上一步添加的数据源id"source-layer": "points",// source-layer和mvt服务中的图层名对应//"layout": {"visibility": "visible"},"paint": {"fill-color": '#51bbd6', "fill-opacity": 0.6, "fill-outline-color": '#0000ff'}})});</script>

        这里需要注意的是,在加载矢量瓦片的时候,注意source-layer和发布的矢量瓦片的id对应。同时layer中的soure要和source中的name一致,同时需要给layer定义一个唯一的id。

5、效果展示

 使用mapbox可以使用鼠标进行地图旋转,点击鼠标右键,可开启旋转功能,展示界面如下:

 总结

        以上就是本文的主要内容,本文将为各位朋友简单介绍Mapbox,以及如何基于Mapbox来进行Mvt矢量瓦片的集成展示,最后为朋友们生成一个完整的案例,如果您当前业务当中有需要,可以作为参考。行文仓促,难免有错误,不当之处,还请朋友们在评论区留言批评指正。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/630201.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端已死,我们的出路究竟在哪里?

最近前端已死这个话题很火&#xff0c;同时带来的社会效应也很大。在外行看来&#xff0c;以为市场上已经不需要前端了&#xff0c;原本要入行的朋友们也不敢入行了&#xff1b;对于已经入行的朋友们&#xff0c;也会因为这句话增添几分焦虑。 那么前端这个行业的现状到底如何…

UE5 C++的TCP服务器与客户端

客户端.h 需要在Build.cs中加入模块:"Networking","Sockets","Json","JsonUtilities" // Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include…

c++八股8

友元函数能不能是虚函数&#xff1a; 友元函数不属于类的成员函数&#xff0c;它独立于类存在&#xff0c;因此不存在是否为虚函数的概念。友元函数主要用于突破类的封装性&#xff0c;使外部函数能访问类的私有和保护成员&#xff0c;它与类的继承和多态无关。TCP三握四挥&…

SQL进阶2

5、检查CHECK约束 CHECK 约束主要用于通过将插入的值限制为遵循定义的值、范围或格式规则的值来强制域完整性。 5.1 CHECK 约束&#xff08;检查性约束&#xff09;用来限制字段的取值范围。 在 CHECK 约束中添加限制条件&#xff0c;只有满足这些条件的值才允许进入该字段。 …

媒体捕捉-iOS中的人脸识别

引言 在如今的移动应用和直播场景中&#xff0c;我们常常能体验到一种颇具趣味与互动性的功能&#xff1a;无论是美颜相机中的萌趣贴纸精准附着于人脸关键点上&#xff0c;还是主播们在直播时实时戴上可爱的虚拟动物耳朵或动态装饰物&#xff0c;这些令人眼前一亮的效果背后&a…

Redis的常用场景有哪些?

1、缓存 缓存现在几乎是所有中大型网站都在用的必杀技&#xff0c;合理的利用缓存不仅能够提升网站访问速度&#xff0c;还能大大降低数据库的压力。Redis提供了键过期功能&#xff0c;也提供了灵活的键淘汰策略&#xff0c;所以&#xff0c;现在Redis用在缓存的场合非常多。 …

算法训练营Day42

#Java #动态规划 # Feeling and experiences&#xff1a; 买卖股票的最佳时机III&#xff1a;力扣题目链接 给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你最多可以完成 两笔 交易。 注意&#x…

docker:环境安装

系列文章目录 docker&#xff1a;环境安装 文章目录 系列文章目录前言一、Debian安装1.镜像下载2.VM安装3.Debian安装 二、docker安装1.Debian12换源2.docker安装3.docker测试4.docker换源 总结 前言 因为CentOS7确定停服时间为6月30日&#xff0c;虽然对我这种小虾米没啥影响…

dubbox框架

1、dubbox介绍 Dubbo(读音[ˈdʌbəʊ])是阿里巴巴公司开源的一个基于Java的高性能RPC&#xff08;Remote Procedure Call&#xff09;框架&#xff0c;使得应用可通过高性能的 RPC 实现服务的输出和输入功能&#xff0c;可以和 Spring框架无缝集成。后期阿里巴巴停止了该项目…

机器学习之样本及统计量

在数理统计中,称研究对象的全体为总体,组成总体的每个基本单元叫个体。从总体X中随机抽取一部分个体 X 1 , X 2 , . . . , X N X_1,X_2,...,X_N X1​,X2​,...,XN​称 X 1 , X 2 , . . . , X N X_1,X_2,...,X_N X1​,X2​,...,XN​为取自X的容量为n的样本。 实际上,数理统计…

HashMap集合万字源码详解(面试常考)

文章目录 HashMap集合1.散列2.hashMap结构3.继承关系4.成员变量5.构造方法6.成员方法6.1增加方法6.2将链表转换为红黑树的treeifyBin方法6.3扩容方法_resize6.3.1扩容机制6.3.2源码resize方法的解读 6.4 删除方法(remove)6.5查找元素方法(get)6.6遍历HashMap集合几种方式 7.初始…

vue安装组件报错In most cases you are behind a proxy or have bad network settings.

解决办法 步骤1 npm config get proxy npm config get https-proxy 如果2个返回值不为null&#xff0c;请执行下面代码&#xff0c;重置为null。否则&#xff0c;直接执行步骤2。 npm config set proxy null npm config set https-proxy null 步骤2 npm config set regis…

cv 不能正常读取中文路径

之前一直以为是PyQT的getOpenFileNames方法不能读取中文路径的。多次尝试后发现不是&#xff0c;是OpenCV的问题。 self.selected_imgPaths, _ QtWidgets.QFileDialog.getOpenFileNames(self, "打开图片", "./pending_images", "*.jpg;;*.JPG;;*.png…

【Windows取证篇】Window日志分析基础知识(一)

【Windows取证篇】Window日志分析基础知识&#xff08;一&#xff09; Windows系统审计是对系统中有关安全的活动进行记录、检查以及审核&#xff0c;一般是一个独立的过程。Window自带的事件查看器并没有提供删除特定日志的功能&#xff0c;我们在系统审计取证分析时&#xf…

【卡梅德生物】纳米抗体文库构建

纳米抗体文库构建服务是一项提供定制化纳米抗体文库的服务&#xff0c;旨在满足研究者和生物制药公司对高质量抗体的需求。这项服务通常包括以下主要步骤&#xff1a; 1.抗原设计和制备&#xff1a; -客户提供目标抗原信息&#xff0c;或由服务提供商协助设计抗原。 -抗原制…

基于Java+SSM志愿者服务管理系统详细设计和实现【附源码】

基于JavaSSM志愿者服务管理系统详细设计和实现【附源码】 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系…

九、Qt C++ 数据库开发

《一、QT的前世今生》 《二、QT下载、安装及问题解决(windows系统)》《三、Qt Creator使用》 ​​​ 《四、Qt 的第一个demo-CSDN博客》 《五、带登录窗体的demo》 《六、新建窗体时&#xff0c;几种窗体的区别》 《七、Qt 信号和槽》 《八、Qt C 毕业设计》 《九、Qt …

Vue-23、Vue收集表单数据

1、效果 2、代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>收集表单数据</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/vue2/dist/vue.js…

服务网关 Gateway

服务网关 Gateway Spring Cloud Gateway 是 Spring Cloud 生态系统中的网关&#xff0c;它基于 Spring5.0 SpringBoot2.0 WebFlux&#xff08;基于高性能的 Reactor 模式响应式通信框架 Netty&#xff0c;异步非阻塞模型&#xff09;等技术开发。旨在为微服务架构提供一种简…

GO基础进阶篇 (十三)、泛型

泛型 先看一下这段代码。 package mainimport "fmt"func main() {strs : []string{"a", "b"}printArray(strs) }func printArray(arr []interface{}) {for _, a : range arr {fmt.Println(a)} }上面的代码中&#xff0c;我们想要打印参数arr的…