一、說明：
1.mapbox-gl自2.0版本開始不再開源，需要用戶在官網申請key使用。
2.maplibre GL JS是一個開源庫，它起源于 mapbox-gl-js 的開源分支。該庫的初始版本（1.x）旨在替代Mapbox的OSS版本。簡單來說maplibre是mapbox-gl1.0版本的替代，接替了開源的重任，但是之后就各自發展了。
二、新版MapBox搭建
1.使用npm引入依賴
npm i mapbox-gl
或
<script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
2.導入并初始化地圖
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = '你的tk';
const map = new mapboxgl.Map({container: 'map', // container IDstyle: 'mapbox://styles/mapbox/streets-v12', // style URLcenter: [-74.5, 40], // starting position [lng, lat]zoom: 9, // starting zoom
});
</script>
三、MapLibre搭建
1.使用npm引入依賴
npm i maplibre-gl
或
<script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
2.導入并初始化地圖
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
var map = new maplibregl.Map({container: 'map',style: 'https://demotiles.maplibre.org/style.json', // stylesheet locationcenter: [-74.5, 40], // starting position [lng, lat]zoom: 9 // starting zoom
});
</script>
