Element+Vue+OpenLayers webgis实战

WebGIS 信息系统-Element+Vue+OpenLayers

Element+Vue+OpenLayers项目

某校园的遥感影像作为底图

,通过OpenLayers将遥感影像加载到浏览器中,如图1-25所示。

单击"Button"按钮可弹出一个对话框,该对话框的内容为"Hello world",如图1-26所示。

图1-26所示对话框的实现代码如下:

多语言切换

Element组件内部默认使用的是中文,若希望使用其他语言,则需要进行多语言设置,通过 CDN 的方式可以在线加载语言文件。例如,若要使用英文,则需要引用

c 复制代码
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>;

若要使用中文,则需要引入`

c 复制代码
<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"按钮,这些标签又会以不同的动画效果显示出来。

相关推荐
翻滚吧键盘15 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾19 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉27 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。33 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css