zhongrj
2023-06-27 d74b495736f0c04522ec54274b70fed0ded2878d
public/map/widgets/map/MapWidget.js
New file
@@ -0,0 +1,502 @@
define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/_base/array",
    "dojo/on",
    "dojo/dom",
    "dojo/dom-construct",
    "base/BaseWidget",
    "dojo/text!widgets/map/MapWidget.html",
    "esri/map",
    "base/ConfigData",
    "base/utils/LayerUtil",
    "controls/infowindow/InfoWindow",
    "base/AppEvent",
    "controls/toolbar/tools/BaseTool",
    "dojo/aspect",
    "esri/dijit/Scalebar",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/layers/WebTiledLayer",
    "esri/geometry/Point",
    "esri/SpatialReference",
    "esri/tasks/query",
    "esri/tasks/QueryTask",
    "esri/geometry/Extent"
], function (
    declare,
    lang,
    arrayUtil,
    on,
    dom,
    domConstruct,
    BaseWidget,
    template,
    Map,
    ConfigData,
    LayerUtil,
    InfoWindow,
    AppEvent,
    BaseTool,
    aspect,
    Scalebar,
    ArcGISDynamicMapServiceLayer,
    ArcGISTiledMapServiceLayer,
    WebTiledLayer,
    Point,
    SpatialReference,
    Query,
    QueryTask,
    Extent
) {
    var Widget = declare("MapWidget", [BaseWidget], {
        templateString: template,
        id: "",
        widgetName: "MapWidget",
        map: null,
        _grplayerId2GroupLayers: null,
        _currentVisibleGroupLayer: null,
        _currentVisibleSetLayer: null,
        _parseResult: null,
        _layerIdsTable: {},
        _controlIndex: {},
        _eventHandlers: [],
        _currentTool: null,
        visibleGroupLayerId: null,
        visibleLayerSetId: null,
        /**
         * 是否是自己的extent改变了,如果是,则向外派发MapWidget.EXTENT_CHANGE事件
         */
        _isSelfExtentChange: true,
        constructor: function (option) {
            this.inherited(arguments);
            this.base_class = "mapwidget-base";
            this._grplayerId2GroupLayers = null;
            this._controlIndex = {};
            this._eventHandlers = [];
            this._isSelfExtentChange = true;
            this._currentTool = null;
            this._mostTopLayerIds = [];
            AppEvent.addAppEventListener(AppEvent.APPEND_TOOL, lang.hitch(this, this.appendToolHandler));
        },
        startup: function () {
            this.inherited(arguments);
            //从全局配置解析地图相关的配置
            this._parseResult = LayerUtil.parse(ConfigData.basemap);
            //初始化InfoWindow
            var infoWindowDom = domConstruct.create("div", {}, dom.byId(this.mapBoxDom.id));
            var infoWindow = new InfoWindow({
                domNode: infoWindowDom
            });
            this._getXZQ();
            var extent = this._getStartExtent();
            this.mapBoxDom.id = uuid();
            this.map = new Map(this.mapBoxDom.id, {
                logo: this._parseResult.maplogo,
                showAttribution: true,
                extent: extent,
                maxZoom: 19,
                minZoom: 0,
                navigationMode: "classic"
            });
            this._eventHandlers.push(this.map.on("layer-add", lang.hitch(this, this._layerAddCallback)));
            this._eventHandlers.push(this.map.on("layer-remove", lang.hitch(this, this._layerRemoveCallback)));
            this._eventHandlers.push(this.map.on("load", lang.hitch(this, this.onload)));
            if (this.visibleGroupLayerId) {
                this._currentVisibleGroupLayer = this._parseResult.groups[this.visibleGroupLayerId];
            } else {
                this._currentVisibleGroupLayer = this._parseResult.groups[this._parseResult.curGroupId];
            }
            if (this.visibleLayerSetId) {
                this._currentVisibleSetLayer = this._currentVisibleGroupLayer.layerset[this.visibleLayerSetId];
            } else {
                this._currentVisibleSetLayer = this._currentVisibleGroupLayer.layerset[this._currentVisibleGroupLayer.defaultset];
            }
            this._addLayer();
            this._eventHandlers.push(this.map.on("extent-change", lang.hitch(this, this._onExtentChange)));
            // this._eventHandlers.push(this.map.on("mouse-move", lang.hitch(this, this._onMouseMove)));
            AppEvent.addAppEventListener(AppEvent.SWITCH_BASEMAP, lang.hitch(this, this.onSwitchBaseMap));
            AppEvent.addAppEventListener(AppEvent.ADD_TOP_MOST_LAYER, lang.hitch(this, this.onAddTopMostLayer));
        },
        onload: function () {
            AppEvent.dispatchAppEvent("mapLoad",this.map);
            //var listNode = this.map.attribution.listNode;
            var listNode = this.domNode;
            var scalebar = new Scalebar({
                map: this.map,
                scalebarStyle: "line",
                scalebarUnit: "metric"
            });
            //创建比例尺下显示坐标的dom节点
            domConstruct.create("span", {
                innerHTML: "<span id='LongLatitude'></span>",
                style: "position: absolute; bottom: 4px; display: block; right: 10px; color: #000;"
            }, listNode);
            var fenpc = domConstruct.create("span", {
                id: "fenping_colse",
                class: "multidate_close",
                innerHTML: "关闭分屏",
            }, listNode);
            on(fenpc, 'click', function () {
                AppEvent.dispatchAppEvent(AppEvent.MULTIDATE);
            });
            var locationb = domConstruct.create("div", {
                id: "init-location",
                class: "init-location-button",
                title: "初始位置",
            }, listNode);
            on(locationb, 'click', lang.hitch(this, function () {
                var extent = new Extent({
                    "xmin": 12881727,
                    "ymin": 3326410,
                    "xmax": 12918360,
                    "ymax": 3344162,
                    "spatialReference": { "wkid": 102100 }
                });
                this.map.setExtent(extent);
            }));
            var labelc = domConstruct.create("div", {
                id: "label-control",
                class: "label-control-button",
                title: "标注控制",
            }, listNode);
            on(labelc, 'click', lang.hitch(this, function () {
                var cva = this.map.getLayer('cva');
                var cia = this.map.getLayer('cia');
                if (cva) {
                    if (cva.opacity == 0) {
                        cva.opacity = 1;
                    } else {
                        cva.opacity = 0;
                    }
                    cva.refresh();
                }
                if (cia) {
                    if (cia.opacity == 0) {
                        cia.opacity = 1;
                    } else {
                        cia.opacity = 0;
                    }
                    cia.refresh();
                }
            }));
            var magnifyButton = $('.esriSimpleSliderIncrementButton')[0];
            on(magnifyButton, 'click', lang.hitch(this, function () {
                //var layer1 = this.map.getLayer("sceneControl");
                var layer2 = this.map.getLayer("noTextScene");
                var flag;
                var num = this.map.getZoom();
                if (sessionStorage.getItem('flag')) {
                    flag = sessionStorage.getItem('flag');
                } else {
                    flag = false;
                }
                if (flag == 'false') {
                    flag = false;
                } else if (flag == 'true') {
                    flag = true;
                }
                num += 1;
                if (flag) {
                    if (num > 7) {
                        //layer1.setVisibility(true);
                        layer2.setVisibility(false);
                    } else {
                        layer2.setVisibility(true);
                        //layer1.setVisibility(false);
                    }
                }
            }))
            var shrinkButton = $('.esriSimpleSliderDecrementButton')[0];
            on(shrinkButton, 'click', lang.hitch(this, function () {
                //var layer1 = this.map.getLayer("sceneControl");
                var layer2 = this.map.getLayer("noTextScene");
                var flag;
                var num = this.map.getZoom();
                if (sessionStorage.getItem('flag')) {
                    flag = sessionStorage.getItem('flag');
                } else {
                    flag = false;
                }
                if (flag == 'false') {
                    flag = false;
                } else if (flag == 'true') {
                    flag = true;
                }
                num -= 1;
                if (flag) {
                    if (num > 7) {
                        //layer1.setVisibility(true);
                        layer2.setVisibility(false);
                    } else {
                        layer2.setVisibility(true);
                        //layer1.setVisibility(false);
                    }
                }
            }))
            return this.map
        },
        appendToolHandler: function (data) {
            if (data.hockId == this.id) {
                aspect.after(data.tool, BaseTool.ACTIVATE_EVENT, lang.hitch(this, this.onToolActivateHandler));
                aspect.after(data.tool, BaseTool.DEACTIVATE_EVENT, lang.hitch(this, this.onToolDeactivateHandler));
                aspect.after(data.tool, BaseTool.SELFDEACTIVATE_EVENT, lang.hitch(this, this.onSelfToolDeactivateHandler));
            }
        },
        onSelfToolDeactivateHandler: function (tool) {
            this._currentTool = null;
        },
        onToolActivateHandler: function (tool) {
            if (this._currentTool != null && tool != this._currentTool) {
                this._currentTool.deactivate();
            }
            this._currentTool = tool;
        },
        onToolDeactivateHandler: function (tool) {
            this._currentTool = null;
        },
        _onExtentChange: function (evt) {
            if (this._isSelfExtentChange) {
                this.onExtentChange(evt.extent);
            } else {
                this._isSelfExtentChange = true;
            }
        },
        _onMouseMove: function (evt) {
            dom.byId("LongLatitude").innerHTML = "经度:" + evt.mapPoint.x.toFixed(2) + "  纬度:" + evt.mapPoint.y.toFixed(2);
        },
        onExtentChange: function (obj) {
            return obj;
        },
        setExtent: function (ext) {
            this._isSelfExtentChange = false;
            console.log(1234, ext);
            this.map.setExtent(ext);
        },
        onAddTopMostLayer: function (evt) {
            if (!this._mostTopLayerIds[evt.priority]) {
                this._mostTopLayerIds[evt.priority] = [];
            }
            this._mostTopLayerIds[evt.priority].push(evt.layerId);
        },
        _addLayer: function () {
            //先添加默认显示的图层
            // var firstVisibleAGSLayerLoad = true; //是否是第一个加载到地图上的ArcGIS瓦片服务图层,以第一个该类型的图层Load完毕作为地图Load的事件派发出去
            // if (this._currentVisibleGroupLayer != null) {
                // var baselayers = this._currentVisibleGroupLayer.baselayers;
                // if (baselayers == null) {
                //     this._currentVisibleGroupLayer.baselayers = LayerUtil.parseLayers(this._currentVisibleGroupLayer.baselayersConfig);
                //     baselayers = this._currentVisibleGroupLayer.baselayers;
                // }
                // //添加基础底图
                // for (var i = 0; i < baselayers.length; i++) {
                //     this.map.addLayer(baselayers[i]);
                // }
                var cycleMap = new WebTiledLayer("https://webmap-tile.sf-express.com/MapTileService/rt?x={col}&y={row}&z={level}", {
                    "copyright": '顺丰地图',
                    "id": "sasasa"
                });
                this.map.addLayer(cycleMap);
                //this.map.centerAndZoom(new Point(115.806669,28.68635, new SpatialReference({ wkid: 4326 })), 14);
                // //添加多时相图层
                // var layerset = this._currentVisibleSetLayer;
                // if (layerset.layers == null) {
                //     layerset.layers = LayerUtil.parseLayers(layerset.layersConfig);
                // }
                // for (var k = 0; k < layerset.layers.length; k++) {
                //     layerset.layers[k].visible = true;
                //     this.map.addLayer(layerset.layers[k]);
                // }
            // }
            // return;
            // //再添加不显示的图层
            // for (var key in this._parseResult.groups) {
            //     if (key == this._parseResult.curGroupId) {
            //         continue;
            //     }
            //     var baselayers = this._parseResult.groups[key].baselayers;
            //     //添加基础底图
            //     for (var i = 0; i < baselayers.length; i++) {
            //         baselayers[i].visible = false;
            //         this.map.addLayer(baselayers[i]);
            //     }
            //     var layerset = this._parseResult.groups[key].layerset;
            //     //添加多时相图层
            //     for (var j in layerset) {
            //         var layervisible = false;
            //         for (var k = 0; k < layerset[j].layers.length; k++) {
            //             layerset[j].layers[k].visible = false;
            //             this.map.addLayer(layerset[j].layers[k]);
            //         }
            //     }
            // }
        },
        _layerAddCallback: function (evt) {
            var _map = evt.layer.getMap();
            if (this._layerIdsTable[evt.layer.id] == null) {
                this._layerIdsTable[evt.layer.id] = evt.layer;
            }
            //把需要显示在最上层的图层移动到最上面
            for (var key1 in this._mostTopLayerIds) {
                var layers = this._mostTopLayerIds[key1];
                for (var key2 in layers) {
                    var layerId = layers[key2];
                    var topLayer = this._layerIdsTable[layerId];
                    if (!topLayer) {
                        break;
                    }
                    this.map.reorderLayer(topLayer, this.map.layerIds.length - 1);
                }
            }
        },
        _layerRemoveCallback: function (evt) {
            var layerId = evt.layer.id;
            this._layerIdsTable[evt.layer.id] = null;
            delete this._layerIdsTable[evt.layer.id];
            //         for (var index in this._mostTopLayerIds) {
            //            if (this._mostTopLayerIds[index] == layerId) {
            //               this._mostTopLayerIds.splice(index, 1);
            //               break;
            //            }
            //         }
        },
        _getStartExtent: function () {
            return new Extent({
                "xmin": Number(ConfigData.basemap.initExtent[0]),
                "ymin": Number(ConfigData.basemap.initExtent[1]),
                "xmax": Number(ConfigData.basemap.initExtent[2]),
                "ymax": Number(ConfigData.basemap.initExtent[3]),
                "spatialReference": {
                    "wkid": Number(ConfigData.basemap.wkid)
                }
            });
        },
        /**
         * 在该MapWidget上增加控件
         * @return 增加的空间的Id
         */
        addControl: function (control) {
            if (!control.id) {
                control.id = uuid();
            }
            if (this._controlIndex[control.id])
                return control.id;
            domConstruct.place(control.domNode, this.container);
            control.hockId = this.id;
            control.map = this.map;
            control.startup();
            this._controlIndex[control.id] = control;
            return control.id;
        },
        /**
         * 根据controlId删除控件
         */
        removeControl: function (controlId) {
            if (!this._controlIndex) {
                return;
            }
            var removeControl = this._controlIndex[controlId];
            //removeControl.destroy();
            domConstruct.destroy(controlId);
            removeControl = null;
        },
        onSwitchBaseMap: function (evt) {
            if (evt.hockId != this.id)
                return;
            if (this._currentVisibleGroupLayer.id == evt.grouplayer && this._currentVisibleSetLayer.id == evt.setlayer) {
                return;
            }
            var grouplayer = this._currentVisibleGroupLayer;
            var layerset = this._currentVisibleSetLayer;
            //---------------移除原来的图层----------------------------------
            //如果Group变了,需要移除Group的底图,没变则不移除
            if (evt.grouplayer) {
                if (evt.grouplayer != this._currentVisibleGroupLayer.id) {
                    for (var key in this._currentVisibleGroupLayer.baselayers) {
                        var layer = this._currentVisibleGroupLayer.baselayers[key];
                        this.map.removeLayer(layer);
                    }
                }
                this._currentVisibleGroupLayer = this._parseResult.groups[evt.grouplayer];
            }
            //移除时间图层
            for (var index in layerset.layers) {
                var layer = layerset.layers[index];
                this.map.removeLayer(layer);
            }
            if (evt.setlayer) {
                this._currentVisibleSetLayer = this._currentVisibleGroupLayer.layerset[evt.setlayer];
            } else {
                //根据时间查找Group中的layerset是否有时间,没有的话设为默认
                var layersetId = this._currentVisibleGroupLayer.defaultset;
                for (var key in this._currentVisibleGroupLayer.layerset) {
                    if (this._currentVisibleGroupLayer.layerset[key].label == this._currentVisibleSetLayer.label) {
                        layersetId = key;
                        break;
                    }
                }
                this._currentVisibleSetLayer = this._currentVisibleGroupLayer.layerset[layersetId];
            }
            //----------------添加图层-------------------
            grouplayer = this._currentVisibleGroupLayer;
            layerset = this._currentVisibleSetLayer;
            if (grouplayer.baselayers == null) {
                grouplayer.baselayers = LayerUtil.parseLayers(grouplayer.baselayersConfig);
            }
            arrayUtil.forEach(grouplayer.baselayers, lang.hitch(this, function (layer, index) {
                this.map.addLayer(layer, index);
            }));
            if (layerset.layers == null) {
                layerset.layers = LayerUtil.parseLayers(layerset.layersConfig);
            }
            arrayUtil.forEach(layerset.layers, lang.hitch(this, function (layer, index) {
                //layer.setVisibility(true);
                this.map.addLayer(layer);
            }));
        },
        destroy: function () {
            for (var i in this._eventHandlers) {
                this._eventHandlers[i].remove();
            }
            for (var i in this._controlIndex) {
                if (this._controlIndex[i].destroyRecursive) {
                    this._controlIndex[i].destroyRecursive();
                }
            }
            if (this.map.destroyRecursive) {
                this.map.destroyRecursive();
            }
            domConstruct.destroy(this.domNode.id);
            this.inherited(arguments);
        },
        //查询行政区
        _getXZQ: function () {
            var queryTask = new QueryTask(ConfigData.XZQUrl);
            var query = new Query();
            query.returnGeometry = true;
            query.outFields = ["*"];
            query.orderByFields = ["CITY_GB"];
            query.where = "1=1";
            queryTask.execute(query, function (results) {
                //              console.log(results);
                ConfigData.XZQfeatures = results.features;
            }, function (error) {
                console.log(error);
            });
        },
    });
    Widget.EXTENT_CHANGE = "onExtentChange";
    return Widget;
});