SmartCommunity/energyManagement/src/utils/initMap.js

/*
 * @Author: your name
 * @Date: 2020-12-28 08:16:54
 * @LastEditTime: 2021-06-08 14:30:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \WEB\dispatchingManagement\src\utils\initMap.js
 */
import envConfig from '@/config';
import * as esriLoader from 'esri-loader';
// import _GraphicsLayer from '@utils/_GraphicsLayer.js';
export default {
    // mixins: [_GraphicsLayer],
    data() {
        return {
            // 图层渲染参数
            layercout:0,
            iconlayerArr:[],
            poplayerArr:[],
            // 地图配置
            envConfig: envConfig,
            gisConstructor: {},
            wkidval: '',
            getzoom:'',
            setcenterpoint:'',
            geometryServiceUrl: '',//缓冲查询服务路径
            scopeOfDemolitionSetting:'', //范围拆迁分析配置
            geoService: '',
            overviewBaseUrl: '',//概览背景底图
            overviewLevel: '' ,//概览地图默认层级
            baseUrl: '', //底图路径
            gwUrl: '', //管网路径
            gwPointUrl: '', //管网管点路径
            gwLineUrl: '', //管网管线路径
            burstUrl: '',// 爆管路径
            connectUrl: '', // 连通性路径
            getMoveXY:'', // 偏移量
            mapSuspensionDisplay: false,
            mapDataRefresh: 60000,
            modules: [
                'dojo/_base/lang',
                "dojo/_base/declare",
                'dojo/on',
                'esri/config',
                'esri/request',
                'esri/core/urlUtils',
                'esri/Map',
                'esri/layers/MapImageLayer',
                'esri/layers/TileLayer',
                'esri/views/MapView',
                'esri/Graphic',
                'esri/layers/GraphicsLayer',
                'esri/layers/FeatureLayer',
                'esri/renderers/ClassBreaksRenderer',
                'esri/PopupTemplate',
                'esri/geometry/Point',
                'esri/geometry/Polyline',
                'esri/geometry/Polygon',
                'esri/symbols/TextSymbol',
                'esri/tasks/support/IdentifyParameters',
                'esri/views/draw/Draw',
                'esri/views/draw/PointDrawAction',
                'esri/views/draw/MultipointDrawAction',
                'esri/tasks/IdentifyTask',
                'esri/tasks/Geoprocessor',
                'esri/tasks/support/FeatureSet',
                'esri/symbols/SimpleMarkerSymbol',
                'esri/geometry/Multipoint',
                'esri/tasks/support/BufferParameters',
                'esri/tasks/support/LengthsParameters',
                'esri/tasks/GeometryService',
                "esri/tasks/support/Query",
                'esri/tasks/QueryTask',
                "esri/tasks/support/DistanceParameters",
                'esri/views/draw/SegmentDrawAction',
                'esri/tasks/RouteTask',
                'esri/tasks/support/RouteParameters',
                'esri/layers/support/FeatureReductionCluster',
                'esri/tasks/support/StatisticDefinition',
                'esri/tasks/FindTask',
                'esri/tasks/support/FindParameters',
                "esri/geometry/geometryEngine"
            ],
            getWkidVal:'',
            WeatherGraphicLayer:'',
            TileLayerAllSublayers:[]

            // testMapurlInit:'http://58.250.37.159:1523/arcgis/arcgis_v4.16/init.js',
            // testMapurlCss:'http://58.250.37.159:1523/arcgis/arcgis_v4.16/esri/css/main.css'
        }
    },
    mounted() {
        this.initmap();
    },
    methods: {
        initmap() {
            let _self=this;
            const options = {
                url: this.envConfig.baseMapApi + '/arcgis/init.js'
                // url: this.testMapurlInit
            };
            esriLoader.loadCss(this.envConfig.baseMapApi + '/arcgis/esri/css/main.css');
            // esriLoader.loadCss(this.testMapurlCss);
            new Promise((resolve, reject) => {
                this.$http.post('/sc-community/dict/selectList', { parentDictCode: 'GIS_SERVER_TYPE' }).then(({ status, data, msg }) => {
                    if (0 === status) {
                        _self.allserviceType = data;
                    }
                    resolve();
                });
            })
                .then(() => {
                    return new Promise((resolve, reject) => {
                        this.$http.post('/zoniot-water/systemSetting/selectGis',{}).then(({ status, data, msg }) => {
                            if (0 === status) {
                                _self.selectGislist = data;
                            }
                            resolve();
                        });
                    });
                })
                .then(() => {
                    return new Promise((resolve, reject) => {
                        this.$http.get('/zoniot-water/systemSetting/selectSystem').then(({ status, data, msg }) => {
                            if (0 === status && data) {
                                if (data.mapSuspensionDisplay) {
                                    _self.mapSuspensionDisplay = data.mapSuspensionDisplay;
                                }
                                if (data.mapDataRefresh) {
                                    _self.mapDataRefresh = data.mapDataRefresh * 1000 * 60;
                                }
                            }
                            resolve();
                        });
                    });
                })
                .then(() => {
                    // if (this.scenetype) {
                        return new Promise((resolve, reject) => {
                            this.$http.get('/zoniot-water/mapSetting/selectMap', { sceneTypeName: '测试' }).then(({ status, data, msg }) => {
                                if (0 === status && data) {
                                    _self.setcenterpoint = data.pointX + ',' + data.pointY;                               
                                    _self.getzoom = data.mapLevel;
                                }
                                resolve();
                            });
                        });
                    // } else {
                    //     return new Promise((resolve, reject) => {
                    //         resolve();
                    //     });
                    // }
                })
                .then(() => {
                    // dictCode
                    // 1 背景地图
                    // 2 管网地图                  
                    _self.allserviceType.map((v, i) => {
                        _self.selectGislist.map((vv, ii) => {
                            if (v.dictCode === vv.serviceType) {
                                var hosts = window.location.host;
                                let attrStr = 'extranetSetting';
                                if (hosts.indexOf("0.0.0.") !== -1) {
                                    attrStr = 'intranetSetting'
                                }
                                switch (v.dictValue) {
                                    case '背景地图':
                                        _self.baseUrl = vv[attrStr];
                                        break;
                                    case '管网地图':
                                        _self.gwUrl = vv[attrStr];
                                        _self.gwPointUrl = this.gwUrl+'/0';
                                        _self.gwLineUrl = this.gwUrl+'/1';
                                        break;
                                    case '爆管分析':
                                        _self.burstUrl = vv[attrStr];
                                        break;
                                    case '连通性':
                                        _self.connectUrl = vv[attrStr];
                                        break;
                                    case '几何分析':
                                        _self.geometryServiceUrl = vv[attrStr];
                                        break;
                                    case '范围拆迁分析':
                                        _self.scopeOfDemolitionSetting = vv[attrStr];
                                        break;
                                    case '中心点':
                                        _self.setcenterpoint = this.setcenterpoint ? this.setcenterpoint : vv[attrStr];
                                        break;
                                    case '层级':                                                                                                                                      
                                        _self.getzoom =_.isNumber(this.getzoom*1)&&this.getzoom*1!=0?this.getzoom: vv[attrStr];
                                        break;
                                    case '省市名称':
                                        _self.cityName = vv[attrStr];
                                        _self.$emit('getCityNamevalfn', this.cityName);
                                        break;
                                    case 'wkid':
                                        _self.wkidval = JSON.parse(vv[attrStr]);
                                        _self.$emit("getwkidfn",this.wkidval);
                                        break;
                                    case '偏移量':
                                        _self.getMoveXY = vv[attrStr];
                                        _self.$emit("getMoveXYfn",this.getMoveXY);
                                        break;
                                    case '概览背景地图':
                                        _self.overviewBaseUrl = vv[attrStr];
                                        break;
                                    case '概览地图默认层级':
                                        _self.overviewLevel = vv[attrStr];
                                        break;
                                    default:
                                        break;
                                }
                            }
                        });
                    });                 
                    esriLoader.loadModules(_self.modules, options).then(_self.loading).then(() => {
                        _self.geoService = new _self.gisConstructor.GeometryService(_self.geometryServiceUrl);
                    });
                });
        },
        /**
         * @description: 加载地图
         * @param {*} args
         * @return {*} this.mapviewHandle()
         */
        loading(args) {
            for (let k in args) {
                let name = this.modules[k].split('/').pop();
                name = name.replace(name[0], name[0].toUpperCase());
                this.gisConstructor[name] = args[k];
            }
            // 切片地图 底图
            var currentPath = this.$route.path;
            var baseUrl = this.baseUrl;
            var currentPageLevel = '';
            if (currentPath.indexOf('Overview') !== -1 ) {
                baseUrl = this.overviewBaseUrl;
                currentPageLevel = this.overviewLevel;
            }
            currentPageLevel =_.isNumber(this.getzoom*1)?this.getzoom:currentPageLevel
            var mapTileLayer = '', gwLayer = '', initlayers = [];
            if (baseUrl) {
                mapTileLayer = new this.gisConstructor.TileLayer({
                    url: baseUrl,
                    id: 'baseLayer'
                });
                this.TileLayerAllSublayers = mapTileLayer.allSublayers._items
                initlayers.push(mapTileLayer)
            }
            // 管网地图
            if (this.gwUrl) {
                gwLayer = new this.gisConstructor.MapImageLayer({
                    url: this.gwUrl,
                    id: 'gwLayer'
                });
                initlayers.push(gwLayer)
            }

            // 创建地图
            this.map = new this.gisConstructor.Map({
                layers: initlayers
            });

            if (!this.wkidval) {
                this.$message.error('请在 系统管理-系统设置-GIS设置 中设置wkid');
            }

            // 新建中心点
            var pt = new this.gisConstructor.Point({
                x: this.setcenterpoint.split(',')[0],
                y: this.setcenterpoint.split(',')[1],
                spatialReference: this.wkidval
            });
            // currentPageLevel!==''?currentPageLevel:3
            //  创建view视图
            this.view = new this.gisConstructor.MapView({
                container: 'viewDiv',
                map: this.map,
                center: pt,
                zoom: currentPageLevel!==''?currentPageLevel:3
            });

            // this.graphicsLayer = new this.gisConstructor.GraphicsLayer({
            //     id: 'linshiLayer',
            //     name: '临时图层',
            //     opacity: 1,
            //     visible: true
            // });
            // this.map.add(this.graphicsLayer);

            this.mapinitHandle&&this.mapinitHandle()
            // 地图加载完成后
            this.view.when(()=>{
                this.mapviewHandle && this.mapviewHandle()
            })


        },

        creatPoint(paramX, paramY) {
            let x = paramX ? paramX : 0;
            let y = paramY ? paramY : 0;
            var newPoint = new this.gisConstructor.Point();
            newPoint.x = x;
            newPoint.y = y;
            newPoint.spatialReference = this.view.spatialReference;
            return newPoint
        },

        /**
         * @description: 查询管点信息
         * @param {*} wherestr 查询条件
         * @param {*} cb
         * @return {*}
         */
        queryPointFn(wherestr, cb) {
            let outFieldsarr = ['OBJECTID'];
            var queryTaskParam = new this.gisConstructor.Query();
            queryTaskParam.where = wherestr;
            queryTaskParam.outFields = outFieldsarr;
            // queryTaskParam.geometry = areaGeometry;
            queryTaskParam.returnGeometry = false;
            queryTaskParam.outSpatialReference = this.view.spatialReference;
            queryTaskParam.returnDistinctValues = false;
            queryTaskParam.spatialRelationship = 'esriSpatialRelIntersects';

            var queryTask = new this.gisConstructor.QueryTask(this.gwUrl + '/0');
            queryTask.executeForCount(queryTaskParam).then((rescount) => {
                cb && cb(rescount);
            });
        },
        /**
         * @description: 查询管线总长度
         * @param {*} cb
         * @return {*}
         */
        queryLineFn(cb) {
            var sumPopulation = {
                onStatisticField: 'LLENGTH', // service field for 2015 population
                outStatisticFieldName: 'LLENGTH_sum',
                statisticType: 'sum'
            };
            var queryTaskParam = new this.gisConstructor.Query();
            queryTaskParam.outStatistics = [sumPopulation];
            queryTaskParam.outSpatialReference = this.view.spatialReference;
            var queryTask = new this.gisConstructor.QueryTask(this.gwUrl + '/1');
            queryTask.execute(queryTaskParam).then((res) => {
                let lsum = res.features[0].attributes.LLENGTH_sum;
                lsum = Math.round(lsum) / 1000;
                cb(lsum);
            });
        },
        querLinebyYear(where,layernum,cb) {
            var sumPopulation = {
                onStatisticField: "MDATE", // service field for 2015 population
                outStatisticFieldName: 'MDATE_count',
                statisticType: 'count'
            };
            var queryTaskParam = new this.gisConstructor.Query();
            // queryTaskParam.groupByFieldsForStatistics = ['MDATE']
            queryTaskParam.where = where;
            queryTaskParam.outStatistics = [sumPopulation];
            queryTaskParam.returnGeometry = false
            queryTaskParam.outSpatialReference = this.view.spatialReference;
            var queryTask = new this.gisConstructor.QueryTask(this.gwUrl + layernum);
            queryTask.execute(queryTaskParam).then((res) => {
                let count = 0
                if(res.features[0]){
                    count = res.features[0].attributes.MDATE_count
                }
                cb(count)
            });
        },
        queryPointbyType(where,cb) {
            var sumPopulation = {
                onStatisticField: 'MATERIAL', // service field for 2015 population
                outStatisticFieldName: 'MATERIAL_count',
                statisticType: 'count'
            };

            var queryTaskParam = new this.gisConstructor.Query();
            queryTaskParam.where = where;
            queryTaskParam.outStatistics = [sumPopulation];
            queryTaskParam.outSpatialReference = this.view.spatialReference;
            var queryTask = new this.gisConstructor.QueryTask(this.gwUrl + '/0');
            queryTask.execute(queryTaskParam).then((res) => {
                cb(res)
            });
        },
        /**
         * @description: 查询管线材质统计
         * @param {*} where
         * @param {*} fieldName
         * @param {*} returnGeometry
         * @param {*} queryurl
         * @param {*} cb
         * @return {*}
         */
        queryLineMeterialAndD_S(cb,where,geometry){
            var queryTaskParam = new this.gisConstructor.Query();
            queryTaskParam.where = where?where:'1=1';
            geometry?queryTaskParam.geometry = geometry:'';
            queryTaskParam.outFields = ['*']; //设置查询结果的返回字段
            queryTaskParam.returnGeometry = false;
            queryTaskParam.outSpatialReference = this.view.spatialReference;
            queryTaskParam.returnDistinctValues = true;
            queryTaskParam.spatialRelationship = 'esriSpatialRelIntersects';

                queryTaskParam.outStatistics = [{
                        statisticType:'sum',
                        onStatisticField:'LLENGTH',//// 统计的字段，长度
                        outStatisticFieldName:'LLENGTH_sum'//// 输出的字段
                    }
                ];
                //设置分组结果的字段,材质和管径进行分组
                queryTaskParam.groupByFieldsForStatistics=['MATERIAL','D_S']
            var queryTask = new this.gisConstructor.QueryTask(this.gwLineUrl);
            queryTask.execute(queryTaskParam).then(res=>{
                cb&&cb(res)
            })
        },
        queryPointMeterialAndSPEC(where,cb){
            var queryTaskParam = new this.gisConstructor.Query();
            queryTaskParam.where = where;
            queryTaskParam.outFields = ['*'];
            queryTaskParam.returnGeometry = false;
            queryTaskParam.outSpatialReference = this.view.spatialReference;
            queryTaskParam.returnDistinctValues = true;
            queryTaskParam.spatialRelationship = 'esriSpatialRelIntersects';

                queryTaskParam.outStatistics = [{
                        statisticType:'count',
                        onStatisticField:'SCODE',
                        outStatisticFieldName:'SCODE_count'
                    }
                ];
                
                queryTaskParam.groupByFieldsForStatistics=['MATERIAL','SPEC']
            var queryTask = new this.gisConstructor.QueryTask(this.gwPointUrl);
            queryTask.execute(queryTaskParam).then(res=>{
                cb&&cb(res)
            })
        },
        /**
         * @description: 根据字段查询所有的类型
         * @param {Array} fieldName 
         * @param {String} queryurl
         * @param {Function} cb
         * @return {*}
         */
        queryLineSingleFieldValueArr(where,fieldName,geometry,returnGeometry,queryurl,cb){
            var queryTaskParam = new this.gisConstructor.Query();
            queryTaskParam.where = where;
            //查询出的字段，类似于select field from 
            queryTaskParam.outFields = fieldName;
            if(geometry){
                      queryTaskParam.geometry = geometry;
                  }
            queryTaskParam.returnGeometry = returnGeometry;
            queryTaskParam.outSpatialReference = this.view.spatialReference;
                  queryTaskParam.returnDistinctValues = !returnGeometry;
                  queryTaskParam.spatialRelationship = 'esriSpatialRelIntersects';
            var queryTask = new this.gisConstructor.QueryTask(queryurl);
            queryTask.execute(queryTaskParam).then(res=>{
                cb&&cb(res)
            })
        },

        /**
         * 查询该图层下所有的id数（总条数）
         */
        queryAllObjectidsById(layerid,wherestr,cb) {
            var queryTaskParam = new this.gisConstructor.Query();
            queryTaskParam.where = wherestr;
            queryTaskParam.returnGeometry = false;
            queryTaskParam.returnIdsOnly = true;
            queryTaskParam.outSpatialReference = this.view.spatialReference;
            var queryTask = new this.gisConstructor.QueryTask(this.gwUrl + layerid);
            //an array of object IDs
            queryTask.executeForIds(queryTaskParam).then((res) => {
                let resdata = res?res:[]
                cb(resdata);
            });
        },
        queryAllObjectidsById2(layerid,wherestr,geometry,cb) {
            var queryTaskParam = new this.gisConstructor.Query();
            queryTaskParam.where = wherestr;
            queryTaskParam.returnGeometry = false;
            queryTaskParam.returnIdsOnly = true;
            geometry?queryTaskParam.geometry = geometry:'';
            queryTaskParam.outSpatialReference = this.view.spatialReference;
            var queryTask = new this.gisConstructor.QueryTask(this.gwUrl + layerid);
            queryTask.executeForIds(queryTaskParam).then((res) => {
                let resdata = res?res:[]
                cb(resdata);
            });
        },
        //querytask能进行属性的查询，也可以进行空间查询，但是他只能查询一个单独的图层
        queryGeometrybypageIDs(layerid,ids,cb){
            // debugger
            var queryTaskParam = new this.gisConstructor.Query();
            queryTaskParam.returnGeometry = true;
            queryTaskParam.outFields = ['*'];
            queryTaskParam.objectIds = ids;
            queryTaskParam.outSpatialReference = this.view.spatialReference;
            var queryTask = new this.gisConstructor.QueryTask(this.gwUrl + layerid);
            queryTask.execute(queryTaskParam).then((res) => {
                // console.dir(res.features[0].attributes);
                cb(res);
            }).catch(err=>{
                console.log(err);
                
            });
        },
        
        /**
         * disByFeaturelayer
         * disByFeaturelayerScence
         * 
         * @description: GraphicsLayer图层 展示 设备、场景 图层 
         * @param {*} arr 图层数据
         * @param {*} tablist 勾选的列表数据tab
         * @param {*} treename 勾选的列表数据tab
         * @param {*} typetag 展示类别 device： DEVICE,scence: SCENCE
         * @param {*} typeName 类型；水源、水厂、水质、流量、压力等
         * @param {*} propLayerID 图层id
         * @param {*} cb 回调函数
         * @return {*}
         */
        displayByGraphicsLayer(arr,tablist,treename, typetag, typeName, propLayerID,cb) {
            let ObjectIDval='',
            titleval = '',
            valueval = '',
            typeval = '',
            typeTipVal = '';
            
            var graphics = [];            
            var graphicsArr = [];
            let checklist = [];
            checklist = treename?this.$refs[treename]?this.$refs[treename].getCheckedKeys():[]:[];
            let datalen = 0;
            datalen = treename?this.$refs[treename]?this.$refs[treename].data:0:0;
            for (let i = 0; i < arr.length; i++) {                
                const item = arr[i];
                if(typetag==='SCENCE'){
                    ObjectIDval=item.sceneId,
                    titleval = item.sceneName,
                    valueval = item.sceneState,
                    typeval = item.sceneTypeName,
                    typeTipVal = 'scence';
                }else{
                    ObjectIDval=item.deviceId,
                    titleval = item.deviceName,
                    valueval = item.deviceState,
                    typeval = typeName,
                    typeTipVal = 'device';
                }
                let geometryPoint = new this.gisConstructor.Point({
                    x: item.pointX?item.pointX:0,
                    y: item.pointY?item.pointY:0,
                    spatialReference: this.view.spatialReference
                });
                var visibleval = treename&&datalen?false:true;
                checklist.map(v=>{
                    if(v===ObjectIDval){
                        visibleval = true;
                    }
                })
                graphics.push(new this.gisConstructor.Graphic({
                    geometry: geometryPoint,
                    attributes: {
                        ObjectID: ObjectIDval,
                        title:titleval,
                        value:valueval,// 1报警 0正常 ,
                        type:typeval,
                        typeTip:typeTipVal,
                    },
                    symbol: {
                        type: 'picture-marker',
                        url: this.getMapImageIcon(typeval, valueval),
                        width: '40px',
                        height: '40px'
                    },
                    visible:visibleval
                }));
                if(item.monitorDataEntities.length>0){                
                    let itemlabelTexttitle = `${titleval} \n`;
                    let itemlabelTextLeft = ``;
                    let itemlabelTextRight = ``;
                    graphicsArr.push(new this.gisConstructor.Graphic({
                        geometry: geometryPoint,
                        attributes: {
                            scenceid:'bg'+ObjectIDval
                        },
                        symbol: {
                                type: 'picture-marker',
                                url: this.getEmergingBgicon(valueval),
                                width: '139px',
                                height: '93px',
                                yoffset: 60,
                            },
                        visible:visibleval
                    }));

                    graphicsArr.push(new this.gisConstructor.Graphic({
                        geometry: geometryPoint,
                        attributes: {
                            scenceid:'title'+ObjectIDval
                        },
                        symbol: {
                            type: "text",  // autocasts as new TextSymbol()
                            color: [255,255,255,1],
                            text: itemlabelTexttitle,
                            horizontalAlignment :'left',
                            xoffset: -32,
                            yoffset: 77,
                            font: {  
                                size: '12px',
                                family: "Microsoft YaHei",
                                weight: "bold"
                            }
                        },
                        visible:visibleval
                    }));                
                    item.monitorDataEntities.map((v,i)=>{
                        let crutextleft = `${v.attributeName}${v.unit?'('+v.unit+')':''}\n`;
                        let crutextright = v.alarmRange?`${v.dataValue?v.dataValue:'-'}(${v.alarmRange})\n`:`${v.dataValue?v.dataValue:'-'}\n`;
                        // lengtharr.push(crutext.length);
                        itemlabelTextLeft+=crutextleft;
                        // itemlabelTextRight+=crutextright;
                        graphicsArr.push(new this.gisConstructor.Graphic({
                            geometry: geometryPoint,
                            attributes: {
                                scenceid:'left'+ObjectIDval
                            },
                            symbol: {
                                type: "text",  // autocasts as new TextSymbol()
                                color: v.isAlarm?'#FD2D72':[255,255,255,1],//#FD2D72
                                lineHeight:1.2,
                                text: crutextright,
                                horizontalAlignment :'right',
                                xoffset: 44,
                                yoffset: 50-(i*12),
                                font: {  
                                    size: '11px',
                                    family: "Microsoft YaHei",
                                }
                            },
                            visible:visibleval
                        }));  
                    })
                    graphicsArr.push(new this.gisConstructor.Graphic({
                        geometry: geometryPoint,
                        attributes: {
                            scenceid:'right'+ObjectIDval
                        },
                        symbol: {
                            type: "text",  // autocasts as new TextSymbol()
                            color: [255,255,255,1],
                            lineHeight:1.2,
                            text: itemlabelTextLeft,
                            horizontalAlignment :'left',
                            xoffset: -45,
                            yoffset: 50,
                            font: {  
                                size: '11px',
                                family: "Microsoft YaHei",
                            }
                        },
                        visible:visibleval
                    }));                       
                }
            }
            var treeNodeChecked = true;
            tablist.map((item) => {
                if (item.id === propLayerID) {
                    treeNodeChecked = item.active;
                }
                if(item.data&&item.data.id===propLayerID){
                    treeNodeChecked = item.checked;
                }
            });
            // 场景图层
            let iconfeatureLayer = new this.gisConstructor.GraphicsLayer({
                graphics: graphics,
                id:propLayerID,
                visible:treeNodeChecked
            });
            // 弹窗图层
            var defaultGraphicsLayer1 = new this.gisConstructor.GraphicsLayer({
                graphics: graphicsArr,
                id:propLayerID+'defaultGraphicsLayer1',
                visible:this.mapSuspensionDisplay&&treeNodeChecked
            });
            // this.map.add(defaultGraphicsLayer1);
            cb(iconfeatureLayer,defaultGraphicsLayer1)            
        },

         /**
         * @description: Featurelayer图层 聚合图层 窨井、阀门、消防栓
         * @param {*} arr
         * @param {*} typeName
         * @param {*} featureLayerID
         * @return {*}
         */
          disByFeaturelayerPoint(arr, typeName, featureLayerID) {
            //根据图层id获取图层
            this.map.remove(this.map.findLayerById(String(featureLayerID)));
            var graphics = [];
            var fields = [
                {
                    name: 'ObjectID',
                    alias: 'ObjectID',
                    type: 'oid' //   每个要素必须的字段，字段值必须唯一，当做是整数类型。。。
                },
                {
                    name: 'title',
                    alias: 'title',
                    type: 'string' //字符串类型
                },
                {
                    name: 'value', //是否报警
                    alias: 'value',
                    type: 'integer' //整数类型   //除了上面的三种类型，还有 double、date。。。
                }
            ];
            var graphicsArr = [];
            for (let i = 0; i < arr.length; i++) {
                var addFields = {};
                const item = arr[i];
                graphics.push({
                    geometry: item.geometry,
                    attributes: {
                        ObjectID: item.attributes.OBJECTID,
                        title: item.attributes.EXP_NO,
                        value: 0 // 1报警 0正常 ,
                        // ...addFields
                    },
                    visible: false
                });
            }

            // 设置点的样式
            //定义一个render对FeatureLayer自定义的数据进行渲染
            var renderer = {
                type: 'unique-value', // autocasts as new SimpleRenderer()
                field: 'value',
                uniqueValueInfos: [
                    {
                        value: 0,
                        symbol: {
                            type: 'picture-marker',
                            url: this.getMapImageIcon(typeName, 0),
                            // xoffset: 5,
                            // yoffset: 20,
                            width: '16px',
                            height: '16px'
                        }
                    },
                    {
                        value: 10,
                        symbol: {
                            type: 'picture-marker',
                            url: this.getMapImageIcon(typeName, 10),
                            // xoffset: 5,
                            // yoffset: 20,
                            width: '16px',
                            height: '16px'
                        }
                    }
                ]
                // symbol: {
                //     type: 'simple-marker', // autocasts as new SimpleMarkerSymbol()
                //     value: 10,
                //     color: 'black',
                //     outline: {
                //         // autocasts as new SimpleLineSymbol()
                //         width: 0.5,
                //         color: 'white'
                //     }
                // }
            };
            var featureLayer = new this.gisConstructor.FeatureLayer({
                source: graphics,
                fields: fields,
                objectIdField: 'ObjectID',
                renderer: renderer,
                id: featureLayerID,
                geometryType: 'point',
                featureReduction: {
                    type: 'cluster',
                    clusterRadius: 50,
                    clusterMaxSize: 16,
                    labelingInfo: [
                        {
                            deconflictionStrategy: 'none',
                            labelExpressionInfo: {
                                expression: "Text($feature.cluster_count, '#,###')"
                            },
                            symbol: {
                                type: 'text',
                                color: '#004a5d',
                                yoffset: 5,
                                font: {
                                    weight: 'bold',
                                    family: 'Noto Sans',
                                    size: '12px'
                                }
                            },
                            labelPlacement: 'center-center'
                        }
                    ]
                }
                // objectIdField:
            });
            this.map.add(featureLayer);
        },

        MapPointerMoveFn(){
            //鼠标移动事件
            this.view.on(['pointer-move'], (event) => {
                //使用hittest获取要素的属性和位置信息，接收两个参数，一个是坐标点，另外一个是option,返回值是promise对象
                this.view.hitTest(event).then((response) => {
                    if(this.hubiaoPopisshow ===true) {
                        return
                    }
                    if (response.results.length) {
                        response.results.map(responsev=>{
                        var graphic = responsev.graphic; 
                        if (graphic && graphic.attributes && graphic.attributes.ObjectID && this.countArr.length === 0) {
                            // 标记点的位置
                            this.getx = response.screenPoint.x+10;
                            this.gety = response.screenPoint.y+700>1080?480:response.screenPoint.y;
                            
                            this.countArr.push(graphic);
                            clearInterval(this.timeName2);
                            if(!this.isPointerMove)return
                            if (graphic.layer.id.indexOf('F') === -1) {
                                let layeritems = graphic.layer.graphics.items;
                                if (layeritems.length > 0) {
                                    layeritems.map((itemgraphic) => {
                                        if (itemgraphic.attributes.ObjectID === graphic.attributes.ObjectID) {
                                            let newg = {
                                                attributes:itemgraphic.attributes,
                                                geometry:itemgraphic.geometry,
                                                symbol: {
                                                    type: 'picture-marker',
                                                    url: this.getMapImageIcon(itemgraphic.attributes.type, ('1'+itemgraphic.attributes.value)*1),
                                                    width: '40px',
                                                    height: '40px'
                                                }
                                            }
                                            this.view.graphics.add(newg)
                                            if (itemgraphic.attributes.typeTip === 'scence') {
                                                this.getMapParamBysceneId(graphic.attributes.ObjectID);
                                                this.timeName2 = setInterval(() => {
                                                    this.getMapParamBysceneId(graphic.attributes.ObjectID);
                                                }, this.mapDataRefresh);
                                            } else if (itemgraphic.attributes.typeTip === 'device'){
                                                this.getMapParam(graphic.attributes.ObjectID);
                                                this.timeName2 = setInterval(() => {
                                                    this.getMapParam(graphic.attributes.ObjectID);
                                                }, this.mapDataRefresh);
                                            }
                                            this.isPointerMove = false;
                                            setTimeout(()=>{
                                                this.isPointerMove = true;
                                            },500)
                                        }
                                    });
                                }
                            } else {
                                this.querySinglePointFn('OBJECTID = ' + graphic.attributes.ObjectID, (res) => {
                                    this.pointAttributes = res.features[0].attributes;
                                    this.showPointInfo = true;
                                });
                            }
                        }
                        })
                    } else {
                        this.countArr = [];
                        this.popisshow = false;
                        this.popisshowScence = false;
                        this.showPointInfo = false;
                        this.view.graphics.removeAll();
                        clearInterval(this.timeName2);
                        
                    }
                });
            });
        },
        MapClickFn(){
            this.view.on(['click'], (event) => {
                this.view.hitTest(event).then((response) => {
                    if (response.results.length) {
                        for (let k = 0; k < response.results.length; k++) {
                            const responsev = response.results[k];
                            var graphic = responsev.graphic;
                        if (graphic && graphic.attributes&&graphic.layer ) {                            
                            if(graphic.layer.id){
                            if (graphic.layer.id.indexOf('F') === -1) {
                                let layeritems = graphic.layer.graphics.items;
                                if (layeritems.length > 0) {
                                    for (let index = 0; index < layeritems.length; index++) {
                                        const itemgraphic = layeritems[index]; 
                                        if (itemgraphic.attributes.ObjectID === graphic.attributes.ObjectID) {
                                            if (itemgraphic.attributes.typeTip === 'scence') {
                                                let typeName = itemgraphic.attributes.type;
                                                this.$store.commit('setJumpScenceid', graphic.attributes.ObjectID);
                                                if (typeName == '水源') {
                                                    this.$router.push({ path: '/waterProcess' });
                                                } else if (typeName == '水厂') {
                                                    this.$router.push({ path: '/waterPlanProcess' });
                                                } else if (typeName == '泵站') {
                                                    this.$router.push({ path: '/waterSupplyProcess' });
                                                }
                                                return
                                            } else if (itemgraphic.attributes.typeTip === 'device') {
                                                if (itemgraphic.attributes.type) {
                                                    this.$store.commit('setJumpNavType', itemgraphic.attributes.type);
                                                    this.$router.push({ path: '/networkAssets' });
                                                }
                                                return
                                            } else if(itemgraphic.attributes.typeTip === 'hubiao') { 
                                                this.hubiaoID = itemgraphic.attributes.ObjectID;
                                                this.hubiaoTitles = itemgraphic.attributes.title
                                                 this.getHouseholdTableList()
                                              }
                                        }
                                    }
                                }
                            } else {
                                this.querySinglePointFn('OBJECTID = ' + graphic.attributes.ObjectID, (res) => {
                                     var navtype = '';
                                    var scode = res.features[0].attributes.SCODE;
                                    if(scode.indexOf('井')!==-1){
                                        navtype = '窨井'
                                    }else if(scode.indexOf('阀')!==-1){
                                        navtype = '阀门'
                                    }else if(scode.indexOf('栓')!==-1){
                                        navtype = '消防栓'
                                    }
                                    this.$store.commit('setJumpNavType', navtype);
                                    this.$router.push({ path: '/networkAssets' });
                                });
                            }
                            }
                        }
                        // })
                    }
                    } else {
                        /* if(this.hubiaoPopisshow ===true) {
                            return
                        } */
                    }
                });
            });
        },
        getHouseholdTableList() {
            this.hubiaoTitle = this.hubiaoTitles;
            this.mixins_query = {
              buildingId: this.hubiaoID,
              keywords:this.keywords
            };
            let pageset = {
                page: this.mixins_pageset.pageNum,
                size: this.mixins_pageset.pageSize
            };
  
  /*           this.mixins_pageset = {
                page: this.mixins_pageset.pageNum,
                size: this.mixins_pageset.pageSize
            };  */
  
             let datas = Object.assign({}, pageset, this.mixins_query); 
             this.$http.get('/equipmentStatistics/getDeviceListInformation',datas).then(({status,data,msg}) => {
               if(status===0&& data) {
                 console.log(data);
                 console.log(this.mixins_pageset.page);
                 this.mixins_pageset.total = data.total*1;
                //  this.mixins_pageset.pageSizes = [6];
                 this.hubiaoPopisshow = true;
                 this.hubiaoData = data;
               }else {
                 this.$message.error(msg);
               }
               
             })
          },
    }
}