大家好 👋🏻, 新的一年即将开始, 我不想错过这个机会, 与大家分享一篇题为《2024年的安卓现代开发》的文章. 🚀

如果你错过了我的上一篇文章, 可以看看2023年的安卓现代开发并回顾一下今年的变化.

免责声明

📝 本文反映了我的个人观点和专业见解, 并参考了 Android 开发者社区中的不同观点. 此外, 我还定期查看 Google 为 Android 提供的指南.

🚨 需要强调的是, 虽然我可能没有明确提及某些引人注目的工具, 模式和体系结构, 但这并不影响它们作为开发 Android 应用的宝贵替代方案的潜力.

Kotlin 无处不在 ❤️

Kotlin是由JetBrains开发的一种编程语言. 由谷歌推荐, 谷歌于 2017 年 5 月正式发布(查看这里). 它是一种与 Java 兼容的现代编程语言, 可以在 JVM 上运行, 这使得它在 Android 应用开发中的采用非常迅速.

无论你是不是安卓新手, 都应该把 Kotlin 作为首选, 不要逆流而上 🏊🏻 😎, 谷歌在 2019 年谷歌 I/O 大会上宣布了这一做法. 有了 Kotlin, 你就能使用现代语言的所有功能, 包括协程的强大功能和使用为 Android 生态系统开发的现代库.

请查看Kotlin 官方文档

Kotlin 是一门多用途语言, 我们不仅可以用它来开发 Android 应用, 尽管它的流行很大程度上是由于 Android 应用, 我们可以从下图中看到这一点.

KotlinConf ‘23

Kotlin 2.0 要来了

另一个需要强调的重要事件是Kotlin 2.0的发布, 它近在眼前. 截至本文发稿之日, 其版本为 2.0.0-beta4

新的 K2 编译器 也是 Kotlin 2.0 的另一个新增功能, 它将带来显著的性能提升, 加速新语言特性的开发, 统一 Kotlin 支持的所有平台, 并为多平台项目提供更好的架构.

请查看 KotlinConf '23 的回顾, 你可以找到更多信息.

Compose 🚀

Jetpack Compose 是 Android 推荐的用于构建本地 UI 的现代工具包. 它简化并加速了 Android 上的 UI 开发. 通过更少的代码, 强大的工具和直观的 Kotlin API, 快速实现你的应用.

• Jetpack Compose 文档

Jetpack Compose 是 Android Jetpack 库的一部分, 使用 Kotlin 编程语言轻松创建本地UI. 此外, 它还与 LiveData 和 ViewModel 等其他 Android Jetpack 库集成, 使得构建具有强反应性和可维护性的 Android 应用变得更加容易.

Jetpack Compose 的一些主要功能包括

资源:

• Jetpack Compose 文档


• Compose 与 Kotlin 的兼容性图谱


• Jetpack Compose 路线图


• 课程


• Jetpack Compose 中@Composable的API 指南

Android Jetpack ⚙️

Jetpack是一套帮助开发者遵循最佳实践, 减少模板代码, 编写在不同Android版本和设备上一致运行的代码的库, 这样开发者就可以专注于他们的业务代码.

_ Android Jetpack 文档

其中最常用的工具有:

• ViewModel


• Room


• DataStore


• WorkManager


• Navigation


• CameraX


• Compose


• Media3


• Glance

Material You / Material Design 🥰

Material You 是在 Android 12 中引入并在 Material Design 3 中实现的一项新的定制功能, 它使用户能够根据个人喜好定制操作系统的视觉外观. Material Design 是一个由指南, 组件和工具组成的可调整系统, 旨在坚持UI设计的最高标准. 在开源代码的支持下, Material Design 促进了设计师和开发人员之间的无缝协作, 使团队能够高效地创造出令人惊叹的产品.

目前, Material Design 的最新版本是 3, 你可以在这里查看更多信息. 此外, 你还可以利用Material Theme Builder来帮助你定义应用的主题.

代码仓库

使用 Material 3 创建主题

SplashScreen API

Android 中的SplashScreen API对于确保应用在 Android 12 及更高版本上正确显示至关重要. 不更新会影响应用的启动体验. 为了在最新版本的操作系统上获得一致的用户体验, 快速采用该 API 至关重要.

Clean架构

Clean架构的概念是由Robert C. Martin提出的. 它的基础是通过将软件划分为不同层次来实现责任分离.

特点

依赖规则

作者在他的博文Clean代码中很好地描述了依赖规则.

依赖规则是使这一架构得以运行的首要规则. 这条规则规定, 源代码的依赖关系只能指向内部. 内圈中的任何东西都不能知道外圈中的任何东西. 特别是, 外圈中声明的东西的名称不能被内圈中的代码提及. 这包括函数, 类, 变量或任何其他命名的软件实体.

• 博文Clean代码

安卓中的Clean架构:

Presentation 层: Activitiy, Composable, Fragment, ViewModel和其他视图组件.
Domain层: 用例, 实体, 仓库接口和其他Domain组件.
Data层: 仓库的实现类, Mapper, DTO 等.

Presentation层的架构模式

架构模式是一种更高层次的策略, 旨在帮助设计软件架构, 其特点是在一个可重复使用的框架内为常见的架构问题提供解决方案. 架构模式与设计模式类似, 但它们的规模更大, 解决的问题也更全面, 如系统的整体结构, 组件之间的关系以及数据管理的方式等.

在Presentation层中, 我们有一些架构模式, 我想重点介绍以下几种:

• MVVM


• MVI

我不想逐一解释, 因为在互联网上你可以找到太多相关信息. 😅

此外, 你还可以查看应用架构指南.

依赖注入

依赖注入是一种软件设计模式, 它允许客户端从外部获取依赖关系, 而不是自己创建依赖关系. 它是一种在对象及其依赖关系之间实现控制反转(IoC)的技术.

• Hilt ❤️


• Dagger


• Koin

模块化

模块化是一种软件设计技术, 可将应用划分为独立的模块, 每个模块都有自己的功能和职责.

模块化的优势

可重用性: 拥有独立的模块, 就可以在应用的不同部分甚至其他应用中重复使用.

严格的可见性控制: 模块可以让你轻松控制向代码库其他部分公开的内容.

自定义交付: Play特性交付 使用应用Bundle的高级功能, 允许你有条件或按需交付应用的某些功能.

可扩展性: 通过独立模块, 可以添加或删除功能, 而不会影响应用的其他部分.

易于维护: 将应用划分为独立的模块, 每个模块都有自己的功能和责任, 这样就更容易理解和维护代码.

易于测试: 有了独立的模块, 就可以对它们进行隔离测试, 从而便于发现和修复错误.

改进架构: 模块化有助于改进应用的架构, 从而更好地组织和结构代码.

改善协作: 通过独立的模块, 开发人员可以不受干扰地同时开发应用的不同部分.

构建时间: 一些 Gradle 功能, 如增量构建, 构建缓存或并行构建, 可以利用模块化提高构建性能.

更多信息请参阅官方文档.

网络

• OkHttp


• Retrofit


• Ktor

序列化

在本节中, 我想提及两个我认为非常重要的工具: 与 Retrofit 广泛结合使用的Moshi, 以及 JetBrains 的 Kotlin 团队押宝的Kotlin Serialization.

• Moshi


• Kotlin Serialization

Moshi 和 Kotlin Serialization 是用于 Kotlin/Java 的两个序列化/反序列化库, 可将对象转换为 JSON 或其他序列化格式, 反之亦然. 这两个库都提供了友好的接口, 并针对移动和桌面应用进行了优化. Moshi 主要侧重于 JSON 序列化, 而 Kotlin Serialization 则支持包括 JSON 在内的多种序列化格式.

图像加载

要从互联网上加载图片, 有几个第三方库可以帮助你处理这一过程. 图片加载库为你做了很多繁重的工作; 它们既处理缓存(这样你就不用多次下载图片), 也处理下载图片并将其显示在屏幕上的网络逻辑.

_ 官方安卓文档

• Coil


• Glide

响应/线程管理

说到响应式编程和异步进程, Kotlin协程凭借其suspend函数和Flow脱颖而出. 然而, 在 Android 应用开发中, 承认 RxJava 的价值也是至关重要的. 尽管协程和 Flow 的采用率越来越高, 但 RxJava 仍然是多个项目中稳健而受欢迎的选择.

对于新项目, 请始终选择Kotlin协程❤️. 可以在这里探索一些Kotlin协程相关的概念.

本地存储

在构建移动应用时, 重要的一点是能够在本地持久化数据, 例如一些会话数据或缓存数据等. 根据应用的需求选择合适的存储选项非常重要. 我们可以存储键值等非结构化数据, 也可以存储数据库等结构化数据. 请记住, 这一点并没有提到我们可用的所有本地存储类型(如文件存储), 只是提到了允许我们保存数据的工具.

建议:

• S̶h̶a̶r̶e̶d̶P̶r̶e̶f̶e̶r̶e̶n̶c̶e̶s̶


• DataStore


• EncryptedSharedPreferences

测试 🕵🏼

软件开发中的测试对于确保产品质量至关重要. 它能检测错误, 验证需求并确保客户满意. 下面是一些最常用的测试工具::

• JUnit 5


• Mockk


• Kotest


• Kluent


• Turbine


• Espresso


• Robolectric


• Maestro

工具文档的测试部分

截屏测试 📸

Android 中的截屏测试涉及自动捕获应用中各种 UI 元素的屏幕截图, 并将其与基线图像进行比较, 以检测任何意外的视觉变化. 它有助于确保不同版本和配置的应用具有一致的UI外观, 并在开发过程的早期捕捉视觉回归.

• Paparazzi


• Roborazzi

R8 优化

R8 是默认的编译器, 可将项目的 Java 字节码转换为可在 Android 平台上运行的 DEX 格式. 通过缩短类名及其属性, 它可以帮助我们混淆和减少应用的代码, 从而消除项目中未使用的代码和资源. 要了解更多信息, 请查看有关 缩减, 混淆和优化应用 的 Android 文档. 此外, 你还可以通过ProGuard规则文件禁用某些任务或自定义 R8 的行为.

• 代码缩减


• 缩减资源


• 混淆


• 优化

第三方工具

• DexGuard

Play 特性交付

Google Play 的应用服务模式称为动态交付, 它使用 Android 应用Bundle为每个用户的设备配置生成并提供优化的 APK, 因此用户只需下载运行应用所需的代码和资源.

• Android 文档

自适应布局

随着具有不同外形尺寸的移动设备使用量的增长, 我们需要一些工具, 使我们的 Android 应用能够适应不同类型的屏幕. 因此, Android 为我们提供了Window Size Class, 简单地说, 就是三大类屏幕格式, 它们是我们开发设计的关键点. 这样, 我们就可以避免考虑许多屏幕设计的复杂性, 从而将可能性减少到三组, 它们是 Compat, Medium和Expanded.

Window Size Class

支持不同的屏幕尺寸

我们拥有的另一个重要资源是Canonical Layout, 它是预定义的屏幕设计, 可用于 Android 应用中的大多数场景, 还为我们提供了如何将其适用于大屏幕的指南.

其他相关资源

• 2022 年谷歌 I/O 大会形式因素的三件事


• 播放列表: 2022 年谷歌 I/O 大会上的Form-Factor

Form-Factor培训

本地化 🌎

本地化包括调整产品以满足不同地区不同受众的需求. 这包括翻译文本, 调整格式和考虑文化因素. 其优势包括进入全球市场, 增强用户体验, 提高客户满意度, 增强在全球市场的竞争力以及遵守当地法规.

注: BCP 47 是安卓系统使用的国际化标准.

参考资料

• 支持不同语言和文化


• 本地化应用


• 每个应用的语言首选项


• 每个应用的语言偏好 - 第一部分


• 每个应用的语言偏好 - 第二部分

性能 🔋⚙️

在开发 Android 应用时, 我们必须确保用户体验更好, 这不仅体现在应用的开始阶段, 还体现在整个执行过程中. 因此, 我们必须使用一些工具, 对可能影响应用性能的情况进行预防性分析和持续监控:

• 基准


• 基准配置文件


• 应用启动


• Firebase 性能监控


• JankStats 库

应用内更新

当你的用户在他们的设备上不断更新你的应用时, 他们可以尝试新功能, 并从性能改进和错误修复中获益. 虽然有些用户会在设备连接到未计量的连接时启用后台更新, 但其他用户可能需要提醒才能安装更新. 应用内更新是 Google Play 核心库的一项功能, 可提示活跃用户更新你的应用*.

运行 Android 5.0(API 等级 21)或更高版本的设备支持应用内更新功能. 此外, 应用内更新仅支持 Android 移动设备, Android 平板电脑和 Chrome OS 设备.

- 应用内更新文档

应用内评论

Google Play 应用内评论 API 可让你提示用户提交 Play Store 评级和评论, 而无需离开你的应用或游戏.

一般来说, 应用内评论流程可在用户使用应用的整个过程中随时触发. 在流程中, 用户可以使用 1-5 星系统对你的应用进行评分, 并添加可选评论. 一旦提交, 评论将被发送到 Play Store 并最终显示出来.

*为保护用户隐私并避免 API 被滥用, 你的应用应严格遵守有关何时请求应用内评论和评论提示的设计的规定.

- 应用内评论文档

可观察性 👀

在竞争日益激烈的应用生态系统中, 要获得良好的用户体验, 首先要确保应用没有错误. 确保应用无错误的最佳方法之一是在问题出现时立即发现并知道如何着手解决. 使用 Android Vitals 来确定应用中崩溃和响应速度问题最多的区域. 然后, 利用 Firebase Crashlytics 中的自定义崩溃报告获取更多有关根本原因的详细信息, 以便有效地排除故障.

工具

• 谷歌分析


• Android Vitals


• Firebase Crashlytics


• Firebase 性能监控

辅助功能

辅助功能是软件设计和构建中的一项重要功能, 除了改善用户体验外, 还能让有辅助功能需求的人使用应用. 这一概念旨在改善的不能包括: 有视力问题, 色盲, 听力问题, 灵敏性问题和认知障碍等.

考虑因素:

• 增加文字的可视性(颜色对比度, 可调整文字大小)


• 使用大而简单的控件


• 描述每个UI元素

更多详情请查看辅助功能 - Android 文档

安全性 🔐

在开发保护设备完整性, 数据安全性和用户信任的应用时, 安全性是我们必须考虑的一个方面, 甚至是最重要的方面.

• 使用凭证管理器登录用户: 凭据管理器 是一个 Jetpack API, 在一个单一的 API 中支持多种登录方法, 如用户名和密码, 密码匙和联合登录解决方案(如谷歌登录), 从而简化了开发人员的集成.


• 加密敏感数据和文件: 使用EncryptedSharedPreferences 和EncryptedFile.


• 应用基于签名的权限: 在你可控制的应用之间共享数据时, 使用基于签名的权限.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.myapp">

    <permission android:name="my_custom_permission_name"

                android:protectionLevel="signature" />

• 不要将密钥, 令牌或应用配置所需的敏感数据直接放在项目库中的文件或类中. 请使用local.properties.


• 实施 SSL Pinning: 使用 SSL Pinning 进一步确保应用与远程服务器之间的通信安全. 这有助于防止中间人攻击, 并确保只与拥有特定 SSL 证书的受信任服务器进行通信.

res/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>

<network-security-config>

    <domain-config>

        <domain includeSubdomains="true">example.com</domain>

        <pin-set expiration="2018-01-01">

            <pin digest="SHA-256">ReplaceWithYourPin</pin>

            <!-- backup pin -->

            <pin digest="SHA-256">ReplaceWithYourPin</pin>

        </pin-set>

    </domain-config>

</network-security-config>

• 实施运行时应用自我保护(RASP): 这是一种在运行时保护应用免受攻击和漏洞的安全技术. RASP 的工作原理是监控应用的行为, 并检测可能预示攻击的可疑活动:
  
  
  
  
  • 代码混淆.
  
  
  • 根检测.
  
  
  • 篡改/应用钩子检测.
  
  
  • 防止逆向工程攻击.
  
  
  • 反调试技术.
  
  
  • 虚拟环境检测
  
  
  • 应用行为的运行时分析.
  
  
  
  

想了解更多信息, 请查看安卓应用中的运行时应用自我保护技术(RASP). 还有一些 Android 安全指南.

版本目录

Gradle 提供了一种集中管理项目依赖关系的标准方式, 叫做版本目录; 它在 7.0 版中被试验性地引入, 并在 7.4 版中正式发布.

优点:

• 对于每个目录, Gradle 都会生成类型安全的访问器, 这样你就可以在 IDE 中通过自动补全轻松添加依赖关系.


• 每个目录对构建过程中的所有项目都是可见的. 它是声明依赖项版本的中心位置, 并确保该版本的变更适用于每个子项目.


• 目录可以声明 dependency bundles, 即通常一起使用的 "依赖关系组".


• 目录可以将依赖项的组和名称与其实际版本分开, 而使用版本引用, 这样就可以在多个依赖项之间共享一个版本声明.

请查看更多信息

Secret Gradle 插件

Google 强烈建议不要将 API key 输入版本控制系统. 相反, 你应该将其存储在本地的 secrets.properties 文件中, 该文件位于项目的根目录下, 但不在版本控制范围内, 然后使用 Secrets Gradle Plugin for Android 来读取 API 密钥.

日志

日志是一种软件工具, 用于记录程序的执行信息, 重要事件, 错误调试信息以及其他有助于诊断问题或了解程序运行情况的信息. 日志可配置为将信息写入不同位置, 如日志文件, 控制台, 数据库, 或将信息发送到日志记录服务器.

• Klogging


• Timber

Linter / 静态代码分析器

Linter 是一种编程工具, 用于分析程序源代码, 查找代码中的潜在问题或错误. 这些问题可能是语法问题, 代码风格不当, 缺乏文档, 安全问题等, 它们会对代码的质量和可维护性产生影响.

• Android Lint


• Detekt ⏫


• Ktlint ⏫


• Konsist

Google Play Instant

Google Play Instant 使本地应用和游戏无需安装即可在运行 Android 5.0(API 等级 21)或更高版本的设备上启动. 你可以使用 Android Studio 构建这类体验, 称为即时应用和即时游戏. 通过允许用户运行即时应用或即时游戏(即提供即时体验), 你可以提高应用或游戏的发现率, 从而有助于吸引更多活跃用户或安装.

• Google Play Instant 概述

新设计中心

安卓团队提供了一个新的设计中心, 帮助创建美观, 现代的安卓应用, 这是一个集中的地方, 可以了解安卓在多种形态因素方面的设计.

点击查看新的设计中心

人工智能

Gemini和PalM 2是谷歌开发的两个最先进的人工智能(AI)模型, 它们将改变安卓应用开发的格局. 这些模型具有一系列优势, 将推动应用的效率, 用户体验和创新.

• Gemini


• PalM 2

人工智能编码助手工具

Studio Bot

Studio Bot 是你的 Android 开发编码助手. 它是 Android Studio 中的一种对话体验, 通过回答 Android 开发问题帮助你提高工作效率. 它采用人工智能技术, 能够理解自然语言, 因此你可以用简单的英语提出开发问题. Studio Bot 可以帮助 Android 开发人员生成代码, 查找相关资源, 学习最佳实践并节省时间.

Studio Bot

Github Copilot

GitHub Copilot 是一个人工智能配对程序员. 你可以使用 GitHub Copilot 直接在编辑器中获取整行或整个函数的建议.

Amazon CodeWhisperer

这是亚马逊的一项服务, 可根据你当前代码的上下文生成代码建议. 它能帮助你编写更高效, 更安全的代码, 并发现新的 API 和工具.

Kotlin Multiplatform 🖥 📱⌚️ 🥰 🚀

最后, 同样重要的是, Kotlin Multiplatform 🎉 是本年度最引人注目的新产品. 它是跨平台应用开发领域的有力竞争者. 虽然我们的主要重点可能是 Android 应用开发, 但 Kotlin Multiplatform 为我们提供了利用 KMP 框架制作完全本地 Android 应用的灵活性. 这一战略举措不仅为我们的项目提供了未来保障, 还为我们提供了必要的基础架构, 以便在我们选择多平台环境时实现无缝过渡. 🚀

如果你想深入了解 Kotlin Multiplatform, 我想与你分享这几篇文章. 在这些文章中, 探讨了这项技术的现状及其对现代软件开发的影响:

• Kotlin Multiplatform - 是这样的


• Kotlin Multiplatform的现状 - 2023年网络研讨会

前言

在 Java 开发的征途中，我们时常与重复代码不期而遇。这些重复代码不仅让项目显得笨重，更增加了维护成本。幸运的是，Java 8 带来了函数式编程的春风，以 Function 接口为代表的一系列新特性，为我们提供了破除这一难题的利剑。本文将以一个实际应用场景为例，即使用 Java 8 的函数式编程特性来重构数据有效性断言逻辑，展示如何通过 SFunction（基于 Java 8 的 Lambda 表达式封装）减少代码重复，从而提升代码的优雅性和可维护性。

背景故事：数据校验的烦恼

想象一下，在一个复杂的业务系统中，我们可能需要频繁地验证数据库中某个字段值是否有效，是否符合预期值。传统的做法可能充斥着大量相似的查询逻辑，每次都需要手动构建查询条件、执行查询并处理结果，这样的代码既冗长又难以维护。

例如以下两个验证用户 ID 和部门 ID 是否有效的方法，虽然简单，但每次需要校验不同实体或不同条件时，就需要复制粘贴并做相应修改，导致代码库中充满了大量雷同的校验逻辑，给维护带来了困扰。

// 判断用户 ID 是否有效

public void checkUserExistence(String userId) {

    User user = userDao.findById(userId);

    if (user == null) {

        throw new RuntimeException("用户ID无效");

    }

}



// 判断部门 ID 是否有效

public void checkDeptExistence(String deptId) {

    Dept dept = deptDao.findById(deptId);

    if (dept == null) {

        throw new RuntimeException("部门ID无效");

    }   

}

Java 8 的魔法棒：函数式接口

Java 8 引入了函数式接口的概念，其中 Function<T, R> 是最基础的代表，它接受一个类型 T 的输入，返回类型 R 的结果。而在 MyBatis Plus 等框架中常用的 SFunction 是对 Lambda 表达式的进一步封装，使得我们可以更加灵活地操作实体类的属性。

实战演练：重构断言方法

下面的 ensureColumnValueValid 方法正是利用了函数式接口的魅力，实现了对任意实体类指定列值的有效性断言：

/**

 * 确认数据库字段值有效（通用）

 * 

 * @param <V> 待验证值的类型

 * @param valueToCheck 待验证的值

 * @param columnExtractor 实体类属性提取函数

 * @param queryExecutor 单条数据查询执行器

 * @param errorMessage 异常提示信息模板

 */

public static <T, R, V> void ensureColumnValueValid(V valueToCheck, SFunction<T, R> columnExtractor, SFunction<LambdaQueryWrapper<T>, T> queryExecutor, String errorMessage) {

    if (valueToCheck == null) return;

    

    LambdaQueryWrapper<T> wrapper = new LambdaQueryWrapper<>();

    wrapper.select(columnExtractor);

    wrapper.eq(columnExtractor, valueToCheck);

    wrapper.last("LIMIT 1");



    T entity = queryExecutor.apply(wrapper);

    R columnValue = columnExtractor.apply(entity);

    if (entity == null || columnValue == null)

        throw new DataValidationException(String.format(errorMessage, valueToCheck));

}

这个方法接受一个待验证的值、一个实体类属性提取函数、一个单行数据查询执行器和一个异常信息模板作为参数。通过这四个参数，不仅能够进行针对特定属性的有效性检查，而且还能生成具有一致性的异常信息。

对比分析

使用 Function 改造前

// 判断用户 ID 是否有效

public void checkUserExistence(String userId) {

    User user = userDao.findById(userId);

    if (user == null) {

        throw new RuntimeException("用户ID无效");

    }

}



// 判断部门 ID 是否有效

public void checkDeptExistence(String deptId) {

    Dept dept = deptDao.findById(deptId);

    if (dept == null) {

        throw new RuntimeException("部门ID无效");

    }   

}

使用 Function 改造后

public void assignTaskToUser(AddOrderDTO dto) {

    ensureColumnValueValid(dto.getUserId(), User::getId, userDao::getOne, "用户ID无效");

    ensureColumnValueValid(dto.getDeptId(), Dept::getId, deptDao::getOne, "部门ID无效");    

    ensureColumnValueValid(dto.getCustomerId(), Customer::getId, customerDao::getOne, "客户ID无效");

    ensureColumnValueValid(dto.getDeptId(), Dept::getId, deptDao::getOne, "部门ID无效");

    ensureColumnValueValid(dto.getSupplieId(), Supplie::getId, supplierDao::getOne, "供应商ID无效");



    // 现在可以确信客户存在

    Customer cus = customerDao.findById(dto.getCustomerId());     

    

    // 创建订单的逻辑...

}

对比上述两段代码，我们发现后者不仅大幅减少了代码量，而且通过函数式编程，表达出更为清晰的逻辑意图，可读性和可维护性都有所提高。

优点

举一反三：拓展校验逻辑的边界

通过上述的实践，我们见识到了函数式编程在简化数据校验逻辑方面的威力。但这只是冰山一角，我们可以根据不同的业务场景，继续扩展和完善校验逻辑，实现更多样化的校验需求。以下两个示例展示了如何在原有基础上进一步深化，实现更复杂的数据比较和验证功能。

断言指定列值等于预期值

首先，考虑一个场景：除了验证数据的存在性，我们还需确认查询到的某列值是否与预期值相符。这在验证用户角色、状态变更等场景中尤为常见。为此，我们设计了 validateColumnValueMatchesExpected 方法：

/**

 * 验证查询结果中指定列的值是否与预期值匹配

 *

 * @param <T>             实体类型

 * @param <R>             目标列值的类型

 * @param <C>             查询条件列值的类型

 * @param targetColumn    目标列的提取函数，用于获取想要验证的列值

 * @param expectedValue   期望的列值

 * @param conditionColumn 条件列的提取函数，用于设置查询条件

 * @param conditionValue  条件列对应的值

 * @param queryMethod     执行查询的方法引用，返回单个实体对象

 * @param errorMessage    验证失败时抛出异常的错误信息模板

 * @throws RuntimeException 当查询结果中目标列的值与预期值不匹配时抛出异常

 */

public static <T, R, C> void validateColumnValueMatchesExpected(

      SFunction<T, R> targetColumn, R expectedValue,

      SFunction<T, C> conditionColumn, C conditionValue,

      SFunction<LambdaQueryWrapper<T>, T> queryMethod,

      String errorMessage) {



   // 创建查询包装器，选择目标列并设置查询条件

   LambdaQueryWrapper<T> wrapper = new LambdaQueryWrapper<>();

   wrapper.select(targetColumn);

   wrapper.eq(conditionColumn, conditionValue);



   // 执行查询方法

   T one = queryMethod.apply(wrapper);

   // 如果查询结果为空，则直接返回，视为验证通过（或忽略）

   if (one == null) return;



   // 获取查询结果中目标列的实际值

   R actualValue = targetColumn.apply(one);



   // 比较实际值与预期值是否匹配，这里假设notMatch是一个自定义方法用于比较不匹配情况

   boolean doesNotMatch = notMatch(actualValue, expectedValue);

   if (doesNotMatch) {

      // 若不匹配，则根据错误信息模板抛出异常

      throw new RuntimeException(String.format(errorMessage, expectedValue, actualValue));

   }

}



// 假设的辅助方法，用于比较值是否不匹配，根据实际需要实现

private static <R> boolean notMatch(R actual, R expected) {

    // 示例简单实现为不相等判断，实际情况可能更复杂

    return !Objects.equals(actual, expected);

}

这个方法允许我们指定一个查询目标列（targetColumn）、预期值（expectedValue）、查询条件列（conditionColumn）及其对应的条件值（conditionValue），并提供一个查询方法（queryMethod）来执行查询。如果查询到的列值与预期不符，则抛出异常，错误信息通过 errorMessage 参数定制。

应用场景：
例如在一个权限管理系统中，当需要更新用户角色时，系统需要确保当前用户的角色在更新前是 “普通用户”，才能将其升级为 “管理员”。此场景下，可以使用 validateColumnValueMatchesExpected 方法来验证用户当前的角色是否确实为“普通用户”。

// 当用户角色不是 “普通用户” 时抛异常

validateColumnValueMatchesExpected(User::getRoleType, "普通用户", User::getId, userId, userMapper::getOne, "用户角色不是普通用户，无法升级为管理员！");

断言指定值位于期望值列表内

进一步，某些情况下我们需要验证查询结果中的某一列值是否属于一个预设的值集合。例如，验证用户角色是否合法。为此，我们创建了 validateColumnValueMatchesExpectedList 方法：

/**

 * 验证查询结果中指定列的值是否位于预期值列表内

 *

 * @param <T>             实体类型

 * @param <R>             目标列值的类型

 * @param <C>             查询条件列值的类型

 * @param targetColumn    目标列的提取函数，用于获取想要验证的列值

 * @param expectedValueList 期望值的列表

 * @param conditionColumn 条件列的提取函数，用于设置查询条件

 * @param conditionValue  条件列对应的值

 * @param queryMethod     执行查询的方法引用，返回单个实体对象

 * @param errorMessage    验证失败时抛出异常的错误信息模板

 * @throws RuntimeException 当查询结果中目标列的值不在预期值列表内时抛出异常

 */

public static <T, R, C> void validateColumnValueInExpectedList(

        SFunction<T, R> targetColumn, List<R> expectedValueList,

        SFunction<T, C> conditionColumn, C conditionValue,

        SFunction<LambdaQueryWrapper<T>, T> queryMethod,

        String errorMessage) {



    LambdaQueryWrapper<T> wrapper = new LambdaQueryWrapper<>();

    wrapper.select(targetColumn);

    wrapper.eq(conditionColumn, conditionValue);



    T one = queryMethod.apply(wrapper);

    if (one == null) return;



    R actualValue = targetColumn.apply(one);

    if (actualValue == null) throw new RuntimeException("列查询结果为空");



    if (!expectedValueList.contains(actualValue)) {        

        throw new RuntimeException(errorMessage);

    }

}

这个方法接受一个目标列（targetColumn）、一个预期值列表（expectedValueList）、查询条件列（conditionColumn）及其条件值（conditionValue），同样需要一个查询方法（queryMethod）。如果查询到的列值不在预期值列表中，则触发异常。

应用场景： 在一个电商平台的订单处理流程中，系统需要验证订单状态是否处于可取消的状态列表里（如 “待支付”、“待发货”）才允许用户取消订单。此时，validateColumnValueInExpectedList 方法能有效确保操作的合法性。

// 假设 OrderStatusEnum 枚举了所有可能的订单状态，cancelableStatuses 包含可取消的状态

List<String> cancelableStatuses = Arrays.asList(OrderStatusEnum.WAITING_PAYMENT.getValue(), OrderStatusEnum.WAITING_DELIVERY.getValue());



// 验证订单状态是否在可取消状态列表内

validateColumnValueInExpectedList(Order::getStatus, cancelableStatuses, Order::getOrderId, orderId, orderMapper::selectOne, "订单当前状态不允许取消！");

通过这两个扩展方法，我们不仅巩固了函数式编程在减少代码重复、提升代码灵活性方面的优势，还进一步证明了通过抽象和泛型设计，可以轻松应对各种复杂的业务校验需求，使代码更加贴近业务逻辑，易于理解和维护。

核心优势

函数式编程的力量

通过这个实例，我们见证了函数式编程在简化代码、提高抽象层次上的强大能力。在 Java 8 及之后的版本中，拥抱函数式编程思想，不仅能够使我们的代码更加简洁、灵活，还能在一定程度上促进代码的正确性和可测试性。因此，无论是日常开发还是系统设计，都值得我们深入探索和应用这一现代编程范式，让代码如魔法般优雅而高效。

大家好，我是日拱一卒的攻城师不浪，致力于技术与艺术的融合。这是2024年输出的第39/100篇文章。

可视化&Webgis交流群+V：brown_7778（备注来意）

前言

最近在开发智慧城市的项目，产品想让同事基于Cesium开发一个测量工具，需要支持长度测量、面积测量以及三角测量，但同事挠了挠头，说做这个有点费劲，还反问了产品：做这功能有啥意义？

产品经理：测量工具在智慧城市中发挥了重要的作用，通过对城市道路，地形，建筑物，场地等的精确测量，确保施工规划能够与现实场景精准吻合，节省人力以及施工成本。

对桥梁、隧道、地铁、管网等城市基础设施进行结构健康监测，安装传感器，实时监测结构体震动以及结构体偏移量等数据，确保设施安全运行并能够提前发现问题，防患于未然。

开发同事听完，觉得还蛮有道理，看向我：浪浪，如何应对？

我：呐，拿走直接抄！下班请吃铜锅涮肉！

三角测量

先来了解下三角测量：是一种基于三角形几何原理的测量方法，用于确定未知点的位置。它通过已知基线（即两个已知点之间的距离）和从这两个已知点测量的角度，计算出目标点的精确位置。

例如在建筑施工中，工程师使用三角测量法来测量楼体高度、桥梁等结构的位置和角度，确保建筑的精准施工。

代码解析

接下来看下这个MeasureTool类，主要包含以下功能：

坐标转换功能

• transformWGS84ToCartesian: 将WGS84坐标（经度、纬度、高度）转换为Cesium中的三维笛卡尔坐标。


• transformCartesianToWGS84: 将Cesium的三维笛卡尔坐标转换为WGS84坐标。

核心代码：

transformWGS84ToCartesian(position, alt) {

   return position

     ? Cesium.Cartesian3.fromDegrees(

         position.lng || position.lon,

         position.lat,

         (position.alt = alt || position.alt),

         Cesium.Ellipsoid.WGS84

       )

     : Cesium.Cartesian3.ZERO;

 }



transformCartesianToWGS84(cartesian) {

   var ellipsoid = Cesium.Ellipsoid.WGS84;

   var cartographic = ellipsoid.cartesianToCartographic(cartesian);

   return {

     lng: Cesium.Math.toDegrees(cartographic.longitude),

     lat: Cesium.Math.toDegrees(cartographic.latitude),

     alt: cartographic.height,

   };

 }

Cesium的Cartesian3.fromDegrees和Ellipsoid.WGS84.cartesianToCartographic方法分别用于实现经纬度与笛卡尔坐标系的相互转换。

拾取功能

拾取功能允许通过屏幕像素坐标来获取3D场景中的位置。主要依赖scene.pickPosition和scene.globe.pick来实现拾取。

核心代码：

getCatesian3FromPX(px) {

   var picks = this._viewer.scene.drillPick(px);

   var cartesian = this._viewer.scene.pickPosition(px);

   if (!cartesian) {

      var ray = this._viewer.scene.camera.getPickRay(px);

      cartesian = this._viewer.scene.globe.pick(ray, this._viewer.scene);

   }

   return cartesian;

}

这里首先尝试从3D模型或地形上拾取位置，如果未能拾取到模型或地形上的点，则尝试通过射线投射到椭球体表面。

距离测量

通过拾取点并记录每个点的坐标，计算相邻两个点的距离，并显示在Cesium场景中。通过ScreenSpaceEventHandler来捕获鼠标点击和移动事件。

核心代码：

drawLineMeasureGraphics(options = {}) {

   var positions = [];

   var _handlers = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);

   _handlers.setInputAction(function (movement) {

     var cartesian = this.getCatesian3FromPX(movement.position);

     positions.push(cartesian);

   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

   

   _handlers.setInputAction(function (movement) {

     var cartesian = this.getCatesian3FromPX(movement.endPosition);

     positions.pop();

     positions.push(cartesian);

   }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);



   _handlers.setInputAction(function () {

     _handlers.destroy();

   }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

}

测距的基本思想是通过鼠标点击获取多个点的坐标，然后计算每两个相邻点的距离。

面积测量

面积测量通过计算多个点围成的多边形的面积，基于Cesium的PolygonHierarchy实现多边形绘制。

核心代码：

getPositionsArea(positions) {

   let ellipsoid = Cesium.Ellipsoid.WGS84;

   let area = 0;

   positions.push(positions[0]); // 闭合多边形

   for (let i = 1; i < positions.length; i++) {

      let p1 = ellipsoid.cartographicToCartesian(this.transformWGS84ToCartographic(positions[i - 1]));

      let p2 = ellipsoid.cartographicToCartesian(this.transformWGS84ToCartographic(positions[i]));

      area += p1.x * p2.y - p2.x * p1.y;

   }

   return Math.abs(area) / 2.0;

}

这里通过一个简单的多边形面积公式（叉乘）来计算笛卡尔坐标下的面积。

三角测量

三角测量通过拾取三个点，计算它们之间的直线距离、水平距离以及高度差，构建一个三角形并在场景中显示这些信息。

核心代码：

drawTrianglesMeasureGraphics(options = {}) {

   var _positions = [];

   var _handler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);

   _handler.setInputAction(function (movement) {

      var position = this.getCatesian3FromPX(movement.position);

      _positions.push(position);

      if (_positions.length === 3) _handler.destroy();

   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

}

该方法核心思想是获取三个点的坐标，通过高度差来构建水平线和垂线，然后显示相应的距离和高度差信息。

使用

封装好，之后，使用起来就非常简单了。

import MeasureTool from "@/utils/cesiumCtrl/measure.js";

const measure = new MeasureTool(viewer);

**

 * 测距

 */

const onLineMeasure = () => {

  measure.drawLineMeasureGraphics({

    clampToGround: true,

    callback: (e) => {

      console.log("----", e);

    },

  });

};

/**

 * 测面积

 */

const onAreaMeasure = () => {

  measure.drawAreaMeasureGraphics({

    clampToGround: true,

    callback: () => {},

  });

};

/**

 * 三角量测

 */

const onTrianglesMeasure = () => {

  measure.drawTrianglesMeasureGraphics({

    callback: () => {},

  });

};

最后

这些测量工具都是依赖于Cesium提供的坐标转换、拾取以及事件处理机制，核心思路是通过ScreenSpaceEventHandler捕捉鼠标事件，获取坐标点，并通过几何算法计算距离、面积和高度。

【完整源码地址】：github.com/tingyuxuan2…

如果认为有帮助，希望可以给我们一个免费的star，激励我们持续开源更多代码。

如果想系统学习Cesium，可以看下作者的Cesium系列教程《Cesium从入门到实战》，将Cesium的知识点进行串联，让不了解Cesium的小伙伴拥有一个完整的学习路线，学完后直接上手做项目，+作者：brown_7778（备注来意）了解课程细节。

另外有需要进可视化&Webgis交流群可以加我：brown_7778（备注来意），也欢迎数字孪生可视化领域的交流合作。

小王最近接到了一个重要的需求，要求在现有系统上实现离线地图功能，并根据不同的经纬度在地图上显示相应的标记（marks）。老板承诺，如果小王能够顺利完成这个任务，他的年终奖就有着落了。

为了不辜负老板的期望并确保自己能够拿到年终奖，小王开始了马不停蹄的开发工作。他查阅了大量文档，研究了各种离线地图解决方案，并一一尝试。经过48小时的连续奋战，凭借着顽强的毅力和专业的技术能力，小王终于成功完成了需求。

他在系统中集成了离线地图，并实现了根据经纬度显示不同区域标记的功能。每个标记都能准确地反映地理位置的信息，系统的用户体验得到了极大的提升。小王的心中充满了成就感和对未来奖励的期待。

然而，天有不测风云。当小王准备向老板汇报工作成果时，却得知一个令人震惊的消息：老板因涉嫌某些违法行为（爬取不当得利）被逮捕了，公司也陷入了一片混乱。年终奖的承诺随之泡汤，甚至连公司未来的发展都蒙上了一层阴影。

尽管如此，小王并没有因此而气馁。这次通过技术让老板成功的获得了编制，他深知只有不断技术的积累和经验的增长才能更好的保护老板。

1.离线地图

首先需要怎么做呢，你需要一个地图瓦片生成器(爬取谷歌、高德、百度等各个平台的地图瓦片，其实就是一张张缩小的图片，这里爬取可以用各种技术手段，但是违法偶，老板就是这么进去的)，有个工具推荐：

链接：pan.baidu.com/s/1nflY8-KL…
提取码：yqey
下载解压打开下面的文件

打开了界面就长这样

可以调整瓦片样式

下载速度龟慢，建议开启代理，因为瓦片等级越高数量越多，需要下载的包越大，这里建议下载到11-16级别，根据自己需求
下载完瓦片会保存在自己定义的文件夹，这里不建议放在c盘,会生成以下文件

使用一个文件服务去启动瓦片额静态服务，可以使用http-server
安装http-server

yarn add http-server -g

cd到下载的mapabc目录下

http-server roadmap

本地可以这么做上线后需要使用nginx代理这个静态服务

server {

    listen 80;

    server_name yourdomain.com; # 替换为你的域名或服务器 IP



    root /var/www/myapp/public; # 设置根目录

    index index.html; # 设置默认文件



    location / {

        try_files $uri $uri/ =404;

    }



    # 配置访问 roadmap 目录下的地图瓦片

        location ^~/roloadmap/{

            alias /home/d5000/iot/web/roloadmap/;

            autoindex on;  # 如果你想列出目录内容，可以开启这个选项

        }



    # 配置其他静态文件的访问（可选）

    location /static/ {

        alias /var/www/myapp/public/static/;

    }



    # 其他配置，例如反向代理到应用服务器等

    # location /api/ {

    #     proxy_pass http://localhost:3000;

    #     proxy_set_header Host $host;

    #     proxy_set_header X-Real-IP $remote_addr;

    #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    #     proxy_set_header X-Forwarded-Proto $scheme;

    # }

}

配置完重启一下ngix即可
对于如何将瓦片结合成一张地图并在vue2中使用，这里采用vueLeaflet,它是在leaflet基础上进行封装的

这个插件需要安装一系列包

yarn add leaflet vue2-leaflet leaflet.markercluster

<l-tile-layer url="http://192.168.88.211:8080/{z}/{x}/{y}.png" ></l-tile-layer>

这里的url就是上面启动的服务，包括端口和ip，要能访问到瓦片

编写代码很简单

<template>

  <div class="map">

    <div class="search">

      <map-search @input_val="inputVal" @select_val="selectVal" />

    </div>

    <div class="map_container">

      <l-map

        :zoom="zoom"

        :center="center"

        :max-bounds="bounds"

        :min-zoom="9"

        :max-zoom="15"

        :key="`${center[0]}-${center[1]}-${zoom}`"

        style="height: 100vh; width: 100%"

      >

        <l-tile-layer

          url="http://192.168.88.211:8080/{z}/{x}/{y}.png"

        ></l-tile-layer>

        <l-marker-cluster>

          <l-marker

          v-for="(marker, index) in markers"

          :key="index"

          :lat-lng="marker.latlng"

          :icon="customIcon"

          @click="handleMarkerClick(marker)"

        >

          <l-tooltip :offset="tooltipOffset">

            <div class="popup-content">

              <p>设备名称: {{ marker.regionName }}</p>

              <p>主线设备数量: {{ marker.endNum }}</p>

              <p>边缘设备数量: {{ marker.edgNum }}</p>

            </div>

          </l-tooltip>

        </l-marker>

        </l-marker-cluster>

      

      </l-map>

    </div>

  </div>

</template>



<script>

import { LMap, LTileLayer, LMarker, LPopup, LTooltip, LMarkerCluster  } from "vue2-leaflet";

import mapSearch from "./search.vue";

import "leaflet/dist/leaflet.css";

import L from "leaflet";

// import geojsonData from "./city.json"; // 确保这个路径是正确的

import geoRegionData from "./equip.json"; // 确保这个路径是正确的



// 移除默认的图标路径

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({

  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),

  iconUrl: require("leaflet/dist/images/marker-icon.png"),

  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),

});



export default {

  name: "Map",

  components: {

    LMap,

    LTileLayer,

    LMarker,

    LPopup,

    LTooltip,

    mapSearch,

    LMarkerCluster

  },

  data() {

    return {

      zoom: 9,

      center: [32.0617, 118.7636], // 江苏省的中心坐标

      bounds: [

        [30.7, 116.3],

        [35.1, 122.3],

      ], // 江苏省的地理边界

      markers: geoRegionData,

      customIcon: L.icon({

        iconUrl: require("./equip.png"), // 自定义图标的路径

        iconSize: [21, 27], // 图标大小

        iconAnchor: [12, 41], // 图标锚点

        popupAnchor: [1, -34], // 弹出框相对于图标的锚点

        shadowSize: [41, 41], // 阴影大小（如果有）

        shadowAnchor: [12, 41], // 阴影锚点（如果有）

      }),

      tooltipOffset: L.point(10, 10), // 调整偏移值

    };

  },

  methods: {

    inputVal(val) {

      // 处理输入值变化

      this.center = val;

      this.zoom = 15;

    },

    selectVal(val) {

      // 处理选择值变化

      this.center = val;

      this.zoom = 15;

    },

    handleMarkerClick(marker) {

      this.center = marker.latlng;

      this.zoom = 15;

    },

  },

};

</script>



<style scoped lang="less">

@import "~leaflet/dist/leaflet.css";

@import "~leaflet.markercluster/dist/MarkerCluster.css";

@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";

.map {

  width: 100%;

  height: 100%;

  position: relative;



  .search {

    position: absolute;

    z-index: 1000;

    left: 20px;

    top: 10px;

    padding: 10px; /* 设置内边距 */

  }

}



.popup-content {

  font-family: Arial, sans-serif;

  text-align: left;

}



.popup-content h3 {

  margin: 0;

  font-size: 16px;

  font-weight: bold;

}



.popup-content p {

  margin: 4px 0;

  font-size: 14px;

}



/deep/.leaflet-control {

  display: none !important; /* 隐藏默认控件 */

}

/deep/.leaflet-control-zoom {

  display: none !important; /* 隐藏默认控件 */

}

</style>

这里使用遇到一个坑，需要切换地图中心center，需要给l-map绑定一个key="${center[0]}-${center[1]}-${zoom}"，不然每次切换第一次会失败，第二次才能成功

可以给行政区添加范围，这里需要geojson数据，可以在阿里云数据平台上获取
通过组件加载即可

<l-geo-json :geojson="geojson"></l-geo-json>

效果如下

以上方法，不建议使用，如果是商业使用，不建议使用，不然容易被告侵权，最好能是使用官方合法的地图api，例如谷歌、百度、腾讯、高德，这里我使用高德api给兄弟们们展示一下

2.高德在线地图

2.1首先需要在高德的开放平台申请一个账号

创建一个项目，如下，我们需要使用到这个key和密钥，这里如果是公司使用可以使用公司的信息注册一个账号，公司的账号权限高于个人，具体区别如下参看官网
developer.amap.com/api/faq/acc…

2.2如何在框架中使用

因为不想在创建一个react应用了，这里还是用vue2演示，vue2需要下载一个高德提供的npm包

yarn add @amap/amap-jsapi-loader

编写代码

<template>

    <div class="map">

        <div class="serach">

            <map-search @share_id="shareId" @input_val="inputVal" @select_val="selectVal" @change_theme="changeTheme" />

        </div>

        <div class="map_container" id="container"></div>

    </div>

</template>

<script>

import AMapLoader from "@amap/amap-jsapi-loader";

import mapSearch from "./search.vue";

import cityJson from "../../assets/area.json";

window._AMapSecurityConfig = {

//这里是高德开放平台创建项目时生成的密钥

    securityJsCode: "xxxx",

};

export default {

    name: "mapContainer",

    components: { mapSearch },

    mixins: [],

    props: {},

    data() {

        return {

            map: null,

            autoOptions: {

                input: "",

            },

            auto: null,

            AMap: null,

            placeSearch: null,

            searchPlaceInput: "",

            polygons: [],

            positions: [],

            //地图样式配置

            inintMapStyleConfig: {

                //设置地图容器id

                viewMode: "3D", //是否为3D地图模式

                zoom: 15, //初始化地图级别

                rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动

                pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动

                mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式

                center: [118.796877, 32.060255], //初始化地图中心点位置

            },

            //地图配置

            mapConfig: {

                key: "xxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填

                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

                plugins: [

                    "AMap.AutoComplete",

                    "AMap.PlaceSearch",

                    "AMap.Geocoder",

                    "AMap.DistrictSearch",

                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等

            },

            // 实例化DistrictSearch配置

            districtSearchOpt: {

                subdistrict: 1, //获取边界不需要返回下级行政区

                extensions: "all", //返回行政区边界坐标组等具体信息

            },

            //这里是mark中的设置

            icon: {

                type: "image",

                image: require("../../assets/equip.png"),

                size: [15, 21],

                anchor: "bottom-center",

                fitZoom: [14, 20], // Adjust the fitZoom range for scaling

                scaleFactor: 2, // Zoom scale factor

                maxScale: 2, // Maximum scale

                minScale: 1 // Minimum scale

            }

        };

    },





    created() {

        this.initMap();

    },



    methods: {

        //初始化地图

        async initMap() {

            this.AMap = await AMapLoader.load(this.mapConfig);

            this.map = new AMap.Map("container", this.inintMapStyleConfig);

            //根据地理位置查询经纬度

            this.positions = await Promise.all(cityJson.map(async item => {

                try {

                    const dot = await this.queryGeocodes(item.cityName, this.AMap);

                    return {

                        ...item,

                        dot: dot

                    };

                } catch (error) {



                }

            }));



            //poi查询

            this.addMarker();

            //显示安徽省的区域

            this.drawBounds("安徽省");



        },



        //查询地理位置

        async queryGeocodes(newValue, AMap) {

            return new Promise((resolve, reject) => {

                //加载行政区划插件

                const geocoder = new AMap.Geocoder({

                    // 指定返回详细地址信息，默认值为true

                    extensions: 'all'

                });

                // 使用地址进行地理编码

                geocoder.getLocation(newValue, (status, result) => {

                    if (status === 'complete' && result.geocodes.length) {

                        const geocode = result.geocodes[0];

                        const latitude = geocode.location.lat;

                        const longitude = geocode.location.lng;

                        resolve([longitude, latitude]);

                    } else {

                        reject('无法获取该地址的经纬度');

                    }

                });

            });

        },

        //结合输入提示进行POI搜索

        shareId(val) {

            this.autoOptions.input = val;

        },

        //根据设备搜索

        inputVal(val) {

            if (val?.length === 0) {

                //poi查询

                this.addMarker();

                //显示安徽省

                this.drawBounds("安徽省");

                return;

            }

            var position = val

            this.icon.size = [12, 18]

            this.map.setCenter(position)

            this.queryPoI()

            this.map.setZoom(12, true, 1);

        },

        //修改主题

        changeTheme(val) {

            const styleName = "amap://styles/" + val;

            this.map.setMapStyle(styleName);

        },

        //区域搜索

        selectVal(val) {

            if (val && val.length > 0) {

                let vals = val[val?.length - 1];

                vals = vals.replace(/\s+/g, '');

                this.queryPoI()

                this.placeSearch.search(vals);

                this.drawBounds(vals);

                this.map.setZoom(15, true, 1);

            }

        },



        //添加marker

        addMarker() {

            const icon = this.icon

            let layer = new this.AMap.LabelsLayer({

                zooms: [3, 20],

                zIndex: 1000,

                collision: false,

            });

            // 将图层添加到地图

            this.map.add(layer);

            // 普通点

            let markers = [];

            this.positions.forEach((item) => {

                const content = `

                <div class="custom-info-window">

                    <div class="info-window-header"><b>${item.cityName}</b></div>

                    <div class="info-window-body">

                        <div>边设备数 : ${item.edgNum} 台</div>

                        <div>端设备数 : ${item.endNum} 台</div>

                    </div>

                </div>

            `;

                let labelMarker = new AMap.LabelMarker({

                    position: item.dot,

                    icon: icon,

                    rank: 1, //避让优先级

                });

                const infoWindow = new AMap.InfoWindow({

                    content: content, //传入字符串拼接的 DOM 元素

                    anchor: "top-left",

                });

                labelMarker.on('mouseover', () => {

                    infoWindow.open(this.map, item.dot);

                });



                labelMarker.on('mouseout', () => {

                    infoWindow.close();

                });

                labelMarker.on('click', () => {

                    this.map.setCenter(item.dot)

                    this.queryPoI()

                    this.map.setZoom(15, true, 1);

                })

                markers.push(labelMarker);

            });

            // 一次性将海量点添加到图层

            layer.add(markers);

        },



        //POI查询

        queryPoI() {

            this.auto = new this.AMap.AutoComplete(this.autoOptions);

            this.placeSearch = new this.AMap.PlaceSearch({

                map: this.map,

            }); //构造地点查询类

            this.auto.on("select", this.select);



            this.addMarker();

        },

        //选择数据

        select(e) {

            this.placeSearch.setCity(e.poi.adcode);

            this.placeSearch.search(e.poi.name); //关键字查询查询

            this.map.setZoom(15, true, 1);

        },



        // 行政区边界绘制

        drawBounds(newValue) {

            //加载行政区划插件

            if (!this.district) {

                this.map.plugin(["AMap.DistrictSearch"], () => {

                    this.district = new AMap.DistrictSearch(this.districtSearchOpt);

                });

            }

            //行政区查询

            this.district.search(newValue, (_status, result) => {

                if (Object.keys(result).length === 0) {

                    this.$message.warning("未查询到该地区数据");

                    return

                }

                if (this.polygons != null) {

                    this.map.remove(this.polygons); //清除上次结果

                    this.polygons = [];

                }

                //绘制行政区划

                result?.districtList[0]?.boundaries?.length > 0 &&

                    result.districtList[0].boundaries.forEach((item) => {

                        let polygon = new AMap.Polygon({

                            strokeWeight: 1,

                            path: item,

                            fillOpacity: 0.1,

                            fillColor: "#22886f",

                            strokeColor: "#22886f",

                        });

                        this.polygons.push(polygon);



                    });

                this.map.add(this.polygons);

                this.map.setFitView(this.polygons); //视口自适应



            });

        },

    },

};

</script>

<style lang="less" scoped>

.map {

    width: 100%;

    height: 100%;



    position: relative;



    .map_container {

        width: 100%;

        height: 100%;

    }



    .serach {

        position: absolute;

        z-index: 33;

        left: 20px;

        top: 10px;

    }

}

</style>

<style>

//去除高德的logo

.amap-logo {

    right: 0 !important;

    left: auto !important;

    display: none !important;

}



.amap-copyright {

    right: 70px !important;

    left: auto !important;

    opacity: 0 !important;

}



/* 自定义 infoWindow 样式 */

.custom-info-window {

    font-family: Arial, sans-serif;

    padding: 10px;

    border-radius: 8px;

    background-color: #ffffff;

    max-width: 250px;

}

</style>

在子组件中构建查询

<template>

  <div class="box">

    <div class="input_area">

      <el-input placeholder="请输入设备名称" :id="search_id" v-model="input" size="mini" class="input_item" />

      <img src="../../assets/input.png" alt="" class="img_logo" />

      <span class="el-icon-search search" @click="searchMap"></span>

    </div>

    <div class="select_area">

      <el-cascader :options="options" size="mini" placeholder="选择地域查询" :show-all-levels="false" :props="cityProps"

        clearable v-model="cityVal" @change="selectCity"></el-cascader>

    </div>

    <div class="date_area">

      <el-select v-model="themeValue" placeholder="请选择地图主题" size="mini" @change="changeTheme">

        <el-option v-for="item in themeOptions" :key="item.value" :label="item.label" :value="item.value">

        </el-option>

      </el-select>

    </div>

  </div>

</template>

<script>

import cityRegionData from "../../assets/area"

import cityJson from "../../assets/city.json";

export default {

  name: "search",

  components: {},

  mixins: [],

  props: {},

  data() {

    return {

      search_id: "searchId",

      input: "",

      options: cityRegionData,

      cityProps: {

        children: "children",

        label: "business_name",

        value: "business_name",

        checkStrictly: true

      },

      cityVal: "",

      themeOptions: [

        { label: "标准", value: "normal" },

        { label: "幻影黑", value: "dark" },

        { label: "月光银", value: "light" },

        { label: "远山黛", value: "whitesmoke" },

        { label: "草色青", value: "fresh" },

        { label: "雅士灰", value: "grey" },

        { label: "涂鸦", value: "graffiti" },

        { label: "马卡龙", value: "macaron" },

        { label: "靛青蓝", value: "blue" },

        { label: "极夜蓝", value: "darkblue" },

        { label: "酱籽", value: "wine" },

      ],

      themeValue: ""

    };

  },

  computed: {},

  watch: {},

  mounted() {

    this.sendId();

  },

  methods: {

    sendId() {

      this.$emit("share_id", this.search_id);

    },

    searchMap() {

      console.log(this.input,'ssss');

      if (!this.input) {

        this.$emit("input_val", []);

        return

      }

      let val = cityJson.find(item => item.equipName === this.input)

      if (val) {

        this.$emit("input_val", val.dot);

        return

      }



      this.$message.warning("未查询到该设备,请输入正确的设备名称");

    },

    selectCity() {

      this.$emit("select_val", this.cityVal);

    },

    changeTheme(val) {

      this.$emit("change_theme", val);

    }



  },

};

</script>

<style lang="less" scoped>

.box {

  display: flex;



  .input_area {

    position: relative;

    width: 170px;

    height: 50px;

    display: flex;

    align-items: center;



    .input_item {

      width: 100%;



      /deep/ .el-input__inner {

        padding-left: 30px !important;

      }

    }



    .img_logo {

      position: absolute;

      left: 5px;

      top: 50%;

      transform: translateY(-50%);

      width: 20px;

      height: 20px;

      margin-right: 10px;

    }



    span {

      position: absolute;

      right: 10px;

      top: 50%;

      transform: translateY(-50%);

      font-size: 16px;

      color: #ccc;

      cursor: pointer;

    }

  }



  .select_area {

    width: 150px;

    display: flex;

    align-items: center;

    height: 50px;

    margin-left: 10px;

  }



  .date_area {

    width: 150px;

    display: flex;

    align-items: center;

    height: 50px;

    margin-left: 10px;

  }

}

</style>

效果如下

1.画点建筑模型

添加光照，开启阴影

//开启renderer阴影

  this.renderer.shadowMap.enabled = true;

this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;



 //设置环境光

  const light = new THREE.AmbientLight(0xffffff, 0.6); // soft white light

this.scene.add(light);



 //夜晚天空蓝色，假设成蓝色的平行光

  const dirLight = new THREE.DirectionalLight(0x0000ff, 3);

   dirLight.position.set(50, 50, 50);

  this.scene.add(dirLight);   

平行光设置阴影

//开启阴影

 dirLight.castShadow = true;

 //阴影相机范围

dirLight.shadow.camera.top = 100;

dirLight.shadow.camera.bottom = -100;

dirLight.shadow.camera.left = -100;

dirLight.shadow.camera.right = 100;

//阴影影相机远近

dirLight.shadow.camera.near = 1;

dirLight.shadow.camera.far = 200;

//阴影贴图大小

dirLight.shadow.mapSize.set(1024, 1024);

• 平行光的阴影相机跟正交相机一样，因为平行光的光线是平行的，就跟视线是平行一样，切割出合适的阴影视角范围，用于计算阴影。


• shadow.mapSize设置阴影贴图的宽度和高度，值越高，阴影的质量越好，但要花费计算时间更多。

增加建筑

//添加一个平面

const pg = new THREE.PlaneGeometry(100, 100);

//一定要用受光材质才有阴影效果

          const pm = new THREE.MeshStandardMaterial({

            color: new THREE.Color('gray'),

            transparent: true,//开启透明

            side: THREE.FrontSide//只有渲染前面

          });

          const plane = new THREE.Mesh(pg, pm);

          plane.rotateX(-Math.PI * 0.5);

          plane.receiveShadow = true;//平面接收阴影

          this.scene.add(plane);



          //随机生成建筑

          this.geometries = [];

          const helper = new THREE.Object3D();

          for (let i = 0; i < 100; i++) {

            const h = Math.round(Math.random() * 15) + 5;

            const x = Math.round(Math.random() * 50);

            const y = Math.round(Math.random() * 50);

            helper.position.set((x % 2 ? -1 : 1) * x, h * 0.5, (y % 2 ? -1 : 1) * y);

            const geometry = new THREE.BoxGeometry(5, h, 5);

            helper.updateWorldMatrix(true, false);

            geometry.applyMatrix4(helper.matrixWorld);

            this.geometries.push(geometry);

          }

          //长方体合成一个形状

          const mergedGeometry = BufferGeometryUtils.mergeGeometries(this.geometries, false);

          //建筑贴图

          const texture = new THREE.TextureLoader().load('assets/image.jpg');

          texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

          const material = new THREE.MeshStandardMaterial({ map: texture,transparent: true });

          const cube = new THREE.Mesh(mergedGeometry, material);

          //形状产生阴影

          cube.castShadow = true;

          //形状接收阴影

          cube.receiveShadow = true;

          this.scene.add(cube);

效果就是很多高楼大厦的样子，为什么楼顶有窗？别在意这些细节，有的人就喜欢开天窗呢~

2.搞个雷达扩散和扫描特效

改变建筑材质shader，计算建筑的俯视uv

material.onBeforeCompile = (shader, render) => {

            this.shaders.push(shader);

            //范围大小

            shader.uniforms.uSize = { value: 50 };

            shader.uniforms.uTime = { value: 0 };

            //修改顶点着色器

            shader.vertexShader = shader.vertexShader.replace(

              'void main() {',

              ` uniform float uSize;

              varying vec2 vUv;

              void main() {`

            );

            shader.vertexShader = shader.vertexShader.replace(

              '#include <fog_vertex>',

              `#include <fog_vertex>

              //计算相对于原点的俯视uv

                      vUv=position.xz/uSize;`

            );

            //修改片元着色器

            shader.fragmentShader = shader.fragmentShader.replace(

              'void main() {',

              `varying vec2 vUv;

                uniform float uTime;

                void main() {`

            );

            shader.fragmentShader = shader.fragmentShader.replace(

              '#include <dithering_fragment>',

              `#include <dithering_fragment>

              //渐变颜色叠加

                  gl_FragColor.rgb=gl_FragColor.rgb+mix(vec3(0,0.5,0.5),vec3(1,1,0),vUv.y);`

            );

          };

然后你将同样的onBeforeCompile函数赋值给平面的时候，没有对应的效果。

因为平面没有z，只有xy,而且经过了-90度旋转后，坐标位置也要对应反转,由此可以得出平面的uv计算公式

vUv=vec2(position.x,-position.y)/uSize;

至此，建筑和平面的俯视uv一致了。

雷达扩散特效

• 雷达扩散就是一段渐变的环，随着时间扩大。


• 顶点着色器不变，改一下片元着色器，增加扩散环颜色uColor,对应shader.uniforms也要添加

shader.uniforms.uColor = { value: new THREE.Color('#00FFFF') };



 const fragmentShader1 = `varying vec2 vUv;

                uniform float uTime;

                uniform vec3 uColor;

                uniform float uSize;

                void main() {`;

          const fragmentShader2 = `#include <dithering_fragment>

              //计算与中心的距离

            float d=length(vUv);            

                  if(d >= uTime&&d<=uTime+ 0.1) {

                  //扩散圈

                    gl_FragColor.rgb = gl_FragColor.rgb+mix(uColor,gl_FragColor.rgb,1.0-(d-uTime)*10.0 )*0.5  ;                    

                  }`;

         

shader.fragmentShader = shader.fragmentShader.replace('void main() {', fragmentShader1);

shader.fragmentShader = shader.fragmentShader.replace(

              '#include <dithering_fragment>',

              fragmentShader2); 

   

   //改变shader的时间变量，动起来

  animateAction() {

          if (this.shaders?.length) {

            this.shaders.forEach((shader) => {

              shader.uniforms.uTime.value += 0.005;

              if (shader.uniforms.uTime.value >= 1) {

                shader.uniforms.uTime.value = 0;

              }

            });

          }

        }

噔噔噔噔，完成啦！是立体化的雷达扩散，看起来很酷的样子。

雷达扫描特效

跟上面雷达扩散差不多，只要修改一下片元着色器

• 雷达扫描是通过扇形渐变形成的，还要随着时间旋转角度,shaderToy参考链接

  const fragmentShader1 = `varying vec2 vUv;

                uniform float uTime;

                uniform vec3 uColor;

                uniform float uSize;

                //旋转角度矩阵

                mat2 rotate2d(float angle)

                {

                    return mat2(cos(angle), - sin(angle),

                                sin(angle), cos(angle));

                }

                //雷达扫描渐变扇形

                float vertical_line(in vec2 uv)

                {

                    if (uv.y > 0.0 && length(uv) < 1.2)

                    {

                        float theta = mod(180.0 * atan(uv.y, uv.x)/3.14, 360.0);

                        float gradient = clamp(1.0-theta/90.0,0.0,1.0);

                        return 0.5 * gradient;

                    }

                    return 0.0;

                }

                void main() {`;

                

                

          const fragmentShader2 = `#include <dithering_fragment> 

            mat2 rotation_matrix = rotate2d(- uTime*PI*2.0);  

    //将雷达扫描扇形渐变混合到颜色中

    gl_FragColor.rgb= mix( gl_FragColor.rgb, uColor, vertical_line(rotation_matrix * vUv)); `;

GitHub地址

https://github.com/xiaolidan00/my-earth

效果图

版本："particles.js": "^2.0.0"

npm i particles.js

Vue2版本

组件代码：src/App.vue

<template>

  <div class="particles-js-box">

    <div id="particles-js"></div>

  </div>

</template>



<script>

  import particlesJs from "particles.js";

  import particlesConfig from "./assets/particles.json";

  export default {

    data() {

      return {};

    },

    mounted() {

      this.init();

    },

    methods: {

      init() {

        particlesJS("particles-js", particlesConfig);

        document.body.style.overflow = "hidden";

      },

    },

  };

</script>



<style scoped>

  .particles-js-box {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: -1;

  }

  #particles-js {

    background-color: #18688d;

    width: 100%;

    height: 100%;

  }

</style>

代码里的json数据：

目录：src/assets/particles.json

{

  "particles": {

    "number": {

      "value": 60,

      "density": {

        "enable": true,

        "value_area": 800

      }

    },

    "color": {

      "value": "#ddd"

    },

    "shape": {

      "type": "circle",

      "stroke": {

        "width": 0,

        "color": "#000000"

      },

      "polygon": {

        "nb_sides": 5

      },

      "image": {

        "src": "img/github.svg",

        "width": 100,

        "height": 100

      }

    },

    "opacity": {

      "value": 0.5,

      "random": false,

      "anim": {

        "enable": false,

        "speed": 1,

        "opacity_min": 0.1,

        "sync": false

      }

    },

    "size": {

      "value": 3,

      "random": true,

      "anim": {

        "enable": false,

        "speed": 40,

        "size_min": 0.1,

        "sync": false

      }

    },

    "line_linked": {

      "enable": true,

      "distance": 150,

      "color": "#ffffff",

      "opacity": 0.4,

      "width": 1

    },

    "move": {

      "enable": true,

      "speed": 4,

      "direction": "none",

      "random": false,

      "straight": false,

      "out_mode": "out",

      "bounce": false,

      "attract": {

        "enable": false,

        "rotateX": 100,

        "rotateY": 1200

      }

    }

  },

  "interactivity": {

    "detect_on": "Window",

    "events": {

      "onhover": {

        "enable": true,

        "mode": "grab"

      },

      "onclick": {

        "enable": true,

        "mode": "push"

      },

      "resize": true

    },

    "modes": {

      "grab": {

        "distance": 140,

        "line_linked": {

          "opacity": 1

        }

      },

      "bubble": {

        "distance": 400,

        "size": 40,

        "duration": 2,

        "opacity": 8,

        "speed": 3

      },

      "repulse": {

        "distance": 200,

        "duration": 0.4

      },

      "push": {

        "particles_nb": 4

      },

      "remove": {

        "particles_nb": 2

      }

    }

  },

  "retina_detect": true

}