[TOC]

一、使用步骤

地图控件主要包括：

  • 导航（放大、缩小、复位）
  • 滚动条
  • 鼠标位置
  • 比例尺
  • 鹰眼 ```javascript
  • 实例化控件对象
  • 调用方法加载到map对象中
    <a name="jFcJ1"></a>
### 二、演示
<a name="fZhm9"></a>
#### 2-1 、添加视图跳转控件
![image.png](https://cdn.nlark.com/yuque/0/2022/png/26320209/1648089306290-88f86160-ba56-4d09-92c5-4ffa7b8c3f32.png#clientId=u4f1bac3a-06fc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=296&id=ucefe000d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=266&originWidth=337&originalType=binary&ratio=1&rotation=0&showTitle=false&size=30235&status=done&style=none&taskId=ua89f3d4c-192d-4c88-9a30-b5099e23d74&title=&width=374.44445436383495)
```javascript
//TIAN.js
const key = '8a5c2b00e94b49659861e064c37f778d'
/* 天地图矢量图层 */
const TianDiMap_vec = new ol.layer.Tile({
  title: "天地图矢量图层",
  source: new ol.source.XYZ({
      url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' +
          key,
      wrapX: false
  })
})
/* 天地图注记图层 */
const TianDiMap_cva = new ol.layer.Tile({
  title: "天地图矢量注记图层",
  source: new ol.source.XYZ({
      url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' +
          key,
      wrapX: false
  })
})
/* 天地图影像图层 */
const TianDiMap_img = new ol.layer.Tile({
  title: "天地图影像图层",
  source: new ol.source.XYZ({
      url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' +
          key,
      wrapX: false
  })
})
/* 天地图影像注记图层 */
const TianDiMap_cia = new ol.layer.Tile({
  title: "天地图影像注记图层",
  source: new ol.source.XYZ({
      url: 'http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' +
          key,
      wrapX: false
  })
})
    ```javascript <!DOCTYPE html>