首页 > 其他 > 详细

OpenLayers地图控件controls

时间:2021-07-29 10:49:24      阅读:41      评论:0      收藏:0      [点我收藏+]

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: " ",
});
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}   纬度:{y}", 2);
    },
    //地图投影坐标系(若未设置则输出为默认投影坐标系下的坐标)
    projection: "EPSG:4326",
    //坐标信息显示样式类名,默认是‘ol-mouse-position‘
    className: "custom-mouse-position",
    //显示鼠标位置信息的目标容器
    target: document.getElementById("mouse-position"),
    //未定义坐标的标记
    undefinedHTML: " ",
});
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());

 

OpenLayers地图控件controls

原文:https://www.cnblogs.com/zypweb/p/15073616.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!