WebGIS实战：Vue+Openlayers实现地图控件的加载与控件自定义位置

相关Web GIS实战信息：
上一篇博客：WebGIS实战：Vue+Openlayers实现网络地图的加载与切换
下一篇博客：

前言

在上一节《WebGIS实战：Openlayers实现网络地图的加载与切换》中，我们已经用到了一个地图控件了——图层切换控件(由Openlayers-Extension实现)，这一节将讲述我们可能还会用到什么控件，而且由于这些控件位置都是固定在地图的某一位置，有时不满足我们的布局需求，这就需要我们知道怎么调整这些控件的位置了。

项目源码
注意： 上一节中，我们创建了一个controls.js文件来统一管理我们的地图控件，本节还是基于此，将新添加的控件都放在controls.js中。对于需要用到的控件直接在地图初始化时添加到controls属性中，如下代码所示

BaseMap.vue

import {
   
   controls} from "@c/js/controls";//导入控件管理文件

let mMap = new Map({
   
   
      //挂载目标元素
      target: 'map',
      //显示的地图
      layers: [baseLayerGroup, vectorLayer],
      //表层图层
      overlays: [],
      //在此设置地图控件
      controls: [controls.zoom, controls.overview, controls.switcher, controls.fullScreen, controls.attr],
      //开启交互时加载瓦片
      loadTilesWhileInteracting: true,
      //地图显示中心
      view: view
    });

controls.js

import {
   
   defaults} from 'ol/control'
export const controls = {
   
   
  //定义控件格式
  控件命名: new 控件名称({
   
   
    //控件属性
    
  }),

  // 默认控件（）
  default: defaults() // 没有new
};

1、Openlayers自带的地图控件介绍与展示

注意：括号中的英文名称链接到控件的API文档。由于每个控件比较零散，所以把代码全部放在最后面的controls.js文件中，读者请根据注释对应

• 地图基本信息控件(Attribution)：显示地图资源的版权信息
  

• 地图全屏显示控件(FullScreen)：在浏览器中全屏显示地图，按esc退出全屏
  
  

• 鼠标位置控件(MousePosition)：实时显示鼠标当前的坐标
  
  对于位置覆盖的控件，可以查看第三小节了解如何调整位置

• 地图鹰眼拖拽控件(OverviewMap)：用户拖拽鹰眼图中的小矩形，主图显示对应的区域
  

• 地图比例尺控件(ScaleLine)：显示当前的地图比例尺
  

• 地图缩放按钮控件(Zoom)：点击+/-，实现放大和缩小显示等级
  

• 地图缩放拉条控件(ZoomSlider)：通过拉动条位置，实现实现放大和缩小显示等级
  

• 地图指定范围跳转控件(ZoomToExtent)不常用：移动到指定范围的位置
  

2、Openlayers-Extension提供的地图控件介绍与展示

• 图层切换控件(LayerSwitch)：用于控制图层显示与否，可以拖拽图层移动到顶层
  

• WMS加载控件(WMSCapabilities)：在线搜索与加载wms地图数据
  

• 地图鹰眼点击控件(Overview)：点击鹰眼图上的位置，然后主图平移到对应的位置
  

• 地球鹰眼转动控件(Globle)：移动主图后在地球鹰眼图同时定位显示
  

• 地图书签标记控件(GeoBookMark)：为当前的界面添加界面，点击书签名字自动切换到对应界面
  
  

• 屏幕滑动对比控件(Swipe)：中间的控件可以拉动，类似帘子效果，有水平模式与垂直模式
  

• 地图工具栏控件(ControlBar)：将相关性比较高控件整合为一个工具栏
  

• 地图界面打印控件(Print))：将当前的地图页面进行下载，省去用其他工具截图，而且更加清晰。需要依赖file-saver库。
  

• 地图中心控件(Target)：显示地图的中心
  

• 图例控件(Legend)：用于显示图层的图例信息
  

3、地图控件位置调整

以上介绍了那么多控件，总有一些控件会重叠在一起，如果此时我们都需要这些控件的话，就需要调整控件的位置(上图的OverviewMap 与 Legend 控件就重叠在一起了)。下面以调整Legend控件到右边为例，介绍如何通过CSS文件调整控件的位置。

• 在src/assets下新建一个文件夹scss并创建一个scss文件
  

• 针对控件编写CSS样式
  

• 引入到BaseMap.vue文件中
  

• 通过className引入自定义的类样式，调整放置位置。注意：需要在控件原样式之前添加我们自己定义的样式
  

• 调整结果
  

4、下一步计划

至此，关于Openlayers中常用的地图控件的使用方法与自定义位置就介绍完了。

目前，我