图层类别

前言

Layer 按照类别，由一个基类加一个或多个子图层类叠加而成

• 瓦片数据 Tile
• 矢量数据 Vector
• 矢量切片 VectorTile
• 图片数据 Image

source 是 Layer 的重要组成部分，表示图层的来源，也就是服务地址

1.图层切换

查看代码详情

<template>
    <div ref="map" class="map">
      <label>
        <input
          ref="input1"
          checked
          type="checkbox"
          @input="() => handleClick(1)"
        />
        瓦片图层
      </label>
      <label>
        <input
          ref="input2"
          checked
          type="checkbox"
          @input="() => handleClick(2)"
        />
        卫星图
      </label>
      <label>
        <input
          ref="input3"
          checked
          type="checkbox"
          @input="() => handleClick(3)"
        />
        影像路图
      </label>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        layers: "",
      };
    },
    mounted() {
      let {
        Map,
        View,
        layer: { Tile: TileLayer },
        source: { OSM, XYZ },
      } = ol;
      let layers = [
        new TileLayer({
          name: "瓦片图层", // 创建一个使用Open Street Map地图源的瓦片图层
          source: new OSM(),
        }),
        new TileLayer({
          name: "卫星图",
          source: new XYZ({
            url: `http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6`,
            crossOrigin: "anonymous", //跨域
          }),
        }),
        new TileLayer({
          name: "影像路图",
          source: new XYZ({
            url: `http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8`,
            crossOrigin: "anonymous", //跨域
          }),
        }),
      ];
      this.layers = layers;
      new Map({
        view: new View({
          center: [12579156, 3274244], // 坐标
          zoom: 12, // 放大倍数
        }),
        layers,
        target: this.$refs.map,
      });
    },
    methods: {
      handleClick(i) {
        this.layers[i - 1].setVisible(this.$refs["input" + i].checked);
      },
    },
  };
  </script>

2.地图标线

如何将经纬网图层添加到地图

查看代码详情

<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  export default {
    mounted() {
      let {
        Map,
        View,
        layer: { Tile: TileLayer, Graticule },
        source: { OSM },
        style: { Stroke },
        proj: { fromLonLat },
      } = ol;
  
      const map = new Map({
        layers: [
          new TileLayer({
            source: new OSM({
              wrapX: false,
            }),
          }),
          new Graticule({
            strokeStyle: new Stroke({
              color: "rgba(255,120,0,0.9)",
              width: 2,
              lineDash: [0.5, 4],
            }),
            showLabels: true,
            wrapX: false,
          }),
        ],
        target: this.$refs.map,
        view: new View({
          center: fromLonLat([4.8, 47.75]),
          zoom: 5,
        }),
      });
    },
  };
  </script>