// 工具方法-----

import Point from 'ol/geom/Point'
import Feature from 'ol/Feature'
import TileArcGISRest from 'ol/source/TileArcGISRest'
import ImageWMS from 'ol/source/ImageWMS'
import ImageLayer from 'ol/layer/Image'
import TileLayer from 'ol/layer/Tile'
import TileWMS from 'ol/source/TileWMS'
import WMTS from 'ol/source/WMTS'
import Style from 'ol/style/Style'
import Stroke from 'ol/style/Stroke'
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'
import Icon from 'ol/style/Icon'
import { fromLonLat, transform } from 'ol/proj'
import Circle from 'ol/style/Circle'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import XYZ from 'ol/source/XYZ'
import Static from 'ol/source/ImageStatic'
import Projection from 'ol/proj/Projection'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import Cluster from 'ol/source/Cluster'
import SymbolConfig from './SymbolConfig'
import { MapServiceType } from './MapServiceType'
import WFS from 'ol/format/WFS'
import { generateID } from './util.js'
import TileSuperMapRest from '../supermap/openlayers/mapping'
import TileGrid from 'ol/tilegrid/TileGrid'
import TileImage from 'ol/source/TileImage'
import { createXYZ } from 'ol/tilegrid'
// import {apply, applyStyle} from 'ol-mapbox-style';
import {get as getProjection } from 'ol/proj.js';
import { VectorTile as VectorTileLayer } from 'ol/layer';
import { VectorTile as VectorTileSource } from 'ol/source';
import { Polyline, MVT } from 'ol/format';
// 所有的空间、属性关系-----
import { and, isNull, not, bbox, between, contains, during, equalTo, greaterThan, greaterThanOrEqualTo, intersects, lessThan, lessThanOrEqualTo, like, or, within } from 'ol/format/filter'
var setClusterStyle = null;
// var setClusterArr = [];
export function createPoint(options = {}) {
    const {
        lng,
        lat
    } = options
    return new Point([lng, lat])
}
export function createPixel(options = {}) {
    const {
        x,
        y
    } = options
    return [x, y]
}
export function createBounds(options = {}) {
    const {
        minx,
        miny,
        maxx,
        maxy
    } = options
    return [minx, miny, maxx, maxy]
}
export function createSize(options = {}) {
    const {
        width,
        height
    } = options
    return [width, height]
}
export function wgs84Toweb3857(pos) {
    let EPSG3857 = fromLonLat(pos);
    return EPSG3857;
}
export function web3857ToWgs84(pos) {
    let EPSG4326 = transform(pos, 'EPSG:3857', 'EPSG:4326');
    return EPSG4326;
}
export function createLayer(map, options) {
    let maplayer = null
    if (map) {
        const { type, config = {}, isBaseMap } = options
        let id = config.id || generateID()
            // 加载自定义发布的arcgis服务----
        if (type === MapServiceType.arcgis) {
            maplayer = new TileLayer({
                source: new TileArcGISRest({
                    url: config.url
                }),
                title: "ArcGis地图",
                id,
                isBaseMap: isBaseMap
            })
        }
        if (type === MapServiceType.gaode) {
            maplayer = new TileLayer({
                source: new XYZ({
                    crossOrigin: 'anonymous',
                    url: config.url
                }),
                title: "gaode",
                id,
                isBaseMap: isBaseMap
            })
        }
        // 加载 geoserver wms服务------
        if (type === MapServiceType.wms) { //wms可以在客户端直接设置下载解决跨域访问
            let { url, layerName, extent } = config
            maplayer = new ImageLayer({
                source: new ImageWMS({
                    url,
                    crossOrigin: 'anonymous',
                    params: { 'LAYERS': layerName },
                    ratio: 1,
                    serverType: 'geoserver'
                }),
                title: "Wms image 地图",
                id,
                isBaseMap: isBaseMap
            })
        }
        // 加载带有切片的wms服务-----
        if (type === MapServiceType.tilewms) {
            let { extent, url, layerName } = config
            maplayer = new TileLayer({
                extent,
                source: new TileWMS({
                    url,
                    params: { 'LAYERS': layerName, 'TILED': true },
                    ratio: 1,
                    serverType: 'geoserver'
                }),
                title: "Wms tile 地图",
                id,
                isBaseMap: isBaseMap
            })
        }

        if (type == MapServiceType.pbf) {
            //切片资源1 基于4326坐标系统
            var source4326 = new VectorTileSource({
                title: "",
                format: new MVT(),
                projection: "EPSG:4326",
                //切片格网直接有4326坐标系统的坐标范围与缩放大小指定,因此每一级的都是固定的
                url: config.url,
            })
            maplayer = new VectorTileLayer({
                style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
                projection: 'EPSG:4326',
                source: source4326
            });
        }

        // 加载wmts切片服务---------
        if (type === MapServiceType.wmts) {
            let { extent = [-180.0, -90.0, 180.0, 90.0], url, projection = 'EPSG:4326', format = 'image/png', resolutions, matrixIds, layerName, matrixSet, tileOrigin = [-180.0, 90.0], tileOrigins } = config
            maplayer = new TileLayer({
                source: new WMTS({
                    crossOrigin: 'anonymous',
                    attributions: 'wmts切片服务',
                    url,
                    layer: layerName,
                    matrixSet,
                    format,
                    projection,
                    tileGrid: new WMTSTileGrid({
                        // tileSize: [256, 256],
                        origin: tileOrigin || undefined,
                        // origins: tileOrigins || undefined,
                        resolutions: resolutions,
                        matrixIds: matrixIds
                    }),
                    style: 'default',
                    wrapX: true
                }),
                title: "Wmts tile 地图",
                id,
                isBaseMap: isBaseMap
            })
        }
        // 加载从网上下载的离线切片-------
        if (type === MapServiceType.custom) {
            maplayer = new TileLayer({
                source: new XYZ({
                    url: config.url,
                    // crossOrigin: 'anonymous'
                }),
                projection: 'EPSG:3857',
                title: "自定义切片地图",
                id,
                isBaseMap: isBaseMap
            })
        }
        // 加载超图服务--------
        if (type === MapServiceType.supermap) {
            maplayer = new TileLayer({
                source: new TileSuperMapRest({
                    crossOrigin: 'anonymous',
                    url: config.url,
                    wrapX: true
                }),
                projection: 'EPSG:4326',
                title: "超图地图",
                id,
                isBaseMap: isBaseMap
            })
        }
        // 加载静态图片为底图
        if (type === MapServiceType.picture) {
            let { extent, url, projection } = config
            if (projection instanceof Object) {
                extent = projection.getExtent()
            }
            maplayer = new ImageLayer({
                source: new Static({
                    attributions: '使用静态图片作为底图',
                    url,
                    projection,
                    imageExtent: extent
                }),
                title: "静态图片地图",
                id,
                isBaseMap: isBaseMap
            })
        }
        // 加载百度离线切片----------
        if (type === MapServiceType.baidu) {
            let { url } = config
            let mapResolutions = []
            for (var i = 0; i < 19; i++) {
                mapResolutions[i] = Math.pow(2, 18 - i)
            }
            let tilegrid = new TileGrid({
                origin: [0, 0],
                resolutions: resolutions
            })
            var baidu_source = new TileImage({
                tileGrid: tilegrid,
                tileUrlFunction: function(tileCoord, pixelRatio, proj) {
                    if (!tileCoord) {
                        return ""
                    }
                    var z = tileCoord[0]
                    var x = tileCoord[1]
                    var y = tileCoord[2]
                    if (x < 0) {
                        x = "M" + (-x)
                    }
                    if (y < 0) {
                        y = "M" + (-y)
                    }
                    return url + "/" + z + "/" + x + "/" + y + ".png"
                }
            })
            maplayer = new TileLayer({
                source: baidu_source,
                title: "离线百度地图",
                id,
                isBaseMap: isBaseMap
            })
        }
        var layers = map.getLayers().getArray()
        layers.forEach((layer) => {
            let flag = layer.get('isBaseMap')
            if (flag) { //为true的话删除
                map.removeLayer(layer)
            }
        })
        map.addLayer(maplayer)
    }
    return maplayer
}
// Styles for the mapbox-streets-v6 vector tile data set. Loosely based on
// http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6.json

// Styles for the mapbox-streets-v6 vector tile data set. Loosely based on
// http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6.json

function createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text) {
    var fill = new Fill({ color: '' });
    var stroke = new Stroke({ color: '', width: 1 });
    var polygon = new Style({ fill: fill });
    var strokedPolygon = new Style({ fill: fill, stroke: stroke });
    var line = new Style({ stroke: stroke });
    var text = new Style({
        text: new Text({
            text: '',
            fill: fill,
            stroke: stroke
        })
    });
    var iconCache = {};

    function getIcon(iconName) {
        var icon = iconCache[iconName];
        if (!icon) {
            icon = new Style({
                image: new Icon({
                    src: './icons/' + iconName + '_11.svg',
                    imgSize: [15, 15]
                })
            });
            iconCache[iconName] = icon;
        }
        return icon;
    }
    var styles = [];
    return function(feature, resolution) {
        var length = 0;
        var layer = feature.get('layer');
        var cls = feature.get('class');
        var type = feature.get('type');
        var scalerank = feature.get('scalerank');
        var labelrank = feature.get('labelrank');
        var adminLevel = feature.get('admin_level');
        var maritime = feature.get('maritime');
        var disputed = feature.get('disputed');
        var maki = feature.get('maki');
        var geom = feature.getGeometry().getType();
        if (layer == 'landuse') {
            if (cls == 'park') {
                fill.setColor('#d8e8c8');
                styles[length++] = polygon;
            } else if (cls == 'residential' || cls == 'suburb' || cls == 'neighbourhood') {
                fill.setColor("rgba(234, 230, 225, 0.4)");
                styles[length++] = polygon;
            } else if (cls == 'agriculture') {
                fill.setColor('#eae0d0');
                styles[length++] = polygon;
            } else if (cls == 'school') {
                fill.setColor('#f0e8f8');
                styles[length++] = polygon;
            } else if (cls == 'wood') {
                // fill.setColor('rgb(233,238,223)');
                // styles[length++] = polygon;
                fill.setColor('rgba(102, 170, 68, 0.1)');
                stroke.setColor('rgba(0, 0, 0, 0.03)');
                stroke.setWidth(1);
                styles[length++] = strokedPolygon;
            } else if (cls == 'commercial') {
                fill.setColor('rgb(242,202,202,0.3)');
                styles[length++] = polygon;
            } else if (cls == 'industrial') {
                fill.setColor('rgb(255, 244, 194, 0.4)');
                styles[length++] = polygon;
            } else if (cls == 'hospital') {
                fill.setColor('#fde');
                styles[length++] = polygon;
            } else if (cls == 'cemetery') {
                fill.setColor('#e0e4dd');
                styles[length++] = polygon;
            } else if (cls == 'school') {
                fill.setColor('#f0e8f8');
                styles[length++] = polygon;
            } else if (cls == 'railway') {
                fill.setColor('rgb(234, 230, 225, 0.4)');
                styles[length++] = polygon;
            }
        } else if (layer == 'landcover') {
            if (feature.get('subclass') == 'ice_shelf') {
                fill.setColor("rgba(255, 255, 255, 0.8)");
                styles[length++] = polygon;
            } else if (feature.get('subclass') == 'glacier') {
                fill.setColor("rgba(255, 255, 255, 0.8)");
                styles[length++] = polygon;
            } else if (cls == 'grass') {
                fill.setColor("#d8e8c8");
                styles[length++] = polygon;
            } else if (cls == 'wood') {
                fill.setColor('#6a4');
                stroke.setColor('rgba(0, 0, 0, 0.03)');
                stroke.setWidth(1);
                styles[length++] = strokedPolygon;
            } else if (cls == 'glacier') {
                fill.setColor("rgba(255, 255, 255, 0.9)");
                styles[length++] = polygon;
            } else if (cls == 'national_park') {
                fill.setColor("#E1EBB0");
                styles[length++] = polygon;
            }
        } else if (layer == 'park') {
            if (geom == 'Polygon' && cls == 'public_park') {
                fill.setColor("rgba(216, 232, 200, 0.8)");
                styles[length++] = polygon;
            } else if (geom == 'Polygon') {
                fill.setColor("rgba(115, 175, 75, 0.6)");
                styles[length++] = polygon;
            } else if (geom == 'LineString') {
                stroke.setColor('rgba(0, 43, 61, 0.69)');
                stroke.setWidth(1);
                styles[length++] = line;
            }
        } else if (layer == 'waterway') {
            if (geom == 'Polygon') {
                fill.setColor("#a0c8f0");
                styles[length++] = polygon;
            } else if (cls == 'canal' || cls == 'river' || cls == 'stream') {
                stroke.setColor('#a0c8f0');
                stroke.setWidth(1.3);
                // stroke.setLineDash([2, 4]);
                //  lineDash: [4],
                styles[length++] = line;
            } else if (geom == 'LineString' && cls != 'canal' && cls != 'river' && cls != 'stream') {
                stroke.setColor('rgba(160, 200, 240, 1)');
                // stroke.setLineDash([2, 4]);
                stroke.setWidth(1.3);
                //stroke.setLineCap('round');
                styles[length++] = line;
            } else if (cls == 'canal' || cls == 'stream') {
                stroke.setColor('rgba(160, 200, 240, 1)');
                stroke.setWidth(1.3);
                styles[length++] = line;
            } else if (cls == 'river') {
                stroke.setColor('rgba(160, 200, 240, 1)');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (geom == 'LineString' && feature.get('name') && !(feature.get('name_en'))) {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '14px "Open Sans Italic"');
                fill.setColor('#74aee9');
                stroke.setColor('#74aee9');
                stroke.setWidth(1);
                styles[length++] = text;
            } else {
                stroke.setColor("rgba(1, 24, 43, 1)");
                stroke.setWidth(1);
                styles[length++] = line;
            }

        } else if (layer == 'water_name') {
            if (geom == 'LineString' && feature.get('name')) {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '14px "Open Sans Italic"');
                fill.setColor('#74aee9');
                stroke.setColor('#74aee9');
                stroke.setWidth(1);
                styles[length++] = text;
            } else if (geom == 'Point' && cls == 'ocean') {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '14px "Open Sans Italic"');
                fill.setColor('#74aee9');
                stroke.setColor('#74aee9');
                stroke.setWidth(1);
                styles[length++] = text;
            } else if (geom == 'Point' && cls != 'ocean') {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '10px "Open Sans Italic"');
                fill.setColor('#74aee9');
                stroke.setColor('#74aee9');
                stroke.setWidth(1);
                styles[length++] = text;
            }
        } else if (layer == 'water') {
            if (geom == 'Polygon') {
                fill.setColor("rgba(160, 200, 240, 1)");
                styles[length++] = polygon;
            } else {
                fill.setColor("rgba(191, 217, 242, 1)");
                styles[length++] = polygon;
            }

        } else if (layer == 'housenumber' && geom == 'Point') {
            text.getText().setText(feature.get('housenumber'));
            text.getText().setFont(
                '  11px "Open Sans", "Arial Unicode MS"');
            fill.setColor('rgba(212, 177, 146, 1)');
            stroke.setColor('rgba(212, 177, 146, 1)');
            stroke.setWidth(1);
            styles[length++] = text;
        } else if (layer == 'transportation') {
            // if ( (cls == 'path' || cls == 'track')) {
            //   stroke.setColor('rgba(247, 247, 247, 1)');
            //   stroke.setWidth(1);
            //   styles[length++] = line;
            // }
            // else if (cls == 'minor' ) {
            //   if(feature.get('brunnel') == 'tunnel')
            //   {
            //     stroke.setColor('#cfcdca');
            //     stroke.setWidth(2);
            //     styles[length++] = line;
            //   }

            // } 
            // else if ( (cls == 'minor_road')) {
            //   if(feature.get('brunnel') == "bridge")
            //   {
            //     stroke.setColor('#dedede');
            //     stroke.setWidth(1.6);
            //     styles[length++] = line;
            //   }
            //   if(feature.get('brunnel') == "tunnel")
            //   {
            //     stroke.setColor('#efefef');
            //     stroke.setWidth(1.5);
            //     styles[length++] = line;
            //   }

            //   else
            //   {
            //     stroke.setColor('#efefef');
            //     stroke.setWidth(1.4);
            //     styles[length++] = line;
            //   }

            // }
            if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && (cls == 'secondary' || cls == 'tertiary')) {
                stroke.setColor('#e9ac77');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && cls == 'primary') {
                stroke.setColor('#e9ac77');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && cls == 'trunk') {
                stroke.setColor('#e9ac77');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && (cls == 'motorway')) {
                stroke.setColor('#fea');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') != "tunnel" && (cls == 'motorway_link')) {
                stroke.setColor('#fc8');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && (cls == 'primary_link' || cls == 'secondary_link' || cls == 'tertiary_link' || cls == 'trunk_link')) {
                stroke.setColor('#fea');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && (cls == 'secondary' || cls == 'tertiary')) {
                stroke.setColor('#fea');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') == "bridge" && (cls == 'motorway_link')) {
                stroke.setColor('#e9ac77');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') == "bridge" && (cls == 'primary_link' || cls == 'secondary_link' || cls == 'tertiary_link' || cls == 'trunk_link')) {
                stroke.setColor('#e9ac77');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') == "bridge" && (cls == 'secondary' || cls == 'tertiary')) {
                stroke.setColor('#fea');
                stroke.setWidth(1.4);
                styles[length++] = line;
            } else if (feature.get('brunnel') == "bridge" && (cls == 'primary' || cls == 'trunk')) {
                stroke.setColor('rgba(235, 167, 107, 1)');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') == "bridge" && (cls == 'motorway')) {
                stroke.setColor('#e9ac77');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') == "bridge" && (cls == 'motorway_link')) {
                stroke.setColor('#fc8');
                stroke.setWidth(1.2);
                styles[length++] = line;
            } else if (feature.get('brunnel') == "bridge" && (cls == 'rail')) {
                stroke.setColor('#bbb');
                stroke.setWidth(1.4);
                styles[length++] = line;
            } else if (geom == 'LineString') {
                if (feature.get('brunnel') == "tunnel" && cls == 'primary' && cls == 'trunk') {
                    stroke.setColor('#fff4c6');
                    stroke.setWidth(1.3);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "tunnel" && cls == 'secondary' && cls == 'tertiary') {
                    stroke.setColor('#e9ac77');
                    stroke.setWidth(1.4);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "tunnel" && cls == 'motorway') {
                    stroke.setColor('#ffdaa6');
                    stroke.setWidth(1.5);
                    //stroke.setLineDash([0.5, 0.25]);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "tunnel" && cls == 'path') {
                    stroke.setColor('#cba');
                    stroke.setWidth(1);
                    //stroke.setLineDash([1.5, 0.75]);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "tunnel" && (cls == 'service' || cls == 'track')) {
                    stroke.setColor('#fff');
                    stroke.setWidth(1.2);
                    //stroke.setLineDash([0.5, 0.25]);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "tunnel" && cls == 'minor_road') {
                    stroke.setColor('#fff');
                    stroke.setWidth(1.1);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "tunnel" && cls == 'minor') {
                    stroke.setColor('#cfcdca');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "tunnel" && (cls == 'secondary' || cls == 'tertiary')) {
                    stroke.setColor('#fff4c6');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "tunnel" && (cls == 'trunk' || cls == 'primary')) {
                    stroke.setColor('#fff4c6');
                    stroke.setWidth(1.4);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "tunnel" && cls == 'motorway') {
                    stroke.setColor('#ffdaa6');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "tunnel" && cls == 'rail') {
                    stroke.setColor('#bbb');
                    stroke.setWidth(1.4);
                    //stroke.setLineDash([2, 2]);
                    styles[length++] = line;
                } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && cls == 'motorway_link') {
                    stroke.setColor('#e9ac77');
                    stroke.setWidth(1.1);
                    styles[length++] = line;
                } else if (feature.get('brunnel') != "tunnel" && (cls == 'minor' || cls == 'service' || cls == 'track')) {
                    stroke.setColor('#fff');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && cls == 'motorway') {
                    stroke.setColor('#fc8');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') != "tunnel" && (cls == 'minor' || cls == 'track' || cls == 'service')) {
                    stroke.setColor('#cfcdca');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && cls == 'path') {
                    stroke.setColor('#cba');
                    stroke.setWidth(1.2);
                    //stroke.setLineDash([1.5, 0.75]);
                    styles[length++] = line;
                } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && cls == 'motorway_link') {
                    stroke.setColor('#e9ac77');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && (cls == 'primary_link' || cls == 'secondary_link' || cls == 'tertiary_link' || cls == 'trunk_link')) {
                    stroke.setColor('#e9ac77');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && (cls == 'minor' || cls == 'service' || cls == 'track')) {
                    stroke.setColor('#fff');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && (cls == 'primary')) {
                    stroke.setColor('#fea');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && (cls == 'trunk')) {
                    stroke.setColor('#fea');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if ((cls == 'rail')) {
                    stroke.setColor('rgba(186, 186, 186, 0.77)');
                    stroke.setWidth(1.4);
                    styles[length++] = line;
                }
                // else if( (cls =='rail' || cls =='service'))
                // {
                //    stroke.setColor('rgba(186, 186, 186, 0.77)');
                //    stroke.setWidth(1.2);
                //    styles[length++] = line;
                // }
                else if (feature.get('brunnel') != "tunnel" && feature.get('brunnel') != "bridge" && (cls == 'rail')) {
                    stroke.setColor('#bbb');
                    stroke.setWidth(1.4);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "bridge" && (cls == 'primary_link' || cls == 'secondary_link' || cls == 'tertiary_link' || cls == 'trunk_link')) {
                    stroke.setColor('#e9ac77');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "bridge" && (cls == 'primary' || cls == 'trunk')) {
                    stroke.setColor('rgb(235, 167, 107)');
                    stroke.setWidth(1.4);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "bridge" && (cls == 'path')) {
                    stroke.setColor('#f8f4f0');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "bridge" && (cls == 'path')) {
                    stroke.setColor('#cba');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "bridge" && (cls == 'primary_link' || cls == 'secondary' || cls == 'tertiary')) {
                    stroke.setColor('#fea');
                    stroke.setWidth(1.2);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "bridge" && (cls == 'motorway')) {
                    stroke.setColor('#fc8');
                    stroke.setWidth(1);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "bridge" && (cls == 'rail')) {
                    stroke.setColor('#bbb');
                    stroke.setWidth(0.7);
                    styles[length++] = line;
                } else if (feature.get('brunnel') == "bridge" && (cls == 'rail')) {
                    stroke.setColor('#bbb');
                    stroke.setWidth(0.7);
                    styles[length++] = line;
                }

            } else if (geom == 'Polygon') {
                fill.setColor('rgba(227, 227, 227, 0.9)');
                stroke.setColor('#cfcdca');
                stroke.setWidth(1);
                styles[length++] = strokedPolygon;
            }

            //////////////////////////////////////////////////////////////////////
        } else if (layer == 'aeroway') {
            if (geom == 'Polygon' && (cls == 'runway' || cls == 'taxiway')) {
                fill.setColor('rgba(255, 255, 255, 1)');
                styles[length++] = fill;
            } else if (geom == 'LineString' && (cls == 'taxiway')) {
                stroke.setColor('rgba(255, 255, 255, 1)');
                stroke.setWidth(1.5);
                styles[length++] = line;
            } else if ((cls == 'taxiway')) {
                stroke.setColor('rgba(255, 255, 255, 1)');
                stroke.setWidth(1.1);
                styles[length++] = line;
            } else if ((cls == 'taxiway')) {
                stroke.setColor('rgba(153, 153, 153, 1)');
                stroke.setWidth(1.5);
                styles[length++] = line;
            } else if (geom == 'LineString' && (cls == 'runway')) {
                stroke.setColor('rgba(255, 255, 255, 1)');
                stroke.setWidth(1.5);
                styles[length++] = line;
            } else if ((cls == 'runway')) {
                stroke.setColor('rgba(153, 153, 153, 1)');
                stroke.setWidth(1.5);
                styles[length++] = line;
            }

        } else if (layer == 'boundary') {

            if (feature.get('admin_level') == 2 && (feature.get('maritime') != 1)) {
                stroke.setColor('rgb(164, 162, 174)');
                stroke.setWidth(1);
                styles[length++] = line;

            } else if ((feature.get('admin_level') == 4 || feature.get('admin_level') == 6 || feature.get('admin_level') == 8) && (feature.get('maritime') != 1)) {
                stroke.setColor('#9e9cab');
                stroke.setWidth(1.4);
                stroke.setLineDash([3, 1, 1, 1]);
                styles[length++] = line;
            } else if ((feature.get('admin_level') == 4 || feature.get('admin_level') == 2) && (feature.get('maritime') == 1)) {
                stroke.setColor('rgba(154, 189, 214, 0.9)');
                stroke.setWidth(1);
                styles[length++] = line;
            }

        } else if (layer == 'poi' && geom == 'Point') {

            if (feature.get('rank') == 1) {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '10px "Open Sans Semibold"');
                fill.setColor('#666');
                stroke.setColor('#666)');
                stroke.setWidth(1);
                styles[length++] = text;
            } else if (feature.get('rank') >= 25) {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '10px "Open Sans Semibold"');
                fill.setColor('#666');
                stroke.setColor('#666');
                stroke.setWidth(1);
                styles[length++] = text;
            } else if (feature.get('rank') <= 24 && feature.get('rank') >= 15) {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '10px "Open Sans Semibold"');
                fill.setColor('#666');
                stroke.setColor('#666');
                stroke.setWidth(1);
                styles[length++] = text;
            } else if (feature.get('rank') <= 14) {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '10px "Open Sans Semibold"');
                fill.setColor('#666');
                stroke.setColor('#666');
                stroke.setWidth(1);
                styles[length++] = text;
            }

        } else if (layer == 'transportation_name') {

            var curname = feature.get('name');

            if (cls == 'path' && curname) {
                var index = curname.indexOf(' /');
                if (index != -1) {
                    curname = curname.substr(0, index);
                }
                text.getText().setText(curname);
                text.getText().setFont('10px "Open Sans Regular"');
                fill.setColor('#gba(180, 158, 136, 0.9)');
                stroke.setColor('#f8f4f0');
                stroke.setWidth(0.5);
                styles[length++] = text;
            } else if ((cls == 'minor' || cls == 'service' || cls == 'track') && geom == 'LineString' && curname) {
                var index = curname.indexOf(' /');
                if (index != -1) {
                    curname = curname.substr(0, index);
                }
                text.getText().setText(curname);
                text.getText().setFont('10px "Open Sans Regular"');
                fill.setColor('#765');
                stroke.setColor('#765');
                stroke.setWidth(1);
                styles[length++] = text;
            } else if ((cls == 'secondary' || cls == 'primary' || cls == 'tertiary' || cls == 'trunk') && curname) {
                var index = curname.indexOf(' /');
                if (index != -1) {
                    curname = curname.substr(0, index);
                }
                text.getText().setText(curname);
                text.getText().setFont('10px "Open Sans Regular"');
                fill.setColor('#765');
                stroke.setColor('#765');
                stroke.setWidth(1);
                styles[length++] = text;
            } else if (geom == 'LineString' && feature.get('ref_length') <= 6) {
                if (feature.get('ref_length') <= 6) {
                    text.getText().setText(feature.get('ref'));
                    text.getText().setFont('10px "Open Sans Semibold"');
                    fill.setColor('#765');
                    stroke.setColor('#765');
                    stroke.setWidth(1);
                    styles[length++] = text;
                }

            }
        } else if (layer == 'place') {

            if (cls == 'state') {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '12px "pen Sans Semibold"');
                fill.setColor('#333');
                stroke.setColor('#333');
                stroke.setWidth(1);
                styles[length++] = text;

            } else if (cls == 'city') {
                if (feature.get('capital') != 2) {
                    text.getText().setText(feature.get('name'));
                    text.getText().setFont(
                        '11px "pen Sans Semibold"');
                    fill.setColor('rgba(51, 51, 51, 0.8)');
                    stroke.setColor('rgba(51, 51, 51, 0.8)');
                    stroke.setWidth(1);
                    styles[length++] = text;
                } else {
                    styles[length++] = getIcon('star_11');;
                }

            } else if (cls == 'continent') {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '14px "Open Sans Bold"');
                fill.setColor('rgba(51, 51, 51, 0.8)');
                stroke.setColor('rgba(51, 51, 51, 0.8)');
                stroke.setWidth(1);
                styles[length++] = text;
            } else if (cls == 'country') {
                if (feature.get('rank') >= 3) {
                    text.getText().setText(feature.get('name'));
                    text.getText().setFont(
                        '13px "Open Sans Bold"');
                    fill.setColor('rgba(51, 51, 51, 0.8)');
                    stroke.setColor('rgba(51, 51, 51, 0.8)');
                    stroke.setWidth(1);
                    styles[length++] = text;
                } else if (feature.get('rank') == 2) {
                    text.getText().setText(feature.get('name'));
                    text.getText().setFont(
                        '13px "Open Sans Bold"');
                    fill.setColor('rgba(51, 51, 51, 0.8)');
                    stroke.setColor('rgba(51, 51, 51, 0.8)');
                    stroke.setWidth(1);
                    styles[length++] = text;
                } else if (feature.get('rank') == 1) {
                    text.getText().setText(feature.get('name'));
                    text.getText().setFont(
                        '13px "Open Sans Bold"');
                    fill.setColor('rgba(51, 51, 51, 0.8)');
                    stroke.setColor('rgba(51, 51, 51, 0.8)');
                    stroke.setWidth(1);
                    styles[length++] = text;
                }

            } else if (cls == 'town') {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '10px "Open Sans Regular"');
                fill.setColor('rgba(51, 51, 51, 0.8)');
                stroke.setColor('rgba(51, 51, 51, 0.8)');
                stroke.setWidth(1);
                styles[length++] = text;
            } else if (cls == 'village') {
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '9px "Open Sans Regular"');
                fill.setColor('rgba(51, 51, 51, 0.8)');
                stroke.setColor('rgba(51, 51, 51, 0.8)');
                stroke.setWidth(1);
                styles[length++] = text;
            } else {
                console.log(cls);
                text.getText().setText(feature.get('name'));
                text.getText().setFont(
                    '8px "Open Sans"');
                fill.setColor('rgba(51, 51, 51, 0.8)');
                stroke.setColor('rgba(51, 51, 51, 0.8)');
                stroke.setWidth(1);
                styles[length++] = text;
            }

        } else if (layer == 'building') {
            fill.setColor('#f2eae2');
            stroke.setColor('#dfdbd7');
            stroke.setWidth(1);
            styles[length++] = strokedPolygon;
            //fill.setColor( "#f2eae2");
            //styles[length++] = polygon;
        }
        // else if (layer == 'tunnel' && cls == 'motorway_link') {
        //   stroke.setColor('#e9ac77');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'tunnel' && cls == 'service') {
        //   stroke.setColor('#cfcdca');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'tunnel' &&
        //     (cls == 'street' || cls == 'street_limited')) {
        //   stroke.setColor('#cfcdca');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // }
        // else if (layer == 'tunnel' && cls == 'main' &&
        //     resolution <= 1222.99245256282) {
        //   stroke.setColor('#e9ac77');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // }
        //  else if (layer == 'tunnel' && cls == 'motorway') {
        //   stroke.setColor('#e9ac77');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // }
        //  else if (layer == 'tunnel' && cls == 'path') {
        //   stroke.setColor('#cba');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'tunnel' && cls == 'major_rail') {
        //   stroke.setColor('#bbb');
        //   stroke.setWidth(2);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'road' && cls == 'motorway_link') {
        //   stroke.setColor('#e9ac77');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'road' && (cls == 'street' ||
        //     cls == 'street_limited') && geom == 'LineString') {
        //   stroke.setColor('#cfcdca');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'road' && cls == 'main' &&
        //     resolution <= 1222.99245256282) {
        //   stroke.setColor('#e9ac77');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'road' && cls == 'motorway' &&
        //     resolution <= 4891.96981025128) {
        //   stroke.setColor('#e9ac77');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'road' && cls == 'path') {
        //   stroke.setColor('#cba');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'road' && cls == 'major_rail') {
        //   stroke.setColor('#bbb');
        //   stroke.setWidth(2);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'bridge' && cls == 'motorway_link') {
        //   stroke.setColor('#e9ac77');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'bridge' && cls == 'motorway') {
        //   stroke.setColor('#e9ac77');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'bridge' && cls == 'service') {
        //   stroke.setColor('#cfcdca');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'bridge' &&
        //     (cls == 'street' || cls == 'street_limited')) {
        //   stroke.setColor('#cfcdca');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'bridge' && cls == 'main' &&
        //     resolution <= 1222.99245256282) {
        //   stroke.setColor('#e9ac77');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'bridge' && cls == 'path') {
        //   stroke.setColor('#cba');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'bridge' && cls == 'major_rail') {
        //   stroke.setColor('#bbb');
        //   stroke.setWidth(2);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'admin' && adminLevel >= 3 && maritime === 0) {
        //   stroke.setColor('#9e9cab');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'admin' && adminLevel == 2 &&
        //     disputed === 0 && maritime === 0) {
        //   stroke.setColor('#9e9cab');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'admin' && adminLevel == 2 &&
        //     disputed === 1 && maritime === 0) {
        //   stroke.setColor('#9e9cab');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'admin' && adminLevel >= 3 && maritime === 1) {
        //   stroke.setColor('#a0c8f0');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'admin' && adminLevel == 2 && maritime === 1) {
        //   stroke.setColor('#a0c8f0');
        //   stroke.setWidth(1);
        //   styles[length++] = line;
        // } 
        // else if (layer == 'country_label' && scalerank === 1) {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"');
        //   fill.setColor('#334');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(2);
        //   styles[length++] = text;
        // } 
        // else if (layer == 'country_label' && scalerank === 2 &&
        //     resolution <= 19567.87924100512) {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont('bold 10px "Open Sans", "Arial Unicode MS"');
        //   fill.setColor('#334');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(2);
        //   styles[length++] = text;
        // } 
        // else if (layer == 'country_label' && scalerank === 3 &&
        //     resolution <= 9783.93962050256) {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont('bold 9px "Open Sans", "Arial Unicode MS"');
        //   fill.setColor('#334');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(2);
        //   styles[length++] = text;
        // } else if (layer == 'country_label' && scalerank === 4 &&
        //     resolution <= 4891.96981025128) {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont('bold 8px "Open Sans", "Arial Unicode MS"');
        //   fill.setColor('#334');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(2);
        //   styles[length++] = text;
        // } else if (layer == 'marine_label' && labelrank === 1 &&
        //     geom == 'Point') {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont(
        //       '  11px "Open Sans", "Arial Unicode MS"');
        //   fill.setColor('#74aee9');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(1);
        //   styles[length++] = text;
        // } else if (layer == 'marine_label' && labelrank === 2 &&
        //     geom == 'Point') {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont(
        //       '  11px "Open Sans", "Arial Unicode MS"');
        //   fill.setColor('#74aee9');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(1);
        //   styles[length++] = text;
        // } else if (layer == 'marine_label' && labelrank === 3 &&
        //     geom == 'Point') {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont(
        //       '  10px "Open Sans", "Arial Unicode MS"');
        //   fill.setColor('#74aee9');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(1);
        //   styles[length++] = text;
        // } else if (layer == 'marine_label' && labelrank === 4 &&
        //     geom == 'Point') {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont(
        //       '  9px "Open Sans", "Arial Unicode MS"');
        //   fill.setColor('#74aee9');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(1);
        //   styles[length++] = text;
        // } else if (layer == 'place_label' && type == 'city' &&
        //     resolution <= 1222.99245256282) {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont('11px "Open Sans", "Arial Unicode MS"');
        //   fill.setColor('#333');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(1);
        //   styles[length++] = text;
        // } else if (layer == 'place_label' && type == 'town' &&
        //     resolution <= 305.748113140705) {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont('9px "Open Sans", "Arial Unicode MS"');
        //   fill.setColor('#333');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(1);
        //   styles[length++] = text;
        // } else if (layer == 'place_label' && type == 'village' &&
        //     resolution <= 38.21851414258813) {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont('8px "Open Sans", "Arial Unicode MS"');
        //   fill.setColor('#333');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(1);
        //   styles[length++] = text;
        // } else if (layer == 'place_label' &&
        //     resolution <= 19.109257071294063 && (type == 'hamlet' ||
        //     type == 'suburb' || type == 'neighbourhood')) {
        //   text.getText().setText(feature.get('name'));
        //   text.getText().setFont('bold 9px "Arial Narrow"');
        //   fill.setColor('#633');
        //   stroke.setColor('rgba(255,255,255,0.8)');
        //   stroke.setWidth(1);
        //   styles[length++] = text;
        // } else if (layer == 'poi_label' && resolution <= 19.109257071294063 &&
        //     scalerank == 1 && maki !== 'marker') {
        //   styles[length++] = getIcon(maki);
        // } else if (layer == 'poi_label' && resolution <= 9.554628535647032 &&
        //     scalerank == 2 && maki !== 'marker') {
        //   styles[length++] = getIcon(maki);
        // } else if (layer == 'poi_label' && resolution <= 4.777314267823516 &&
        //     scalerank == 3 && maki !== 'marker') {
        //   styles[length++] = getIcon(maki);
        // } else if (layer == 'poi_label' && resolution <= 2.388657133911758 &&
        //     scalerank == 4 && maki !== 'marker') {
        //   styles[length++] = getIcon(maki);
        // } else if (layer == 'poi_label' && resolution <= 1.194328566955879 &&
        //     scalerank >= 5 && maki !== 'marker') {
        //   styles[length++] = getIcon(maki);
        // }
        styles.length = length;
        return styles;
    };
}
export function createProjection(extent) {
    var projection = new Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent
    })
    return projection
}
// 新添加函数，根据范围过滤点位-------------
export function getDeviceByExtent(config) {
    var wfs = new WFS()
    let featureRequest = wfs.writeGetFeature({
        srsName: config.projection,
        featureNS: config.featureNs, // 命名空间-----
        featurePrefix: config.featurePrefix, // 要素前缀----
        featureTypes: [config.layerNames], //图层名
        outputFormat: 'application/json',
        filter: bbox('geom', config.extent),
        geometryName: 'geom'
    })
    fetch(config.url, {
        method: 'POST',
        body: new XMLSerializer().serializeToString(featureRequest)
    }).then(function(response) {
        return response.json()
    }).then(function(json) {})
}
var styleCache = {}

function isLayerExist(map, layerId) {
    var layers = map.getLayers().getArray()
    var flag = false
    layers.forEach(function(_layer) {
        var id = _layer.get('id')
        if (id === layerId) {
            flag = true
        }
    })
    return flag
}

function getLayer(map, layerId) {
    var layers = map.getLayers().getArray()
    var layer = null
    layers.forEach(function(_layer) {
        var id = _layer.get('id')
        if (id === layerId) {
            layer = _layer
        }
    })
    return layer
}

export function updateClusterFeatures(map, id, features) {
    let vectors = []
    for (var i = 0; i < features.length; ++i) {
        let feature = features[i]
        let points = feature.geom.points.split(',')
        let coordinates = [parseDouble(points[0]), parseDouble(points[1])]
        let vector = new Feature(new Point(coordinates))
        vector.set('attributes', feature.attributes)
        vector.set('symbol', feature.symbol)
        vectors.push(vector)
    }
    if (isLayerExist(map, id)) {
        let layer = getLayer(map, id)
        layer.getSource().getSource().clear()
        layer.getSource().getSource().addFeatures(vectors)
    }
}

export function clearClusterFeatures(map, id, features) {
    if (isLayerExist(map, id)) {
        let layer = getLayer(map, id)
        let vector = null
        if (features) {
            features.forEach(f => {
                vector = layer.getSource().getSource().getFeatureById(f.attributes.id)
                if (vector) {
                    layer.getSource().getSource().removeFeature(vector)
                    layer.getSource().refresh()
                }
            })
        } else {
            layer.getSource().getSource().clear()
        }

    }
}
export function createPointCluster(map, config = {}) {
    const { clusterDistance = 100, id, features = [], isClear = false, zIndex = 10, scale = 1 } = config
    let vectors = []
        // for (var i = 0; i < features.length; ++i) {
        //     let feature = features[i]
        //     let points = feature.geom.points.split(',')
        //     let coordinates = [parseFloat(points[0]), parseFloat(points[1])]
        //     let vector = new Feature(new Point(coordinates))
        //     vector.set('attributes', feature.attributes)
        //     vector.set('symbol', feature.symbol)
        //     vector.setId(feature.attributes.id)
        //     vectors.push(vector)
        // }
    for (var i = 0; i < features.length; ++i) {
        let feature = features[i]
            // let points = feature.geom.points.split(',')
        let coordinates = [parseFloat(feature.X), parseFloat(feature.Y)]
        let vector = new Feature(new Point(coordinates))
        vector.set('attributes', feature.attributes)
        vector.set('symbol', feature.symbol)
        vector.setId(feature.attributes.id)
        vectors.push(vector)
    }
    if (isLayerExist(map, id)) { //两次需要ID传值不一致
        let layer = getLayer(map, id)
        if (isClear) {
            layer.getSource().getSource().clear()
        }
        layer.getSource().getSource().addFeatures(vectors)
    } else {
        var source = new VectorSource({
            features: vectors
        })
        var clusterSource = new Cluster({
            distance: clusterDistance,
            source: source
        })
        var clusters = new VectorLayer({
            id,
            source: clusterSource,
            style: styleFunction
        })
        clusters.setZIndex(zIndex)
        map.addLayer(clusters)
    }
}
export function getFeatureByPixel(map, id, pixel) {
    const layer = getLayer(map, id)
    var viewResolution = map.getView().getResolution()
    var source = layer.getSource()
    var attr = source.getGetFeatureInfoUrl(pixel, viewResolution, map.getView().getProjection(), { 'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 1 })
    return attr
}
// 样式函数---- 罗旭新添加----2019/4/28
function styleFunction(feature) {
    // if(setClusterStyle!=null||setClusterStyle!=undefined){
    let size = 0
    var clusterType = ''
    let imgSrc = ''
    if (feature.get('features')) {
        size = feature.get('features').length
    }
    if (feature.get('attributes')) {
        if (feature.get('attributes').count) {
            size = feature.get('attributes').count
        }
        if (feature.get('attributes').type) {
            clusterType = feature.get('attributes').type
        }
    }
    if (clusterType == 'videoBule') {
        imgSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAfCAYAAACoE+4eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTFGNjYwREY2RkU5MTFFOUE5MTJFRkI2RTg4OUM3OTgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTFGNjYwREU2RkU5MTFFOUE5MTJFRkI2RTg4OUM3OTgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFEMjBDOEE5NkZFNDExRTlCMjVEQkIxRUIzNkQ2NjQ5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjFEMjBDOEFBNkZFNDExRTlCMjVEQkIxRUIzNkQ2NjQ5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+t/X3ZwAAAN1JREFUeNpi/P//P8NwAkwMwwywgAjliS88gdRcIJYcov54DsTJd/MltsNiaCh7hgHq9rnISU5yGKQ2yWGZh0Y9NOqhUQ+NemjUQ6MeGvXQqIdGPTTqoVEPjXpo1EPDzEPPh4FfXiB7KAUmMETBUyBOBjEYKR1oVJ6INRzMgfgIA3SYDAv4BcSWQHyOUp/czZegSx46CcSNeORrqOEZehcK7UB8GIv4XiDuGYql3F8gjgXiD0hib4E4Doj/D0UPgcBDIM5A4oMy7jNaWshChxJoJRDbQQuCjbS2DCDAAKRJJxspr2RvAAAAAElFTkSuQmCC';
        return setStyles(1, imgSrc, '#fff', size)
    } else if (clusterType == 'videoPurple') {
        imgSrc = 'data:image/png;base64,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'
        return setStyles(0.5, imgSrc, '#fff', size)
    } else {
        imgSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABUCAYAAAAs5wHgAAAABGdBTUEAALGPC/xhBQAACn5JREFUeAHtnH+QVlUZx5/LwgKCsirItoFAxKKICUGwRFiS5IJhCtUwjiv9YTMNSjNONmVk/WHGNNXYjDM6ltU4NGUaMAWhjYNKjolisCZgOTAsRgbmD1QUxN29fb7nvffufXfv++6+P/b3fWae95577vn1fN5zzzn33HOPWSpFEfCKilWGSL7vjySZT6AXotMDncjxzJjitHdi+m/c/wr0RY67PM87ybHHpUfBAWseFi5FF6N1aCVaipwm8k70MfRhID5bSmKFxO12cMCaTIGuQxvQWtSJ75v/yiHzjh42e+0Vs/+hb75q9j71R3o6qEeV1MvhgZ59ntm4GrOxaPUks5op5nuexW14icQ3oL8BYpPLqJt+4pmWNQuAzSbBdegK1OXz9htm+54xO7jXrGm/2an3SstyxBlmk2eYTZ1pdtF8s7POidJrxbUZvQOAeyLfMjrKDg5gs1RgdJnK2fyB+Xt3mtf4V4C9YEZN6xah5tnUi81mXWo2s878ocOimriNDNcBsLGcGZcNHMDGULDb0TVoxelT5j/zqHlPbTE78VY5i9x5WqMpycLlZvOXmF85wgFsIdbd6G0ALEtpygIOaNcEBatubTX/b9vM28GNcvJE50Z2Z4iRo80+Tck+ucz8IUMcwKPktwZ4lK40KQkcwCrJ/ifoWhWj6Z9mW+4zO6ZBQx+S8Qxylt9Ae3hBVKi7cN0CQPXKRUnR4IBGv2Yb0TktzeY/vMG8nY8UVYYei1RXz1iowfyKoa72/Z2MVwLvcDEFKAoc0C4mM2GqeeOY2QN3mjG06BfCEMZW3Wx2znhXXAZBVg88uq3CpGBwQFtEFn9CqzSs+C03qsZd/Uk0Lrz2lswwhnIfR68C3pOF2FAQuADaX8hg5N6nzR6ipWhRf9UPpaLC7Eu0zDMXuMLrr7+iEHhdBhfcnozGrGrXdqrcL7pvTNZT/4PGfld9lQfmz7ocVfMu7eptO6QrhQSaOgK1aVWqaQMBmuzWYFy2yCakCn0ksNV55PvpFBwJacih3rNGbZpuz+4a/ecraHddky2ySbYhPAXbxsBm55Hrp1NwRNQ4bY56T3UE/bVNywVA/rJJtslGZA4qm/NKXnCQ1xPBWo3TNOTob71nXsvbXZRtslG2yubA9nah2k5zgiPiGILp+c40uO0v47Q20wp3yUbZGsS8O2CQmFBOcIS+Ha3WY1RffyJItKxIT9kqm5FqVAwSJREcpGcReo0e2PXsOdhENst2MQhYdECQCI5Qmk+r0CxHX3tg72BBN3jIZtkuBqhYdJAO4CA8m1DLNJ+mqaHBKrJdDMQiYJKFogM4rmq62zQJ2dvzaVkl7eET2S4GQbaOSbwIWeAgO5mLKzTdrZnbwS5iIBZwuCZgEyHJAoev3kZ5ekfQ09PdUYn6kEMMxIIiiZPYRNIeXIOu6MVKKhkCMRaOTcglAkdVnIdnrV7h6W1UKhkCYiEmSG3AyJ1E4DhbKh+99xxID/HOyhJ+xEJMAnGM5I6DWyyPtLaJQrYEMyfydIzkcOCogiNx10HXb3pR3qnECWjVgdjgByPHKqpxat8qecj1Sl2WEM9woLjFRGzECBWrCJx746gFMKkkE4ixcazCNk7r09yqoeRoqa9WVAXiWGWB01KrVJIJxNhkgZuo4FqflkoygRgbxyqscWcq+ECeGk/G0XXfGBvHKgXXRXZ5wYXLR7uY1qAKFmOTVePcvJNGeKkkE4ixcazCW/VdBa8cnhwp9YXNiIgCU5xtA2AHblgKLqLT3jE8BzgtOLFRZ7UPnp6HBEaMCl32tlzhrXpIJ/qOIJVkAsFCRF10rLLBjUuOlPpGKziF4qB+QnAHdDLuw/pNJYnA2A9FvlngnpP3xGnRxdTRjkCMzW5dCmucTk6zrN1PhyTtiHGqNcPjz3cTmVre7yqZA8fyzVN4NHp8RDHJzTZ1jDyYfc6v5Z1p5mO752D1vliENU7ubfq5UF+QppJFIMZke3ghDu6P8rxgTngpPYqAFljPaKtMWtLrJAJHFWzEp0mfLuorvFQyBNR0jdayarMDMHo+45t9q8rvfv18arl+UxGBeUsiDg9ELhxRjQs8WbxuLdMucb1IPNygdKum6dtXjG9G741DyAJHVfwPF1mjk9Y6Mai7gppV4V4LbobNEfmFkgUu8PyhjpcsND/2qXYYftAcz2C6Ut+5Bgbf2d7wDuAgu4tAW0V6MLd1l610c3CatNwCk6c7BRcEuI1jy4J68yd8tH2UgX9+3gTXKai2aVOEW5Ms7lDjFAjCGpr8WE8SK/nCno0BBo3wEbB9+eusms58DPxLWOxLMj4RXBDw+xz3asbk8lVJUQemXz3rLqsnOdv0ev6buazMCQ7SeqBdjTYvvNL8SdNzJTFw/KfNMlsQrYCzr8GAxazJkhOcghNRsyZsemLeCm7Z2PRxcmr92HfUGLMv3hj1oj/Hdjcsy2VSXnBBpDs47j6XD3S+8p2stz250ux3/q5dW+veuagX1aiCVi6/dAoO8h+QxOfRg+phG741sDoLdXzX0ZIFz+fHsFM7Q7ipo3zoOgWnyCT0Xw6Xo0emzGAjgG+4EbUu9WsZVpmpCGrbkKPoYmzlg6TOpUvglAwJNnEQvFdrZ2e6bHaP6beid8jXM0ILapp60M9g4/6uGqR7uiBhDezHiPAEerY+T/z9z9gZ782Ckuj1wJoKb/i2hTvfHKFAlwHNvbDqauEKBqeEgTeXw2Z0wnvvmP/gXeYdiGaqFKLvypSLaMQYIVSNdWU8zK+gHSq0xEWBUybAO5fDBlQjH/+JTeZtf9Ctzua074k6gc9dGz24y+496NVAe7mY0hYNTpkBT/HpZ+0HaMUhWoitv+p7m1LVfITNWW7Kem98D+W9GWid9p6ES5SSwIUpAnAR7t+heqXtP/+UeY89ZPa6+uJeFE0NLfoCe8nx5BPbBu0mgG0stVhlAadCAE+thgbLN6BDfD7N3r3DvMf/wOZFr+HTg+Lm0q7ktlwabbznk/296K1AO16OopQNXFgYAKrX/SmqoYvbjuIf1MA9O1itwq2sb6O6SzTGnEuuM+dHW50pqz+j3wOYHh/LJmUHF5YMgPNwq/27GnUjvrdeN9v/LK+LXgAikzV8ul2SaACrXlKvNKd/3GyMuquMtHAQMG0uSo7ll24DFxYVgDTNdj3KhI1NDf1bW8xvfNK8TWqmC5C5i1njUktjSqpasqE5w1j0l3H/Gr0PYEdi/mV3xjMte+LtEwTifPzq0SWo3EMf5aVbVzdN0H6XS1YRq02acWpYsRXVFLfcPSI9Ci5uERCXcb6FNs/b8CPzXurEZD3mMcGgDZPVSn4XfRxtBFaJNzypFCFDiohTligYvI2E2F7WPKaqfU1b5RJdUxiFzcTx1hN/Z29BUzl7DVwAaT3HTewg7WnrxaQlZvLTNYVRWFRxel16FRw1RrfdanSftpxdeWNHHvLTNYVBVwdxnEdv/vQqOBkOiBMcNGQ5rv3K1QGEIrf8EA1a9VypsKnECaizQFtaW/3W+9f7vlRu+QUdSTx46o4TANA61D/5rt8qlRvhTUcqeQkAyUO1R2UocvfakClfYf8PNpAW14yQcrYAAAAASUVORK5CYII='
        return setStyles(0.35, imgSrc, '#fff', size)
    }
}

function setStyles(clusterScale, clusterImg, clusterTextFill, size) {
    var textFill = new Fill({
        color: "#fff"
    })
    var style = null
    if (!style) {
        style = new Style({
            image: new Icon({
                scale: clusterScale,
                src: clusterImg
            }),
            text: new Text({
                text: size.toString(),
                fill: textFill,
                font: 'Arial,Helvetica,SimSun,sans-serif',
                offsetY: -1
                    // stroke: textStroke
            })
        })
    }
    return style
}

function styleFunctionHu(feature) {
    if (setClusterStyle != null || setClusterStyle != undefined) {
        var textFill = new Fill({
            color: setClusterStyle.textFillColor
        })
        let size = 0
        if (feature.get('features')) {
            size = feature.get('features').length
        }
        if (feature.get('attributes')) {
            if (feature.get('attributes').count) {
                size = feature.get('attributes').count
            }
        }
        var style = styleCache[size]
        if (!style) {
            style = styleCache[size] = new Style({
                image: new Icon({
                    scale: setClusterStyle.clusterImgScale,
                    src: setClusterStyle.clusterImg
                }),
                text: new Text({
                    text: size.toString(),
                    fill: textFill,
                    font: 'Arial,Helvetica,SimSun,sans-serif',
                    offsetY: -1
                        // stroke: textStroke
                })
            })
        }
        return style
    }
}
// 加载聚合点函数---- 罗旭新添加----2019/4/28（因为这么多的聚合点属于一个图层）
// export function loadClusterFeatures(map, config = {}) {
//   const { id, features = [], zIndex} = config
//   // setClusterStyle = clusterStyle;
//   // setClusterArr.push({
//   //   'count':number,
//   //   'style':clusterStyle
//   // })
//   let vectors = []
//   for (var i = 0; i < features.length; ++i) {
//       let feature = features[i]
//       let points = feature.geom.points.split(',')
//       let coordinates = [parseFloat(points[0]), parseFloat(points[1])]
//       let vector = new Feature(new Point(coordinates))
//       vector.set('attributes', feature.attributes)
//       vectors.push(vector)
//   }
//   if (isLayerExist(map, id)) {
//       let layer = getLayer(map, id)
//       layer.getSource().clear()
//       layer.getSource().addFeatures(vectors)
//   } else {
//       var source = new VectorSource({
//           features: vectors
//       })
//       var cluster = new VectorLayer({
//           id,
//           source,
//           style: styleFunction
//       })
//       cluster.setZIndex(zIndex)
//       map.addLayer(cluster)
//   }
// }
export function loadClusterFeatures(map, config = {}) {
    const { id, features = [], zIndex = 15 } = config
    let vectors = []
    for (var i = 0; i < features.length; ++i) {
        let feature = features[i]
        let points = feature.geom.points.split(',')
        let coordinates = [parseFloat(points[0]), parseFloat(points[1])]
        let vector = new Feature(new Point(coordinates))
        vector.set('attributes', feature.attributes)
        vectors.push(vector)
    }
    if (isLayerExist(map, id)) {
        let layer = getLayer(map, id)
        layer.getSource().clear()
        layer.getSource().addFeatures(vectors)
    } else {
        var source = new VectorSource({
            features: vectors
        })
        var cluster = new VectorLayer({
            id,
            source,
            style: styleFunction
        })
        cluster.setZIndex(zIndex)
        map.addLayer(cluster)
    }
}