Vue-iClient-MapboxGL学习笔记

使用 SuperMap iClient 组件库，可像搭积木一样快速的创建自定义的 WebGIS 应用。其中 Vue-iClient-MapboxGL 即是使用 Vue 封装的组件库，本文将说明下如何快速使用 Vue-iClient-MapboxGL。

1、首先需要搭建 Vue 项目，参见 https://blog.csdn.net/Ocean111best/article/details/103495327

2、应用 Vue-iClient-MapboxGL 

（1）安装 Vue-iClient-MapboxGL 依赖

在终端输入 npm install @supermap/vue-iclient-mapboxgl，即可完成安装；

（2）引入 Vue-iClient-MapboxGL

在 main.js 中文件头添加以下内容：import VueiClient from '@supermap/vue-iclient-mapboxgl'；

（3）使用组件-路线查询组件和地图切换组件

首先新建一个组件，可以命名为 HelloRouteTianditu.vue。其中地图切换的标签为：

<sm-web-map server-url="https://iportal.supermap.io/iportal/" map-id="801571284">
  <sm-tdt-map-switcher position="top-left" :data="{tk:'申请的tk'}" :collapsed="false"></sm-tdt-map-switcher>
</sm-web-map>

路线查询标签如下：

<sm-web-map server-url="https://iportal.supermap.io/iportal/" map-id="801571284">
  <sm-tdt-route position="top-left" :data="{tk:'申请的tk'}"></sm-tdt-route>
</sm-web-map>

HelloRouteTianditu.vue 内容如下：

<template>
  <div class="hello">
    <sm-web-map server-url="https://iportal.supermap.io/iportal/" map-id="801571284">
      <sm-tdt-map-switcher position="top-right" :data="{tk:'1d109683f4d84198e37a38c442d68311'}" :collapsed="false"></sm-tdt-map-switcher>
      <sm-tdt-route position="top-left" :data="{tk:'申请的tk'}"></sm-tdt-route>
    </sm-web-map>
  </div>
</template>

<script>
export default {
  name: 'HelloRouteTianditu',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  width: 100%;
  height: 700px;
}
</style>

（4）在 router/index.js 里面文件头加入如下内容：

import HelloRouteTianditu from '@/components/HelloRouteTianditu'

整个文件如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloRouteTianditu from '@/components/HelloRouteTianditu'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/HelloRouteTianditu',
      name: 'HelloRouteTianditu',
      component: HelloRouteTianditu
    }
  ]
})

（5）运行整个项目

直接在终端输入：npm run dev，然后再浏览器中输入： http://localhost:8080/#/HelloRouteTianditu

运行结果如下：

（6）资源下载：本项目写有多个组件可供下载学习

整个项目下载地址(包括多个组件)：oceanDemo