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

# 2.自定义拖放（KMZ）

查看代码详情 
<template>
  <div>
    <div ref="map" class="map"></div>
    <br />
    <div>
      <a id="download" download></a>
      <button id="download-kmz">Download sample</button>
    </div>
    <br />
    <div id="info">&nbsp;</div>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      format: { GPX, GeoJSON, IGC, KML, TopoJSON },
      Map,
      View,
      layer: { Tile: TileLayer, Vector: VectorLayer },
      source: { OSM, Vector: VectorSource },
      interaction: { DragAndDrop, defaults: defaultInteractions },
    } = ol;
    const zip = new JSZip();
    function getKMLData(buffer) {
      let kmlData;
      zip.load(buffer);
      const kmlFile = zip.file(/.kml$/i)[0];
      if (kmlFile) {
        kmlData = kmlFile.asText();
      }
      return kmlData;
    }
    function getKMLImage(href) {
      let url = href;
      let path = window.location.href;
      path = path.slice(0, path.lastIndexOf("/") + 1);
      if (href.indexOf(path) === 0) {
        const regexp = new RegExp(href.replace(path, "") + "$", "i");
        const kmlFile = zip.file(regexp)[0];
        if (kmlFile) {
          url = URL.createObjectURL(new Blob([kmlFile.asArrayBuffer()]));
        }
      }
      return url;
    }
    class KMZ extends KML {
      constructor(opt_options) {
        const options = opt_options || {};
        options.iconUrlFunction = getKMLImage;
        super(options);
      }
      getType() {
        return "arraybuffer";
      }
      readFeature(source, options) {
        const kmlData = getKMLData(source);
        return super.readFeature(kmlData, options);
      }
      readFeatures(source, options) {
        const kmlData = getKMLData(source);
        return super.readFeatures(kmlData, options);
      }
    }
    const dragAndDropInteraction = new DragAndDrop({
      formatConstructors: [KMZ, GPX, GeoJSON, IGC, KML, TopoJSON],
    });

    const map = new Map({
      interactions: defaultInteractions().extend([dragAndDropInteraction]),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 2,
      }),
    });
    dragAndDropInteraction.on("addfeatures", function (event) {
      const vectorSource = new VectorSource({
        features: event.features,
      });
      map.addLayer(
        new VectorLayer({
          source: vectorSource,
        })
      );
      map.getView().fit(vectorSource.getExtent());
    });
    const displayFeatureInfo = function (pixel) {
      const features = [];
      map.forEachFeatureAtPixel(pixel, function (feature) {
        features.push(feature);
      });
      if (features.length > 0) {
        const info = [];
        let i, ii;
        for (i = 0, ii = features.length; i < ii; ++i) {
          const description =
            features[i].get("description") ||
            features[i].get("name") ||
            features[i].get("_name") ||
            features[i].get("layer");
          if (description) {
            info.push(description);
          }
        }
        document.getElementById("info").innerHTML =
          info.join("<br/>") || "&nbsp";
      } else {
        document.getElementById("info").innerHTML = "&nbsp;";
      }
    };
    map.on("pointermove", function (evt) {
      if (evt.dragging) {
        return;
      }
      const pixel = map.getEventPixel(evt.originalEvent);
      displayFeatureInfo(pixel);
    });
    map.on("click", function (evt) {
      displayFeatureInfo(evt.pixel);
    });
    const link = document.getElementById("download");
    function download(fullpath, filename) {
      fetch(fullpath)
        .then(function (response) {
          return response.blob();
        })
        .then(function (blob) {
          if (navigator.msSaveBlob) {
            navigator.msSaveBlob(blob, filename);
          } else {
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            link.click();
          }
        });
    }
    document.getElementById("download-kmz").addEventListener(
      "click",
      function () {
        download(this.$withBase("/data/kmz/iceland.kmz"), "iceland.kmz");
      }.bind(this)
    );
  },
};
</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

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

查看代码详情 
<template>
  <div>
    <div ref="map" class="map"></div>
    <br />
    <div class="tileCoord">
      <a id="download" download></a>
      <span>Tile coordinate&nbsp;&nbsp;</span>
      <span>&nbsp;z: <input type="number" id="tileCoordZ" value="6" /></span>
      <span>&nbsp;x: <input type="number" id="tileCoordX" value="30" /></span>
      <span>&nbsp;y: <input type="number" id="tileCoordY" value="20" /></span>
      <span>&nbsp;&nbsp;</span>
      <button id="download-mvt">Download sample</button>
    </div>
    <br />
    <div id="info">&nbsp;</div>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      Feature,
      format: { GPX, GeoJSON, IGC, KML, MVT, TopoJSON },
      Map,
      View,
      interaction: { DragAndDrop, defaults: defaultInteractions },
      layer: { Tile: TileLayer, Vector: VectorLayer },
      source: { OSM, Vector: VectorSource },
      tilegrid: { createXYZ },
    } = ol;
    const tileCoordZ = document.getElementById("tileCoordZ");
    const tileCoordX = document.getElementById("tileCoordX");
    const tileCoordY = document.getElementById("tileCoordY");

    class customMVT extends MVT {
      constructor() {
        super({ featureClass: Feature });
      }
      readFeatures(source, options) {
        options.extent = createXYZ().getTileCoordExtent([
          parseInt(tileCoordZ.value),
          parseInt(tileCoordX.value),
          parseInt(tileCoordY.value),
        ]);
        return super.readFeatures(source, options);
      }
    }
    const dragAndDropInteraction = new DragAndDrop({
      formatConstructors: [customMVT, GPX, GeoJSON, IGC, KML, TopoJSON],
    });

    const map = new Map({
      interactions: defaultInteractions().extend([dragAndDropInteraction]),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 2,
      }),
    });

    dragAndDropInteraction.on("addfeatures", function (event) {
      const vectorSource = new VectorSource({
        features: event.features,
      });
      map.addLayer(
        new VectorLayer({
          source: vectorSource,
        })
      );
      map.getView().fit(vectorSource.getExtent());
    });

    const displayFeatureInfo = function (pixel) {
      const features = [];
      map.forEachFeatureAtPixel(pixel, function (feature) {
        features.push(feature);
      });
      if (features.length > 0) {
        const info = [];
        let i, ii;
        for (i = 0, ii = features.length; i < ii; ++i) {
          const description =
            features[i].get("name") ||
            features[i].get("_name") ||
            features[i].get("layer");
          if (description) {
            info.push(description);
          }
        }
        document.getElementById("info").innerHTML = info.join(", ") || "&nbsp";
      } else {
        document.getElementById("info").innerHTML = "&nbsp;";
      }
    };

    map.on("pointermove", function (evt) {
      if (evt.dragging) {
        return;
      }
      const pixel = map.getEventPixel(evt.originalEvent);
      displayFeatureInfo(pixel);
    });
    map.on("click", function (evt) {
      displayFeatureInfo(evt.pixel);
    });

    const link = document.getElementById("download");

    function download(fullpath, filename) {
      fetch(fullpath)
        .then(function (response) {
          return response.blob();
        })
        .then(function (blob) {
          if (navigator.msSaveBlob) {
            navigator.msSaveBlob(blob, filename);
          } else {
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            link.click();
          }
        });
    }

    document
      .getElementById("download-mvt")
      .addEventListener("click", function () {
        const fullpath =
          "https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/" +
          tileCoordZ.value +
          "/" +
          tileCoordY.value +
          "/" +
          tileCoordX.value +
          ".pbf";
        const filename =
          tileCoordZ.value +
          "-" +
          tileCoordX.value +
          "-" +
          tileCoordY.value +
          ".mvt";
        download(fullpath, filename);
      });
  },
};
</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

# 4.设备方向

跟踪设备方向的变化

查看代码详情 
<template>
  <div>
    <div ref="map" class="map"></div>
    <ul>
      <li>α : <code ref="alpha"></code></li>
      <li>β : <code ref="beta"></code></li>
      <li>γ : <code ref="gamma"></code></li>
    </ul>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM },
      math: { toRadians },
    } = ol;
    const view = new View({
      center: [12579156, 3274244],
      zoom: 2,
    });
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: this.$refs.map,
      view: view,
    });
    function el(id) {
      return this.$refs[id];
    }
    const gn = new GyroNorm();
    gn.init().then(function () {
      gn.start(function (event) {
        const center = view.getCenter();
        const resolution = view.getResolution();
        const alpha = toRadians(event.do.alpha);
        const beta = toRadians(event.do.beta);
        const gamma = toRadians(event.do.gamma);

        el("alpha").innerText = alpha + " [rad]";
        el("beta").innerText = beta + " [rad]";
        el("gamma").innerText = gamma + " [rad]";

        center[0] -= resolution * gamma * 25;
        center[1] += resolution * beta * 25;

        view.setCenter(center);
      });
    });
  },
};
</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

# 5. 拖动、旋转和缩放

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

查看代码详情 
<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    let {
      interaction: { DragRotateAndZoom, defaults: defaultInteractions },
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM },
    } = ol;
    const map = new Map({
      interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 2,
      }),
    });
  },
};
</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

# 6.互动程度

查看代码详情 
<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    let {
      interaction: { Extent: ExtentInteraction },
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM },
      events: { condition: shiftKeyOnly },
    } = ol;
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 2,
      }),
    });

    const extent = new ExtentInteraction({ condition: shiftKeyOnly });
    map.addInteraction(extent);
  },
};
</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

# 7.外部地图

查看代码详情 
<template>
  <div>
    <div ref="map" class="map"></div>
    <input id="external-map-button" type="button" value="Open external map" />
    <span id="blocker-notice" hidden
      >Could not open map in external window. If you are using a popup or ad
      blocker you may need to disable it for this example.</span
    >
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM },
      proj: { fromLonLat },
      control: { Control, FullScreen, defaults: defaultControls },
    } = ol;
    class UnusableMask extends Control {
      constructor() {
        super({
          element: document.createElement("div"),
        });
        this.element.setAttribute("hidden", "hidden");
        this.element.className = "ol-mask";
        this.element.innerHTML = "<div>Map not usable</div>";
      }
    }

    const map = new Map({
      target: this.$refs.map,
      controls: defaultControls().extend([
        new FullScreen(),
        new UnusableMask(),
      ]),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: fromLonLat([37.41, 8.82]),
        zoom: 4,
      }),
    });

    let mapWindow;
    function closeMapWindow() {
      if (mapWindow) {
        mapWindow.close();
        mapWindow = undefined;
      }
    }
    // Close external window in case the main page is closed or reloaded
    window.addEventListener("pagehide", closeMapWindow);

    const button = document.getElementById("external-map-button");

    function resetMapTarget() {
      localMapTarget.style.height = "";
      map.setTarget(localMapTarget);
      button.disabled = false;
    }

    function updateOverlay() {
      if (!mapWindow) {
        return;
      }
      const externalMapTarget = mapWindow.document.getElementById("map");
      if (!externalMapTarget) {
        return;
      }
      if (document.visibilityState === "visible") {
        // Show controls and enable keyboard input
        externalMapTarget.classList.remove("unusable");
        externalMapTarget.setAttribute("tabindex", "0");
        externalMapTarget.focus();
      } else {
        // Hide all controls and disable keyboard input
        externalMapTarget.removeAttribute("tabindex");
        externalMapTarget.classList.add("unusable");
      }
    }
    window.addEventListener("visibilitychange", updateOverlay);

    button.addEventListener("click", function () {
      const blockerNotice = document.getElementById("blocker-notice");
      blockerNotice.setAttribute("hidden", "hidden");
      button.disabled = true;

      // Reset button and map target in case window did not load or open
      let timeoutKey = setTimeout(function () {
        closeMapWindow();
        resetMapTarget();
        blockerNotice.removeAttribute("hidden");
        timeoutKey = undefined;
      }, 3000);

      mapWindow = window.open(
        "resources/external-map-map.html",
        "MapWindow",
        "toolbar=0,location=0,menubar=0,width=800,height=600"
      );
      mapWindow.addEventListener("DOMContentLoaded", function () {
        const externalMapTarget = mapWindow.document.getElementById("map");
        localMapTarget.style.height = "0px";
        map.setTarget(externalMapTarget);

        if (timeoutKey) {
          timeoutKey = clearTimeout(timeoutKey);
        }
        mapWindow.addEventListener("pagehide", function () {
          resetMapTarget();
          // Close window in case user does a page reload
          closeMapWindow();
        });

        updateOverlay();
      });
    });
  },
};
</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

# 8.自定义地图元素

查看代码详情 
<template>
  <ol-map id="map" class="map"></ol-map>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM },
    } = ol;
    class OLComponent extends HTMLElement {
      constructor() {
        super();
        this.shadow = this.attachShadow({ mode: "open" });
        const link = document.createElement("link");
        link.setAttribute("rel", "stylesheet");
        link.setAttribute("href", "css/ol.css");
        this.shadow.appendChild(link);
        const style = document.createElement("style");
        style.innerText = `
          :host {
            display: block;
          }
        `;
        this.shadow.appendChild(style);
        const div = document.createElement("div");
        div.style.width = "100%";
        div.style.height = "100%";
        this.shadow.appendChild(div);
        this.map = new Map({
          target: div,
          layers: [
            new TileLayer({
              source: new OSM(),
            }),
          ],
          view: new View({
            center: [12579156, 3274244],
            zoom: 2,
          }),
        });
      }
    }
    customElements.define("ol-map", OLComponent);
  },
};
</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

# 9.自定义鹰眼控件

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

查看代码详情 
<template>
  <div>
    <div ref="map" class="map"></div>
    <label><input type="checkbox" ref="rotateWithView" /> 旋转视图</label>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      control: { OverviewMap, defaults: defaultControls },
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM },
      interaction: { DragRotateAndZoom, defaults: defaultInteractions },
    } = ol;
    const overviewMapControl = new OverviewMap({
      className: "ol-overviewmap ol-custom-overviewmap",
      layers: [
        new TileLayer({
          source: new OSM({
            url:
              "https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png" +
              "?apikey=Your API key from https://www.thunderforest.com/docs/apikeys/ here",
          }),
        }),
      ],
      collapseLabel: "\u00BB",
      label: "\u00AB",
      collapsed: false,
    });
    this.$refs.rotateWithView.addEventListener("change", function () {
      overviewMapControl.setRotateWithView(this.checked);
    });
    const map = new Map({
      controls: defaultControls().extend([overviewMapControl]),
      interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [500000, 6000000],
        zoom: 7,
      }),
    });
  },
};
</script>
<style>
.map {
  width: 100%;
  height: 400px;
}
.map .ol-custom-overviewmap,
.map .ol-custom-overviewmap.ol-uncollapsible {
  bottom: auto;
  left: auto;
  right: 0;
  top: 0;
}
.map .ol-custom-overviewmap:not(.ol-collapsed) {
  border: 1px solid black;
}
.map .ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
}
.map .ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
}
.map .ol-custom-overviewmap:not(.ol-collapsed) button {
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
}
.map .ol-rotate {
  top: 170px;
  right: 0;
}
</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

# 10.自定义工具提示

查看代码详情 
<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM },
    } = ol;
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [-8730000, 5930000],
        rotation: Math.PI / 5,
        zoom: 8,
      }),
    });

    $(".ol-zoom-in, .ol-zoom-out").tooltip({
      placement: "right",
      container: "#map",
    });
    $(".ol-rotate-reset, .ol-attribution button[title]").tooltip({
      placement: "left",
      container: "#map",
    });
  },
};
</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

# 11.本地化的 OpenStreetMap

查看代码详情 
<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: {
        OSM: { ATTRIBUTION },
      },
    } = ol;
    const openCycleMapLayer = new TileLayer({
      source: new ol.source.OSM({
        attributions: [
          'All maps © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>',
          ATTRIBUTION,
        ],
        url:
          "https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png" +
          "?apikey=Your API key from https://www.thunderforest.com/docs/apikeys/ here",
      }),
    });

    const openSeaMapLayer = new TileLayer({
      source: new ol.source.OSM({
        attributions: [
          'All maps © <a href="https://www.openseamap.org/">OpenSeaMap</a>',
          ATTRIBUTION,
        ],
        opaque: false,
        url: "https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png",
      }),
    });

    const map = new Map({
      layers: [openCycleMapLayer, openSeaMapLayer],
      target: this.$refs.map,
      view: new View({
        maxZoom: 18,
        center: [-244780.24508882355, 5986452.183179816],
        zoom: 15,
      }),
    });
  },
};
</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

# 12.OpenStreetMap 重新投影

查看代码详情 
<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM },
    } = ol
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        projection: "EPSG:4326",
        center: [12579156, 3274244],
        zoom: 2,
      }),
    })
  },
}
</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

← 五.Stamen →