//地图控件
//具体查看https://openlayers.org/en/latest/apidoc/module-ol_control_ZoomSlider-ZoomSlider.html
import { Attribution as Attribution, FullScreen as FullScreen, Rotate as Rotate, MousePosition as MousePosition, OverviewMap as OverviewMap, ScaleLine as ScaleLine, ZoomSlider as ZoomSlider, ZoomToExtent as ZoomToExtent, Zoom as Zoom } from "ol/control"
import { createStringXY } from 'ol/coordinate';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
/**
 * zoom 默认在地图上进行显示，不设置为默认样式
 * 
 */
export function addZoom() {
    return new Zoom();
}

/**
 * ZoomSlider 缩放的控件的滑块类型
 */
export function addZoomSlider() {
    return new ZoomSlider();
}

/**
 * ZoomToExtent 缩放至范围
 */
export function addZoomToExtent() {
    return new ZoomToExtent();
}

/**
 * Attribution 归 因 用于显示与图层源关联的所有属性的控件 在地图中。此控件是地图中包含的默认控件之一。 默认情况下，它将显示在地图的右下角，但这可以 通过使用 CSS 选择器进行更改
 */
export function addAttribution() {
    return new Attribution();
}

/**
 * FullScreen 全屏
 */
export function addFullScreen() {
    return new FullScreen();
}

/**
 * Rotate 旋转
 */
export function addRotate() {
    return new Rotate();
}

/**
 * MousePosition 鼠标位置
 */
export function addMousePosition(dom) {
    return new MousePosition({
        coordinateFormat: createStringXY(4),
        projection: 'EPSG:4326',
        target: dom,
        className:"ol-mouse-position"
    })
}

/**
 * OverviewMap 概述地图
 * https://openlayers.org/en/latest/apidoc/module-ol_control_OverviewMap-OverviewMap.html
 */
export function addOverviewMap(url) {
    return new OverviewMap({
        layers: [
            new TileLayer({
                source: new OSM({
                    'url': 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8',
                }),
            }),
        ],
        className: 'ol-overviewmap ol-custom-overviewmap',
        collapseLabel: '\u00BB',
        label: '\u00AB',
        collapsed: true,
    })
}

/**
 * ScaleLine 刻度线
 */
export function addScaleLine() {
    return new ScaleLine()
}
