Element Front-End Component Development in WebGIS

Name: Element Front-End Component Development in WebGIS
ISBN: 9787121431623

郭明强 / 黄颖 / 杨亚仑Publishing House of Electronics Industry · ChinaApr 2022

3.1

Word count: 54K words
Chapters: 103
ISBN: 9787121431623

Report an error Find this book

Summary

This book combines Vue and OpenLayers to introduce the common Element components in a progressive, step-by-step manner.

Comprising 8 chapters, it begins with configuring the Element + Vue + OpenLayers development environment; then, integrating Vue and OpenLayers, it details Element's common components, including basic components, form components, data components, notification components, navigation components, and other components; finally, it uses the development of a simple smart campus system as an example for a hands-on Element + Vue + OpenLayers project.

Editor's review

The book's clear positioning is "WebGIS front-end component-based development." Rather than discussing Vue or OpenLayers principles in general terms, it breaks down Element's common components one by one within the context of map applications—an angle that is relatively rare. Starting from environment configuration, it covers categories such as basic components, forms, data, notifications, and navigation, and finally ties the scattered knowledge together into a complete project with a smart campus system; structurally, this is a typical "reference book + hands-on practice" approach. For readers who already know a little Vue but don't know how to connect UI components with map interactions, the book's examples of components working with OpenLayers offer directly useful references; the smart campus case can also serve as a skeleton for a course project or small project to adapt. Note that the book focuses on component usage and project implementation, with limited coverage of framework internals, engineering standards, and performance optimization; it's best to consult the official documentation alongside reading so as not to treat the sample code as the only way to write things. Overall, it suits as a desk reference to consult while working rather than a systematic textbook to read cover to cover.

Who it's for

A good fit for

Front-end engineers who know Vue basics and want to move into WebGIS front-end development
Developers who need to use Element components together with OpenLayers maps
Students doing GIS-related course projects who need a complete project reference
Technical staff who want to build map management interfaces in a component-based way

Not a good fit for

Readers with no Vue or JavaScript foundation who want to learn programming from scratch
People mainly doing back-end or data processing work that does not involve front-end UI development
Readers expecting in-depth study of OpenLayers map internals and algorithms

Reading tips

First get the Element, Vue, and OpenLayers environment running as in Chapter 1 before moving on to the component chapters, so you don't just read without practicing.
Jump between chapters by component category, and read the relevant sections closely when you encounter form, data, or navigation components actually used in your project.
When reading the smart campus case, build the page structure yourself first, then compare it with the book's implementation—the differences are most worth pondering.
Keep the official Element and OpenLayers documentation handy to check whether versions and APIs match those in the book.

About the publisher

Publishing House of Electronics Industry China · Founded in 1982

The Publishing House of Electronics Industry is a comprehensive publisher distinguished by its focus on electronic information and related fields. Judging from the more than 3,000 titles in its catalogue, its publishing covers programming and design, artificial intelligence, computer science, finance and economics, photography, and social sciences, attending both to cutting-edge technology and to general readers. Representative titles include Factor Investing: Methods and Practice, x86 Assembly Language: From Real Mode to Protected Mode, The RISC-V Reader, Artificial Intelligence: Speech Recognition, Understanding and Practice, Phased Array Radar Technology, Radar Target Characteristics, and 100 Go Mistakes and How to Avoid Them, most of which centre on technical methods and engineering practice. Its authors include Shi Chuan, Li Zhong, Wang Xiaobo, David Patterson, Andrew Waterman, and Yu Zihao, among others from China and abroad. Owing to limited public information, no further publishing features are elaborated here.

版权信息
内容简介
前言
第1章开发环境的配置
1.1 使用npm配置开发环境
1.1.1 Vue的安装
1.1.2 Element的安装
1.1.3 OpenLayers的安装
1.2 采用直接引用的方式配置开发环境
1.2.1 下载Vue文件
1.2.2 下载Element文件
1.2.3 下载OpenLayers文件
1.3 第一个Element+Vue+OpenLayers示例
1.4 多语言切换
1.5 自定义主题样式切换
1.6 组件过渡动画
第2章基本组件
2.1 Element的布局
2.1.1 基础布局
2.1.2 分栏间隔
2.1.3 混合布局
2.1.4 分栏偏移
2.1.5 对齐方式
2.2 Element的布局容器
2.3 Element的色彩
2.4 Element的字体
2.5 Element的边框
2.6 Element的图标
2.7 Element的按钮
2.7.1 按钮的样式定义
2.7.2 按钮的事件绑定
2.8 Element的文字链接
2.9 思考与练习题
第3章表单组件
3.1 单选框
3.2 多选框
3.3 输入框
3.4 计数器
3.5 选择器
3.6 级联选择器
3.7 开关
3.8 滑块
3.9 时间选择器
3.10 日期选择器
3.11 日期时间选择器
3.12 上传
3.13 评分
3.14 颜色选择器
3.15 穿梭框
3.16 表单
3.17 思考与练习题
第4章数据组件
4.1 表格
4.2 标签
4.3 进度条
4.4 树形组件
4.5 分页
4.6 标注
4.7 头像
4.8 思考与练习题
第5章通知组件
5.1 警告
5.2 加载
5.3 消息提示
5.4 弹框
5.5 通知
5.6 思考与练习题
第6章导航组件
6.1 导航菜单
6.2 标签页
6.3 面包屑
6.4 页头
6.5 下拉菜单
6.6 步骤条
6.7 思考与练习题
第7章其他组件
7.1 对话框
7.2 文字提示
7.3 弹出框
7.4 卡片
7.5 走马灯
7.6 折叠面板
7.7 时间线
7.8 分割线
7.9 日历
7.10 图片
7.11 无限滚动
7.12 抽屉
7.13 思考与练习题
第8章 Element+Vue+OpenLayers项目实战
8.1 智慧校园系统的需求分析
8.2 智慧校园系统的设计
8.2.1 开发环境
8.2.2 数据结构设计
8.2.3 系统功能设计
8.3 智慧校园系统的功能实现
8.3.1 地图基本功能
8.3.2 道路设施查询
8.3.3 运动休闲查询
8.3.4 教学设施查询
8.3.5 餐饮服务查询
8.3.6 办公楼查询
8.3.7 学生宿舍查询

FAQ

Can I read this book without any Vue background?

Not really recommended. The book assumes readers already understand basic Vue usage, and the component examples build directly on Vue's templating and data binding; without that foundation, it will be hard to understand the code structure. It's better to first cover Vue basics such as components, directives, and lifecycle, then come back—it will go much more smoothly.

Can the project case in the book be used directly in real development?

The smart campus case is better treated as a learning skeleton. It demonstrates how components are organized and how maps are embedded in the interface, but it still falls short of a production project—for example, permissions, API encapsulation, and exception handling are usually not covered. You can borrow its structure and then add engineering practices according to your team's standards.

Which version of Element does the book cover?

The materials do not specify a version number; the examples are based on Element usage at the time of writing. Since Element and its Vue adapter versions continue to be updated, some component properties or import methods may have changed, so please refer to the official documentation when practicing, and check the version first if something doesn't match.

Does the book cover OpenLayers in depth?

The book focuses on combining Element components with Vue; OpenLayers appears mainly as the carrier for base maps and interactions in the examples and project, without systematically explaining underlying topics such as projections or layer rendering. If your goal is to go deep into the map engine itself, you'll need to supplement with dedicated materials.

Comments

Find this book

This site is an index: you start “Search all sources” in your browser, and the entries it lists all point to third-party sites; please judge their availability yourself.

About the author

郭明强 Author

Guo Mingqiang is a technical author who writes steadily on geographic information systems and WebGIS development. Public information about him is limited, and his personal background has not been disclosed. The nine works held in the collection show that his writing falls into three categories—general computing, programming and design, and software learning—covering desktop and mobile GIS applications, WebGIS front-end components and 3D development, and big-data chart visualization. Representative titles include Geographic Information System Applications and Practice (2nd Edition), A Comprehensive Guide to OpenLayers for WebGIS (2nd Edition), and 3D Software Development with Cesium for WebGIS, while Image Processing and Deep Learning extends into related technical fields. His books tend to follow specific platforms and tools, emphasizing function development and engineering practice, and are aimed at readers who want hands-on GIS implementation, giving them a recognizable place among WebGIS learning resources.

黄颖 Author

Public information about Huang Ying is limited, and what is available comes mainly from the works published under this name. Judging from the eleven titles in the collection, the writing spans programming and design, general computing, management, finance and economics, software learning, and social science, combining hands-on technical content with business applications. On the technical side, Huang Ying offers a fairly systematic treatment of WebGIS, covering front-end tools and visualization components such as OpenLayers, ECharts, and Element, and extending the discussion to mobile GIS development on the Android platform and to three-dimensional modeling of ground entities in smart cities. On the business and social science side, the works include a practical guide to cross-border e-commerce and a study of the macro factors and micro mechanisms behind regional innovation output, as well as an accessible introduction to big data for general readers. Overall, the books emphasize practical tools and methodical explanation, serving both technical readers and those in management and social science.

杨亚仑 Author

Yang Yalun: publicly available information about this author is currently limited, and details such as nationality, dates of birth and death, education, and professional experience have not been clearly recorded. According to the library holdings, Yang Yalun has one work, WebGIS Development with Element Front-End Components, which is classified under general computer science and is a practical technical book on front-end development for geographic information systems (GIS). The title indicates that its content centers on WebGIS application development and the use of the Element front-end component library, placing it in the practical direction of applying web technologies to geographic information display and interaction. Books on this topic are typically aimed at developers with some front-end foundation, students in GIS-related fields, and technical professionals, emphasizing component-based development approaches and engineering implementation. Because other works and background materials about the author are not available, a full assessment of Yang Yalun's overall writing style and academic trajectory remains difficult; the existing work nonetheless shows that the author attends to the combination of front-end component technology and GIS application development and offers Chinese-language technical readers a targeted practical reference.