# 七.Controls 属性

前言

简要介绍一下地图中常见的控件：修改地图信息的 Attribution，全屏效果的 FullScreen，鼠标经过地图时显示坐标点的 MousePosition，概览地图全貌的 OverviewMap，给地图添加比例尺的 ScaleLine

# 1.属性

Attribution: 指定属性是否可以折叠

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>
<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { WebGLTile: TileLayer },
      source: { OSM },
      control: { Attribution, defaults },
    } = ol
    new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [12579156, 3274244],
        zoom: 12,
      }),
      controls: defaults({ attribution: false }).extend([
        new Attribution({ collapsible: true }),
      ]),
    })
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 2.全屏

FullScreen: 控制地图全屏展示

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>
<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { WebGLTile: TileLayer },
      source: { OSM },
      control: { FullScreen, defaults },
    } = ol
    new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [12579156, 3274244],
        zoom: 12,
      }),
      controls: defaults().extend([new FullScreen()]),
    })
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 3.鼠标坐标

MousePosition: 用于在地图上拾取坐标

查看代码详情

<template>
  <div style="position:relative">
    <div ref="map" class="map"></div>
    <div ref="position"></div>
  </div>
</template>
<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { WebGLTile: TileLayer },
      source: { OSM },
      control: { MousePosition, defaults },
      coordinate: { createStringXY },
    } = ol
    new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [12579156, 3274244],
        zoom: 12,
      }),
      controls: defaults({
        attributionOptions: {
          collapsible: true,
        },
      }).extend([
        new MousePosition({
          coordinateFormat: createStringXY(3),
          projection: "EPSG:4326",
          target: this.$refs.position,
        }),
      ]),
    })
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 4.概览图

OverviewMap: 生成地图的一个概览图

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>
<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { WebGLTile: TileLayer },
      source: { OSM },
      control: { OverviewMap, defaults },
    } = ol
    new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [12579156, 3274244],
        zoom: 12,
      }),
      controls: defaults().extend([
        new OverviewMap({
          collapsed: false,
          layers: [
            new TileLayer({
              source: new OSM(),
            }),
          ],
        }),
      ]),
    })
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 5.Rotate

用于鼠标拖拽旋转地图，它会默认加入到地图中。

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>
<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { WebGLTile: TileLayer },
      source: { OSM },
      control: { ZoomToExtent, defaults, Rotate },
    } = ol
    new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [12579156, 3274244],
        zoom: 12,
        rotation: 0.3,
      }),
      controls: defaults({
        rotateOptions: {
          autoHide: false,
          label: "↑",
          tipLabel: "重置旋转0°",
        },
      }).extend([new Rotate()]),
    })
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 6.比例尺

ScaleLine: 用于生成地图比例尺

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>
<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { WebGLTile: TileLayer },
      source: { OSM },
      control: { ScaleLine, defaults },
    } = ol
    new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [12579156, 3274244],
        zoom: 12,
      }),
      controls: defaults().extend([new ScaleLine()]),
    })
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 7.滑块缩放

ZoomSlider: 以滑块的形式缩放地图

查看代码详情

<template>
  <div>
    <h4>默认样式</h4>
    <div id="map1" class="map"></div>
    <h4>放大缩小按钮之间</h4>
    <div id="map2" class="map"></div>
    <h4>水平方向</h4>
    <div id="map3" class="map"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM },
      control: { ZoomSlider },
    } = ol;
    function createMap(divId) {
      const source = new OSM();
      const layer = new TileLayer({
        source: source,
      });
      const map = new Map({
        layers: [layer],
        target: divId,
        view: new View({
          center: [12579156, 3274244],
          zoom: 12,
        }),
      });
      const zoomslider = new ZoomSlider();
      map.addControl(zoomslider);
      return map;
    }

    const map1 = createMap("map1");
    const map2 = createMap("map2");
    const map3 = createMap("map3");
  },
};
</script>
<style>
.map {
  width: 100%;
  height: 400px;
}
#map2 .ol-zoom .ol-zoom-out {
  margin-top: 200px;
}
#map2 .ol-zoomslider {
  background-color: transparent;
  top: calc(0.5em + 2px + 1px + 1.14 * 1.375em);
}
#map2 .ol-touch .ol-zoom .ol-zoom-out {
  margin-top: 212px;
}
#map2 .ol-touch .ol-zoomslider {
  top: 2.75em;
}
#map2 .ol-zoom-in.ol-has-tooltip:hover [role="tooltip"],
#map2 .ol-zoom-in.ol-has-tooltip:focus [role="tooltip"] {
  top: 3px;
}
#map2 .ol-zoom-out.ol-has-tooltip:hover [role="tooltip"],
#map2 .ol-zoom-out.ol-has-tooltip:focus [role="tooltip"] {
  top: 232px;
}
#map3 .ol-zoomslider {
  top: 8px;
  left: auto;
  right: 8px;
  background-color: rgba(255, 69, 0, 0.2);
  width: 200px;
  height: 15px;
  padding: 0;
  box-shadow: 0 0 5px rgb(255, 69, 0);
  border-radius: 7.5px;
}
#map3 .ol-zoomslider:hover {
  background-color: rgba(255, 69, 0, 0.3);
}
#map3 .ol-zoomslider-thumb {
  height: 15px;
  width: 15px;
  margin: 0;
  filter: none;
  background-color: rgba(255, 69, 0, 0.6);
  border-radius: 7.5px;
}
#map3 a.ol-zoomslider-handle:hover {
  background-color: rgba(255, 69, 0, 0.7);
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

# 8.导航

ZoomToExtent:用于将地图视图缩放至特定位置

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>
<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { WebGLTile: TileLayer },
      source: { OSM },
      control: { ZoomToExtent, defaults },
    } = ol
    new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [12579156, 3274244],
        zoom: 2,
      }),
      controls: defaults().extend([
        new ZoomToExtent({
          tipLabel: "缩放至广州",
          label: "Z",
          extent: [12583177, 2639953, 12622469, 2669156],
        }),
      ]),
    })
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 9.普通缩放

Zoom: 普通缩放控件，它会默认加入到地图中

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>
<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { WebGLTile: TileLayer },
      source: { OSM },
      control: { Zoom, defaults },
    } = ol
    new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [12579156, 3274244],
        zoom: 12,
      }),
      controls: defaults().extend([
        new Zoom({
          zoomInLabel: "增",
        }),
      ]),
    })
  },
}
</script>
<style>
.add-zoom {
  color: red;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 10.自定义控件

Control：创建一个“向北旋转”按钮

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM },
      control: { Control, defaults: defaultControls },
    } = ol
    class RotateNorthControl extends Control {
      constructor(opt_options) {
        const options = opt_options || {}
        const button = document.createElement("button")
        button.innerHTML = "N"
        const element = document.createElement("div")
        element.className = "rotate-north ol-unselectable ol-control"
        element.appendChild(button)
        super({
          element: element,
          target: options.target,
        })
        button.addEventListener(
          "click",
          this.handleRotateNorth.bind(this),
          false
        )
      }
      handleRotateNorth() {
        this.getMap().getView().setRotation(0)
      }
    }
    const map = new Map({
      controls: defaultControls().extend([new RotateNorthControl()]),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 3,
        rotation: 1,
      }),
    })
  },
}
</script>
<style>
.rotate-north {
  top: 65px;
  left: 0.5em;
}
.ol-touch .rotate-north {
  top: 80px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

← 七.source 八.Controls 方法 →