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 …...
伪共享问题如何解决？
伪共享问题是多核处理器环境下常见的性能瓶颈之一，特别是在多线程编程中。想要解决它，就必须先了解缓存行的概念。 缓存行 缓存行是指在 CPU 缓存中最小的数据单位，通常包含一定数量的字节（例如，常见的缓存行大小为 …...
基于web框架的协同过滤的美食推荐系统【数据爬虫、管理系统、数据可更新、样式可调整】
文章目录 有需要本项目的代码或文档以及全部资源，或者部署调试可以私信博主项目介绍研究背景研究的目的与意义协同过滤算法基于用户的协同过滤算法定义基于物品的协同过滤算法的定义 数据库设计db_food（美食信息表）db_collect（美食…...
Eureka中的多实例配置：如何处理微服务实例动态扩展与缩减
Eureka中的多实例配置：如何处理微服务实例动态扩展与缩减 1. 引言 在微服务架构中，服务的动态扩展与缩减是确保系统弹性和高可用性的关键因素。Eureka，作为一个服务注册和发现的组件，扮演着至关重要的角色。它由Netflix开源&…...
Ubuntu 22.04使用 IPTables 配置防火墙
网络安全管理是服务器安全的重要组成部分。在这将介绍在 Ubuntu 22.04 中使用名为 iptables 的软件包管理工具设置防火墙的过程。 IPTables简介 IPTables是一个功能强大的软件包管理工具，可用于大多数Linux发行版，包括Ubuntu 22.04。该工具允许管理员定…...
Java语言程序设计——篇十三（1）
🌿🌿🌿跟随博主脚步，从这里开始→博主主页🌿🌿🌿 欢迎大家：这里是我的学习笔记、总结知识的地方，喜欢的话请三连，有问题可以私信🌳🌳&…...
GB/T 5023.3-2008额定电压450/750V及以下聚氯乙烯绝缘电缆
聚氯乙烯绝缘电缆产品分为固定布线用无护套电缆、固定布线用护套电缆、轻型无护套软电缆、一般用途护套软电缆、安装用电线和屏蔽电线、特殊用途护套软电缆、聚氯乙烯绝缘阻燃/耐火电缆等产品。 GB/T 5023.3-2008额定电压450/750V及以下聚氯乙烯绝缘电缆 第3部分：固…...
深入单例模式
1. 饿汉模式 饿坏了，上来就先实例化一个对象，好处是代码简单，坏处是这个对象后面如果一直用不到，就是个浪费。 public class A{ private static A a new A(); private A(){} public static A getInstance(){ return a; } } 2. 懒…...
MongoDB 单机和集群环境部署教程
目录 一、MongoDB 单机环境部署1. 环境准备2. 安装 MongoDB2.1 在 Ubuntu 上安装 MongoDB2.2 在 CentOS 上安装 MongoDB2.3 启动 MongoDB 服务2.4 验证 MongoDB 安装2.5 MongoDB 基本安全设置 3. 单机部署注意事项 二、MongoDB 集群环境部署1. 环境准备2. MongoDB Replica Set …...
【学习笔记】Day 20
一、进度概述 1、机器学习常识12-18，以及相关代码复现 二、详情 12、SVM（support vector machines，支持向量机） 实际上，支持向量机是一种二分类模型，它将实例的特征向量映射为空间中的一些点，…...
StringBuffer与StringBuilder 2024-8-21 22-13
目录 一、StringBuffer二、StringBuilder三、总结 一、StringBuffer StringBuffer是一个可变的字符序列，它的存在是为了解决频繁操作字符串时产生大量临时对象的问题。 构造方法： StringBuffer()：创建一个空的字符串缓冲区，初始容…...
新疆建设云网站办理程序/微信拓客的最新方法
复盘微信支付金额不正确问题—PHP浮点型计算2020-11-15 11:58:29一、背景在做微信支付项目的时候，微信要求金额的单位必须为分，而数据库中订单金额单位是元，所以使用订单金额*100是正确的做法，但是会经常出现少一分钱的状况&#…...
网站 营销策略/怎么制作个人网站
想必大家在选购戒指的时候都会遇到这些问题-我的手尺寸是多？我对象的手尺寸是多少？今天曼琨钻石就为大家详细解读一下戒指尺寸对照表以及测量方法！曼琨钻石戒指尺寸测量方法1.准备测量工具：绳子、直尺、剪刀、笔。2.用绳子围绕手指…...
做 专而精 的网站/一般开车用什么导航最好
Apache日志文件名称及路径介绍 (推荐学习：apache使用)当我们安装并启动Apache后，Apache会自动生成两个日志文件，这两个日志文件分别是访问日志access_log(在Windows上是access.log)和错误日志error_log(在Windows上是error.log)。如果使用 SS…...
东营网站建设怎么建设/seo公司软件
最近Firefox 4和Firebug 1.7终于正式发布了，大家都积极上手体验了一番，很快有很多关于FF4的研究文章，我最近看了一篇专题文章，主要介绍了FF4与前期版本中js脚本执行方式的差异；当我们想要查看页面中的js脚本执行详情时…...
网站建设背景图/湖南企业seo优化
1.listbox控件如何多选取值 将listbox控件中的selectionmode属性值设置为multiple,listbox控件可以支持多选 取值问题 假设控件为listbox1 Dim i As Integer Dim str As String For i 0 To ListBox1.Items.Count - 1 If ListBox1.Items(i).Selected …...
医院网站建设解决方案/排名前50名免费的网站
// push 方法// 将新元素添加到一个数组结尾，并返回数组的新长度值。var arr4 new Array(tom);var arr4_len arr4.push(520,Hi);console.log(arr4_len); // 3console.log(arr4);// unshift 方法// 将指定的元素插入数组开始位置并返回该数组新长度。var arr4_new …...