图层类别

前言

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>