快速上手iClient组件之Vue-iClient-MapboxGL

作者：LX

背景

SuperMap iClient产品从10i版本开始增加了组件库，组件库在架构设计上采用 MVVM 模式（Model-View-ViewModel），同时可以兼容多种框架，例如 Vue、React、Angular 以及原生 H5 开发。使用 SuperMap iClient 组件库，可像搭积木一样快速的创建自定义的 WebGIS 应用。组件库开箱即用，一键切换主题等功能极大的便利了开发，但是对于一些基础比较薄弱的小伙伴不知道怎么上手，不用担心，下面笔者就教大家如何快速上手Vue-iClient-MapboxGL。

一、安装Vue-cli

笔者使用最新的 vue-cli 3 搭建项目，其他的配置都是 vue-cli 本来配好的了，详情请看 vue-cli 官网 。

npm install -g @vue/cli

二、创建项目

项目名可以自己取，我的项目名为 vue-iclient-mapboxgl ，在指定项目文件夹内打开窗口，输入下面命令，直接按下回车。

vue create vue-iclient-mapboxgl 

下面开始配置，可以根据项目的具体需求选择配置的内容，这里我选用默认的babel与eslint配置。

然后等待依赖模块的下载。。。
出现上图说明项目创建完成！
项目创建好后，进入项目根目录

cd vue-iclient-mapboxgl

运行项目

npm run serve 

出现下图表明项目运行成功：

浏览器打开http://localhost:8080，能看到运行成功的项目界面

三、Vue-iClient-MapboxGL应用

1、安装Vue-iClient-MapboxGL

npm install @supermap/vue-iclient-mapboxgl

等待安装完成……
2、引入 Vue-iClient-MapboxGL
在 main.js 中写入以下内容：

import Vue from 'vue'
import VueiClient from '@supermap/vue-iclient-mapboxgl'
import App from './App.vue'

Vue.use(VueiClient)

new Vue({
  render: h => h(App)
}).$mount('#app')

3、自定义主题
Vue-iClient-MapboxGL 内置了 13 套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。
你可以通过以下方式定义主题：
3.1 使用 Vue-iClient-MapboxGL 内置主题

import Vue from 'vue';
import VueiClient from '@supermap/vue-iclient-mapboxgl';
import App from './App.vue';

// 可以通过两种方式使用内置主题
// 1 初始化组件时传入主题配置
Vue.use(VueiClient, { theme: 'light' });
// 2 通过 setTheme 方法设置主题
VueiClient.setTheme({ theme: 'light' });

3.2 使用自定义主题
你需要定义一个 theme 对象，包含 textColor、background、colorGroup 三个属性。

如下示例：

let theme = {
  textColor: '#eee',
  background: 'rgba(0,0,0,0)',
  colorGroup: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad']
};

Vue.use(VueiClient, { theme });
// 或
VueiClient.setTheme({ theme });

4、使用组件—地图组件
由于Vue-iClient-MapboxGL组件比较多，这里就不一一展示，仅以地图组件为例简单的给大家介绍一下组件是如何用的，更多组件详情参见Vue-iClient-MapboxGL的API指南和示范程序。

<template>
<div id="main">
   <!-- 使用地图组件 -->
   <sm-web-map :map-options="mapOptions"></sm-web-map>
</div>
</template>
<script>
export default {
  data () {
    return {
      // mapOptions是sm-web-map组件的props
      mapOptions: {
        container: 'map', // 地图容器 id
        style: {
          'version': 8,
          'sources': {
            'raster-tiles': {
              'type': 'raster',
              'tiles': [
                'http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
              ],
              'tileSize': 256
            }
          },
          'layers': [{
            'id': 'simple-tiles',
            'type': 'raster',
            'source': 'raster-tiles',
            'minzoom': 0,
            'maxzoom': 22
          }]
        },
        center: [120.143, 30.236], // 地图中心点
        zoom: 3 // 地图初始缩放级别
      }
    }
  }
}
</script>

<style>
#main {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

结果：