useGraticule

简介

在地图上绘制经纬网。

使用示例

点我查看代码

<script lang="ts" setup>
import { createOpenStreetMapLayer, OlMap, useGraticule } from '@summeruse/ol'
import { NButton } from 'naive-ui'
import { Map as OLMap } from 'ol'
import { computed } from 'vue'

const olMap = new OLMap()
const layer = createOpenStreetMapLayer()
olMap.addLayer(layer)
const { showGraticule: showGraticule1 } = useGraticule({
  olMap,
  graticuleOptions: {
    maxLines: 20,
    strokeStyleOption: {
      color: '#6f42c1',
      width: 1,
      lineDash: [10, 10],
    },
    showLabels: true,

  },
  defaultShow: true,
})

const { showGraticule: showGraticule2 } = useGraticule({
  olMap,
  graticuleOptions: {
    lonLabelPosition: 1,
    latLabelPosition: 0,
    latLabelStyleOption: {
      font: '12px Calibri,sans-serif',
      textAlign: 'left',
      strokeOptions: {
        color: 'rgba(255,255,255,1)',
        width: 3,
      },
    },
    lonLabelStyleOption: {
      font: '12px Calibri,sans-serif',
      textBaseline: 'top',
      strokeOptions: {
        color: 'rgba(255,255,255,1)',
        width: 3,
      },
    },
    showLabels: true,
    opacity: 0,
  },
  defaultShow: true,
})

const showGraticule = computed({
  get: () => showGraticule1.value || showGraticule2.value,
  set: (val) => {
    showGraticule1.value = val
    showGraticule2.value = val
  },
})
</script>

<template>
  <NButton @click="showGraticule = !showGraticule">
    {{
      showGraticule ? '隐藏' : '显示'
    }}
  </NButton>
  <OlMap :ol-map class="h-400px w-400px" />
</template>

源代码

点我查看代码

import type { Map as OLMap } from 'ol'
import type { MaybeRef, Ref } from 'vue'
import type { StrokeOptions, TextOptions } from '../../utils'
import { Graticule } from 'ol/layer'
import { Stroke } from 'ol/style'
import { ref, toValue, watch } from 'vue'
import { createTextStyle } from '../../utils'

export type _GraticuleOptions = ConstructorParameters<typeof Graticule>[0]

export type GraticuleOptions = _GraticuleOptions & {
  strokeStyleOption?: StrokeOptions
  labelStyleOption?: TextOptions
  latLabelStyleOption?: TextOptions
  lonLabelStyleOption?: TextOptions
}

export interface UseGraticuleOptions {
  olMap: MaybeRef<OLMap | null | undefined>
  graticuleOptions?: GraticuleOptions
  defaultShow?: boolean
}

export function useGraticule(options: UseGraticuleOptions) {
  const showGraticule: Ref<boolean> = ref(options.defaultShow || false)
  const { strokeStyleOption, strokeStyle, labelStyleOption, latLabelStyleOption, lonLabelStyleOption, latLabelStyle, lonLabelStyle, ...graticuleOptions } = options.graticuleOptions || {}
  const style = strokeStyleOption ? new Stroke(strokeStyleOption) : strokeStyle

  const labelText = labelStyleOption ? createTextStyle(labelStyleOption) : undefined

  const latLabelText = (latLabelStyleOption ? createTextStyle(latLabelStyleOption) : latLabelStyle) || labelText

  const lonLabelText = (lonLabelStyleOption ? createTextStyle(lonLabelStyleOption) : lonLabelStyle) || labelText

  const graticule = new Graticule({
    ...graticuleOptions,
    strokeStyle: style,
    latLabelStyle: latLabelText,
    lonLabelStyle: lonLabelText,
  }) as Graticule

  watch(
    showGraticule,
    (enable) => {
      graticule.setMap(null)
      if (enable) {
        const olMap = toValue(options.olMap)
        if (olMap) {
          graticule.setMap(olMap)
        }
      }
    },
    {
      immediate: true,
      deep: true,
    },
  )

  return {
    showGraticule,
  }
}

export type UseGraticuleReturn = ReturnType<typeof useGraticule>