# 七.XYZ

# 1.瓦片图

限制缩放级别 9 和 13 之间

查看代码详情

<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  export default {
    mounted() {
      let {
        Map,
        View,
        layer: { Tile: TileLayer },
        source: { XYZ },
      } = ol;
  
      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 map = new Map({
        target: this.$refs.map,
        layers: [
          new TileLayer({
            source: new XYZ({
              attributions: attributions,
              url:
                "https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=" +
                mapkeys.maptiler,
            }),
          }),
        ],
        view: new View({
          center: [-13553864, 5918250],
          zoom: 11,
          minZoom: 9,
          maxZoom: 13,
        }),
      });
    },
  };
  </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

# 2.图像滤镜

刷新

全屏/自适应

# 3.KML 数据加载

刷新

全屏/自适应

# 4.插值

刷新

全屏/自适应

# 5.Mapbox-gl 层

刷新

全屏/自适应

# 6.阴影浮雕（使用 WebGL）

刷新

全屏/自适应

# 7.XYZ

刷新

全屏/自适应

# 8.瓦片大小设置

图层	layer	source	备注
layer1	Tile	XYZ	"https://services.arcgisonline.com/arcgis/rest/services/" +"ESRI_Imagery_World_2D/MapServer/tile/{z}/{y}/{x}"

刷新

全屏/自适应

# 9.arcgison

图层	layer	source	备注
layer1	Tile	XYZ	"https://server.arcgisonline.com/ArcGIS/rest/services/" +"World_Topo_Map/MapServer/tile/{z}/{y}/{x}"

刷新

全屏/自适应

← 六.WMTS 八.VectorTile →