mapbox高德地图与相机
mapbox高德地图与相机
本案例使用Mapbox GL JavaScript库创建高德地图。
- 演示效果
- 引入 CDN 链接
- 地图显示
- 创建地图实例
- 定义地图数据源
- 配置地图图层
- 设置地图样式
- 实现代码
1. 演示效果
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…...
Eslint在Vscode中使用技巧的相关技巧
ps :该文章会详细结论构建一个脚手架遇到的问题，会持续更新，请定时查看 Eslint相关 在vscode中使用eslint插件 在vscode中用户配置没有开启eslint.enable 在vscode中工作区配置开启eslint.enable settings.json中没有做eslint相关配置 在编写的vue…...
045-WEB攻防-PHP应用SQL二次注入堆叠执行DNS带外功能点黑白盒条件
045-WEB攻防-PHP应用&SQL二次注入&堆叠执行&DNS带外&功能点&黑白盒条件 #知识点： 1、PHP-MYSQL-SQL注入-二次注入&利用条件 2、PHP-MYSQL-SQL注入-堆叠注入&利用条件 3、PHP-MYSQL-SQL注入-带外注入&利用条件 演示案例：…...
【蓝牙协议栈】【BR/EDR】【AVRCP】蓝牙音视频远程控制协议
1. AVRCP概念 AVRCP(Audio/Video Remote Control Profile)：音视频远程控制协议定义了蓝牙设备和 audio/video控制功能通信的特点和过程，另用于远程控制音视频设备，底层传输基于 AVCTP（音视频控制传输协议）。 ➢该 Profile定义了AV/C数字命令控制集。命令和信息通过 AVCT…...
Head First Design Patterns - 单例模式
什么是单例模式 单例模式确保应用中，一个类最多只有一个实例单例模式也提供访问此实例的全局访问点单例模式实现中，使用了一个私有构造器，一个静态方法以及一个静态变量 为什么要用单例模式 java中静态全局变量也能做到被实例化一次 但是…...
Mysql的备份还原
模拟环境准备 创建一个名为school的数据库，创建一个名为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…...
分区表介绍
问题 单表数据量过大，查询的性能通常会变得很低 查询时磁盘的IO次数增加：MySQL的InnoDB引擎使用B树维护索引，一个典型的索引节点大概可以存储60-120个数据记录，一个三层的索引大概可以存储百万条数据。如果订单表增加一个数量级…...
emacs 源码分析（七）
文章目录 emacs源码分析（七）自己动手把emacs的DEFUN宏抠出来 <2024-01-07 周日> emacs源码分析（七） 这DEFUN宏就像胶水一样，它把c代码和emacs-lisp代码给联系起来。但是DEFUN宏看着怪恐怖的有没有！…...
Linux运维-Web服务器的配置与管理(Apache+tomcat)（没成功，最后有失败经验）
Web服务器的配置与管理(Apachetomcat) 项目场景 公司业务经过长期发展，有了很大突破，已经实现盈利，现公司要求加强技术架构应用功能和安全性以及开始向企业应用、移动APP等领域延伸，此时原来开发web服务的php语言已经不适应新的…...
探讨分布式数据库ID生成解决方案
在技术面试中，面试官通常通过挑战应聘者的分布式系统知识来评估其能力。今天，让我们模拟一场面试现场，深入了解关于分布式数据库ID生成的解决方案。 面试官：嘿，小伙子，分布式数据库ID生成解决方案了解吗&a…...
Clickhouse填坑记4：Too many parts问题分析
Clickhouse在进行大数据量同步时，感觉很爽，插入速度非常快，但是，在使用过程中却出现了几次“Too many parts”异常报错，搞得很痛苦，这里记录一下解决过程。 我这边采用的是Flink程序，实时将数据写入ClickHouse，在执行一段时间后，会提示“Too many parts”异常，如下异…...
CertiK CSO Dr. Kang Li 确认出席Hack .Summit() 香港区块链盛会
CertiK CSO Dr. Kang Li 确认将出席由 Hack VC 主办，并由 AltLayer 和 Berachain 联合主办，与 SNZ 和数码港合作，由 Techub News 承办的Hack.Summit() 2024区块链开发者盛会。 Dr. Kang Li 目前担任CertiK首席安全官。他是清华蓝莲花战队启蒙…...
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;…...
用html编写的简易新闻页面
用html编写的简易新闻页面 相关代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document<…...
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…...
SQLPro Studio：数据库管理的革命性工具 mac版
SQLPro Studio是一款强大的数据库管理和开发工具，它旨在提供高效、便捷和安全的数据库操作体验。无论是数据库管理员、开发人员还是数据分析师，SQLPro Studio都能满足他们在数据库管理、查询、设计和维护方面的需求。 SQLPro Studio mac版软件获取 首先…...
【小沐学QT】QT学习之OpenGL开发笔记
文章目录 1、简介2、Qt QOpenGLWidget gl函数3、Qt QOpenGLWidget qt函数4、Qt QOpenGLWindow5、Qt glut6、Qt glfw结语 1、简介 Qt提供了与OpenGL实现集成的支持，使开发人员有机会在更传统的用户界面的同时显示硬件加速的3D图形。 Qt有两种主要的UI开发方…...
kali安装ARL灯塔（docker）
1、root身份进入容器 ┌──(root㉿Kali)-[~/桌面] └─# su root ┌──(root㉿Kali)-[~/桌面] └─# docker 2、先更新再克隆 ┌──(root㉿Kali)-[~/桌面] └─# apt-get update …...
字节面试分享，请详细介绍为何Http Post发送两次请求
在浏览器中，内容是很开放的，任何资源都可以接入其中，如 JavaScript 文件、图片、音频、视频等资源，甚至可以下载其他站点的可执行文件。 但也不是说浏览器就是完全自由的，如果不加以控制，就会出现一些不可…...
Flink CDC 3.0 Starrocks建表失败会导致任务卡主！
Flink CDC 3.0 Starrocks建表失败会导致任务卡主！ 现象 StarRocks建表失败，然后任务自动重启，重启完毕后数据回放，jobMaster打印下面日志后，整个任务会卡主 There are already processing requests. Wait for proce…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
Neo4j 集群管理：原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...