十三.has

1.DEVICE_PIXEL_RATIO

WMTS 源有一个 tilePixelRatio 选项。支持 HiDPI 的 WMTS 可以提供具有 512x512 像素图块的图块，但在 256x256 像素图块网格中使用它们。在这种情况下 tilePixelRatio 需要设置为 2

查看代码详情

<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  export default {
    async mounted() {
      let {
        format: { WMTSCapabilities },
        Map,
        View,
        layer: { Tile: TileLayer },
        source: { WMTS },
        has: { DEVICE_PIXEL_RATIO },
      } = ol
      const hiDPI = DEVICE_PIXEL_RATIO > 1
      const layer = hiDPI ? "bmaphidpi" : "geolandbasemap"
      const tilePixelRatio = hiDPI ? 2 : 1
  
      const map = new Map({
        target: this.$refs.map,
        view: new View({
          center: [1823849, 6143760],
          zoom: 11,
        }),
      })
      let res = await this.$axios.get(
        "https://basemap.at/wmts/1.0.0/WMTSCapabilities.xml"
      )
      const result = new WMTSCapabilities().read(res.data)
      const options = WMTS.optionsFromCapabilities(result, {
        layer: layer,
        matrixSet: "google3857",
        style: "normal",
      })
      options.tilePixelRatio = tilePixelRatio
      options.attributions =
        'Grundkarte: <a target="_blank" href="https://basemap.at/">basemap.at</a>'
      map.addLayer(
        new TileLayer({
          source: new WMTS(options),
        })
      )
    },
  }
  </script>