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

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

news 2025/7/15 23:22:57

文章目录

一、前言
二、代码示例

一、前言

本文基于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>