Element+Vue+OpenLayers webgis
Element Vue OpenLayers项目
以
某校园的遥感影像作为底图
,通过OpenLayers将遥感影像加载到浏览器中,如图1-25所示。
单击“Button”按钮可弹出一个对话框,该对话框的内容为“Hello world”,如图1-26所示。
图1-26所示对话框的实现代码如下:
多语言切换
Element组件内部默认使用的是中文,若希望使用其他语言,则需要进行多语言设置,通过 CDN 的方式可以在线加载语言文件。例如,若要使用英文,则需要引用
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>;
若要使用中文,则需要引入`
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>`
可以在script
中通过代码“ELEMENT.locale(ELEMENT.lang.zh-CN)或者 ELEMENT.locale(ELEMENT.lang.en)”来选择使用中文或英文。Element共内置了简体中文(zh-CN)、英语(en)、德语(de)等60种语言,读者可根据自己的需求来配置所需的语言。
当然,除了在线的CDN语言文件加载方式,可以将语言下载到本地进行引用。在Element 官网的首页中单击“组件”按钮,然后单击“unpkg.com/element-ui”,在弹出的页面中打开文件夹“lib\umd\locale”,可以看到多种语言的配置文件,如图1-27所示(该图只显示了部分语言的配置文件)。
各种语言的配置文件
图1-27 各种语言的配置文件
打开文件zh-CN.js,可弹出文件zh-CN.js的页面,如图1-28所示。单击“View Raw”按钮,可看到文件zh-CN.js的JavaScript代码,如图1-29所示。按下组合键Ctrl S,可将文件zh-CN.js 的 JavaScript 代码保存到本地,并将其添加到项目中,在 HTML 页面中引用文件zh-CN.js即可。
图1-28 文件zh-CN.js的页面
图1-29 文件zh-CN.js的JavaScript代码
自定义主题样式切换
Element提供了一套默认使用的主题,Element也提供使用其他自定义主题的方法,详见Element官网首页中的“主题”部分。本节通过直接引用的方法来自定义主题。
在Element官网的首页中单击“组件”按钮,然后单击“unpkg.com/element-ui”,在弹出的页面中打开文件夹“lib\theme-chalk”,如图1-30所示。
图1-30 文件夹theme-chalk的页面
单击文件夹theme-chalk中的某个文件,如文件autocomplete.css,可打开该文件的页面,如图1-31所示。
单击图1-31中的“View Raw”按钮,可看到文件autocomplete.css的JavaScript代码,如图 1-32 所示(只显示了部分 JavaScript 代码)。按下组合键 Ctrl S,可将文件autocomplete.css的JavaScript代码保存到本地,并将其添加到项目中,通过标签将文件autocomplete.css引入HTML页面即可使用。
图1-31 文件autocomplete.css的页面
组件过渡动画
Element提供的动画过渡效果有淡入淡出、缩放、展开折叠等。其中,淡入淡出和缩放使用的组件是,而淡入淡出有el-fade-in-linear和el-fade-in两种效果,缩放有el-zoom-in-center、el-zoom-in-top和el-zoom-in-bottom三种效果。读者将transition组件中name的属性修改成不同的名字(如el-fade-in-linear)即可实现相应的效果。展开折叠使用的组件为。组件的动画过渡效果实例如图 1-33所示。
图1-33 组件的动画过渡效果实例
当单击图1-33中的“Toggle”按钮,各个标签将以不同的动画效果隐藏起来(见图1-34);再次单击“Toggle”按钮,这些标签又会以不同的动画效果显示出来。
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /boutique/detail/tanhggcaji
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13