openlayers 封装切换底图

本文介绍了如何在OpenLayers中使用insertAt()方法将新添加的图层放置在所有图层的首位，通过示例展示了如何移除原底图并替换为新图层的过程，以实现底图切换功能。

<template>
  <n-popover placement="left">
    <template #trigger>
      <n-button class="button" style="margin-top: 10px" type="primary" size="tiny" v-bind="$attrs">
        <RemixIcon icon="stack-fill"></RemixIcon>
      </n-button>
    </template>
    <ul class="list">
      <li
        v-for="item in list"
        :key="item.value"
        :class="{
          'is-active': value === item.value
        }"
        @click="value = item.value"
      >
        <img style="width: 88px; height: 88px" :src="item.icon" />
        <span>{{ item.text }}</span>
      </li>
    </ul>
  </n-popover>
</template>

<script setup>
import TileLayer from "ol/layer/Tile"
import XYZ from "ol/source/XYZ"
import LayerGroup from "ol/layer/Group.js"
import * as Cesium from "cesium"

export let tk = "自己的天地图token"

export let list = [
  {
    value: "1",
    text: "矢量",
    icon: new URL("./images/vector.png", import.meta.url).href,
    layers: new LayerGroup({
      layers: [
        new TileLayer({
          source: new XYZ({
            url: `http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${tk}`
          })
        }),
        new TileLayer({
          source: new XYZ({
            url: `http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${tk}`
          })
        })
      ]
    }),
  },
  {
    value: "2",
    text: "影像",
    icon: new URL("./images/image.png", import.meta.url).href,
    layers: new LayerGroup({
      layers: [
        new TileLayer({
          className: "blueLayer",
          source: new XYZ({
            url: `http://t2.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${tk}`
          })
        }),
        new TileLayer({
          source: new XYZ({
            url: `http://t2.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=${tk}`
          })
        })
      ]
    }),
 
  },
  {
    value: "3",
    text: "地形",
    icon: new URL("./images/ter_c.png", import.meta.url).href,
    layers: new LayerGroup({
      layers: [
        new TileLayer({
          source: new XYZ({
            url: `http://t2.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=${tk}`
          })
        }),
        new TileLayer({
          source: new XYZ({
            url: `http://t2.tianditu.gov.cn/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=${tk}`
          })
        })
      ]
    })
  }
]
list._map = keyBy(list, "value")

defineOptions({
  name: "OlSelectLayers"
})

let {map} = inject("openlayers")

let value = defineModel("value", {
  type: String,
  default: "1"
})

watchEffect(() => {
    // 初始化时会执行一次
  let layers = map.getLayers()
  layers.setAt(0, list._map[value.value].layers)
})
</script>

<style lang="scss" scoped>
.button {
  position: absolute;
  right: 10px;
  bottom: 100px;
  z-index: 99;
}
.list {
  display: flex;
  padding: 10px 20px;
  li {
    position: relative;
    line-height: 0;
    margin-right: 20px;
    cursor: pointer;
    border: 2px solid transparent;
    &.is-active {
      border: 2px solid blue;
    }
    &:last-child {
      margin-right: 0;
    }
    span {
      position: absolute;
      line-height: 100%;
      inset: auto auto 0 0;
      padding: 4px 10px;
      color: #fff;
      background: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>