技术专栏

gis培训

③JavaScript API数据可视化:增强选项(译)

作者:李锐(译) 邮箱:lr@lreis.ac.cn 发布时间:2014-12-19 09:31:14 阅读(2069)

原作者:Jerome Yang(ArcGISResources)

         在前面的文章中我们已经学习了使用JavaScriptAPI“如何显示数据”和“如何基于唯一值符号化数据”。可能你已经对在地图上展示数据感到满意了,但你的用户可能希望看到更多的东西,比如在哪可以看到图例,怎样可以看到地图上要素的更多信息?

在本文中,你将学到:

  1. 1.        使用Pop-up展示更多信息

  2. 2.       添加图例

  3. 3.        点击图形(graphic)触发操作

  4. 1.       使用Pop-up展示更多信息(Sample)

网络地图的用户总数很直观的去点击一个图形(graphic),期望获得更多的信息。在JavaScript API的要素图层中这是很容易实现的。只需要在创建要素图层时在构造器中传入一个 InfoTemplate即可,然后就能够使用pop-up了。

var infoTemplate = newInfoTemplate("${Name}", "${Type}
${Visitor} visits in2013");
var layer = newFeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0",{
  outFields: ["Name", "Type","Visitor"],
  infoTemplate: infoTemplate
});

一些关于信息框内容的有用的技巧:

  1. 如上面的代码那样,可以在弹出框中使用${}来获取数据;

  2. 当你想插入千位分隔符的时候,使用${:NumberFormat}就可以格式化数字;

  3. 想完成更复杂的内容格式,请阅读Format info window content

你也可以选择在info template的第二个参数中传入一个函数(例子):

说明: visualization-2-2

var infoTemplate = newInfoTemplate("${Name}", function(graphic){
  //the graphic where user clicks
  var dailyVisit = graphic.attributes.Visitor/365;
  dailyVisit = Math.round(dailyVisit);
  return dailyVisit + " visits per day in 2013";
});

2.       添加图例(Sample)

说明: visualization-2-3

图例是一些传统地图的读者期望有的部件。Esri的图例部件可以用一个标签和一些符号来显示地图中的一些或所有图层的符号信息。你可以通过下面这些代码来为选择的图层添加图例。

var legend = new Legend({
  map: map,
  layerInfos: [{
    layer: layer
  }]
}, "legend");
legend.startup();

Don’t like layer titledisplayed by default? Add the title property into the layerInfos array.

layerInfos: [{
  layer: layer,
  title: "National Park Statistics 2013"
}]

因为legend是一个部件,你需要提供一个DOM节点来容纳它。请确保在HTML中创建一个DOM节点并通过节点的ID来链接到部件。可以在这里(示例)查看配置应用布局。

3.       点击图形(graphic)触发操作(Sample)

说明: visualization-2-4

当用户点击一个图形(graphic)时,你可能不希望显示一个弹出框而是触发其他操作,如改变符号、执行查询操作或者发送HTTP请求。无论你希望用户做什么,.on(“click”)事件可以仅通过点击图形(graphic)就能帮你灵活的完成这些操作。

layer.on("click",function(evt){
  console.log(evt.graphic);

});

我们现在来看一个常用的案例:选择你点击地点一定距离内的所有图形(graphic)。同样使用国家公园服务National Park Service units,我们的目的是让用户选择一个公园然后查看200英里范围内其他的公园。

为实现这个功能,我们在要素图层中使用Query类的.queryFeatures() 方法:

layer.on("click",function(evt){
  //query the layer with 100-mile buffer
  var query = new Query();
  query.geometry = evt.graphic.geometry;
  query.distance = 200;
  query.units = "miles";

  //start query
  layer.queryFeatures(query).then(function(featureSet){
    //get all returned graphics
    var graphics = featureSet.features;
    ...
  });
});

参考这个示例查看如何高亮选中的图形和让应用正常工作。

文章预告

可视化自己的数据还有很多其他的选择。在后面的文章中,我们将尝试用不同大小和颜色符号来展示定量数据。你可以用这些技术分别来创建等值线图和比例符号。

作者:李锐(译) 邮箱:lr@lreis.ac.cn

HiGIS技术交流QQ群:336076300

关键词:js api,arcgis,esri,webgis,入门教程,Pop-up,符号化,唯一值

中科地理信息系统培训中心-原创文章
转载请注明出处:www.higis.cn/Tech/tech/tId/86/

创新地理知识,共享地理价值

http://www.higis.cn

中科地理信息系统培训中心

关于我们

gis培训

苏州高新区中科地理信息系统培训中心是“国家专业技术人员继续教育基地”指定培训点,是3S方向唯一指定的培训点。同时也是国内唯一获得Esri授权的ArcGIS专业培训与认证机构,为广大用户提供ArcGIS培训、开发和咨询服务,中心已经为中国用户服务20年...详细情况...

联系方式

Email:actc@lreis.ac.cn
苏州总部电话: 0512-68076858
        0512-68075672
北京分部电话: 010-64855687
苏州总部地址:苏州市高新区科灵路78号苏高新软件园5号楼3层
北京分部地址:北京市朝阳区大屯路甲11号中科院地理所2406

顶部 返回
地理信息系统国际培训中心