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

mapbox高德地图与相机

news 2025/9/15 6:02:10

mapbox高德地图与相机

本案例使用Mapbox GL JavaScript库创建高德地图。

  • 演示效果
  • 引入 CDN 链接
  • 地图显示
    • 创建地图实例
    • 定义地图数据源
    • 配置地图图层
  • 设置地图样式
  • 实现代码

1. 演示效果

image-20240226200444850

2. 引入 CDN 链接

<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"
/>

3. 地图显示

3.1. 创建地图实例

// 2.1 创建地图实例
const map = new mapboxgl.Map({// 在这个对象中，我们填入一些地图相关的参数设置container: "map", //地图容器style: {version: 8,// 2.2 定义地图数据源sources: {// 栅格瓦片// 定义数据源类型"raster-tiles": {// 定义类型，raster栅格，vector矢量type: "raster",// 地图服务tiles: ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",],tilesSize: 256,},},// 2.3 配置地图图层layers: [{id: "tile-raster",type: "raster",source: "raster-tiles",minzoom: 0,maxzoom: 22,},],}, //地图风格，底图数据源// 水平角bearing: 45,// 俯仰角pitch: 80,center: [114.3, 30.5], //默认注视的坐标点zoom: 12, //当前展示的地图级别projection: "globe", //地图投影模式
});
xxxxxxxxxx; // 2.1 创建地图实例        const map = new mapboxgl.Map({          // 在这个对象中，我们填入一些地图相关的参数设置          container: "map", //地图容器          style: {            version: 8,            // 2.2 定义地图数据源            sources: {              // 栅格瓦片              // 定义数据源类型              "raster-tiles": {                // 定义类型，raster栅格，vector矢量                type: "raster",                // 地图服务                tiles: [                  "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",                ],                tilesSize: 256,              },            },            // 2.3 配置地图图层            layers: [              {                id: "tile-raster",                type: "raster",                source: "raster-tiles",                minzoom: 0,                maxzoom: 22,              },            ],          }, //地图风格，底图数据源          // 水平角          bearing: 45,          // 俯仰角          pitch: 80,          center: [114.3, 30.5], //默认注视的坐标点          zoom: 12, //当前展示的地图级别          projection: "globe", //地图投影模式        });const map = new mapboxgl.Mapjs

3.2. 定义地图数据源

            sources: {// 栅格瓦片// 定义数据源类型"raster-tiles": {// 定义类型，raster栅格，vector矢量type: "raster",// 地图服务tiles: ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",],tilesSize: 256,},},

3.3. 配置地图图层

            layers: [{id: "tile-raster",type: "raster",source: "raster-tiles",minzoom: 0,maxzoom: 22,},],

4. 设置地图样式

地图加载完毕之后，有一个回调事件，我们在回调事件中添加大气层

map.on("style.load", () => {map.setFog({// 设置大气层颜色color: "#ffffff",// 大气层之上的颜色"high-color": "#f7c124",// 星空颜色"space-color": "#007abb",});
});

5. 实现代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>高德地图&相机</title><!-- 1.引入CDN链接 --><script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"rel="stylesheet"/><style>* {margin: 0;padding: 0;}#map {width: 100vw;height: 100vh;}</style></head><body><div id="map"></div><script>// 2.地图显示window.onload = () => {// 注册tokenmapboxgl.accessToken ="pk.eyJ1IjoiY2hlbmdjaGFvODg2NiIsImEiOiJjbGhzcWowMHUwYTNyM2VwNXZhaXhjd3Q4In0.FEh2q7sEW88Z1B5GcK_TDg";// 2.1 创建地图实例const map = new mapboxgl.Map({// 在这个对象中，我们填入一些地图相关的参数设置container: "map", //地图容器style: {version: 8,// 2.2 定义地图数据源sources: {// 栅格瓦片// 定义数据源类型"raster-tiles": {// 定义类型，raster栅格，vector矢量type: "raster",// 地图服务tiles: ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",],tilesSize: 256,},},// 2.3 配置地图图层layers: [{id: "tile-raster",type: "raster",source: "raster-tiles",minzoom: 0,maxzoom: 22,},],}, //地图风格，底图数据源// 水平角bearing: 45,// 俯仰角pitch: 80,center: [114.3, 30.5], //默认注视的坐标点zoom: 12, //当前展示的地图级别projection: "globe", //地图投影模式});// 3.设置地图样式// 地图加载完毕之后，有一个回调事件，我们在回调事件中添加大气层map.on("style.load", () => {map.setFog({// 设置大气层颜色color: "#ffffff",// 大气层之上的颜色"high-color": "#f7c124",// 星空颜色"space-color": "#007abb",});});};</script></body>
</html>

相关文章：

mapbox高德地图与相机

mapbox高德地图与相机 本案例使用Mapbox GL JavaScript库创建高德地图。 演示效果引入 CDN 链接地图显示 创建地图实例定义地图数据源配置地图图层 设置地图样式实现代码 1. 演示效果 2. 引入 CDN 链接 <script src"https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapb…...

编程日记 2024/2/28 6:24:38

Eslint在Vscode中使用技巧的相关技巧

ps :该文章会详细结论构建一个脚手架遇到的问题&#xff0c;会持续更新&#xff0c;请定时查看 Eslint相关​ 在vscode中使用eslint插件 在vscode中用户配置没有开启eslint.enable 在vscode中工作区配置开启eslint.enable settings.json中没有做eslint相关配置 在编写的vue…...

编程日记 2024/2/28 6:23:37

045-WEB攻防-PHP应用SQL二次注入堆叠执行DNS带外功能点黑白盒条件

045-WEB攻防-PHP应用&SQL二次注入&堆叠执行&DNS带外&功能点&黑白盒条件 #知识点&#xff1a; 1、PHP-MYSQL-SQL注入-二次注入&利用条件 2、PHP-MYSQL-SQL注入-堆叠注入&利用条件 3、PHP-MYSQL-SQL注入-带外注入&利用条件 演示案例&#xff1a…...

编程日记 2024/2/28 6:22:36

【蓝牙协议栈】【BR/EDR】【AVRCP】蓝牙音视频远程控制协议

1. AVRCP概念 AVRCP(Audio/Video Remote Control Profile)：音视频远程控制协议定义了蓝牙设备和 audio/video控制功能通信的特点和过程，另用于远程控制音视频设备，底层传输基于 AVCTP（音视频控制传输协议）。 ➢该 Profile定义了AV/C数字命令控制集。命令和信息通过 AVCT…...

编程日记 2024/2/28 6:21:35

Head First Design Patterns - 单例模式

什么是单例模式 单例模式确保应用中&#xff0c;一个类最多只有一个实例单例模式也提供访问此实例的全局访问点单例模式实现中&#xff0c;使用了一个私有构造器&#xff0c;一个静态方法以及一个静态变量 为什么要用单例模式 java中静态全局变量也能做到被实例化一次 但是…...

编程日记 2024/2/28 6:18:33

Mysql的备份还原

模拟环境准备 创建一个名为school的数据库&#xff0c;创建一个名为Stuent的学生信息表 mysql> create database school; Query OK, 1 row affected (0.00 sec)mysql> use school; Database changed mysql> CREATE TABLE Student (-> Sno int(10) NOT NULL COMME…...

编程日记 2024/2/28 6:15:30

分区表介绍

问题 单表数据量过大&#xff0c;查询的性能通常会变得很低 查询时磁盘的IO次数增加&#xff1a;MySQL的InnoDB引擎使用B树维护索引&#xff0c;一个典型的索引节点大概可以存储60-120个数据记录&#xff0c;一个三层的索引大概可以存储百万条数据。如果订单表增加一个数量级…...

编程日记 2024/2/28 6:14:29

emacs 源码分析（七）

文章目录 emacs源码分析&#xff08;七&#xff09;自己动手把emacs的DEFUN宏抠出来 <2024-01-07 周日> emacs源码分析&#xff08;七&#xff09; 这DEFUN宏就像胶水一样&#xff0c;它把c代码和emacs-lisp代码给联系起来。但是DEFUN宏看着怪恐怖的有没有&#xff01;…...

编程日记 2024/2/28 6:13:28

Linux运维-Web服务器的配置与管理(Apache+tomcat)（没成功，最后有失败经验）

Web服务器的配置与管理(Apachetomcat) 项目场景 公司业务经过长期发展&#xff0c;有了很大突破&#xff0c;已经实现盈利&#xff0c;现公司要求加强技术架构应用功能和安全性以及开始向企业应用、移动APP等领域延伸&#xff0c;此时原来开发web服务的php语言已经不适应新的…...

编程日记 2024/2/28 6:12:26

探讨分布式数据库ID生成解决方案

在技术面试中&#xff0c;面试官通常通过挑战应聘者的分布式系统知识来评估其能力。今天&#xff0c;让我们模拟一场面试现场&#xff0c;深入了解关于分布式数据库ID生成的解决方案。 面试官&#xff1a;嘿&#xff0c;小伙子&#xff0c;分布式数据库ID生成解决方案了解吗&a…...

编程日记 2024/2/28 6:09:24

Clickhouse填坑记4：Too many parts问题分析

Clickhouse在进行大数据量同步时，感觉很爽，插入速度非常快，但是，在使用过程中却出现了几次“Too many parts”异常报错，搞得很痛苦，这里记录一下解决过程。 我这边采用的是Flink程序，实时将数据写入ClickHouse，在执行一段时间后，会提示“Too many parts”异常，如下异…...

编程日记 2024/2/28 6:07:22

CertiK CSO Dr. Kang Li 确认出席Hack .Summit() 香港区块链盛会

CertiK CSO Dr. Kang Li 确认将出席由 Hack VC 主办&#xff0c;并由 AltLayer 和 Berachain 联合主办&#xff0c;与 SNZ 和数码港合作&#xff0c;由 Techub News 承办的Hack.Summit() 2024区块链开发者盛会。 Dr. Kang Li 目前担任CertiK首席安全官。他是清华蓝莲花战队启蒙…...

编程日记 2024/2/28 6:06:20

C++ 游戏飞机大战， 字符型的

//#define _CRT_SECURE_NO_WARNINGS 1 用于禁止不安全函数的警告 #include<iostream> #include<stdlib.h> #include<string> #include<conio.h> #include<Windows.h> #include<time.h> #include <graphics.h> using namespace std;…...

编程日记 2024/2/28 6:04:19

用html编写的简易新闻页面

用html编写的简易新闻页面 相关代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document<…...

编程日记 2024/2/28 6:03:18

docker-mysql:5.7安装

1、下载mysql:5.7镜像 [rootlocalhost ~]# docker search mysql (某个XXX镜像名字) [rootlocalhost ~]# docker pull mysql:5.7 按装之前查看一下是否按装过mysql。如果安装过会占用3306端口。 [rootlocalhost ~]# ps -ef | grep mysql 2、简单的安装 [rootlocalhost ~]# d…...

编程日记 2024/2/28 6:02:17

SQLPro Studio：数据库管理的革命性工具 mac版

SQLPro Studio是一款强大的数据库管理和开发工具&#xff0c;它旨在提供高效、便捷和安全的数据库操作体验。无论是数据库管理员、开发人员还是数据分析师&#xff0c;SQLPro Studio都能满足他们在数据库管理、查询、设计和维护方面的需求。 SQLPro Studio mac版软件获取 首先…...

编程日记 2024/2/28 6:01:16

【小沐学QT】QT学习之OpenGL开发笔记

文章目录 1、简介2、Qt QOpenGLWidget gl函数3、Qt QOpenGLWidget qt函数4、Qt QOpenGLWindow5、Qt glut6、Qt glfw结语 1、简介 Qt提供了与OpenGL实现集成的支持&#xff0c;使开发人员有机会在更传统的用户界面的同时显示硬件加速的3D图形。 Qt有两种主要的UI开发方…...

编程日记 2024/2/28 6:00:15

kali安装ARL灯塔（docker）

1、root身份进入容器 ┌──(root㉿Kali)-[~/桌面] └─# su root ┌──(root㉿Kali)-[~/桌面] └─# docker 2、先更新再克隆 ┌──(root㉿Kali)-[~/桌面] └─# apt-get update …...

编程日记 2024/2/28 5:59:14

字节面试分享，请详细介绍为何Http Post发送两次请求

在浏览器中&#xff0c;内容是很开放的&#xff0c;任何资源都可以接入其中&#xff0c;如 JavaScript 文件、图片、音频、视频等资源&#xff0c;甚至可以下载其他站点的可执行文件。 但也不是说浏览器就是完全自由的&#xff0c;如果不加以控制&#xff0c;就会出现一些不可…...

编程日记 2024/2/28 5:57:13

Flink CDC 3.0 Starrocks建表失败会导致任务卡主！

Flink CDC 3.0 Starrocks建表失败会导致任务卡主&#xff01; 现象 StarRocks建表失败&#xff0c;然后任务自动重启&#xff0c;重启完毕后数据回放&#xff0c;jobMaster打印下面日志后&#xff0c;整个任务会卡主 There are already processing requests. Wait for proce…...

编程日记 2024/2/28 5:56:12

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2025/9/6 15:42:34

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/9/7 2:01:52

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/12 10:25:58

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/8/3 22:02:59

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/9/7 8:51:35

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2025/9/7 8:50:37

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/9/2 8:07:37

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2025/9/3 16:01:58

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

编程新知 2025/6/10 21:19:52