Openlayers案例8——加载鹰眼控件

最新推荐文章于 2024-05-23 22:30:00 发布

最强大佬

最新推荐文章于 2024-05-23 22:30:00 发布

阅读量622

点赞数 1

分类专栏： WebGIS 前端文章标签： arcgis javascript

本文链接：https://blog.csdn.net/peanut2/article/details/113531279

版权

WebGIS 同时被 2 个专栏收录

9 篇文章 4 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

1.代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>加载鹰眼控件</title>
  <link rel="stylesheet" href="openlayers/css/ol.css">
  <script src="openlayers/build/ol.js"></script>
</head>

<body>
  <div id="map"></div>

  <script>
    // 1. 创建鹰眼图控件
    var overview = new ol.control.OverviewMap({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      collapseLabel: '开', // 鹰眼图展开时按钮标识
      label: '关', // 鹰眼图关闭时按钮标识
      collapsed: false // 设置为false时，鹰眼图在地图初始化时展开
    });

    // 2.创建地图
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM({
            wrapX: false
          }),
          preload: Infinity,
        })
      ],
      view: new ol.View({
        center: [0, 0],
        zoom: 2,
      })
    });

    // 3. 添加鹰眼图
    map.addControl(overview);
  </script>
</body>

</html>

2. 效果图

在这里插入图片描述

参考：郭明强, 黄颖. WebGIS之OpenLayers全面解析第2版, 电子工业出版社.

最强大佬

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Openlayers案例8——加载鹰眼控件

1.代码块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加载鹰眼控件</title> <link rel="stylesheet" href="openlayers/
复制链接

扫一扫