软件名称：EasyVoice

操作系统支持：飞牛云fnOS

软件介绍： 在这个信息爆炸的时代，内容消费者们常常面临一个棘手的问题：如何高效地获取和消化大量文字信息。无论是想快速获取知识、提升学习效率，还是希望将创意转化为生动的声音，EasyVoice都能成为你的得力助手。

EasyVoice的出色功能

• 高质量语音输出：让文字活起来，享受自然流畅的聆听体验。
• 本地部署：通过Docker和Node.js一键安装，数据安全无忧，适合企业或开发者使用。
• 流式传输：无论文本有多长，都能立即播放，打破了传统转换工具的限制。

实用场景大揭秘

1. 听小说不停歇：将长篇小说一键转为有声书，即使在忙碌的工作日也能享受阅读的乐趣。
2. 配音创作自由：轻松为视频或演示文稿添加专业级语音，提升内容质量。
3. 学习效率翻倍：将笔记和教材转换为语音材料，在通勤路上也能高效学习。

cpolar内网穿透技术带来的便利 通过cpolar的内网穿透技术，用户可以轻松突破局域网限制，使EasyVoice在本地部署后依然能够方便地与外部服务互动。这对于需要在内部网络环境中使用该工具的开发者和企业来说，是一个巨大的优势。

总结 EasyVoice不仅仅是一款文本转语音软件，更是内容消费和创作方式的一次革命。无论你是渴望提升学习效率、还是希望赋予创意生动的声音，EasyVoice都能轻松满足你的需求。

如何在飞牛云fnOS中安装EasyVoice并实现内网穿透，请参考下面教程：

1. 环境准备

本例中在Windows系统使用VMware Workstation安装的fnOS虚拟机，系统版本为V0.8.41。如果不知道如何在虚拟机中安装，可以参考这篇文章：VMware中安装飞牛云（fnOS) NAS系统 如果您想要在x86架构的物理机中安装，可以访问飞牛私有云 fnOS官网下载镜像文件然后使用U盘写入镜像后，进入bios设置U盘启动后像装Windows系统一样安装即可。

EasyVoice项目地址：github.com/cosin2077/e…

启动fnOS系统后，能看到Web UI管理界面的地址：http://192.168.184.130:5666 在浏览器中打开：

2. Docker部署与运行

首先，点击Docker-Compose-新增项目：

在弹出的创建项目窗口中，填写项目名称：easyvoice（可自定义）：

点击路径后，在docke文件夹内新建一个名为EasyVoice的项目路径，点击确定：

然后点击创建 docke-compose.yml ，将下面的代码粘贴到输入框：

services:
  easyvoice:
    image: cosincox/easyvoice:latest
    restart: unless-stopped
    container_name: easyvoice
    ports:
      - "9549:3000"
    environment:
      - DEBUG=true
      - OPENAI_BASE_URL=https://openrouter.ai/api/v1/
    volumes:
      - ./audio:/app/audio

勾选创建项目后立即启动，点击确定，自动构建容器：

等待构建完成后，在容器中，能看到easyvoice已经正常启动了：

在浏览器中访问fnOS飞牛nas主机地址加端口号9549： http://192.168.184.130:9549 就能看到EasyVoice的Web UI管理界面了：

3. 简单使用测试

点击立即体验：

在跳转的文本转语音页面，我们可以在左侧手动输入文本或上传txt格式的文本文件来添加需要转换的内容：

而在右侧是对语音进行设置的选项，包括语言、性别、配音角色、语速、音量、音调等多种设置：

输入文字后，点击生成语音：

速度非常快，资源占用也很少，不需要什么性能就可以轻松生成语音：

生成的音频可以直接播放，也可以下载到本地：

再测试一下拖拽文件或点击上传一个txt格式小说试试：

随着需要转换成语音的文字字数增多，生成的时间也会增加：

等待转换结束后，可以看到，一个多小时的文本量也能正常转换成音频：

除了预设语音功能，EasyVoice目前还增加了实验性功能的AI推荐，可以通过AI将需要转换为语音的文字智能推荐不同的角色语音。如果想体验这个功能，我们可以在上边通过docker-compose创建容器时，在代码中的环境变量里添加需要调用的本地大模型地址(本例中的地址为ollama部署的主机IP+端口号)与要使用的模型名称即可:

实际测试后确实能分角色朗读，但并不会新增角色语音，也是调用预设语音中的角色进行转换。而且根据不同的模型能力，实际得到的结果也不相同，支持函数调用的模型似乎效果更好一些，还是可以期待后续的优化的。

4. 安装内网穿透

我们现在已经实现了在本地fnOS飞牛云NAS中部署了EasyVoice进行文本转语音，并能在在同一局域网内向其他人分享这个工具的链接在浏览器中进行体验了。但如果你想自己或是异地好友和同事也能远程使用你在本地飞牛云NAS中部署的EasyVoice服务该怎么办呢？很简单，只要安装一个cpolar内网穿透工具就能轻松实现远程访问内网主机中部署的服务了，节约成本，提高效率，接下来介绍一下如何安装cpolar内网穿透。

cpolar官网地址: www.cpolar.com

4.1 开启ssh连接安装cpolar

首先打开飞牛云NAS设置界面,开启ssh 连接,端口默认为22即可,开启后,我们就可以ssh 连接飞牛云NAS执行命令：

然后我们通过输入飞牛云NAS的IP地址ssh远程连接进去,因为fnOS是基于Linux 内核开发的,所以我们可以按照cpolar的Linux安装方法进行安装:

连接后执行下面cpolar Linux 安装命令：

sudo curl https://get.cpolar.sh | sh

再次输入飞牛云nas的密码确认后即可自动安装

安装完成后，执行下方命令查看cpolar服务状态：（如图所示即为正常启动）

sudo systemctl status cpolar

Cpolar安装和成功启动服务后，在浏览器上输入飞牛云主机IP加9200端口即:【http://localhost:9200】访问Cpolar管理界面，使用官网注册的账号登录,登录后即可看到配置界面,接下来在web界面配置即可：

4.2 创建公网地址

登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理——创建隧道：

• 隧道名称：可自定义，本例使用了: easyvoice 注意不要与已有的隧道名称重复
• 协议：http
• 本地地址：9549
• 域名类型：随机域名
• 地区：选择China Top

创建成功后,打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了两个公网地址，使用上面的任意一个公网地址在浏览器中访问就可以实现随时随地远程使用你在本地部署的EasyVoice来文本转语音了！

使用cpolar生成的公网地址，无需自己准备云服务器，无公网IP也能轻松搞定跨网络环境远程访问本地服务！

小结

为了方便演示，我们在上边的操作过程中使用cpolar生成的HTTP公网地址隧道，其公网地址是随机生成的。这种随机地址的优势在于建立速度快，可以立即使用。然而，它的缺点是网址是随机生成，这个地址在24小时内会发生随机变化，更适合于临时使用。

如果有长期使用本地飞牛云NAS中部署的EasyVoice文本转语音工具，或者异地访问与使用其他本地部署的服务的需求，但又不想每天重新配置公网地址，还想让公网地址好看又好记并体验更多功能与更快的带宽，那我推荐大家选择使用固定的二级子域名方式来配置公网地址。

5. 配置固定公网地址

接下来演示如何为EasyVoice文本转语音服务配置固定的HTTP公网地址，该地址不会变化，无需每天重复修改服务器地址。

配置固定http端口地址需要将cpolar升级到专业版套餐或以上。

登录cpolar官网，点击左侧的预留，选择保留二级子域名，设置一个二级子域名名称，点击保留,保留成功后复制保留的二级子域名名称：

保留成功后复制保留成功的二级子域名的名称： myeasyv，大家可以设置自己喜欢的名称。

返回Cpolar web UI管理界面，点击左侧仪表盘的隧道管理——隧道列表，找到所要配置的隧道：easyvoice，点击右侧的编辑：

修改隧道信息，将保留成功的二级子域名配置到隧道中

• 域名类型：选择二级子域名
• Sub Domain：填写保留成功的二级子域名：myeasyv

点击更新(注意,点击一次更新即可,不需要重复提交)

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名：

使用上面的任意一个固定的二级子域名公网地址在浏览器中访问，可以看到成功打开EasyVoice文本转语音的Web UI管理界面，现在开始就不用每天都更换随机公网地址来远程访问本地nas中部署的服务了。

同样可以使用AI推荐功能：

总结

在现代数字时代，随着智能语音技术的快速发展，文本转语音（TTS）工具在各类应用场景中发挥着重要作用。本文分享了如何在fnOS飞牛NAS中本地部署EasyVoice文本转语音工具，并结合cpolar内网穿透工具配置固定不变的二级子域名公网地址，实现随时随地远程访问本地部署服务。

通过本教程的完整部署，您已经成功构建了一个可远程访问的本地语音合成服务。该方案不仅解决了传统内网服务的访问限制问题，还通过容器化部署实现了服务的快速扩展和维护。在实际应用中，建议根据具体需求调整性能参数，例如增加GPU加速支持以提升语音合成速度。

在项目开发中，要问使用最多的终端命令是什么，那就是git相关的命令，对于最频繁操作的 git 命令，我在《Mac键指如飞攻略之终端alias配置》这篇文章里提到了使用 alias 来简化命令，使得对于频繁操作的提交命令如git commit、git push等整合成了一个命令，如：

gci msg // 暂存代码并提交到本地仓库

gcp msg // 暂存代码并提交到本地仓库同时推送到远程仓库

也就是说通过gci和gcp就可以实现本地代码的快速推动到远程的仓库，这篇文章里所做的只是对于 git 命令拼写的简化，也就是减少了对于提交代码操作所需要的输入 git 命令字符的数量。

但存在的痛点仍然还有：

• 经过alias后的git提交命令仍然需要键盘手输
• 提交的commit信息还是要手输

之前一直都没有太好的解决方式，直到发现GitHub Copilot更新后在代码管理工具里提供了使用 ai 生成commit信息后，以上的两个痛点才得到了解决。

经过一番探索，最终实现了，无需键盘字符输入无鼠标点击的全键盘操作提交代码，彻底抛弃提交代码命令，极大的提升代码提交的效率。

这里先附上最终实现的效果图：

可以看到整个提交代码的流程我都是没有输入任何命令的，完全都是使用快捷键来实现的，整个提交代码的操作非常的行云流水。其整个操作大致经过了如下四个步骤：

• 使用快捷键从资源管理器切换到源代码管理器
• 使用GitHub Copilot生成commit信息的快捷键
• 使用提交代码的快捷键
• 使用推送到远程仓库的快捷键

下面我就说下具体的实现步骤：

使用快捷键从资源管理器切换到源代码管理器

vscode 中活动侧边栏都有系统内置的快捷键，分别是

• 切换到资源管理器⌘ + ⇧ + e
• 切换到全局搜索⌘ + ⇧ + f
• 切换到源代码管理器⌘ + ⌃ + g
• 切换到扩展⌘ + ⇧ + x

在一个步骤，我就是从资源管理器的目录，使用切换源代码管理器的快捷键切换到源代码管理 tab，此时焦点聚焦在了源代码提交的输入框内。

使用GitHub Copilot生成commit信息的快捷键

使用⌘ + ⇧ + x切换到扩展，进入 vscode 扩展商店，搜索Copilot，安装GitHub Copilot，不需要配置，登录自己的github账号就行

安装完成后我们再使用⌘ + ⌃ + g来切换回源代码管理器，就可以看到在输入框的右侧多了一个小✨的小图标，点击后就会调用github copilot提供的智能生成commit信息功能：

当然点击生成 commit 信息不是我们想要的操作，会打断我们整个的无鼠标提交代码流程，这个命令默认是没有配置快捷键的，图上显示的快捷键是我配置后展示的，下面我们就为这个命令匹配快捷键。

打开 vscode 键盘快捷键配置（不知道怎么进入的，可以看我往期文章），搜索：github copilot，第三个就是我们的目标匹配结果，为其设置快捷键⌘ + ⌃ + m，之所以如此设置，是因为m代表了message的含义，表示我们使用这个快捷键来生成提交信息，⌘+⌃的修饰符组合，也不会与其他快捷键冲突，这个快捷键配置可以放心食用。

使用提交代码的快捷键

生成提交信息后，下一步就是将代码提交到远程仓库，土办法当然是点击源代码管理器搜索框下面的提交按钮，但是鼠标操作自然是我们所摒弃的，这个提交操作不需要额外的快捷键配置，直接使用 ⌘+enter就会提交到本地仓储。

使用推送到远程仓库的快捷键

完成了本地仓储的提交，下面一步就是提交到远程仓库，这一步骤 vscode 没有默认的快捷键，但是内置的源代码管理器却提供了相关的命令，所以我们只需要给给相关的命令绑定快捷键就行，同样的打开vscode 键盘快捷键配置，搜索推送，看到Git:推送这个命令就是我们想要的结果，设置快捷键⌘ + ⌃ + p。这样设置的原因是，p代表了push的含义，而且⌘ + ⌃的修饰符组合也和第二步骤保持了一致，使得整个操作的快捷键记都非常统一，且易于记忆。

总结

经过上述的四个步骤，我们就可以实现一次行云流水般的无鼠标点击的提交代码操作，从提交信息到推送到远程仓库全程键盘操作，几秒内完成。

若能熟练掌握这套快捷键，各位coder的提交代码的速度将无人能及。

FcDesigner 是一款基于Vue的开源低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

源码地址: Github | Gitee | 文档 | 在线演示

本项目采用 Vue 和 ElementPlus/ElementUI/AntDesignVue 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。

项目分为设计器 form-create-designer 和 渲染器 form-create，用户可以通过可视化界面快速高效地创建表单，并输出为JSON。并且通过加载JSON，渲染器可以渲染并输出相应的表单。

• @form-create/designer ElementPlus/ElementUI表单设计器 💻

• @form-create/antd-designer AntDesignVue表单设计器(Vue3) 💻

• @form-create/vant-designer Vant移动端表单设计器(Vue3) 📱

Element UI 版本表单设计器

本项目采用 Vue2.7 和 Element UI 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。演示站

安装

要开始使用 @form-create/designer，首先需要将其安装到您的项目中。可以通过 npm 安装：

npm install @form-create/designer@^1
npm install @form-create/element-ui@^2.7
npm install element-ui

如已安装旧版本渲染器，请执行以下命令更新至最新版：

npm update @form-create/element-ui@^2.7

请检查当前 Vue 版本，若版本低于 2.7，请执行以下升级命令：

npm update vue@^2.7

引入

Node.js 引入

对于 Node.js 项目，您需要通过 npm 安装相关依赖，并在您的项目中引入并配置它们。

import Vue from 'vue';
import FcDesigner from '@form-create/designer';
import ELEMENT from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 使用 Element UI
Vue.use(ELEMENT);
// 使用 form-create 和 designer
Vue.use(FcDesigner);
Vue.use(FcDesigner.formCreate);

CDN 引入

如果您希望通过 CDN 方式引入 FcDesigner，请确保先引入 Vue.js 和 Element UI。然后引入 @form-create/element-ui 和 @form-create/designer，并在 Vue 实例中进行配置。

<!-- 引入 Vue.js -->
<script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
<!-- 引入 Element UI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="https://unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer/dist/index.min.js"></script>
<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<script>
    Vue.use(FcDesigner);
    Vue.use(FcDesigner.formCreate);
    new Vue().$mount('#app');
</script>

使用

在 Vue 组件中，您可以像下面这样使用 fc-designer 组件：

<template>
    <fc-designer ref="designer" height="100vh" />
</template>

Element Plus版本表单设计器

@form-create/designer 支持 Vue 3 环境，以下是如何在 Vue 3 项目中安装和使用该库的指南。

演示站

安装

首先，安装 @form-create/designer 的 Vue 3 版本：

npm install @form-create/designer@^3
npm install @form-create/element-ui@^3
npm install element-plus

如已安装旧版本渲染器，请执行以下命令更新至最新版：

npm update @form-create/element-ui@^3

引入

Node.js 引入

对于使用 Node.js 的项目，按照以下步骤在您的 Vue 3 项目中引入并配置：

import { createApp } from 'vue';
import FcDesigner from '@form-create/designer';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// 创建 Vue 应用
const app = createApp(App);
// 使用 Element Plus 和 FcDesigner
app.use(ElementPlus);
app.use(FcDesigner);
app.use(FcDesigner.formCreate);
// 挂载应用
app.mount('#app');

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

<!-- 引入 Element Plus 样式 -->
<link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet" />
<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue"></script>
<!-- 引入 Element Plus -->
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script>
<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<script>
    const { createApp } = Vue;
    const app = createApp({});
    app.use(ElementPlus);
    app.use(FcDesigner);
    app.use(FcDesigner.formCreate);
    app.mount('#app');
</script>

使用

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

<template>
    <fc-designer ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此处获取设计器实例或进行其他操作
    const designer = ref(null);
</script>

AntDesignVue 版本PC端表单设计器

演示站

本项目采用 Vue3.0 和 Ant Design Vue 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。

安装

首先，安装 @form-create/antd-designer

npm install @form-create/antd-designer@^3
npm install @form-create/ant-design-vue@^3
npm install ant-design-vue

如已安装旧版本渲染器，请执行以下命令更新至最新版：

npm update @form-create/ant-design-vue@^3

引入

Node.js 引入

对于使用 Node.js 的项目，按照以下步骤在您的 Vue 3 项目中引入并配置：

import FcDesigner from '@form-create/antd-designer'
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
// 创建 Vue 应用
const app = createApp(App);
app.use(antd)
app.use(FcDesigner)
app.use(FcDesigner.formCreate)
// 挂载应用
app.mount('#app');

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4/dist/reset.css"></link>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"></link>
<!-- 引入 Vue 及所需组件 -->
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/ant-design-vue@4/dist/antd.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>


<!-- 引入 form-create 及 fcDesigner -->
<script src="https://unpkg.com/@form-create/ant-design-vue@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/antd-designer@^3/dist/index.umd.js"></script>


<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<!-- 挂载组件 -->
<script>
    // 创建 Vue 应用实例
    const app = Vue.createApp({});
    // 挂载 AntDesignVue
    app.use(antd);
    // 挂载 fcDesignerPro 组件
    app.use(FcDesigner);
    // 挂载 formCreate
    app.use(FcDesigner.formCreate);
    // 挂载 Vue 应用
    app.mount('#app');
</script>

使用

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

<template>
    <fc-designer ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此处获取设计器实例或进行其他操作
    const designer = ref(null);
</script>

移动端表单设计器

演示站

本项目采用 Vue3.0 和 ElementPlus 进行移动端页面构建，移动端使用的是vant4.0版本，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。

安装

首先，安装 @form-create/vant-designer

npm install @form-create/vant-designer@^3
npm install @form-create/element-ui@^3
npm install @form-create/vant@^3
npm install element-plus
npm install vant

如已安装旧版本渲染器，请执行以下命令更新至最新版：

npm update @form-create/element-ui@^3
npm update @form-create/vant@^3

引入

Node.js 引入

对于使用 Node.js 的项目，按照以下步骤在您的 Vue 3 项目中引入并配置：

import FcDesignerMobile from '@form-create/vant-designer'
import ELEMENT from 'element-plus';
import vant from 'vant';
import 'vant/lib/index.css';
import 'element-plus/dist/index.css';
// 创建 Vue 应用
const app = createApp(App);
app.use(ELEMENT)
app.use(vant)
app.use(FcDesignerMobile)
app.use(FcDesignerMobile.formCreate)
// 挂载应用
app.mount('#app');

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
<link rel="stylesheet" href="https://unpkg.com/vant@4/lib/index.css"/>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/vant@4/lib/vant.min.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant-designer@next/dist/index.umd.js"></script>
<div id="app">
    <fc-designer-mobile height="100vh"></fc-designer-mobile>
</div>
<script>
    const { createApp } = Vue;
    const app = createApp({});
    app.use(ElementPlus);
    app.use(vant);
    app.use(FcDesignerMobile);
    app.use(FcDesignerMobile.formCreate);
    app.mount('#app');
</script>

使用

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

<template>
    <fc-designer-mobile ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此处获取设计器实例或进行其他操作
    const designer = ref(null);
</script>

Cesium 轨迹巡航效果

话不多说，先上图！

在这篇文章中，我将分享如何使用 Cesium 实现一个动态的无人机巡航轨迹效果。通过该功能，我们可以模拟无人机沿着指定路径飞行，并实时展示其位置、速度、高度等信息。以下是功能的详细介绍和实现过程。

实现思路

1. 路径绘制：

   • • 使用 Cesium 的 ScreenSpaceEventHandler 捕获鼠标点击事件，获取路径点的坐标。。
   • 使用 PolylineGlowMaterialProperty 绘制动态路径，并通过 CallbackProperty 实现路径实时更新

2. 动态飞行：

   • • 使用 SampledPositionProperty 定义无人机的动态位置，设置路径点和时间点。
   • • 使用 VelocityOrientationProperty 计算无人机的方向，使其始终朝向飞行方向。

3. 状态更新：

   • 在飞行过程中，通过 Cesium 的 JulianDate 和 Cartesian3 获取无人机的实时位置。
   • 计算无人机的速度、高度、飞行距离等信息，并通过回调函数实时更新。

核心代码

以下是实现无人机巡航轨迹的核心代码片段：

1. 路径绘制

const positions = [];
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

// 鼠标左键点击添加路径点
handler.setInputAction(function (movement) {
  const cartesian = viewer.scene.pickPosition(movement.position);
  if (cartesian) {
    positions.push(cartesian);
    if (positions.length >= 2) {
      drawPolyline(positions);
    }
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

// 绘制路径
function drawPolyline(positions) {
  viewer.entities.add({
    polyline: {
      positions: new Cesium.CallbackProperty(() => positions, false),
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.1,
        color: Cesium.Color.YELLOW
      }),
      width: 10,
      clampToGround: true
    }
  });
}

2. 动态飞行

const sampledPosition = new Cesium.SampledPositionProperty();
const start = Cesium.JulianDate.fromDate(new Date());
const stop = Cesium.JulianDate.addSeconds(start, 60, new Cesium.JulianDate());

// 添加路径点和时间点
positions.forEach((position, index) => {
  const time = Cesium.JulianDate.addSeconds(start, index * 10, new Cesium.JulianDate());
  sampledPosition.addSample(time, position);
});

// 添加无人机模型
viewer.entities.add({
  position: sampledPosition,
  orientation: new Cesium.VelocityOrientationProperty(sampledPosition),
  model: {
    uri: "/GroundVehicle.glb",
    scale: 1.0
  }
});

// 设置时间范围
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 10;

3. 状态更新

function updateStatus(time) {
  const position = sampledPosition.getValue(time);
  const cartographic = Cesium.Cartographic.fromCartesian(position);
  const longitude = Cesium.Math.toDegrees(cartographic.longitude);
  const latitude = Cesium.Math.toDegrees(cartographic.latitude);
  const height = cartographic.height;

  console.log(`经度: ${longitude}, 纬度: ${latitude}, 高度: ${height}`);
}
viewer.clock.onTick.addEventListener(updateStatus);

完整代码

📄 dynamicObject.js

import core from "./Core.js";
import getPosition from "./getPosition.js";

/**
 * 创建浏览对象。
 * @constructor xp
 * @time 2022-12-25
 * @param {*} viewer
 * @param {*} cesium
 */
function dynamicObject(viewer, cesium) {
  this._viewer = viewer;
  this._cesium = cesium;
  this._core = new core();
  this._getPosition = new getPosition(this._viewer, this._cesium);
  this._entityFly = null;
}

/**
 * 这个方法用于创建浏览对象
 * @returns {Promise.<Object>} 返回一个Cesium的对象。
 *
 */
// var ploylinejl = {
//   polyline: {},
//   cameraRoll: null,
//   cameraPitch: null,
//   cameraPosition: null,
//   cameraHeading: null,
//   positions: [],
//   distance: [],
//   Totaltime: "",
//   dsq: null
// };
dynamicObject.prototype.executeFlycesium = function (method) {
  //设置浏览路径
  // var polylines = {};
  var _this = this;
  var PolyLinePrimitive = (function () {
    function execute(positions) {
      this.options = {
        polyline: {
          show: true,
          positions: [],
          material: new _this._cesium.PolylineGlowMaterialProperty({
            glowPower: 0.1,
            color: _this._cesium.Color.YELLOW
          }),
          width: 10,
          clampToGround: true
        }
      };
      this.positions = positions;
      this._init();
    }

    execute.prototype._init = function () {
      var _self = this;
      var _update = function () {
        return _self.positions;
      };
      //实时更新polyline.positions
      this.options.polyline.positions = new _this._cesium.CallbackProperty(
        _update,
        false
      );
      this.flycesium = _this._viewer.entities.add(this.options);
      _this.item = this.flycesium;
    };
    return execute;
  })();
  var handler = (this.handler = new _this._cesium.ScreenSpaceEventHandler(
    _this._viewer.scene.canvas
  ));
  var positions = [];
  // var flyceium = null;
  var distance = 0;
  var poly = undefined;
  var ploylinejl = {
    polyline: {},
    cameraRoll: null,
    cameraPitch: null,
    cameraPosition: null,
    cameraHeading: null,
    positions: [],
    distance: [],
    Totaltime: ""
  };
  //导入tool提示框
  var tooltip = this._core.CreateTooltip();
  //设置鼠标样式
  this._core.mouse(this._viewer.container, 1, window.SmartEarthRootUrl);
  handler.setInputAction(function (movement) {
    var cartesian = _this._getPosition.getMousePosition(movement);
    if (_this._core.getBrowser().pc === "pc" && positions.length == 0) {
      positions.push(cartesian.clone());
    }
    positions.push(cartesian);
    if (positions.length >= 2) {
      if (!_this._cesium.defined(poly)) {
        poly = new PolyLinePrimitive(positions);
      }
      distance = _this._core.getSpaceDistancem(positions, _this._cesium);
    }
  }, this._cesium.ScreenSpaceEventType.LEFT_CLICK);
  //鼠标移动
  handler.setInputAction(function (movement) {
    tooltip.showAt(movement.endPosition, "左键开始,右键结束！");
    var cartesian = _this._getPosition.getMousePosition(movement);
    if (positions.length >= 2) {
      if (!_this._cesium.defined(poly)) {
        poly = new PolyLinePrimitive(positions);
      } else {
        if (cartesian) {
          positions.pop();
          //cartesian.y += (1 + Math.random());
          positions.push(cartesian);
        }
      }
      distance = _this._core.getSpaceDistancem(positions, _this._cesium);
    }
  }, this._cesium.ScreenSpaceEventType.MOUSE_MOVE);
  //单击鼠标右键结束画线
  handler.setInputAction(function () {
    _this.end();
  }, this._cesium.ScreenSpaceEventType.RIGHT_CLICK);

  this.end = function (type) {
    handler.destroy();
    tooltip.show(false);
    //设置鼠标样式
    _this._core.mouse(_this._viewer.container, 0);

    _this.end = undefined;
    _this._viewer.entities.remove(_this.item);

    if (type === "cancel" || positions.length < 2) {
      return;
    }
    distance = _this._core.getSpaceDistancem(positions, _this._cesium);

    ploylinejl.polyline = poly;
    ploylinejl.positions = positions;
    ploylinejl.distance = parseFloat(distance);
    //转化成浏览对象
    _this.setFlycesium(ploylinejl, function (flyceium) {
      _this.flyceium = flyceium;
      _this.ploylinejl = ploylinejl;
      if (typeof method == "function") {
        method(flyceium);
      }
    });
  };
  return this;
};
/**
 * 设置获取浏览对象
 */
dynamicObject.prototype.setFlycesium = function (drawHelper, callback) {
  var _this = this;
  var coordinates = [];
  // var position = null;
  // var heading = null;
  // var pitch = null;
  // var roll = null;
  var maxHeight = 0;
  for (var i = 0; i < drawHelper.positions.length; i++) {
    var cartographic = _this._cesium.Cartographic.fromCartesian(
      drawHelper.positions[i]
    ); //世界坐标转地理坐标（弧度）
    var point = [
      (cartographic.longitude / Math.PI) * 180,
      (cartographic.latitude / Math.PI) * 180,
      cartographic.height
    ]; //地理坐标（弧度）转经纬度坐标
    //console.log(point);
    coordinates.push(point);
  }
  this._core.getPmfxPro(
    drawHelper.positions,
    25,
    0,
    _this._cesium,
    _this._viewer,
    data => {
      maxHeight = data.max;
      var time;
      time = (drawHelper.distance / 50).toFixed(1);
      var pathsData = {
        id: _this._core.getuid(),
        name: "新建路线",
        distance: drawHelper.distance,
        showPoint: false,
        showLine: true,
        showModel: true,
        isLoop: false,
        Totaltime: Math.round(time),
        speed: 50,
        height: (maxHeight + 200).toFixed(2),
        pitch: -20,
        range: 100,
        mode: 0,
        url: "/GroundVehicle.glb",
        geojson: {
          // orientation: {heading: heading, pitch: pitch, roll: roll},
          // position: position,
          geometry: { type: "LineString", coordinates: coordinates }
        }
      };
      callback && callback(pathsData);
    }
  );
};
/**
 * 开始浏览
 */
dynamicObject.prototype.Start = function (data, url, funs) {
  var _this = this;
  // var pathsData = data.geojson;
  if (!data.Totaltime) {
    data.Totaltime = 3000;
  }
  if (_this._entityFly) {
    _this.exit();
  }
  // _this._viewer.camera.setView({
  //     destination: pathsData.position,
  //     orientation: pathsData.orientation,
  // });
  fun = funs;
  setTimeout(function () {
    _this.executeFly3D(data, url);
  }, 200);
  return this;
};
var entityFly = null;
var entityModel = null;
//var start;
var fun = null;
var entityhd = {
  start: null,
  time: null,
  longitude: 0,
  latitude: 0,
  cameraHeight: 100,
  //timedifference: null,
  speed: 50,
  multiplier: 1,

  position: 0
};
// var stop;
var velocityVector, velocityVectorProperty, velocityOrientationProperty;
var AngleProperty, property;
var wheelAngle = 0;

/**
 * 播放路径动画
 * @param {Object} data 数据
 * @param {Object} data.geojson 路线数据
 * @param {Number} [data.lineHeight] 路线高度，默认贴地
 * @param {Boolean} [data.isLoop=false] 是否循环播放
 * @param {String} [url] 模型路径
 */
dynamicObject.prototype.executeFly3D = function (data, url) {
  var _this = this;
  var pathsData = data.geojson;
  velocityVector = new _this._cesium.Cartesian3();
  AngleProperty = new _this._cesium.SampledProperty(Number);
  property = new _this._cesium.SampledPositionProperty();

  if (pathsData && pathsData.geometry) {
    var positionA = pathsData.geometry.coordinates;
    var position = [];
    var position1 = [];
    if (positionA.length > 0) {
      for (var i = 0; i < positionA.length; i++) {
        var x = positionA[i][0];
        var y = positionA[i][1];
        var z = positionA[i][2];
        data.lineHeight !== void 0 && (z = data.lineHeight);
        position1.push(x, y, z);
        position.push({ x: x, y: y, z: z });
      }
    } else {
      return;
    }

    _this._viewer.clock.clockRange = data.isLoop
      ? _this._cesium.ClockRange.LOOP_STOP
      : _this._cesium.ClockRange.CLAMPED; //Loop at the end
    _this._viewer.clock.multiplier = data.multiplier || 1;
    _this._viewer.clock.canAnimate = false;
    _this._viewer.clock.shouldAnimate = true; //设置时间轴动态效果
    entityhd.distance = data.distance;
    entityhd.cameraHeight = data.height;
    entityhd.lineHeight = data.lineHeight;
    entityhd.pitch = data.pitch;
    entityhd.range = data.range;
    entityhd.speed = data.speed || 50;
    entityhd.Totaltime = data.distance / entityhd.speed;

    entityhd.start = _this._cesium.JulianDate.fromDate(new Date());
    entityhd.stop = _this._cesium.JulianDate.addSeconds(
      entityhd.start,
      entityhd.Totaltime,
      new _this._cesium.JulianDate()
    );
    //Make sure viewer is at the desired time.
    _this._viewer.clock.startTime = entityhd.start.clone();
    _this._viewer.clock.stopTime = entityhd.stop.clone();
    _this._viewer.clock.currentTime = entityhd.start.clone();

    var _position = _this.computeCirclularFlight(position);
    entityhd.position = _position;
    entityhd.degrees = position;
    velocityOrientationProperty = new _this._cesium.VelocityOrientationProperty(
      _position
    );

    var mode = {};
    if (url !== "") {
      mode = {
        show: _this._cesium.defaultValue(data.showModel, true),
        scale: _this._cesium.defaultValue(data.modelScale, 1),
        uri: url
      };
    } else {
      // const modelUrl = Cesium.buildModuleUrl(
      //   "Assets/GltfModels/CesiumAir/Cesium_Air.glb"
      // );
      mode = {
        show: _this._cesium.defaultValue(data.showModel, true),
        scale: _this._cesium.defaultValue(data.modelScale, 1)
        // uri: modelUrl
      };
    }
    if (data.modelData) {
      mode = _this._core.extend(mode, data.modelData);
    }
    changeFlyView = function () {};
    entityFly = _this._viewer.entities.add({
      //Set the entity availability to the same interval as the simulation time.
      availability: new _this._cesium.TimeIntervalCollection([
        new _this._cesium.TimeInterval({
          start: entityhd.start,
          stop: entityhd.stop
        })
      ]),
      position: _position,
      //Show the path as a pink line sampled in 1 second increments.
      polyline: {
        clampToGround: entityhd.lineHeight === void 0,
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(position1),
        show: _this._cesium.defaultValue(data.showLine, true),
        material: new _this._cesium.PolylineGlowMaterialProperty({
          glowPower: 0.1,
          color: _this._cesium.Color.YELLOW
        }),
        width: 10
      },
      label: {
        text: new _this._cesium.CallbackProperty(updateSpeedLabel, false),
        font: "20px sans-serif",
        showBackground: false,
        distanceDisplayCondition: new _this._cesium.DistanceDisplayCondition(
          0.0,
          100.0
        ),
        eyeOffset: new _this._cesium.Cartesian3(0, 3.5, 0)
      }
    });
    // console.log(_position);

    entityModel = _this._viewer.entities.add({
      availability: new _this._cesium.TimeIntervalCollection([
        new _this._cesium.TimeInterval({
          start: entityhd.start,
          stop: entityhd.stop
        })
      ]),
      position: _position,
      orientation: velocityOrientationProperty,
      point: {
        show: _this._cesium.defaultValue(data.showPoint, false),
        color: _this._cesium.Color.RED,
        outlineColor: _this._cesium.Color.WHITE,
        outlineWidth: 2,
        pixelSize: 10
      },
      model: mode,
      billboard: data.image,
      viewFrom:
        data.viewFrom || new _this._cesium.Cartesian3(500.0, 500.0, 500.0)
    });
    entitymodels = entityFly;
    _this._viewer.trackedEntity = entityModel;
    _this._entityFly = entityFly;

    data.mode && _this.changeFlyMode(data.mode);

    // setTimeout(function () {
    //     // _this._viewer.camera.zoomOut(500.0);//缩小地图，避免底图没有数据
    //     _this._viewer.camera.zoomOut(300.0);//缩小地图，避免底图没有数据
    // }, 100);
  } else {
    return;
  }

  function updateSpeedLabel(time) {
    //alert(time);
    //entityhd.time = time;
    // var de = entitymodels;
    // var camera = _this._viewer.camera;
    if (
      _this._viewer.clock.clockRange !== 2 &&
      Cesium.JulianDate.equals(
        _this._viewer.clock.currentTime,
        _this._viewer.clock.stopTime
      )
    ) {
      entityFly.label.text = "";
      _this.exit();
      if (fun != null && typeof fun === "function") {
        fun("end");
      }
      changeFlyView = function () {};
      return;
    }
    try {
      var position = entitymodels.position.getValue(
        _this._viewer.clock.currentTime
      );
      var cartographic = _this._cesium.Cartographic.fromCartesian(position);
      //经度
      entityhd.longitude = _this._cesium.Math.toDegrees(cartographic.longitude);
      //纬度
      entityhd.latitude = _this._cesium.Math.toDegrees(cartographic.latitude);
      if (entityhd.lineHeight === void 0) {
        let height1 = _this._viewer.scene.sampleHeight(cartographic, [
          entityModel,
          entitymodels
        ]);
        let height2 = _this._viewer.scene.globe.getHeight(cartographic);
        entityModel.position = _this._cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          height2 > height1 ? height2 : height1
        );
      }
    } catch (er) {
      console.log(er);
    }
    try {
      velocityVectorProperty.getValue(time, velocityVector);
      changeFlyView(time);
      var metersPerSecond = _this._cesium.Cartesian3.magnitude(velocityVector);
      var kmPerHour = Math.round(metersPerSecond * 3.6);
      kmPerHour += " km/h";
      //已漫游时间
      entityhd.time = _this._cesium.JulianDate.secondsDifference(
        time,
        entityhd.start
      );
      //已漫游比例
      entityhd.ratio = entityhd.time / entityhd.Totaltime;
      //已漫游距离
      entityhd.distanceTraveled = entityhd.ratio * entityhd.distance;
      //运行速度
      entityhd.speed = kmPerHour;
      //漫游高程
      entityhd.height = cartographic.height;
      //地面高程
      entityhd.globeHeight = _this._viewer.scene.globe.getHeight(cartographic);

      if (fun != null && typeof fun === "function") {
        fun(entityhd);
      }
    } catch (er) {
      console.log(er);
    }
    return "";
  }
};

// var hpr = new Cesium.HeadingPitchRoll();
var flyPosition;
// var Quaternion = new Cesium.Quaternion();
// var _heading = 0;
var entitymodels = null;

//改变视角
var changeFlyView;

function getHeading(time) {
  wheelAngle = AngleProperty.getValue(time);
  entityhd.heading = wheelAngle;
}

function getFlyPosition(position) {
  var cartographic = Cesium.Cartographic.fromCartesian(position);
  var lon = Cesium.Math.toDegrees(cartographic.longitude);
  var lat = Cesium.Math.toDegrees(cartographic.latitude);
  return Cesium.Cartesian3.fromDegrees(lon, lat, entityhd.cameraHeight || 100);
}

/**
 * 显示点
 */
dynamicObject.prototype.showPoint = function (isShow) {
  entityModel && entityModel.point && (entityModel.point.show = isShow);
};

/**
 * 显示线
 */
dynamicObject.prototype.showLine = function (isShow) {
  entityFly && entityFly.polyline && (entityFly.polyline.show = isShow);
};

/**
 * 显示模型
 */
dynamicObject.prototype.showModel = function (isShow) {
  entityModel && entityModel.model && (entityModel.model.show = isShow);
};

//飞行高度
dynamicObject.prototype.setFlyHeight = function (height) {
  entityhd.cameraHeight = height;
};

//飞行距离
dynamicObject.prototype.setFlyDistance = function (distance) {
  entityhd.range = distance;
};

//飞行俯仰角
dynamicObject.prototype.setFlyPitch = function (pitch) {
  entityhd.pitch = pitch;
};

//飞行模式
dynamicObject.prototype.changeFlyMode = function (index) {
  var _this = this;
  switch (index) {
    case 0:
      changeFlyView = function () {};
      _this.BindingModel(true);
      break;
    case 1:
      this.BindingModel(false);
      changeFlyView = function (time) {
        getHeading(time);
        _this.exeuteVisualAngle(
          _this._cesium.Math.toRadians(entityhd.heading),
          _this._cesium.Math.toRadians(entityhd.pitch),
          entityhd.range
        );
      };
      break;
    case 2:
      this.BindingModel(false);
      changeFlyView = function (time) {
        getHeading(time);
        flyPosition = _this._entityFly.position.getValue(
          _this._viewer.clock.currentTime
        );
        if (!flyPosition) return;
        flyPosition = getFlyPosition(flyPosition);
        _this._viewer.camera.setView({
          destination: flyPosition,
          orientation: {
            heading: _this._cesium.Math.toRadians(entityhd.heading),
            pitch: _this._cesium.Math.toRadians(-90),
            roll: 0.0
          }
        });
      };
      break;
  }
};

/**
 * 加速
 */
dynamicObject.prototype.faster = function () {
  this._viewer.animation.viewModel.faster();
};

/**
 * 减速
 */
dynamicObject.prototype.slower = function () {
  // 倍率减
  this._viewer.animation.viewModel.slower();
};

/**
 * 设置倍数
 */
dynamicObject.prototype.setMultiplier = function (multiplier) {
  this._viewer.clock.multiplier = parseFloat(multiplier);
};

/**
 * 是否暂停
 */
dynamicObject.prototype.isPause = function (isPause) {
  var clockViewModel = this._viewer.clockViewModel;
  clockViewModel.shouldAnimate = !isPause;
};

/**
 * 结束飞行
 */
dynamicObject.prototype.exit = function () {
  this.isPause(true);
  this._viewer.clock.multiplier = 1;
  this.executeSignout();
  this.BindingModel(false);
  this._viewer.entities.remove(entityFly);
  this._viewer.entities.remove(entityModel);
  entityFly = null;
  entityModel = null;
  this._entityFly = null;
};

//lable回调函数
dynamicObject.prototype.updateSpeedLabel = function () {
  //if (fun && typeof fun === 'function') {
  //    fun(_this._entityFly);
  //}
  //this.entityhd = {
  //    start: null,
  //    time: null
  //};
  //this.entityhd.time = time;
  //if (this.fun != null && typeof fun === 'function') {
  //    fun(_this._entityFly);
  //}
  //return "";
};

//添加时间位置样本
dynamicObject.prototype.computeCirclularFlight = function (position) {
  var _this = this;
  velocityVectorProperty = new _this._cesium.VelocityVectorProperty(
    property,
    false
  );
  var _time, time, _position, _position1;
  for (var i = 0; i < position.length; i++) {
    if (i === 0) {
      //起点
      time = _this._cesium.JulianDate.addSeconds(
        entityhd.start,
        0,
        new _this._cesium.JulianDate()
      );
      _position = _this._cesium.Cartesian3.fromDegrees(
        position[0].x,
        position[0].y,
        entityhd.lineHeight
      );

      property.addSample(time, _position);
      //计算两点方位角
      wheelAngle = _this._core.TwoPointAzimuth(
        position[0].x,
        position[0].y,
        position[1].x,
        position[1].y
      );
      AngleProperty.addSample(time, wheelAngle);
    }
    try {
      if (i > 0 && i != position.length - 1) {
        _position = new _this._cesium.Cartesian3(
          property._property._values[i * 3 - 3],
          property._property._values[i * 3 - 2],
          property._property._values[i * 3 - 1]
        );
        _position1 = _this._cesium.Cartesian3.fromDegrees(
          position[i].x,
          position[i].y,
          _this._cesium.defaultValue(entityhd.lineHeight, position[i].z)
        );

        var positions = [
          _this._cesium.Cartographic.fromCartesian(_position),
          _this._cesium.Cartographic.fromCartesian(_position1)
        ];
        var a = new _this._cesium.EllipsoidGeodesic(positions[0], positions[1]);
        var long = a.surfaceDistance;
        time = _this._cesium.JulianDate.addSeconds(
          property._property._times[i - 1],
          0.5,
          new _this._cesium.JulianDate()
        );
        _time = _this._cesium.JulianDate.addSeconds(
          property._property._times[i - 1],
          long / entityhd.speed,
          new _this._cesium.JulianDate()
        );

        property.addSample(_time, _position1);
        //计算两点方位角
        wheelAngle = _this._core.TwoPointAzimuth(
          position[i - 1].x,
          position[i - 1].y,
          position[i].x,
          position[i].y
        );
        AngleProperty.addSample(time, wheelAngle);
        AngleProperty.addSample(_time, wheelAngle);
      }
    } catch (e) {
      console.log(e);
    }
  }
  return property;
};
/**
 * 暂停浏览
 */
dynamicObject.prototype.executePauseFly3DPaths = function () {
  var clockViewModel = this._viewer.clockViewModel;
  if (clockViewModel.shouldAnimate) {
    clockViewModel.shouldAnimate = false;
  } else if (this._viewer.clockViewModel.canAnimate) {
    clockViewModel.shouldAnimate = true;
  }
};

/**
 * 添加对象
 */
dynamicObject.prototype.changeModel = function (url) {
  entityModel.model.uri = url;
};
//浏览方式飞向视点
/**
 * 获取视野点
 */
dynamicObject.prototype.PointView = function () {
  var originalCameraLocation = {
    position: Viewer.camera.position.clone(),
    orientation: {
      heading: Viewer.camera.heading,
      pitch: Viewer.camera.pitch,
      roll: Viewer.camera.roll
    }
  };
  return originalCameraLocation;
};
/**
 * 开始浏览。
 * @param {Paths}
 * @returns {Object} 返回一个json对象。
 */
dynamicObject.prototype.PlayPaths = function () {
  var that = this;
  setInterval(function () {
    viewer.camera.setView({
      // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
      // fromDegrees()方法，将经纬度和高程转换为世界坐标
      destination: that._cesium.Cartesian3.fromDegrees(117.48, 30.67, 15000.0),
      orientation: {
        // 指向
        heading: that._cesium.Math.toRadians(90, 0),
        // 视角
        pitch: that._cesium.Math.toRadians(-90),
        roll: 0.0
      }
    });
  }, 2000);
};
/**
 * 绑定模型
 * @param {binding} 是否绑定。
 */
dynamicObject.prototype.BindingModel = function (binding) {
  if (binding) {
    this._viewer.trackedEntity = entityModel;
  } else {
    this._viewer.trackedEntity = undefined;
    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
  }
};
/**
 * 改变视角
 * @returns {Object} 返回一个json对象。
 */
dynamicObject.prototype.exeuteVisualAngle = function (
  viewHeading,
  viewPitch,
  viewRange
) {
  var hpRange = { heading: null, pitch: null, range: null };
  hpRange.heading = viewHeading || this._cesium.Math.toRadians(90);
  hpRange.pitch = viewPitch || this._cesium.Math.toRadians(0);
  hpRange.range = viewRange || 1000;
  var center = this._entityFly.position.getValue(
    this._viewer.clock.currentTime
  );
  if (!center) return;
  center = getFlyPosition(center);
  var hpRanges = new this._cesium.HeadingPitchRange(
    hpRange.heading,
    hpRange.pitch,
    hpRange.range
  );
  //if (center) this._viewer.camera.lookAt(center, hpRange);
  this._viewer.camera.lookAt(center, hpRanges);
};
/**
 * 是否显示路线
 * @returns {Object} 返回一个json对象。
 */
dynamicObject.prototype.Pathshow = function (route) {
  this._entityFly.polyline.show = route;
};
/**
 * 是否显示点
 * @returns {Object} 返回一个json对象。
 */
dynamicObject.prototype.Pointshow = function (route) {
  entityModel._point.show = route;
};
/**
 * 是否显示模型
 * @returns {Object} 返回一个json对象。
 */
dynamicObject.prototype.Modelshow = function (route) {
  entityModel._model.show = route;
};
/**
 * 向前飞行漫游路径
 * @returns {Object} 返回一个json对象。
 */
dynamicObject.prototype.executePlayForwardFly3DPaths = function () {
  var clockViewModel = this._viewer.clockViewModel;
  var multiplier = clockViewModel.multiplier;
  if (multiplier < 0) {
    clockViewModel.multiplier = -multiplier;
  }
  clockViewModel.shouldAnimate = true;
};
/**
 * 向后飞行漫游路径
 */
dynamicObject.prototype.executePlayReverseFly3DPaths = function () {
  var clockViewModel = this._viewer.clockViewModel;
  var multiplier = clockViewModel.multiplier;
  if (multiplier > 0) {
    clockViewModel.multiplier = -multiplier;
  }
  clockViewModel.shouldAnimate = true;
};
/**
 * 退出飞行漫游路径
 */
dynamicObject.prototype.executeSignout = function () {
  var start = this._cesium.JulianDate.fromDate(new Date());
  this._viewer.clock.startTime = start.clone();
  var stop = this._cesium.JulianDate.addSeconds(
    start,
    86400,
    new this._cesium.JulianDate()
  );
  this._viewer.clock.stopTime = stop.clone();
  //this.cesiumViewer.entities.remove(this.entityFly);
};

/**
 * 结束当前操作
 */
dynamicObject.prototype.forceEndHanlder = function () {
  if (this.handler) {
    this.handler.destroy();
    this.handler = undefined;
  }
};
export default dynamicObject;

📄 Core.js

/**
 * 工具类
 * @constructor xp
 * @alias Core
 * @constructor
 *
 */
function Core () { }

//根据经纬度获取高度
Core.prototype.getHeightsFromLonLat = function (
  positions,
  Cesium,
  Viewer,
  callback
) {
  var camera = Viewer.camera;
  var heights = [];
  if (
    Viewer.scene &&
    Viewer.scene.terrainProvider &&
    Viewer.scene.terrainProvider._layers
  ) {
    //根据经纬度计算出地形高度。
    var promise = Cesium.sampleTerrainMostDetailed(
      Viewer.terrainProvider,
      positions
    );
    // var cameraHeight = camera.positionCartographic.height;
    Cesium.when(promise, function (updatedPositions) {
      updatedPositions.forEach(function (item) {
        heights.push(item.height);
      });
      if (typeof callback === "function") {
        callback(heights);
      }
    });
  } else {
    positions.forEach(function (p) {
      heights.push(Viewer.scene.globe.getHeight(p));
    });
    if (typeof callback === "function") {
      callback(heights);
    }
  }
};

/**
 * 创建鼠标Tooltip提示框。
 *
 * @param {*} [styleOrText] 提示框样式或文本内容
 * @param {String} [styleOrText.origin='center'] 对齐方式(center/top/bottom)
 * @param {String} [styleOrText.color='black'] 提示框颜色(black/white/yellow)
 * @param {String} [styleOrText.id=undefined] 提示框唯一id(可选)
 * @param {Object} position 显示位置
 * @param {Boolean} show 是否显示(如果为true，styleOrText必须为显示的文本内容)
 * @returns {Tooltip} Tooltip提示框。
 *
 * @example
 * sgworld.Core.CreateTooltip('这里是提示信息', {x:500, y:500}, true);
 * 或
 * tooltip = sgworld.Core.CreateTooltip();
 * tooltip.showAt({x:500, y:500}, '这里是提示信息');
 *
 * tooltip.show(false); //隐藏提示框
 * tooltip.show(true); //显示提示框
 */
Core.prototype.CreateTooltip = function (styleOrText = {}, position, show) {
  var style, _x, _y, _color, id;
  if (typeof styleOrText === "object") {
    style = styleOrText;
  }
  if (style && style.origin) {
    style.origin === "center" && ((_x = 15), (_y = -12));
    style.origin === "top" && ((_x = 15), (_y = -44));
    style.origin === "bottom" && ((_x = 15), (_y = 20));
  } else {
    (_x = 15), (_y = 20);
  }
  if (style && style.color) {
    style.color === "white" &&
      (_color = "background: rgba(255, 255, 255, 0.8);color: black;");
    style.color === "black" &&
      (_color = "background: rgba(0, 0, 0, 0.5);color: white;");
    style.color === "yellow" &&
      (_color =
        "color: black;background-color: #ffcc33;border: 1px solid white;");
  } else {
    _color = "background: rgba(0, 0, 0, 0.5);color: white;";
  }
  if (style && style.id) {
    id = "toolTip" + style.id;
  } else {
    id = "toolTip";
  }

  var tooltip = document.getElementById(id);

  if (!tooltip) {
    // 创建一个新的 div 元素
    var elementbottom = document.createElement("div");
    // 将元素添加到 .cesium-viewer 容器中
    var cesiumViewer = document.querySelector(".cesium-viewer");
    if (cesiumViewer) {
      cesiumViewer.appendChild(elementbottom);
    }

    // 构建 HTML 字符串
    var html =
      '<div id="' +
      id +
      '" style="display: none;pointer-events: none;position: absolute;z-index: 1000;opacity: 0.8;border-radius: 4px;padding: 4px 8px;white-space: nowrap;font-family:黑体;color:white;font-weight: bolder;font-size: 14px;' +
      _color +
      '"></div>';

    // 创建一个临时容器来解析 HTML 字符串
    var tempDiv = document.createElement("div");
    tempDiv.innerHTML = html;

    // 将解析后的第一个子元素（即 tooltip）添加到 .cesium-viewer 容器中
    if (cesiumViewer) {
      cesiumViewer.appendChild(tempDiv.firstElementChild);
    }

    // 获取刚刚创建的 tooltip 元素
    tooltip = document.getElementById(id);
  }
  if (show) {
    tooltip.innerHTML = styleOrText;
    tooltip.style.left = position.x + _x + "px";
    tooltip.style.top = position.y + _y + "px";
    tooltip.style.display = "block";
  } else {
    tooltip.style.display = "none";
  }
  return {
    tooltip: tooltip,
    style: style,
    showAt: function (position, text) {
      this.tooltip.innerHTML = text;
      if (this.style && this.style.origin) {
        this.style.origin === "center" &&
          ((_x = 15), (_y = -this.tooltip.offsetHeight / 2));
        this.style.origin === "top" &&
          ((_x = 15), (_y = -this.tooltip.offsetHeight - 20));
        this.style.origin === "bottom" && ((_x = 15), (_y = 20));
      } else {
        (_x = 15), (_y = -this.tooltip.offsetHeight / 2);
      }
      this.tooltip.style.left = position.x + _x + "px";
      this.tooltip.style.top = position.y + _y + "px";
      this.tooltip.style.display = "block";
    },
    show: function (show) {
      if (show) {
        this.tooltip.style.display = "block";
      } else {
        this.tooltip.style.display = "none";
      }
    }
  };
};

/**
 * 修改鼠标样式。
 *
 * @param {DOM} container html DOM节点
 * @param {Number} [cursorstyle=0] 鼠标类型（0为默认，1为使用cur图标）
 * @param {String} url cur图标路径。
 *
 * @example
 * sgworld.Core.mouse(Viewer.container, 1, 'draw.cur');
 */
Core.prototype.mouse = function (container, cursorstyle, url) {
  if (cursorstyle == 1) {
    container.style.cursor = "url(" + url + "),auto";
  } else {
    container.style.cursor = "default";
  }
};

// 判断是否为手机浏览器
Core.prototype.getBrowser = function () {
  var ua = navigator.userAgent.toLowerCase();
  var btypeInfo = (ua.match(/firefox|chrome|safari|opera/g) || "other")[0];
  if ((ua.match(/msie|trident/g) || [])[0]) {
    btypeInfo = "msie";
  }
  var pc = "";
  var prefix = "";
  var plat = "";
  //如果没有触摸事件 判定为PC
  var isTocuh =
    "ontouchstart" in window ||
    ua.indexOf("touch") !== -1 ||
    ua.indexOf("mobile") !== -1;
  if (isTocuh) {
    if (ua.indexOf("ipad") !== -1) {
      pc = "pad";
    } else if (ua.indexOf("mobile") !== -1) {
      pc = "mobile";
    } else if (ua.indexOf("android") !== -1) {
      pc = "androidPad";
    } else {
      pc = "pc";
    }
  } else {
    pc = "pc";
  }
  switch (btypeInfo) {
    case "chrome":
    case "safari":
    case "mobile":
      prefix = "webkit";
      break;
    case "msie":
      prefix = "ms";
      break;
    case "firefox":
      prefix = "Moz";
      break;
    case "opera":
      prefix = "O";
      break;
    default:
      prefix = "webkit";
      break;
  }
  plat =
    ua.indexOf("android") > 0 ? "android" : navigator.platform.toLowerCase();
  return {
    version: (ua.match(/[\s\S]+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1], //版本
    plat: plat, //系统
    type: btypeInfo, //浏览器
    pc: pc,
    prefix: prefix, //前缀
    isMobile: pc == "pc" ? false : true //是否是移动端
  };
};

//空间距离测量用米
Core.prototype.getSpaceDistancem = function (positions, Cesium) {
  var distance = 0;
  for (var i = 0; i < positions.length - 1; i++) {
    var point1cartographic = Cesium.Cartographic.fromCartesian(positions[i]);
    var point2cartographic = Cesium.Cartographic.fromCartesian(
      positions[i + 1]
    );
    /**根据经纬度计算出距离**/
    var geodesic = new Cesium.EllipsoidGeodesic();
    geodesic.setEndPoints(point1cartographic, point2cartographic);
    var s = geodesic.surfaceDistance;
    //console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));
    //返回两点之间的距离
    s = Math.sqrt(
      Math.pow(s, 2) +
      Math.pow(point2cartographic.height - point1cartographic.height, 2)
    );
    distance = distance + s;
  }
  return distance.toFixed(2);
};

//根据位置(Cartographic)获取3DTiles和Primitives高度
Core.prototype.get3DTileOrPrimitivesHeights = function (position, Viewer) {
  return Viewer.scene.sampleHeight(position);
};

//剖面分析
Core.prototype.getPmfxPro = function (
  _positions,
  pointSum1,
  cyjj,
  Cesium,
  viewer,
  methond
) {
  let _this = this;
  //起止点相关信息
  let pmx = {
    gcs: [],
    min: 99999,
    max: 0,
    juli: 0.0,
    cys: 0
  };
  let positions = [];
  let pointNum = [];
  //获取总间隔点数和距离
  for (let i = 0; i < _positions.length - 1; i++) {
    let julifr = _this.getSpaceDistancem(
      [_positions[i], _positions[i + 1]],
      Cesium
    );
    julifr = parseFloat(julifr);
    pmx.juli += julifr;
    if (cyjj == 0) {
    } else {
      pointSum1 = parseInt(julifr / cyjj);
    }
    pointNum.push(pointSum1);
    pmx.cys += pointSum1;
  }
  let startAnalyse = () => {
    pointNum.forEach((num, i) => {
      let startPoint = _positions[i];
      let endPoint = _positions[i + 1];
      //起点
      let scartographic = Cesium.Cartographic.fromCartesian(startPoint);
      let slongitude = Cesium.Math.toDegrees(scartographic.longitude);
      let slatitude = Cesium.Math.toDegrees(scartographic.latitude);

      //终点
      let ecartographic = Cesium.Cartographic.fromCartesian(endPoint);
      let elongitude = Cesium.Math.toDegrees(ecartographic.longitude);
      let elatitude = Cesium.Math.toDegrees(ecartographic.latitude);

      let pointSum = num; //取样点个数
      let addXTT =
        Cesium.Math.lerp(slongitude, elongitude, 1.0 / pointSum) - slongitude;
      let addYTT =
        Cesium.Math.lerp(slatitude, elatitude, 1.0 / pointSum) - slatitude;

      let Cartesian;

      i === 0 && positions.push(scartographic);
      for (let j = 0; j < pointSum; j++) {
        let longitude = slongitude + (j + 1) * addXTT;
        let latitude = slatitude + (j + 1) * addYTT;
        Cartesian = Cesium.Cartesian3.fromDegrees(longitude, latitude);
        positions.push(Cesium.Cartographic.fromCartesian(Cartesian));
      }
    });

    positions.push(
      Cesium.Cartographic.fromCartesian(_positions[_positions.length - 1])
    );

    let heightArr = [];
    pmx.allPoint = positions;
    this.getHeightsFromLonLat(positions, Cesium, viewer, function (data) {
      if (data) {
        heightArr = data;
        let changeDepthTest = viewer.scene.globe.depthTestAgainstTerrain;
        viewer.scene.globe.depthTestAgainstTerrain = true;
        for (let i = 0; i < heightArr.length; i++) {
          let modelHeight = _this.get3DTileOrPrimitivesHeights(
            positions[i],
            viewer
          );
          if (modelHeight !== undefined) {
            heightArr[i] = modelHeight;
          }
          let he = heightArr[i].toFixed(2);
          if (parseFloat(he) < parseFloat(pmx.min)) {
            pmx.min = parseFloat(he);
          }
          if (parseFloat(he) > parseFloat(pmx.max)) {
            pmx.max = parseFloat(he);
          }
          pmx.gcs.push(he);
        }
        viewer.scene.globe.depthTestAgainstTerrain = changeDepthTest;
        methond && typeof methond == "function" && methond(pmx);
      }
    });
  };
  if (pmx.cys > 1000) {
    layuiLayer &&
      layuiLayer.msg("当前采样点数过多，是否继续分析？", {
        time: 0,
        btn: ["继续", "取消"],
        btnAlign: "c",
        yes: index => {
          layuiLayer.close(index);
          setTimeout(() => {
            startAnalyse();
          }, 10);
        },
        btn2: () => {
          methond && typeof methond == "function" && methond(pmx);
        }
      });
  } else {
    setTimeout(() => {
      startAnalyse();
    }, 10);
  }
};

/**
 * 获取uuid
 */
Core.prototype.uuid = function (len, radix) {
  var chars =
    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
  var uuid = [],
    i;
  var uuid = [],
    i;
  radix = radix || chars.length;

  if (len) {
    // Compact form
    for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
  } else {
    // rfc4122, version 4 form
    var r;

    // rfc4122 requires these characters
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
    uuid[14] = "4";

    // Fill in random data.  At i==19 set the high bits of clock sequence as
    // per rfc4122, sec. 4.1.5
    for (i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | (Math.random() * 16);
        uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
      }
    }
  }

  return uuid.join("");
};

Core.prototype.getuid = function () {
  // var idStr = Date.now().toString(36);
  // idStr += Math.random().toString(36).substr(3);
  // return idStr;

  // return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  //     var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
  //     return v.toString(16);
  // });

  return this.uuid(8, 16);
};

/**
 * 对象参数合并
 * @param {Object} o 对象
 * @param {Object} n 被合并的对象
 * @param {Boolean} [override=false] 是否覆盖原属性值
 * @param {Boolean} [mergeTheSame=false] 是否只合并相同属性
 */
Core.prototype.extend = function (
  o,
  n,
  override = false,
  mergeTheSame = false
) {
  for (var key in n) {
    if (mergeTheSame) {
      if (o.hasOwnProperty(key)) {
        o[key] = n[key];
      }
    } else {
      if (!o.hasOwnProperty(key) || override) {
        o[key] = n[key];
      }
    }
  }
  return o;
};

/**
 * 两点方位角
 * @param {number} lon1 起点经度
 * @param {number} lat1 起点纬度
 * @param {number} lon2 终点经度
 * @param {number} lat2 终点纬度
 */
Core.prototype.TwoPointAzimuth = function (lon1, lat1, lon2, lat2) {
  var result = 0.0;
  var getRad = function (d) {
    return (d * Math.PI) / 180.0;
  };

  var ilat1 = Math.round(0.5 + lat1 * 360000.0);
  var ilat2 = Math.round(0.5 + lat2 * 360000.0);
  var ilon1 = Math.round(0.5 + lon1 * 360000.0);
  var ilon2 = Math.round(0.5 + lon2 * 360000.0);

  lat1 = getRad(lat1);
  lon1 = getRad(lon1);
  lat2 = getRad(lat2);
  lon2 = getRad(lon2);

  if (ilat1 === ilat2 && ilon1 === ilon2) {
    return result;
  } else if (ilon1 === ilon2) {
    if (ilat1 > ilat2) result = 180.0;
  } else {
    var c = Math.acos(
      Math.sin(lat2) * Math.sin(lat1) +
      Math.cos(lat2) * Math.cos(lat1) * Math.cos(lon2 - lon1)
    );
    var A = Math.asin((Math.cos(lat2) * Math.sin(lon2 - lon1)) / Math.sin(c));
    result = (A * 180) / Math.PI;
    if (ilat2 > ilat1 && ilon2 > ilon1) {
    } else if (ilat2 < ilat1 && ilon2 < ilon1) {
      result = 180.0 - result;
    } else if (ilat2 < ilat1 && ilon2 > ilon1) {
      result = 180.0 - result;
    } else if (ilat2 > ilat1 && ilon2 < ilon1) {
      result += 360.0;
    }
  }
  return result;
};
export default Core;

📄 getPosition.js

/**
 *
 * 获取位置。
 * xp
 * @alias getPosition
 * @constructor
 *
 */

function getPosition (viewer, cesium) {
  this._viewer = viewer;
  this._cesium = cesium;
}

getPosition.prototype.getPosition = function () {
  return this._viewer.camera.position;
};

getPosition.prototype.getDegrees = function () {
  var cartographic = this._viewer.camera.positionCartographic;
  var Degrees = {
    lon: this._cesium.Math.toDegrees(cartographic.longitude),
    lat: this._cesium.Math.toDegrees(cartographic.latitude),
    height: cartographic.height
  };

  return Degrees;
};
/**
 * 获取鼠标当前世界坐标
 * @param {object} [movement] 鼠标屏幕位置
 * @param {Array/Object} [objectsToExclude] 排除的实体对象
 * @param {number} [type] 类型（0为模型优先，1为地形优先）,默认模型优先
 * @param {boolean} [isAdsorption] true|false 是否吸附，默认否
 * @param {number} [distance] 吸附半径，默认30
 **/
getPosition.prototype.getMousePosition = function (
  movement,
  objectsToExclude,
  type,
  isAdsorption,
  distance
) {
  var mousePosition = movement.endPosition || movement.position || movement;
  type === undefined && (type = 0);
  isAdsorption = this._cesium.defaultValue(isAdsorption, false);
  this.defaultDepthTest === undefined &&
    (this.defaultDepthTest =
      !!this._viewer.scene.globe.depthTestAgainstTerrain);

  var ray, cartesian, _cartesian, feature;
  //this.isObjectsToExcludeShow(objectsToExclude, false);
  var width = isAdsorption ? (distance ? distance : 30) : 1;
  if (type !== 0) {
    //地形优先
    //开启深度检测
    this._viewer.scene.globe.depthTestAgainstTerrain = true;
    ray = this._viewer.camera.getPickRay(mousePosition);
    ray && (cartesian = this._viewer.scene.globe.pick(ray, this._viewer.scene));
    //isAdsorption && (mousePosition = this.getAdsorptionPosition(mousePosition, objectsToExclude));

    if (!objectsToExclude || objectsToExclude.length === 0) {
      feature = this._viewer.scene.pick(mousePosition);
      if (feature && feature.id && !this.id3DGraphic(feature.id)) {
        feature = undefined;
      }
    } else {
      feature = this._viewer.scene.drillPick(
        mousePosition,
        objectsToExclude.length,
        width,
        width
      );
      feature = this.getNotExcludedObj(feature, objectsToExclude);
    }

    if (feature && !isAdsorption) {
      this._viewer.scene.pick(mousePosition);
      _cartesian = this._viewer.scene.pickPosition(mousePosition);
      if (_cartesian) {
        cartesian = _cartesian;
      }
    } else {
      cartesian &&
        isAdsorption &&
        (_cartesian = this._getAdsorptionPosition(
          mousePosition,
          feature,
          distance
        )); //吸附
      if (_cartesian) {
        cartesian = _cartesian;
      }
    }
  } else {
    //模型优先
    if (!objectsToExclude || objectsToExclude.length === 0) {
      feature = this._viewer.scene.pick(mousePosition);
      if (feature && feature.id && !this.id3DGraphic(feature.id)) {
        feature = undefined;
      }
    } else {
      feature = this._viewer.scene.drillPick(
        mousePosition,
        (objectsToExclude &&
          objectsToExclude.length &&
          objectsToExclude.length + 1) ||
        1,
        width,
        width
      );
      feature = this.getNotExcludedObj(feature, objectsToExclude);
    }
    if (feature && !isAdsorption) {
      this._viewer.scene.pick(mousePosition);
      cartesian = this._viewer.scene.pickPosition(mousePosition);
    } else if (feature && isAdsorption) {
      this._viewer.scene.pick(mousePosition);
      cartesian = this._viewer.scene.pickPosition(mousePosition);
      _cartesian = this._getAdsorptionPosition(
        mousePosition,
        feature,
        distance
      ); //吸附
      if (_cartesian) {
        cartesian = _cartesian;
      }
    } else {
      //开启深度检测
      this._viewer.scene.globe.depthTestAgainstTerrain = true;
      ray = this._viewer.camera.getPickRay(mousePosition);
      ray &&
        (cartesian = this._viewer.scene.globe.pick(ray, this._viewer.scene));
    }
  }
  this._viewer.scene.globe.depthTestAgainstTerrain = !!this.defaultDepthTest;
  this.defaultDepthTest = undefined;

  // console.log(cartesian);
  if (!cartesian) {
    console.log("未拾取到坐标！");
    return;
  }

  return cartesian;
};
/**
 * 获取鼠标当前经纬度
 * @param {object} [movement] 鼠标屏幕位置
 * @param {Array/Object} [objectsToExclude] 排除的实体对象
 * @param {number} [type] 类型（0为模型优先，1为地形优先）,默认模型优先
 * @param {boolean} [isAdsorption] true|false 是否吸附，默认否
 * @param {number} [distance] 吸附半径，默认30
 */
getPosition.prototype.getMouseDegrees = function (
  movement,
  objectsToExclude,
  type,
  isAdsorption,
  distance
) {
  var mousePosition = movement.endPosition || movement.position || movement;
  type === undefined && (type = 0);
  isAdsorption = this._cesium.defaultValue(isAdsorption, false);
  this.defaultDepthTest === undefined &&
    (this.defaultDepthTest =
      !!this._viewer.scene.globe.depthTestAgainstTerrain);

  var ray, cartesian, _cartesian, feature;
  //this.isObjectsToExcludeShow(objectsToExclude, false);
  var width = isAdsorption ? (distance ? distance : 30) : 1;
  if (type !== 0) {
    //地形优先
    //开启深度检测
    this._viewer.scene.globe.depthTestAgainstTerrain = true;
    ray = this._viewer.camera.getPickRay(mousePosition);
    ray && (cartesian = this._viewer.scene.globe.pick(ray, this._viewer.scene));
    //isAdsorption && (mousePosition = this.getAdsorptionPosition(mousePosition, objectsToExclude));

    if (!objectsToExclude || objectsToExclude.length === 0) {
      feature = this._viewer.scene.pick(mousePosition);
      if (feature && feature.id && !this.id3DGraphic(feature.id)) {
        feature = undefined;
      }
    } else {
      feature = this._viewer.scene.drillPick(
        mousePosition,
        (objectsToExclude &&
          objectsToExclude.length &&
          objectsToExclude.length + 1) ||
        1,
        width,
        width
      );
      feature = this.getNotExcludedObj(feature, objectsToExclude);
    }
    if (feature && !isAdsorption) {
      this._viewer.scene.pick(mousePosition);
      _cartesian = this._viewer.scene.pickPosition(mousePosition);
      if (_cartesian) {
        cartesian = _cartesian;
      }
    } else {
      cartesian &&
        isAdsorption &&
        (_cartesian = this._getAdsorptionPosition(
          mousePosition,
          feature,
          distance
        )); //吸附
      if (_cartesian) {
        cartesian = _cartesian;
      }
    }
  } else {
    //模型优先
    if (!objectsToExclude || objectsToExclude.length === 0) {
      feature = this._viewer.scene.pick(mousePosition);
      if (feature && feature.id && !this.id3DGraphic(feature.id)) {
        feature = undefined;
      }
    } else {
      feature = this._viewer.scene.drillPick(
        mousePosition,
        (objectsToExclude &&
          objectsToExclude.length &&
          objectsToExclude.length + 1) ||
        1,
        width,
        width
      );
      feature = this.getNotExcludedObj(feature, objectsToExclude);
    }
    if (feature && !isAdsorption) {
      this._viewer.scene.pick(mousePosition);
      cartesian = this._viewer.scene.pickPosition(mousePosition);
    } else if (feature && isAdsorption) {
      this._viewer.scene.pick(mousePosition);
      cartesian = this._viewer.scene.pickPosition(mousePosition);
      _cartesian = this._getAdsorptionPosition(
        mousePosition,
        feature,
        distance
      ); //吸附
      if (_cartesian) {
        cartesian = _cartesian;
      }
    } else {
      //开启深度检测
      this._viewer.scene.globe.depthTestAgainstTerrain = true;
      ray = this._viewer.camera.getPickRay(mousePosition);
      ray &&
        (cartesian = this._viewer.scene.globe.pick(ray, this._viewer.scene));
    }
  }
  this._viewer.scene.globe.depthTestAgainstTerrain = !!this.defaultDepthTest;
  this.defaultDepthTest = undefined;

  if (!cartesian) {
    console.log("未拾取到坐标！");
    return;
  }

  var cartographic = this._cesium.Cartographic.fromCartesian(cartesian);
  return {
    lon: this._cesium.Math.toDegrees(cartographic.longitude),
    lat: this._cesium.Math.toDegrees(cartographic.latitude),
    height: cartographic.height
  };
};

//判断是否是三维图形
getPosition.prototype.id3DGraphic = function (graphic) {
  let threeD = true;
  if (graphic.polyline || graphic.point || graphic.label || graphic.billboard) {
    threeD = false;
  } else if (graphic.polygon && graphic.polygon.extrudedHeight == undefined) {
    threeD = false;
  } else if (
    graphic.rectangle &&
    graphic.rectangle.extrudedHeight == undefined
  ) {
    threeD = false;
  } else if (graphic.ellipse && graphic.ellipse.extrudedHeight == undefined) {
    threeD = false;
  } else if (graphic.corridor && graphic.corridor.extrudedHeight == undefined) {
    threeD = false;
  }
  return threeD;
};

//吸附坐标-屏幕坐标
getPosition.prototype.getAdsorptionPosition = function (
  mousePosition,
  objectsToExclude
) {
  var dis = 5; //吸附半径
  var ave = 3; //采样数
  var object = this._viewer.scene.drillPick(
    mousePosition,
    (objectsToExclude &&
      objectsToExclude.length &&
      objectsToExclude.length + 1) ||
    3,
    dis + 3,
    dis + 3
  ); //3为默认拾取范围
  var need = false;
  for (var i = 0; i < object.length; i++) {
    if (object[i] && !this.isExcluded(object[i], objectsToExclude)) {
      need = true;
      break;
    }
  }

  if (need) {
    object = this._viewer.scene.pick(mousePosition, 1, 1);
    if (object && !this.isExcluded(object, objectsToExclude)) {
      return mousePosition;
    }
    for (var i = dis / ave; i <= dis; i += dis / ave) {
      object = this._viewer.scene.pick(
        { x: mousePosition.x + i, y: mousePosition.y },
        1,
        1
      );
      if (object && !this.isExcluded(object, objectsToExclude)) {
        return { x: mousePosition.x + i, y: mousePosition.y };
      }
    }
    for (var i = dis / ave; i <= dis; i += dis / ave) {
      object = this._viewer.scene.pick(
        { x: mousePosition.x + i, y: mousePosition.y + i },
        1,
        1
      );
      if (object && !this.isExcluded(object, objectsToExclude)) {
        return { x: mousePosition.x + i, y: mousePosition.y + i };
      }
    }
    for (var i = dis / ave; i <= dis; i += dis / ave) {
      object = this._viewer.scene.pick(
        { x: mousePosition.x, y: mousePosition.y + i },
        1,
        1
      );
      if (object && !this.isExcluded(object, objectsToExclude)) {
        return { x: mousePosition.x, y: mousePosition.y + i };
      }
    }
    for (var i = dis / ave; i <= dis; i += dis / ave) {
      object = this._viewer.scene.pick(
        { x: mousePosition.x - i, y: mousePosition.y + i },
        1,
        1
      );
      if (object && !this.isExcluded(object, objectsToExclude)) {
        return { x: mousePosition.x - i, y: mousePosition.y + i };
      }
    }
    for (var i = dis / ave; i <= dis; i += dis / ave) {
      object = this._viewer.scene.pick(
        { x: mousePosition.x - i, y: mousePosition.y },
        1,
        1
      );
      if (object && !this.isExcluded(object, objectsToExclude)) {
        return { x: mousePosition.x - i, y: mousePosition.y };
      }
    }
    for (var i = dis / ave; i <= dis; i += dis / ave) {
      object = this._viewer.scene.pick(
        { x: mousePosition.x - i, y: mousePosition.y - i },
        1,
        1
      );
      if (object && !this.isExcluded(object, objectsToExclude)) {
        return { x: mousePosition.x - i, y: mousePosition.y - i };
      }
    }
    for (var i = dis / ave; i <= dis; i += dis / ave) {
      object = this._viewer.scene.pick(
        { x: mousePosition.x, y: mousePosition.y - i },
        1,
        1
      );
      if (object && !this.isExcluded(object, objectsToExclude)) {
        return { x: mousePosition.x, y: mousePosition.y - i };
      }
    }
    for (var i = dis / ave; i <= dis; i += dis / ave) {
      object = this._viewer.scene.pick(
        { x: mousePosition.x + i, y: mousePosition.y - i },
        1,
        1
      );
      if (object && !this.isExcluded(object, objectsToExclude)) {
        return { x: mousePosition.x + i, y: mousePosition.y - i };
      }
    }
  }
  return mousePosition;
};

//吸附坐标
getPosition.prototype._getAdsorptionPosition = function (
  mousePosition,
  feature,
  distance
) {
  var dis = distance ? distance : 30; //吸附半径

  if (feature) {
    feature = this.getFeature(feature);
    var _PosArr = [];
    var CanvasCoordinates;
    for (var i = 0; i < feature.position.length; i++) {
      CanvasCoordinates = this._viewer.scene.cartesianToCanvasCoordinates(
        feature.position[i]
      );
      if (CanvasCoordinates) {
        CanvasCoordinates.index = i;
        _PosArr.push(CanvasCoordinates);
      }
    }
    var compare = function (obj1, obj2) {
      var val1 = obj1.x;
      var val2 = obj2.x;
      if (val1 < val2) {
        return -1;
      } else if (val1 > val2) {
        return 1;
      } else {
        return 0;
      }
    };
    _PosArr = _PosArr.sort(compare);
    if (_PosArr && _PosArr.length > 1) {
      //二分法算最接近下标
      var n = Math.log(_PosArr.length) / Math.log(2);
      var m = 0;
      var maxn = _PosArr.length;
      var minn = 0;
      var zd = -1;

      for (var i = 0; i < n; i++) {
        m = Math.floor((maxn + minn) / 2);
        if (mousePosition.x - _PosArr[m].x > dis) {
          minn = m;
        } else if (mousePosition.x - _PosArr[m].x < -dis) {
          maxn = m;
        } else if (Math.abs(mousePosition.x - _PosArr[m].x) < dis) {
          zd = m;
          break;
        }
      }
      if (zd !== -1) {
        for (var i = m; i < maxn; i++) {
          if (Math.abs(mousePosition.x - _PosArr[i].x) > dis) {
            maxn = i;
            break;
          }
        }
        for (var i = m; i > minn; i--) {
          if (Math.abs(mousePosition.x - _PosArr[i].x) > dis) {
            minn = i + 1;
            break;
          }
        }
        for (var i = minn; i < maxn; i++) {
          if (Math.abs(mousePosition.y - _PosArr[i].y) < dis) {
            return feature.position[_PosArr[i].index];
          }
        }
      }
    }
    if (_PosArr && _PosArr.length === 1) {
      if (
        Math.abs(mousePosition.x - _PosArr[0].x) < dis &&
        Math.abs(mousePosition.y - _PosArr[0].y) < dis
      ) {
        return feature.position[0];
      }
    }
  }
};

getPosition.prototype.getFeature = function (obj) {
  var position;
  var data = {
    position: [],
    object: []
  };
  if (obj && obj.id) {
    if (obj.id instanceof this._cesium.Entity) {
      var entity = obj.id;
      if (entity.billboard) {
        position = entity.position.getValue(this._viewer.clock.currentTime);
        data.position.push(position);
        data.object.push({
          type: "billboard",
          feature: entity.billboard
        });
      }
      if (entity.box) {
        position = entity.position.getValue(this._viewer.clock.currentTime);
        data.position.push(position);
        data.object.push({
          type: "box",
          feature: entity.box
        });
      }
      if (entity.corridor) {
        position = entity.position.getValue(this._viewer.clock.currentTime);
        data.position.push(position);
        data.object.push({
          type: "corridor",
          feature: entity.corridor
        });
      }
      if (entity.cylinder) {
        position = entity.position.getValue(this._viewer.clock.currentTime);
        data.position.push(position);
        data.object.push({
          type: "cylinder",
          feature: entity.cylinder
        });
      }
      if (entity.ellipse) {
        position = entity.position.getValue(this._viewer.clock.currentTime);
        data.position.push(position);
        data.object.push({
          type: "ellipse",
          feature: entity.ellipse
        });
      }
      if (entity.ellipsoid) {
        position = entity.position.getValue(this._viewer.clock.currentTime);
        data.position.push(position);
        data.object.push({
          type: "ellipsoid",
          feature: entity.ellipsoid
        });
      }
      if (entity.label) {
        position = entity.position.getValue(this._viewer.clock.currentTime);
        data.position.push(position);
        data.object.push({
          type: "label",
          feature: entity.label
        });
      }
      if (entity.model) {
        position = entity.position.getValue(this._viewer.clock.currentTime);
        data.position.push(position);
        data.object.push({
          type: "model",
          feature: entity.model
        });
      }
      if (entity.path) {
        position = entity.position.getValue(this._viewer.clock.currentTime);
        data.position.push(position);
        data.object.push({
          type: "path",
          feature: entity.path
        });
      }
      if (entity.plane) {
        position = entity.position.getValue(this._viewer.clock.currentTime);
        data.position.push(position);
        data.object.push({
          type: "plane",
          feature: entity.plane
        });
      }
      if (entity.point) {
        position = entity.position.getValue(this._viewer.clock.currentTime);
        data.position.push(position);
        data.object.push({
          type: "point",
          feature: entity.point
        });
      }
      if (entity.polygon) {
        position = entity.polygon.hierarchy.getValue(
          this._viewer.clock.currentTime
        );
        data.position = data.position.concat(position.positions);
        data.object.push({
          type: "polygon",
          feature: entity.polygon
        });
      }
      if (entity.polyline) {
        position = entity.polyline.positions.getValue(
          this._viewer.clock.currentTime
        );
        data.position = data.position.concat(position);
        data.object.push({
          type: "polyline",
          feature: entity.polyline
        });
      }
      if (entity.polylineVolume) {
        position = entity.polylineVolume.positions.getValue(
          this._viewer.clock.currentTime
        );
        data.position = data.position.concat(position);
        data.object.push({
          type: "polylineVolume",
          feature: entity.polylineVolume
        });
      }
      if (entity.rectangle) {
        position = entity.rectangle.coordinates.getValue(
          this._viewer.clock.currentTime
        );
        data.position = data.position.concat(position);
        data.object.push({
          type: "rectangle",
          feature: entity.rectangle
        });
      }
      if (entity.wall) {
        position = entity.wall.positions.getValue(
          this._viewer.clock.currentTime
        );
        data.position = data.position.concat(position);
        data.object.push({
          type: "wall",
          feature: entity.wall
        });
      }
    }
  }
  if (obj && obj.primitive) {
    if (obj.primitive instanceof this._cesium.Model) {
      position = obj.primitive.positionObj;
      data.position.push(position);
      data.object.push({
        type: "model",
        feature: obj.primitive
      });
    }
  }
  return data;
};

//是否包含对象
getPosition.prototype.isExcluded = function (object, objectsToExclude) {
  if (
    !this._cesium.defined(object) ||
    !this._cesium.defined(objectsToExclude) ||
    objectsToExclude.length === 0
  ) {
    return false;
  }
  return (
    objectsToExclude.indexOf(object) > -1 ||
    objectsToExclude.indexOf(object.primitive) > -1 ||
    objectsToExclude.indexOf(object.id) > -1
  );
};

//获取不包含的对象
getPosition.prototype.getNotExcludedObj = function (
  objectOrArr,
  objectsToExclude
) {
  if (objectOrArr.length === 0) {
    return false;
  } else if (
    !this._cesium.defined(objectsToExclude) ||
    objectsToExclude.length === 0
  ) {
    return objectOrArr;
  }
  for (var i = 0; i < objectOrArr.length; i++) {
    if (objectOrArr[i] && !this.isExcluded(objectOrArr[i], objectsToExclude)) {
      return objectOrArr[i];
    }
  }
  return false;
};

//控制对象显隐
getPosition.prototype.isObjectsToExcludeShow = function (
  objectsToExclude,
  isShow
) {
  if (
    !this._cesium.defined(objectsToExclude) ||
    objectsToExclude.length === 0
  ) {
    return;
  }
  if (objectsToExclude instanceof Array) {
    objectsToExclude.forEach(function (item) {
      item.show = isShow;
    });
  } else {
    objectsToExclude.show = isShow;
  }
};
export default getPosition;

调用方法

  
   const _dynamicObject = new dynamicObject(window.viewer, Cesium);
  
  _dynamicObject.executeFlycesium(data => {
    data.showPoint = true;
    data.showLine = true;
    data.mode = 2; // 飞行模式
    _dynamicObject.Start(data, data.url);
  });

1.简介

上一篇介绍了爬取文章，这一篇宏哥就简单的介绍一下，如何爬取图片然后保存到本地电脑中。网上很多漂亮的壁纸或者是美女、妹子，想自己收藏一些，挨个保存太费时间，那你可以利用爬虫然后批量下载。

2.爬虫原理

其实这个和上一篇都是一样的道理，宏哥在啰嗦一遍。Jmeter 的爬虫原理其实很简单，就是对网页提交一个请求，然后把返回的所有 href 提取出来，利用 ForEach 控制器去实现 url 遍历。这样解释是不是很清晰？下面宏哥就来简单介绍一下如何操作。

3.牛刀小试

宏哥这里以一个图片网站为例给小伙伴或者童鞋们演示用过程和步骤。

该网站为动态。网址：unsplash.com/

3.1开始实战

1、因为是动态网站，所以获取网页内容后，很多图片找不到，使用浏览器F12功能，分析网站的请求，得出：

网页动态加载请求：unsplash.com/napi/photos…

图片下载请求：unsplash.com/photos/xxx/…

2、我们开始使用jmeter爬取网站上的图片。打开Jemter，新建线程组，如下图所示：

3、在线程组里添加一个http请求（sampler->http请求），协议为https，服务器名称输入网址，路径输入路径，在路径中将1参数化，修改1为${id}，如下图所示：

4、添加参数化文件，配置元件->CSV数据文件设置，设置文件路径，编码、变量、间隔符等，如下图所示：

5、我们现在需要把图片id提取出来，利用强大的正则表达式提取。先分析下网页请求返回的数据，因此宏哥添加一个察看结果树，运行Jmeter，如下图所示：

6、返回结果，宏哥粘贴并且格式化，如下图所示：

[{
    "id": "nV8K0uguyiw",
    "created_at": "2020-07-01T18:52:47-04:00",
    "updated_at": "2021-05-23T16:16:03-04:00",
    "promoted_at": null,
    "width": 10920,
    "height": 5880,
    "color": "#c0c0c0",
    "blur_hash": "LCFrS10evKpc.S0KM_-;^+E1E1%L",
    "description": null,
    "alt_description": "man in green zip up jacket beside woman in black shirt",
    "urls": {
        "raw": "https://images.unsplash.com/photo-1593643946890-b5b85ade6451?ixid=MnwxMjA3fDF8MXxhbGx8MXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1593643946890-b5b85ade6451?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDF8MXxhbGx8MXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1593643946890-b5b85ade6451?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDF8MXxhbGx8MXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1593643946890-b5b85ade6451?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDF8MXxhbGx8MXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1593643946890-b5b85ade6451?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDF8MXxhbGx8MXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/nV8K0uguyiw",
        "html": "https://unsplash.com/photos/nV8K0uguyiw",
        "download": "https://unsplash.com/photos/nV8K0uguyiw/download",
        "download_location": "https://api.unsplash.com/photos/nV8K0uguyiw/download?ixid=MnwxMjA3fDF8MXxhbGx8MXx8fHx8fDJ8fDE2MjE4NDA5ODg"
    },
    "categories": [],
    "likes": 499,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": {
        "impression_urls": ["https://secure.insightexpressai.com/adServer/adServerESI.aspx?script=false\u0026bannerID=8281547\u0026rnd=[timestamp]\u0026gdpr=\u0026gdpr_consent=\u0026redir=https://secure.insightexpressai.com/adserver/1pixel.gif", "https://secure.insightexpressai.com/adServer/adServerESI.aspx?script=false\u0026bannerID=8468538\u0026rnd=[timestamp]\u0026DID=mobADID\u0026redir=https://secure.insightexpressai.com/adserver/1pixel.gif"],
        "tagline": "Designed to be the Best",
        "tagline_url": "http://www.dell.com/xps",
        "sponsor": {
            "id": "2DC3GyeqWjI",
            "updated_at": "2021-05-24T03:12:03-04:00",
            "username": "xps",
            "name": "XPS",
            "first_name": "XPS",
            "last_name": null,
            "twitter_username": "Dell",
            "portfolio_url": "http://www.dell.com/xps",
            "bio": "Designed to be the best, with cutting edge technologies, exceptional build quality, unique materials and powerful features.",
            "location": null,
            "links": {
                "self": "https://api.unsplash.com/users/xps",
                "html": "https://unsplash.com/@xps",
                "photos": "https://api.unsplash.com/users/xps/photos",
                "likes": "https://api.unsplash.com/users/xps/likes",
                "portfolio": "https://api.unsplash.com/users/xps/portfolio",
                "following": "https://api.unsplash.com/users/xps/following",
                "followers": "https://api.unsplash.com/users/xps/followers"
            },
            "profile_image": {
                "small": "https://images.unsplash.com/profile-1600096866391-b09a1a53451aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
                "medium": "https://images.unsplash.com/profile-1600096866391-b09a1a53451aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
                "large": "https://images.unsplash.com/profile-1600096866391-b09a1a53451aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
            },
            "instagram_username": "dell",
            "total_collections": 0,
            "total_likes": 0,
            "total_photos": 22,
            "accepted_tos": true,
            "for_hire": false
        }
    },
    "user": {
        "id": "2DC3GyeqWjI",
        "updated_at": "2021-05-24T03:12:03-04:00",
        "username": "xps",
        "name": "XPS",
        "first_name": "XPS",
        "last_name": null,
        "twitter_username": "Dell",
        "portfolio_url": "http://www.dell.com/xps",
        "bio": "Designed to be the best, with cutting edge technologies, exceptional build quality, unique materials and powerful features.",
        "location": null,
        "links": {
            "self": "https://api.unsplash.com/users/xps",
            "html": "https://unsplash.com/@xps",
            "photos": "https://api.unsplash.com/users/xps/photos",
            "likes": "https://api.unsplash.com/users/xps/likes",
            "portfolio": "https://api.unsplash.com/users/xps/portfolio",
            "following": "https://api.unsplash.com/users/xps/following",
            "followers": "https://api.unsplash.com/users/xps/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-1600096866391-b09a1a53451aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-1600096866391-b09a1a53451aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-1600096866391-b09a1a53451aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": "dell",
        "total_collections": 0,
        "total_likes": 0,
        "total_photos": 22,
        "accepted_tos": true,
        "for_hire": false
    }
}, {
    "id": "rfgR_SbTC40",
    "created_at": "2021-05-19T10:35:26-04:00",
    "updated_at": "2021-05-24T02:48:01-04:00",
    "promoted_at": "2021-05-24T02:48:01-04:00",
    "width": 3488,
    "height": 5232,
    "color": "#595959",
    "blur_hash": "LFBM*_nOt6tRt8%Ns:Rj0KtlM{Ri",
    "description": null,
    "alt_description": "black ceramic mug on table",
    "urls": {
        "raw": "https://images.unsplash.com/photo-1621434913400-21cc05e8c461?ixid=MnwxMjA3fDB8MXxhbGx8Mnx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1621434913400-21cc05e8c461?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8Mnx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1621434913400-21cc05e8c461?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8Mnx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1621434913400-21cc05e8c461?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8Mnx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1621434913400-21cc05e8c461?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8Mnx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/rfgR_SbTC40",
        "html": "https://unsplash.com/photos/rfgR_SbTC40",
        "download": "https://unsplash.com/photos/rfgR_SbTC40/download",
        "download_location": "https://api.unsplash.com/photos/rfgR_SbTC40/download?ixid=MnwxMjA3fDB8MXxhbGx8Mnx8fHx8fDJ8fDE2MjE4NDA5ODg"
    },
    "categories": [],
    "likes": 9,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": null,
    "user": {
        "id": "JF1D9mtlosI",
        "updated_at": "2021-05-24T02:57:03-04:00",
        "username": "farzadmohamadi",
        "name": "Farzad Mohamadi",
        "first_name": "Farzad",
        "last_name": "Mohamadi",
        "twitter_username": null,
        "portfolio_url": null,
        "bio": null,
        "location": null,
        "links": {
            "self": "https://api.unsplash.com/users/farzadmohamadi",
            "html": "https://unsplash.com/@farzadmohamadi",
            "photos": "https://api.unsplash.com/users/farzadmohamadi/photos",
            "likes": "https://api.unsplash.com/users/farzadmohamadi/likes",
            "portfolio": "https://api.unsplash.com/users/farzadmohamadi/portfolio",
            "following": "https://api.unsplash.com/users/farzadmohamadi/following",
            "followers": "https://api.unsplash.com/users/farzadmohamadi/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-1621171864819-d610eadcd8bdimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-1621171864819-d610eadcd8bdimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-1621171864819-d610eadcd8bdimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": null,
        "total_collections": 0,
        "total_likes": 12,
        "total_photos": 9,
        "accepted_tos": true,
        "for_hire": false
    }
}, {
    "id": "cfMW036jByI",
    "created_at": "2020-05-06T15:53:04-04:00",
    "updated_at": "2021-05-24T01:27:02-04:00",
    "promoted_at": "2021-05-24T01:27:02-04:00",
    "width": 3456,
    "height": 5184,
    "color": "#8ca6d9",
    "blur_hash": "LN9a{zMvROjEo~tSV?RiH;x^V?e.",
    "description": null,
    "alt_description": "low angle photography of high rise building",
    "urls": {
        "raw": "https://images.unsplash.com/photo-1588794651085-41fe77330f3e?ixid=MnwxMjA3fDB8MXxhbGx8M3x8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1588794651085-41fe77330f3e?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8M3x8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1588794651085-41fe77330f3e?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8M3x8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1588794651085-41fe77330f3e?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8M3x8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1588794651085-41fe77330f3e?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8M3x8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/cfMW036jByI",
        "html": "https://unsplash.com/photos/cfMW036jByI",
        "download": "https://unsplash.com/photos/cfMW036jByI/download",
        "download_location": "https://api.unsplash.com/photos/cfMW036jByI/download?ixid=MnwxMjA3fDB8MXxhbGx8M3x8fHx8fDJ8fDE2MjE4NDA5ODg"
    },
    "categories": [],
    "likes": 40,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": null,
    "user": {
        "id": "ftB4m4H6ILo",
        "updated_at": "2021-05-24T03:02:09-04:00",
        "username": "hugoclb",
        "name": "Hugo Coulbouée",
        "first_name": "Hugo",
        "last_name": "Coulbouée",
        "twitter_username": "hug0clb",
        "portfolio_url": null,
        "bio": "🏔️ Annecy, 74\r\n🙋🏼‍♂️ 19 Ans, Autodidacte  📷 Canon EOS 1200d x 50mm",
        "location": "Annecy",
        "links": {
            "self": "https://api.unsplash.com/users/hugoclb",
            "html": "https://unsplash.com/@hugoclb",
            "photos": "https://api.unsplash.com/users/hugoclb/photos",
            "likes": "https://api.unsplash.com/users/hugoclb/likes",
            "portfolio": "https://api.unsplash.com/users/hugoclb/portfolio",
            "following": "https://api.unsplash.com/users/hugoclb/following",
            "followers": "https://api.unsplash.com/users/hugoclb/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-1588794575070-f8694808367aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-1588794575070-f8694808367aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-1588794575070-f8694808367aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": "hugoclb",
        "total_collections": 0,
        "total_likes": 40,
        "total_photos": 39,
        "accepted_tos": true,
        "for_hire": true
    }
}, {
    "id": "ycnvnL4beLo",
    "created_at": "2021-05-23T14:11:36-04:00",
    "updated_at": "2021-05-24T00:30:02-04:00",
    "promoted_at": "2021-05-24T00:30:02-04:00",
    "width": 2160,
    "height": 3240,
    "color": "#d9d9c0",
    "blur_hash": "LcLpXC%LMxrr_MaexaR*%gRkS#bb",
    "description": null,
    "alt_description": "strawberry juice in clear drinking glass",
    "urls": {
        "raw": "https://images.unsplash.com/photo-1621792907789-666f0e69ea03?ixid=MnwxMjA3fDB8MXxhbGx8NHx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1621792907789-666f0e69ea03?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8NHx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1621792907789-666f0e69ea03?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8NHx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1621792907789-666f0e69ea03?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8NHx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1621792907789-666f0e69ea03?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8NHx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/ycnvnL4beLo",
        "html": "https://unsplash.com/photos/ycnvnL4beLo",
        "download": "https://unsplash.com/photos/ycnvnL4beLo/download",
        "download_location": "https://api.unsplash.com/photos/ycnvnL4beLo/download?ixid=MnwxMjA3fDB8MXxhbGx8NHx8fHx8fDJ8fDE2MjE4NDA5ODg"
    },
    "categories": [],
    "likes": 22,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": null,
    "user": {
        "id": "JUx0LN7P8_o",
        "updated_at": "2021-05-24T03:11:59-04:00",
        "username": "bartoshevicz",
        "name": "Adam Bartoszewicz",
        "first_name": "Adam",
        "last_name": "Bartoszewicz",
        "twitter_username": null,
        "portfolio_url": "https://www.instagram.com/bartoshevicz/",
        "bio": "Hi, I'm a foodie passionate and food photography is becoming my whole life! I hope you're gonna enjoy my delicious work. Join me on my Instagram profile for more and more!",
        "location": "Białystok, Poland",
        "links": {
            "self": "https://api.unsplash.com/users/bartoshevicz",
            "html": "https://unsplash.com/@bartoshevicz",
            "photos": "https://api.unsplash.com/users/bartoshevicz/photos",
            "likes": "https://api.unsplash.com/users/bartoshevicz/likes",
            "portfolio": "https://api.unsplash.com/users/bartoshevicz/portfolio",
            "following": "https://api.unsplash.com/users/bartoshevicz/following",
            "followers": "https://api.unsplash.com/users/bartoshevicz/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-1621607600495-1fd693951525image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-1621607600495-1fd693951525image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-1621607600495-1fd693951525image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": "bartoshevicz",
        "total_collections": 0,
        "total_likes": 41,
        "total_photos": 26,
        "accepted_tos": true,
        "for_hire": false
    }
}, {
    "id": "5fx4r4qcdXA",
    "created_at": "2021-05-23T13:40:14-04:00",
    "updated_at": "2021-05-24T02:56:53-04:00",
    "promoted_at": "2021-05-24T00:27:02-04:00",
    "width": 5149,
    "height": 3433,
    "color": "#8c8c73",
    "blur_hash": "L9A0XYIC9dxt}@f9ohJA9aX8%1oe",
    "description": null,
    "alt_description": "white and blue smoke illustration",
    "urls": {
        "raw": "https://images.unsplash.com/photo-1621791554700-35b52803f596?ixid=MnwxMjA3fDB8MXxhbGx8NXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1621791554700-35b52803f596?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8NXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1621791554700-35b52803f596?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8NXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1621791554700-35b52803f596?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8NXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1621791554700-35b52803f596?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8NXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/5fx4r4qcdXA",
        "html": "https://unsplash.com/photos/5fx4r4qcdXA",
        "download": "https://unsplash.com/photos/5fx4r4qcdXA/download",
        "download_location": "https://api.unsplash.com/photos/5fx4r4qcdXA/download?ixid=MnwxMjA3fDB8MXxhbGx8NXx8fHx8fDJ8fDE2MjE4NDA5ODg"
    },
    "categories": [],
    "likes": 33,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": null,
    "user": {
        "id": "ogQykx6hk_c",
        "updated_at": "2021-05-24T03:22:05-04:00",
        "username": "pawel_czerwinski",
        "name": "Pawel Czerwinski",
        "first_name": "Pawel",
        "last_name": "Czerwinski",
        "twitter_username": null,
        "portfolio_url": "http://paypal.me/pmcze",
        "bio": "If you'd like to support me, you can consider a donation ❤ In case you have any questions about how you can use the photos, please read https://help.unsplash.com/en/collections/1463188-unsplash-license 👍 ||| www.instagram.com/pmcze",
        "location": "Poland",
        "links": {
            "self": "https://api.unsplash.com/users/pawel_czerwinski",
            "html": "https://unsplash.com/@pawel_czerwinski",
            "photos": "https://api.unsplash.com/users/pawel_czerwinski/photos",
            "likes": "https://api.unsplash.com/users/pawel_czerwinski/likes",
            "portfolio": "https://api.unsplash.com/users/pawel_czerwinski/portfolio",
            "following": "https://api.unsplash.com/users/pawel_czerwinski/following",
            "followers": "https://api.unsplash.com/users/pawel_czerwinski/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-1592328433409-d9ce8a5333eaimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-1592328433409-d9ce8a5333eaimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-1592328433409-d9ce8a5333eaimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": "pmcze",
        "total_collections": 21,
        "total_likes": 29930,
        "total_photos": 1118,
        "accepted_tos": true,
        "for_hire": false
    }
}, {
    "id": "DTPY6b0RMRk",
    "created_at": "2021-05-21T00:09:13-04:00",
    "updated_at": "2021-05-24T00:50:37-04:00",
    "promoted_at": null,
    "width": 8688,
    "height": 5792,
    "color": "#f3f3f3",
    "blur_hash": "LeH2cgIUs:-:~qofRjt7xctQWAWC",
    "description": null,
    "alt_description": "woman using Surface laptop",
    "urls": {
        "raw": "https://images.unsplash.com/photo-1621570072965-b25917de6ec9?ixid=MnwxMjA3fDF8MXxhbGx8Nnx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1621570072965-b25917de6ec9?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDF8MXxhbGx8Nnx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1621570072965-b25917de6ec9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDF8MXxhbGx8Nnx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1621570072965-b25917de6ec9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDF8MXxhbGx8Nnx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1621570072965-b25917de6ec9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDF8MXxhbGx8Nnx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/DTPY6b0RMRk",
        "html": "https://unsplash.com/photos/DTPY6b0RMRk",
        "download": "https://unsplash.com/photos/DTPY6b0RMRk/download",
        "download_location": "https://api.unsplash.com/photos/DTPY6b0RMRk/download?ixid=MnwxMjA3fDF8MXxhbGx8Nnx8fHx8fDJ8fDE2MjE4NDA5ODg"
    },
    "categories": [],
    "likes": 5,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": {
        "impression_urls": ["https://secure.insightexpressai.com/adServer/adServerESI.aspx?script=false\u0026bannerID=8742296\u0026rnd=[timestamp]\u0026redir=https://secure.insightexpressai.com/adserver/1pixel.gif"],
        "tagline": "Original by design",
        "tagline_url": null,
        "sponsor": {
            "id": "N-JSeSTCz68",
            "updated_at": "2021-05-24T02:56:58-04:00",
            "username": "surface",
            "name": "Surface",
            "first_name": "Surface",
            "last_name": null,
            "twitter_username": "surface",
            "portfolio_url": "http://surface.com",
            "bio": "Follow us @Surface. #OriginalByDesign",
            "location": null,
            "links": {
                "self": "https://api.unsplash.com/users/surface",
                "html": "https://unsplash.com/@surface",
                "photos": "https://api.unsplash.com/users/surface/photos",
                "likes": "https://api.unsplash.com/users/surface/likes",
                "portfolio": "https://api.unsplash.com/users/surface/portfolio",
                "following": "https://api.unsplash.com/users/surface/following",
                "followers": "https://api.unsplash.com/users/surface/followers"
            },
            "profile_image": {
                "small": "https://images.unsplash.com/profile-1587651800415-20eed2ec0209image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
                "medium": "https://images.unsplash.com/profile-1587651800415-20eed2ec0209image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
                "large": "https://images.unsplash.com/profile-1587651800415-20eed2ec0209image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
            },
            "instagram_username": "surface",
            "total_collections": 0,
            "total_likes": 0,
            "total_photos": 141,
            "accepted_tos": true,
            "for_hire": false
        }
    },
    "user": {
        "id": "N-JSeSTCz68",
        "updated_at": "2021-05-24T02:56:58-04:00",
        "username": "surface",
        "name": "Surface",
        "first_name": "Surface",
        "last_name": null,
        "twitter_username": "surface",
        "portfolio_url": "http://surface.com",
        "bio": "Follow us @Surface. #OriginalByDesign",
        "location": null,
        "links": {
            "self": "https://api.unsplash.com/users/surface",
            "html": "https://unsplash.com/@surface",
            "photos": "https://api.unsplash.com/users/surface/photos",
            "likes": "https://api.unsplash.com/users/surface/likes",
            "portfolio": "https://api.unsplash.com/users/surface/portfolio",
            "following": "https://api.unsplash.com/users/surface/following",
            "followers": "https://api.unsplash.com/users/surface/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-1587651800415-20eed2ec0209image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-1587651800415-20eed2ec0209image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-1587651800415-20eed2ec0209image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": "surface",
        "total_collections": 0,
        "total_likes": 0,
        "total_photos": 141,
        "accepted_tos": true,
        "for_hire": false
    }
}, {
    "id": "TxgPq_TRXtQ",
    "created_at": "2021-05-22T16:33:09-04:00",
    "updated_at": "2021-05-23T23:57:01-04:00",
    "promoted_at": "2021-05-23T23:57:01-04:00",
    "width": 1889,
    "height": 2700,
    "color": "#26260c",
    "blur_hash": "LEC7TPl9tkNe-oi^tkoy?]IBIBxt",
    "description": null,
    "alt_description": "black and brown car steering wheel",
    "urls": {
        "raw": "https://images.unsplash.com/photo-1621715070889-7bcdef6fdcf9?ixid=MnwxMjA3fDB8MXxhbGx8N3x8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1621715070889-7bcdef6fdcf9?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8N3x8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1621715070889-7bcdef6fdcf9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8N3x8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1621715070889-7bcdef6fdcf9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8N3x8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1621715070889-7bcdef6fdcf9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8N3x8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/TxgPq_TRXtQ",
        "html": "https://unsplash.com/photos/TxgPq_TRXtQ",
        "download": "https://unsplash.com/photos/TxgPq_TRXtQ/download",
        "download_location": "https://api.unsplash.com/photos/TxgPq_TRXtQ/download?ixid=MnwxMjA3fDB8MXxhbGx8N3x8fHx8fDJ8fDE2MjE4NDA5ODg"
    },
    "categories": [],
    "likes": 23,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": null,
    "user": {
        "id": "bCBUCaMNruM",
        "updated_at": "2021-05-24T03:12:07-04:00",
        "username": "kapsan",
        "name": "Christian Casapu",
        "first_name": "Christian",
        "last_name": "Casapu",
        "twitter_username": null,
        "portfolio_url": null,
        "bio": null,
        "location": "Chisinau, R.Moldova",
        "links": {
            "self": "https://api.unsplash.com/users/kapsan",
            "html": "https://unsplash.com/@kapsan",
            "photos": "https://api.unsplash.com/users/kapsan/photos",
            "likes": "https://api.unsplash.com/users/kapsan/likes",
            "portfolio": "https://api.unsplash.com/users/kapsan/portfolio",
            "following": "https://api.unsplash.com/users/kapsan/following",
            "followers": "https://api.unsplash.com/users/kapsan/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-1579130062098-16c790ae3ccdimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-1579130062098-16c790ae3ccdimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-1579130062098-16c790ae3ccdimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": "kapsann",
        "total_collections": 0,
        "total_likes": 37,
        "total_photos": 10,
        "accepted_tos": true,
        "for_hire": true
    }
}, {
    "id": "m3mYumV2lag",
    "created_at": "2021-05-23T12:32:40-04:00",
    "updated_at": "2021-05-23T23:03:01-04:00",
    "promoted_at": "2021-05-23T23:03:01-04:00",
    "width": 3690,
    "height": 5535,
    "color": "#f3f3f3",
    "blur_hash": "L]JuP^t6a#j]_4s:j@a}oJs:jZWV",
    "description": "Three men standing in green field in front of Grand Teton mountain range",
    "alt_description": null,
    "urls": {
        "raw": "https://images.unsplash.com/photo-1621787211915-83d2cbcf8946?ixid=MnwxMjA3fDB8MXxhbGx8OHx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1621787211915-83d2cbcf8946?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8OHx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1621787211915-83d2cbcf8946?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8OHx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1621787211915-83d2cbcf8946?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8OHx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1621787211915-83d2cbcf8946?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8OHx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/m3mYumV2lag",
        "html": "https://unsplash.com/photos/m3mYumV2lag",
        "download": "https://unsplash.com/photos/m3mYumV2lag/download",
        "download_location": "https://api.unsplash.com/photos/m3mYumV2lag/download?ixid=MnwxMjA3fDB8MXxhbGx8OHx8fHx8fDJ8fDE2MjE4NDA5ODg"
    },
    "categories": [],
    "likes": 20,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": null,
    "user": {
        "id": "MpbJ8qGW8bo",
        "updated_at": "2021-05-24T03:02:11-04:00",
        "username": "jonahbrown",
        "name": "Jonah Brown",
        "first_name": "Jonah",
        "last_name": "Brown",
        "twitter_username": "jonahbrown24",
        "portfolio_url": "https://www.youtube.com/channel/UCxkaphHTf-hlcrh6-Q6FPLg/videos",
        "bio": "Michigan based filmmaker that likes to snap photos between takes.",
        "location": "Kalamazoo, MI",
        "links": {
            "self": "https://api.unsplash.com/users/jonahbrown",
            "html": "https://unsplash.com/@jonahbrown",
            "photos": "https://api.unsplash.com/users/jonahbrown/photos",
            "likes": "https://api.unsplash.com/users/jonahbrown/likes",
            "portfolio": "https://api.unsplash.com/users/jonahbrown/portfolio",
            "following": "https://api.unsplash.com/users/jonahbrown/following",
            "followers": "https://api.unsplash.com/users/jonahbrown/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-1605920877157-3a1ac2126072image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-1605920877157-3a1ac2126072image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-1605920877157-3a1ac2126072image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": "joenuh",
        "total_collections": 0,
        "total_likes": 5,
        "total_photos": 124,
        "accepted_tos": true,
        "for_hire": true
    }
}, {
    "id": "Pu9uW0IHNEg",
    "created_at": "2021-05-22T16:47:43-04:00",
    "updated_at": "2021-05-24T03:21:57-04:00",
    "promoted_at": "2021-05-23T20:36:01-04:00",
    "width": 3225,
    "height": 4837,
    "color": "#f3f3f3",
    "blur_hash": "LvNA6m-;M{of9FR%R%WB0JofxbWB",
    "description": null,
    "alt_description": "woman in brown jacket standing beside white wall",
    "urls": {
        "raw": "https://images.unsplash.com/photo-1621716456281-f6d0ce70764f?ixid=MnwxMjA3fDB8MXxhbGx8OXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1621716456281-f6d0ce70764f?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8OXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1621716456281-f6d0ce70764f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8OXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1621716456281-f6d0ce70764f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8OXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1621716456281-f6d0ce70764f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8OXx8fHx8fDJ8fDE2MjE4NDA5ODg\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/Pu9uW0IHNEg",
        "html": "https://unsplash.com/photos/Pu9uW0IHNEg",
        "download": "https://unsplash.com/photos/Pu9uW0IHNEg/download",
        "download_location": "https://api.unsplash.com/photos/Pu9uW0IHNEg/download?ixid=MnwxMjA3fDB8MXxhbGx8OXx8fHx8fDJ8fDE2MjE4NDA5ODg"
    },
    "categories": [],
    "likes": 17,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": null,
    "user": {
        "id": "ftB4m4H6ILo",
        "updated_at": "2021-05-24T03:02:09-04:00",
        "username": "hugoclb",
        "name": "Hugo Coulbouée",
        "first_name": "Hugo",
        "last_name": "Coulbouée",
        "twitter_username": "hug0clb",
        "portfolio_url": null,
        "bio": "🏔️ Annecy, 74\r\n🙋🏼‍♂️ 19 Ans, Autodidacte  📷 Canon EOS 1200d x 50mm",
        "location": "Annecy",
        "links": {
            "self": "https://api.unsplash.com/users/hugoclb",
            "html": "https://unsplash.com/@hugoclb",
            "photos": "https://api.unsplash.com/users/hugoclb/photos",
            "likes": "https://api.unsplash.com/users/hugoclb/likes",
            "portfolio": "https://api.unsplash.com/users/hugoclb/portfolio",
            "following": "https://api.unsplash.com/users/hugoclb/following",
            "followers": "https://api.unsplash.com/users/hugoclb/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-1588794575070-f8694808367aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-1588794575070-f8694808367aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-1588794575070-f8694808367aimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": "hugoclb",
        "total_collections": 0,
        "total_likes": 40,
        "total_photos": 39,
        "accepted_tos": true,
        "for_hire": true
    }
}, {
    "id": "G_iXK9l8l7Q",
    "created_at": "2021-05-21T14:20:27-04:00",
    "updated_at": "2021-05-23T20:21:02-04:00",
    "promoted_at": "2021-05-23T20:21:02-04:00",
    "width": 3998,
    "height": 4997,
    "color": "#262626",
    "blur_hash": "LUA^UYt7Rjxu_NofRjxu_3ofV@t7",
    "description": null,
    "alt_description": "green trees on brown wooden bridge during daytime",
    "urls": {
        "raw": "https://images.unsplash.com/photo-1621620844630-ecd55a95b7ff?ixid=MnwxMjA3fDB8MXxhbGx8MTB8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1621620844630-ecd55a95b7ff?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTB8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1621620844630-ecd55a95b7ff?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTB8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1621620844630-ecd55a95b7ff?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTB8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1621620844630-ecd55a95b7ff?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTB8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/G_iXK9l8l7Q",
        "html": "https://unsplash.com/photos/G_iXK9l8l7Q",
        "download": "https://unsplash.com/photos/G_iXK9l8l7Q/download",
        "download_location": "https://api.unsplash.com/photos/G_iXK9l8l7Q/download?ixid=MnwxMjA3fDB8MXxhbGx8MTB8fHx8fHwyfHwxNjIxODQwOTg4"
    },
    "categories": [],
    "likes": 43,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": null,
    "user": {
        "id": "piOet34tl5o",
        "updated_at": "2021-05-24T03:07:10-04:00",
        "username": "nathanmcdine",
        "name": "Nathan McDine",
        "first_name": "Nathan",
        "last_name": "McDine",
        "twitter_username": "nathanmcdine",
        "portfolio_url": "https://www.nathanmcdine.co.uk",
        "bio": "Photographer | Marketer 📸\r\n If you like my content, be sure to check out my Instagram (@nathanmcdine).",
        "location": "UK",
        "links": {
            "self": "https://api.unsplash.com/users/nathanmcdine",
            "html": "https://unsplash.com/@nathanmcdine",
            "photos": "https://api.unsplash.com/users/nathanmcdine/photos",
            "likes": "https://api.unsplash.com/users/nathanmcdine/likes",
            "portfolio": "https://api.unsplash.com/users/nathanmcdine/portfolio",
            "following": "https://api.unsplash.com/users/nathanmcdine/following",
            "followers": "https://api.unsplash.com/users/nathanmcdine/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-1621620707567-e2050adbc1eaimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-1621620707567-e2050adbc1eaimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-1621620707567-e2050adbc1eaimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": "nathanmcdine",
        "total_collections": 2,
        "total_likes": 245,
        "total_photos": 143,
        "accepted_tos": true,
        "for_hire": true
    }
}, {
    "id": "k94wMXMHFbE",
    "created_at": "2021-05-23T01:27:15-04:00",
    "updated_at": "2021-05-24T01:25:07-04:00",
    "promoted_at": "2021-05-23T20:06:02-04:00",
    "width": 5584,
    "height": 8368,
    "color": "#d9d9d9",
    "blur_hash": "LvHMDpM{j]ay_4RkbFj[X9W=ayay",
    "description": null,
    "alt_description": "green lake near mountain during daytime",
    "urls": {
        "raw": "https://images.unsplash.com/photo-1621747609281-38853764c986?ixid=MnwxMjA3fDB8MXxhbGx8MTF8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1621747609281-38853764c986?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTF8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1621747609281-38853764c986?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTF8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1621747609281-38853764c986?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTF8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1621747609281-38853764c986?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTF8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/k94wMXMHFbE",
        "html": "https://unsplash.com/photos/k94wMXMHFbE",
        "download": "https://unsplash.com/photos/k94wMXMHFbE/download",
        "download_location": "https://api.unsplash.com/photos/k94wMXMHFbE/download?ixid=MnwxMjA3fDB8MXxhbGx8MTF8fHx8fHwyfHwxNjIxODQwOTg4"
    },
    "categories": [],
    "likes": 63,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": null,
    "user": {
        "id": "NyI9CHJbx1I",
        "updated_at": "2021-05-24T03:02:12-04:00",
        "username": "visuallert",
        "name": "Jonas Allert",
        "first_name": "Jonas",
        "last_name": "Allert",
        "twitter_username": null,
        "portfolio_url": "http://visenda.com",
        "bio": "hi, I'm looking forward to share awesomeness here!",
        "location": "ulm, germany",
        "links": {
            "self": "https://api.unsplash.com/users/visuallert",
            "html": "https://unsplash.com/@visuallert",
            "photos": "https://api.unsplash.com/users/visuallert/photos",
            "likes": "https://api.unsplash.com/users/visuallert/likes",
            "portfolio": "https://api.unsplash.com/users/visuallert/portfolio",
            "following": "https://api.unsplash.com/users/visuallert/following",
            "followers": "https://api.unsplash.com/users/visuallert/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-1601380918797-a7236651e5f0image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-1601380918797-a7236651e5f0image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-1601380918797-a7236651e5f0image?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": "visuallert",
        "total_collections": 3,
        "total_likes": 124,
        "total_photos": 120,
        "accepted_tos": true,
        "for_hire": true
    }
}, {
    "id": "rMXsuun3CuQ",
    "created_at": "2021-05-20T11:09:09-04:00",
    "updated_at": "2021-05-23T20:00:01-04:00",
    "promoted_at": "2021-05-23T20:00:01-04:00",
    "width": 6720,
    "height": 4480,
    "color": "#d9a6a6",
    "blur_hash": "LIKc*1wG0f9s^hVr-oxrScWBr=t3",
    "description": null,
    "alt_description": null,
    "urls": {
        "raw": "https://images.unsplash.com/photo-1621523133136-cea844f32bdf?ixid=MnwxMjA3fDB8MXxhbGx8MTJ8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1",
        "full": "https://images.unsplash.com/photo-1621523133136-cea844f32bdf?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTJ8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=85",
        "regular": "https://images.unsplash.com/photo-1621523133136-cea844f32bdf?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTJ8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
        "small": "https://images.unsplash.com/photo-1621523133136-cea844f32bdf?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTJ8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
        "thumb": "https://images.unsplash.com/photo-1621523133136-cea844f32bdf?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwxMjA3fDB8MXxhbGx8MTJ8fHx8fHwyfHwxNjIxODQwOTg4\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
    },
    "links": {
        "self": "https://api.unsplash.com/photos/rMXsuun3CuQ",
        "html": "https://unsplash.com/photos/rMXsuun3CuQ",
        "download": "https://unsplash.com/photos/rMXsuun3CuQ/download",
        "download_location": "https://api.unsplash.com/photos/rMXsuun3CuQ/download?ixid=MnwxMjA3fDB8MXxhbGx8MTJ8fHx8fHwyfHwxNjIxODQwOTg4"
    },
    "categories": [],
    "likes": 20,
    "liked_by_user": false,
    "current_user_collections": [],
    "sponsorship": null,
    "user": {
        "id": "M8EEMP5UPD8",
        "updated_at": "2021-05-24T02:41:56-04:00",
        "username": "colincyruz",
        "name": "Colin Michel",
        "first_name": "Colin",
        "last_name": "Michel",
        "twitter_username": null,
        "portfolio_url": null,
        "bio": null,
        "location": null,
        "links": {
            "self": "https://api.unsplash.com/users/colincyruz",
            "html": "https://unsplash.com/@colincyruz",
            "photos": "https://api.unsplash.com/users/colincyruz/photos",
            "likes": "https://api.unsplash.com/users/colincyruz/likes",
            "portfolio": "https://api.unsplash.com/users/colincyruz/portfolio",
            "following": "https://api.unsplash.com/users/colincyruz/following",
            "followers": "https://api.unsplash.com/users/colincyruz/followers"
        },
        "profile_image": {
            "small": "https://images.unsplash.com/profile-fb-1621522556-3815074e04d0.jpg?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
            "medium": "https://images.unsplash.com/profile-fb-1621522556-3815074e04d0.jpg?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
            "large": "https://images.unsplash.com/profile-fb-1621522556-3815074e04d0.jpg?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
        },
        "instagram_username": null,
        "total_collections": 0,
        "total_likes": 0,
        "total_photos": 9,
        "accepted_tos": true,
        "for_hire": false
    }
}]

6、从上边返回的是json格式，第一个id就是图片id。我们可以利用id提取数据， "id":"(.*?)" ，括号里就是需要提取的数据。如下图所示：

7、从上图我们可以清楚地看出正则匹配的总数是26，远远超过了图片总数12张，因此提取的还有其他的id。我们继续分析，看到在user里也有一个id，这个id并不是图片的id，用这个id去下载图片，会报404错误，我们用刚才的正则会把这个id提取出来。继续分析数据，发现download链接，没个图片除了id不一样，其他都一样，user里没有这个链接，我们用这个链接提取数据 **"download":"unsplash.com/photos/(.*?…

8、从上图我们看到提取匹配总数是12，正确，因此我们需要添加一个正则提取器，将以上的正则表达式填写到正则提取器中，记得匹配数字填-1，把所有匹配的都提取出来，如下图所示：

9、我们添加一个sampler->Debug Sampler，查看一下是否真的取出我们想要的数据了，如下图所示：

10、保存后，运行Jmeter，点击察看结果树，查看取出的数据，说明id已经被我们取出来了，如下图所示：

11、接下来需要用我们的foreach控制器了 ，对所有的id进行遍历，在控制器里输入变量名称，就是正则表达式里的变量名，如下图所示：

12、在foreach控制器下面再添加一个http请求，用于下载图片  ，就是我们开头写明的下载图片请求，设置与第一个http请求一致，记得将id参数化，用表达式里变量名即可，如下图所示：

13、发送图片下载请求后，我们使用beanshell将图片保存到本地，在请求下，添加后置处理器->BeanShell PostProcessor，编写保存图片脚本，如下图所示：

14、保存图片脚本参考代码如下：

import java.io.*;
import java.text.SimpleDateFormat;
import java.util.Date;

Date date = new Date();
date.getDate();
SimpleDateFormat df = new SimpleDateFormat("yyyymmdd-HHmmss");
String formate = df.format(date);
//string name = vars.get("imgid");
byte[] result = prev.getResponseData();  //这个是获取到请求返回的数据，prev是获取上个请求的返回
String file_name = "E:\photos\" + formate + ".jpg"; //代表存放文件的位置和文件名
File file = new File(file_name);
FileOutputStream out = new FileOutputStream(file);
out.write(result);
out.close();

15、下面我们就可以见证奇迹的时刻了，运行完毕后，察看结果树可以看到运行结果，存放路径中，可以看到下载的图片了，如下图所示：

4.小结

1.在保存到本地图片要创建你代码里写的路径，或者代码中判断有就不创建，没有就创建。
2.主要你的正则表达式是否真的提取到了你需要的数据。
3.细心地小伙伴看到我这里只有12张，但是参数可以循环3次，36张，这是怎么回事了，那是因为宏哥的线程组是1，所以就是12张了。
4.熟练地掌握正则表达式的用法。这里最重要的一步就是正则表达式提取我们想要的关键数据

好了，关于Jmeter爬虫就到这里吧，其实和上一篇的内容也差不多少。