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

OpenLayers3, 缩放、平移、复位操作

news 2025/7/8 23:10:09

文章目录

一、前言
二、代码示例

一、前言

本文基于OpenLayers3实现地图缩放、平移和复位操作

二、代码示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head><title>缩放、平移、复位操作</title><link href="../../libs/ol3/ol.css" rel="stylesheet" type="text/css"/><script src="../../libs/ol3/ol.js" type="text/javascript"></script><!--导入本页面外部样式表--><link href="../../css/style.css" rel="stylesheet" type="text/css"/><!--  引入第三方插件库 --><script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script><style type="text/css">#mapCon {width: 100%;height: 90%;position: absolute;}#menu {float: left;position: absolute;bottom: 10px;z-index: 2000;}.tooltip-inner {white-space: nowrap;}</style>
</head>
<body>
<div class="ToolLib"><input type="button" class="ButtonLib" id="zoom-out" value="单击缩小"/><input type="button" class="ButtonLib" id="zoom-in" value="单击放大"/><input type="button" class="ButtonLib" id="panto" value="平移到中国"/><input type="button" class="ButtonLib" id="restore" value="复位"/>
</div>
<div id="map" title="地图显示" style="padding: 5px">
</div><script type="text/javascript">
var tdktk = '****' // 天地图tkvar TiandiMap_vec = new ol.layer.Tile({title: "天地图矢量图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tdktk,wrapX: false})});var Tianditu_cva = new ol.layer.Tile({title: "天地图矢量注记图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tdktk,wrapX: false})});//实例化Map对象加载地图var map = new ol.Map({//地图容器div的IDtarget: 'map',//地图容器中加载的图层layers: [TiandiMap_vec, Tianditu_cva],//地图视图设置view: new ol.View({//地图初始中心点center: [0, 0],//地图初始显示级别zoom: 2,//最小级别minZoom: 1,//最大级别maxZoom: 12//设置旋转角度//rotation: Math.PI / 6})});//地图视图的初始参数var view = map.getView();var zoom = view.getZoom();var center = view.getCenter();var rotation = view.getRotation();//单击缩小按钮功能document.getElementById('zoom-out').onclick = function () {//获取地图视图var view = map.getView();//获得当前缩放级数var zoom = view.getZoom();//地图缩小一级view.setZoom(zoom - 1);};//单击放大按钮功能document.getElementById('zoom-in').onclick = function () {//获取地图视图var view = map.getView();//获得当前缩放级数var zoom = view.getZoom();view.setZoom(zoom + 1);//地图放大一级};view.setZoom(zoom + 1);//平移功能（移到到武汉市）document.getElementById('panto').onclick = function () {//获取地图视图var view = map.getView();var wh = ol.proj.fromLonLat([105, 35]);//平移地图view.setCenter(wh);view.setZoom(5);};//复位功能（复位到初始状态）document.getElementById('restore').onclick = function () {//初始中心点view.setCenter(center);//初始旋转角度view.setRotation(rotation);//初始缩放级数view.setZoom(zoom);};//为内置的缩放控件与旋转控件添加tooltip提示信息$('.ol-zoom-in, .ol-zoom-out').tooltip({//tooltip在右侧显示placement: 'right'});//tooltip在左侧显示$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({placement: 'left'});
</script></body>
</html>

在这里插入图片描述

OpenLayers3, 缩放、平移、复位操作

文章目录一、前言二、代码示例一、前言本文基于OpenLayers3实现地图缩放、平移和复位操作二、代码示例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htm…...

编程日记 2024/8/22 4:02:01

进程与线程（7）

IPC通信方式： 一、共享内存 system v ： 共享内存是一块，内核预留的空间最高效的通信方式 (避免了用户空间到内核空间的数据拷贝) 二、IPC对象操作通用框架： key值 > 申请》读写》关闭》卸载 1.ftok函数：…...

编程日记 2024/8/22 4:00:59

传知代码-自动化细胞核分割与特征分析（论文复现）

代码以及视频讲解本文所涉及所有资源均在传知代码平台可获取引言细胞核分割和分类在医学研究和临床诊断中具有重要意义。精准的细胞核分割能够帮助医生更好地识别和分析细胞核的形态学特征，从而辅助疾病诊断、癌症检测以及药物研发。HoverNet是一种基于深度学…...

编程日记 2024/8/22 3:59:58

Vue UI - 可视化的Vue项目管理器

概述 Vue CLI 3.0 更新后，提供了一套全新的可视化Vue项目管理器 —— Vue UI。所以要想使用它，你的 Vue CL I版本必须要在v3.0以上。一、启动Vue UI 1.1 环境准备 1.1.1 安装node.js 访问官网（外网下载速度较慢）或 http://nod…...

编程日记 2024/8/22 3:57:56

团队管理之敏捷开发

一、敏捷实践敏捷开发中一直秉承的理念和宣言是：我们正在通过亲身实践以及帮助他人实践，揭示更好的软件开发方法。通过这项工作，我们认为：个体和交互胜过过程和工具、可以工作的软件胜过面面俱到的文档、客户合作胜过合同谈判、…...

编程日记 2024/8/22 3:54:53

1、表重命名 ALTER TABLE old_table_name RENAME TO new_table_name;如： ALTER TABLE score4 RENAME TO score5;2、修改表属性值 ALTER TABLE table_name SET TBLPROPERTIES table_properties; table_properties:: (property_name property_value, property…...

编程日记 2024/8/22 3:53:51

MidJourney付费失败的原因以及失败后如何取消或续订（文末附MidJourney，GPT-4o教程）

MidJourney付费失败的原因 MidJourney付费失败的原因可能包括支付方式无效、支付信息错误、网络问题、账户设置问题等。 ‌支付方式无效或信息错误‌：如果用户提供的支付方式（如信用卡）信息不正确，或者支付方式本身不支持该地区…...

编程日记 2024/8/22 3:50:49

PHP安全开发

安全开发 PHP 基础增：insert into 表名(列名 1, 列名 2) value(‘列 1 值 1’, ‘列 2 值 2’); 删：delete from 表名 where 列名 ‘条件’; 改：update 表名 set 列名数据 where 列名 ‘条件’; 查：select * from 表名 wher…...

编程日记 2024/8/22 3:49:48

【大模型从入门到精通32】开源库框架LangChain RAG 系统中的问答技术2

这里写目录标题探索高级问答链类型MapReduce 和 Refine 技术实用建议和最佳实践解决 RetrievalQA 限制结论进一步阅读和探索理论问题实践问题探索高级问答链类型 MapReduce 和 Refine 技术 MapReduce 和 Refine 是设计用来规避由语言模型 (LM) 上下文窗口大小所导致的限制…...

编程日记 2024/8/22 3:48:46

MySQL 数据库管理

在 MySQL 中，数据库管理是非常基础但又至关重要的技能。无论是创建新的数据库、选择当前使用的数据库，还是查看数据库的相关信息，这些操作都是日常数据库管理中不可或缺的一部分。本文将详细介绍 MySQL 数据库管理的基本操作，包括…...

编程日记 2024/8/22 3:46:44

屏幕录制了一个视频，发现有些部分是不需要的，那么我们就用到视频剪辑的工具，利用必剪去删除中间的一部分视频，并且导出，然后利用格式工厂去压缩mp4文件的过程。

1、我们经常会去做一些视频教程或者软件的使用说明等等，做完了以后，会有增加字幕，或者去掉不需要一段视频。 2、打开必剪软件 3、点击【开始制作】先将视频拖动到1的位置，然后将播放区中的视频，拖到2的区域&#xff…...

编程日记 2024/8/22 3:45:43

代码随想录跟练第六天——LeetCode

第454题.四数相加II 力扣题目链接(opens new window) 给定四个包含整数的数组列表 A , B , C , D ,计算有多少个元组 (i, j, k, l) ，使得 A[i] B[j] C[k] D[l] 0。为了使问题简单化，所有的 A, B, C, D 具有相同的长度 N，且 0 ≤ N ≤…...

编程日记 2024/8/22 3:44:42

【Qt】常用控件QCalendarWidget的使用

常用控件QCalendarWidget的使用 QCalendarWidget表示一个日历核心属性属性说明 selectDate 当前选中的⽇期 minimumDate 最⼩⽇期 maximumDate 最⼤⽇期 firstDayOfWeek 每周的第⼀天(也就是⽇历的第⼀列) 是周⼏. gridVisible 是否显⽰表格的边框 selectionMode…...

编程日记 2024/8/22 3:42:40

Nginx: 配置项之main段核心参数用法梳理

概述我们了解下配置文件中的一个全局段，有哪些配置参数，包括后面的 events 字段，有哪些配置参数这里面也有一些核心参数, 对于我们Nginx运行的性能也是有很重要的帮助我们现在首先关注整个 main 段的一个核心参数用法所谓 main 段&#xff…...

编程日记 2024/8/22 3:38:37

密码学之RSA算法

文章目录 1. RSA算法介绍1.2 算法历史与发展1.3 算法应用场景 2. RSA密钥生成2.1 选择素数2.2 计算公钥和私钥2.3 密钥长度与安全性 3 算法原理3.1 加密原理3.2 加密方法3.3 加密示例3.4 代码实现 4. 总结 1. RSA算法介绍 1.2 算法历史与发展 RSA算法由Ron Rivest、Adi Shami…...

编程日记 2024/8/22 3:36:34

教你学习企业高性能web服务器-nginx

一、web服务介绍 1、Apache的三种模型 （1）Apache prefork 预派生模式，有一个主控制进程，然后生成多个子进程，使用select模型，最大并发1024每个子进程有一个独立的线程响应用户请求相对比较占用内存&…...

编程日记 2024/8/22 3:34:33

封装通用第三方平台用户表（微信开放平台）

文章目录一. 注册微信开放平台1.1 开发者资质认证1.2 应用申请1.3 配置应用二.通用数据库表设计三.入库实体类四. 对接第三方平台4.1 微信开放平台VO对象4.2 通用方法我们的系统可能要对接很多第三方系统，为了便利用户授权使用和对多平台账户的管理。有必要设计通…...

编程日记 2024/8/22 3:33:32

【C++】_string类字符串详细解析（1）

假如没有给你生命，你连失败的机会都没有。你已经得到了最珍贵的，还需要抱怨什么!💓💓💓 目录 ✨说在前面 🍋知识点一：什么是string？ •🌰1.string类的概念 •&#x1…...

编程日记 2024/8/22 3:32:31

【Linux】——进程概念（万字解读）

一冯诺依曼体系结构在此之前，我们先要理解我们计算机的冯诺依曼体系结构，因为是进程的基础我们所有的操作其实都是基于这样一个模型，比如你在qq上，和别人发送消息，这个消息肯定是先通过输入设备进行输入&#xf…...

编程日记 2024/8/22 3:28:27

03 serv00搭建WordPress

第一步下载 serv00 官方教程按官方教程下载 WordPress 压缩包，解压，将 WordPress 项目文件夹重命名为 public_html（先删除原来的 public_html） ‍ 第二步安装完成以上步骤后访问你的网站，开始安装 WordPress …...

编程日记 2024/8/22 3:27:26

C++ 基础特性深度解析

目录引言一、命名空间（namespace） C 中的命名空间与 C 语言的对比二、缺省参数 C 中的缺省参数与 C 语言的对比三、引用（reference） C 中的引用与 C 语言的对比四、inline（内联函数…...

编程新知 2025/7/7 15:36:44

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题：3564. 季节性销售分析题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/6/20 12:42:23