/**
|
* 富地图widget
|
* @author Liuyl
|
* @date 2015/10/20
|
*/
|
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/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,
|
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: this._parseResult.extent,
|
maxZoom: 19,
|
minZoom: 0,
|
// infoWindow: infoWindow,
|
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 () {
|
//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: 5px; display: block; left: 5px;"
|
}, 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": 111.523311324,
|
// "ymin": 23.357955371,
|
// "xmax": 120.520957582,
|
// "ymax": 31.209304007,
|
// "spatialReference": {"wkid": 4490}
|
// });
|
// 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;
|
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 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 esri.geometry.Extent({
|
"xmin": ConfigData.basemap.initExtent[0],
|
"ymin": ConfigData.basemap.initExtent[1],
|
"xmax": ConfigData.basemap.initExtent[2],
|
"ymax": ConfigData.basemap.initExtent[3],
|
"spatialReference": {
|
"wkid": 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;
|
});
|
