快速上手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组件的propsmapOptions: {container: 'map', // 地图容器 idstyle: {'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>
结果:
快速上手iClient组件之Vue-iClient-MapboxGL相关推荐
- mathcal 对应于什么库_如何快速构建React组件库
前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...
- Vite+Vue+iClient for Leaflet引入并实现MapV/Eharts第三方可视化库示例
作者:gaogy 文章目录 背景 一.使用Vite构建Vue3+JavaScript项目 二.搭建iClient for Leaflet开发环境 三.第三方可视化库Echarts的使用 四.第三方可视 ...
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
- Vue入门指南-05 Vue实例的生命周期(快速上手vue)
生命周期钩子 = 生命周期函数 = 生命周期事件 实例创建期间的生命周期函数 // 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建. // 如果要调用 met ...
- Vue快速上手笔记2 - 开发环境的搭建
Vue快速上手笔记2 - 开发环境的搭建 CSDN:JcLee95 邮箱:291148484@163.com 专题目录:https://blog.csdn.net/qq_28550263/articl ...
- Vue简单快速上手 idea版
文章目录 版本 插件安装和通过CDN使用Vue Vue的基本语法 v-bind 条件判断 循环 监听事件 表单双绑 1.什么是双向数据绑定 2.在表单中使用双向数据绑定 组件 什么是组件 第一个Vue ...
- Vue实战快速上手-vue+ElementUI
Vue实战快速上手-vue+ElementUI 前言 创建工程 安装依赖 使用 创建组件 配置路由 导入路由 展示 运行 问题 前言 ElementUI是饿了么的官方组件库,可以将vue和Elemen ...
- 前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·007【uni-app和vue.js基础快速上手】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [014]view和text组件和动画使用 常见的尺 ...
- Vue快速上手笔记1 - 使用初体验
Vue快速上手笔记1 - 使用初体验 博主:李俊才 邮箱:291148484@163.com 若本文中存在的错误请告知博主更正 希望对大家有所帮助 专题目录:https://blog.csdn.net ...
最新文章
- Oracle 11gR1中细粒度拜候搜集效劳(2)
- C语言遥控器程序,红外遥控
- tp模型和数据库操作方法
- python format函数实例_python中强大的format函数实例详解
- 最全的Pycharm debug技巧
- OpenCV3学习(4.3)——图像形态学(膨胀,腐蚀)
- 【EntityFramework系列教程五,翻译】在ASP.NET MVC程序中借助EntityFramework读取相关数据...
- 获取客户端ip_获取客户端访问真实IP
- SaaS应用出路何在?
- 为什么勒索软件的预防如此重要?
- HFSS阵列天线仿真
- 常见积分求导公式表--便于记忆
- Devexpress WPF教程
- 每日一坑:Github配置ssh后,拉代码依旧需要鉴权,且鉴权失败。
- Cloudera-server迁移
- 1371: 三位数求解
- Android 输入法键盘的隐藏和显示
- c++基础题:判断某整数是否既是5又是7的整数倍
- 共享体脂秤为公众号增粉100%真粉活粉吗?
- 连续投影算法-python版
热门文章
- android 定时在通知栏提醒,Android 如何让程序定时进行消息通知到通知栏
- Unity3d 模型 动态切割
- 知识产权保护与知识传播
- 表格偶数奇数行颜色PHP,HTML-表格的奇数偶数行颜色不同
- android view嵌套,Android RecyclerView嵌套RecyclerView点击事件
- 计算机管理账户英语,系统管理员英文单词【处置技巧】
- 用Pygame写一个简答的交互界面
- 大连大学两日游———2021省选联考游记
- 是正经的区块链技术还是剑走偏锋搏一回?
- 继“换帅”之后,通用电气又将出售智能平台业务