openlayers的一些简单控件使用语法：controls： ol.control.defaults().extend([ ])_ol.control.defaults is not a function-优快云博客

本文链接：https://blog.youkuaiyun.com/Webgisera/article/details/124815053

效果图如上

代码具体实现如下：

<!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>Simple Map</title>
<link rel="stylesheet" href="../v6.14.1/css/ol.css" />
<script src="../v6.14.1/build/ol.js"></script>
   <style type="text/css">
       #map{
           width: 100%;
           height: 600px;
       }
       #map .ol-zoom .ol-zoom-out{
           margin-top: 204px;
       }
       #map .ol-zoomslider{
           background-color: transparent;
           top: 2.3em;

       }
       #map .ol-zoom-extent{
           top: 280px;
       }
       #map .ol-full-screen{
           top: 30px;
       }
       #map .ol-overviewmap{
           bottom: 30px;
       }
   </style>
</head>
<body>
<div id="map"></div>

<script>
let map = new ol.Map({
target: 'map', // 关联到对应的div容器
layers: [
new ol.layer.Tile({ // 瓦片图层
source: new ol.source.OSM() // OpenStreetMap数据源
})
],
view: new ol.View({ // 地图视图
projection: 'EPSG:3857',
center: [0, 0],
zoom: 0
}),
           controls: ol.control.defaults().extend([ // 往地图增加控件
           new ol.control.ZoomSlider(), //滑块控件
                           new ol.control.ZoomToExtent({ //特定位置控件
                               extent:[
                                   12667718, 2562800,//矩形左上角坐标
                                   12718359, 2597725 //矩形右下角坐标
                               ],

                           }),
                           new ol.control.FullScreen(), //全屏控件
                           new ol.control.MousePosition(),//坐标拾取控件
                           new ol.control.OverviewMap({
                               collasped:false

                           }), //鹰眼控件
                           new ol.control.ScaleLine(), //比例尺控件
           ])
});
</script>
</body>
</html>