ArcGIS api for javascript——加载查询结果,悬停显示信息窗口

简介:

转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口

描述

本例在开始和地图交互前执行一个查询任务并加在查询结果。这允许用户鼠标悬停在任意郡县时立即见到InfoWindow。本例改变了信息窗口的默认行为,仅在鼠标单击时显示信息窗口。

QueryTask构造函数接受被查询的图层,即 ESRI sample serverESRI_Census_USA服务的郡县图层(索引号是3)。 注意这和地图使用的不是一个服务。地图使用来自 ArcGIS OnlineESRI_StreetMap_World_2D服务。 通过这种方式能够使用在视觉上匹配的不同服务作为地图和查询任务的服务。 注意本例中,街道地图被显示在没有郡县可见的比例,避免查询任务返回结果和郡县要素视觉冲突的可能性。

查询的where clause限制了结果是在美国南卡罗来纳州的郡县。还要注意 returnGeometry被设置为true以便要素能够被显示在地图上。

//build query filter
var query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];
query.where = "STATE_NAME = 'South Carolina'";

InfoTemplate定义了在信息窗口中属性信息如何被格式化。注意在信息模板内容中能使用HTML。同样,能使用语法${fieldName} 来显示给出记录的字段的值。例如: ${POP2000}.

查询任务返回一个FeatureSet,要素集合是一个包含每个郡县图形的数组。下面的循环给每个图形分配一个 Symbol和信息模板,然后把图形增加到地图上:

for (var i=0, il=featureSet.features.length; i<il; i++) {
          
 var graphic = featureSet.features[i];
 graphic.setSymbol(symbol);
 graphic.setInfoTemplate(infoTemplate);
 map.graphics.add(graphic);
}

当鼠标悬停在图形上时,下面的事件监听器显示信息窗口并且修改符号:

dojo.connect(map.graphics, "onMouseOver", function(evt) {
  ...
  evt.graphic.setSymbol(highlightSymbol);
  map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
});

最后,当鼠标移出图形时,这个监听器是需要删除图形:

dojo.connect(map.graphics, "onMouseOut", function(evt) {
   map.infoWindow.hide();
   evt.graphic.setSymbol(symbol);
 });

  View Code

 




没有整理与归纳的知识,一文不值!高度概括与梳理的知识,才是自己真正的知识与技能。 永远不要让自己的自由、好奇、充满创造力的想法被现实的框架所束缚,让创造力自由成长吧! 多花时间,关心他(她)人,正如别人所关心你的。理想的腾飞与实现,没有别人的支持与帮助,是万万不能的。




    本文转自wenglabs博客园博客,原文链接:http://www.cnblogs.com/arxive/p/7447973.html ,如需转载请自行联系原作者




相关文章
|
2月前
|
JavaScript 前端开发 Java
面试官:你的项目有什么亮点?我:解决了JS脚本加载失败的问题!
面试官:你的项目有什么亮点?我:解决了JS脚本加载失败的问题!
|
3月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
4月前
|
缓存 JavaScript 应用服务中间件
Nginx+Tomcat代理环境下JS无法完全加载问题
Nginx+Tomcat代理环境下JS无法完全加载问题
|
2月前
|
分布式计算 JavaScript 前端开发
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
|
22天前
|
Web App开发 JavaScript NoSQL
深入浅出:构建基于Node.js的RESTful API
在当今快速发展的互联网时代,RESTful API已成为前后端分离架构中不可或缺的一部分。本文旨在为初学者和中级开发人员提供一个清晰、简洁的指南,详细介绍如何使用Node.js构建一个高效、可维护的RESTful API。通过结合实际案例,本文将从API设计理念出发,深入讲解如何利用Express框架及MongoDB数据库实现API的增删改查功能,同时探讨如何通过JWT进行安全认证,确保数据传输的安全性。此外,文章还将简要介绍如何使用Swagger生成API文档,使得API的测试和维护更加便捷。无论你是希望提升现有项目的API设计,还是想从零开始构建一个新项目,本文都将为你提供一条清晰的道路
|
10天前
|
缓存 JavaScript 前端开发
前端工程化:优化JS加载速度
在现代Web应用中,JavaScript已成为必不可少的一部分,但是随着业务复杂度的增加,JS文件的体积也越来越大,导致网页加载速度变慢,影响用户体验。本文将介绍前端工程化的优化策略,以提高JS文件的加载速度。
|
25天前
|
NoSQL JavaScript 前端开发
深入浅出:使用Node.js和MongoDB构建RESTful API
在当今的软件开发领域,构建高效、可扩展的Web服务已成为开发者的重要任务之一。本文将引导读者通过现代JavaScript环境——Node.js,搭配流行的NoSQL数据库MongoDB,一步步构建一个RESTful API。不同于常规的摘要,我们将采用故事化的方式,通过一个虚构的应用“BookFinder”的开发旅程,带领读者理解API设计、数据库交互及安全性考量等关键知识点。无论你是前端工程师希望深化后端知识,还是后端新手寻求实践机会,本文都将提供你所需的指南和启示。
|
2月前
|
Web App开发 Rust JavaScript
Rust 笔记:WebAssembly 的 JavaScript API
Rust 笔记:WebAssembly 的 JavaScript API
88 0
|
2月前
|
移动开发 JavaScript 前端开发
纯JS写一个用苹果序列号查询生产信息的小工具
纯JS写一个用苹果序列号查询生产信息的小工具
|
2月前
|
JavaScript 前端开发 程序员
Js中一些数组常用API总结
Js中一些数组常用API总结

相关产品

  • 云迁移中心