mapboxGL入门详解

MapBox GL 入门详解

1.基础知识介绍

mapbox GL Js JavaScript地图库；

使用webGL渲染，支持大数据量；

支持矢量切片渲染地图；

与mapbox其他工具兼容、生态系统完善；

自定义的地图样式。

2. 版本介绍

v1.13.1 : 地图库使用无需token，调用mapbox地图需要token；

https://github.com/cgcs2000/mapbox-gl-js; 支持4490坐标系；

v2.3.0: 所有操作均要申请token；

https://github.com/maplibre/maplibre-gl-js 基于v2的社区版本。

v2的新特性: (不支持IE11)

3D terrain

Sky layer

Fog

FreeCamera API

Improved performance

3. 如何使用

第一种方式： CDN

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />

在body中写以下内容：

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
	mapboxgl.accessToken = 'undefined';
	var map = new mapboxgl.Map({
     
		container: 'map',
		style: 'mapbox://styles/mapbox/streets-v9'
	});
</script>

第二种方式：安装包

npm install --save mapbox-gl

在head里面引入：