OpenLayers地图控件controls

2021-07-29 09:31:22 阅读：198 来源： 互联网

标签：control 控件 ol controls OpenLayers addControl new import

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());

标签：control,控件,ol,controls,OpenLayers,addControl,new,import
来源： https://www.cnblogs.com/zypweb/p/15073616.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

OpenLayers地图控件controls