格式化信息窗口内容—ArcGIS API for JavaScript

InfoTemplate

类用于定义一个信息窗口的内容和标题模板。如果您使用的是2.2或更高版本的API，则可以使用字符串或函数定义内容和标题。如果版本低于2.2，你只能使用字符串。

调整信息窗口大小

默认情况下，信息窗口的内容区域为250像素宽，100像素高。如果要显示的内容大于此尺寸，将自动出现滚动条。要调整信息窗口的大小，可以使用resize方法指定新的宽度和高度。

map.infoWindow.resize(300, 200);

使用字符串

要使用字符串格式化内容，您将创建一个字符串值来定义要显示的内容。该字符串可以包括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);

使用自定义函数

有时你想要在信息窗口中显示的内容你只是文本，比如你可能希望显示图表，分类选项卡，或在信息窗口中使用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;
}

也可以在每个属性的基础上使用一个方法。下面的示例计算百分比变化，并根据正或负变化显示向上或向下箭头。

var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("Population in ${NAME}");
infoTemplate.setContent("<b>2007 :D: </b>${POP2007:compare}<br/>" +
"<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" +
"<b>2000: </b>${POP2000:NumberFormat}<br/>" +
"<b>2000 density: </b>${POP00_SQMI:NumberFormat}");

compare = function (value, key, data) {
var result = "", diff, pctChange;

switch (key) {
case "POP2007":
result = value > data.POP2000 ? "images/up.png" : "images/down.png";
diff = data.POP2007 - data.POP2000;
pctChange = (diff * 100) / data.POP2000;
break;

case "POP07_SQMI":
result = value > data.POP00_SQMI ? "images/up.png" : "images/down.png";
diff = data.POP07_SQMI - data.POP00_SQMI;
pctChange = (diff * 100) / data.POP00_SQMI;
break;
}

return number.format(value) +
"   <img src='" + result + "'>" +
"  <span style='color: " +
(pctChange < 0 ? "red" : "green") + ";'>"
+ number.format(pctChange, { places: 3 }) +
"%</span>";
};

2、引用HTML元素

通过使用

dojo/dom-construct.create

程序创建HTML元素或创建Dojo dijit并返回dijit的dom节点来返回对HTML元素的引用。



dojo / dom-construct.create包含document.createElement和appendChild方法，并在浏览器之间规范化差异。使用dom-construct.create创建元素的示例：

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

另一个选择是创建一个dijit并返回其dom节点。如上图所示，其中创建了多个布局dijits，并将其用作信息窗口的内容。要注意的是，格式化函数返回dijit的domNode，而不是dijit本身。

var tc = new TabContainer({
style: "width:100%;height:100%;"
}, domConstruct.create("div"));

return tc.domNode;

本文第一时间发布在微信公众号：GISXXCOM



GIS技术交流：GISGO（http://www.gisgo.top）