xol-helper v1.0.6

----

此工具类旨在于方便使用 openLayers，只提供了一些基础的，常用的工具方法，一些较为深入的用法请阅读官方api

官网地址： {@link https://openlayers.org/}

官网API： {@link https://openlayers.org/en/latest/apidoc/}

官方示例： {@link https://openlayers.org/en/latest/examples/}

use age

html

<div id="map" style="width: 100%;height:100%"></div>

js

import OlHelper from "xol-helper";
this.helper = new OlHelper.OlHelper({
    map: {
        target: document.getElementById("map"),
    },
    view: {
        center: [102.7, 25],
        projection: "EPSG:4326",
        zoom: 12
    }
});

API

OlHelper

// Olhelper的内置对象
map: 装载地图的对象
view: 装载视图的对象;
baseLayer: 底图的图层对象;

/***
 * 构造方法
 * @param option 初始化地图的参数
 * @param baseMap 底图类型
 * @param tick 加载底图所需key
 * @param imagerySet 底图自带的样式
 */
constructor(option, baseMap?, tick?, imagerySet);

option = {
    view: {
        center: Array<number>,
        constrainRotation?: boolean | number,
        enableRotation?: boolean,
        extent?: Array<number>,
        constrainOnlyCenter?: boolean,
        smoothExtentConstraint?: boolean,
        maxResolution?: number,
        minResolution?: number,
        maxZoom?: number,
        minZoom?: number,
        multiWorld?: boolean,
        constrainResolution?: boolean,
        smoothResolutionConstraint?: boolean,
        showFullExtent?: boolean,
        projection: string,
        resolution?: number,
        resolutions?: Array<number>,
        rotation?: number,
        zoom: number,
        zoomFactor?: number,
        padding?: Array<number>,
    },
    map: {
        target: HTMLElement | string,
        view?: View,
        layers?: Array<any> | any,
        controls?: any,
        pixelRatio?: number,
        interactions?: any,
        keyboardEventTarget?: HTMLElement | Document | string,
        maxTilesLoading?: number,
        moveTolerance?: number,
        overlays?: Array<any> | any
    }
}

baseMap = "OSM"|"TDT"|"BING";

/***
 * 添加一个栅格图层
 * @param option {@link createTileLayerOption}
 */
addTileLayer(option)

option = {
    sourceType: 'Tile' | 'OSM' | 'XYZ' | 'WMS' | 'WMTS' | 'Bing',   // 要创建的矢量图层的数据类型
    sourceOption: TileSource | any,
    option?: TileLayerOption
}

/*** 
 * 添加一个矢量图层
 * @param option
 */
addVectorLayer(option);

option = {
    sourceType: 'GML' | 'IGC' | 'KML' | 'MVT' | 'WFS' | 'WKB' | 'WKT' | 'XML' | 'GPX' | 'OSMXML' | 'GeoJSON' | 'EsriJSON' | 'Polyline' | 'TopoJSON' | "NONE",   // 要创建的矢量图层的数据类型
    sourceOption?: VectorSourceOption | VectorSource<any>, //可传入对应的参数，也可以直接传入VectorSource对象
    option?: VectorLayerOption, //创建
    formatOption?: any,
    feature?: any
}

/***
 * 绘制图形
 * @param option {@link DrawThingsOption}
 * @param callBack {@link Function} return: {event, geoJson}
 * @return {@link DrawerSource}
 */
drawThings(option, callBack);

option = {
    option: {
        type: DrawType,
        clickTolerance?: number,
        features?: any,
        source?: VectorSource<any>,
        dragVertexDelay?: number,
        snapTolerance?: number,
        stopClick?: boolean,
        maxPoints?: number,
        minPoints?: number,
        finishCondition?: Condition,
        style?: Style,
        geometryFunction?: GeometryFunction,
        geometryName?: string,
        condition?: Condition,
        freehand?: boolean,
        freehandCondition?: Condition,
        wrapX?: boolean
    },
    style: StyleOption
}

export type DrawType = "Point" | "LineString" | "LinearRing" | "Polygon" | "MultiPoint"
    | "MultiLineString" | "MultiPolygon" | "GeometryCollection" | "Circle";

export type StyleOption = {
    geometry?: string | any,
    fill?: string,
    image?: {
        icon?: IconImageOption,
        circle?: CircleImageOption,
        shape?: ShapeImageOption
    },
    renderer?: Function,
    stroke: StyleStrokeOption,
    text: {
        font?: string,      //Font style as CSS 'font' value, see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font. Default is '10px sans-serif'
        maxAngle?: number,    // (defaults to Math.PI/4)When placement is set to 'line', allow a maximum angle between adjacent characters. The expected value is in radians, and the default is 45° (Math.PI / 4).
        offsetX?: number,    // (defaults to 0)Horizontal text offset in pixels. A positive will shift the text right.
        offsetY?: number,    // (defaults to 0)Vertical text offset in pixels. A positive will shift the text down.
        overflow?: boolean,  // (defaults to false)For polygon labels or when placement is set to 'line', allow text to exceed the width of the polygon at the label position or the length of the path that it follows.
        placement?: string, //(defaults to 'point')Text placement.
        scale?: number, //Scale.
        rotateWithView?: boolean,    // (defaults to false)Whether to rotate the text with the view.
        rotation?: number,      // (defaults to 0) Rotation in radians (positive rotation clockwise).
        text?: string,  //Text content.
        textAlign?: string, //Text alignment. Possible values: 'left', 'right', 'center', 'end' or 'start'. Default is 'center' for placement: 'point'. For placement: 'line', the default is to let the renderer choose a placement where maxAngle is not exceeded.
        textBaseline?: string, //(defaults to 'middle') Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'.
        fill?: string, //Fill style. If none is provided, we'll use a dark fill-style (#333).
        stroke?: StyleStrokeOption,
        backgroundFill?: string, //Fill style for the text background when placement is 'point'. Default is no fill.
        backgroundStroke?: StyleStrokeOption,//Stroke style for the text background when placement is 'point'. Default is no stroke.
        padding?: Array<number> //(defaults to [0, 0, 0, 0])Padding in pixels around the text for decluttering and background. The order of values in the array is [top, right, bottom, left].
    },
    zIndex: number
}


export type StyleStrokeOption = {
    color?: string,
    lineCap?: CanvasLineCap,	//CanvasLineCap
    lineJoin?: CanvasLineJoin,  //CanvasLineJoin
    lineDash?: Array<number>,
    lineDashOffset?: number,
    miterLimit?: number,
    width?: number
};

/***
 * 结束绘制，返回绘制信息
 * @param clearLayer {@link Boolean} 是否清除已绘制的图层
 */
stopDrawing(clearLayer);

/***
 * view的animate方法
 * @param option {@link @module(ol/View/AnimationOptions)}
 */
flyToPoint(option);

option = {
    center?: number[],
    zoom?: number,
    resolution?: number,
    rotation?: number,
    anchor?: number[],
    duration?: number,
    easing?: (arg0: number) => number,
}

/***
 * 添加弹窗
 * @param option
 */
addOverlay(option)

option = {
    id?: number | string,
    element: HTMLElement,
    offset?: Array<number>,
    position?: Coordinate,
    positioning?: Positioning,
    stopEvent?: boolean,
    insertFirst?: boolean,
    autoPan?: PanIntoViewOptions | boolean,
    autoPanAnimation?: PanOptions,
    autoPanMargin?: number,
    autoPanOptions?: PanIntoViewOptions,
    className?: string
}

/***
 * 切换底图
 * @param baseMap 底图类型
 * @param tick 底图所需要的key
 * @param imagerySet 底图自带的样式类型
 */
changeBaseLayer(baseMap, tick?, imagerySet?);

baseMap = "OSM"|"TDT"|"BING";