Openlayers学习笔记

# 四.View（二）

# 1 旋转约束

属性 作用 配置
constrainRotation 旋转约束 -
查看代码详情 
<template>
  <WebOpenlayers2 :view="view"></WebOpenlayers2>
</template>

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

# 2 多世界

属性 作用 配置
multiWorld 如果为 false，则视图受到约束，因此只能看到一个世界，并且您无法平移边缘 -
查看代码详情 
<template>
  <WebOpenlayers2 :view="view"></WebOpenlayers2>
</template>

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

# 3 旋转

属性 作用 配置
rotation 以弧度为单位的视图的初始旋转（顺时针正旋转，0 表示北） -
查看代码详情 
<template>
  <WebOpenlayers2 :view="view"></WebOpenlayers2>
</template>

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

# 4 旋转控制

属性 作用 配置
enableRotation 旋转控制 -
查看代码详情 
<template>
  <WebOpenlayers2 :view="view"></WebOpenlayers2>
</template>

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

# 5 分辨率

属性 作用 配置
resolution 地图的分辨率，单位并不是普通的单位面积的像素，而是单位像素表示的距离单位，比如 米/像素 -
查看代码详情 
<template>
  <WebOpenlayers2 :view="view"></WebOpenlayers2>
</template>

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

# 6 分辨率比率

属性 作用 配置
resolutions 如果指定，则确定缩放级别的分辨率 -
查看代码详情 
<template>
  <WebOpenlayers2 :view="view"></WebOpenlayers2>
</template>

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

# 7 限制视图

属性 作用 配置
extent 地图视图的初始范围 数组对象 – [left, bottom, right, top]
查看代码详情 
<template>
  <WebOpenlayers2 :view="view"></WebOpenlayers2>
</template>

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

# 8 范围约束

属性 作用 配置
constrainOnlyCenter 如果为真，范围约束仅适用于视图中心，而不适用于整个范围 -
查看代码详情 

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

<script>
export default {
  data() {
    return {
      view: {
       center: fromLonLat([-116.18688965, 36.057944835]),
        zoom: 15,
        maxZoom: 18,
        constrainOnlyCenter: true,
      },
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 9 范围约束

属性 作用 配置
smoothExtentConstraint 如果为真，范围约束将平稳应用，即允许视图略微超出给定 extent -
查看代码详情 

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

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

# 10 constrainResolution

如果为真，视图在交互后将始终动画到最近的缩放级别；false 表示允许中间缩放级别

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

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

# 11 smoothResolutionConstraint

如果为真，分辨率最小/最大值将顺利应用，即允许视图略微超过给定的分辨率或缩放边界

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

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

# 12 showFullExtent

允许缩小视图以显示完整的配置范围

富文本标签

查看代码详情 
<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  export default {
    mounted() {
      let {
        format: { GeoJSON },
        Map,
        View,
        layer: { Vector: VectorLayer },
        source: { Vector: VectorSource },
        style: { Fill, Stroke, Style, Text },
      } = ol
  
      const map = new Map({
        target: this.$refs.map,
        view: new View({
          center: [12579156, 3274244],
          zoom: 2,
          extent: [-13882269, 2890586, -7456136, 6340207],
          showFullExtent: true,
        }),
      })
  
      const labelStyle = new Style({
        text: new Text({
          font: "13px Calibri,sans-serif",
          fill: new Fill({
            color: "#000",
          }),
          stroke: new Stroke({
            color: "#fff",
            width: 4,
          }),
        }),
      })
      const countryStyle = new Style({
        fill: new Fill({
          color: "rgba(255, 255, 255, 0.6)",
        }),
        stroke: new Stroke({
          color: "#319FD3",
          width: 1,
        }),
      })
      const style = [countryStyle, labelStyle]
  
      const vectorLayer = new VectorLayer({
        background: "white",
        source: new VectorSource({
          url: "https://openlayers.org/data/vector/us-states.json",
          format: new GeoJSON(),
        }),
        style: function (feature) {
          labelStyle
            .getText()
            .setText([
              feature.getId(),
              "bold 13px Calibri,sans-serif",
              ` ${feature.get("name")}`,
              "",
              "\n",
              "",
              `${feature.get("density")} people/mi²`,
              "italic 11px Calibri,sans-serif",
            ])
          return style
        },
      })
  
      map.addLayer(vectorLayer)
    },
  }
  </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
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

# 1.常用方法：

  • getRotation 获取视图旋转。

查看代码详情 
<template>
  <div>
    <div ref="map" class="map"></div>
    <button ref="rotateleft" title="Rotate clockwise">↻</button>
    <button ref="rotateright" title="Rotate counterclockwise">↺</button>
    <button ref="pantolondon">平移到伦敦</button>
    <button ref="elastictomoscow">弹跳到莫斯科</button>
    <button ref="bouncetoistanbul">跳到伊斯坦布尔</button>
    <button ref="spintorome">旋转到罗马</button>
    <button ref="flytobern">飞往伯尔尼</button>
    <button ref="rotatearoundrome">绕罗马旋转</button>
    <button ref="tour">Take a tour</button>
  </div>
</template>
  
  <script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM },
      easing: { easeIn, easeOut },
      proj: { fromLonLat },
    } = ol;
    const london = fromLonLat([-0.12755, 51.507222]);
    const moscow = fromLonLat([37.6178, 55.7517]);
    const istanbul = fromLonLat([28.9744, 41.0128]);
    const rome = fromLonLat([12.5, 41.9]);
    const bern = fromLonLat([7.4458, 46.95]);
    const view = new View({
      center: istanbul,
      zoom: 6,
    });
    const map = new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          preload: 4,
          source: new OSM(),
        }),
      ],
      view: view,
    });
    function bounce(t) {
      const s = 7.5625;
      const p = 2.75;
      let l;
      if (t < 1 / p) {
        l = s * t * t;
      } else {
        if (t < 2 / p) {
          t -= 1.5 / p;
          l = s * t * t + 0.75;
        } else {
          if (t < 2.5 / p) {
            t -= 2.25 / p;
            l = s * t * t + 0.9375;
          } else {
            t -= 2.625 / p;
            l = s * t * t + 0.984375;
          }
        }
      }
      return l;
    }
    function elastic(t) {
      return (
        Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1
      );
    }
    let that = this;
    function onClick(id, callback) {
      that.$refs[id].addEventListener("click", callback);
    }
    onClick("rotateleft", function () {
      view.animate({
        rotation: view.getRotation() + Math.PI / 2,
      });
    });
    onClick("rotateright", function () {
      view.animate({
        rotation: view.getRotation() - Math.PI / 2,
      });
    });
    onClick("rotatearoundrome", function () {
      const rotation = view.getRotation();
      view.animate(
        {
          rotation: rotation + Math.PI,
          anchor: rome,
          easing: easeIn,
        },
        {
          rotation: rotation + 2 * Math.PI,
          anchor: rome,
          easing: easeOut,
        }
      );
    });
    onClick("pantolondon", function () {
      view.animate({
        center: london,
        duration: 2000,
      });
    });
    onClick("elastictomoscow", function () {
      view.animate({
        center: moscow,
        duration: 2000,
        easing: elastic,
      });
    });
    onClick("bouncetoistanbul", function () {
      view.animate({
        center: istanbul,
        duration: 2000,
        easing: bounce,
      });
    });
    onClick("spintorome", function () {
      const center = view.getCenter();
      view.animate(
        {
          center: [
            center[0] + (rome[0] - center[0]) / 2,
            center[1] + (rome[1] - center[1]) / 2,
          ],
          rotation: Math.PI,
          easing: easeIn,
        },
        {
          center: rome,
          rotation: 2 * Math.PI,
          easing: easeOut,
        }
      );
    });
    function flyTo(location, done) {
      const duration = 2000;
      const zoom = view.getZoom();
      let parts = 2;
      let called = false;
      function callback(complete) {
        --parts;
        if (called) {
          return;
        }
        if (parts === 0 || !complete) {
          called = true;
          done(complete);
        }
      }
      view.animate(
        {
          center: location,
          duration: duration,
        },
        callback
      );
      view.animate(
        {
          zoom: zoom - 1,
          duration: duration / 2,
        },
        {
          zoom: zoom,
          duration: duration / 2,
        },
        callback
      );
    }
    onClick("flytobern", function () {
      flyTo(bern, function () {});
    });
    function tour() {
      const locations = [london, bern, rome, moscow, istanbul];
      let index = -1;
      function next(more) {
        if (more) {
          ++index;
          if (index < locations.length) {
            const delay = index === 0 ? 0 : 750;
            setTimeout(function () {
              flyTo(locations[index], next);
            }, delay);
          } else {
            alert("Tour complete");
          }
        } else {
          alert("Tour cancelled");
        }
      }
      next(true);
    }
    onClick("tour", tour);
  },
};
</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
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199

# 3.其属性方法：

  • getAnimating 确定视图是否处于动画状态。

  • getInteracting 确定用户是否正在与视图进行交互，例如平移或缩放。

  • getKeys 获取对象属性名称的列表。

  • getProperties 获取具有所有属性名称和值的对象。

  • getResolution 获取视图分辨率。

  • getResolutionForExtent 获取提供的范围（以地图单位为单位）和大小（以像素为单位）的分辨率。

  • getResolutionForZoom 获取缩放级别的分辨率。

  • getResolutions 获取视图的分辨率。这将返回传递给 View 的构造函数的分辨率数组，如果未给出则未定义。

  • getRevision 获取此对象的版本号。每次修改对象时，其版本号都会增加。

  • getZoomForResolution 获取分辨率的缩放级别。

  • setConstrainResolution 设置视图是否应允许中间缩放级别。

  • setProperties 设置键值对的集合。请注意，这会更改所有现有属性并添加新属性（不会删除任何现有属性）。

  • setResolution 设置此视图的分辨率。任何分辨率约束都将适用。

  • setRotation 设置该视图的旋转角度。任何旋转约束都将适用。

  • rotate 接受两个参数，旋转角度数（rotation）和旋转中心（opt_anchor，可选），将地图围绕 opt_anchor 旋转 rotation 角度；

  • ifDef 检查地图的中心和分辨率是否已经设置，都设置返回 true，否则返回 false； fitExtent(extent, size)，接受两个参数：extent 和 size，extent 类型是 ol.Extent – [left, bottom, right, top]，size 由 map.getSize()获取；该功能类- 似于 ArcGIS 的缩放到图层功能，将地图的 view 缩放到 extent 区域可见的合适尺度；

  • fitGeometry(geometry, size, opt_options)，参数是地理要素，地图尺寸和可选参数；根据给定的地理要素，将 view 缩放到适合地理要素显示的尺寸；

# 2.高级视图定位

  • fit

  • centerOn

查看代码详情 
<template>
  <div>
    <div class="mapcontainer">
      <div ref="map" class="map"></div>
      <div class="padding-top"></div>
      <div class="padding-left"></div>
      <div class="padding-right"></div>
      <div class="padding-bottom"></div>
      <div class="center"></div>
    </div>
    <button ref="zoomtoswitzerland">缩放到瑞士</button> 最佳匹配
    <button ref="zoomtolausanne">缩放到洛桑</button> 最小分辨率
    <button ref="centerlausanne">洛桑中心</button>
  </div>
</template>
  
  <script>
export default {
  mounted() {
    let {
      format: { GeoJSON },
      Map,
      View,
      layer: { Tile: TileLayer, Vector: VectorLayer },
      source: { OSM, Vector: VectorSource },
      style: { Circle: CircleStyle, Fill, Stroke, Style },
    } = ol;
    const source = new VectorSource({
      url: this.$withBase("/data/geojson/switzerland.geojson"),
      format: new GeoJSON(),
    });
    const style = new Style({
      fill: new Fill({
        color: "rgba(255, 255, 255, 0.6)",
      }),
      stroke: new Stroke({
        color: "#319FD3",
        width: 1,
      }),
      image: new CircleStyle({
        radius: 5,
        fill: new Fill({
          color: "rgba(255, 255, 255, 0.6)",
        }),
        stroke: new Stroke({
          color: "#319FD3",
          width: 1,
        }),
      }),
    });
    const vectorLayer = new VectorLayer({
      source: source,
      style: style,
    });
    const view = new View({
      center: [12579156, 3274244],
      zoom: 1,
    });
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
        vectorLayer,
      ],
      target: this.$refs.map,
      view: view,
    });
    this.$refs.zoomtoswitzerland.addEventListener(
      "click",
      function () {
        const feature = source.getFeatures()[0];
        const polygon = feature.getGeometry();
        view.fit(polygon, { padding: [170, 50, 30, 150] });
      },
      false
    );
    this.$refs.zoomtolausanne.addEventListener(
      "click",
      function () {
        const feature = source.getFeatures()[1];
        const point = feature.getGeometry();
        view.fit(point, { padding: [170, 50, 30, 150], minResolution: 50 });
      },
      false
    );
    this.$refs.centerlausanne.addEventListener(
      "click",
      function () {
        const feature = source.getFeatures()[1];
        const point = feature.getGeometry();
        const size = map.getSize();
        view.centerOn(point.getCoordinates(), size, [570, 500]);
      },
      false
    );
  },
};
</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
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
97
98

# 3.change:resolution

查看代码详情 
<template>
  <div>
    <div ref="map" class="map"></div>
    Legend:
    <div><img id="legend" /></div>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer, Image: ImageLayer },
      source: { OSM, ImageWMS },
    } = ol;

    const wmsSource = new ImageWMS({
      url: "https://ahocevar.com/geoserver/wms",
      params: { LAYERS: "topp:states" },
      ratio: 1,
      serverType: "geoserver",
    });
    const updateLegend = function (resolution) {
      const graphicUrl = wmsSource.getLegendUrl(resolution);
      const img = document.getElementById("legend");
      img.src = graphicUrl;
    };
    const layers = [
      new TileLayer({
        source: new OSM(),
      }),
      new ImageLayer({
        extent: [-13884991, 2870341, -7455066, 6338219],
        source: wmsSource,
      }),
    ];
    const map = new Map({
      layers: layers,
      target: this.$refs.map,
      view: new View({
        center: [-10997148, 4569099],
        zoom: 4,
      }),
    });
    const resolution = map.getView().getResolution();
    updateLegend(resolution);
    map.getView().on("change:resolution", function (event) {
      const resolution = event.target.getResolution();
      updateLegend(resolution);
    });
  },
};
</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
43
44
45
46
47
48
49
50
51
52
53
54

← 五.Layer（一） →