Vue + MapBox快速搭建

一、说明：

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 ID
    style: 'mapbox://styles/mapbox/streets-v12', // style URL
    center: [-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 location
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
});
</script>