五十一、openlayers官网示例Layer Min/Max Resolution解析——设置图层最大分辨率，超过最大值换另一个图层显示

使用minResolution、maxResolution分辨率来设置图层显示最大分辨率。 

<template>
  <div class="box">
    <h1>Layer Min/Max Resolution</h1>
    <div id="map" class="map"></div>
  </div>
</template>

<script>
import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";
import TileJSON from "ol/source/TileJSON.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import StadiaMaps from "ol/source/StadiaMaps.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
          minResolution: 200,
          maxResolution: 2000,
        }),
        new TileLayer({
          source: new StadiaMaps({
            layer: "stamen_toner",
          }),
          minResolution: 2000,
          maxResolution: 20000,
        }),
      ],
      target: "map",
      view: new View({
        center: [653600, 5723680],
        zoom: 5,
      }),
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
}
.box {
  height: 100%;
}

</style>