本书结合Vue和OpenLayers，由浅入深、循序渐进地介绍Element的常用组件用法。本书共8章，首先介绍Element+Vue+OpenLayers开发环境的配置；然后结合Vue和OpenLayers对Element的常用组件进行详细的介绍，包括基本组件、表单组件、数据组件、通知组件、导航组件以及其他组件；最后以开发一个简单的智慧校园系统为例，进行Element+Vue+OpenLayers的项目实战。

前 言 在互联网+、云计算、物联网、人工智能等新兴技术蓬勃发展的大背景下，智慧城市、智慧交通、智慧农业、智慧国土、智慧校园等各种互联网信息系统纷纷从桌面应用向互联网应用转变。基于Web的互联网应用具有易维护、易更新、易推广等特性，已成为广大互联网企业和程序开发者的首选方案。 目前流行的Web开发组件较多且各具特色，如ExtJS、BootStrap、Element、jQuery UI等。其中Element作为新兴的Web开发组件库，能较好地与Vue结合使用，提高Web应用开发的效率。本书结合Vue和OpenLayers介绍Element各种组件的使用方法。首先介绍Element+Vue+OpenLayers开发环境的配置，然后对Element的基本组件、表单组件、数据组件、通知组件、导航组件及其他组件进行介绍，最后以智慧校园系统为例进行Element+Vue+OpenLayers项目实战，为广大开发者提供了较为全面的学习资料。 本书主要面向计算机、GIS、遥感、测绘等相关领域的工作者，在内容编排上遵循一般学习规律，由浅入深、循序渐进地介绍Element组件的使用方法，内容完整、实用性强，既有详尽的代码阐述，又有丰富的图形展示，可以使读者快速、全面地掌握Element组件的使用方法。对于初学者来说，只需要按部就班地跟着本书进行学习即可。无论读者是否具有Web应用开发经验，都可以借助本书来系统地了解和掌握基于Element的Web应用开发所需的技术知识点，为开发新颖的Web应用奠定良好的基础。 本书提供了全部示例源码，其中第2章到第8章的每个示例都能独立运行，读者可快速查看演示效果。本书内容组织与Element官网的线上资源保持一致，读者在学习本书的过程中，可以查看Element官网提供的示例进行更深入的学习。 本书出版得到国家自然科学基金（41701446、41971356）的支持，在此表示诚挚的谢意。在本书的编写过程中，电子工业出版社的田宏峰编辑提出了宝贵的建议，在此表示感谢。 本书作者均长期从事网络地理信息系统的理论方法研究、教学和应用开发工作，有多年的网络地理信息系统和互联网软件开发经验。这为本书的编写打下了扎实的理论基础和实践基础。尽管如此，限于作者水平，本书难免会有不足和疏漏之处，敬请广大读者批评指正。 作 者 2021年7月

目　　录 第1章　开发环境的配置 （1） 1.1　使用npm配置开发环境 （1） 1.1.1　Vue的安装 （1） 1.1.2　Element的安装 （6） 1.1.3　OpenLayers的安装 （6） 1.2　采用直接引用的方式配置开发环境 （7） 1.2.1　下载Vue文件 （7） 1.2.2　下载Element文件 （8） 1.2.3　下载OpenLayers文件 （10） 1.3　第一个Element+Vue+OpenLayers示例 （11） 1.4　多语言切换 （12） 1.5　自定义主题样式切换 （14） 1.6　组件过渡动画 （15） 第2章　基本组件 （19） 2.1　Element的布局 （19） 2.1.1　基础布局 （19） 2.1.2　分栏间隔 （20） 2.1.3　混合布局 （21） 2.1.4　分栏偏移 （23） 2.1.5　对齐方式 （24） 2.2　Element的布局容器 （26） 2.3　Element的色彩 （29） 2.4　Element的字体 （32） 2.5　Element的边框 （35） 2.6　Element的图标 （38） 2.7　Element的按钮 （40） 2.7.1　按钮的样式定义 （40） 2.7.2　按钮的事件绑定 （42） 2.8　Element的文字链接 （44） 2.9　思考与练习题 （46） 第3章　表单组件 （47） 3.1　单选框（Radio） （47） 3.2　多选框（Checkbox） （49） 3.3　输入框（Input） （52） 3.4　计数器（InputNumber） （56） 3.5　选择器（Select） （57） 3.6　级联选择器（Cascader） （61） 3.7　开关（Switch） （64） 3.8　滑块（Slider） （66） 3.9　时间选择器（TimePicker） （69） 3.10　日期选择器（DatePic） （73） 3.11　日期时间选择器（DateTimePicker） （76） 3.12　上传（Upload） （78） 3.13　评分（Rate） （86） 3.14　颜色选择器（ColorPicker） （88） 3.15　穿梭框（Transfer） （89） 3.16　表单（Form） （95） 3.17　思考与练习题 （110） 第4章　数据组件 （111） 4.1　表格（Table） （111） 4.2　标签（Tag） （143） 4.3　进度条（Progress） （146） 4.4　树形（Tree）组件 （148） 4.5　分页（Pagination） （158） 4.6　标注（Badge） （159） 4.7　头像（Avatar） （162） 4.8　思考与练习题 （164） 第5章　通知组件 （165） 5.1　警告（Alert） （165） 5.2　加载（Loading） （167） 5.3　消息提示（Message） （172） 5.4　弹框（MessageBox） （175） 5.5　通知（Notification） （185） 5.6　思考与练习题 （191） 第6章　导航组件 （193） 6.1　导航菜单（NavMenu） （193） 6.2　标签页（Tabs） （198） 6.3　面包屑（Breadcrumb） （202） 6.4　页头（PageHeader） （204） 6.5　下拉菜单（Dropdown） （205） 6.6　步骤条（Steps） （208） 6.7　思考与练习题 （211） 第7章　其他组件 （213） 7.1　对话框（Dialog） （213） 7.2　文字提示（Tooltip） （217） 7.3　弹出框（Popover） （219） 7.4　卡片（Card） （221） 7.5　走马灯（Carousel） （223） 7.6　折叠面板（Collapse） （225） 7.7　时间线（Timeline） （228） 7.8　分割线（Divider） （230） 7.9　日历（Calendar） （231） 7.10　图片（Image） （233） 7.11　无限滚动（InfiniteScroll） （235） 7.12　抽屉（Drawer） （236） 7.13　思考与练习题 （240） 第8章　Element+Vue+OpenLayers项目实战 （241） 8.1　智慧校园系统的需求分析 （241） 8.2　智慧校园系统的设计 （241） 8.2.1　开发环境 （241） 8.2.2　数据结构设计 （241） 8.2.3　系统功能设计 （247） 8.3　智慧校园系统的功能实现 （247） 8.3.1　地图基本功能 （248） 8.3.2　道路设施查询 （249） 8.3.3　运动休闲查询 （250） 8.3.4　教学设施查询 （251） 8.3.5　餐饮服务查询 （252） 8.3.6　办公楼查询 （252） 8.3.7　学生宿舍查询 （253）