openlayers [七] 地图控件controls详解

文章目录

    • [controls 简述](#controls 简述)
    • [常见的 controls 控件](#常见的 controls 控件)
    • 使用方法
      • [fullscreen 全屏](#fullscreen 全屏)
      • [mouseposition 鼠标位置控件](#mouseposition 鼠标位置控件)
      • [overviewmap 鹰眼图](#overviewmap 鹰眼图)
      • [scaleline 比例尺控件](#scaleline 比例尺控件)
      • [zoomslider 缩放滑块刻度控件](#zoomslider 缩放滑块刻度控件)
    • 总结

controls 简述

上篇文章我们将了在地图上的交互(interaction),那些都是一些隐性的需要去使用才能知道存在有这样一个东西,就像彩蛋一样。这篇我们主要讲地图上的控件(controls),这些可以说都是显性的东西,如果设置了,打开地图页面就能够看到的东西

属性 不是必须存在 的,默认使用的是 control~defaults 内容,并且是已 Array数组形式存在,也就是说可以像图层和交互一样,可以多个控件功能承载在地图上。

常见的 controls 控件

  • controldefaults,地图默认包含的控件,包含缩放控件和旋转控件;
  • fullscreen,全屏控件,用于全屏幕查看地图;
  • mouseposition,鼠标位置控件,显示鼠标所在地图位置的坐标,可以自定义投影;
  • overviewmap,地图全局视图控件(鹰眼图)
  • scaleline,比例尺控件;
  • zoom,缩放控件;
  • zoomslider,缩放滑块刻度控件;

使用方法

fullscreen 全屏

javascript 复制代码
import { defaults as defaultControls, FullScreen } from "ol/control";
 map.value.addControl(new FullScreen());

mouseposition 鼠标位置控件

javascript 复制代码
import { createStringXY } from "ol/coordinate";
import MousePosition from "ol/control/MousePosition";
// 向地图添加 MousePosition
var mousePositionControl = new MousePosition({
    //坐标格式
    coordinateFormat: createStringXY(5),
    //地图投影坐标系(若未设置则输出为默认投影坐标系下的坐标)
    projection: "EPSG:4326",
    //坐标信息显示样式类名,默认是'ol-mouse-position'
    className: "custom-mouse-position",
    //显示鼠标位置信息的目标容器
    target: document.getElementById("vue-openlayers"),
    //未定义坐标的标记
    undefinedHTML: " ",
});

map.value.addControl(mousePositionControl);

overviewmap 鹰眼图

参数:以下参数都为可选,添加如下代码

collapsed,收缩选项,默认为true,收缩;

collapseLabel,收缩后的图标按钮;

collapsible,是否可以收缩为图标按钮,默认为 true;

label,当 overviewmapcontrol 收缩为图标按钮时,显示在图标按钮上的文字或者符号,默认为 >>;

layers,overviewmapcontrol针对的图层,默认情况下为所有图层,一般这里设置的图层和map图层数据一致;

render,当 overviewmapcontrol 重新绘制时,调用的函数;

target,放置的 HTML 元素;

tipLabel,鼠标放置在图标按钮上的提示文字。

javascript 复制代码
import OverviewMap from "ol/control/OverviewMap";

var overviewMapControl = new OverviewMap({
    layers: [
        new TileLayer({
            source: new OSM(),
        }),
    ],
    collapsed: false,
});

controls: defaultControls({ zoom: true }).extend([overviewMapControl]),

scaleline 比例尺控件

javascript 复制代码
import { defaults as defaultControls,ScaleLine} from "ol/control";
map.value.addControl(new ScaleLine());

zoomslider 缩放滑块刻度控件

javascript 复制代码
import { defaults as defaultControls, ZoomSlider } from "ol/control";
map.value.addControl(new ZoomSlider());

总结

更多请见官网

相关推荐
江城开朗的豌豆几秒前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er7 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子8 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆12 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山21 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45330 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^31 分钟前
条件渲染 v-show与v-if
前端
棉花糖超人38 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
daols887 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇8 小时前
虚拟列表兼容老DOM操作
前端