# 五.Layer（一）

# 1.source

此层的来源,如果没有提供给构造函数，则可以在构建后调用 layer.setSource(source)来设置源代码

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>
<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { WebGLTile: TileLayer },
      source: { OSM },
    } = ol
    new Map({
      target: this.$refs.map,
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [12579156, 3274244],
        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

setSource

实现地图的懒加载

查看代码详情

<template>
    <div ref="map" class="map"></div>
  </template>
  <script>
  export default {
    mounted() {
      let {
        Map,
        View,
        layer: { WebGLTile: TileLayer },
        source: { OSM },
        proj: { transformExtent },
      } = ol
      function transform(extent) {
        return transformExtent(extent, "EPSG:4326", "EPSG:3857")
      }
      const extents = {
        India: transform([68.17665, 7.96553, 97.40256, 35.49401]),
      }
      new Map({
        target: this.$refs.map,
        layers: [
          new TileLayer({
            source: new OSM(),
            extent: extents.India,
          }),
        ],
        view: new View({
          center: [12579156, 3274244],
          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

# 2.extent

图层渲染的边界范围，该图层不会呈现在此范围之外

查看代码详情

<template>
    <div ref="map" class="map"></div>
  </template>
  <script>
  export default {
    mounted() {
      let {
        Map,
        View,
        layer: { WebGLTile: TileLayer },
        source: { OSM },
        proj: { transformExtent },
      } = ol
      function transform(extent) {
        return transformExtent(extent, "EPSG:4326", "EPSG:3857")
      }
      const extents = {
        India: transform([68.17665, 7.96553, 97.40256, 35.49401]),
      }
      new Map({
        target: this.$refs.map,
        layers: [
          new TileLayer({
            source: new OSM(),
            extent: extents.India,
          }),
        ],
        view: new View({
          center: [12579156, 3274244],
          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

setExtent

限制图层的显示范围

查看代码详情

<template>
  <div>
    <div ref="map" class="map"></div>
    <button type="button" class="btn btn-default" id="India">印度</button>
    <button type="button" class="btn btn-default" id="Argentina">阿根廷</button>
    <button type="button" class="btn btn-default" id="Nigeria">尼日利亚</button>
    <button type="button" class="btn btn-default" id="Sweden">瑞典</button>
  </div>
</template>

<script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { TileJSON },
      style: Style,
      proj: { transformExtent },
    } = ol;

    function transform(extent) {
      return transformExtent(extent, "EPSG:4326", "EPSG:3857");
    }
    const extents = {
      India: transform([68.17665, 7.96553, 97.40256, 35.49401]),
      Argentina: transform([-73.41544, -55.25, -53.62835, -21.83231]),
      Nigeria: transform([2.6917, 4.24059, 14.57718, 13.86592]),
      Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625]),
    };
    const base = new TileLayer({
      source: new TileJSON({
        url:
          "https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=" +
          mapkeys.mapbox,
        crossOrigin: "anonymous",
      }),
    });
    const overlay = new TileLayer({
      extent: extents.India,
      source: new TileJSON({
        url:
          "https://api.tiles.mapbox.com/v4/mapbox.world-black.json?secure&access_token=" +
          mapkeys.mapbox,
        crossOrigin: "anonymous",
      }),
    });
    const map = new Map({
      layers: [base, overlay],
      target: this.$refs.map,
      view: new View({
        center: [12579156, 3274244],
        zoom: 1,
      }),
    });
    for (const key in extents) {
      document.getElementById(key).onclick = function (event) {
        overlay.setExtent(extents[event.target.id]);
      };
    }
  },
};
</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

# 3.图层最小/最大分辨率

属性	作用	配置
minResolution	此层可见的最低分辨率	-
maxResolution	此图层可见的最大分辨率	-

查看代码详情

<template>
  <div ref="map" class="map"></div>
</template>
  
  <script>
export default {
  mounted() {
    let {
      Map,
      View,
      layer: { Tile: TileLayer },
      source: { OSM, TileJSON },
    } = ol;
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
          minResolution: 200,
          maxResolution: 2000,
        }),
        new TileLayer({
          source: new TileJSON({
            url:
              "https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?secure&access_token=" +
              mapkeys.mapbox,
            crossOrigin: "anonymous",
          }),
          minResolution: 2000,
          maxResolution: 20000,
        }),
      ],
      target: this.$refs.map,
      view: new View({
        center: [653600, 5723680],
        zoom: 5,
      }),
    });
  },
};
</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

# 4.视图最小/最大缩放级别

属性	作用	配置
minZoom	此图层可见的最小视图缩放级别	-
maxZoom	设置此图层可见的最大视图缩放级别，继续增大发现现实空白	-

查看代码详情

<template>
    <div ref="map" class="map"></div>
  </template>
  <script>
  export default {
    mounted() {
      let {
        Map,
        View,
        layer: { WebGLTile: TileLayer },
        source: { OSM },
      } = ol
      new Map({
        target: this.$refs.map,
        layers: [
          new TileLayer({
            source: new OSM(),
            minZoom: 4,
            maxZoom: 12,
          }),
        ],
        view: new View({
          center: [12579156, 3274244],
          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

# 5.visible

设置地图的能见度

查看代码详情

<template>
    <div ref="map" class="map"></div>
  </template>
  <script>
  export default {
    mounted() {
      let {
        Map,
        View,
        layer: { WebGLTile: TileLayer },
        source: { OSM },
      } = ol
      new Map({
        target: this.$refs.map,
        layers: [
          new TileLayer({
            source: new OSM(),
            visible: false,
          }),
        ],
        view: new View({
          center: [12579156, 3274244],
          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

# 6.render

渲染功能。取帧状态作为输入，并期望返回 HTML 元素。将覆盖该图层的默认渲染

SVG 图层

查看代码详情

<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  export default {
    mounted() {
      let {
        Map,
        View,
        layer: { Layer },
        transform: { composeCssTransform },
      } = ol
      const map = new Map({
        target: this.$refs.map,
        view: new View({
          center: [12579156, 3274244],
          extent: [-180, -90, 180, 90],
          projection: "EPSG:4326",
          zoom: 2,
        }),
      })
  
      const svgContainer = document.createElement("div")
      const xhr = new XMLHttpRequest()
      xhr.open("GET", this.$withBase("/data/world.svg"))
      xhr.addEventListener("load", function () {
        const svg = xhr.responseXML.documentElement
        svgContainer.ownerDocument.importNode(svg)
        svgContainer.appendChild(svg)
      })
      xhr.send()
  
      const width = 2560
      const height = 1280
      const svgResolution = 360 / width
      svgContainer.style.width = width + "px"
      svgContainer.style.height = height + "px"
      svgContainer.style.transformOrigin = "top left"
      svgContainer.className = "svg-layer"
  
      map.addLayer(
        new Layer({
          render: function (frameState) {
            const scale = svgResolution / frameState.viewState.resolution
            const center = frameState.viewState.center
            const size = frameState.size
            const cssTransform = composeCssTransform(
              size[0] / 2,
              size[1] / 2,
              scale,
              scale,
              frameState.viewState.rotation,
              -center[0] / svgResolution - width / 2,
              center[1] / svgResolution - height / 2
            )
            svgContainer.style.transform = cssTransform
            svgContainer.style.opacity = this.getOpacity()
            return svgContainer
          },
        })
      )
    },
  }
  </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

# 7.properties

任意可观测属性。可以使用#get()和#set()访问

← 四.View（二）六.Layer（二） →