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

旧城等待， 2022-06-11 01:44 107阅读 0赞

`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));

![format-infowindow1.png][]

**2、HTML**

map.infoWindow.setTitle("HTML");
 map.infoWindow.setContent("This content uses HTML for formatting.This is a paragraphAnother Paragraph");

![format-infowindow2.png][]

**3、占位符（字符串替换）**  
当图形或要素图层具有信息模板时，API会自动使用该信息模板来在选择要素属性来构建信息窗口内容。在信息模板中，用占位符`${}`用于指定要显示的属性。在运行时，替换发生，占位符被替换为所选要素的实际属性值。在下面的代码中，值`${}`对应于属性字段名称。

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

![format-infowindow3.png][]

## 使用自定义函数 ##

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

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

![format-infowindow4.png][]

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

![format-infowindow5.png][]

**2、引用HTML元素**  
通过使用`dojo/dom-construct.create`程序创建HTML元素或创建Dojo dijit并返回dijit的dom节点来返回对HTML元素的引用。  
![format-infowindow6.png][]  
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技术资源交流分享，请关注我吧][GIS]  
GIS技术交流：[GISGO（http://www.gisgo.top）][GISGO_http_www.gisgo.top]

[format-infowindow1.png]: /images/20220611/f234b6b8a71143d78e81d49631a06892.png
[format-infowindow2.png]: /images/20220611/cdff6af2722347c59d4f528cae5d9bc8.png
[format-infowindow3.png]: /images/20220611/646b4f57a75d446fbaeef851aae1c943.png
[format-infowindow4.png]: /images/20220611/129fbd13c5374ff0804b40ae0f74c728.png
[format-infowindow5.png]: /images/20220611/d083d29f651a4f158639714f49764b29.png
[format-infowindow6.png]: /images/20220611/dd7d8e665fc1442387cbf207a742cb35.png
[GIS]: http://gisxx.com/css/images/wx.jpg
[GISGO_http_www.gisgo.top]: http://www.gisgo.top/