Openlayers案例3——加载缩放滑块控件

最新推荐文章于 2024-12-20 13:27:28 发布

最强大佬

最新推荐文章于 2024-12-20 13:27:28 发布

阅读量592

点赞数

CC 4.0 BY-SA版权

分类专栏： WebGIS 文章标签： arcgis

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

WebGIS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在WebGIS中使用OpenLayers库创建一个带有滑块的缩放控件，同时展示了如何设置预设的视图范围。通过CSS和JavaScript代码展示了地图的交互式缩放功能及其外观定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
  <style type="text/css">
    #map {
      width: 100%;
      height: 95%;
      position: absolute;
    }

    /* 缩放滑块控件ZoomSlider的样式，放置到缩放按钮之间实现导航条功能*/
    #map .ol-zoom .ol-zoom-out {
      margin-top: 204px;
    }

    #map .ol-zoomslider {
      background-color: transparent;
      top: 2.3em;
    }

    #map .ol-touch .ol-zoom .ol-zoom-out {
      margin-top: 212px;
    }

    #map .ol-touch .ol-zoomslider {
      top: 2.75em;
    }

    #map .ol-zoom-in .ol.has-tooltip:hover[role=tooltip],
    #map .ol-zoom-in .ol-has-tooltip:focus[role=tooltip] {
      top: 3px;
    }

    #map .ol-zoom-out .ol-has-tooltip:hover[role=tooltip],
    #map .ol-zoon-out .ol-has-out-tooltip:focus[role=tooltip] {
      top: 232px;
    }

    #map .ol-zoom-extent {
      top: 280px;
    }
  </style>
</head>

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

  <script>
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM(),
        })
      ],
      view: new ol.View({
        center: [0, 0],
        zoom: 2,
      })
    });

    // 滑块控件，拖动滑块实现地图缩放
    var slider = new ol.control.ZoomSlider();
    map.addControl(slider);

    // 所放置指定范围，extent四个点为EPSG: 3857坐标系
    var zoomToExtent = new ol.control.ZoomToExtent({
      extent: [
        13100000, 4290000,
        13200000, 5210000
      ]
    });
    map.addControl(zoomToExtent);
  </script>
</body>

</html>