vue+supermap iclient for mapboxgl 降雨分布展示的webgis项目：1

前言：最近在系统性学习webgis，所以将写过的一些项目代码重新归纳整理了下。给大家分享的同时，也便于自己回顾。

本项目是一个动态展示四川省降雨变化的大屏页面展示，通过vue搭建项目框架，supermap iclient for mapboxgl构建地图服务，echarts绘制图表。

Rain

1、利用vue-cli创建vue项目

需要注意的是supermap iclient for mapboxgl不支持vue3.0，所以只能搭建vue2.x的项目

a.在文件夹地址栏输入cmd，打开PowerShell窗口，运行以下命令来创建项目

vue create weather（文件夹名）

 b.选择default (babel, eslint)，等待安装

 2、安装依赖库

a.supermap iclient for mapboxgl（安装 | Vue-iClient-MapboxGL）

①在构建的vue文件夹，打开PowerShell窗口，运行以下命令来安装依赖库

npm install @supermap/vue-iclient-mapboxgl

②并在main.js文件中引入依赖

import VueiClient from '@supermap/vue-iclient-mapboxgl';
Vue.use(VueiClient);

b.Vuex，用于状态管理（安装 | Vuex）

①运行以下命令来安装对应依赖

npm install vuex --save

②在src文件夹中，新建一个store文件夹，并新建一个index.js文件

import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
    },
    mutations: {
    },
});

export default store;

③并在main.js文件中引入

import store from './store/index'

3、项目解析

 从页面布局可以明显看出，共分为三部分：

a.整个四川省降雨分布图，包含时间轴组件，图层切换控件，市州降雨统计组件（相关技术supermap iclient for mapboxgl）

b.具体市州降雨分布图，包含区县降雨统计组件（相关技术echarts）

c.市州降雨分布统计（相关技术echarts）

4、文件目录

在项目开始前，建议按照以下的结构来规范化文件目录

weather  -------->项目名称
	.git      -------->git工具
	node_modules ----->用来管理项目中使用的依赖
	public    -------->项目中使用到的资源，图片等？
		- index.html-->项目主页
	src       -------->用来书写vue的源代码【重点】
		- assets ----->用来存放静态资源【重点】
		- components ->用来封装组件【重点】
        - data ------->用来存储降雨数据【重点】
        - image ------>用来存储样式图片【重点】
        - store ------>用来书写vuex状态代码【重点】
        - style ------>用来书写css样式【重点】
        - views ------>用来书写vue组件【重点】
		- App.vue ---->项目中的根组件【重点】
		- main.js ---->项目中的主入口【重点】
	.gitignore    ---->git版本控制忽略软件
	babel.config.js
	package.json  ---->依赖的名称和版本号
	package-lock.json->详细的依赖版本
	README.md     ---->项目说明文件

下一节开始，将按照页面布局的顺序来逐一介绍项目搭建过程。

完整项目代码可在github上获取：GitHub - mosuiqin/weather: 利用supermap iclient for mapboxgl 完成简单的气象可视化