当前位置：首页 > news >正文

mapbox基础，加载天地图矢量底图

news 来源：原创 2025/5/18 2:11:16

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：mapbox 从入门到精通

文章目录

一、🍀前言
- 1.1 ☘️mapboxgl.Map 地图对象
- 1.1 ☘️mapboxgl.Map style属性
二、🍀加载天地图矢量底图
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于mapbox-gl v3.8.0版本中加载天地图矢量底图，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️mapboxgl.Map 地图对象

HREE.PlaneGeometry 用于生成平面几何体的类。
构造函数：
new Map class(options: Object)
本例使用属性：
在这里插入图片描述

1.1 ☘️mapboxgl.Map style属性

本例使用属性：

version：版本号，当前固定值为8。
sources：数据源集合（必填，用于包含一系列数据源
source，这些数据源提供了在地图上显示的数据）。值为{}对象。{}中的属性名是数据源的名称。
每个数据源 source 有的属性：
type：数据源类型
tiles：数据源地址
tileSize：数据源切片大小
layers：图层集合（必填，包含了一系列图层 layer，这些图层指定了如何渲染数据源提供的数据）
每个layer的属性（当前示例用到的）：
id：图层id
type：图层类型
source：数据源名称

二、🍀加载天地图矢量底图

1. ☘️实现思路

1、创建html文件，引入mapbox-gl v3.8.0的样式和js库文件。
2、添加’id=map’的div要素，作为mapboxgl.Map的地图容器。
3、在<script>标签内，实现加载天地图矢量底图的方法。
具体方法：设置mapboxgl.baseApiUrl为null，防止官方token校验，导致地图无法加载。创建mapboxgl.Map地图对象map，构造函数中，传入container的值为‘map’作为渲染的容器（此处为2步骤div标签的id）。zoom设置为12，表示初始化地图缩放级别。minZoom设置为0，表示最小缩放级别。center为北京经纬度坐标[116.4, 39.9]，表示初始化坐标位置。style设置为天地图数据源，并使用该数据源加载矢量底图以及对象底图注记。具体代码参考代码样例。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>加载天地图矢量底图</title><script src="lib/jquery-3.4.1.js"></script><link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
</head>
<style>html, body {height: 100%;margin: 0px;}#map {width: 100%;height: 100%;}
</style>
<body>
<div id="map">
</div>
</body>
<script type="text/javascript">mapboxgl.baseApiUrl = nulllet tdtToken = '天地图官网注册申请'let map = new mapboxgl.Map({container: 'map',zoom: 12,minZoom: 0,center: [116.4, 39.9],style: {version: 8,sources: {tdt_vec_source: {'type': 'raster','tiles': ['https://t0.tianditu.gov.cn/vec_w/wmts?tk=' + tdtToken + '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'],'tileSize': 256},tdt_vecbz_source: {'type': 'raster','tiles': ['https://t0.tianditu.gov.cn/cva_w/wmts?tk=' + tdtToken + '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'],'tileSize': 256}},layers: [{'id': 'tdt_vec_source','type': 'raster','source': 'tdt_vec_source'},{'id': 'tdt_vecbz_source','type': 'raster','source': 'tdt_vecbz_source'}]}})map.on('load', () => {})
</script></html>

效果如下：
在这里插入图片描述

mapbox基础，加载天地图矢量底图

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀前言1.1 ☘️mapboxgl.Map 地图对象…...

编程日记 2025/5/18 2:11:16

SLAM/数字图象处理基础

概念视差：相同特征的不同深度估计的偏差 BoW，DBoW，DBoW2的区别是什么 Bag of Words (BoW)、DBoW（Dynamic Bag of Words）和DBoW2是用于图像处理和计算机视觉中的不同特征表示和匹配方法。它们之间的主要区别如下&am…...

编程日记 2025/5/9 3:01:59

修改vue-element-admin，如何连接我们的后端

改哪几个文件就可以连接我们后端主要就这四个 main.js，屏蔽这个或者删除 vue-config 最后两个文件改下端口即可这样基本就能发了，但是还要改下改成api 然后还要修改request.js 这里改成我们返回的状态码我讲一个东西很容易就懂了&…...

编程日记 2025/5/18 1:50:15

基于PLC的采摘机械手系统（论文+源码）

1系统方案设计本次设计围绕基于PLC的采摘机械手系统进行设计， PLC即可编程控制器其是一种常见的微处理器，本次拟采用西门子是S7-200 PLC，一方面对整个设计从器件选型到I/O分配，图纸绘制等进行设计，另一方面还通过组态…...

编程日记 2025/5/3 2:39:52

使用ArcGIS/ArcGIS pro绘制六边形/三角形/菱形渔网图

在做一些尺度分析时，经常会涉及到对研究区构建不同尺度的渔网进行分析，渔网的形状通常为规则四边形。构建渔网的方法也很简单，使用ArcGIS/ArcGIS Pro工具箱中的【创建渔网/CreateFishnet】工具来构建。但如果想构建其他形状渔网进行相关分析&…...

编程日记 2025/5/17 6:24:46

【5/6 面向应用相关的优化网卡实现及评估】

5 面向应用相关的优化面对数据中心多样化的部署需求和应用场景，如分布式存储、多租户性能隔离等，构建高性能的RDMA系统需要仔细选择传输模式和通信原语以充分发挥其性能优势，并调整软硬件结构进行适配.整体手段：在软件层面结合R…...

编程日记 2025/5/17 5:39:25

如何识别钓鱼邮件和诈骗网站？（附网络安全意识培训PPT资料）

识别钓鱼邮件和诈骗网站是网络安全中的一个重要环节。以下是一些识别钓鱼邮件和诈骗网站的方法： 识别钓鱼邮件： 检查发件人地址： 仔细查看发件人的电子邮件地址，看是否与官方域名一致。检查邮件内容： 留意邮件中是否…...

编程日记 2025/5/13 17:25:15

TOGAF之架构标准规范-业务架构

TOGAF标准规范中，业务架构阶段的主要工作是开发支持架构愿景的业务架构。如上所示，业务架构（Business Architecture）在TOGAF标准规范中处于B阶段，该阶段的主要内容包括阶段目标、阶段输入、流程步骤、架构方法。阶段…...

编程日记 2025/5/11 13:37:24

嵌入式轻量级开源操作系统:HeliOS的使用

嵌入式轻量级开源操作系统:HeliOS的使用 📍项目地址：https://github.com/heliosproj/HeliOS HeliOS项目是一个社区交付的开源项目，用于构建和维护HeliOS嵌入式操作系统（OS）。HeliOS是一个功能齐全的操作系统&#xff0…...

编程日记 2025/5/15 16:00:38

mysql 数据库迁移到达梦数据库

1.windows安装达梦数据库，去官网下载 dm8 进行安装，安装后，可以使用管理工具管理数据使用迁移工具对数据进行迁移； 2.使用php 或者 thinkphp连接达梦数据库 2.1、先PHP开启DM扩展从达梦数据库安装目录下drivers/php_pdo 复制对…...

编程日记 2025/5/11 18:26:35

Java中的异常处理机制

今天想和大家探讨Java中的异常处理机制。异常处理是任何编程语言中不可或缺的一部分，它帮助我们处理程序运行时可能出现的错误，确保程序的健壮性和稳定性。Java作为一种强类型、面向对象的编程语言，提供了一套完整的异常处理框架。 1. 异常的…...

编程日记 2025/5/15 17:54:43

iOS 苹果开发者账号：查看和添加设备UUID 及设备数量

参考链接：苹果开发者账号下添加新设备UUID - 简书如果要添加新设备到 Profiles 证书里： 1.登录开发者中心 Sign In - Apple 2.找到证书设置： Certificate，Identifiers&Profiles > Profiles > 选择对应证书 edit &g…...

编程日记 2025/5/17 20:13:33

数据仓库工具箱—读书笔记02(Kimball维度建模技术概述03、维度表技术基础)

Kimball维度建模技术概述记录一下读《数据仓库工具箱》时的思考，摘录一些书中关于维度建模比较重要的思想与大家分享🤣🤣🤣 第二章前言部分作者提到：技术的介绍应该通过涵盖各种行业的熟悉的用例展开（赞同…...

编程日记 2025/5/17 23:43:44

Linux中常用的Shell脚本（运维+常用）汇总

废话不多说，直接上干货！ 一、运维脚本 （1）监控CPU和内存的使用情况 #!/bin/bashcpu_threshold80 mem_threshold80# 获取CPU和内存使用率 cpu_usage$(top -bn1 | grep "Cpu(s)" | sed "s/.*, *$[0-9.]*$%* id.…...

编程日记 2025/5/15 5:57:52

Java 方法注释：规范、实用和高质量的写法

目录为什么要注释方法？ 方法注释的基本要求 Javadoc 注释格式示例：一个计算圆面积的方法代码示例注释分析如何写出高质量的 Java 方法注释？ 1. 关注可读性 2. 使用 Javadoc 格式 3. 描述异常 4. 适当的解释复杂的算法 5. 避…...

编程日记 2025/5/17 10:54:42

解决JIRA、Confluence用户自动注销、反复登录的问题

一、问题描述：当工作从从confluence里面打开jira的时候，在回到confluence时候，就自动退出了，需要账号密码登录重复登录，使人十分厌恶。二、原因分析： 访问 JIRA、Confluence 或任何其他具有相同域或 IP 上…...

编程日记 2025/5/17 14:14:05

Python9-作业2

记录python学习，直到学会基本的爬虫，使用python搭建接口自动化测试就算学会了，在进阶webui自动化，app自动化 python基础8-灵活运用顺序、选择、循环结构作业2九九乘法表三种方式打印九九乘法表使用两个嵌套循环使用列表推导式和…...

编程日记 2025/5/14 20:29:34

基于c语言的union、字符串、格式化输入输出

结构体之共用体union 共用体也叫联合体，其关键词为union 与结构体不同的是，共用体所开辟的存储空间仅仅为其中最长类型变量的存储空间而不是全部变量的存储空间，由于同一内存单元在同一时间内只能存放其中一种的数据类型，因此在每…...

编程日记 2025/5/17 12:57:37

SpringCloudAlibaba实战入门之路由网关Gateway初体验（十）

Spring Cloud 原先整合 Zuul 作为网关组件，Zuul 由 Netflix 公司提供的，现在已经不维护了。后面 Netflix 公司又出来了一个 Zuul2.0 网关，但由于一直没有发布稳定版本，所以 Spring Cloud 等不及了就自己推出一个网关，已…...

编程日记 2025/5/15 5:59:26

活着就好20241227

亲爱的朋友们，大家早上好！🌞 今天是27号，星期五，2024年12月的第二十七天，同时也是第51周的第五天，农历甲辰[龙]年十一月初二十三日。在这晨光渐浓的美好时刻，愿那温暖而明媚的阳光洒…...

编程日记 2025/5/16 12:55:00

robotframework中的测试套件

一. 简介本文简单来了解一下，robotframework中的测试套件。二. robotframework中测试套件 1. 什么是测试套件？ 测试套件（Test Suite） 是一组相关测试用例的集合。每个测试套件通常代表一个特定的功能模块、系统组件或业务流程…...

编程日记 2025/5/11 17:52:17

Echarts连接数据库，实时绘制图表详解

文章目录 Echarts连接数据库，实时绘制图表详解一、引言二、步骤一：环境准备与数据库连接1、环境搭建2、数据库连接三、步骤二：数据获取与处理1、查询数据库2、数据处理四、步骤三：ECharts图表配置与渲染1、配置ECharts选项2、动…...

编程日记 2025/5/15 3:37:40

【QED】爱丽丝与混沌的无尽海

文章目录题目题目描述输入输出格式数据范围测试样例思路代码复杂度分析时间复杂度空间复杂度题目题目链接🔗 题目描述如图所示，爱丽丝在一个3x3的迷宫之中，每个方格中标有 1 − 9 1-9 1−9各不相同的数字，爱丽丝可以从一格…...

编程日记 2025/5/14 13:58:12

CHM助手＞＞如何安装CHM助手

1 如何安装CHM助手下载CHM助手.ezip，下载地址打开EverEdit，选择主菜单“扩展 -> 扩展管理 -> 从本地文件安装扩展”，在弹出的文件浏览窗口中选择插件安装包，如下图所示： 🕮说明： …...

编程日记 2025/5/16 6:11:26

硬件设计：LVDS电平标准

什么是LVDS？ LVDS（Low-Voltage Differential Signaling）是一种高速、低功耗的差分信号传输标准。它通过一对差分信号线（通常是两根互补信号线）来传输数据，广泛应用于高速数字通信领域。 LVDS 的核心特点低…...

编程日记 2025/5/13 12:10:38

宝塔-firefox(Docker应用)-构建自己的Web浏览器

安装基础软件宝塔中安装firefox(Docker应用) 。宝塔中需要先安装docker及docker-composefirefox配置安装点击firefox应用，选择【安装配置】点击右边绿色按钮，进行安装，这一步等待docker-compose根据你的配置初始化docker应用等待安装 …...

编程日记 2025/5/15 14:06:45

微信小程序-基于Vant Weapp UI 组件库的Area 省市区选择

Area 省市区选择，省市区选择组件通常与弹出层组件配合使用。 areaList 格式 areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两…...

编程日记 2025/5/16 14:42:56

宏转录组+HiFi宏基因组：揭示厌氧消化中的碳流和能量转换

厌氧消化是一种重要的工程生物技术，对有机废物的资源回收和可再生能源的生产起着关键作用。然而，由于对未培养的厌氧菌及其适应环境变化的能力了解有限，这限制了该技术的优化和生物气生产的可持续性。今天小编带大家看一篇发表在《Microbiome…...

编程日记 2025/5/15 17:27:37

【VSCode】工作区及设置

【VSCode】工作区及设置 VSCode介绍工作区设置 VSCode介绍 Visual Studio Code（简称VSCode）是一个由微软开发的免费、开源的代码编辑器，以下是VSCode的一些功能及特性： 编辑器核心： 多文档界面：VSCode允许…...

编程日记 2025/5/17 15:20:08

瀚高数据库

文章目录瀚高数据库安装瀚高数据库快速入门遇到的问题总结瀚高数据库瀚高数据库（HanGaoDB）是一款在分布式存储、高并发处理和高可用性方面表现优异的数据库，特别适用于大数据、高吞吐量、高并发的应用场景。它结合了传统 SQL 数据库和分布…...

编程日记 2025/5/11 0:56:22

xterm遇到的问题及解决方案

xterm遇到的问题及解决方案 /r插入终端导致的之后插入的数据覆盖了改行头部的数据问题说明如图所示，当在一行输入的候，输入的l插入到了改行的头部。查看ws返回数据可见ws返回的信息存在\r字符，在xterm.js中\r是回车字符的意思&…...

编程日记 2025/5/16 22:39:33

嵌入式单片机温湿度模块控制与实现

温湿度模块的使用温湿度模块的特点温湿度模块的原理通信的开始（打电话）通信的过程（交流中）...

编程日记 2025/4/24 23:22:52

表达式语句、复合语句和空语句

欢迎拜访：雾里看山-CSDN博客本篇主题：表达式语句、复合语句和空语句发布时间：2024.12.26 隶属专栏：C语言目录 1. 表达式语句定义作用常见类型赋值语句函数调用语句 2. 复合语句定义作用变量作用域 3. 空语句定义作用 1. 表达式…...

编程日记 2025/5/11 7:03:48

Dilateformer实战：使用Dilateformer实现图像分类任务（二）

文章目录训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度，DP多卡，EMA定义训练和验证函数训练函数验证函数调用训练和验证方法运行以及结果查看测试完整的代码在上…...

编程日记 2025/5/14 22:40:45

Kubernetes 镜像拉取策略全解析：如何根据需求选择最佳配置？

在Kubernetes集群里，拉取容器镜像是一个非常关键的步骤。这些镜像包含了应用程序及其所有需要的依赖项，Kubernetes通过拉取这些镜像来启动Pod中的容器。为了提升集群的稳定性、速度和安全性，Kubernetes提供了几种不同的镜像拉取策略。这篇文章…...

编程日记 2025/5/15 3:19:45

上海AI中心记录

1、js事件循环调用栈（Call Stack）： JavaScript 是单线程的，所有的代码执行都是在调用栈中进行的。当函数被调用时，进入栈中；执行完毕后，从栈中弹出。任务队列（Task Queue&#xff…...

编程日记 2025/5/8 9:24:32

oscp学习之路，Kioptix Level2靶场通关教程

oscp学习之路，Kioptix Level2靶场通关教程靶场下载：Kioptrix Level 2.zip 链接: https://pan.baidu.com/s/1gxVRhrzLW1oI_MhcfWPn0w?pwd1111 提取码: 1111 搭建好靶场之后输入ip a看一下攻击机的IP。确定好本机IP后，使用nmap扫描网段&…...

编程日记 2025/5/17 15:29:14

基于SpringBoot的蜗牛兼职网的设计与实现

一、项目背景随着社会的快速发展，计算机的影响是全面且深入的。人们生活水平的不断提高，日常生活中人们对蜗牛兼职网方面的要求也在不断提高，需要兼职工作的人数更是不断增加，使得蜗牛兼职网的开发成为必需而且紧迫的事情。蜗牛…...

编程日记 2025/5/13 4:38:19

C++软件设计模式之装饰器模式

装饰器模式（Decorator Pattern）是C软件设计模式中的一种结构型设计模式，主要用于解决在不改变现有对象结构的情况下动态地给对象添加新功能的问题。通过使用装饰器模式，可以在运行时为对象添加新的行为，而不需要修改其…...

编程日记 2025/5/12 12:27:06

Spring Boot项目接收前端参数的11种方式

大家好，我是袁庭新。在前后端项目交互中，前端传递的数据可以通过HTTP请求发送到后端， 后端在Spring Boot中如何接收各种复杂的前端数据呢？这篇文章总结了11种在Spring Boot中接收前端数据的方式。 1 搭建项目 1.通过Spring Init…...

编程日记 2025/5/14 3:44:06

通过GRE协议组建VPN网络

GRE（Generic Routing Encapsulation，通用路由封装协议）协议是一种简单而有效的封装协议，它在网络中的广泛应用，比如在构建VPN网络。　　GRE是一种封装协议，它允许网络层协议（如IP）的…...

编程日记 2025/5/14 1:19:20

you-get使用cookies下载B站视频

B站视频更换BV号以后，使用you-get不能下载了。首先更新你的you-get pip install --upgrade you-get 更新完成后再次使用you-get -u 命令会显示使用cookies才能下载更多清晰度的视频使用Edge浏览器，添加插件 Cookie-Editor 点击上图的导出按钮&am…...

编程日记 2025/5/13 10:06:32

使用Excel制作通达信自定义“序列数据“

序列数据的视频教程演示 Excel制作通达信自定义序列数据 1.序列数据的制作方法：删掉没有用的数据（行与列）和股代码格式处理，是和外部数据的制作方法是相同，自己上面看历史博文。只需要判断一下，股代码跟随的…...

编程日记 2025/5/14 12:01:54

基于 Nginx 的网站服务器与 LNMP 平台搭建指南

一，Nginx概述（一）Nginx的作用 Nginx在网络服务器架构中扮演着多面的角色。其初始设定专注于静态网络数据的处理，能高效地为用户提供诸如HTML,CSS,JavaScript等静态资源。当面对动态数据时，借助php - fpm模块，Nginx能够解析php源代码，实现动态页面的生成与展示。在处理…...

编程日记 2025/5/17 9:16:56

OpenCV计算机视觉 03 椒盐噪声的添加与常见的平滑处理方式（均值、方框、高斯、中值）

上一篇文章：OpenCV计算机视觉 02 图片修改图像运算边缘填充阈值处理添加椒盐噪声 def add_peppersalt_noise(image, n10000):result image.copy()h, w image.shape[:2] # 获取图片的高和宽for i in range(n): # 生成n个椒盐噪声x np.random.randint(…...

编程日记 2025/5/17 9:32:50

WPF自定义窗口输入验证不生效

WPF自定义窗口输入验证不生效 WPF ValidationRule 不生效 WPF ValidationRule 不生效解决方案：在WindowStyle的Template中添加AdornerDecorator标签。 <Style x:Key"WindowStyle1" TargetType"{x:Type Window}"><Setter Property&…...

编程日记 2025/5/15 11:30:35

【MySQL】 SQL优化讲解

一、优化前的思考在定位到慢查询后，面试官常问如何优化或分析慢查询的SQL语句。若存在聚合查询、多表查询，可尝试优化SQL语句结构，如多表查询可新增临时表；若表数据量过大，可添加索引，但添加索引后仍慢则…...

编程日记 2025/5/12 17:48:58

05.HTTPS的实现原理-HTTPS的握手流程（TLS1.2）

05.HTTPS的实现原理-HTTPS的握手流程（TLS1.2） 简介1. TLS握手过程概述2. TLS握手过程细化3. 主密钥（对称密钥）生成过程4. 密码规范变更简介主要讲述了混合加密流程完成后，客户端和服务器如何共同获得相同的对称密钥…...

编程日记 2025/5/6 3:58:58

Java获取自身被调用点

1. 场景打印日志的时候，需要获取是在哪个地方被调用了，把调用点的信息一并打印出来。 2. 获取自身被调用点的方法可以通过获取线程的调用栈，遍历后找到调用点。 3. 代码实现 import java.text.SimpleDateFormat; import java.util.Dat…...

编程日记 2025/5/12 21:54:29

有序之美：C++ Set的哲学与诗意

文章目录前言一.C set 的概念1.1 set 的定义1.2 set 的特点二. set 的构造方法2.1 常见构造函数2.1.1 示例：不同构造方法 2.2 相关文档三.set 的常用操作3.1 插入操作详解3.1.1 使用 insert() 插入元素3.1.2 使用 emplace() 插入元素3.1.3 插入区间元素 3.2 查找操…...

编程日记 2025/5/13 23:52:19