七.source

1.setUrl

切换不同图层

查看代码详情

<template>
  <div>
    <div ref="map" class="map"></div>
    <button class="switcher" value="0">一月</button>
    <button class="switcher" value="1">一月 (水深测量)</button>
    <button class="switcher" value="2">七月</button>
    <button class="switcher" value="3">七月 (水深测量)</button>
  </div>
</template>

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

    const baseUrl = "https://{a-c}.tiles.mapbox.com/v4";
    const urls = [
      "/mapbox.blue-marble-topo-jan/{z}/{x}/{y}.png?access_token=",
      "/mapbox.blue-marble-topo-bathy-jan/{z}/{x}/{y}.png?access_token=",
      "/mapbox.blue-marble-topo-jul/{z}/{x}/{y}.png?access_token=",
      "/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png?access_token=",
    ];
    const source = new XYZ();
    const map = new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          source: source,
        }),
      ],
      view: new View({
        center: [12579156, 3274244],
        zoom: 2,
      }),
    });
    function updateUrl(index) {
      source.setUrl(baseUrl + urls[index] + mapkeys.mapbox);
    }
    const buttons = document.getElementsByClassName("switcher");
    for (let i = 0, ii = buttons.length; i < ii; ++i) {
      const button = buttons[i];
      button.addEventListener(
        "click",
        updateUrl.bind(null, Number(button.value))
      );
    }
    updateUrl(0);
  },
};
</script>

2.瓦片图加载事件

查看代码详情

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

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { XYZ },
    } = ol
    function Progress(el) {
      this.el = el
      this.loading = 0
      this.loaded = 0
    }
    Progress.prototype.addLoading = function () {
      ++this.loading
      this.update()
    }
    Progress.prototype.addLoaded = function () {
      ++this.loaded
      this.update()
    }
    Progress.prototype.update = function () {
      const width = ((this.loaded / this.loading) * 100).toFixed(1) + "%"
      this.el.style.width = width
    }
    Progress.prototype.show = function () {
      this.el.style.visibility = "visible"
    }
    Progress.prototype.hide = function () {
      const style = this.el.style
      setTimeout(function () {
        style.visibility = "hidden"
        style.width = 0
      }, 250)
    }
    const progress = new Progress(this.$refs.progress)
    const key = "get_your_own_D6rA4zTHduk6KOKTXzGB"
    const attributions =
      '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
      '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
    const source = new XYZ({
      attributions: attributions,
      url: "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=" + key,
      tileSize: 512,
    })
    source.on("tileloadstart", function () {
      progress.addLoading()
    })
    source.on(["tileloadend", "tileloaderror"], function () {
      progress.addLoaded()
    })
    const map = new Map({
      layers: [new TileLayer({ source: source })],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 2,
      }),
    })
    map.on("loadstart", function () {
      progress.show()
    })
    map.on("loadend", function () {
      progress.hide()
    })
  },
}
</script>