OpenLayers3, 缩放、平移、复位操作
文章目录
- 一、前言
- 二、代码示例
一、前言
本文基于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…...
进程与线程（7）
IPC通信方式： 一、共享内存 system v ： 共享内存 是一块，内核预留的空间 最高效的通信方式 (避免了用户空间 到 内核空间的数据拷贝) 二、IPC对象操作通用框架： key值 > 申请 》读写 》关闭 》卸载 1.ftok函数：…...
传知代码-自动化细胞核分割与特征分析（论文复现）
代码以及视频讲解 本文所涉及所有资源均在传知代码平台可获取 引言 细胞核分割和分类在医学研究和临床诊断中具有重要意义。精准的细胞核分割能够帮助医生更好地识别和分析细胞核的形态学特征，从而辅助疾病诊断、癌症检测以及药物研发。HoverNet是一种基于深度学…...
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…...
团队管理之敏捷开发
一、敏捷实践 敏捷开发中一直秉承的理念和宣言是：我们正在通过亲身实践以及帮助他人实践，揭示更好的软件开发方法。通过这项工作，我们认为：个体和交互胜过过程和工具、可以工作的软件胜过面面俱到的文档、客户合作胜过合同谈判、…...
Hive3：表的常用修改语句
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…...
MidJourney付费失败的原因以及失败后如何取消或续订（文末附MidJourney，GPT-4o教程）
MidJourney付费失败的原因 MidJourney付费失败的原因可能包括支付方式无效、支付信息错误、网络问题、账户设置问题等。 支付方式无效或信息错误：如果用户提供的支付方式（如信用卡）信息不正确，或者支付方式本身不支持该地区…...
PHP安全开发
安全开发 PHP 基础 增：insert into 表名(列名 1, 列名 2) value(‘列 1 值 1’, ‘列 2 值 2’); 删：delete from 表名 where 列名 ‘条件’; 改：update 表名 set 列名 数据 where 列名 ‘条件’; 查：select * from 表名 wher…...
【大模型从入门到精通32】开源库框架LangChain RAG 系统中的问答技术2
这里写目录标题 探索高级问答链类型MapReduce 和 Refine 技术 实用建议和最佳实践解决 RetrievalQA 限制结论进一步阅读和探索理论问题实践问题 探索高级问答链类型 MapReduce 和 Refine 技术 MapReduce 和 Refine 是设计用来规避由语言模型 (LM) 上下文窗口大小所导致的限制…...
MySQL 数据库管理
在 MySQL 中，数据库管理是非常基础但又至关重要的技能。无论是创建新的数据库、选择当前使用的数据库，还是查看数据库的相关信息，这些操作都是日常数据库管理中不可或缺的一部分。本文将详细介绍 MySQL 数据库管理的基本操作，包括…...
屏幕录制了一个视频，发现有些部分是不需要的，那么我们就用到视频剪辑的工具，利用必剪去删除中间的一部分视频，并且导出，然后利用格式工厂去压缩mp4文件的过程。
1、我们经常会去做一些视频教程或者软件的使用说明等等，做完了以后，会有增加字幕，或者去掉不需要一段视频。 2、打开必剪软件 3、点击【开始制作】 先将视频拖动到1的位置，然后将播放区中的视频，拖到2的区域ÿ…...
代码随想录跟练第六天——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 ≤…...
【Qt】常用控件QCalendarWidget的使用
常用控件QCalendarWidget的使用 QCalendarWidget表示一个日历 核心属性 属性说明 selectDate 当前选中的⽇期 minimumDate 最⼩⽇期 maximumDate 最⼤⽇期 firstDayOfWeek 每周的第⼀天(也就是⽇历的第⼀列) 是周⼏. gridVisible 是否显⽰表格的边框 selectionMode…...
Nginx: 配置项之main段核心参数用法梳理
概述 我们了解下配置文件中的一个全局段，有哪些配置参数，包括后面的 events 字段，有哪些配置参数这里面也有一些核心参数, 对于我们Nginx运行的性能也是有很重要的帮助我们现在首先关注整个 main 段的一个核心参数用法所谓 main 段ÿ…...
密码学之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…...
教你学习企业高性能web服务器-nginx
一、web服务介绍 1、Apache的三种模型 （1）Apache prefork 预派生模式，有一个主控制进程，然后生成多个子进程，使用select模型，最大并发1024每个子进程有一个独立的线程响应用户请求相对比较占用内存&…...
封装通用第三方平台用户表（微信开放平台）
文章目录 一. 注册微信开放平台1.1 开发者资质认证1.2 应用申请1.3 配置应用 二.通用数据库表设计三.入库实体类四. 对接第三方平台4.1 微信开放平台VO对象4.2 通用方法 我们的系统可能要对接很多第三方系统，为了便利用户授权使用和对多平台账户的管理。有必要设计通…...
【C++】_string类字符串详细解析（1）
假如没有给你生命，你连失败的机会都没有。你已经得到了最珍贵的，还需要抱怨什么!💓💓💓 目录 ✨说在前面 🍋知识点一：什么是string？ •🌰1.string类的概念 •…...
【Linux】——进程概念（万字解读）
一 冯诺依曼体系结构 在此之前，我们先要理解我们计算机的冯诺依曼体系结构，因为是进程的基础 我们所有的操作其实都是基于这样一个模型，比如你在qq上，和别人发送消息，这个消息肯定是先通过输入设备进行输入…...
03 serv00搭建WordPress
第一步 下载 serv00 官方教程 按官方教程下载 WordPress 压缩包，解压，将 WordPress 项目文件夹重命名为 public_html（先删除原来的 public_html） 第二步 安装 完成以上步骤后访问你的网站，开始安装 WordPress …...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...
反射获取方法和属性
Java反射获取方法 在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...
Git常用命令完全指南：从入门到精通
Git常用命令完全指南：从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三，HubSpot宣布已构建与ChatGPT的深度集成，这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋，但同时也存在一些关于数据安全的担忧。 许多网络声音声称，这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心，直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法，涵盖基础规则、优化算法和容错机制： 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则： 大尺寸/重量积木在下…...