Vue+OpenLayers地图控件controls【二】

memory_zzz

已于 2024-12-10 09:29:38 修改

阅读量1.6k

点赞数 3

分类专栏： OpenLayers 文章标签： vue.js

于 2021-07-29 09:49:16 首次发布

本文链接：https://blog.youkuaiyun.com/memory_zzz/article/details/119203703

版权

OpenLayers 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了OpenLayers库中常用的控件，包括全屏控件、鼠标位置控件、地图全局视图、比例尺控件、缩放控件、缩放滑块、地图旋转和缩放到全局等功能。通过示例代码详细展示了如何在地图应用中添加和配置这些控件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.fullscreen全屏控件

写法一：

import { FullScreen } from "ol/control";

this.map.addControl(new FullScreen());

写法二：

import { defaults as defaultControls, FullScreen } from "ol/control";

controls: defaultControls({
    zoom: false,
    rotate: false,
    attribution: false 
}).extend([
    new FullScreen()
])

2.mouseposition鼠标位置控件

import MousePosition from "ol/control/MousePosition";
import { createStringXY } from "ol/coordinate";

var mousePositionControl = new MousePosition({
    //坐标格式
    coordinateFormat: createStringXY(5),
    //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
    projection: "EPSG:4326",
    //坐标信息显示样式类名，默认是'ol-mouse-position'
    className: "custom-mouse-position",
    //显示鼠标位置信息的目标容器
    target: document.getElementById("mouse-position"),
    //未定义坐标的标记
    undefinedHTML: "&nbsp;",
});
this.map.addControl(mousePositionControl);

import MousePosition from "ol/control/MousePosition";
import { format } from "ol/coordinate";

var mousePositionControl = new MousePosition({
    //坐标格式
    coordinateFormat: function (coordinate) {
        return format(coordinate, "经度:{x} &nbsp; 纬度:{y}", 2);
    },
    //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
    projection: "EPSG:4326",
    //坐标信息显示样式类名，默认是'ol-mouse-position'
    className: "custom-mouse-position",
    //显示鼠标位置信息的目标容器
    target: document.getElementById("mouse-position"),
    //未定义坐标的标记
    undefinedHTML: "&nbsp;",
});
this.map.addControl(mousePositionControl);

3.overviewmap 地图全局视图（鹰眼图）控件

import { defaults as defaultControls, OverviewMap } from "ol/control";

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

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

4.scaleline 比例尺控件

import { ScaleLine } from "ol/control";

this.map.addControl(new ScaleLine());

5.zoom缩放控件

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

6.zoomslider缩放滑块刻度控件

import { ZoomSlider } from "ol/control";

this.map.addControl(new ZoomSlider());

7.Rotate地图旋转控件

（shift+alt+鼠标拖动地图）

import { Rotate } from "ol/control";

this.map.addControl(new Rotate());

8.ZoomToExtent缩放到全局控件

import { ZoomToExtent } from "ol/control";

this.map.addControl(new ZoomToExtent());