mapbox高德地图与相机

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>

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

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

相关文章

Android虚拟机Dalvik和ART

前言&#xff1a;Android虚拟机包括Dalvik和ART&#xff0c;它们是用于在Android设备上运行应用程序的关键组件。 Dalvik虚拟机&#xff1a; 1. 设计目的&#xff1a; Dalvik虚拟机是在Android早期版本中使用的虚拟机&#xff0c;其设计目的是为了在资源受限的移动设备上执…

项目实战:Qt监测操作系统cpu温度v1.1.0(支持windows、linux、国产麒麟系统)

若该文为原创文章&#xff0c;转载请注明出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/136277231 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结…

全面升级!Apache HugeGraph 1.2.0版本发布

图数据库以独特的数据管理和分析能力&#xff0c;在企业数智化转型的过程中正在成为数据治理的核心&#xff0c;根据IDC调研显示&#xff0c;95%的企业认为图数据库是重要的数据管理工具&#xff0c;超过65%的厂商认为在业务上图数据库优于其他选择&#xff0c;尤其是在金融风控…

Linux设备模型(四) - uevent应用:内核发送uevent,用户空间接收uevent

1&#xff0c;内核发送uevent 内核发送uevent的API由lib/kobject_event.c文件实现&#xff0c;include/linux/kobject.h是头文件。 enum kobject_action {KOBJ_ADD,KOBJ_REMOVE,KOBJ_CHANGE,KOBJ_MOVE,KOBJ_ONLINE,KOBJ_OFFLINE,KOBJ_MAX };/* kobject_uevent不能用在中断上下…

2024年2月19日-2月25日(全面进行+收集免费虚幻商城资源,20小时,合计2561小时,剩余7439小时)

试试周一到周五重点进行&#xff0c;周末抄写源码&#xff0c;周一晚上看书很快就在22&#xff1a;00睡着&#xff0c;早上可以看看视频教程&#xff0c;出租车上补觉。 执行如下&#xff1a; 周一&#xff1a; 8&#xff1a;01-9&#xff1a;20ue4 rpg&#xff08;184&#xf…

Unity零基础到进阶 | Unity中的 RectTransformUtility 方法整理汇总

Unity零基础到进阶 ☀️| RectTransformUtility 方法整理汇总一、RectTransformUtility 官方文档1.1 RectTransformUtility.CalculateRelativeRectTransformBounds&#xff08;重&#xff09;1.2 RectTransformUtility.FlipLayoutAxes1.3 RectTransformUtility.FlipLayoutOnAxi…

观察者模式与发布订阅模式

观察者模式 定义&#xff1a; 观察者模式是一种行为型设计模式&#xff0c;定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 结构图&#xff1a; ES6简易代码实现&#xff1a; //ts环境下…

Nginx——安装和反向代理

Nginx安装与应用 1.1 Nginx介绍 Nginx 是一个高性能的HTTP和反向代理服务器,特点是占有内存少&#xff0c;并发能力强 Nginx可以作为静态页面的web服务器&#xff0c;同时还支持CGI协议的动态语言&#xff0c;比如perl、php等。但是不支持java。Java程序只能通过与tomcat配合…

谷歌AI发展史:从阿尔法围棋到Gemini与Gemma的开源创新

谷歌一直是人工智能领域的重要推动者。本文将回顾谷歌AI的发展历程&#xff0c;从阿尔法围棋到现如今的Gemini和Gemma&#xff0c;探讨谷歌在人工智能领域的重大突破和创新。 1. 引言 在计算机科学领域&#xff0c;谷歌一直是人工智能&#xff08;AI&#xff0…

华为OD机试真题-数的分解-2023年OD统一考试(C卷)--Python3-开源

参考链接&#xff1a; 华为OD机试真题-用连续自然数之和来表达整数-2023年OD统一考试&#xff08;C卷&#xff09;—python代码免费

MasterAlign全景视觉点胶应用软件说明书

MasterAlign视觉软件通过高精度的图像处理和机器学习算法&#xff0c;实现了对点胶过程的全面控制和管理。以下是关于MasterAlign在全景视觉点胶应用场景中如何使用的详细说明。看完全文相信一定能让您快速上手使用。

刷题第1天:leetcode704--数组元素查找--二分法查找算法

第一部分---数组的基础知识介绍&#xff1a; 1.数组的定义&#xff1a;数组是存放在连续内存空间上的相同数据类型的数据的集合&#xff1b; 2.数组可以通过下标索引的方式获取到下标对应的数据&#xff1b; 3.数组下标是从0开始的&#xff0c;数组的内存空间地址是连续的&a…

多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型

多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型 目录 多维时序 | Matlab实现CPO-BiTCN-BiGRU冠豪猪优化时间卷积神经网络双向门控循环单元多变量时间序列预测模型预测效果基本介绍程序设计参考资料 预测效果 基本介绍…

基于R语言的Meta分析【全流程、不确定性分析】方法与Meta机器学习技术应用

Meta分析是针对某一科研问题&#xff0c;根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法&#xff0c;对来源不同的研究成果进行收集、合并及定量统计分析的方法&#xff0c;最早出现于“循证医学”&#xff0c;现已广泛应用于农林生态&#xff0c;资源环境等方面。…

适配器模式(Adapter Pattern)

定义 适配器模式是一种结构型设计模式&#xff0c;它允许将一个类的接口转换成客户希望的另一个接口。这种模式通常用于解决接口不兼容的问题。适配器模式包括三个角色&#xff1a;目标接口&#xff08;Target&#xff09;、适配器&#xff08;Adapter&#xff09;和被适配者&…

设计模式(六)代理模式

相关文章设计模式系列 1.代理模式简介 代理模式介绍 代理模式也叫委托模式&#xff0c;是结构型设计模式的一种。在现实生活中我们用到类似代理模式的场景有很多&#xff0c;比如代购、代理上网、打官司等。 定义 为其他对象提供一种代理以控制这个对象的访问。 代理模式…

【Elasticsearch专栏 18】深入探索:Elasticsearch核心配置与性能调优 保姆级教程 企业级实战

文章目录 导言01 内存设置优化1.1 JVM堆内存设置1.2 禁用Swap分区1.3 线程栈内存设置 02 文件描述符限制优化2.1 查看当前的文件描述符限制2.2 临时更改文件描述符限制2.3 永久更改文件描述符限制2.4 Elasticsearch文件描述符配置2.5 验证更改 03 网络和I/O优化3.1 网络优化3.2…

Layer1 明星项目 Partisia Blockchain 何以打造互操作、可创新的数字经济网络

我们的目标是创建一个以用户为中心的全新数字经济网络&#xff1a;在去信任化和公平透明的环境下&#xff0c;所有的隐私数据都能够得到天然保障&#xff0c;企业、用户等各角色的协作与共享将会更顺利地进行。 —— Partisia Blockchain 团队 作为一个以 Web3 安全为技术方向的…

Linux学习之vi/vim详细介绍

目录 ​编辑 1. 什么是 vim&#xff1f; 2. vi/vim 的使用 2.1 命令模式 2.2 输入模式 2.3 底线命令模式 3. vi/vim 使用实例 3.1 使用 vi/vim 进入一般模式 3.2 按下 i 进入输入模式(也称为编辑模式)&#xff0c;开始编辑文字 3.3 按下 ESC 按钮回到一般模式…

jenkins+kubernetes+git+dockerhub构建devops云平台

Devops简介 k8s助力Devops在企业落地实践 传统方式部署项目为什么发布慢&#xff0c;效率低&#xff1f; 上线一个功能&#xff0c;有多少时间被浪费了&#xff1f; 如何解决发布慢&#xff0c;效率低的问题呢&#xff1f; 什么是Devops&#xff1f; 敏捷开发 提高开发效率&…