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 …...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效，它能挖掘数据中的时序信息以及语义信息，但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN，但是…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作：验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化：测试aof和aof持久化机制，确保数据在开启后正确恢复。 事务：检查事务的原子性和回滚机制。 发布订阅：确保消息正确传递。 2、性…...
Java中HashMap底层原理深度解析：从数据结构到红黑树优化
一、HashMap概述与核心特性 HashMap作为Java集合框架中最常用的数据结构之一，是基于哈希表的Map接口非同步实现。它允许使用null键和null值（但只能有一个null键），并且不保证映射顺序的恒久不变。与Hashtable相比，Hash…...