onemap-implementationSupervision-system-frontend/website/src/utils/arcMap.js

import "ol/ol.css";
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ'
import { fromLonLat, get, transform , Projection, addProjection } from 'ol/proj';
import MousePosition from 'ol/control/MousePosition';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Fill, Stroke, Circle, Style, Icon, Text } from 'ol/style';
import Feature from 'ol/Feature';
import LinearRing from 'ol/geom/LinearRing';
import Overlay from 'ol/Overlay';
import TileArcGISRest from 'ol/source/TileArcGISRest';
import myMap from "@/utils/map.js";
import request from '@/utils/requestTwo.js'
import EsriJSON from 'ol/format/EsriJSON';
import { getTopLeft, getWidth, buffer, getCenter } from 'ol/extent';
import '@/assets/less/map.less'
import MapConfig from '@/utils/mapconfig';
import GeoJSON from 'ol/format/GeoJSON';
import { getVectorContext } from 'ol/render';
import store from '@/store'
import { GetFieldValue } from "@/api/ghyzt/yztfield.js";
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import MVT from 'ol/format/MVT';
import { createXYZ } from 'ol/tilegrid';
import { appendParams } from 'ol/uri';
import axios from "axios";
import { createMapboxStreetsV6Style } from "@/utils/mvt_style.js";
import proj4 from 'proj4';
import { register } from 'ol/proj/proj4'
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import {
    LineString,
    MultiLineString,
    MultiPoint,
    MultiPolygon,
    Point,
    Polygon,
} from 'ol/geom';
import { baseLayer } from './map.js'
import { assertEnumMember } from "@babel/types";
import { ElMessage } from "element-plus";
proj4.defs("EPSG:4490", "GEOGCS[\"China Geodetic Coordinate System 2000\",DATUM[\"China_2000\",SPHEROID[\"CGCS2000\",6378137,298.257222101,AUTHORITY[\"EPSG\",\"1024\"]],AUTHORITY[\"EPSG\",\"1043\"]],PRIMEM[\"Greenwich\",0,AUTHORITY[\"EPSG\",\"8901\"]],UNIT[\"degree\",0.0174532925199433,AUTHORITY[\"EPSG\",\"9122\"]],AUTHORITY[\"EPSG\",\"4490\"]]");
register(proj4);
var map;

const arcMap = (function() {
    var myMaps = {
        _basemap: null,
        _domid: null,
        _EPSG: null,
        _center: [121.662, 43.798],
        EPSG: {
            C3857: 'EPSG:3857',
            C4326: 'EPSG:4326',
            C4490: 'EPSG:4490', //国家2000
            C4610: 'EPSG:4610', //西安1980
        },
        //地图
        map: {},
        //对比的地图
        map1: null,
        map2: null,
        map3: null,
        map4: null,
        //比较地图
        compareMap(type, view, item, option) {
            var imgsource;
            if (option.source) {
                imgsource = option.source
            } else {
                if (item.type == 'WMTS') {
                    imgsource = new XYZ({
                        url: item.url + `/tile/{z}/{y}/{x}`,
                    });
                } else {
                    imgsource = new TileArcGISRest({
                        url: item.url,
                    });
                }
            }
            myMap[type] = arcMap[type] = new Map({
                layers: [
                    new TileLayer({
                        name: item.url,
                        source: imgsource,
                    })
                ],
                view: view,
                target: type
            })
            var la = new VectorLayer({
                name: "compare-feature",
                declutter: false,
                source: new VectorSource({
                    features: [],
                }),
                style: new Style({
                    stroke: new Stroke({
                        color: '#1171d6',
                        width: 4,
                        lineDash: [1, 2, 3, 4, 5, 6],
                    }),
                }),
                zIndex: 9,
                visible: true
            });
            var la1 = new VectorLayer({
                name: "detailedLayer",
                declutter: false,
                className: 'layer',
                source: new VectorSource({
                    features: [],
                }),
                style: new Style({
                    stroke: new Stroke({
                        color: '#ff0000',
                        width: 2,
                    }),
                }),
                zIndex: 9,
                visible: true
            });
            var pointLayer = new VectorLayer({
                zIndex: 999,
                declutter: false,
                source: new VectorSource(),
                visible: false,
            });
            arcMap.addLayer(pointLayer, type);
            // 把绘制了的canvas设置到style里面
            var style = new Style({
                image: new Icon({
                    src: new URL('../assets/map/point.png', import.meta.url).href,
                    // imgSize: [canvas.width, canvas.height],
                    // rotation: (item.psjd-90) * Math.PI / 180
                })
            });
            //创建一个Feature，并设置好在地图的位置
            var shape = new Feature({
                geometry: new Point([view.getCenter()[0], view.getCenter()[1]]),
                id:'screenCenter'+type,
            });
            // 应用具有不规则几何图形的样式到Feature
            shape.setId('screenCenter'+type)
            shape.setStyle(style);
            // 将Feature添加到之前的创建的layer中去
            pointLayer.getSource().addFeature(shape);

            arcMap[type].addLayer(la, type);
            arcMap[type].addLayer(la1, type);
            if (option.click) {
                arcMap[type].on('singleclick', function(evt) {
                    for (var i = 1; i <= 4; i++) {
                        if (arcMap['map' + i]) {
                            arcMap['map' + i].removeOverlay(arcMap['map' + i].getOverlayById("popup_temp" + 'map' + i));
                        }
                    }
                    var lonlat = arcMap.webMercatorToWgs84(evt.coordinate[0], evt.coordinate[1]);
                    var view = arcMap[type].getView();
                    arcMap.SearchWfsByLoc(item.url, `${lonlat[0]},${lonlat[1]}`, (view.getResolution() * 6.7), function(d, f) {
                        if (d.length) {
                            for (var i = 1; i <= 4; i++) {
                                if (arcMap['map' + i]) {
                                    var _cmap = arcMap.getLayerByNameAndMap('compare-feature', 'map' + i);
                                    _cmap.getSource().clear();
                                    _cmap.getSource().addFeatures(d);
                                }
                            }
                            if (!item.attrs) {
                                var data = d[0].getProperties();
                                var header = [];
                                for (let key in data) {
                                    if (key != 'geometry') {
                                        header.push({
                                            sxbm: key,
                                            sxmc: key
                                        })
                                    }
                                }
                                item.attrs = header;
                            }
                            arcMap.popupInfo({
                                feature: d[0],
                                type: type,
                                position: evt,
                                title: item.name,
                                attrs: item.attrs
                            })
                            arcMap[type].updateSize();
                        } else {

                        }
                    })
                });
            }
            if (option.autoPupop) {
                // arcMap[type].on('movestart',function(evt){
                //     pointLayer.setVisible(false)
                // })
                arcMap[type].on('moveend',function(evt){
                    let cur_feature = pointLayer.getSource().getFeatureById('screenCenter'+type)
                    if(cur_feature){
                        let CPoint = [arcMap[type].getView().getCenter()[0], arcMap[type].getView().getCenter()[1]]
                        cur_feature.setGeometry(new Point(CPoint))
                        var lonlat = arcMap.webMercatorToWgs84(CPoint[0], CPoint[1]);
                        var view = arcMap[type].getView();
                        for (var i = 1; i <= 4; i++) {
                            if (arcMap['map' + i]) {
                                arcMap['map' + i].removeOverlay(arcMap['map' + i].getOverlayById("popup_temp" + 'map' + i));
                            }
                        }
                        arcMap.SearchWfsByLoc(item.url, `${lonlat[0]},${lonlat[1]}`, (view.getResolution() * 6.7), function(d, f) {
                            if (d.length) {
                                for (var i = 1; i <= 4; i++) {
                                    if (arcMap['map' + i]) {
                                        var _cmap = arcMap.getLayerByNameAndMap('compare-feature', 'map' + i);
                                        _cmap.getSource().clear();
                                        _cmap.getSource().addFeatures(d);
                                    }
                                }
                                if (!item.attrs) {
                                    var data = d[0].getProperties();
                                    var header = [];
                                    for (let key in data) {
                                        if (key != 'geometry') {
                                            header.push({
                                                sxbm: key,
                                                sxmc: key
                                            })
                                        }
                                    }
                                    item.attrs = header;
                                }
                                arcMap.popupInfo({
                                    feature: d[0],
                                    type: type,
                                    position: {coordinate:CPoint} ,
                                    title: item.name,
                                    attrs: item.attrs
                                })
                                arcMap[type].updateSize();
                            }
                        })
                    }
                    // pointLayer.setVisible(true)
                })
            }
        },
        loadMap: function(domId, par = {}) {
            var _op = {
                center: MapCenter.point,
                zoom: 8,
                base: ["tdtImg", "tdtImgAnn", "tdtVec", "tdtVecAnn", "jxMap", "cityLine"],
                view: null
            };
            var option = Object.assign({}, _op, par);
            //构建默认地图视图
            if (!option.view) {
                option.view = new View({
                    projection: get('EPSG:3857'),
                    center: fromLonLat(option.center),
                    zoom: option.zoom,
                    units: 'm',
                    minZoom: 2,
                })
            }

            arcMap._EPSG = arcMap.EPSG.C3857;
            this._domid = domId;

            this._basemap = [];
            for (var i = 0; i < option.base.length; i++) {
                var _layer = baseLayer[option.base[i]]();
                if (_layer) {
                    if (i == 0) {
                        _layer.setVisible(true);
                    }
                    arcMap._basemap.push(_layer);
                }
            }
            map = myMap.map = arcMap.map = new Map({
                target: domId,
                layers: this._basemap,
                view: option.view
            });
            this.tempLayers.init();
            if (!option.hideCity)
                this.cityLineDefault(!par.zoom)
            else if (!par.zoom)
                myMap.zoomToextent(MapCenter.extent)
        },
        tempLayers: {
            _draw: "dview_draw_Layer",
            _search: "dview_search_Layer",
            dview_draw_Layer: null,
            dview_search_Layer: null,
            init: function() {
                if (!arcMap.getLayer(this._draw)) {
                    arcMap.addLayer(arcMap.CreateVecLayer(this._draw));
                    this.dview_draw_Layer = arcMap.getLayer(this._draw);
                }
                if (!arcMap.getLayer(this._search)) {
                    arcMap.addLayer(arcMap.CreateVecLayerOfPopup(this._search));
                    this.dview_search_Layer = arcMap.getLayer(this._search);
                    this.dview_search_Layer.setStyle(arcMap.SetSelectStyle);
                }
            },
            clear: function(layer) {
                if (layer) {
                    layer.getSource().clear();
                } else {
                    this.dview_draw_Layer.getSource().clear();
                    this.dview_search_Layer.getSource().clear();
                }
            }
        },
        cityLineDefault(zoom) {
            request({
                url: `/js/${XZQ_DM}.geojson`,
                method: 'get',
            }).then(res => {
                var f = new GeoJSON().readFeatures(Base64.decode(res));
                var city = baseLayer.cityLine();
                city.getSource().addFeatures(f);
                city.setVisible(true);
                arcMap.addLayer(city);
                if (zoom)
                    arcMap.zoomToextent(f[0].getGeometry().getExtent())
            })
        },
        //按name获取
        getLayer: function(name) {
            var layer_ = null;
            this.map.getLayers().forEach(function(layer, i) {
                if (layer && layer.get("name") && layer.get("name") == name.toString()) {
                    layer_ = layer;
                    return;
                }
            });
            return layer_;
        },
        //按id获取
        getLayerById: function(id) {
            var layer_ = null;
            this.map.getLayers().forEach(function(layer, i) {
                if (layer && layer.get("id") && layer.get("id") == id.toString()) {
                    layer_ = layer;
                    return;
                }
            });
            return layer_;
        },
        //获取指定地图的图层
        getLayerByNameAndMap: function(name, type) {
            var layer_ = null;
            this[type].getLayers().forEach(function(layer) {
                if (layer && layer.get("name") && layer.get("name") == name) {
                    layer_ = layer;
                    return;
                }
            });
            return layer_;
        },
        zoomToextent: function(extent, meters) {
            meters = meters || 1000
            var view = arcMap.map.getView()
            view.fit(buffer(extent, meters), arcMap.map.getSize());
        },
        zoomToFeature: function(feature, meters) {
            meters = meters || 1000;
            let extent;
            //添加支持多个feature sky220622 
            if (Array.isArray(feature)) {
                let cords = [];
                for (let i = 0; i < feature.length; i++) {
                    let cord = feature[i].getGeometry().getExtent();
                    cords.push([cord[0], cord[1]]);
                    cords.push([cord[2], cord[3]]);
                }
                let testfs = new Feature({ geometry: new LineString(cords) })
                extent = testfs.getGeometry().getExtent();
            } else {
                extent = feature.getGeometry().getExtent();
            }
            arcMap.map.zoomToextent(feature.getGeometry().getExtent(), meters)
        },
        //缩放到中心点
        zoomToCenter: function(zoom, center) {
            var view = arcMap.map.getView()
            view.setZoom(zoom || 12);
            view.setCenter(fromLonLat(center || myMaps._center));
        },
        //缩放到图层
        zoomToLayer: function(layurl, cl) {
            var url = layurl + '?f=pjson' //空间查询url;
            request({
                method: 'get',
                url: url,
            }).then(res => {
                var extent = [res.fullExtent.xmin, res.fullExtent.ymin, res.fullExtent.xmax, res.fullExtent.ymax];
                myMaps.zoomToextent(extent, 20000)
                if (cl) cl(extent);
            })
        },
        //移动
        moveToFeature: function(feature) {
            let extent;
            //sky220622 添加支持多个feature
            if (Array.isArray(feature)) {
                let cords = [];
                for (let i = 0; i < feature.length; i++) {
                    let cord = feature[i].getGeometry().getExtent();
                    cords.push([cord[0], cord[1]]);
                    cords.push([cord[2], cord[3]]);
                }
                let testfs = new Feature({ geometry: new LineString(cords) })
                extent = testfs.getGeometry().getExtent();
            } else {
                extent = feature.getGeometry().getExtent();
            }
            var center = getCenter(extent)
            var view = arcMap.map.getView()
            view.setCenter(center);
            arcMap.map.render();
        },
        addLayer: function(layer, type) {
            if (type) {
                this[type].addLayer(layer);
            } else {
                this.map.addLayer(layer);
            }
        },
        //删除图层
        removeLayer: function(layer) {
            var _layer = layer
            if (typeof(layer) == "string")
                _layer = arcMap.getLayer(layer)
            if (_layer)
                _layer.setVisible(false);
            this.map.removeLayer(_layer);
        },
        CreateVecLayer: function(layername, style, popup) {
            style = style || new Style({
                fill: new Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new Stroke({
                    color: '#00008B',
                    width: 2
                }),
                image: new Circle({
                    radius: 7,
                    fill: new Fill({
                        color: '#00008B'
                    })
                })
            });
            if (typeof(style) == "string") {
                style = MapConfig[style].style;
            }
            var _VectorLayer = new VectorLayer({
                zIndex: 9,
                declutter: false,
                source: new VectorSource(),
                name: layername,
                style: style,
                visible: true
            });
            if (popup) this.CreateLayerPopup(_VectorLayer, popup);
            return _VectorLayer;
        },
        SetSelectStyle: function(feature, resolution) {
            return new Style({
                fill: new Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new Circle({
                    radius: 7,
                    fill: new Fill({
                        color: '#ffcc33'
                    })
                }),
            });
        },
        //地图平移
        animateByGeom(g) {
            var view = arcMap.map.getView();
            var center = g.getCenter();
            view.animate({
                center: fromLonLat([center[0], center[1]]),
                zoom: arcMap.map.getView().getZoom(),
                duration: 1000,
            });
        },
        CreateVecLayerOfPopup: function(layername, style) {
            return this.CreateVecLayer(layername, style, true);
        },
        CreateLayerPopup: function(layer, popup) {
            if (layer && typeof(layer) != "object")
                layer = arcMap.getLayer(layer);
            if (layer)
                layer.popupInfo = popup;
            return layer;
        },
        lonLatToWebMercator: function(lon, lat) {
            var x = lon * 20037508.34 / 180;
            var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
            y = y * 20037508.34 / 180;
            return [x, y];
        },
        webMercatorToWgs84: function(x, y) {
            var lon = x / 20037508.34 * 180;
            var lat = y / 20037508.34 * 180;
            lat = 180 / Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI / 2);
            return [lon, lat];
        },
        LonLatDisplay: function() {
            var mousePositionControl = new MousePosition({
                coordinateFormat: function(e) {
                    var es = arcMap.webMercatorToWgs84(e[0], e[1])
                    return "经度：" + es[0].toFixed(2) + "° , 纬度：" + es[1].toFixed(2) + "°";
                },
                projection: get('EPSG:3857'),
                className: 'lonlat',
                target: document.getElementById('lonlat'),
                undefinedHTML: '&nbsp;',
            });
            mousePositionControl.setMap(arcMap.map);
        },
        removePopupOverlay: function() {
            arcMap.map.removeOverlay(arcMap.getPopupOverlay());
        },
        getPopupOverlay: function() {
            return this.map.getOverlayById("popup_temp");
        },
        addOverlay: function(Overlay, type) {
            if (type) {
                this[type].addOverlay(Overlay);
            } else {
                this.map.addOverlay(Overlay);
            }
        },
        //地图弹窗--点
        popupInfo: function(option) {
            var feature = option.feature;
            var evt = option.position;
            var _popupId_ = option.type ? "popup_temp" + option.type : "popup_temp";
            if (typeof(option.type) == 'string') {
                arcMap[option.type].removeOverlay(this.map.getOverlayById(_popupId_));
            } else {
                option.type = null;
                arcMap.map.removeOverlay(arcMap.getPopupOverlay());
            }
            var html = arguments[1];
            if (!html) {
                html = "<div id='" + _popupId_ + "' class='map-popupinfo'>";
                html += "<div class='popupinfo-title' >" + option.title + "<el-icon class='pointer popupinfo-close' id='closePop'><close /></el-icon></div>";
                html += "<ul class='popupinfo-content'>";
                if (Object.keys(option.attrs).length > 0) {
                    for (var p in option.attrs) {
                        var _value = feature.get(option.attrs[p].sxmc);
                        if (option.attrs[p].callback) {
                            _value = option.attrs[p].callback(_value)
                        }
                        if (_value == null) {
                            _value = ''
                        }
                        html += "<li><span>" + (option.attrs[p].sxbm || option.attrs[p].name) + "：</span><span>" + _value + "</span></li>";
                    }
                }
            }
            html += "</ul><div class='popupinfo-poi'></div></div>";
            var para = document.createElement("p");
            para.innerHTML = html;
            var text = option.type ? document.getElementById(option.type) : document.getElementById(myMap._domid)
            text.appendChild(para);
            if (option.type) {
                document.getElementById("closePop").onclick = function() {
                    arcMap[option.type].removeOverlay(arcMap[option.type].getOverlayById(_popupId_));
                }
            } else {
                document.getElementById("closePop").onclick = function() {
                    arcMap.map.removeOverlay(arcMap.getPopupOverlay());
                }
            }
            var popupElement = document.getElementById(_popupId_);
            var coord = evt ? evt.coordinate : feature.getGeometry().getCoordinates();
            var _overlay = new Overlay({
                id: _popupId_,
                position: coord,
                positioning: 'bottom-center',
                element: popupElement,
                stopEvent: true,
                autoPan: true,
                autoPanAnimation: {
                    duration: 250,
                }
            });
            arcMap[option.type].addOverlay(_overlay, option.type);
            popupElement.parentElement.style.zIndex = 1;
            return _overlay;
        },
        SearchWfsByLoc: function(layers, feature, buffer, callback,layerParams) {
            if (typeof(feature) == "string") {
                var lonlat = (feature || '').split(",");
                var point = fromLonLat(transform([lonlat[0], lonlat[1]], 'EPSG:3857', 'EPSG:4326'));
                feature = new Feature({ geometry: new Point(arcMap.lonLatToWebMercator(point[0], point[1])) });
            }
            var geom;
            var bf;
            if (buffer) {
                var ol3 = new jsts.io.OL3Parser();
                ol3.inject(
                    Point,
                    LineString,
                    LinearRing,
                    Polygon,
                    MultiPoint,
                    MultiLineString,
                    MultiPolygon
                );
                bf = new Feature({
                    geometry: ol3.write(ol3.read(feature.getGeometry()).buffer(buffer))
                });
                geom = bf.getGeometry();
            } else {
                geom = feature.getGeometry();
            }
            arcMap.SearchWfsData(layers, geom, function(datas, res) {
                callback(datas, bf, res);
            },layerParams)
        },
        //WFS查询
        SearchWfsData: function(layers, data, cl, layerParams) {
            if (!layers) {
                console.warn("查询图层为空")
                return;
            }
            var geo = new EsriJSON().writeGeometry(data);
            var geometryType = 'esriGeometryPolygon';
            if (data.getType() == 'Point') {
                geometryType = 'esriGeometryPoint'
            }
            var params = {
                "f": "json",
                geometry: geo,
                geometryType: geometryType,
                inSR: 3857,
                outSR: 3857,
                returnGeometry: true,
                spatialRel: 'esriSpatialRelIntersects',
                outFields: "*"
            };
            const formData = new FormData();
            for (let key in params) {
                formData.append(key, params[key])
            }
            var url = layers.endsWith('query') ? layers : layers + '/0/query' //空间查询url;
            request({
                method: 'post',
                url: url,
                data: formData,
                dataType: "json",
            }).then(res => {
                var features = new EsriJSON().readFeatures(res);
                let aliases = res.fieldAliases
                if (layerParams && layerParams.bsm) {
                    // 对字典表进行优化，避免同一图层多次查询，vuex保存字典
                    let haveDict = store.state.zyll.layerDict[layerParams.bsm]
                    if (haveDict && Object.keys(haveDict).length > 0) {
                        aliases = haveDict
                        if (cl) cl(features, aliases);
                    }else{
                        // 查询字典维护表，若配置过有数据则查字典进行汉化，否则去查询server别名
                        GetFieldValue({bsm:layerParams.bsm}).then(res=>{
                            if (res.success) {
                                if (res.data.length > 0) {
                                    let obj = {},dicObj = {}
                                    res.data.map(t=>{
                                        obj[t.fieldname] = t.fieldaliasname
                                    })
                                    dicObj[layerParams.bsm] = obj
                                    store.commit("SET_LAYERDICT", dicObj);
                                    aliases = obj
                                }
                            }
                        }).finally(()=>{ if (cl) cl(features, aliases);})
                    }
                }else{
                    if (cl) cl(features, aliases);
                }
            })
        },
        //wfs属性查询
        SearchWfsFilter(layers, filter, cl, layerParams) {
            if (!layers) {
                console.warn("查询图层为空")
                return;
            }
            var url = layers.endsWith('query') ? layers : layers + '/0/query' //空间查询url;
            arcMap.SearchWfsFilter2(url, filter, cl, layerParams);
        },
        //wfs属性查询
        SearchWfsFilter2(url, filter, cl, layerParams) {
            const formData = new FormData();
            var params = {
                "f": "pjson",
                inSR: 3857,
                outSR: 3857,
                where: filter,
                outFields: "*"
            };
            for (let key in params) {
                formData.append(key, params[key])
            }
            request({
                method: 'post',
                url: url,
                data: formData,
                dataType: "json",
            }).then(res => {
                var features;
                if (res.error && res.error.code == 400) {
                    features = res.error
                } else {
                    features = new EsriJSON().readFeatures(res);
                    let aliases = res.fieldAliases
                    if (layerParams && layerParams.bsm) {
                        // 对字典表进行优化，避免同一图层多次查询，vuex保存字典
                        let haveDict = store.state.zyll.layerDict[layerParams.bsm]
                        if (haveDict && Object.keys(haveDict).length > 0) {
                            aliases = haveDict
                            if (cl) cl(features, aliases);
                        }else{
                            // 查询字典维护表，若配置过有数据则查字典进行汉化，否则去查询server别名
                            GetFieldValue({bsm:layerParams.bsm}).then(res=>{
                                if (res.success) {
                                    if (res.data.length > 0) {
                                        let obj = {},dicObj = {}
                                        res.data.map(t=>{
                                            obj[t.fieldname] = t.fieldaliasname
                                        })
                                        dicObj[layerParams.bsm] = obj
                                        store.commit("SET_LAYERDICT", dicObj);
                                        aliases = obj
                                    }
                                }
                            }).finally(()=>{ if (cl) cl(features, aliases);})
                        }
                    }else{
                        if (cl) cl(features, aliases);
                    }
                }
            })
        },
        // 获取字段
        getField:function (layers, cl) {
            var url = layers.url + '/0?f=pjson' //空间查询url;
            request({
                method: 'get',
                url: url,
            }).then(res => {
                let aliases = {}
                res.fields.map(t=>{
                    aliases[t.name] = t.alias
                })
                if (layers && layers.bsm) {
                    // 对字典表进行优化，避免同一图层多次查询，vuex保存字典
                    let haveDict = store.state.zyll.layerDict[layers.bsm]
                    if (haveDict && Object.keys(haveDict).length > 0) {
                        aliases = haveDict
                        if (cl) cl(aliases);
                    }else{
                        // 查询字典维护表，若配置过有数据则查字典进行汉化，否则去查询server别名
                        GetFieldValue({bsm:layers.bsm}).then(res=>{
                            if (res.success) {
                                if (res.data.length > 0) {
                                    let obj = {},dicObj = {}
                                    res.data.map(t=>{
                                        obj[t.fieldname] = t.fieldaliasname
                                    })
                                    dicObj[layers.bsm] = obj
                                    store.commit("SET_LAYERDICT", dicObj);
                                    aliases = obj
                                }
                            }
                        }).finally(()=>{ if (cl) cl(aliases);})
                    }
                }else{
                    if (cl) cl(aliases);
                }
            })
        },
        //获取图例
        getLegend: function(layers, cl) {
            var url = layers + '/legend?f=pjson' //空间查询url;
            request({
                method: 'get',
                url: url,
            }).then(res => {
                if (cl) cl(res.layers);
            })
        },
        WMSTile: function(record) {
            var _layer = new TileLayer({
                name: record.url,
                id: record.id,
                source: new TileArcGISRest({
                    url: record.url,
                }),
            });
            arcMap.addLayer(_layer);
        },
        XYZTile: function(record) {
            var imgsource = new XYZ({
                crossOrigin: 'anonymous',
                url: record.url,
            });
            var untiled = new TileLayer({
                name: record.url,
                id: record.id,
                source: imgsource,
            });
            arcMap.addLayer(untiled);
        },
        TILE: function(record, call, zoom) {
            var imgsource = new XYZ({
                crossOrigin: 'anonymous',
                url: record.url,
            });
            var untiled = new TileLayer({
                name: record.url,
                id: record.bsm || record.id,
                source: imgsource,
                zIndex: (record.sort || 1) * -1
            });
            if (call) {
                return untiled;
            }
            arcMap.addLayer(untiled);
            //ZOOM
            if (zoom) {
                arcMap.zoomToLayer(record.url);
            }
        },
        // 矢量切片渲染
        VectorTile: function (record, call, zoom) {
            // var GDALPath = "../../.." + import.meta.env.VITE_APP_BASE_API
            var GDALPath = import.meta.env.VITE_APP_BASE_API

            var tilesize = 512;
            var layerWkid = 3857;
            let LAYERDEF = {
                DATAURI: record.DATAURI,
                LAYERNAME: record.LAYERNAME,
                SPATIALREF: !record.SPATIALREF ? 'EPSG:' + layerWkid : record.SPATIALREF,
            }
            axios.post(GDALPath + "/vector/gdb/cachelayer", { 'LAYERDEF': LAYERDEF }).then(function (data) {
                if(data.code && data.code == 500){
                    ElMessage.warning(!data.msg ? '服务未找到' : data.msg)
                    return
                }
                if(!data.data.LAYERINFO.EXTENT){
                    ElMessage.warning(`${record.LAYERNAME}图层要素为空！`)
                    return
                }
                var layerId = data.data.LAYERID;
                var tilegrid = createXYZ({
                    extent: get('EPSG:' + layerWkid).getExtent(),
                    maxZoom: 22,
                    tileSize: [tilesize, tilesize]
                });
                var untiled = new VectorTileLayer({
                    layerid: layerId,
                    id: record.id,
                    source: new VectorTileSource({
                        format: new MVT(),
                        projection: new Projection({code: 'EPSG:' + layerWkid, units: 'm'}),
                        //切片格网直接有4326坐标系统的坐标范围与缩放大小指定,因此每一级的都是固定的
                        tileGrid: tilegrid,
                        tileUrlFunction: function (tileCoord) {
                            var extent = tilegrid.getExtent();
                            var origin = getTopLeft(extent);
                            var height = getWidth(extent);
                            var tilemetric = height / (1 << tileCoord[0]);
                            var minX = origin[0] + tilemetric * tileCoord[1];
                            var maxX = minX + tilemetric;
                            var maxY = origin[1] - tilemetric * tileCoord[2];
                            var minY = maxY - tilemetric;
                            var params = {};
                            params["MINX"] = minX;
                            params["MINY"] = minY;
                            params["MAXX"] = maxX;
                            params["MAXY"] = maxY;
                            params["TILESIZE"] = tilesize;
                            return appendParams(GDALPath + "/vector/gdb/gettile?LAYERID=" + layerId, params);
                        }
                    }),
                });
                if(record.style){
                    untiled.setStyle(new Style({
                        fill: new Fill({
                            color:record.style.fillColor
                        }),
                        stroke: new Stroke({
                            color:record.style.strokeColor,
                            width: 1
                        }),
                    }))
                }
                if(record.styleByField){
                    untiled.setStyle(createMapboxStreetsV6Style(Style, Fill,Stroke, Icon,Text))
                }
                if (call) {
                    return untiled;
                }
                arcMap.addLayer(untiled);

                var extent = [
                    data.data.LAYERINFO.EXTENT.MINX,
                    data.data.LAYERINFO.EXTENT.MINY,
                    data.data.LAYERINFO.EXTENT.MAXX,
                    data.data.LAYERINFO.EXTENT.MAXY,
                ];
                arcMap.zoomToextent(extent);

                //ZOOM
                if (zoom) {
                    arcMap.zoomToLayer(record.url);
                }
            }).catch(function (error) {
                console.log(error);
                ElMessage.warning('服务未找到')
            });
        },

        WMS: function(record, call, zoom) {
            var sou = { url: record.url };
            if (record.show) {
                sou.params = {
                    layers: "show:" + record.show
                }
            }
            var untiled = new TileLayer({
                name: record.url,
                id: record.bsm || record.id,
                source: new TileArcGISRest(sou),
                zIndex: (record.sort || 1) * -1
            });
            if (call) {
                return untiled;
            }
            arcMap.addLayer(untiled);
        },
        IMG: function(record, call, zoom) {
            var imgsource = new TileArcGISRest({
                url: record.url
            });
            var untiled = new TileLayer({
                name: record.url,
                id: record.bsm || record.id,
                source: imgsource,
                zIndex: (record.sort || 1) * -1
            });
            if (call) {
                return untiled;
            }
            arcMap.addLayer(untiled);
        },
        WMTS: function(record, call, zoom) {
            // debugger
            var imgsource = new XYZ({
                crossOrigin: 'anonymous',
                url: record.url + `/tile/{z}/{y}/{x}`,
            });
            var untiled = new TileLayer({
                name: record.url,
                id: record.bsm || record.id,
                source: imgsource,
                zIndex: (record.sort || 1) * -1
            });
            if (call) {
                return untiled;
            }
            arcMap.addLayer(untiled);
            //ZOOM
            if (zoom) {
                arcMap.zoomToLayer(record.url);
            }
        },
        add4490(){
            const projection = new Projection({ code: 'EPSG:4490', units: 'degrees', axisOrientation: 'neu' })
            projection.setExtent([-180, -90, 180, 90]);
            projection.setWorldExtent([-180, -90, 180, 90]);
            addProjection(projection);
            return projection
        },
        rest: function (record, call, zoom) {
            // 获取投影信息   
            let projection = arcMap.add4490(); 
            const tileSizePixels = 256;
            const tileSizeMtrs = getWidth(projection.getExtent()) / tileSizePixels;

            // 创建WMTS瓦片网格
            const matrixIds = [];
            const resolutions = [];
            for (let i = 0; i <= 16; i++) {
                matrixIds[i] = i;
                resolutions[i] = tileSizeMtrs / Math.pow(2, i);
            }
            // 创建WMTS源
            const wmtsSource = new WMTS({
                url: record.url,//'http://10.255.134.70:8090/iserver/services/map-dwd_res_gov_hbdk/wmts100',
                layer:  record.sde,//'dwd_res_gov_hbdk@gtkjzl_db',
                style: 'default', 
                version: '1.0.0',
                matrixSet:  record.icon + record.sde, //'CUSTOM_dwd_res_gov_hbdk@gtkjzl_db', 
                format: 'image/png',
                projection,
                tileGrid: new WMTSTileGrid({
                    origin: getTopLeft(projection.getExtent()), 
                    resolutions: resolutions,
                    matrixIds: matrixIds
                }),
                wrapX: true,
                // attributions: 'zhx © 版权信息'
            });
            const untiled = new TileLayer({
                source: wmtsSource, 
            });
            if (call) {
                return untiled;
            }
            arcMap.addLayer(untiled);

            // arcMap.map.getView().setCenter([108.53 , 39.2 ])
            //ZOOM
            if (zoom) {
                arcMap.zoomToLayer(record.url);
            }
        },
        //加载图层
        addProLayer: function(record, call, zoom) {
            const formData = new FormData();
            var params = {
                "f": "pjson",
                'clipping': {
                    "hasZ": false,
                    "hasM": false,
                    "rings": [
                        [
                            [11817057.906963758, 4591719.129383848],
                            [11817057.906963758, 4666026.131804026],
                            [11876165.754922504, 4666026.131804026],
                            [11876165.754922504, 4591719.129383848],
                            [11817057.906963758, 4591719.129383848]
                        ]
                    ]
                }
            }
            for (let key in params) {
                formData.append(key, params[key])
            }
            var imgsource = new TileArcGISRest({
                url: record.url,
                params: JSON.stringify(params)
            });
            var untiled = new TileLayer({
                url: record.url,
                name: record.url,
                id: record.bsm || record.id,
                source: imgsource,
                zIndex: (record.sort || 1) * -1,
            });
            if (call) {
                return untiled;
            }
            arcMap.addLayer(untiled);
        },
        //feature转coordinates
        featureToCoordinates(feature) {
            console.log(feature)
            var geo = feature.geometry;
            console.log(geo)
        },



        //条件查询地图切片
        mapQueryTile(features, layurl, name, field) {
            var objList = []
            features.map((res, i) => {
                objList.push(res.get(field || 'OBJECTID'));
            })
            var _layer = new TileLayer({
                url: layurl,
                name: name || 'QueryTile_Lay',
                source: new TileArcGISRest({
                    url: layurl,
                    params: {
                        layerDefs: JSON.stringify({ "0": `${field || 'OBJECTID'} in (${objList.join(',')})` }),
                    }
                })
            });
            //如果名称是空，那就先移除之前的图层
            if (!name) arcMap.removeLayer('QueryTile_Lay');
            arcMap.addLayer(_layer);
            return _layer;
        },

        //地图裁剪
        mapClip(feature, layer) {
            layer.on('prerender', function(event) {
                var ctx = event.context;
                const vectorContext = getVectorContext(event);
                ctx.save();
                vectorContext.drawGeometry(feature.getGeometry());
                ctx.clip();
            });
            layer.on('postrender', function(event) {
                var ctx = event.context;
                ctx.restore();
            });
        },
        //地图裁剪2
        mapClip2(feature, layer) {
            var map = this.map;
            // layer.on('prerender', function (event) {
            //   console.log(123456,event)
            //   var ctx = event.context;
            //   const vectorContext = getVectorContext(event);
            //   ctx.save();
            //   vectorContext.drawGeometry(feature.getGeometry());
            //   ctx.clip();
            // });
            layer.on('postrender', function(event) {
                let vectorContext = getVectorContext(event);
                event.context.globalCompositeOperation = 'destination-in';
                vectorContext.drawFeature(feature, new Style({
                    fill: new Fill({
                        color: 'black', // 必需设置颜色
                    })
                }));
                event.context.globalCompositeOperation = 'source-over';
            });
        }
    }
    return myMaps;
})();
export default arcMap;