Vue + MapBox快速搭建

原创已于 2024-06-25 15:06:08 修改 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-08-10 15:04:45 首次发布

一、说明：

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>