OpenLayers 加载动画控件
注：当前使用的是 ol 5.3.0 版本，天地图使用的
key请到天地图官网申请，并替换为自己的key
地图控件是一些用来与地图进行简单交互的工具，地图库预先封装好，可以供开发者直接使用。OpenLayers具有大部分常用的控件，如缩放、导航、鹰眼、比例尺、旋转、鼠标位置等。这些控件都是基于 ol.control.Control基类进行封装的，可以通过Map对象的controls属性或者调用addControl方法添加到地图中。地图控件通过HTML插入到Map页面，可以利用CSS调整地图控件样式。OpenLayers初始化地图时利用ol.control.default默认加载了缩放控件（ol.control.Zoom）
本节主要介绍动画控件。
1. 动画控件
动画控件可用于增强地图的动感效果，带给用户轻松的交互体验，适当的动画效果有利于增加地图体验。本节在原有地图方法上实现旋转定位、弹性定位、反弹定位、自旋转定位、飞行定位等效果。
1.1. 创建动画事件按钮
通过点击定位按钮开启动画。
<div class="animate-div"><button class="animate-btn" id="rotate-to">旋转定位到武汉</button><button class="animate-btn" id="flex-to">弹性定位到北京</button><button class="animate-btn" id="bounce-to">反弹定位到广州</button><button class="animate-btn" id="rotate">围绕西安旋转</button><button class="animate-btn" id="fly-to">飞行定位到杭州</button>
</div>
设置按钮CSS样式
.animate-div{position: relative;margin: 0 auto;padding: 20px;text-align: center;
}
.animate-btn{padding: 5px 10px;border-radius: 5px;font-size: 16px;color: #fff;background: #000000a1;
}
1.2. 创建定位点
分别定义城市坐标点
// 定位点坐标
const wuhan = ol.proj.fromLonLat([114.302387, 30.591255])
const beijing = ol.proj.fromLonLat([116.400739, 39.913359])
const guangzhou = ol.proj.fromLonLat([113.261081, 23.151553])
const xian = ol.proj.fromLonLat([108.951639, 34.351322])
const hangzhou = ol.proj.fromLonLat([120.205736, 30.253831])
1.3. 创建动画控制函数
// 获取反弹值
function bounce(t) {const s = 7.5625const p = 2.75let l = nullif (t < l / p) {l = s*t*t} else {if (t < 2 / p) {t -= 1.5 / pl=s*t*t+0.75} else {if (t < 2.5 / p) {t -= 2.25 / pl = s * t * t + 0.9375} else {t -= 2.625 / pl=s*t*t+0.984375}}}return l
}
// 获取弹性伸缩值
function elastic(t) {return Math.pow(2, -10 * t) * Math.sin(t - 0.075) * (2 * Math.PI) + 1
}
1.4. 创建定位事件函数
分别创建定位事件函数。
// 旋转定位
document.getElementById('rotate-to').onclick = function () {const center = view.getCenter()view.animate({// 第一个过程// 动画结束时的视图中心，即当前视图中心与目标视图中心连线的中心点center: [center[0] + (wuhan[0] - center[0]) / 2,center[1] + (wuhan[1] - center[1]) / 2],rotation: Math.PI,// 动画结束时的旋转角度，即180度easing:ol.easing.easeIn // 控制动画速度，开始缓慢之后逐渐加快}, {// 第二个过程center: wuhan,// 动画结束时的视图中心rotation: 2*Math.PI,// 动画结束时的旋转角度，即360度easing: ol.easing.easeIn // 控制动画速度，开始缓慢之后逐渐加快})
}//弹性伸缩效果定位
document.getElementById('flex-to').onclick = function () {view.animate({center: beijing,duration: 2000,//动画持续时间，单位为毫秒（ms）easing:elastic // 控自动画持续时间函数})
}
// 反弹效果定位
document.getElementById('bounce-to').onclick = () => {view.animate({center: guangzhou,duration: 2000,easing:bounce // 控制动画持续时间函数})
}
// 自旋效果定位
document.getElementById('rotate').onclick = ()=> {const rotation = view.getRotation()view.animate({// 第一个过程rotation: rotation + Math.PI, // 第一次动画旋转角度anchor: xian,// 自旋中心点easing: ol.easing.easeIn // 控自动画持续时间函数}, {// 第二个过程rotation: rotation + 2*Math.PI, // 第二次动画旋转角度anchor: xian,// 自旋中心点easing: ol.easing.easeOut// 控自动画持续时间函数})
}
// 飞行效果定位
document.getElementById('fly-to').onclick = () => {const duration = 2000 //动画持续时间，单位为毫秒（ms）const zoom = view.getZoom()let parts = 2let called = false// 动画完成的回调函数function callback(complete) {--partsif (called) {return}if (parts === 0 || !complete) {called = true} }// 第一个动画view.animate({center: hangzhou,duration: duration,}, callback)// 第二个动画view.animate({zoom: zoom -1 ,duration: duration/2,}, {zoom: zoom,duration:duration / 2},callback)
}
2. View属性Animate参数介绍
| 参数名 | 类型 | 简介 |
|---|---|---|
| center | ol.Coordinate | 动画结束时的视图中心点 |
| zoom | number | 动画结束时的视图缩放级别 |
| resolution | number | 动画结束时的视图分辨率，如果设置了zoom参数，则该参数将被忽略。 |
| rotation | number | 动画结束时的视图旋转角度 |
| anchor | ol.Coordinate | 在动画过程中保持固定的点 |
| duration | number | 动画持续时间，单位为毫秒（ms）,默认为1000ms |
| easing | fucntion | 动画控制函数，默认为ol.easing.inAndOut，该函数会返回一个介于0和1之间的数字，表示目标状态的进度。 |
3. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>加载动画效果控件</title><meta charset="utf-8" /><script src="../libs/js/ol-5.3.3.js"></script><script src="../libs/js/jquery-2.1.1.min.js"></script><link rel="stylesheet" href="../libs/css//ol.css"><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body{width:100%;height:100%;}#map {position: absolute;width: 100%;height: 100%;}.animate-div{position: relative;margin: 0 auto;padding: 20px;text-align: center;}.animate-btn{padding: 5px 10px;border-radius: 5px;font-size: 16px;color: #fff;background: #000000a1;}</style>
</head>
<body><div id="map" title="地图显示"></div><div class="animate-div"><button class="animate-btn" id="rotate-to">旋转定位到武汉</button><button class="animate-btn" id="flex-to">弹性定位到北京</button><button class="animate-btn" id="bounce-to">反弹定位到广州</button><button class="animate-btn" id="rotate">围绕西安旋转</button><button class="animate-btn" id="fly-to">飞行定位到杭州</button></div>
</body>
</html>
<script>//==============================================================================////============================天地图服务参数简单介绍============================////================================vec：矢量图层=================================////================================img：影像图层=================================////================================cva：注记图层=================================////=========================其中：_c表示经纬度，_w表示投影=======================////==============================================================================//const TDTImgLayer = new ol.layer.Tile({title: "天地图影像图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const TDTVecLayer = new ol.layer.Tile({title: "天地图矢量图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const map = new ol.Map({target: "map",// 在加载瓦片图层时开启动画效果loadTilesWhileAnimate:true,loadTilesWhileInteracting: true,view: new ol.View({// center: [11444274, 12707441],center: [12992990, 13789010],// center: ol.proj.fromLonLat([102,25.5]),zoom: 15,worldsWrap: true,minZoom: 1,maxZoom: 20,}),controls: ol.control.defaults().extend([new ol.control.MousePosition()])})map.addLayer(TDTVecLayer)map.addLayer(TDTImgLayer)// 定位点坐标const wuhan = ol.proj.fromLonLat([114.302387, 30.591255])const beijing = ol.proj.fromLonLat([116.400739, 39.913359])const guangzhou = ol.proj.fromLonLat([113.261081, 23.151553])const xian = ol.proj.fromLonLat([108.951639, 34.351322])const hangzhou = ol.proj.fromLonLat([120.205736, 30.253831])// 获取反弹值function bounce(t) {const s = 7.5625const p = 2.75let l = nullif (t < l / p) {l = s*t*t} else {if (t < 2 / p) {t -= 1.5 / pl=s*t*t+0.75} else {if (t < 2.5 / p) {t -= 2.25 / pl = s * t * t + 0.9375} else {t -= 2.625 / pl=s*t*t+0.984375}}}return l}// 获取弹性伸缩值function elastic(t) {return Math.pow(2, -10 * t) * Math.sin(t - 0.075) * (2 * Math.PI) + 1}const view = map.getView()// 旋转定位document.getElementById('rotate-to').onclick = function () {const center = view.getCenter()view.animate({// 第一个过程// 动画结束时的视图中心，即当前视图中心与目标视图中心连线的中心点center: [center[0] + (wuhan[0] - center[0]) / 2,center[1] + (wuhan[1] - center[1]) / 2],rotation: Math.PI,// 动画结束时的旋转角度，即180度easing:ol.easing.easeIn // 控制动画速度，开始缓慢之后逐渐加快}, {// 第二个过程center: wuhan,// 动画结束时的视图中心rotation: 2*Math.PI,// 动画结束时的旋转角度，即360度easing: ol.easing.easeIn // 控制动画速度，开始缓慢之后逐渐加快})}//弹性伸缩效果定位document.getElementById('flex-to').onclick = function () {view.animate({center: beijing,duration: 2000,//动画持续时间，单位为毫秒（ms）easing:elastic // 控自动画持续时间函数})}// 反弹效果定位document.getElementById('bounce-to').onclick = () => {view.animate({center: guangzhou,duration: 2000,easing:bounce // 控制动画持续时间函数})}// 自旋效果定位document.getElementById('rotate').onclick = ()=> {const rotation = view.getRotation()view.animate({// 第一个过程rotation: rotation + Math.PI, // 第一次动画旋转角度anchor: xian,// 自旋中心点easing: ol.easing.easeIn // 控自动画持续时间函数}, {// 第二个过程rotation: rotation + 2*Math.PI, // 第二次动画旋转角度anchor: xian,// 自旋中心点easing: ol.easing.easeOut// 控自动画持续时间函数})}// 飞行效果定位document.getElementById('fly-to').onclick = () => {const duration = 2000 //动画持续时间，单位为毫秒（ms）const zoom = view.getZoom()let parts = 2let called = false// 动画完成的回调函数function callback(complete) {--partsif (called) {return}if (parts === 0 || !complete) {called = true}}// 第一个动画view.animate({center: hangzhou,duration: duration,}, callback)// 第二个动画view.animate({zoom: zoom -1 ,duration: duration/2,}, {zoom: zoom,duration:duration / 2},callback)}
</script>
❝
OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
❝
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !
相关文章：
OpenLayers 加载动画控件
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图控件是一些用来与地图进行简单交互的工具，地图库预先封装好，可以供开发者直接使用。OpenLayers具有大部分常用的控件&#x…...
Oracle 基础知识作业的使用
对于DBA来说，数据库Job再熟悉不过了，因为经常要数据库定时的自动执行一些脚本，或做数据库备份，或做数据的提炼，或做数据库的性能优化，包括重建索引等等的工作。 Oracle 视图 User_Jobs 是Oracle数据库中的一…...
HTTP协议初认识、速了解
目录 1. 什么是HTTP协议 2. HTTP协议特点 3. HTTP协议发展和版本 3.1. HTTP1.0 3.2. HTTP1.1 3.3. HTTP2.0 3.4. http1.1和http2.0区别 4. HTTP协议中URI、URL、URN 4.1. URI 4.2. URL 4.3. URN 5. HTTP协议的请求 5.1. HTTP协议中的请求信息 5. 总结 前言 本文讲…...
C#：多线程Task使用
一.Task与Thread Task是架构在Thread之上的，也就是说任务最终还是要抛给线程去执行。Task跟Thread不是一对一的关系，比如开10个任务并不是说会开10个线程，这一点任务有点类似线程池，但是任务相比线程池有很小的开销和精确的控制。…...
模拟电子技术基础----绪论
一、电子技术的发展 1.电子技术的发展，推动计算机技术的发展，使之“无孔不入”，应用广泛！ •广播通信：发射机、接收机、扩音、录音、程控交换机、电话、手机 •网络：路由器、ATM交换机、收发器、调制解调…...
从零基础到最佳实践：Vue.js 系列（2/10）：《模板语法与数据绑定》
Vue.js 模板语法与数据绑定：从基础到实践 关键点 Vue.js 的模板语法使用 HTML 结合特殊指令（如 v-bind、v-on），实现动态界面。插值（{{ }}）显示数据，指令控制 DOM 行为，双向绑定简化…...
iOS 使用 - 设置 来电震动/关闭震动
来电震动是一个很直观的老功能。但到了iOS 18，苹果却把震动功能的开关藏得越来越深，甚至分散在不同的菜单里，让用户难以找到。这里记录分享设置方法： 1. 震动开关的路径 设置 → 通用 → 辅助功能 → 触控 → 震动 2. 来电震动…...
anaconda、miniconda、conda的关系及miniconda安装
anaconda、miniconda、conda的关系及miniconda安装 文章目录 前言正文定义关系Linux安装miniconda新建一个python3.8环境 参考 前言 本文用于记录关于Anaconda、conda和Miniconda的定义及其关系的总结123： 正文 定义 conda 一个跨平台的开源包管理和环境管理工具…...
[C语言初阶]扫雷小游戏
目录 一、原理及问题分析二、代码实现2.1 分文件结构设计2.2 棋盘初始化与打印2.3 布置雷与排查雷2.4 游戏主流程实现 三、后期优化方向 在上一篇文章中，我们实现了我们的第二个游戏——三子棋小游戏。这次我们继续结合我们之前所学的所有内容，制作出我们…...
谷歌medgemma-27b-text-it医疗大模型论文速读：多语言大型语言模型医学问答基准测试MedExpQA
《MedExpQA: 多语言大型语言模型医学问答基准测试》论文解析 一、引言 论文开篇指出大型语言模型（LLMs）在医学领域的巨大潜力，尤其是在医学问答（QA）方面。尽管LLMs在医学执照考试等场景中取得了令人瞩目的成绩&#…...
Lambda表达式的高级用法
今天来分享下Java的Lambda表达式，以及它的高级用法。 使用它可以提高代码的简洁度，使代码更优雅。 一、什么是lambda表达式 Lambda 表达式是 Java 8 引入的特性，用于简化匿名内部类的语法，使代码更简洁，尤其在处理函…...
:如何利用CDN技术实现页面加速？)
速盾(sudun):如何利用CDN技术实现页面加速？
随着互联网内容的爆炸式增长，用户对网页加载速度的要求也越来越高。快速加载的网页不仅能提升用户体验，还能直接影响搜索引擎排名和网站转化率。内容分发网络（CDN）作为一种有效的解决方案，通过在全球范围内部署多个高性…...
DeepSeek+白果AI论文：开启答辩PPT生成的「智能双引擎」时代
2025学术答辩革新：DeepSeek与白果AI论文的黄金协同方案 白果Ai论文，论文写作神器~ https://www.baiguoai.com/ 在学术答辩的「战场」上，「选题创新不足」「数据可视化低效」「PPT逻辑断裂」等痛点长期困扰研究者。DeepSeek与白果AI论文的深…...
Jest入门
快速入门 Jest中文文档 | Jest中文网 1.下载：npm install --save-dev jest 2.创建 sum.js 文件： function sum(a, b) { return a b; } module.exports sum; 3.创建sum.test.js 的文件 const sum require(./sum); test(adds 1 2 to equal 3,…...
SDC命令详解：使用set_logic_dc命令进行约束
相关阅读 SDC命令详解https://blog.csdn.net/weixin_45791458/category_12931432.html?spm1001.2014.3001.5482 set_logic_dc命令可以将当前设计中的输入端口为不关心（设置端口的driven_by_dont_care属性为true），该端口在综合是可以被认为是…...
小程序涉及提供提供文本深度合成技术,请补充选择：深度合成-AI问答类目
一、问题描述 最近新项目AI咨询小程序审核上线，按照之前小程序的流程，之前审核，提示审核不通过，审核不通过的原因：小程序涉及提供提供文本深度合成技术 (如: AI问答) 等相关服务，请补充选择：深…...
SQL每日一练（2）
表： 产品表 p product_idproduct_name1产品 A2产品 B3产品 C 销售表 s sale_idproduct_idcountryamountsale_date11法国1000.002020-09-1522法国1500.002020-09-2033法国800.002020-09-1041英国1200.002020-09-2552英国1600.002020-09-0563英国900.002020-09-30…...
基于亚博K210开发板——lvgl 图形化实验
开发板 亚博K210开发板 实验目的 本次测试主要学习 K210 图形化操作界面的功能。 实验元件 LCD 显示屏、FT6236 触摸板 lvgl 图形化库简介 LVGL（轻度综合图形界面库）是一个免费开源图形库，具有使用方便，画面美观ÿ…...
LABVIEW 通过节点属性动态改变数值显示控件的方法
在 LabVIEW 里，能够借助属性节点来改变数值输入控件的禁用状态。下面为你介绍具体的操作步骤： 1. 创建或开启前面板 要先创建一个数值输入控件，操作方法是：点击 "控件" 选板，接着选择 "新式→数值→数…...
信息安全管理与评估2025上海卷
上海市“星光计划”第十一届职业院校技能大赛 （高职组） “信息安全管理与评估”赛项 任务书 一、 赛项时间共计4小时。二、 赛项信息 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 第一阶段 平台搭建与安全设备 配置防护 任务1 网络平台搭建 2…...
el-form 使用el-row el-col对齐 注意事项
1.el-form 使用inline，el-form-item宽度会失效。 2.为了保证el-form-item 和 它内部的el-input 能在一行，要设置el-form-item的label-width <el-form :model"editInspectform"><el-row style"margin-bottom: 20px"><…...
使用Terraform创建azure databrick
Azure Databricks 介绍 Azure Databricks是一种在Microsoft Azure云平台上运行的快速、易于使用的分析和大数据处理服务。它是基于Apache Spark的分析平台，可帮助用户以更高效的方式进行数据处理、数据分析和机器学习任务。Azure Databricks提供了一个协作式的工作环境，使数…...
Python爬虫开发基础案例：构建可复用的名言采集系统
一、项目背景与技术选型 1.1 爬虫技术应用场景 网络爬虫作为数据采集的核心技术，在舆情监控、价格比对、学术研究等领域发挥着重要作用。本案例选择quotes.toscrape.com作为目标网站，因其具有以下典型特征： 公开允许爬取的测试环境清晰的H…...
Spring Boot 中修改 HTTP 响应状态码（即 `response.status`）可以通过以下几种方式实现
以下是不同场景下的具体方法： 方法 1：直接使用 ResponseStatus 注解 在 Controller 方法或异常类上使用 ResponseStatus 注解，直接指定返回的状态码。 场景示例：固定返回指定状态码 import org.springframework.http.HttpStatu…...
Linux目录介绍+Redis部署(小白篇)
目录 👑Linux基础✨【目录】 👑Redis 安装1.下载压缩包2.解压3.安装编译环境4.安装到本地5.设置开机自启 👑Linux 自启服务 👑Linux基础 虽然在大二的时候学过Linux，但是很多基础知识都忘了，想再次从基础捡…...
软件开发MVC三层架构杂谈
在当今的软件开发领域，MVC（Model-View-Controller）架构已成为构建复杂系统时不可或缺的设计模式。它通过将应用程序划分为模型（Model）、视图（View）和控制器（Controller）三…...
Python 基础语法速查手册：从入门到精通
Python 作为最受欢迎的编程语言之一，以其简洁易读的语法和强大的功能吸引了大量开发者。本文全面汇总 Python 基础语法知识，帮助初学者快速掌握核心概念，并为后续深入学习打下坚实基础。 1. Python 基础语法结构 1.1 代码结构与缩进规则 Py…...
Spring框架--IOC技术
一、Spring框架的介绍 1、Spring框架的概述 Spring 是一个开放源代码的设计层面框架，它解决的是业务逻辑层和其他各层的松耦合问题，因此它将面向接口的编程思想贯穿整个系统应用。Spring是于2003年兴起的一个轻量级的Java开发框架，由 Rod Jo…...
前端vue2-完全前端生成pdf-＞pdf-lib,html2canvas+jspdf,原生打印，三种方式（打印带有echarts图的pdf）
pdf-lib：优点是可以控制输出内容，缺点是麻烦 html2canvas：优点是直接把html页面转成图片之后插入pdf很方便，不用过多的代码，缺点是不好控制图片大小，容易被戒断，可以把想打印的内容藏在页面外面…...
论文阅读笔记——Emerging Properties in Unified Multimodal Pretraining
BAGEL 论文 商业闭源系统与学术/开源模型的差距很大，BAGEL 旨在通过开源统一架构大规模交错数据主要解决： 架构割裂：理解/生成分属两条网络，信息被压缩在少量条件 token 中，长上下文推理受限。数据贫乏：主…...