OpenLayers官方示例详解十之导航控件（Navigation Controls）

最新推荐文章于 2024-06-20 18:45:11 发布

不睡觉的怪叔叔

最新推荐文章于 2024-06-20 18:45:11 发布

阅读量3.1k

点赞数

分类专栏：开源GIS

本文链接：https://blog.csdn.net/qq_35732147/article/details/85004796

版权

开源GIS 专栏收录该内容

80 篇文章 354 订阅

订阅专栏

一、示例简介

这个示例展示了如何使用地图定位控件（ol/Control/ZoomToExtent）。

在这个示例中，下面的导航控件将被添加到地图：

ol/control/Zoom（默认添加）
ol/control/ZoomToExtent

二、代码详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Navigation Controls</title>
    <link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script>
</head>
<body>
    <div id="map"></div>

    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            controls: ol.control.defaults().extend([
                // 将用于将地图定位到指定范围的ZoomToExtent控件加入到地图的默认控件中
                new ol.control.ZoomToExtent({
                    extent: [                   // 指定要定位到的范围
                        813079.7791264898, 5929220.284081122,
                        848966.9639063801, 5936863.986909639
                    ]
                })
            ]),
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });

    </script>
</body>
</html>

不睡觉的怪叔叔

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
OpenLayers官方示例详解十之导航控件（Navigation Controls）

一、示例简介这个示例展示了如何使用地图定位控件（ol/Control/ZoomToExtent）。在这个示例中，下面的导航控件将被添加到地图：ol/control/Zoom（默认添加） ol/control/ZoomToExtent 二、代码详解&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;he...
复制链接

扫一扫

专栏目录