组件总览

Vue3 OpenLayers Styled Controls 提供了一系列可定制的地图控件组件，帮助您快速构建功能丰富的地图应用。

组件列表

组件名	描述	文档
ol-styled-control-bar	控件容器，用于布局管理多个控件	查看文档
ol-styled-home-control	Home控件	查看文档
ol-styled-zoom-in-control	地图放大控件	查看文档
ol-styled-zoom-out-control	地图缩小控件	查看文档
ol-styled-full-screen-control	全屏切换控件	查看文档
ol-styled-measure-length-control	长度测量控件	查看文档
ol-styled-measure-area-control	面积测量控件	查看文档
ol-styled-text-label-control	文本标注控件	查看文档
ol-styled-plot-control	标绘控件	查看文档
ol-styled-export-map-control	导出控件	查看文档
ol-styled-clear-control	清除控件	查看文档
ol-styled-swipe-control	卷帘对比控件	查看文档
ol-styled-base-layer-switcher	底图切换控件	查看文档

使用示例

基本组合

<template>
  <ol-map>
    <ol-view
      ref="view"
      :center="[120, 40]"
      :zoom="8"
      :projection="'EPSG:4326'"
    />

    <base-layer />
    
    <!-- 控件栏组合 -->
    <ol-styled-control-bar>
      <ol-styled-zoom-in-control />
      <ol-styled-zoom-out-control />
    </ol-styled-control-bar>
  </ol-map>
</template>

完整功能组合

<template>
  <ol-map>
    <ol-view
      ref="view"
      :center="[120, 40]"
      :zoom="8"
      :projection="'EPSG:4326'"
    />

    <base-layer />
    
    <!-- 完整控件组合 -->
    <ol-styled-control-bar>
      <ol-styled-zoom-in-control />
      <ol-styled-zoom-out-control />
      <ol-styled-full-screen-control />
      <ol-styled-measure-length-control />
      <ol-styled-measure-area-control />
      <ol-styled-plot-control />
      <ol-styled-clear-control />
    </ol-styled-control-bar>
  </ol-map>
</template>

主题定制

所有控件都支持多种主题和样式定制，请参考主题定制指南了解更多详情。

国际化

控件支持国际化，请参考国际化指南了解如何配置多语言支持。