OpenLayers官方示例詳解十之導航控制元件（Navigation Controls）
阿新 • • 發佈：2018-12-19
一、示例簡介
這個示例展示瞭如何使用地圖定位控制元件（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>