Openlayers学习笔记

# 四.OSM

# 1.瓦片图+矢量图

  • 圆圈中渐变色的使用

查看代码详情 
<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  export default {
    mounted() {
      let {
        Feature,
        geom: { Circle },
        Map,
        View,
        layer: { Tile: TileLayer, Vector: VectorLayer },
        source: { OSM, Vector: VectorSource },
        style: { Style },
      } = ol;
  
      const circleFeature = new Feature({
        geometry: new Circle([12127398.797692968, 4063894.123105166], 50),
      });
      circleFeature.setStyle(
        new Style({
          renderer(coordinates, state) {
            const [[x, y], [x1, y1]] = coordinates;
            const ctx = state.context;
            const dx = x1 - x;
            const dy = y1 - y;
            const radius = Math.sqrt(dx * dx + dy * dy);
            const innerRadius = 0;
            const outerRadius = radius * 1.4;
            const gradient = ctx.createRadialGradient(
              x,
              y,
              innerRadius,
              x,
              y,
              outerRadius
            );
            gradient.addColorStop(0, "rgba(255,0,0,0)");
            gradient.addColorStop(0.6, "rgba(255,0,0,0.2)");
            gradient.addColorStop(1, "rgba(255,0,0,0.8)");
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
            ctx.fillStyle = gradient;
            ctx.fill();
            ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
            ctx.strokeStyle = "rgba(255,0,0,1)";
            ctx.stroke();
          },
        })
      );
  
      new Map({
        layers: [
          new TileLayer({
            source: new OSM(),
            visible: true,
          }),
          new VectorLayer({
            source: new VectorSource({
              features: [circleFeature],
            }),
          }),
        ],
        target: this.$refs.map,
        view: new View({
          center: [12127398.797692968, 4063894.123105166],
          zoom: 19,
        }),
      });
    },
  };
  </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

# 3.自定义拖放（KMZ）

刷新
全屏/自适应

# 4.自定义拖放（MVT 预览）

刷新
全屏/自适应

# 4.设备方向

跟踪设备方向的变化

刷新
全屏/自适应

# 2. 拖动、旋转和缩放

拖动、旋转和缩放的单一交互。

刷新
全屏/自适应

# 1.互动程度

刷新
全屏/自适应

# 2.外部地图

刷新
全屏/自适应

# 2.自定义地图元素

刷新
全屏/自适应

# 3.自定义鹰眼控件

可以使用 shift 键旋转地图，以查看概览地图的反应

刷新
全屏/自适应

# 6.自定义工具提示

刷新
全屏/自适应

# 3.本地化的 OpenStreetMap

刷新
全屏/自适应

# 5.OpenStreetMap 重新投影

刷新
全屏/自适应

← 五.Stamen →