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

news2024/11/25 6:28:31

文章目录

一、前言
二、代码示例

一、前言

本文基于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 = '****' // 天地图tk
  var 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的ID
    target: '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>