/**
|
* 鹰眼视图widget
|
* @author Liuyl
|
* @date 2015/10/9
|
*/
|
define([
|
"dojo/_base/declare",
|
"base/BaseControl",
|
"dojo/_base/array",
|
"dojo/_base/lang",
|
"dojo/dom",
|
"dojo/dom-class",
|
"dojo/dom-style",
|
"dojo/topic",
|
"dojo/aspect",
|
"dojo/on",
|
"dojo/text!controls/overview/OverviewControl.html",
|
"esri/map",
|
"esri/graphic",
|
"esri/Color",
|
"esri/geometry/Polygon",
|
"esri/symbols/SimpleFillSymbol",
|
"esri/symbols/SimpleLineSymbol",
|
"esri/layers/GraphicsLayer",
|
"esri/toolbars/edit",
|
"esri/graphicsUtils",
|
"utils/LayerUtil",
|
"controls/overview/config",
|
"base/AppEvent"
|
], function(
|
declare,
|
BaseControl,
|
arrayUtil,
|
lang,
|
dom,
|
domClass,
|
domStyle,
|
topic,
|
aspect,
|
on,
|
template,
|
Map,
|
Graphic,
|
Color,
|
Polygon,
|
SimpleFillSymbol,
|
SimpleLineSymbol,
|
GraphicsLayer,
|
Edit,
|
graphicsUtils,
|
LayerUtil,
|
config,
|
AppEvent) {
|
var Widget = declare([BaseControl], {
|
|
templateString: template,
|
defaultOptions: {
|
rate: 2.5,
|
base_class: "overview-default-base-class",
|
fill_color: [135, 206, 250, 0.3],
|
border_color: [135, 206, 250, 1]
|
},
|
/**
|
* GroupLayers的配置
|
*/
|
grouplayersConfig: null,
|
/**
|
* 当前显示的GroupLayer的Id
|
*/
|
visibleGroupLayerId: "",
|
|
/**
|
* 根据图层配置信息转换成实例化后的图层结果对象
|
*/
|
_parseResult: null,
|
|
/**
|
* options
|
*/
|
constructor: function(options) {
|
/**
|
* 确保实例化时传入图层组配置参数和该鹰眼初始显示的图层组Id
|
*/
|
if (!options || !options.grouplayersConfig || !options.visibleGroupLayerId) {
|
throw {
|
message: "初始化参数不完整，应指定grouplayersConfig和visibleGroupLayerId参数"
|
};
|
}
|
declare.safeMixin(this, options);
|
//$.extend(true, config, this.defaultOptions, options);
|
//this.map = config.basemap;
|
// dojo.create("link", {
|
// href: require.toUrl("widgets/overview/") + 'OverviewWidget.css',
|
// type: 'text/css',
|
// rel: 'stylesheet'
|
// },
|
// document.getElementsByTagName('head')[0]);
|
//this.MAP_DOM_ID = srcRefNode + this.MAP_DOM_ID;
|
this.base_class = "overview-default-base-class";
|
//this.map = config.basemap;
|
this._myMap = null;
|
this._layer1 = null;
|
this._layer2 = null;
|
this._graphic1 = null;
|
this._graphic2 = null;
|
},
|
startup: function() {
|
this.inherited(arguments);
|
this._init();
|
AppEvent.addAppEventListener(AppEvent.SWITCH_BASEMAP, lang.hitch(this, this.onSwitchBaseMap));
|
},
|
postCreate: function() {
|
this.inherited(arguments);
|
},
|
_init: function() {
|
if (this.myMapNode.id == "") {
|
this.myMapNode.id = uuid();
|
}
|
|
//初始化自己的地图
|
this._myMap = new Map(this.myMapNode.id, {
|
logo: false,
|
slider: false
|
});
|
//this._myMap = map;
|
//禁用鹰眼地图的所有用户导航方式
|
this._myMap.on("load", lang.hitch(this, function(map) {
|
this._myMap.disableMapNavigation();
|
this._myMap.hideZoomSlider();
|
}));
|
|
//var _cs = domStyle.getComputedStyle(this.mapNode);
|
//根据配置添加图层
|
this._addLayer();
|
this._initGraphic();
|
var resizeTimer;
|
clearTimeout(resizeTimer);
|
resizeTimer = setTimeout(lang.hitch(this, function() {
|
this._myMap.resize();
|
this._myMap.reposition();
|
|
}), 500);
|
},
|
_addLayer: function() {
|
//仅显示baselayer即可，去掉baselayer的displaylevel限制，让其在所有显示级别都可以显示
|
this._parseResult = LayerUtil.parseGroups(this.grouplayersConfig);
|
var groups = this._parseResult.groups;
|
for (var key in groups) {
|
var layer;
|
var visible = (key == this.visibleGroupLayerId);
|
if(visible == false){
|
continue;
|
}
|
if(groups[key].baselayers==null){
|
groups[key].baselayers=LayerUtil.parseLayers(groups[key].baselayersConfig);
|
}
|
for (var i = 0; i < groups[key].baselayers.length; i++) {
|
layer = groups[key].baselayers[i];
|
layer.visible = visible;
|
if (layer.setDisplayLevels) {
|
layer.setDisplayLevels(null);
|
}
|
this._myMap.addLayer(layer);
|
}
|
}
|
},
|
onSwitchBaseMap: function(evt) {
|
if (evt.hockId != this.hockId || !evt.grouplayer)
|
return;
|
if (this.visibleGroupLayerId == evt.grouplayer) {
|
return;
|
} else {
|
//先隐藏原来的图层
|
var grouplayer = this._parseResult.groups[this.visibleGroupLayerId];
|
for (var key in grouplayer.baselayers) {
|
var layer = grouplayer.baselayers[key];
|
//layer.setVisibility(false);
|
this._myMap.removeLayer(layer);
|
}
|
|
//再显示需要展示的图层
|
var grouplayer = null;
|
for (var key in this._parseResult.groups) {
|
if (key == evt.grouplayer) {
|
var grouplayer = this._parseResult.groups[key];
|
if(grouplayer.baselayers == null){
|
grouplayer.baselayers=LayerUtil.parseLayers(grouplayer.baselayersConfig);
|
}
|
for (var index in grouplayer.baselayers) {
|
var layer = grouplayer.baselayers[index];
|
//layer.setVisibility(true);
|
this._myMap.addLayer(layer);
|
}
|
}
|
}
|
this.visibleGroupLayerId = evt.grouplayer;
|
}
|
},
|
_initGraphic: function() {
|
var _symbol = new SimpleFillSymbol()
|
.setStyle(SimpleFillSymbol.STYLE_SOLID)
|
.setColor(new Color(config.fill_color))
|
.setOutline(new SimpleLineSymbol().setColor(new Color(config.border_color)).setWidth(0.5));
|
this._layer1 = new GraphicsLayer({
|
id: "rect1"
|
});
|
this._layer2 = new GraphicsLayer({
|
id: "rect2"
|
});
|
this._myMap.addLayer(this._layer1);
|
this._myMap.addLayer(this._layer2);
|
this._graphic1 = new Graphic(Polygon.fromExtent(this.map.extent), _symbol);
|
this._graphic2 = new Graphic(Polygon.fromExtent(this.map.extent), _symbol);
|
this._layer1.add(this._graphic1);
|
this._layer2.add(this._graphic2);
|
var _startMapPoint = null;
|
var _basemapExtent = null;
|
|
|
this.map.on("mouse-drag-start", lang.hitch(this, function(evt) {
|
_startMapPoint = evt.mapPoint;
|
_basemapExtent = this.map.extent;
|
}));
|
this.map.on("mouse-drag", lang.hitch(this, function(evt) {
|
var _curMapPoint = evt.mapPoint;
|
|
var _deltaX = _curMapPoint.x - _startMapPoint.x;
|
var _deltaY = _curMapPoint.y - _startMapPoint.y;
|
var _basemapCenter = _basemapExtent.getCenter();
|
_basemapCenter.x -= _deltaX;
|
_basemapCenter.y -= _deltaY;
|
_newExtent = _basemapExtent.centerAt(_basemapCenter);
|
var _newPolygon = Polygon.fromExtent(_newExtent);
|
this._graphic2.setGeometry(_newPolygon);
|
this._layer2.redraw();
|
}));
|
|
this.map.on("extent-change", lang.hitch(this, function(evt) {
|
var _newPolygon = Polygon.fromExtent(evt.extent);
|
var _extent = new esri.geometry.Extent(evt.extent);
|
var _deltaX = (_extent.xmax - _extent.xmin) / 2.0 * (config.rate - 1);
|
var _deltaY = (_extent.ymax - _extent.ymin) / 2.0 * (config.rate - 1);
|
_extent.xmin -= _deltaX;
|
_extent.xmax += _deltaX;
|
_extent.ymin -= _deltaY;
|
_extent.ymax += _deltaY;
|
this._myMap.setExtent(_extent).then(lang.hitch(this, function() {
|
this._redrawRect(_newPolygon);
|
}));
|
//主地图缩放时让矩形框具有动态效果
|
this.map.on("zoom", lang.hitch(this, function(evt) {
|
try {
|
var _curZoomLevel = evt.level;
|
var _newPolygon = Polygon.fromExtent(evt.extent);
|
this._redrawRect(_newPolygon);
|
} catch (err) {
|
console.log(err);
|
}
|
|
}));
|
}));
|
this._initEditing();
|
|
},
|
_redrawRect: function(polygon) {
|
this._graphic2.setGeometry(polygon);
|
this._layer2.redraw();
|
this._graphic1.setGeometry(polygon);
|
this._layer1.redraw();
|
},
|
_initEditing: function() {
|
var editToolBar = new Edit(this._myMap);
|
editToolBar.activate(Edit.MOVE, this._graphic2);
|
editToolBar.on("graphic-move-stop", lang.hitch(this, function(g, t) {
|
var _newCenter = graphicsUtils.graphicsExtent([g.graphic]).getCenter();
|
this.map.centerAt(_newCenter);
|
}));
|
},
|
_toggle: function() {
|
require(["dojo/_base/fx", "dojo/dom", "dojo/domReady!"], lang.hitch(this, function(baseFx, dom) {
|
var _prop = null;
|
// var _cs = domStyle.getComputedStyle(this.mapNode);
|
// var _width = -parseInt(_cs.width.substr(0, _cs.width.length - 2));
|
// var _height = -parseInt(_cs.height.substr(0, _cs.height.length - 2));
|
if (domClass.contains(this.toggleNode, "overview-toggle-show")) {
|
//由于控件初始化后无法设置成正确的显示范围
|
//故在显示鹰眼前手动触发一次basemap的extent-change事件以重新设置鹰眼地图的显示范围
|
domStyle.set(this._myMap.container, "height", domStyle.get(this.mapNode, "height") + "px");
|
this._myMap.resize();
|
this.map.centerAt(this.map.extent.getCenter());
|
domStyle.set(this.mapNode, "display", "block");
|
_prop = {
|
// right: {
|
// start: _width,
|
// end: '0',
|
// units: 'px'
|
// },
|
// bottom: {
|
// start: _height,
|
// end: '0',
|
// units: 'px'
|
// },
|
opacity: {
|
start: 0,
|
end: 1
|
}
|
}
|
baseFx.animateProperty({
|
node: this.mapNode,
|
properties: _prop,
|
duration: 1000
|
}).play();
|
domClass.remove(this.toggleNode, "overview-toggle-show");
|
domClass.add(this.toggleNode, "overview-toggle-hide");
|
} else {
|
|
_prop = {
|
// right: {
|
// end: _width,
|
// units: 'px'
|
// },
|
// bottom: {
|
// end: _height,
|
// units: 'px'
|
// },
|
opacity: {
|
start: 1,
|
end: 0
|
}
|
}
|
|
var anim = baseFx.animateProperty({
|
node: this.mapNode,
|
properties: _prop,
|
duration: 1000
|
});
|
aspect.after(anim, "onEnd", lang.hitch(this, function() {
|
domStyle.set(this.mapNode, "display", "none");
|
}, true));
|
anim.play();
|
domClass.remove(this.toggleNode, "overview-toggle-hide");
|
domClass.add(this.toggleNode, "overview-toggle-show");
|
}
|
|
}));
|
},
|
destroy: function() {
|
this.inherited(arguments);
|
var layerIds = this._myMap.layerIds;
|
for (var index in layerIds) {
|
this._myMap.removeLayer(this._myMap.getLayer(layerIds[index]));
|
}
|
}
|
|
});
|
return Widget;
|
});
|
