define([
|
"dojo/Evented",
|
"dojo/on",
|
"dojo/dom",
|
"dojo/_base/declare",
|
"dojo/dom-construct",
|
"dojo/dom-style",
|
"dojo/_base/lang",
|
"dojo/dom-class",
|
"esri/domUtils",
|
"esri/InfoWindowBase",
|
"base/utils/GeometryUtil",
|
"controls/Queryinfowindow/InfoTemplate"
|
],
|
function(
|
Evented,
|
on,
|
dom,
|
declare,
|
domConstruct,
|
domStyle,
|
lang,
|
domClass,
|
domUtils,
|
InfoWindowBase,
|
GeometryUtil,
|
InfoTemplate
|
) {
|
return declare([InfoWindowBase, Evented], {
|
|
isContentShowing: false,
|
_location: null,
|
_pointerDiv: null,
|
_items: [],
|
_nextButton: null,
|
_preButton: null,
|
_countSpan: null,
|
titleField: "title",
|
contentField: "content",
|
_currentGraphic: null,
|
_currentIndex: 0,
|
_correctButton: null,
|
width: 355,
|
height: 210,
|
infoTemplate: null,
|
constructor: function(parameters) {
|
var csspath = require.toUrl("controls/Queryinfowindow/InfoWindow.css");
|
dojo.create("link", {
|
href: csspath,
|
type: 'text/css',
|
rel: 'stylesheet'
|
},
|
document.getElementsByTagName('head')[0]);
|
lang.mixin(this, parameters);
|
|
this.offsetX = 0;
|
this.offsetX = 0;
|
|
domClass.add(this.domNode, "custom-infoWindow");
|
this._controlbar = domConstruct.create("div", {
|
"class": "custom-infoWindow-controlbar"
|
}, this.domNode);
|
this._title = domConstruct.create("span", {
|
"class": "custom-infoWindow-title"
|
}, this._controlbar);
|
this._closeButton = domConstruct.create("span", {
|
"class": "custom-infoWindow-closebutton",
|
"title": "关闭"
|
}, this._controlbar);
|
domConstruct.create("span", {
|
"class": "custom-infoWindow-split"
|
}, this._controlbar);
|
this._correctButton = domConstruct.create("span", {
|
"class": "custom-infoWindow-correctbutton",
|
"title": "纠错"
|
}, this._controlbar);
|
this._content = domConstruct.create("div", {
|
"class": "custom-infoWindow-content"
|
}, this.domNode);
|
this._pointerDiv = domConstruct.create("div", {
|
"class": "custom-infoWindow-pointer"
|
}, this.domNode);
|
this._nextButton = domConstruct.create("span", {
|
"class": "custom-infoWindow-nextbutton",
|
"title": "下一条"
|
}, this._controlbar);
|
this._countSpan = domConstruct.create("span", {
|
"class": "custom-infoWindow-count",
|
"innerHTML": "1/20"
|
}, this._controlbar);
|
this._preButton = domConstruct.create("span", {
|
"class": "custom-infoWindow-prebutton",
|
"title": "上一条"
|
}, this._controlbar);
|
on(this._closeButton, "click", lang.hitch(this, function() {
|
this.hide();
|
}));
|
on(this._preButton, "click", lang.hitch(this, function() {
|
if (this._currentIndex > 0) {
|
this._currentIndex--;
|
this.showItem(this._items[this._currentIndex]);
|
this._countSpan.innerHTML = (this._currentIndex + 1) + "/" + this._items.length;
|
}
|
}));
|
on(this._nextButton, "click", lang.hitch(this, function() {
|
if (this._currentIndex < this._items.length - 1) {
|
this._currentIndex++;
|
this.showItem(this._items[this._currentIndex]);
|
this._countSpan.innerHTML = (this._currentIndex + 1) + "/" + this._items.length;
|
}
|
}));
|
domUtils.hide(this.domNode);
|
this.isShowing = false;
|
this.setItems([]);
|
this.resize(this.width, this.height);
|
},
|
setMap: function(map) {
|
this.inherited(arguments);
|
if (!this.domNode.parentNode) {
|
domConstruct.place(this.domNode, dom.byId(map.id));
|
}
|
this.infoTemplate = new InfoTemplate();
|
domConstruct.place(this.infoTemplate.domNode, this._content);
|
this.infoTemplate.startup();
|
map.on("pan-start", lang.hitch(this, function() {
|
//this.hide();
|
}));
|
map.on("zoom-start", lang.hitch(this, function() {
|
//this.hide();
|
}));
|
map.on("pan", lang.hitch(this, function(evt) {
|
if (this.isShowing) {
|
this._show(this._location, evt.delta.x, evt.delta.y);
|
}
|
}));
|
map.on("pan-end", lang.hitch(this, function() {
|
if (this.isShowing) {
|
this._show(this._location);
|
}
|
|
}));
|
map.on("zoom-end", lang.hitch(this, function() {
|
if (this.isShowing) {
|
this._show(this._location);
|
}
|
}));
|
|
},
|
setTitle: function(title) {
|
var thisWidth = domStyle.get(this.domNode, "width");
|
domStyle.set(this._title, "maxWidth", (thisWidth - 40).toString() + "px");
|
this.place(title, this._title);
|
|
},
|
setContent: function(content, width, height) {
|
this.infoTemplate.reset();
|
this.infoTemplate.setContent(content);
|
if (width !== undefined && height !== undefined) {
|
this.resize(width, height);
|
} else {
|
this.resize(355, 210);
|
}
|
},
|
setTitleAndContent: function(title, content, showTab, width, height) {
|
//this.place(content, this._content);
|
|
this.setContent(content, width, height);
|
this.setTitle(title);
|
if (showTab !== undefined) {
|
if (!showTab) {
|
this.infoTemplate.hideTab();
|
}
|
}
|
},
|
setTab: function(type) {
|
this.infoTemplate.switchTab(type);
|
},
|
setGraphic: function(graphic) {
|
this.infoTemplate.setGraphic(graphic);
|
},
|
getGraphic: function(graphic) {
|
return this.infoTemplate.getGraphic();
|
},
|
show: function(location, offsexX, offsetY) {
|
if (offsexX)
|
this.offsetX = offsexX;
|
else
|
this.offsetX = 0;
|
if (offsetY)
|
this.offsetY = offsetY;
|
else
|
this.offsetY = 0;
|
this._show(location);
|
},
|
_show: function(location, dx, dy) {
|
if (!location) {
|
return;
|
}
|
if (location.type && location.type != "point") {
|
location = GeometryUtil.getCenter(location);
|
}
|
this._location = location;
|
if (location.spatialReference) {
|
location = this.map.toScreen(location);
|
}
|
var position = this._getPosition(location.x, location.y)
|
if (dx) {
|
location.x = location.x + dx;
|
}
|
if (dy) {
|
location.y = location.y + dy
|
}
|
location.x += this.offsetX;
|
location.y += this.offsetY;
|
this._positionWindow(position, location)
|
//display the info window
|
domUtils.show(this.domNode);
|
this.isShowing = true;
|
this.onShow();
|
},
|
hide: function() {
|
domUtils.hide(this.domNode);
|
this.isShowing = false;
|
this.onHide();
|
|
},
|
resize: function(width, height) {
|
this.width = width;
|
this.height = height;
|
if (!this.domNode) {
|
return;
|
}
|
// domStyle.set(this._content,{
|
// "width": width + "px"
|
// });
|
// domStyle.set(this._controlbar,{
|
// "width": width + "px"
|
// });
|
domStyle.set(this.domNode, {
|
"width": width + "px",
|
"height": (height + 30).toString() + "px"
|
});
|
if (this.isShowing) {
|
this._show(this._location);
|
}
|
|
},
|
destroy: function() {
|
domConstruct.destroy(this.domNode);
|
this._closeButton = this._title = this._content = null;
|
},
|
|
_positionWindow: function(arg, location) {
|
var thisWidth = domStyle.get(this.domNode, "width");
|
var thisHeight = domStyle.get(this.domNode, "height");
|
domClass.remove(this._pointerDiv);
|
domClass.add(this._pointerDiv, "custom-infoWindow-pointer");
|
switch (arg) {
|
case "topLeft":
|
domStyle.set(this.domNode, {
|
"left": (location.x - 12) + "px",
|
"top": location.y + 10 + "px"
|
});
|
domClass.add(this._pointerDiv, "pointer-top");
|
domStyle.set(this._pointerDiv, {
|
"left": "3px",
|
"top": "-9px"
|
});
|
break;
|
case "topRight":
|
domStyle.set(this.domNode, {
|
"left": (location.x - thisWidth + 11) + "px",
|
"top": location.y + 10 + "px"
|
});
|
domClass.add(this._pointerDiv, "pointer-top");
|
domStyle.set(this._pointerDiv, {
|
"left": (thisWidth - 19) + "px",
|
"top": "-9px"
|
});
|
break;
|
case "top":
|
domStyle.set(this.domNode, {
|
"left": (location.x - thisWidth / 2) + "px",
|
"top": location.y + 10 + "px"
|
});
|
domClass.add(this._pointerDiv, "pointer-top");
|
domStyle.set(this._pointerDiv, {
|
"left": (thisWidth / 2 - 8) + "px",
|
"top": "-9px"
|
});
|
break;
|
case "left":
|
domStyle.set(this.domNode, {
|
"left": location.x + 12 + "px",
|
"top": (location.y - thisHeight / 2 - 15) + "px"
|
});
|
domClass.add(this._pointerDiv, "pointer-left");
|
domStyle.set(this._pointerDiv, {
|
"left": "-10px",
|
"top": (thisHeight / 2 + 5) + "px"
|
});
|
break;
|
case "right":
|
domStyle.set(this.domNode, {
|
"left": (location.x - (thisWidth + 12)) + "px",
|
"top": (location.y - thisHeight / 2 - 15) + "px"
|
});
|
domClass.add(this._pointerDiv, "pointer-right");
|
domStyle.set(this._pointerDiv, {
|
"left": (thisWidth - 8) + "px",
|
"top": (thisHeight / 2 + 5) + "px"
|
});
|
break;
|
case "bottomLeft":
|
domStyle.set(this.domNode, {
|
"left": (location.x - 12) + "px",
|
"top": (location.y - thisHeight - 12) + "px"
|
});
|
domClass.add(this._pointerDiv, "pointer-bottom");
|
domStyle.set(this._pointerDiv, {
|
"left": "3px",
|
"top": (thisHeight - 8) + "px"
|
});
|
break;
|
case "bottomRight":
|
domStyle.set(this.domNode, {
|
"left": (location.x - thisWidth + 11) + "px",
|
"top": (location.y - thisHeight - 12) + "px"
|
});
|
domClass.add(this._pointerDiv, "pointer-bottom");
|
domStyle.set(this._pointerDiv, {
|
"left": (thisWidth - 20) + "px",
|
"top": (thisHeight - 8) + "px"
|
});
|
break;
|
// case "bottom":
|
// break;
|
default:
|
//默认pointer显示在下面
|
domStyle.set(this.domNode, {
|
"left": (location.x - thisWidth / 2) + "px",
|
"top": (location.y - thisHeight - 12) + "px"
|
});
|
domClass.add(this._pointerDiv, "pointer-bottom");
|
domStyle.set(this._pointerDiv, {
|
"left": (thisWidth / 2 - 10) + "px",
|
"top": (thisHeight - 8) + "px"
|
});
|
break;
|
}
|
},
|
|
/**
|
* 计算pointer处于的方位，左上、上、右上、左、默认、右、左下、下、右下
|
* @param x
|
* @param y
|
*/
|
_getPosition: function(x, y) {
|
|
var widthPer = this.map.width / 4
|
var heightPer = this.map.height / 4
|
if (y < heightPer) {
|
if (x < widthPer) {
|
return "topLeft";
|
} else if (x > widthPer * 3) {
|
return "topRight";
|
} else {
|
return "top";
|
}
|
}
|
if (y >= heightPer && y < heightPer * 3) {
|
if (x < widthPer) {
|
return "left";
|
} else if (x > widthPer * 3) {
|
return "right";
|
} else {
|
return "default";
|
}
|
}
|
if (y > heightPer * 3) {
|
if (x < widthPer) {
|
return "bottomLeft";
|
} else if (x > widthPer * 3) {
|
return "bottomRight";
|
} else {
|
return "bottom";
|
}
|
} else {
|
return "default";
|
}
|
},
|
setItems: function(items) {
|
this._items = items;
|
if (!this.domNode)
|
return;
|
var thisWidth = domStyle.get(this.domNode, "width");
|
if (!items || items.length <= 1) {
|
//domStyle.set(this._content,"bottom","20px");
|
//domStyle.set(this._pageDiv,"display","none");
|
domStyle.set(this._title, "maxWidth", (thisWidth - 40).toString() + "px");
|
domStyle.set(this._nextButton, "display", "none");
|
domStyle.set(this._countSpan, "display", "none");
|
domStyle.set(this._preButton, "display", "none");
|
_currentIndex = 0;
|
} else {
|
//有多个graphics
|
domStyle.set(this._title, "maxWidth", (thisWidth - 135).toString() + "px");
|
this.showItem(items[0]);
|
domStyle.set(this._nextButton, "display", "inline-block");
|
domStyle.set(this._countSpan, "display", "inline-block");
|
domStyle.set(this._preButton, "display", "inline-block");
|
this._countSpan.innerHTML = "1/" + this._items.length;
|
_currentIndex = 0;
|
return;
|
}
|
if (items.length == 1) {
|
//如果只有一个graphic
|
this.showItem(items[_currentIndex]);
|
}
|
},
|
showItem: function(item) {
|
if (item) {
|
if (item[this.titleField]) {
|
this._title.innerHTML = item[this.titleField];
|
} else {
|
this._title.innerHTML = "无标题";
|
}
|
if (item[this.contentField]) {
|
this.setContent(item[this.contentField]);
|
} else {
|
this.setContent("");
|
}
|
}
|
this._location = item.geometry;
|
if (this.isShowing) {
|
this._show(this._location);
|
}
|
// var maxWidth = domStyle.get(this._title,"maxWidth");
|
// if(maxWidth<this._title.offsetWidth)
|
// {
|
// this._title.title = graphic.attributes[this.titleField];
|
// }
|
// else
|
// {
|
// this._title.title = "";
|
// }
|
}
|
|
});
|
|
});
|
