vue+MapboxGL：从0 到1 搭建开发环境

小灰灰 2024-03-23 11:07 74阅读 0赞

本系列教程是在vue2.X的基础上加载mapbox 程序，来开发各种示例程序。

## 安装顺序 ##

### 1，下载安装nodejs![dd351f76b9d2119de5d8bf3d3f022c63.png][] ###

下载地址：https://nodejs.org/en/download/ 根据用户自己的机器情况进行选择不同版本的软件下载。 本教程示例采用是是windows 64位系统软件。  
**安装过程很简单，一路下一步。更为详细的请参考：http://www.openlayers-cesium.com/2021/0929744.html  
安装成功，测试安装是否成功，运行CMD，分别输入node -v** 和 **npm -v** 分别查看node和npm的版本号。![b3cf064dbfd371b0d26b01546133276e.png][]  
可以查到，表示安装成功。

### 2，安装vue-cli ###

安装可以参考：https://cli.vuejs.org/zh/guide/installation.html  
**安装命令：**

> npm install -g @vue/cli  
> 或者 yarn global add @vue/cli （尽量不用这种方式，yarn不会自己配置环境变量，运行vue -V会提示错误）

![1aeb2160ea7a45764bc53ccc7ed29cf0.png][]  
安装完后，可以通过 **vue -V**或者 **vue --version** 查看当前 vue-cli的版本号。

### 3，创建vue-mapbox 项目。 ###

在系统中找一个文件夹，如d:/demos中，打开cmd窗口，使用 \*\*vue create vue-mapbox \*\* 来创建基础项目  
![0d0af4dbca839ac404060261475e103b.png][]  
在项目中选择了 vue-router和vuex，方便以后的路由和组件数据传递使用方便。

### 4，安装mapbox ###

进入到vue-mapbox 文件夹中， 打开cmd窗口，使用 **npm install mapbox-gl --save** 来安装mapbox 组件

### 5，安装element UI （选装） ###

为了在项目中操作方便，我们直接引用elementUI组件，方便添加一些按钮，弹窗等。  
进入到vue-leaflet 文件夹中， 打开cmd窗口，使用 **npm i element-ui -S** 来安装elementUI组件  
在src/main.js中添加

import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

![468a8c15d114b69bf3f4239de92f65d1.png][]

### 最终package.json文件如下： ###

![3426a9e315a4b2d3ccd5a0738ff54891.png][]

打开**src/views/Home.vue**,替换为以下代码：

<template>
    	<div class="container">
    		<h3>vue+mapbox：最基础的加载mapbox地图 </h3>
    		<p>大剑师兰特, 还是大剑师兰特</p>
    		<div id="vue-mapbox"></div>
    	</div>
    </template>
    
    <script>
        import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"
        import 'mapbox-gl/dist/mapbox-gl.css';
    	export default {
    		name: 'mapboxMap',
    		data() {
    			return {
    				map: null,
    			}
    		},
    		mounted() {
    			this.initMap();
    		},
    		methods: {
    
    			initMap() {			
    				mapboxgl.accessToken = this.$root.mapboxToken; //自己的token
    				const map = new mapboxgl.Map({
    				container: 'vue-mapbox', // container ID
    				style: 'mapbox://styles/mapbox/streets-v12', // style URL
    				center: [-74.5, 40], // starting position [lng, lat]
    				zoom: 9, // starting zoom
    				});
    			}
    		}
    	}
    </script>
    <style scoped>
    	.container {
    		width: 840px;
    		height: 600px;
    		margin: 50px auto;
    		border: 1px solid #42B983;
    		position: relative;
    	}
    	#vue-mapbox {
    		width: 800px;
    		height: 470px;
    		margin: 0 auto;
    		border: 1px solid #42B983;
    		position: relative;
    	}
    </style>

进入到vue-mapbox 文件夹中， 打开cmd窗口，执行命令：  
**npm run serve**  
浏览器打开http://localhost:8080，就能显示我们的第一个地图。  
![c0bbef15e8f4b303fc6e31796caf041f.png][]

[dd351f76b9d2119de5d8bf3d3f022c63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/9ff7eba6251a4a40ba2d70375b330c28.png
[b3cf064dbfd371b0d26b01546133276e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/d7d9e813d84d430b9d43572874eefe49.png
[1aeb2160ea7a45764bc53ccc7ed29cf0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/f0d2f136b644431f8fbfd75b697e2a86.png
[0d0af4dbca839ac404060261475e103b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/81117709c7b74d6fac6d4610bf1e17ff.png
[468a8c15d114b69bf3f4239de92f65d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/617c9f2f930c45d4a959997bf085ebf4.png
[3426a9e315a4b2d3ccd5a0738ff54891.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/fa1378413f4f4387a2d8877a73dd8a83.png
[c0bbef15e8f4b303fc6e31796caf041f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/a039a2538828483a940a1d0acac13f53.png