useSwitchBaseLayer

简介

切换底图

使用示例

点我查看代码

<script lang="ts" setup>
import { EPSG_3857, getBingLayer, getOSMLayer, getTianDiTuLayer, OlMap, useSwitchBaseLayer } from '@summeruse/ol'
import { NSelect } from 'naive-ui'
import { Map as OLMap } from 'ol'

const olMap = new OLMap()

const layers = {
  osm: [getOSMLayer()],
  bing: [getBingLayer({
    key: 'AtmBUmOPFg6c61ynLhIbjvrKfuXkMw1lCMTlLh9ALY47Llyetb6lgyRMitoPxKZo',
    name: 'RoadOnDemand',
  })],
  天地图卫星图: [
    getTianDiTuLayer({
      type: 'img',
      key: '8a684acb7b9d38ba08adf8035d0262ee',
      projection: EPSG_3857,
    }),
    getTianDiTuLayer({
      type: 'cia',
      key: '8a684acb7b9d38ba08adf8035d0262ee',
      projection: EPSG_3857,
    }),
  ],
}

const { visibleLayerName } = useSwitchBaseLayer({
  defaultLayerName: 'osm',
  olMap,
  layers,
})

const options = Object.keys(layers).map(key => ({
  value: key,
  label: key,
}))
</script>

<template>
  <NSelect v-model:value="visibleLayerName" class="w-200px" :options />
  <OlMap :ol-map class="w-100% h-400px" />
</template>

源代码

点我查看代码

import type { Map as OLMap } from 'ol'
import type TileLayer from 'ol/layer/Tile'
import { ref, watch } from 'vue'

export function useSwitchBaseLayer(data: {
  olMap: OLMap
  defaultLayerName?: string
  layers: {
    [key: string]: TileLayer[]
  }
}) {
  const visibleLayerName = ref(data.defaultLayerName || Object.keys(data.layers)[0])
  Object.values(data.layers).forEach((list) => {
    list.forEach((layer) => {
      data.olMap.addLayer(layer)
    })
  })

  watch(
    visibleLayerName,
    () => {
      Object.entries(data.layers).forEach(([name, list]) => {
        const visible = name === visibleLayerName.value
        list.forEach((layer) => {
          layer.setVisible(visible)
        })
      })
    },
    {
      immediate: true,
    },
  )

  return { visibleLayerName }
}