Openlayers学习笔记

# 十八.TileJSON

# 1.UTFGrid

查看代码详情 
<template>
  <div>
    <div id="map" class="map"></div>
    <div style="display: none">
      <div id="country-info">
        <div id="country-name">&nbsp;</div>
        <img id="country-flag" />
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  mounted() {
    let {
      Overlay,
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { TileJSON, UTFGrid },
    } = ol;

    const mapLayer = new TileLayer({
      source: new TileJSON({
        url:
          "https://api.tiles.mapbox.com/v4/mapbox.geography-class.json?secure&access_token=" +
          mapkeys.mapbox,
      }),
    });
    const gridSource = new UTFGrid({
      url:
        "https://api.tiles.mapbox.com/v4/mapbox.geography-class.json?secure&access_token=" +
        mapkeys.mapbox,
    });
    const gridLayer = new TileLayer({ source: gridSource });
    const view = new View({
      center: [12579156, 3274244],
      zoom: 1,
    });
    const mapElement = document.getElementById("map");
    const map = new Map({
      layers: [mapLayer, gridLayer],
      target: mapElement,
      view: view,
    });
    const infoElement = document.getElementById("country-info");
    const flagElement = document.getElementById("country-flag");
    const nameElement = document.getElementById("country-name");
    const infoOverlay = new Overlay({
      element: infoElement,
      offset: [15, 15],
      stopEvent: false,
    });
    map.addOverlay(infoOverlay);
    const displayCountryInfo = function (coordinate) {
      const viewResolution = view.getResolution();
      gridSource.forDataAtCoordinateAndResolution(
        coordinate,
        viewResolution,
        function (data) {
          mapElement.style.cursor = data ? "pointer" : "";
          if (data) {
            flagElement.src = "data:image/png;base64," + data["flag_png"];
            nameElement.innerHTML = data["admin"];
          }
          infoOverlay.setPosition(data ? coordinate : undefined);
        }
      );
    };
    map.on("pointermove", function (evt) {
      if (evt.dragging) {
        return;
      }
      const coordinate = map.getEventCoordinate(evt.originalEvent);
      displayCountryInfo(coordinate);
    });
    map.on("click", function (evt) {
      displayCountryInfo(evt.coordinate);
    });
  },
};
</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

# 2.区域增长

刷新
全屏/自适应

← 十九.GPX →