Mapbox教程:一个简单Demo
近期工作中准备把Mapbox用起来,准备发几个教程,把Mapbox再熟悉熟悉。工作中也用过不少的Web GIS组件,在这里说一下我对这些WebGIS组件的印象。
Leaflet 代码简洁,插件丰富,相比于其大小,功能也挺强大,之前工作中基于Leaflet封装了一版SDK,推广了很多项目组,一用用了好多年。
Openlayers 虽然也是开源,但是源码没有Leaflet的清晰,代码没有看下去。而且印象其核心也是基于Canvas技术。与Leaflet相比并没有特别明显的优势。
MapTalks 主要是对标Leaflet,虽然是一个二三维框架,但是其核心还是基于Canvas进行渲染的。数据量大了一样的性能拉跨。
ArcGIS for JavaScript 不习惯dojo代码。
Cesium 采用WebGL技术,适合于构建三维大场景。像超图等很多大厂都有基于Cesium构建的三维大场景引擎。
Mapbox 采用WebGL技术,性能比Leaflet、Openlayers、MapTalks强很多。Mapbox MVT的渲染效果和体验比OGC的WMS、WMTS也强很多。在二维视图层面,Mapbox做的比Cesium要好,之前尝试渲染过单线图数据,Cesium会出现一些线颜色改变、消失等显示问题,而Mapbox显示的就很精细。对于Mapbox MVT格式的切片,很多人也尝试用Cesium进行加载,但是测试了一些网上的开源方案,效果差强人意,并且在这方面Cesium也没有更好的替代方案。在三维视图方面,Cesium尤其是大厂加持之后的Cesium,对倾斜摄影、点云、大批量的精模数据支持都很好,不知道Mapbox在这方面的表现如何。另外,在三维展示方面,对于影像数据,感觉上Cesium的渲染效果也没有Mapbox效果好,不过这个没有经过详细论证。
下面上代码,展示一个基本上最简单的MapboxDemo。
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>Mapbox Demo</title><meta name="viewport" content="width=device-width, initial-scale=1" /><script src="http://code.jquery.com/jquery-latest.js"></script><script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script><link href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet" /><style>body {margin: 0;padding: 0;} #map {position: absolute;top: 0;bottom: 0;width: 100%;}</style></head><body><div id="map"></div><div id="hidElement" style="display: none;"><div id="popupTitle" style="display: none;"><p>{TITLE}</p> </div></div><script>// 指定accessToken,这个请自行从Mapbox官网申请mapboxgl.accessToken = 'pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6ImNpeHJmNXNmZTAwNHIycXBid2NqdTJibjMifQ.Dv1-GDpTWi0NP6xW9Fct1w';// 创建Mapbox 指定所在div、样式、中心点、初始缩放级别const map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/examples/clg45vm7400c501pfubolb0xz',center: [-87.661557, 41.893748],zoom: 10.7});// 创建一个弹窗 offset的y坐标向上偏移15像素,避免遮挡chicago-park的图标const popup = new mapboxgl.Popup({offset: [0, -15]});// 监听地图click事件map.on('click', (event) => {// 根据鼠标点查询 chicago-parks 图层const features = map.queryRenderedFeatures(event.point, {layers: ['chicago-parks']});if(!features.length) {return;}// 取第一条查询结果const feature = features[0];// 设置弹窗位置及内容,显示查询结果的名称popup.setLngLat(feature.geometry.coordinates).setHTML($("#popupTitle").html().replaceAll('{TITLE}',feature.properties.title)).addTo(map);});</script></body>
</html>
上述代码效果图如下,展示一张在线的地图,点击chicago-parks气泡图层,添加一个弹窗,显示公园名称。
通过缩放,可以看到,Mapbox默认是三维球体模式。
通过鼠标右键,可以调整视角。下图调整为我的家乡济南。
教程完毕,大家快自己试试看吧。
相关文章:

Mapbox教程:一个简单Demo
近期工作中准备把Mapbox用起来,准备发几个教程,把Mapbox再熟悉熟悉。工作中也用过不少的Web GIS组件,在这里说一下我对这些WebGIS组件的印象。 Leaflet 代码简洁,插件丰富,相比于其大小,功能也挺强大&#…...

看AI赋能数智化 | Gooxi AI服务器闪耀CITE 2024
4月9日“中国电子信息博览会暨2024 AI算力产业大会”在深圳如期开展,Gooxi携最新产品、行业应用全栈解决方案出席盛会,全面展示Gooxi回应数智新时代下机遇与挑战的丰富AI创新实践成果。 All in AI,奔赴新质生产力 作为中国领先的服务器解决…...

大话设计模式——21.中介者模式(Mediator Pattern)
简介 用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互 UML图 应用场景 大量的连接使得一个对象不可能在没有其他对象的支持下工作,系统表现为一个不可分割的…...

Linux 计算机网络
目录 一、网络协议 1、 "协议" 是一种约定 2、协议分层 二、网络模型 1、OSI七层模型 2、TCP/IP五层(或四层)模型 三、网络传输基本流程 四、数据包封装和分用 五、网络中的地址管理 六、网络编程套接字 1、理解源IP地址和目的IP地址 2、端口号 理解 &q…...
bash脚本中‘-b -u -p’‘$# -eq’‘#!/bin/bash’‘sed -i “s/\r//“ $1’的用法说明
#!/bin/bash#!/bin/bash: 这是 Bash 脚本的开头,指定了要使用的解释器,即 Bash。 if [ $# -eq 0 ]; thenif [ $# -eq 0 ]; then: 检查脚本是否被调用时提供了参数。$# 表示参数的数量,-eq 0 表示等于 0,即无参数。 echo "p…...

【人工智能】Gitee AI 天数智芯有奖体验开源AI模型,一定能有所收货,快来体验吧
大家好,我是全栈小5,欢迎阅读小5的系列文章。 这是《人工智能》系列文章,每篇文章将以博主理解的角度展开讲解。 目录 前言两大赛道天数智芯1.模型地址2.天数智芯专区3.选择模型4.模型详情页5.部署模型6.成功部署7.执行例子8.移除模型 千模盲…...
Ceph学习 -8.认证管理-用户基础
文章目录 1.用户基础1.1 基础知识1.2 简单实践1.3 小结 1.用户基础 学习目标:这一节,我们从基础知识、简单实践、小结三个方面来学习。 1.1 基础知识 简介 Ceph集群管理员能够直接在Ceph集群中创建、更新和删除用户 注意:创建用户时&#x…...

大创项目推荐 深度学习+opencv+python实现昆虫识别 -图像识别 昆虫识别
文章目录 0 前言1 课题背景2 具体实现3 数据收集和处理3 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数:2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 4 MobileNetV2网络5 损失函数softmax 交叉熵5.1 softmax函数5.2 交叉熵损失函数 6 优化器SGD7 学…...
Python小工具提升工作效率【附完整版,可下载word】
1、多个ppt汇总成一个ppt的python代码实现: import win32com.client as win32 import os import re def find(s): pat = re.compile(r"\d+") result = pat.match(s) return int(result.group(0)) def join_ppt(path:str): """ :param path: ppt所…...

k8s-Pod
文章目录 k8s-Podpod 配置文件详解pod 生命周期pod 探针StartupProbeLivenessProbeReadinessProbe探针使用建议 初始化容器钩子函数 k8s-Pod pod 是k8s 中可以调度的最小单位 每个Pod中都可以包含一个或者多个容器,这些容器可以分为两类: 用户程序所在的…...

智能网络新纪元:机器学习赋能未来计算机网络高速发展
🧑 作者简介:阿里巴巴嵌入式技术专家,深耕嵌入式人工智能领域,具备多年的嵌入式硬件产品研发管理经验。 📒 博客介绍:分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向的学习指导…...
大数据之kafka应用
大数据之kafka应用 2024启kafkakafka常见命令生产上重放信息jmxjmx的配置和开启jmx的使用jmx例子一 jmx例子二jmx例子三jmx例子四(special) 2024启kafka kafka常见命令 指定jmx端口启动kafka lsof -i :9999 JMX_PORT9999 /opt/kafka_2.12-3.1.0/bin/kaf…...

嵌入式操作教程_数字信号处理_音频编解码:3-6 AAC音频解码实验
一、实验目的 了解AAC音频格式,掌握AAC音频解码的原理,并实现将AAC格式的音频解码为PCM 二、实验原理 音频编解码的主要对象是音乐和语音,音频的编解码格式可分为无压缩的格式、无损压缩格式、有损音乐压缩格式、有损语音压缩格式和合成算…...

【从浅学到熟知Linux】冯诺依曼体系结构及进程概念详谈!
🏠关于专栏:Linux的浅学到熟知专栏用于记录Linux系统编程、网络编程等内容。 🎯每天努力一点点,技术变化看得见 文章目录 冯诺依曼体系结构操作系统如何理解管理操作系统概念设计操作系统目的系统调用和库函数概念 进程基本概念描…...

word转pdf(前后端最全保姆级别)
word转pdf vue2java 文章目录 word转pdf vue2java一、前端 vue-pdf1、下载依赖2、封装的组件 二、java使用aspose(付费)1.引入库2.封装的工具类3、付费密钥文件 总结 提示:以下是本篇文章正文内容,下面案例可供参考 一、前端 vue…...

深度学习简介
深度学习简介 一、引言:深度学习的兴起 简短介绍深度学习的历史背景 深度学习,作为人工智能领域的一颗冉冉升起的新星,其根源可以追溯到上世纪的感知机学习算法。这种算法模拟人类的神经元行为,是最早期的尝试之一。然而&#x…...
深入探索:使用C++构建顶级性能的网络服务器
在数字化浪潮的推动下,网络服务器作为信息交互的核心枢纽,其性能与稳定性直接决定了互联网应用的服务质量和用户体验。C++,作为一种兼具高效性与灵活性的编程语言,已然成为构建高性能网络服务器的首选工具。本文旨在深入剖析C++在构建顶级性能网络服务器中的关键技术、最佳…...

SpringBoot学习笔记四
SpringBoot学习笔记四-监听机制 1. SpringBoot监听器1.1 无需配置1.1.1 CommandLineRunner使用1.1.2 ApplicationRunner的使用1.1.3 CommandLineRunner与ApplicationRunner的区别 1.2 需要创建META-INF文件,并在其中创建spring.factories,配置相关的信息…...

雄安建博会:中矿雄安新区的总部开工建设
中矿落位雄安:助力国家战略与新区发展 雄安新区,作为中国未来发展的重要战略支点,正迎来一系列央企总部的疏解与建设。最近,中国矿产资源集团有限公司(简称“中矿”)在雄安新区的总部项目正式开工建设&…...

蒙特卡洛方法【强化学习】
强化学习笔记 主要基于b站西湖大学赵世钰老师的【强化学习的数学原理】课程,个人觉得赵老师的课件深入浅出,很适合入门. 第一章 强化学习基本概念 第二章 贝尔曼方程 第三章 贝尔曼最优方程 第四章 值迭代和策略迭代 第五章 强化学习实践—GridWorld 第…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...

vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...

如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error
在前端开发中,JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作(如 Promise、async/await 等),开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝(r…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...
6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙
Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...