Mapbox教程：一个简单Demo

飘渺孤鸿

已于 2024-04-11 20:57:12 修改

阅读量416

点赞数 4

分类专栏： GIS Mapbox 文章标签： GIS Mapbox WebGIS 对比

于 2024-04-11 20:54:10 首次发布

本文链接：https://blog.csdn.net/pyluyuan/article/details/137630987

版权

GIS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Mapbox

2 篇文章 0 订阅

订阅专栏

近期工作中准备把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气泡图层，添加一个弹窗，显示公园名称。