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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/405553.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SVG的基本图形:直线、圆、椭圆、矩形、多边形等的元素的使用说明。

1、先上个图看一下效果&#xff1a;这里面有直线、圆、矩形、椭圆、多边形。 SVG 可缩放矢量图形&#xff08;Scalable Vector Graphics&#xff09;。 SVG 使用 XML 格式定义图像。 2、代码实现&#xff1a; <svg width"500" height"200" viewBox&…

白酒与家常菜:平凡中的不平凡味道

在日复一日的平凡生活中&#xff0c;家常菜总是扮演着不可或缺的角色。它们简单、朴实&#xff0c;却又承载着家的味道和温暖的记忆。然而&#xff0c;当这些家常菜与豪迈白酒&#xff08;HOMANLISM&#xff09;相遇&#xff0c;一场味蕾的盛宴便在不经意间上演&#xff0c;平凡…

企业级Web服务器性能优化实践指南

目录 引言 一、 Web服务器基础与发展历程 1.互联网与Web服务发展简史 2. Apache与Nginx的性能对比 2.1 Apache服务器 2.2 Nginx服务器 3. 用户访问体验的重要性 3.1 用户速度体验原则 3.2 影响用户体验的因素 4. 服务端I/O流程与性能 4.1 I/O基本概念 4.2 磁盘I/O …

【C++】OJ习题(初阶)

&#x1f680;个人主页&#xff1a;奋斗的小羊 &#x1f680;所属专栏&#xff1a;C 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 &#x1f4a5;1、字符串&#x1f4a5;1.1 字符串相加&#x1f4a5;1.2 验证回文字符串&#x1f4a5;1.3 反转…

leetcode67. 二进制求和,简单模拟

leetcode67. 二进制求和 给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 示例 1&#xff1a; 输入:a “11”, b “1” 输出&#xff1a;“100” 示例 2&#xff1a; 输入&#xff1a;a “1010”, b “1011” 输出&#xff1a;“10101” …

云手机在亚马逊店铺运营中能发挥什么作用

亚马逊作为全球领先的电商平台&#xff0c;汇聚了庞大的用户群体和交易规模&#xff0c;如何有效吸引流量成为亚马逊店铺经营者面临的难题。而云手机作为一种前沿的技术工具&#xff0c;为亚马逊店铺引流带来了全新的解决方案。本文将深入探讨云手机在亚马逊店铺引流中的关键作…

[FSCTF 2023]ez_php1

[FSCTF 2023]ez_php1 点开之后是一段php代码&#xff1a; <?php highlight_file(__FILE__); error_reporting(0); include "globals.php"; $a $_GET[b]; $b $_GET[a]; if($a!$b&&md5($a)md5($b)) {echo "!!!";$c $_POST[FL_AG];if(isset($…

Cohere 创始人:语音是下一代用户界面;OpenAI 开放 GPT-4o 定制新功能丨 RTE 开发者日报

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

网络电话在线呼叫系统支持试用:解锁高效通信

网络电话&#xff0c;又称VoIP&#xff08;Voice over Internet Protocol&#xff09;电话&#xff0c;以其便捷、经济、高效的特点&#xff0c;成为企业通信的新宠。本文将深入探讨网络电话在线呼叫的定义、企业使用的优势&#xff0c;并特别介绍天润融通提供的免费试用服务&a…

用户和用户组、查看权限控制系信息 学会啦!

1.Linux用户管理模式 Linux可以支持多用户、多用户组、用户加入多个组 Linux权限管控的单元是用户级别和用户组级别 2.用户、用户组相关管理命令 groupadd添加组、groupdel删除组 useradd添加用户、userdel删除用户 usermod修改用户组、id命令查看用户信息 getent passwd…

ip地址冲突的原因及其解决方法是什么

在当今的信息化时代&#xff0c;网络已成为我们生活和工作中不可或缺的一部分。然而&#xff0c;随着网络设备数量的不断增加&#xff0c;网络管理中的问题也日益凸显&#xff0c;其中IP地址冲突便是常见问题之一。IP地址冲突不仅会导致网络通信不稳定&#xff0c;甚至可能使设…

超声波清洗机是智商税吗?专业博主分享四大必买超声波清洗机款式

有些人觉得超声波清洗机不过是个“智商税”&#xff0c;花几百块买个小盒子不值当&#xff0c;毕竟自己用手也能清洗。但这种看法过于片面。事实上&#xff0c;超声波清洗已经有几十年的历史&#xff0c;随着科技的发展&#xff0c;现代超声波清洗机不仅能够批量、自动清洁&…

猫咪掉毛严重如何清理?希喂,霍尼韦尔宠物空气净化器实测分享

随着养宠人群的增多&#xff0c;市场关注到铲屎官们的需要&#xff0c;带来了新的科技产品——宠物空气净化器。宠物空气净化器是在普通空气净化器基础上&#xff0c;调整服务对象&#xff0c;为吸附宠物毛发而设计的。不少消费者被它的功能所吸引&#xff0c;打算购入使用。然…

新加坡vps好不好?新加坡vps深度评测

新加坡vps好不好&#xff1f;新加坡VPS是一个好的选择。其优势在于地理位置优越、网络连接快速以及价格合理&#xff1b;劣势在于带宽资源有限、供应商众多导致选择困难、以及安全性和隐私保护问题。下面小编将针对新加坡vps优劣势进行详细分析&#xff1a; 新加坡VPS的优势&a…

认识HarmonyOS

HarmonyOS 三大特性 硬件互助&#xff0c;资源共享 把各终端硬件的能力&#xff0c;虚拟为一个共享的能力资源池&#xff0c;让应用通过系统&#xff0c;调用取其硬件能力。在这种架构下&#xff0c;硬件能力就像“活字印刷术”中的单词字母&#xff0c;可以被无限次的重复使用…

勇闯机器学习(第三关-特征工程)

以下内容皆为原创&#xff0c;制作不易&#xff0c;请帅锅、镁铝点点赞赞和关注吧❥(^_^) 一.提问环节 机器学习是什么&#xff1f; 机器学习就是通过自动分析大量数据去建立模型&#xff0c;训练模型&#xff0c;预测数据。 这么好记的概念&#xff0c;你应该记住了吧&#x…

企业高性能web服务器知识点合集

文章目录 nginx源码编译安装平滑升级及版本回滚平滑升级版本回滚 服务启动脚本核心配置全局配置参数优化调整root与alias自定义错误日志自定义错误页面检测文件是否存在长链接配置下载服务器的配置 nginx高级配置nginx状态页面压缩功能变量内置变量自定义变量 nginx rewrite指令…

MySQL基础知识(二)-超详细 Linux安装MySQL5.7完整版教程及遇到的坑

1.简介 我们经常会在Linux上安装MySQL数据库&#xff0c;但是安装的时候总是会这里错&#xff0c;那里错&#xff0c;不顺利&#xff0c;今天整理了一下安装流程&#xff0c;连续安装来了两遍&#xff0c;没有遇到什么大错误&#xff0c;基本上十分钟左右可以搞定&#xff0c;教…

自行车制造5G智能工厂工业物联数字孪生平台,推进制造业数字化

在当今这个日新月异的数字化时代&#xff0c;制造业正经历着前所未有的变革&#xff0c;自行车制造5G智能工厂工业物联数字孪生平台的兴起&#xff0c;无疑是这场转型浪潮中一股强劲力量。自行车制造5G智能工厂工业物联数字孪生平台的成功应用&#xff0c;不仅仅是技术上的突破…

【Go】实现字符切片零拷贝开销转为字符串

package mainimport ("fmt""unsafe" )func main() {bytes : []byte("hello world")s : *(*string)(unsafe.Pointer(&bytes))fmt.Println(s)bytes[0] Hfmt.Println(s) }slice的底层结构是底层数组、len字段、cap字段。string的底层结构是底层…