mapbox基础,加载mapbox官方地图

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

文章目录

  • 一、🍀前言
    • 1.1 ☘️mapboxgl.Map 地图对象
  • 二、🍀加载mapbox官方地图
    • 1. ☘️实现思路
    • 2. ☘️代码样例


一、🍀前言

本文详细介绍如何基于mapbox-gl v3.8.0版本中加载mapbox官网地图,亲测可用。希望能帮助到您。一起学习,加油!加油!

1.1 ☘️mapboxgl.Map 地图对象

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

二、🍀加载mapbox官方地图

1. ☘️实现思路

  • 1、创建html文件,引入mapbox-gl v3.8.0的样式和js库文件。
  • 2、添加"<div id=“map”>"html要素,作为mapboxgl.Map的地图容器。
  • 3、创建"<script>“标签,在”<script>"内,实现加载mapbox官方地图的方法。
    具体方法:设置mapbox的accessToken,作为访问官方资源的token依据。创建mapboxgl.Map地图对象map,构造函数中,传入container的值为‘map’作为渲染的容器(此处为2步骤div标签的id)。zoom设置为12,表示初始化地图缩放级别。minZoom设置为0,表示最小缩放级别。center为[116.4, 39.9],表示初始化坐标位置。style设置为‘mapbox://styles/mapbox/standard’,为官网标准地图样式地址。具体代码参考代码样例。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>mapbox基础,加载mapbox地图</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">// 需要maobox官网注册账户,获取accessToken,否则无法访问官网服务mapboxgl.accessToken = 'your token';var map = new mapboxgl.Map({container: 'map',zoom: 12,minZoom: 0,center: [116.4, 39.9],style: 'mapbox://styles/mapbox/standard'})map.on('load', () => {})
</script></html>

效果如下:
地图初始化状态,定位到北京。在这里插入图片描述
缩小到能看到地球全貌在这里插入图片描述
在这里插入图片描述

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

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

相关文章

汽车IVI中控开发入门及进阶(三十八):手机投屏HiCar开发

手机投屏轻松实现手机与汽车的无缝连接,导航、音乐、通话等功能应有尽有,还支持更多第三方应用,让车载互联生活更加丰富多彩。 HiCar在兼容性和开放性上更具优势。 手机投屏可以说是车机的杀手级应用,大大拓宽了车机的可用性范围。其中华为推出的HiCar就是非常好用的一种。…

优化程序中的数据:从数组到代数

前言 我们往往都希望优化我们的程序&#xff0c;使之达到一个更好的效果&#xff0c;程序优化的一个重点就是速度&#xff0c;加快速度的一个好办法就是使用并行技术&#xff0c;但是&#xff0c;并行时我们要考虑必须串行执行的任务&#xff0c;也就是有依赖关系的任务&#…

Elasticsearch:确保业务规则与语义搜索无缝协作

作者&#xff1a;来自 Elastic Kathleen DeRusso 利用查询规则与语义搜索和重新排序相结合的强大功能。 更多阅读&#xff1a; Elasticsearch 8.10 中引入查询规则 - query rules Elasticsearch 查询规则现已正式发布 - query rules 你是否知道查询规则&#xff08;query ru…

文本模式下成功。ubuntu P104成功。

https://www.nvidia.com/en-us/drivers/details/226760/ 你下载的 NVIDIA-Linux-x86_64-470.256.02.run 是 NVIDIA 提供的二进制驱动程序安装文件。以下是详细的步骤&#xff0c;帮助你正确安装这个驱动程序。 1. 备份现有驱动&#xff08;可选&#xff09; 在安装新驱动之前…

把riscv32位系统弄懂1:riscv32 CPU指令学习

Riscv手册 首先下载手册&#xff1a;文件下载----中国开放指令生态(RISC-V)联盟 从这个页面下载riscv-spec-v2.1中文版 也可以下载中科大的这本&#xff1a;RISC-V手册 Riscv32指令集包括基础指令集和一些扩展指令集&#xff0c;比如在ESP32C3技术手册中&#xff0c;写到E…

全国消费水平系统|Java|SSM|JSP|

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…

达梦数据库-读写分离集群部署

读写分离集群部署 读写分离集群由一个主库以及一个或者多个(最多可以配置 8 个)实时备库组成&#xff0c;基于实时归档实现的高性能数据库集群&#xff0c;不但提供数据保护、容灾等数据守护基本功能&#xff0c;还具有读写操作自动分离、负载均衡等特性。同时可以配置确认监视…

【ALGC】探秘 ALGC—— 卓越数据处理能力的科技瑰宝

我的个人主页 我的领域&#xff1a;人工智能篇&#xff0c;希望能帮助到大家&#xff01;&#xff01;&#xff01;&#x1f44d;点赞 收藏❤ 在大数据时代&#xff0c;如何高效地处理和分析海量数据是一个核心挑战。ALGC&#xff08;Advanced Learning and Generalized Comp…

如何提高webpack的构建速度?

提高Webpack构建速度是优化Web开发流程的一个重要方面。以下是一些提升Webpack构建速度的方法&#xff1a; 1. 使用适当的mode选项 开发模式&#xff08;development&#xff09;&#xff1a;默认情况下&#xff0c;Webpack以较慢的速度进行构建&#xff0c;以便于开发。如果…

docker仓库用户认证

保证实验环境纯净删除启动的docker 1.安装建立认证文件的工具包 [rootlocalhost ~]# yum install httpd-tools -y 2.创建目录存放认证文件 [rootlocalhost ~]# mkdir auth [rootlocalhost ~]# htpasswd -Bc auth/.htpasswd lee #-B 强制使用最安全加密方式&#xff0c;默认用m…

在 Windows 下生成 .tgz 文件的方法

方法 1&#xff1a;使用 7-Zip 7-Zip 是一个流行的免费压缩工具&#xff0c;支持生成 .tar.gz 格式。 步骤&#xff1a; 下载并安装 7-Zip。准备好要压缩的文件或文件夹。右键点击文件或文件夹&#xff0c;选择 7-Zip > 添加到压缩文件...。在弹出的对话框中&#xff1a;…

WPSJS:让 WPS 办公与 JavaScript 完美联动

随着办公自动化需求的日益增长&#xff0c;WPS Office 推出了 WPSJS&#xff0c;这是一款强大的开发者工具&#xff0c;允许开发者通过 JavaScript 脚本与 WPS 办公软件进行互动。无论是在表格中自动填充数据、在文档中修改格式&#xff0c;还是在演示文稿中插入动态内容&#…

(OCPP服务器)SteVe编译搭建全过程

注意&#xff1a;建议使用3.6.0&#xff0c;我升级到3.7.1&#xff0c;并没有多什么新功能&#xff0c;反而电表的实时数据只能看到累计电能了&#xff0c;我回退了就正常&#xff0c;数据库是兼容的&#xff0c;java版本换位java11&#xff0c;其他不变就好 背景&#xff1a;…

Git 的基本概念和使用

Git是一个分布式版本控制系统&#xff0c;它可以帮助开发人员追踪和管理代码的修改。下面是Git的基本概念和使用方式的解释&#xff1a; 仓库&#xff08;Repository&#xff09;&#xff1a;Git使用仓库来存储代码和版本历史记录。仓库可以位于本地计算机上&#xff0c;也可以…

【IMU:视觉惯性SLAM系统】

视觉惯性SLAM系统简介 相机&#xff08;单目/双目/RGBD)与IMU结合起来就是视觉惯性&#xff0c;通常以单目/双目IMU为主。 IMU里面有个小芯片可以测量角速度与加速度&#xff0c;可分为6轴(6个自由度)和9轴&#xff08;9个自由度&#xff09;IMU&#xff0c;具体的关于IMU的介…

Linux 基本使用和程序部署

1. Linux 环境搭建 1.1 环境搭建方式 主要有 4 种&#xff1a; 直接安装在物理机上。但是Linux桌面使用起来非常不友好&#xff0c;所以不建议。[不推荐]。使用虚拟机软件&#xff0c;将Linux搭建在虚拟机上。但是由于当前的虚拟机软件(如VMWare之类的)存在一些bug&#xff…

c++------------------函数

函数定义 语法格式 函数定义包括函数头和函数体。函数头包含返回类型、函数名和参数列表。函数体是用花括号{}括起来的代码块&#xff0c;用于实现函数的功能。例如&#xff0c;定义一个计算两个整数之和的函数&#xff1a; int add(int a, int b) {return a b; }这里int是返回…

如何在centos系统上挂载U盘

在CentOS上挂载NTFS格式的U盘,需要执行一系列步骤,包括识别U盘设备、安装必要的软件、创建挂载点,并最终挂载U盘。以下是在CentOS上挂载NTFS格式U盘的详细步骤: 一、准备工作 确认CentOS版本: 确保你的CentOS系统已经安装并正常运行。不同版本的CentOS在命令和工具方面可能…

Excel中match()函数

函数功能概述 MATCH 函数是 Excel 中用于在指定区域中查找特定值的位置的函数。它返回指定数值在指定数组区域中的位置。这个位置是相对于查找区域的相对位置&#xff0c;而不是绝对的单元格位置。语法结构 MATCH(lookup_value, lookup_array, match_type)lookup_value&#xf…

解决树形列表中数值层级累加

一、场景 记录解决树形列表中&#xff0c;父级中的某个属性需要由自身和子集累加的一个方法(递归)。 二、解决方案 public static void main(String[] args) throws Exception {List<NewsCategoryStaticDto> dataList new ArrayList<>();/*** 构造树形列表数据*…