mapbox_master

1.项目描述

根据奔跑吧面条的**vue-big-screen**开源框架基础上进行修改。

项目需要全屏展示（按 F11）。

项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 按需引入。

项目环境：Vue-cli、DataV、Echarts、Webpack、Npm、Node，axios,mock。

请拉取 master 分支的代码，其余分支是开发分支。

在项目public目录下存放地图数据合集，根据地市编存放。

2.主要文件介绍

3.使用介绍

点击poackage.json中的调试，初次导入应先安装依赖，先把node_modules删除再通过npm i安装依赖，笔者在初次导入mapbox遇到less loader报错，卸载less loader重新安装5.0.0即可正常运行，依赖版本如下：

4.取消mock模拟数据

// src\main.js文件

把下面这句话注释掉就可以了。

require('./mock/mock')//是否使用mock

除了mock.js模拟数据以外，还可采用fake-data.json

5.自适应缩放组件

注意

采用Scale方式，会自动给组件父元素添加overflow:hidden

使用

<template>

  <scale-screen width="1920" height="1080">

    <div>

      <v-chart>....</v-chart>

      <v-chart>....</v-chart>

      <v-chart>....</v-chart>

      <v-chart>....</v-chart>

      <v-chart>....</v-chart>

    </div>

  </scale-screen>

</template>

<script>

import ScaleScreen from 'scale-screen'

export default {

  name:'Demo',

  components:{

    VScaleScreen

  }

}

</script>

6.API

公用组件

封装了除面条外个别用到的组件

5.1 message消息提示

因为刚开始没想着用第三方提示库，自己简单封装了一个。

注：组件内部目前只有warning，类型，如果需要其他类型自己组件内添加。

因在main.js注册全局可以直接使用，不需要引入

  this.$Message({      text: res.msg,      type: 'warning'  })//也可以这样this.$Message.warning(res.msg)

5.2 外边框

根据需求更改，更换外边框（src\components\item-wrap\item-wrap.vue）下更换。

<ItemWrap    title="我是title"    >       <div>我是谁？</div></ItemWrap>

5.3中间地图

导入mapbox

Mapbox地图容器必须声明style，否则无法正常渲染

我试了一下，id跟class两种方式渲染条件还不一样，用id少了高度也能渲染，class少了高度就不能渲染了

右侧两个边框通过mapbox（监听弹窗）传递信息，因笔者编码能力较弱，没能妥善处理好click监听事件，故采用监听弹窗open，使用事件总线传递信息（echarts数据等），具体实现方法如下：

数据仅作测试用，无理论依据

5.4左侧组件

Mock.Js数据可视化（echarts）

总览

文件结构