openlayers常用方法封装

import 'ol/ol.css';
import { isPlainObject } from '@/utils/assist';
import { Map, View, Tile, Feature, Overlay } from 'ol';
import { XYZ, Vector as VectorSource, ImageStatic, ImageCanvas as ImageCanvasSource, Cluster } from 'ol/source';
import { Tile as TileLayer, Vector as VectorLayer, Image as ImageLayer, Graticule as GraticuleLayer,  } from 'ol/layer';
import { GeoJSON, WKT } from 'ol/format';
import { defaults, MousePosition } from 'ol/control';
import { createStringXY } from 'ol/coordinate';
import { LinearRing, LineString, Point, Polygon, MultiLineString, MultiPolygon, Circle as CircleShape } from 'ol/geom';
import { fromExtent, fromCircle } from 'ol/geom/Polygon';
import { Style, Stroke, Text, Fill, Circle, Icon, IconImage, RegularShape } from 'ol/style';
import { transform, fromLonLat } from "ol/proj";
import Collection from 'ol/Collection';

export const baseURL = process.env.BASE_URL;

export const EPSG4326 = 'EPSG:4326';
export const EPSG3857 = 'EPSG:3857';

//创建地图
export function createMap(opts) {
    let { id, layers, controls, view } = opts || {};
    let map = new Map({
        target: id,
        layers,
        view: new View({
            projection: EPSG4326,
            ...view,
        }),
        controls: defaults({// 设置地图控件，默认的三个控件都不显示
            attribution: false,
            rotate: false,
            zoom: false,
            ...controls,
        }).extend(id === 'lvg-map' ? [mousePositionControl('mouse-position',"right-bottom")] : ''),
    });
    // map.addControl( mousePositionControl('mouse-position',"right-bottom") );
    return map;
}
//实例化鼠标位置经纬度控件
export function mousePositionControl(id,cN) {
    return new MousePosition({
        coordinateFormat: createStringXY(4), //坐标格式
        projection: EPSG4326, //地图投影坐标系
        className: `custom-mouse-position ${cN}`, //坐标信息显示样式,cN:自定义类名
        target: document.getElementById(id), // 显示鼠标位置信息的目标容器
        undefinedHTML: '不在范围内', //未定义坐标的标记
    });
}
//设置图层是否显示，opts: { layerId: true/false }
export function setVisibleLayer(map, opts) {
    Object.keys(opts).forEach(layerId => {
        const layer = findLayerById(map, layerId);
        if (layer) {
            layer.setVisible(opts[layerId]);
        }
    });
}
//根据 layerId 来查找 layer
export function findLayerById(map, layerId) {
    const layers = map.getLayers().getArray();
    for (let i = 0; i < layers.length; i++) {
        const prop = layers[i].getProperties();
        if (prop['layerId'] === layerId) {
            return layers[i];
        }
    }
}
//创建图层
export function createLayer(opts) { 
    const { style, source, ...layerOpts } = opts || {};
    return new VectorLayer({
        source: new VectorSource({
            format: new GeoJSON(),
            ...source,
        }),
        style: typeof style === 'function' ? style : createStyle(style),
        ...layerOpts,
    });
}
//样式
export function createStyle(opts = {}) {
    return new Style(stampStyle(opts));
}
//整合样式参数
export function stampStyle(opts = {}) {
    const type = {
        stroke: Stroke,
        text: Text,
        fill: Fill,
        circle: Circle,
        icon: Icon,
        iconImage: IconImage,
        image: null,
        regularShape: RegularShape,
        backgroundFill: Fill,
        backgroundStroke: Stroke,
    };
    function stamp(opts) {
        const style = {};
        Object.entries(opts).forEach(([key, val]) => {
            if (key in type && isPlainObject(val)) {
                if (key == 'image') {
                    const [[k, v]] = Object.entries(val);
                    style[key] = new type[k](stamp(v));
                } else {
                    style[key] = new type[key](stamp(val));
                }
            } else {
                style[key] = val;
            }
        });
        return style;
    }
    return stamp(opts);
}
//绑定图层
export function blankLayer(opts) {
    return new VectorLayer({
        zIndex: opts.zIndex || 1000,
        ...opts,
        source: new VectorSource(),
    });
}
//给指定图层添加点要素
export function addFeaturesPoint(layer, data, isClearSource, style, x = 'lon', y = 'lat') {
    const source = layer.getSource();
    if (isClearSource) {//isClearSource用于循环创建点，isClearSource为true是不可循环创建点，false是可以循环创建点
        source.clear(); //先移除之前的点
    }
    if (!data || !data.length) {
        return;
    }
    const feature = data.map(item => {
        const point = createFeature({
            layerId: layer.get('layerId'),
            geometry: createPoint([+item[x], +item[y]]),
            data: item,
        });
        point.setStyle(typeof style == 'function' ? style(item) : style);
        return point;
    });
    source.addFeatures(feature);
}
//给指定图层添加线要素
export function addFeaturesLine(layer, data, isClearSource, style, x = 'lon', y = 'lat') {
    const source = layer.getSource();
    if (isClearSource) {//isClearSource用于循环创建线，isClearSource为true是不可循环创建线，false是可以循环创建线
        source.clear(); //先移除之前的点
    }
    if (!data || !data.length) {
        return;
    }
    const feature = [];
    data.sort((a, b) => {
        const line = createFeature({
            layerId: layer.get('layerId'),
            geometry: createLineString([
                [+b[x], +b[y]],
                [+a[x], +a[y]],
            ]),
            data: [b, a],
        });
        line.setStyle(typeof style == 'function' ? style(b, a) : style);
        feature.push(line);
    });
    source.addFeatures(feature);
}
//给指定图层添加面要素
export function addFeaturesPolygon(layer, data, isClearSource, style, x = 'lon', y = 'lat') {
    const source = layer.getSource();
    if (isClearSource) {//isClearSource用于循环创建面，isClearSource为true是不可循环创建面，false是可以循环创建面
        source.clear(); //先移除之前的点
    }
    if (!data || !data.length) {
        return;
    }
    const feature = [];
    data.sort((a, b) => {
        const line = createFeature({
            layerId: layer.get('layerId'),
            geometry: createPolygon([
                [+b[x], +b[y]],
                [+a[x], +a[y]],
            ]),
            data: [b, a],
        });
        line.setStyle(typeof style == 'function' ? style(b, a) : style);
        feature.push(line);
    });
    source.addFeatures(feature);
}
//十六进制颜色值转成rgba
export function colorRgb(str,opacity){
    let sColor = str.toLowerCase();
    if(sColor){
        if(sColor.length === 4){
            let sColorNew = "#";
            for(let i=1; i<4; i+=1){
                sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
            }
            sColor = sColorNew;
        }
        //处理六位的颜色值
        let sColorChange = [];
        for(let i = 1; i < 7; i += 2){
            sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
        }
        return "rgba(" + sColorChange.join(",")+","+opacity + ")";
    }else{
        return sColor;
    }
};
//导出api
export function createFeature(opts = {}) {
    return new Feature(opts);
}
export function createCollection() {
    return new Collection();
}
export function createCircleShape(center, radius) {
    return new CircleShape(center, radius);
}
export function createVectorLayer(opts = {}) {
    return new VectorLayer(opts);
}
export function createVectorSource(opts = {}) {
    return new VectorSource(opts);
}
export function createOverlay(opts = {}) {
    return new Overlay(opts);
}
export function createFromLonLat(arr) {
    return new fromLonLat(arr);
}
export function createPoint(opts = []) {
    return new Point(opts);
}
export function createLineString(opts = []) {
    return new LineString(opts);
}
export function createPolygon(opts = {}) {
    return new Polygon(opts);
}
export function createMultiLineString(opts = {}) {  
    return new MultiLineString(opts);
}
export function createMultiPolygon(opts = {}) {
    return new MultiPolygon(opts);
}