Openlayers学习笔记

# 三.View（一）

View 相关属性与作用

# 1.center

属性 作用 说明
center 视图的初始中心,如果未设置用户投影，则使用 projection 选项指定中心的坐标系。如果未设置，则不会获取图层源，但是稍后可以使用设置中心 坐标[x， y]
查看代码详情 
<template>
  <WebOpenlayers2 :view="view"></WebOpenlayers2>
</template>

<script>
export default {
  data() {
    return {
      view: {
        center: [12579156, 3274244],
        zoom: 4,
      },
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • getCenter 获取视图中心，返回一个地图中心的坐标。
  • setCenter 设置当前视图的中心。任何范围限制都将适用。

# 2.zoom

属性 作用 说明
zoom 地图初始的缩放级别 仅在未定义 resolution 时使用

  • zoom属性

查看代码详情 
<template>
  <WebOpenlayers2 :view="view"></WebOpenlayers2>
</template>

<script>
export default {
  data() {
    return {
      view: {
        center: [12579156, 3274244],
        zoom: 4,
      },
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  • getZoom 获取当前的缩放级别。如果视图不限制分辨率，或者正在进行交互或动画，则此方法可能返回非整数缩放级别。

  • setZoom 缩放到特定的缩放级别。任何分辨率限制都将适用。

  • setMaxZoom 为视图设置新的最大缩放级别。

  • setMinZoom 为视图设置新的最小缩放级别。

查看代码详情 
<template>
  <WebOpenlayers2 ref="map" :view="view">
    <button @click="zoomOut">缩小地图</button>
    <button @click="zoomIn">放大地图</button>
  </WebOpenlayers2>
</template>

<script>
export default {
  data() {
    return {
      view: {
        center: [12579156, 3274244],
        zoom: 4,
      },
    };
  },
  methods: {
    zoomOut() {
      let map = this.refs.map.getInstance();
      const view = map.getView();
      const zoom = view.getZoom();
      view.setZoom(zoom - 1);
    },
    zoomIn() {
      let map = this.refs.map.getInstance();
      const view = map.getView();
      const zoom = view.getZoom();
      view.setZoom(zoom + 1);
    },
  },
};
</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

# 3.maxZoom/minZoom

属性 作用 说明
maxZoom 用于确定分辨率约束的最大缩放级别 -
minZoom 用于确定分辨率约束的最小缩放级别 -
查看代码详情 
<template>
  <WebOpenlayers2 :view="view" @mapMounted="mapMounted"></WebOpenlayers2>
</template>

<script>
export default {
  data() {
    return {
      view: {
        maxResolution: 20000,
        minResolution: 2000,
        maxZoom: 14,
        minZoom: 10,
        center: [12579156, 3274244],
        zoom: 6,
      },
    };
  },
  methods: {
    mapMounted(Map) {},
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  • getMaxZoom 获取视图的最大缩放级别。
  • getMinZoom 获取视图的最小缩放级别。

# 4.minResolution/maxResolution

属性 作用 说明
minResolution 用于确定分辨率约束的最低分辨率 -
maxResolution 用于确定分辨率约束的最大分辨率 -
查看代码详情 
<template>
  <WebOpenlayers2 :view="view"></WebOpenlayers2>
</template>

<script>
export default {
  data() {
    return {
      view: {
        maxResolution: 20000,
        minResolution: 2000,
        maxZoom: 14,
        minZoom: 10,
        center: [12579156, 3274244],
        zoom: 12,
      },
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  • getMaxResolution 获取视图的最大分辨率。
  • getMinResolution 获取视图的最低分辨率

# 5.projection

属性 作用 配置
projection 地图的投影坐标系统 -

可用作 XYZ 的 Retina / HiDPI 墨卡托图块 (512x512px) 示例。

查看代码详情 

<template>
  <WebOpenlayers2  :view="view"></WebOpenlayers2>
</template>

<script>
export default {
  data() {
    return {
      layer: [
        {
          name: "TileLayer",
          source: {
            name: "XYZ",
            config() {
              return {
                url:
                  "https://api.maptiler.com/maps/outdoor/256/{z}/{x}/{y}@2x.png?key=" +
                  mapkeys.maptiler,
                tilePixelRatio: 2,
              };
            },
          },
        },
      ],
      view: {
        center({ transform }) {
          return transform(
            [-116.18688965, 36.057944835],
            "EPSG:4326",
            "EPSG:3857"
          );
        },
        zoom: 12,
      },
    };
  },
};
</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
  • getProjection 获取地图使用的”投影坐标系统”，如 EPSG:4326；

← 四.View（二） →