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

Mapbox教程：一个简单Demo

news 2026/2/8 18:30:50

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

编程日记 2024/4/12 5:45:27

看AI赋能数智化 | Gooxi AI服务器闪耀CITE 2024

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

编程日记 2024/4/12 5:44:26

大话设计模式——21.中介者模式（Mediator Pattern）

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

编程日记 2024/4/12 5:43:25

Linux 计算机网络

目录 一、网络协议 1、 "协议" 是一种约定 2、协议分层 二、网络模型 1、OSI七层模型 2、TCP/IP五层(或四层)模型 三、网络传输基本流程 四、数据包封装和分用 五、网络中的地址管理 六、网络编程套接字 1、理解源IP地址和目的IP地址 2、端口号 理解 &q…...

编程日记 2024/4/12 5:41:23

bash脚本中‘-b -u -p’‘$# -eq’‘#!/bin/bash’‘sed -i “s/\r//“ $1’的用法说明

#!/bin/bash#!/bin/bash: 这是 Bash 脚本的开头&#xff0c;指定了要使用的解释器&#xff0c;即 Bash。 if [ $# -eq 0 ]; thenif [ $# -eq 0 ]; then: 检查脚本是否被调用时提供了参数。$# 表示参数的数量&#xff0c;-eq 0 表示等于 0&#xff0c;即无参数。 echo "p…...

编程日记 2024/4/12 5:40:22

【人工智能】Gitee AI 天数智芯有奖体验开源AI模型，一定能有所收货，快来体验吧

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章。 这是《人工智能》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 目录 前言两大赛道天数智芯1.模型地址2.天数智芯专区3.选择模型4.模型详情页5.部署模型6.成功部署7.执行例子8.移除模型 千模盲…...

编程日记 2024/4/12 5:38:21

Ceph学习 -8.认证管理-用户基础

文章目录 1.用户基础1.1 基础知识1.2 简单实践1.3 小结 1.用户基础 学习目标&#xff1a;这一节&#xff0c;我们从基础知识、简单实践、小结三个方面来学习。 1.1 基础知识 简介 Ceph集群管理员能够直接在Ceph集群中创建、更新和删除用户 注意&#xff1a;创建用户时&#x…...

编程日记 2024/4/12 5:37:18

大创项目推荐 深度学习+opencv+python实现昆虫识别 -图像识别 昆虫识别

文章目录 0 前言1 课题背景2 具体实现3 数据收集和处理3 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数&#xff1a;2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 4 MobileNetV2网络5 损失函数softmax 交叉熵5.1 softmax函数5.2 交叉熵损失函数 6 优化器SGD7 学…...

编程日记 2024/4/12 5:34:15

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所…...

编程日记 2024/4/12 5:33:14

k8s-Pod

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

编程日记 2024/4/12 5:31:10

智能网络新纪元：机器学习赋能未来计算机网络高速发展

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向的学习指导…...

编程日记 2024/4/12 5:30:09

大数据之kafka应用

大数据之kafka应用 2024启kafkakafka常见命令生产上重放信息jmxjmx的配置和开启jmx的使用jmx例子一 jmx例子二jmx例子三jmx例子四&#xff08;special&#xff09; 2024启kafka kafka常见命令 指定jmx端口启动kafka lsof -i :9999 JMX_PORT9999 /opt/kafka_2.12-3.1.0/bin/kaf…...

编程日记 2024/4/12 5:29:09

嵌入式操作教程_数字信号处理_音频编解码：3-6 AAC音频解码实验

一、实验目的 了解AAC音频格式&#xff0c;掌握AAC音频解码的原理&#xff0c;并实现将AAC格式的音频解码为PCM 二、实验原理 音频编解码的主要对象是音乐和语音&#xff0c;音频的编解码格式可分为无压缩的格式、无损压缩格式、有损音乐压缩格式、有损语音压缩格式和合成算…...

编程日记 2024/4/12 5:28:07

【从浅学到熟知Linux】冯诺依曼体系结构及进程概念详谈！

&#x1f3e0;关于专栏&#xff1a;Linux的浅学到熟知专栏用于记录Linux系统编程、网络编程等内容。 &#x1f3af;每天努力一点点&#xff0c;技术变化看得见 文章目录 冯诺依曼体系结构操作系统如何理解管理操作系统概念设计操作系统目的系统调用和库函数概念 进程基本概念描…...

编程日记 2024/4/12 5:26:05

word转pdf（前后端最全保姆级别）

word转pdf vue2java 文章目录 word转pdf vue2java一、前端 vue-pdf1、下载依赖2、封装的组件 二、java使用aspose&#xff08;付费&#xff09;1.引入库2.封装的工具类3、付费密钥文件 总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、前端 vue…...

编程日记 2024/4/12 5:25:04

深度学习简介

深度学习简介 一、引言&#xff1a;深度学习的兴起 简短介绍深度学习的历史背景 深度学习&#xff0c;作为人工智能领域的一颗冉冉升起的新星&#xff0c;其根源可以追溯到上世纪的感知机学习算法。这种算法模拟人类的神经元行为&#xff0c;是最早期的尝试之一。然而&#x…...

编程日记 2024/4/12 5:23:01

深入探索：使用C++构建顶级性能的网络服务器

在数字化浪潮的推动下，网络服务器作为信息交互的核心枢纽，其性能与稳定性直接决定了互联网应用的服务质量和用户体验。C++，作为一种兼具高效性与灵活性的编程语言，已然成为构建高性能网络服务器的首选工具。本文旨在深入剖析C++在构建顶级性能网络服务器中的关键技术、最佳…...

编程日记 2024/4/12 5:19:56

SpringBoot学习笔记四

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

编程日记 2024/4/12 5:12:49

雄安建博会：中矿雄安新区的总部开工建设

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

编程日记 2024/4/12 5:11:48

蒙特卡洛方法【强化学习】

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

编程日记 2024/4/12 5:08:44

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/7 23:18:34

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2026/1/30 0:00:28

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/2/1 6:36:36

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/26 19:12:01

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2026/2/6 21:43:26

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/1/25 9:03:19