使用 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