esri infowindow 样式修改与格式化定制

1、修改默认的esriPopUp的样式

/*信息窗口头部样式*/   
 .esriPopup .titlePane{   
 	//your style
 }
 /*  -信息窗口最大化按钮样式*/  
 .esriPopup .titleButton.maximize{  
 	//your style
 }
 /*  信息窗口容器title关闭按钮样式 */ 
 .esriPopup .titleButton.close{  
  	//your style
  	 }  
 /*信息窗口容器样式*/  
 .esriPopup .contentPane{   
  	//your style
  	 } 
/*信息窗口阴影样式*/  
.esriPopup .esriPopupWrapper{  
  	//your style
}  

2、设置infoWindow的content

arcgis中infoWindow类提供了一个setContent()方法，可以格式化信息窗口内容。参考API，2.2或更高版本，可以使用字符串或函数定义内容和标题。在2.2版之前，只能使用字符串。

2.1 窗口大小调整

默认情况下，信息窗口的内容区域宽250像素，高100像素。如果要显示的内容大于此大小，则会滚动。要调整信息窗口的大小，可以使用resize()方法指定新的宽度和高度。

map.infoWindow.resize(300,200); 

2.2 使用字符串

要使用字符串格式化内容，只需创建一个字符串值，用于定义要显示的内容。该字符串可以包括HTML标记，属性占位符和格式化函数。

（1）连接字符串

map.infoWindow.setTitle("Coordinates");
map.infoWindow.setContent("lat/lon : " + latitude.toFixed(2) + ", " + longitude.toFixed(2));

（2）使用HTML

map.infoWindow.setTitle("HTML");
map.infoWindow.setContent("This content uses <strong>HTML</strong> for formatting.<p>This is a paragraph</p><p>Another Paragraph</p>");

（3）占位符（字符串替换）

当图形或要素图层具有信息模板时，API会自动使用该信息模板在选择要素时构建信息窗口内容。在信息模板中，表示的占位符$用于指定要显示的属性。在运行时，将进行替换，并使用所选要素的实际属性值替换占位符。在下面的代码中，里面的值${}对应于属性字段名称。在屏幕截图中，所选要素的值将替换关联的占位符。

var content = "<b>Status</b>: ${STATUS}" +
  "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +
  "<br><b>Total Acres</b>: ${APPROXACRE}" +
  "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
var infoTemplate = new InfoTemplate("${FIELD_NAME}", content);

2.3 使用自定义函数

有时我们希望在信息窗口中显示多个文本，或者希望显示图表，将信息分类到选项卡或在信息窗口中使用Dojo小部件。在这种情况下，可以编写一个返回字符串，HTML元素引用或延迟对象的函数。单击图形时，将执行该功能，并在信息窗口中显示返回值。该函数作为参数传递对当前图形的引用，该参数提供对图形属性信息的访问。请注意，自定义格式设置功能必须是全局可访问的。

（1）返回一个字符串

使用自定义函数会绕过信息窗口和信息模板的默认字符串替换，因此从自定义函数返回的字符串不应包含占位符。要使用要素属性，请直接在自定义函数中访问它们。下面的示例使用图形的qSpecies属性的值来构建URL。

var template = new InfoTemplate();
template.setContent(getTextContent);

function getTextContent(graphic) {
  var attr = graphic.attributes.qSpecies.replace('"', "").split("::");
  var commonName = string.trim((attr[1] === "") ? attr[0] : attr[1]);
  var scientificName = string.substitute("${0}_${1}", attr[0].split(" "));
  var plantDate = locale.format(new Date(graphic.attributes.PlantDate), {
    selector: 'date',
    datePattern: 'MMMM d, y'
  });
  return "<a href=https://en.wikipedia.org/wiki/" +
    scientificName + "><i>" + string.substitute("${0} ${1}", attr[0].split(" ")) +
    "</i></a><br>Maintained By: " + graphic.attributes.qCaretaker +
    "<br>Planted: " + plantDate;
}

（2）引用HTML元素

通过使用dojo/dom-construct.create以编程方式创建HTML元素或创建Dojo dijit并返回dijit的dom节点，返回对HTML元素的引用。

require(["dojo/dom-construct"], function(domConstruct){
  var node = domConstruct.create("div", { innerHTML: "Text Element inside an HTML div element." },referNode);
});

（2）Deferred对象

在某些情况下，我们要显示的内容无法立即显示。它可能是您需要从服务器下载的内容esri/request，它返回dojo/Deferred的实例。单击某个要素时，自定义函数会返回延迟。解决延迟后，信息窗口将相应更新。

使用API​​ 3.4或更高版本时，不支持此工作流，因为esri/dijit/Popup实例是地图的默认infoWindow。要使用带有infoWindow内容的延迟，您必须使用实例esri/dijit/InfoWindow作为地图的infoWindow，或者监听地图单击事件，启动异步操作，然后调用Popup.setContent()以及Popup.setTitle()何时完成异步操作。

单击地图上的折线时，会将其作为输入发送到生成高程配置文件的服务器对象扩展（SOE）。配置文件可用后，它将显示在信息窗口中。

function getTextContent(graphic) {
  var geometry = webMercatorUtils.webMercatorToGeographic(graphic.geometry);
  soeParams.InputPolyline = JSON.stringify(geometry.toJson());
  var def =  esriRequest({
    url: soeURL,
    content: soeParams,
    callbackParamName: "callback",
    load: function(fset) {
      return "<img src='" + fset.profileImageUrl + "'/>";
    }
  });
  return def;
}

3、实例

本实例中使用字符串格式化信息窗口，并在字符串中使用了HTML语句。代码如下：

infoTemplate.setTitle("${nickName}");
 var str ;
 var str1,str2
var headPath = position.approvalVo.headFilePath || "./images/person.jpg";

 str1 = '<div class="comment-phone">${phone}<span ><img style="height: 40px;" src='+headPath+'></span></div><br/>'+
                            '<div style="font-size:14px;font-weight:bold;height:auto;">${content}</div><br/>';
if(position.adoptStatus == 0){
	str2 = '<div class="comment-time">${createTimeStr}</div>'+
                '<div class="comment-foot">审批</div><br/>';
 }else{
	str2 = '<div class="comment-time">${createTimeStr}<span></span></div>'+
               '<div class="comment-foot">查看</div><br/>';
}
str = str1 + str2;
infoTemplate.setContent( str );
locateGra.setInfoTemplate(infoTemplate);

最终渲染出的infoWindow界面如下图所示：