controls 簡(jiǎn)述

上篇文章我們將了在地圖上的交互(interaction)，那些都是一些隱性的需要去使用才能知道存在有這樣一個(gè)東西，就像彩蛋一樣。這篇我們主要講地圖上的控件(controls)，這些可以說(shuō)都是顯性的東西，如果設(shè)置了，打開(kāi)地圖頁(yè)面就能夠看到的東西
屬性 不是必須存在 的，默認(rèn)使用的是 control~defaults 內(nèi)容，并且是已 Array數(shù)組形式存在，也就是說(shuō)可以像圖層和交互一樣，可以多個(gè)控件功能承載在地圖上。

常見(jiàn)的 controls 控件

• controldefaults，地圖默認(rèn)包含的控件，包含縮放控件和旋轉(zhuǎn)控件；
• fullscreen，全屏控件，用于全屏幕查看地圖；
• mouseposition，鼠標(biāo)位置控件，顯示鼠標(biāo)所在地圖位置的坐標(biāo)，可以自定義投影；
• overviewmap，地圖全局視圖控件（鷹眼圖）
• scaleline，比例尺控件；
• zoom，縮放控件；
• zoomslider，縮放滑塊刻度控件；

使用方法

fullscreen 全屏

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

mouseposition 鼠標(biāo)位置控件

import { createStringXY } from "ol/coordinate";
import MousePosition from "ol/control/MousePosition";
// 向地圖添加 MousePosition
var mousePositionControl = new MousePosition({
    //坐標(biāo)格式
    coordinateFormat: createStringXY(5),
    //地圖投影坐標(biāo)系（若未設(shè)置則輸出為默認(rèn)投影坐標(biāo)系下的坐標(biāo)）
    projection: "EPSG:4326",
    //坐標(biāo)信息顯示樣式類名，默認(rèn)是'ol-mouse-position'
    className: "custom-mouse-position",
    //顯示鼠標(biāo)位置信息的目標(biāo)容器
    target: document.getElementById("vue-openlayers"),
    //未定義坐標(biāo)的標(biāo)記
    undefinedHTML: " ",
});

map.value.addControl(mousePositionControl);

overviewmap 鷹眼圖

參數(shù)：以下參數(shù)都為可選，添加如下代碼
collapsed，收縮選項(xiàng)，默認(rèn)為true，收縮；
collapseLabel，收縮后的圖標(biāo)按鈕；
collapsible，是否可以收縮為圖標(biāo)按鈕，默認(rèn)為 true；
label，當(dāng) overviewmapcontrol 收縮為圖標(biāo)按鈕時(shí)，顯示在圖標(biāo)按鈕上的文字或者符號(hào)，默認(rèn)為 ?；
layers，overviewmapcontrol針對(duì)的圖層，默認(rèn)情況下為所有圖層，一般這里設(shè)置的圖層和map圖層數(shù)據(jù)一致；
render，當(dāng) overviewmapcontrol 重新繪制時(shí)，調(diào)用的函數(shù)；
target，放置的 HTML 元素；
tipLabel，鼠標(biāo)放置在圖標(biāo)按鈕上的提示文字。

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 比例尺控件

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

zoomslider 縮放滑塊刻度控件

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

總結(jié)

更多請(qǐng)見(jiàn)官網(wǎng)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-815771.html

到了這里，關(guān)于openlayers [七] 地圖控件controls詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！