Openlayers学习笔记

# 四.Image 图片图

ImageLayer 类 + source

# 1.ImageStatic

ol.source.ImageStatic，提供单一的静态图片地图，继承自 ol.source.Image

查看代码详情 
<template>
  <div ref="map" class="map"></div>
</template>
<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Image: ImageLayer },
      source: { ImageStatic: Static },
      extent: { getCenter },
      proj: { Projection },
    } = ol
    const extent = [0, 0, 1024, 968]
    const projection = new Projection({
      code: "xkcd-image",
      units: "pixels",
      extent: extent,
    })
    const map = new Map({
      layers: [
        new ImageLayer({
          source: new Static({
            attributions: '© <a href="https://xkcd.com/license.html">xkcd</a>',
            url: "https://imgs.xkcd.com/comics/online_communities.png",
            projection: projection,
            imageExtent: extent,
          }),
        }),
      ],
      target: this.$refs.map,
      view: new View({
        projection: projection,
        center: getCenter(extent),
        zoom: 2,
        maxZoom: 8,
      }),
    })
  },
}
</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.ImageArcGISRest

查看代码详情 
<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  export default {
    mounted() {
      let {
        Map,
        View,
        layer: { Tile: TileLayer, Image: ImageLayer },
        source: { OSM, ImageArcGISRest },
      } = ol
      const url =
        "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/" +
        "Specialty/ESRI_StateCityHighway_USA/MapServer"
      const layers = [
        new TileLayer({
          source: new OSM(),
        }),
        new ImageLayer({
          source: new ImageArcGISRest({
            ratio: 1,
            params: {},
            url: url,
          }),
        }),
      ]
      const map = new Map({
        layers: layers,
        target: this.$refs.map,
        view: new View({
          center: [-10997148, 4569099],
          zoom: 4,
        }),
      })
    },
  }
  </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

# 3.ImageWMS

ol.source.ImageWMS，WMS 服务提供的单一的图片数据，继承自 ol.source.Image，触发 ol.source.ImageEvent

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

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Image: ImageLayer },
      source: { ImageWMS },
    } = ol
    function Progress(el) {
      this.el = el
      this.loading = 0
      this.loaded = 0
    }
    Progress.prototype.addLoading = function () {
      ++this.loading
      this.update()
    }
    Progress.prototype.addLoaded = function () {
      ++this.loaded
      this.update()
    }
    Progress.prototype.update = function () {
      const width = ((this.loaded / this.loading) * 100).toFixed(1) + "%"
      this.el.style.width = width
    }
    Progress.prototype.show = function () {
      this.el.style.visibility = "visible"
    }
    Progress.prototype.hide = function () {
      const style = this.el.style
      setTimeout(function () {
        style.visibility = "hidden"
        style.width = 0
      }, 250)
    }
    const progress = new Progress(this.$refs.progress)
    const source = new ImageWMS({
      url: "https://ahocevar.com/geoserver/wms",
      params: { LAYERS: "topp:states" },
      serverType: "geoserver",
    })
    source.on("imageloadstart", function () {
      progress.addLoading()
    })
    source.on(["imageloadend", "imageloaderror"], function () {
      progress.addLoaded()
    })
    const map = new Map({
      layers: [new ImageLayer({ source: source })],
      target: this.$refs.map,
      view: new View({
        center: [-10997148, 4569099],
        zoom: 4,
      }),
    })
    map.on("loadstart", function () {
      progress.show()
    })
    map.on("loadend", function () {
      progress.hide()
    })
  },
}
</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

# 4.ImageMapGuide

ol.source.ImageMapGuide，Mapguide 服务器提供的图片地图数据，继承自 ol.source.Image，fire ol.source.ImageEvent

查看代码详情 
<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  export default {
    mounted() {
      let {
        Map,
        View,
        layer: { Image: ImageLayer },
        source: { ImageMapGuide },
      } = ol
  
      const mdf = "Library://Samples/Sheboygan/Maps/Sheboygan.MapDefinition"
      const agentUrl = "https://mikenunn.net/mapguide/mapagent/mapagent.fcgi?"
      const bounds = [
        -87.865114442365922, 43.665065564837931, -87.595394059497067,
        43.823852564430069,
      ]
      const map = new Map({
        layers: [
          new ImageLayer({
            extent: bounds,
            source: new ImageMapGuide({
              projection: "EPSG:4326",
              url: agentUrl,
              useOverlay: false,
              metersPerUnit: 111319.4908,
              params: {
                MAPDEFINITION: mdf,
                FORMAT: "PNG",
                VERSION: "3.0.0",
                USERNAME: "OLGuest",
                PASSWORD: "olguest",
              },
              ratio: 2,
            }),
          }),
        ],
        target: this.$refs.map,
        view: new View({
          center: [-87.7302542509315, 43.744459064634],
          projection: "EPSG:4326",
          zoom: 12,
        }),
      })
    },
  }
  </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

# 4.其他

  • ol.source.Cluster，聚簇矢量数据，继承自 ol.source.Vector
  • ol.source.ImageCanvas，数据来源是一个 canvas 元素，其中的数据是图片，继承自 ol.source.Image
  • ol.source.ImageVector，数据来源是一个 canvas 元素，但是其中的数据是矢量来源 ol.source.Vector，继承自 ol.source.ImageCanvas
  • ol.source.MapQuest，MapQuest 提供的切片数据，继承自 ol.source.XYZ
  • ol.source.TileVector，被切分为网格的矢量数据，继承自 ol.source.Vector
  • ol.source.TileImage，提供切分成切片的图片数据，继承自 ol.source.Tile，触发 ol.source.TileEvent
  • ol.source.TileUTFGrid，TileJSON 格式 的 UTFGrid 交互数据，继承自 ol.source.Tile

←