Openlayers学习笔记

# 三.TileWMS

# 1.瓦片图

  • 使用EPSG:4326进行坐标转换

查看代码详情 
<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  export default {
    mounted() {
      let {
        Map,
        View,
        layer: { Tile: TileLayer },
        source: { TileWMS },
        control: { ScaleLine, defaults: defaultControls },
      } = ol;
  
      const map = new Map({
        controls: defaultControls().extend([
          new ScaleLine({
            units: "degrees",
          }),
        ]),
        layers: [
          new TileLayer({
            source: new TileWMS({
              url: "https://ahocevar.com/geoserver/wms",
              params: {
                LAYERS: "ne:NE1_HR_LC_SR_W_DR",
                TILED: true,
              },
            }),
          }),
        ],
        target: this.$refs.map,
        view: new View({
          projection: "EPSG:4326",
          center: [12579156, 3274244],
          zoom: 2,
        }),
      });
    },
  };
  </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

# 2.WMS GetFeatureInfo（层）

查看代码详情 
<template>
  <div>
    <div ref="map" class="map"></div>
    <div id="info">&nbsp;</div>
  </div>
</template>

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

    const wmsSource = new TileWMS({
      url: "https://ahocevar.com/geoserver/wms",
      params: { LAYERS: "ne:ne", TILED: true },
      serverType: "geoserver",
      crossOrigin: "anonymous",
    });
    const wmsLayer = new TileLayer({
      source: wmsSource,
    });
    const view = new View({
      center: [12579156, 3274244],
      zoom: 1,
    });
    const map = new Map({
      layers: [wmsLayer],
      target: this.$refs.map,
      view: view,
    });
    map.on("singleclick", function (evt) {
      document.getElementById("info").innerHTML = "";
      const viewResolution = view.getResolution();
      const url = wmsSource.getFeatureInfoUrl(
        evt.coordinate,
        viewResolution,
        "EPSG:3857",
        { INFO_FORMAT: "text/html" }
      );
      if (url) {
        fetch(url)
          .then((response) => response.text())
          .then((html) => {
            document.getElementById("info").innerHTML = html;
          });
      }
    });
    map.on("pointermove", function (evt) {
      if (evt.dragging) {
        return;
      }
      const data = wmsLayer.getData(evt.pixel);
      const hit = data && data[3] > 0;
      map.getTargetElement().style.cursor = hit ? "pointer" : "";
    });
  },
};
</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

# 3.动态加载

通过定时器不断请求瓦片图，更新瓦片图

查看代码详情 
<template>
  <div>
    <div ref="map" class="map"></div>
    <div role="group" aria-label="Animation controls">
      <button ref="play" type="button">播放</button>
      <button ref="pause" type="button">暂停</button>
      <span ref="info"></span>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      extent: { getCenter },
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { Stamen, TileWMS },
      proj: { transformExtent },
    } = ol;
    function threeHoursAgo() {
      return new Date(Math.round(Date.now() / 3600000) * 3600000 - 3600000 * 3);
    }
    const extent = transformExtent(
      [-126, 24, -66, 50],
      "EPSG:4326",
      "EPSG:3857"
    );
    let startDate = threeHoursAgo();
    const frameRate = 0.5;
    let animationId = null;
    const layers = [
      new TileLayer({
        source: new Stamen({
          layer: "terrain",
        }),
      }),
      new TileLayer({
        extent: extent,
        source: new TileWMS({
          attributions: ["Iowa State University"],
          url: "https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi",
          params: { LAYERS: "nexrad-n0r-wmst" },
        }),
      }),
    ];
    const map = new Map({
      layers: layers,
      target: this.$refs.map,
      view: new View({
        center: getCenter(extent),
        zoom: 4,
      }),
    });
    let that = this;
    function updateInfo() {
      that.$refs.info.innerHTML = startDate.toISOString();
    }
    function setTime() {
      startDate.setMinutes(startDate.getMinutes() + 15);
      if (startDate > Date.now()) {
        startDate = threeHoursAgo();
      }
      layers[1].getSource().updateParams({ TIME: startDate.toISOString() });
      updateInfo();
    }
    setTime();
    const stop = function () {
      if (animationId !== null) {
        window.clearInterval(animationId);
        animationId = null;
      }
    };
    const play = function () {
      stop();
      animationId = window.setInterval(setTime, 1000 / frameRate);
    };
    this.$refs.play.addEventListener("click", play, false);
    this.$refs.pause.addEventListener("click", stop, false);
    updateInfo();
  },
};
</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
83
84

# 4.没有投影的 WMS

查看代码详情 
<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer, Image: ImageLayer },
      source: { ImageWMS, TileWMS },
      control: { ScaleLine, defaults: defaultControls },
      proj: { Projection },
    } = ol

    const layers = [
      new TileLayer({
        source: new TileWMS({
          attributions:
            '© <a href="https://shop.swisstopo.admin.ch/en/products/maps/national/lk1000"' +
            'target="_blank">Pixelmap 1:1000000 / geo.admin.ch</a>',
          crossOrigin: "anonymous",
          params: {
            LAYERS: "ch.swisstopo.pixelkarte-farbe-pk1000.noscale",
            FORMAT: "image/jpeg",
          },
          url: "https://wms.geo.admin.ch/",
        }),
      }),
      new ImageLayer({
        source: new ImageWMS({
          attributions:
            '© <a href="https://www.hydrodaten.admin.ch/en/notes-on-the-flood-alert-maps.html"' +
            'target="_blank">Flood Alert / geo.admin.ch</a>',
          crossOrigin: "anonymous",
          params: { LAYERS: "ch.bafu.hydroweb-warnkarte_national" },
          serverType: "mapserver",
          url: "https://wms.geo.admin.ch/",
        }),
      }),
    ]

    const projection = new Projection({
      code: "EPSG:21781",
      units: "m",
    })

    const map = new Map({
      controls: defaultControls().extend([new ScaleLine()]),
      layers: layers,
      target: this.$refs.map,
      view: new View({
        center: [660000, 190000],
        projection: projection,
        zoom: 9,
      }),
    })
  },
}
</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

← 四.OSM →