当前位置：首页 > news >正文

openlayers入门02 -- 地图控件

news 来源：原创 2025/9/14 10:03:26

地图控件

1.视图跳转控件（ZoomToExtent）

视图跳转控件用于将地图快速跳转到指定的范围。示例：

 // 视图跳转控件（extent这里用的是学校的经纬度范围，可以按照需要修改）
const ZoomToExtent = new ol.control.ZoomToExtent({extent:[114.612,30.457544,114.622,30.457544]
})
map.addControl(ZoomToExtent)

2.放大缩小控件（ZoomSlider）

放大缩小控件用于控制地图的缩放级别，示例：

// 放大缩小控件
const zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider)

3.全屏控件（FullScreen）

全屏控件允许用户将地图切换到全屏模式，示例：

// 全屏控件
const fullScreen = new ol.control.FullScreen();
map.addControl(fullScreen)

4. 鼠标位置控件（MousePosition）

鼠标位置控件用于显示鼠标当前所在位置的坐标，示例：

// 鼠标位置控件
const mousePositionControl = new ol.control.MousePosition({coordinateFormat: ol.coordinate.createStringXY(4), // 设置坐标格式projection: 'EPSG:4326', // 设置投影方式className: 'custom-mouse-position', // 自定义样式类名target: document.getElementById('mouse-position') // 显示位置的元素
});
map.addControl(mousePositionControl);

5. 地图全局视图控件（OverviewMap）

地图全局视图控件（也称为鹰眼控件）用于显示地图的全局视图，示例：

// 地图全局视图控件
const overviewMapControl = new ol.control.OverviewMap({className: 'ol-overviewmap', // 自定义样式类名layers: [new ol.layer.Tile({source: new ol.source.OSM()})], // 设置图层collapseLabel: '≡', // 折叠时的标签label: 'O', // 展开时的标签collapsed: false // 初始是否折叠
});
map.addControl(overviewMapControl);

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.导入ol依赖 --><link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"><script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script><style>.ol-zoomslider {top: 7.5em;}</style>
</head>
<body><!-- 2.设置图的挂载点 --><div id="map"></div><script>// 3.初始化一个高德图层const gaode = new ol.layer.Tile({title: "高德地图",source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',wrapX: false})});// 初始化openlayer地图const map = new ol.Map({// 将初始化的地图设置到id为map的DOM元素上target:"map",layers:[gaode],// 设置视图view:new ol.View({	//（这里用的是学校的经纬度，可以按照需要修改）center:[114.617104,30.457544],// 设置地图的放大级别zoom:17,projection:"EPSG:4326"})})// 视图跳转控件（这里用的是学校的经纬度范围，可以按照需要修改）const ZoomToExtent = new ol.control.ZoomToExtent({extent:[114.612,30.457544,114.622,30.457544]})map.addControl(ZoomToExtent)// 放大缩小控件const zoomslider = new ol.control.ZoomSlider();map.addControl(zoomslider)// 全屏控件const fullScreen = new ol.control.FullScreen();map.addControl(fullScreen)</script></body>
</html>

openlayers入门02 -- 地图控件

地图控件 1.视图跳转控件（ZoomToExtent） 视图跳转控件用于将地图快速跳转到指定的范围。示例： // 视图跳转控件（extent这里用的是学校的经纬度范围，可以按照需要修改） const ZoomToExtent new ol.contro…...

编程日记 2025/9/14 10:03:26

Python 装饰器（Decorator）

文章目录代码解析1. 装饰器定义 timer(func)2. 应用装饰器 timer **执行流程****关键点****实际应用场景****改进版本（带 functools.wraps）** 这是一个 Python 装饰器（Decorator） 的示例，用于测量函数的执行时间。下…...

编程日记 2025/9/14 10:00:50

UE的AI判断队伍归属的机制：IGenericTeamAgentInterface接口

从官方论坛老哥那学来的，优点在于使用项目设置，像配置碰撞一样，能配置碰撞通道对其他碰撞通道的反应，如阻挡，忽略，重叠，全局配置队伍归属，也能配置当前队伍对其他队伍的身份识别&…...

编程日记 2025/9/14 10:00:50

安宝特新闻丨Vuzix Core™波导助力AR，视角可调、高效传输，优化开发流程

Vuzix Core™ 光波导技术近期，Vuzix Core™光波导技术赋能AR新视界！该系列镜片支持定制化宽高比调节及20至40视场角范围，可灵活适配各类显示引擎。通过创新的衍射光波导架构，Vuzix Core™实现了光学传输效率与图像质量的双重突破…...

编程日记 2025/9/14 10:02:45

基于springboot留守儿童网站的设计与实现 docx

收藏关注不迷路！！ 🌟文末获取源码数据库🌟 感兴趣的可以先收藏起来，还有大家在毕设选题（免费咨询指导选题），项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多…...

编程日记 2025/8/17 19:32:48

AST 技术进行 JavaScript 反混淆实战

一、AST 技术核心原理抽象语法树（AST） 是代码的“骨架”，它把代码拆解成一个个节点，就像把一棵大树拆成树枝、树叶一样。通过分析和修改这些节点，我们可以精准地还原代码的逻辑。二、实战案例 1：还原字…...

编程日记 2025/9/14 10:00:50

基于ECharts+Spark的疫情防控数据分析平台(源码+lw+部署文档+讲解)，源码可白嫖!

摘要时代在飞速进步，每个行业都在努力发展现在先进技术，通过这些先进的技术来提高自己的水平和优势，特别是近几年来，新冠疫情出现以来，疫情防控数据分析平台当然不能排除在外。我本次开发的疫情防控数据分析平台是在…...

编程日记 2025/9/14 9:57:20

wireshark过滤器表达式的规则

1.抓包过滤器语法和实例抓包过滤器类型Type（host、net、port）、方向Dir（src、dst）、协议Proto（ether、ip、tcp、udp、http、icmp、ftp等）、逻辑运算符（&&与、|| 或、！非&am…...

编程日记 2025/9/14 10:00:08

使用 Python 扫描 Windows 下的 Wi-Fi 网络实例演示

使用 Python 扫描 Windows 下的 Wi-Fi 网络代码实现代码解析 1. 导入库2. 解码混合编码3. 扫描 Wi-Fi 网络4. 运行函数这是我当前电脑的 wifi 连接界面。这个是运行的效果图： 代码实现我们使用了 Python 的 subprocess 模块来调用 Windows 的内置命令 netsh…...

编程日记 2025/9/14 9:57:58

Redis 字符串（String）详解

1. 什么是字符串类型在 Redis 中，字符串（String） 是最基本的数据类型。它可以包含任何数据，比如文本、JSON、甚至二进制数据（如图片的 Base64 编码），最大长度为 512 MB。字符串在 Redis 中不…...

编程日记 2025/9/14 10:02:43

【Taro3.x + Vue3】搭建微信小程序

IOS环境为例打开终端环境有多种办法，例举一个：在访达里新建一个文件夹，鼠标右键选择。一、先安装Taro的环境 npm install -g tarojs/cli安装完成后，可以输入命令检验是否安装成功： taro --version二、创建项目 …...

编程日记 2025/9/14 10:03:25

P8668 [蓝桥杯 2018 省 B] 螺旋折线

题目思路一眼找规律题，都 1 0 9 10^9 109说明枚举必然超时，找规律，每个点找好像没有什么规律，尝试找一下特殊点，比如：对角线上的点 4 16 36(右上角） 4k^2，看在第几层（…...

编程日记 2025/9/14 9:57:21

【14】数据结构之哈夫曼树篇章

目录标题哈夫曼树哈夫曼树的定义哈夫曼树的构造哈夫曼编码哈夫曼树的实现哈夫曼树哈夫曼树的定义路径：从一个结点到另一个结点的路线树的路径长度：从树根到树中每个结点的路径长度之和结点的权：在一些应用中，赋予树中结点的…...

编程日记 2025/9/14 10:02:10

①创建项目 ②application.yml spring:application:name: pgs-aiai:openai:api-key: sk-vrozloxjpjgkozaggtodbmwyfmubmxqpdpbvbbxpcgleanugbase-url: https://api.siliconflow.cn/chat:options:model: deepseek-ai/DeepSeek-V3 api-key：去硅基流动官网生成你的密钥…...

编程日记 2025/9/14 10:02:09

两个有序序列合并算法分析

一问题背景合并两个有序序列是常见操作，例如在归并排序中。传统方法需要额外空间，时间复杂度为 O(n)。但若要求原地合并（不占用额外内存），则需借助手摇算法（或称内存反转或三次反转算法）。二手摇算法原理手摇算法通过三次反转操作，实现数组片段的原…...

编程日记 2025/9/14 10:02:10

Robot---SPLITTER行星探测机器人

1 背景先给各位读者朋友普及一个航天小知识，截止到目前为止，登陆火星的火星车有哪些？结果比较令人吃惊：当前只有美国和中国登陆过火星。 “勇气”号（Spirit）：2004年1月4日，美国国家…...

编程日记 2025/9/14 9:57:57

kafka的topic扩容分区会对topic任务有什么影响么

在 Kafka 中对 Topic 进行扩容分区会对相关任务产生多方面的影响，下面为你详细介绍： 积极影响增强并发处理能力：Kafka 中数据是以分区为单位进行并行处理的，增加分区数量意味着可以让更多的消费者并行消费数据。比如&#xff0…...

编程日记 2025/9/12 23:04:08

每日一题（小白）模拟娱乐篇27

由题意可以得知这是一道暴力模拟的题目，我们只需要根据题意说的模拟整个过程即可。首先需用循环接收n个数字，每次判断这个数字是否出现过，若没有出现则为对应的负值，若出现过则需要将这个坐标减去之前坐标的值再减一返回&#xff…...

编程日记 2025/9/14 10:00:50

进行性核上性麻痹患者，饮食 “稳” 健康

进行性核上性麻痹作为一种复杂且罕见的神经系统退行性疾病，给患者的身体机能和日常生活带来严重挑战。在积极接受专业治疗的同时，合理的饮食安排对于维持患者营养状况、缓解症状及提升生活质量起着关键作用。以下为患者提供一些健康饮食建议。首先&…...

编程日记 2025/9/9 12:40:08

GitLab之搭建（Building GitLab）

GitLab之搭建 “ 在企业开发过程中，GitLab凭借其强大的版本管理、CI/CD集成和项目管理功能，成为许多团队的首选工具。本文将探讨GitLab的基础介绍、搭建过程、权限管理、代码审查以及团队知识管理等方面。通过详细的步骤和实用的技巧，旨在帮…...

编程日记 2025/9/10 17:19:37

R 语言科研绘图第 38 期 --- 饼状图-玫瑰

在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程日记 2025/9/13 20:18:24

array和list在sql中的foreach写法

在MyBatis中，<foreach>标签用于处理集合或数组类型的参数，以便在SQL语句中动态生成IN子句或其他需要遍历集合的场景。以下是array和list在SQL中的<foreach>写法总结。 <if test"taskIds ! null and taskIds.length > 0">…...

编程日记 2025/9/6 4:19:32

国内MCP服务有哪些？MCP服务器搜索引擎哪家好？

随着MCP（Model Context Protocol）协议的广泛应用，国内出现了越来越多的MCP服务提供商，这些服务覆盖了从开发工具、数据科学到金融、游戏等多个领域。如果你对MCP协议和相关开发感兴趣，可以访问AIbase（htt…...

编程日记 2025/9/12 4:37:57

二叉树的应用

目录一、二叉树遍历算法的应用二、树的存储结构 1、双亲表示法 2、孩子表示法带双亲的孩子链表 3、孩子兄弟表示法（左孩子、右兄弟）较为普遍三、森林与二叉树的转换四、哈夫曼树哈夫曼（Huffman）树的构造一、二叉树…...

编程日记 2025/9/11 1:14:23

【LaTeX】

基本使用 \documentclass 类型：文章（article）、报告（report）、书（book） 中文的文章是ctexart，中文字体是UTF8 \documentclass[UTF8]{ctexart} []说明可以省略不写的意思&#xf…...

编程日记 2025/9/8 16:40:16

Java基础 - 泛型（基本概念）

文章目录基本概念参数化类型类型安全和编译时检查为什么需要泛型？解决类型安全问题避免重复代码提高可读性和维护性泛型（Generics）是编程语言中一种支持参数化类型的特性，允许在定义类、接口、方法时使用类型参数（T…...

编程日记 2025/9/6 1:24:15

面试之《前端信息加密》

前端代码是直接暴漏给用户的，请求的接口也可以通过控制台network看到参数，这是不够安全的，如果遇到坏人想要破坏，可以直接修改参数，或者频繁访问导致系统崩溃，或数据毁坏。所以信息加密在某些场合就变得非…...

编程日记 2025/9/11 12:21:16

【含文档+PPT+源码】基于微信小程序的小区物业收费管理系统

项目视频介绍： 毕业作品基于微信小程序的小区物业收费管理系统课程简介： 本课程演示的是一款基于微信小程序的小区物业收费管理系统，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目…...

编程日记 2025/9/13 1:24:13

KDD 2025 顶会最新力作，多变量时间序列预测登顶！

在多变量时间序列预测领域，如何高效捕捉时间分布变化和通道间复杂关系是两大核心挑战。传统方法往往难以同时处理时间模式的异质性和通道间的噪声影响。近期，基于时频结合的方法在这一领域取得了显著进展。本文总结了两篇创新性论文，分别从时…...

编程日记 2025/9/7 18:17:53

for循环的优化方式、循环的种类、使用及平替方案。

本篇文章主要围绕for循环，来讲解循环处理数据中常见的六种方式及其特点，性能。通过本篇文章你可以快速了解循环的概念，以及循环在实际使用过程中的调优方案。作者：任聪聪日期：2025年4月11日一、循环的种类 1.1 默认有以下类型原始 for 循环 for(i = 0;i<10;i++){…...

编程日记 2025/9/5 6:42:11

OpenFeign 的实现原理详解

前言 OpenFeign 是一个声明式的 HTTP 客户端，它简化了服务间的 HTTP 调用。通过简单的注解和接口定义，开发者可以轻松调用远程服务，而无需手动编写复杂的 HTTP 请求代码。本文将深入探讨 OpenFeign 的实现原理，并结合源码分析其核…...

编程日记 2025/9/7 20:51:48

const关键字理解

const关键字主要的作用是告诉编译器这个东西是个常量，不可被修改。或者是用来和指针玩一些奇奇怪怪的东西，这玩意面试八股文常青树。 const int* p：//表示指针指向的内容不能更改，指针可以更改。 int* const p: //表示指针不能…...

编程日记 2025/9/12 7:25:08

操作系统 4.3-生磁盘的使用

磁盘的物理组成盘面： 磁盘由多个盘面组成，每个盘面上都有数据存储的区域。磁道： 每个盘面上都有若干个同心圆，这些同心圆称为磁道。磁道是数据存储的路径。扇区： 磁道被进一步划分为若干个扇区，扇区…...

编程日记 2025/9/8 20:42:28

Uniapp Vue 实现当前日期到给定日期的倒计时组件开发

应用场景与需求分析在移动端应用开发中，倒计时功能是常见的交互需求，例如限时促销活动、订单超时提醒、考试倒计时等场景。本文将基于 Uniapp 框架，实现一个从当前日期到给定日期的倒计时组件，支持显示 HH:mm:ss 格式的剩余时间…...

编程日记 2025/9/12 16:18:42

3dmax标准材质/vr/cr材质贴图转PBR材质贴图插件,支持多维子材质转换

3dmax标准材质/vr/cr材质贴图转PBR材质贴图插件,支持多维子材质转换 3dmax标准材质/vr/cr材质贴图转PBR材质贴图插件,支持多维子材质转换...

编程日记 2025/8/19 6:24:02

操作系统 3.3-多级页表和快表

分页的问题这张幻灯片讨论了操作系统中内存管理的一个核心问题：页大小与页表大小之间的权衡。页（Page）是内存管理中的一个基本概念，指的是将虚拟内存分割成固定大小的块，以便于管理和访问。页的大小直接影响内存空间…...

编程日记 2025/9/8 9:23:05

Java常用工具算法-7--秘钥托管云服务2（阿里云 KMS）

阿里云的KMS（Key Management Service）也是一种托管式密钥管理服务，帮助用户安全地创建、控制和使用密钥，保护敏感数据。通过使用KSM，您可以专注于构建和优化应用程序，而不必担心密钥管理的复杂性。 1、主要…...

编程日记 2025/9/11 4:48:39

游戏引擎学习第218天

构建并运行，注意一下在调试系统关闭前人物的移动速度现在我准备开始构建项目。如果我没记错的话，我们之前关闭了调试系统，主要是为了避免大家在运行过程中遇到问题。现在调试系统没有开启，一切运行得很顺利，看到那个…...

编程日记 2025/9/9 3:36:34

城电科技 | 光伏太阳花：碳减排路上的璀璨新光光伏智慧花

当谈及 “碳减排” 与 “碳中和”，你脑海中率先浮现的是什么？想必很多人都会想到太阳能发电。太阳能光伏，作为人类取之不尽、用之不竭的绿色清洁能源，具备充分的清洁性、高度的安全性以及相对的广泛性。正因如此，在探讨…...

编程日记 2025/9/5 9:21:44

AI领域再突破，永洪科技荣获“2025人工智能+创新案例”奖

在2025年的今天，人工智能已从技术概念全面渗透至产业核心。中国作为全球AI技术应用的前沿阵地，正通过“人工智能”行动加速推进技术与实体经济深度融合。这一背景下，永洪科技凭借其“国内某头部ICT人力资源板块GenAI项目”荣获“2025全国企业…...

编程日记 2025/8/17 20:44:29

大模型day1 - 什么是GPT

什么是GPT 全称 Generative Pre-trained Transformer 是一种基于 Transformer 架构的大规模预训练语言模型，由OpenAI研发，但GPT仅仅只是借鉴了Transformer 中 Decoder 的部分，并且做了升级 Transformer 架构 Transformer架构是一种用于…...

编程日记 2025/9/7 14:44:15

飞凌嵌入式T527核心板正式发布OpenHarmony4.1系统，实现从芯片架构到操作系统的全链路国产化

飞凌嵌入式FET527N-C核心板正式发布OpenHarmony4.1系统，实现了从芯片架构到操作系统的全链路国产化。该产品具备灵活可编程、高效能运算、低成本控制等多重优势，通过多核异构设计同步支持边缘智能计算与精准实时控制，能够满足智能制造、能源管…...

编程日记 2025/9/9 7:50:56

机动车号牌管理系统设计与实现(代码+数据库+LW)

摘要在如今社会上，关于信息上面的处理，没有任何一个企业或者个人会忽视，如何让信息急速传递，并且归档储存查询，采用之前的纸张记录模式已经不符合当前使用要求了。所以，对机动车号牌信息管理的提升&…...

编程日记 2025/9/11 14:56:11

测试模板1

本篇技术博文摘要 🌟 引言 📘 在这个变幻莫测、快速发展的技术时代，与时俱进是每个IT工程师的必修课。我是盛透侧视攻城狮，一名什么都会一丢丢的网络安全工程师，也是众多技术社区的活跃成员以及多家大厂官方认可人员&a…...

编程日记 2025/9/12 12:00:28

小试牛刀-抽奖程序

编写抽奖程序需求：设计一个抽奖程序，点击抽奖按钮随机抽取一个名字作为中奖者目标：了解项目结构，简单UI布局，属性方法、事件方法，程序运行及调试界面原型待抽奖： 点击抽奖按钮&#x…...

编程日记 2025/9/10 9:47:39

Foundry框架在FISCO BCOS区块链中的高级应用与实战技巧

引言：从入门到精通的进阶之路在看过我发布的《FISCO BCOS区块链智能合约测试利器：Foundry框架从入门到实战》基础上，我们可以进一步深入探索Foundry框架在FISCO BCOS生态中的高级应用场景。Foundry作为一款强大的区块链开发工具集，其功能远不止于基础测试，它还能为FISCO…...

编程日记 2025/9/11 6:58:31

反转链表系列

206. 反转链表 - 力扣（LeetCode） /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int …...

编程日记 2025/9/13 17:09:48

算力租赁：数字经济时代的 “电力革命”—— 从资源租赁到创新生态的范式重构

引言：当算力成为新 “石油”，租赁模式如何重塑商业未来？ 在数字经济浪潮中，算力早已超越传统硬件范畴，成为驱动企业创新的核心生产要素。据 IDC 预测，全球数据总量将在 2025 年突破 175 ZB，而人…...

编程日记 2025/9/10 4:14:25

Go：基本数据

文章目录整数浮点数复数布尔值字符串字符串字面量UnicodeUTF - 8字符串和字节 slice字符串和数字的相互转换常量常量生成器 iota无类型常量整数分类 Go 的整数类型按大小分有 8 位、16 位、32 位、64 位 ，同时有符号整数包括int8、int16、int32、int64 &#…...

编程日记 2025/9/10 4:56:47

金融行业软件介绍

金融，本质为货币资金的融通，是经济活动中至关重要的领域。它围绕货币、信用、利率等核心要素运转，借助银行、证券机构、保险机构等众多主体，在货币市场与资本市场中实现资金的调配与流转，具有优化资源配置、分散风险及…...

编程日记 2025/9/8 20:44:08

地图控件

1.视图跳转控件（ZoomToExtent）

2.放大缩小控件（ZoomSlider）

3.全屏控件（FullScreen）

4. 鼠标位置控件（MousePosition）

5. 地图全局视图控件（OverviewMap）

完整代码

相关文章：