/**
|
* Created by Webyb on 2015/6/29.
|
* @description 管理地图的模块，所有的地图操作必须由该模块完成。
|
*/
|
define(["base/AppEvent",
|
"base/ConfigData",
|
"dojo/_base/declare",
|
"dojo/_base/lang",
|
"esri/map",
|
"dojo/aspect",
|
"widgets/map/MapWidget",
|
"dojo/dom-construct",
|
"dojo/dom-style",
|
"dojo/dom",
|
"dojo/on",
|
"controls/mapswitch/MapSwitchControl",
|
// "controls/sceneControl/SceneControl",
|
"controls/overview/OverviewControl",
|
"controls/timeslider/TimeSliderControl",
|
"controls/timeliner/TimeLinerControl",
|
// "controls/Splittime/SplittimeControl",
|
"esri/geometry/Point",
|
"dojo/domReady!",
|
],
|
function (AppEvent,
|
ConfigData,
|
declare,
|
lang,
|
Map,
|
aspect,
|
MapWidget,
|
domConstruct,
|
domStyle,
|
dom,
|
on,
|
MapSwitchControl,
|
// SceneControl,
|
OverviewControl,
|
TimeSliderControl,
|
TimeLinerControl,
|
// SplittimeControl,
|
Point) {
|
return declare("MapManager", null, {
|
/**
|
* 地图容器Div的id
|
*/
|
containerDiv: "mapcontentClass",
|
/**
|
* 主MapWidget的实际地图对象
|
*/
|
_map: null,
|
_mainMapWidget: null,
|
_mapWidgets: [],
|
_bottomMapWidget: null,
|
_resizeTimer: null,
|
/**
|
* 附属地图的事件委托索引
|
*/
|
_relateMapEventHandlerIndex: {},
|
|
otherMapWidget: null, //用于测试
|
|
constructor: function () {
|
var boundFunction = lang.hitch(this, this.onConfigLoaded);
|
AppEvent.addAppEventListener(AppEvent.CONFIG_LOADED, boundFunction);
|
//当窗体大小发生变化时，调用map对象的resize方法
|
AppEvent.addAppEventListener(AppEvent.APPLICATION_RESIZE, lang.hitch(this, this.onResizeHandler));
|
AppEvent.addAppEventListener(AppEvent.APPEND_MAPWIDGET, lang.hitch(this, this.appendMapWidgetHandler));
|
AppEvent.addAppEventListener(AppEvent.REMOVE_MAPWIDGET, lang.hitch(this, this.removeMapWidgetHandler));
|
},
|
onResizeHandler: function () {
|
var mapWidgets = this._mapWidgets;
|
var bottomMapWidget = this._bottomMapWidget;
|
//开始重新计算各个地图的位置
|
// console.log("开始重新计算各个地图的位置");
|
var containerWidth = domStyle.get(dom.byId(this.containerDiv), "width");
|
var containerHeight = domStyle.get(dom.byId(this.containerDiv), "height");
|
if (mapWidgets.length == 0) {
|
return;
|
} else if (mapWidgets.length == 1) {
|
var mapWidget = mapWidgets[0];
|
domStyle.set(mapWidget.domNode, "position", "relative");
|
domStyle.set(mapWidget.domNode, "width", containerWidth + "px");
|
domStyle.set(mapWidget.domNode, "height", containerHeight + "px");
|
domStyle.set(mapWidget.domNode, "float", "");
|
domStyle.set(mapWidget.domNode, "z-index", 1);
|
|
//设置绘制图表的div
|
$("#chart").css({"position": "relative", "width": containerWidth + "px", "z-index": 2});
|
} else if (mapWidgets.length == 2) {
|
var leftMapWidget = mapWidgets[0];
|
var rightMapWidget = mapWidgets[1];
|
//设置左边地图位置
|
domStyle.set(leftMapWidget.domNode, "position", "relative");
|
domStyle.set(leftMapWidget.domNode, "float", "left");
|
domStyle.set(leftMapWidget.domNode, "width", containerWidth / 2 + "px");
|
domStyle.set(leftMapWidget.domNode, "height", containerHeight + "px");
|
domStyle.set(leftMapWidget.domNode, "z-index", 1);
|
|
//设置绘制图表的div
|
$("#chart").css({"position": "relative", "width": containerWidth / 2 + "px", "z-index": 2});
|
|
//设置右边地图位置
|
domStyle.set(rightMapWidget.domNode, "position", "relative");
|
domStyle.set(rightMapWidget.domNode, "float", "right");
|
domStyle.set(rightMapWidget.domNode, "width", (containerWidth / 2 - 1) + "px"); //留出边框的宽度
|
domStyle.set(rightMapWidget.domNode, "height", containerHeight + "px");
|
domStyle.set(rightMapWidget.domNode, "border-left", "1px solid #87898A");
|
domStyle.set(rightMapWidget.domNode, "z-index", 1);
|
}
|
|
if (bottomMapWidget) {
|
domStyle.set(bottomMapWidget.domNode, "position", "absolute");
|
domStyle.set(bottomMapWidget.domNode, "width", containerWidth + "px");
|
domStyle.set(bottomMapWidget.domNode, "height", containerHeight + "px");
|
domStyle.set(bottomMapWidget.domNode, "float", "");
|
domStyle.set(bottomMapWidget.domNode, "top", "0px");
|
domStyle.set(bottomMapWidget.domNode, "left", "0px");
|
}
|
|
//执行各个地图的resize事件
|
if (this._resizeTimer) {
|
clearTimeout(this._resizeTimer);
|
}
|
this._resizeTimer = setTimeout(function () {
|
for (var i = 0; i < mapWidgets.length; i++) {
|
var mapWidget = mapWidgets[i];
|
if (mapWidget.map && mapWidget.map.loaded) {
|
mapWidget.map.resize();
|
mapWidget.map.reposition();
|
}
|
}
|
if (bottomMapWidget && bottomMapWidget.map && bottomMapWidget.map.loaded) {
|
bottomMapWidget.map.resize();
|
bottomMapWidget.map.reposition();
|
}
|
|
}, 500);
|
},
|
onConfigLoaded: function () {
|
this.createMainMapWidget();
|
},
|
/**
|
* 创建系统的主MapWidget对象
|
*/
|
createMainMapWidget: function () {
|
_mainMapWidget = new MapWidget({
|
id: "mainMapWidget",
|
cssPath: "widgets/map/MapWidget.css"
|
});
|
ConfigData.mapWidgetId = "mainMapWidget";
|
AppEvent.dispatchAppEvent(AppEvent.APPEND_MAPWIDGET, {
|
mapwidget: _mainMapWidget,
|
relate: true
|
});
|
},
|
appendMapWidgetHandler: function (data) {
|
if (this._mapWidgets.length == 4) {
|
alert("系统中最多可展现4个地图，不能再增加地图。");
|
return;
|
}
|
var mapWidget = data.mapwidget;
|
//如果mapWidget没有ID，则随机生成一个
|
if (!mapWidget.id) {
|
mapWidget.id = uuid();
|
} else {
|
//防止添加两个一样的mapWidget
|
for (var i = 0; i < this._mapWidgets.length; i++) {
|
if (this._mapWidgets[i].id == mapWidget.id) {
|
alert("系统中已有一个ID为" + mapWidget.id + "的地图存在，故无法再次添加");
|
return;
|
}
|
}
|
if (this._bottomMapWidget && this._bottomMapWidget.id == mapWidget.id) {
|
alert("系统中已有一个ID为" + mapWidget.id + "的地图存在，故无法再次添加");
|
return;
|
}
|
}
|
if (data.type == "bottom") {
|
domConstruct.place(mapWidget.domNode, dom.byId(this.containerDiv), "first");
|
} else {
|
domConstruct.place(mapWidget.domNode, dom.byId(this.containerDiv));
|
}
|
|
if (this._mapWidgets.length == 0) {
|
//说明是主地图
|
aspect.after(mapWidget, "onload", lang.hitch(this, function (map) {
|
AppEvent.dispatchAppEvent(AppEvent.BASE_MAP_LAYER_LOADED, map);
|
}));
|
}
|
mapWidget.startup();
|
if (this._mapWidgets.length == 0) {
|
//说明是主地图
|
this._mainMapWidget = mapWidget;
|
this._map = this._mainMapWidget.map;
|
this._map.on("extent-change", lang.hitch(this, function (evt) {
|
//AppEvent.dispatchAppEvent(AppEvent.MAP_EXTENT_CHANGE, evt);
|
}));
|
//给主地图添加鹰眼、地图切换控件
|
var mapSwitchControl = new MapSwitchControl({
|
map: this._map,
|
cssPath: "controls/mapswitch/MapSwitchControl.css"
|
});
|
this._mainMapWidget.addControl(mapSwitchControl);
|
|
//全景按钮
|
// var sceneControl = new SceneControl({
|
// map: this._map,
|
// cssPath: "controls/sceneControl/SceneControl.css"
|
// });
|
// this._mainMapWidget.addControl(sceneControl);
|
|
//this._relateMapEventHandlerIndex["mainMapWidget"]=this._map.on("extent-change",lang.hitch(this,this._extentChangeHandler));
|
// var overviewControl = new OverviewControl({
|
// grouplayersConfig: ConfigData.basemap.grouplayers,
|
// visibleGroupLayerId: "veclry",
|
// cssPath: "controls/overview/OverviewControl.css"
|
// });
|
// this._mainMapWidget.addControl(overviewControl);
|
// var splitimeControl = new SplittimeControl({
|
// cssPath: "controls/Splittime/SplittimeControl.css"
|
// });
|
// this._mainMapWidget.addControl(splitimeControl);
|
//添加对开启关闭事件的监听
|
|
/* var timesliderControl = new TimeSliderControl({
|
grouplayersConfig: ConfigData.basemap.grouplayers,
|
map: this._mainMapWidget.map,
|
visibleGroupLayerId: this._mainMapWidget._currentVisibleGroupLayer.id,
|
visibleSetLayerId: this._mainMapWidget._currentVisibleSetLayer.id,
|
cssPath: "controls/timeslider/TimeSliderControl.css"
|
});
|
this._mainMapWidget.addControl(timesliderControl);
|
|
var timesliderStyleBottom = null;
|
timesliderControl.hide();*/
|
//
|
// var timelinerControl = new TimeLinerControl({
|
// map: this._mainMapWidget.map,
|
// cssPath: "controls/timeliner/TimeLinerControl.css"
|
// });
|
// this._mainMapWidget.addControl(timelinerControl);
|
|
var groupLayerId = null;
|
var setLayerId = null;
|
|
function onWidgetOpened(widgetArgs) {
|
|
if (widgetArgs.name == "MultidateWidget") {
|
// timesliderControl.show();
|
groupLayerId = this._mainMapWidget._currentVisibleGroupLayer.id;
|
setLayerId = this._mainMapWidget._currentVisibleSetLayer.id;
|
}
|
if (widgetArgs.name == "SwipeWidget") {
|
// timesliderStyleBottom = domStyle.get(timesliderControl.domNode, "bottom");
|
// domStyle.set(timesliderControl.domNode, "bottom", "200px");
|
// timesliderControl.show();
|
var widget = widgetArgs.instance;
|
widget.initMouseDragHandler(this._mainMapWidget);
|
// domStyle.set(timesliderControl.domNode, "bottom", "200px");
|
this._mainMapWidget.map.setExtent(this._mainMapWidget.map.extent);
|
groupLayerId = this._mainMapWidget._currentVisibleGroupLayer.id;
|
setLayerId = this._mainMapWidget._currentVisibleSetLayer.id;
|
}
|
|
}
|
|
function onWidgetClosed(widgetArgs) {
|
if (widgetArgs.name == "MultidateWidget") {
|
// timesliderControl.hide();
|
AppEvent.dispatchAppEvent(AppEvent.SWITCH_BASEMAP, {
|
hockId: this._mainMapWidget.id,
|
grouplayer: groupLayerId,
|
setlayer: setLayerId,
|
sender: this._mainMapWidget.id
|
});
|
}
|
if (widgetArgs.name == "SwipeWidget") {
|
// domStyle.set(timesliderControl.domNode, "bottom", timesliderStyleBottom);
|
// timesliderControl.hide();
|
var widget = widgetArgs.instance;
|
widget.removeMouseDragHandler(this._mainMapWidget);
|
AppEvent.dispatchAppEvent(AppEvent.SWITCH_BASEMAP, {
|
hockId: this._mainMapWidget.id,
|
grouplayer: groupLayerId,
|
setlayer: setLayerId,
|
sender: this._mainMapWidget.id
|
});
|
}
|
}
|
|
AppEvent.addAppEventListener(AppEvent.WIDGET_OPENED, lang.hitch(this, onWidgetOpened));
|
AppEvent.addAppEventListener(AppEvent.WIDGET_CLOSED, lang.hitch(this, onWidgetClosed));
|
|
//绑定菜单
|
AppEvent.addAppEventListener(AppEvent.WIDGET_LOADED, lang.hitch(this, function (evt) {
|
if (evt.name == "MenuWidget") {
|
AppEvent.dispatchAppEvent(AppEvent.BIND_MENU, {
|
menuId: "mapMenu",
|
dom: this._mainMapWidget.domNode
|
});
|
}
|
}));
|
AppEvent.addAppEventListener(AppEvent.MENU_ITEM_CLICKED, lang.hitch(this, function (evt) {
|
if (evt.menuId == "mapMenu") {
|
if (evt.menuItemId == "zoomIn") {
|
this._mainMapWidget.map.setZoom(this._mainMapWidget.map.getZoom() + 1);
|
} else if (evt.menuItemId == "zoomOut") {
|
this._mainMapWidget.map.setZoom(this._mainMapWidget.map.getZoom() - 1);
|
}
|
}
|
}));
|
}
|
if (data.type == "bottom") {
|
this._bottomMapWidget = mapWidget;
|
} else {
|
this._mapWidgets.push(mapWidget);
|
}
|
|
if (data.relate) {
|
var content = {
|
init: true,
|
sourceId: mapWidget.id,
|
mapManager: this
|
}
|
this._relateMapEventHandlerIndex[mapWidget.id] = aspect.after(mapWidget, MapWidget.EXTENT_CHANGE, lang.hitch(content, function (ext) {
|
for (var index in this.mapManager._mapWidgets) {
|
if (this.mapManager._mapWidgets[index].id == this.sourceId) {
|
continue;
|
}
|
|
if (data.type != "bottom") {
|
if (this.init) {
|
if (this.sourceId == "multidateRightMapWidget") {
|
|
}
|
else {
|
this.mapManager._mapWidgets[index].setExtent(ext);
|
}
|
this.init = false;
|
}
|
else {
|
this.mapManager._mapWidgets[index].setExtent(ext);
|
}
|
|
}
|
|
}
|
if (this.mapManager._bottomMapWidget && this.mapManager._bottomMapWidget.id != this.sourceId) {
|
this.mapManager._bottomMapWidget.setExtent(ext);
|
}
|
}));
|
}
|
|
//调用窗体变化事件，重新计算各个map的位置
|
this.onResizeHandler();
|
},
|
removeMapWidgetHandler: function (id) {
|
if (this._mainMapWidget.id == id) {
|
return; //主地图是不能移除的
|
}
|
var mapWidget = this._getMapWidgetById(id);
|
this._relateMapEventHandlerIndex[mapWidget.id].remove();
|
delete this._relateMapEventHandlerIndex[mapWidget.id];
|
for (var i = 1; i < this._mapWidgets.length; i++) {
|
if (this._mapWidgets[i].id == id) {
|
this._mapWidgets.splice(i, 1);
|
break;
|
}
|
}
|
if (this._bottomMapWidget && this._bottomMapWidget.id == id) {
|
this._bottomMapWidget = null;
|
}
|
//domConstruct.destroy(mapWidget.domNode.id);
|
//mapWidget=null;
|
if (mapWidget.destroyRecursive) {
|
mapWidget.destroyRecursive();
|
}
|
mapWidget = null;
|
this.onResizeHandler();
|
},
|
_getMapWidgetByMapId: function (id) {
|
for (var i in this._mapWidgets) {
|
if (this._mapWidgets[i].map.id == id) {
|
return this._mapWidgets[i];
|
}
|
}
|
if (this._bottomMapWidget && this._bottomMapWidget.map.id == id) {
|
return this._bottomMapWidget
|
}
|
},
|
_getMapWidgetById: function (id) {
|
for (var i in this._mapWidgets) {
|
if (this._mapWidgets[i].id == id) {
|
return this._mapWidgets[i];
|
}
|
}
|
if (this._bottomMapWidget && this._bottomMapWidget.id == id) {
|
return this._bottomMapWidget
|
}
|
}
|
});
|
});
|
