格式化信息窗口内容—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)
格式化信息窗口内容—ArcGIS API for JavaScript相关推荐
- 创建类(点击获得位置信息)—ArcGIS API for JavaScript
不知道大家有没有这种体验,我们开始学web开发的时候,会把HTML.JavaScript.CSS代码都堆叠在一个HTML文件中,慢慢地,随着代码量的增多,不同的代码堆叠在一起显得很乱,我们开始把htm ...
- 【百度地图API】建立全国银行位置查询系统(五)——如何更改百度地图的信息窗口内容?...
[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 原文: [百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房. ...
- ESRI官网关于Javascript的内容(1)__获取ArcGIS API for Javascript
前言 最近发现自己又可以静下心来学习了,所以赶紧去ESRI的开发官网上看了看,虽然英文我慢慢看也看得懂,但是我估计很多人是不想看或者说看不懂的,所以我觉得还是在我静的下心来的时候为自己和大家翻译一下~ ...
- 初学ArcGIS API for JavaScript
初学ArcGIS API for JavaScript 对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在<WebGIS开发从基础到实践>讲解的 ...
- ArcGIS API for JavaScript 开发笔记
1.Vue.js 中引入 ArcGIS API for JavaScript 4.x 安装 esri-loader npm install --save esri-loader 引入 ArcGIS A ...
- ArcGIS API for JavaScript开发之PopupTemplate
ArcGIS API for JavaScript 开发 PopupTemplate (1)actions (2)content (3)expressionInfos (4)fieldInfos (5 ...
- ArcGIS API for JavaScript之基础篇(二)
ArcGIS API for JavaScript之基础篇(二) 上一篇文章介绍了Map MapView SceneView的基本知识以及简单的demo.最近几天学习了WebMap WebScene ...
- 地理信息系统(GIS)系列——ArcGIS API for JavaScript 3.9(1)
Visual Studio 智能提示配置:将以下 JavaScript 文件引入项目中 arcgis_js_v39_sdk\arcgis_js_api\sdk\jshelp\jsapi_vsdoc12 ...
- ArcGIS API for JavaScript 3.23汉化(下)
ArcGIS API for JavaScript 3.23汉化(下) 4更为具体 一.Default API configurations 默认API配置 三.Retrieve data from ...
最新文章
- graphs菜单_图形用户界面菜单全面解析
- 切版网上线,启用qieban.cn
- 请注意Tokyo Tyrant (ttserver)在大数据量下的不稳定
- CxImage图像处理类库说明3(转载)
- linux下in命令
- android 4.4 OpenGL实现库的加载规则
- ccd相机好修吗_「CCD购买指南 」CCD废片大公开
- VS2013 未找到与約束ContractName
- 余承东硬刚 iPhone11;苹果推送正式版 iOS 13;php-nsq 3.4.3 线上稳定版发布 | 极客头条...
- 综述:全国软考首遭试卷丢失 20万考生措手不及
- sysbench压测cpu,io,memory,threads,mutex
- 2020 JUSTCTF F@k3 0ff1c@l REVERSE WP
- 【ThreeJS基础教程-高级几何体篇】2.5 加载GLTF/GLB格式文件,Draco压缩文件的获取与加载
- Centos7安装字体全过程
- FileZilla FTP Server 安全加固
- 微信小程序图片裁剪插件image-cropper
- 华为云ECS服务器中通过docker部署ELK-kibana
- sja1000 中断_SJA1000程序
- 《当程序员的那些狗日日子》后记
- 大数据-Zookeeper:对大数据平台中的各个模块进行集中配置和调度【原理与搭建】
热门文章
- python api接口调用_python 调用有道api接口的方法
- 如何使用IEDA连接数据库
- 实验3-7 统计学生成绩 (15 分)
- python中int的用法归类
- html浮动之后怎么隐藏,div浮动之后排在一行,在把浮动去掉,把div用display设置成inline-block之后就不能排在一行了。...
- 计算机科学与技术python方向_专业解读丨计算机科学与技术
- 不是外部命令也不是可运行程序_手机运行内存4G和6G有什么不同?差别不是一般大...
- JSCore的基本使用
- sphinx结合scws的mysql全文检索
- 【git】git提交忽略不必要的文件或文件夹