三.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>

2.WMS GetFeatureInfo（层）

刷新

全屏/自适应

3.动态加载

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

刷新

全屏/自适应

4.没有投影的 WMS

刷新

全屏/自适应