define([
|
"dojo/Evented",
|
"dojo/on",
|
"dojo/dom",
|
"dojo/dom-attr",
|
"dojo/dom-style",
|
"dojo/_base/declare",
|
"dojo/dom-construct",
|
"dojo/dom-style",
|
"dojo/_base/lang",
|
"dojo/dom-class",
|
"esri/domUtils",
|
"esri/InfoWindowBase",
|
"base/utils/GeometryUtil",
|
"controls/infowindow/InfoTemplate",
|
"esri/layers/FeatureLayer",
|
"esri/tasks/query",
|
"esri/tasks/QueryTask",
|
"base/AppEvent",
|
],
|
function(
|
Evented,
|
on,
|
dom,
|
domAttr,
|
domStyle,
|
declare,
|
domConstruct,
|
domStyle,
|
lang,
|
domClass,
|
domUtils,
|
InfoWindowBase,
|
GeometryUtil,
|
InfoTemplate,
|
FeatureLayer,
|
Query,
|
QueryTask,
|
AppEvent
|
) {
|
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,
|
_collectButton: null,
|
width: null,
|
height: 250,
|
_point: null,
|
infoTemplate: null,
|
constructor: function(parameters) {
|
var csspath = require.toUrl("controls/infowindow/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._collectButton = domConstruct.create("span", {
|
"class": "custom-infoWindow-collectButton",
|
"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);
|
this._preButton = domConstruct.create("span", {
|
"class": "custom-infoWindow-fullposition",
|
"title": "全景"
|
}, this._controlbar);
|
this._preButton = domConstruct.create("span", {
|
"class": "custom-infoWindow-vedio",
|
"title": "视频"
|
}, this._controlbar);
|
this._preButton = domConstruct.create("span", {
|
"class": "custom-infoWindow-detailIntro",
|
"title": "详情"
|
}, this._controlbar);
|
this._preButton = domConstruct.create("audio", {
|
"class": "custom-infoWindow-audio",
|
"title": "音频"
|
}, this._controlbar);
|
on(this._closeButton, "click", lang.hitch(this, function() {
|
this.hide();
|
}));
|
on(this._collectButton, "click", lang.hitch(this, function(evt) {
|
var self = this;
|
try {
|
if(!value) {
|
showlogin();
|
return;
|
}
|
dojo.xhrPost({
|
url: getUrl() + 'collect/addCollectData.do',
|
postData: {
|
"collect.userinfo.id": value,
|
"nameCode": domAttr.get(evt.currentTarget, "code"),
|
"collect.type": "1"
|
},
|
handleAs: "json",
|
load: function(data) {
|
if(data.result == "取消收藏") {
|
domStyle.set(self._collectButton, "background-image", "url('controls/infowindow/ico/uncollect.png')");
|
} else {
|
domStyle.set(self._collectButton, "background-image", "url('controls/infowindow/ico/collect.png')");
|
}
|
},
|
error: function(e) {
|
alert('服务器繁忙!');
|
}
|
});
|
} catch(e) {}
|
}));
|
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(width, height);
|
}
|
},
|
setTitleAndContent: function(code, title, content, showTab, width, height) {
|
if(code) {
|
domAttr.set(this._collectButton, "code", code);
|
domStyle.set(this._collectButton, "display", "");
|
try {
|
var self = this;
|
dojo.xhrPost({
|
url: getUrl() + 'collect/checkCollect.do',
|
postData: {
|
"id": code,
|
"model": "map",
|
"userid": value
|
},
|
handleAs: "json",
|
load: function(data) {
|
if(data.resultDesc == "未收藏") {
|
domStyle.set(self._collectButton, "background-image", "url('controls/infowindow/ico/uncollect.png')");
|
} else {
|
domStyle.set(self._collectButton, "background-image", "url('controls/infowindow/ico/collect.png')");
|
}
|
},
|
error: function(e) {
|
alert('服务器繁忙!');
|
}
|
});
|
} catch(e) {
|
alert("服务器繁忙!");
|
}
|
} else {
|
domStyle.set(this._collectButton, "display", "none");
|
}
|
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) {
|
this._point = location;
|
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();
|
this._position(this._point);
|
},
|
_position: function(point) {
|
$(document).on("keyup", "#start,#end", function() {
|
var that = $(this);
|
var keyword = $(this).val();
|
type = $(this).attr("id");
|
if(keyword.length > 0) {
|
var featurelayer = new FeatureLayer("http://192.168.0.100:6080/arcgis/rest/services/TAIHE/taihelyjd/FeatureServer/0");
|
featurelayer.on("load", function(e) {
|
this.objName = "JDMC";
|
});
|
this.layerDatas = [];
|
var query = new Query();
|
query.returnGeometry = false;
|
query.outFields = ["JDMC", "OBJECTID"];
|
query.where = "JDMC like '%" + keyword + "%'";
|
featurelayer.queryFeatures(query, function(result) {
|
if(result.features.length > 0) {
|
var X = that.offset().left;
|
var Y = that.offset().top;
|
var inners = "";
|
for(var x in result.features) {
|
inners += "<li id='" + result.features[x].attributes.OBJECTID + "'>" + result.features[x].attributes.JDMC + "</li>";
|
}
|
$('.showInfo ul').html(inners);
|
$('.showInfo').show();
|
}
|
});
|
}
|
|
});
|
|
$(document).click(function() {
|
$('.showInfo ul').html('');
|
$('.showInfo').hide();
|
});
|
|
$(document).unbind('click').on("click", ".showInfo ul li", function(event) {
|
var type;
|
if($(".infoInputDiv2").css("display") == "block") {
|
type = "start"
|
} else if($(".infoInputDiv1").css("display") == "block") {
|
type = "end";
|
} else if($(".infoInputDiv3").css("display") == "block") {
|
type = "nearby";
|
}
|
$("#start").val("");
|
$("#end").val("");
|
$("#nearby").val("");
|
$('.infoDivInputText').val($(this).text());
|
$(".showInfo").hide();
|
AppEvent.dispatchAppEvent(_AppEvent.RUN_WIDGET, "routeWidget");
|
AppEvent.dispatchAppEvent("changeWidgets", {
|
id: "routeWidget"
|
});
|
|
if(point != null) {
|
AppEvent.dispatchAppEvent("infoWindow", {
|
"id": $(this).attr("id"),
|
"type": type,
|
"text": $(this).text(),
|
"position": point
|
});
|
}
|
event.stopPropagation();
|
});
|
var _keyword = "";
|
$('.selectKey').unbind();
|
$('.selectKey').click(function() {
|
$(".selectKey").css("background", "#fff");
|
$(".selectKey").css("color", "#14a1ff");
|
_keyword = $(this).text();
|
$(this).css("background", "#14a1ff");
|
$(this).css("color", "#fff");
|
$('#infoBtnSh').trigger("click");
|
});
|
//弹出窗口的点击事件
|
$(document).on("click", ".threeDiv div", function() {
|
var num = parseInt($(this).attr("class").substr(-1, 1));
|
for(var i = 1; i <= 3; i++) {
|
$(".threeDiv" + i).css("border-top-color", "#ccc");
|
$(".threeDiv" + i).css("color", "#5d5d5d");
|
$(".infoInputDiv" + i).css("display", "none");
|
}
|
$(".threeDiv" + num).css("border-top-color", "#15A1FF");
|
$(".threeDiv" + num).css("color", "#15A1FF");
|
$(".infoInputDiv" + num).css("display", "block");
|
});
|
//周边搜索点击事件
|
$('#infoBtnSh').unbind();
|
$('#infoBtnSh').click(function() {
|
$(".showInfo").hide();
|
AppEvent.dispatchAppEvent("changeWidgets", {
|
id: "searchScenceWidget"
|
});
|
var inputword = $("#nearby").val();
|
var spanword = _keyword;
|
AppEvent.dispatchAppEvent("nearby", {
|
"inputword": inputword,
|
"spanword": spanword,
|
"point": point
|
});
|
});
|
},
|
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 = "";
|
// }
|
}
|
|
});
|
|
});
|
