useSwitchBaseLayer

简介

在多套底图之间切换。所有底图图层预先添加到地图中，通过 visibleLayerName 控制当前可见的底图，其余自动隐藏。

使用示例

点我查看代码

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

const olMap = new OLMap()

const layers = {
  osm: [createOpenStreetMapLayer()],
  bing: [createBingLayer({
    key: 'AtmBUmOPFg6c61ynLhIbjvrKfuXkMw1lCMTlLh9ALY47Llyetb6lgyRMitoPxKZo',
    name: 'RoadOnDemand',
  })],
  天地图卫星图: [
    createTianDiTuLayer({
      type: 'img',
      key: '8a684acb7b9d38ba08adf8035d0262ee',
      projection: EPSG_3857,
    }),
    createTianDiTuLayer({
      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>

API

名称	类型
useSwitchBaseLayer	(data: UseSwitchBaseLayerOptions) => UseSwitchBaseLayerReturn

UseSwitchBaseLayerOptions

名称	类型	默认值	说明
olMap	OLMap	-	地图实例
layers	Record<string, TileLayer[]>	-	底图字典，key 为底图名称，value 为该底图包含的 TileLayer 数组
defaultLayerName	string	第一个 key	初始显示的底图名称

UseSwitchBaseLayerReturn

名称	类型	说明
visibleLayerName	Ref<string>	当前可见底图的名称，修改此值即可切换底图

使用说明

• layers 中的每个底图可以包含多个 TileLayer，如天地图卫星图需要同时加载影像层和注记层。
• 所有底图图层会在初始化时一次性添加到地图，通过 setVisible 控制显隐，不会重复添加。
• 直接将 visibleLayerName 绑定到下拉选择器即可实现底图切换 UI。

源代码

点我查看代码

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 }
}