OpenLayers3, 加载鹰眼控件

news2024/12/27 14:29:46

文章目录

一、前言
二、代码实现
三、总结

一、前言

鹰眼图即地图显示范围的缩略图，可显示当前地图窗口在整幅地图中的位置。通过拖动鹰眼图对话框中的矩形框可改变当前地图的显示区域范围，是地图浏览中常用的功能之一。

本案例使用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>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }

        /*=S 自定义鹰眼样式 */
        .ol-custom-overviewmap, .ol-custom-overviewmap.ol-uncollapsible {
            bottom: auto;
            left: auto;
            /* 右侧显示 */
            right: 0;
            /* 顶部显示 */
            top: 0;
        }

        /* 鹰眼控件展开时控件外框的样式 */
        .ol-custom-overviewmap:not(.ol-collapsed) {
            border: 1px solid black;
        }

        /* 鹰眼控件中地图容器样式 */
        .ol-custom-overviewmap .ol-overviewmap-map {
            border: none;
            width: 300px;
        }

        /* 鹰眼控件中显示当前窗口中主图区域的边框 */
        .ol-custom-overviewmap .ol-overviewmap-box {
            border: 2px solid red;
        }

        /* 鹰眼控件展开时其控件按钮图标的样式 */
        .ol-custom-overviewmap:not(.ol-collapsed) button {
            bottom: auto;
            left: auto;
            right: 1px;
            top: 1px;
        }

        /*=E 自定义鹰眼样式 */
    </style>
</head>
<body>
<div id="mapCon">
</div>
<script type="text/javascript">
var tdttk = '******' // 为天地图密钥
  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=" + tdttk,
      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=" + tdttk,
      wrapX: false
    })
  });
  //实例化鹰眼控件（OverviewMap）,自定义样式的鹰眼控件
  var overviewMapControl = new ol.control.OverviewMap({
    //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
    className: 'ol-overviewmap ol-custom-overviewmap',
    //鹰眼中加载同坐标系下不同数据源的图层
    layers: [TiandiMap_vec],
    //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
    collapseLabel: '\u00BB',
    //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
    label: '\u00AB',
    //初始为展开显示方式
    collapsed: false
  });

  //实例化Map对象加载地图
  var map = new ol.Map({
    //地图容器div的ID
    target: 'mapCon',
    //地图容器中加载的图层
    layers: [TiandiMap_vec, Tianditu_cva],
    //地图视图设置
    view: new ol.View({
      //地图初始中心点
      center: [0, 0],
      //地图初始显示级别
      zoom: 6,
      minZoom: 4
    }),
    //加载鹰眼控件
    controls: ol.control.defaults().extend([overviewMapControl])
  });
</script>
</body>
</html>