选中FeatureLayer元素并高亮显示
点击FeatureLayer要素会弹出popup弹出框以显示要素的相关内容。这个例子实现点击要素，选中并高亮显示。例子使用ArcGIS API for JavaScript 4.8。
一、代码框架
<html>
<head>
<meta charset="utf-8">
<!-- 移动端优化 -->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>在地图中显示FeatureLayer</title> <!-- JS API 引入 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <!-- 设置样式 -->
<style>
html,body,#viewDiv{
margin:0;
padding:0;
height:100%;
width:100%;
}
</style> <!-- JS API 调用代码 -->
<script> </script>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
二、添加FeatureLayer要素图层并进行render、popupTemplate的设置
<!-- JS API 调用代码 -->
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer", "esri/widgets/Legend", "dojo/domReady!"],function(Map,MapView,TileLayer,FeatureLayer,Legend){
var mapTileLayer=new TileLayer({
url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
});
var map=new Map({
layers:[mapTileLayer]
}); var view=new MapView({
container:"viewDiv",
map:map,
center:[118.79647, 32.05838], //南京城区
zoom:10
}); //创建FeatureLayer
var featureLayer=new FeatureLayer({
url:"https://localhost:6443/arcgis/rest/services/test/南京景点测试/FeatureServer",
renderer:{ //符号渲染器
type:"unique-value",
field:"类别",
uniqueValueInfos:[{
value:"历史古迹",
symbol:{
type:"simple-marker",
color:[115,0,0,0.8], //棕色
size:8
},
label:"历史古迹"
},{
value:"铭记缅怀",
symbol:{
type:"simple-marker",
color:[36,36,36,0.8], //黑色（一点灰）
size:8
},
label:"铭记缅怀"
},{
value:"科教知识",
symbol:{
type:"simple-marker",
color:[230,0,0,0.8], //红色
size:8
},
label:"科教知识"
},{
value:"生活玩乐",
symbol:{
type:"simple-marker",
color:[230,0,169,0.8], //紫色
size:8
},
label:"生活玩乐"
},{
value:"纵情山水",
symbol:{
type:"simple-marker",
color:[0,169,230,0.8], //蓝色
size:8
},
label:"纵情山水"
},{
value:"公园百态",
symbol:{
type:"simple-marker",
color:[76,230,0,0.8], //绿色
size:8
},
label:"公园百态"
}]
}, //符号渲染器结束
popupTemplate:{ //设置popup弹出框
title:"<strong>{景点名}</strong>", //HTML元素在title和下面的content中都是可用的
content:[{ //以文本方式显示字段值，type可以是：text、fields、media、attachment
type:"text", //花括号中写上FeatureLayer的字段名字即可显示出当前要素的这个字段的值
text:"地址：{地址}<br>"+"开放时间：{开放时}<br>"+"票价：{票价}<br>"+
"<hr>"+
"所属风景区：{所属风}<br>"+"星级：{星级}<br>"+"类别：{类别}<br>"+"网址：{网址}"
}]
} //popupTemplate结束
});
map.layers.add(featureLayer); //添加图例控件
var legend=new Legend({ //景点图例
view:view,
layerInfos:[{
layer:featureLayer,
title:"南京景点",
style:"classic" //有两个值，classic和card，但是card没反应？
}]
});
view.ui.add(legend,"bottom-left");
});
</script>
创建了FeatureLayer要素图层并添加到了Map对象上，进行了render、popupTemplate相关内容的设置，添加了图例，关于上面代码的详细内容，请查看：在地图中调用显示FeatureLayer并进行render、popupTemplate、添加图例等相关内容的设置。现在点击地图上的FeatureLayer元素是没有高亮显示的。
三、编写高亮显示的代码（写在<script></script>中添加图例代码的后面）
为视图view添加一个click事件，当点击view时将触发后面的匿名函数，函数有一个click事件返回的参数event，event中包含点击的相关信息。执行函数，弹出提示框，输出“click!”。
//选中要素，高亮显示
view.on("click",function(event){
alert("click!");
});
下面alert输出这个参数event。
//选中要素，高亮显示
view.on("click",function(event){
alert(event);
});
弹出的是object Object，看不出什么内容。
改成console.log()控制台打印输出。
//选中要素，高亮显示
view.on("click",function(event){
console.log(event);
});
分别用鼠标左键、中键、右键点击view，在Console控制台中输出相关内容。其中，左键、中键、右键输出的button属性值分别是0、1、2。（这里包括下文中，用Chrome和FireFox控制台显示的内容不完全一样，Chrome显示的内容更有用些。例子使用Chrome。）
展开一个记录，查看详细内容。可以看到点击处的经度、纬度以及在屏幕上的坐标等信息。
在view.on()中，为view添加hitTest测试，传入event，返回response并调用匿名函数，执行console.log(response)，在控制台打印输出response对象。
//选中要素，高亮显示
view.on("click",function(event){
view.hitTest(event).then(function(response){
console.log(response);
});
});
在view上点击，分别点击空白处和FeatureLayer要素。上面一条记录中，results的数组length长度是0，表示没有点击到FeatureLayer要素；而下方记录中，results数组长度为1，且可以查看results[0]的详细内容，表示点击到了FeatureLayer要素。
我们展开查看results[0]的详细内容。可以看到，其中包含了很多有用的信息，包括results[0].graphic.attributes中FeatureLayer相关字段值、results[0].graphic.geometry中经纬度的信息等。要留意这些信息并注意层级关系，编写代码时会用到。（这些内容在FireFox浏览器中是看不到的..）
在view.hitTest里进行是否点击到FeatureLayer要素的判断。判断条件有两个：①response.results.length是否大于0（即是否等于1） ②response.results[0].graphic是否存在。根据刚才Console控制台输出的信息，可以看到这样判断的依据。
//选中要素，高亮显示
view.on("click",function(event){
view.hitTest(event).then(function(response){
if(response.results.length>0&&response.results[0].graphic){
console.log("点击到了FeatureLayer的要素！");
}
else{
console.log("没有点击FeatureLayer要素..");
}
});
});
在view中我们分别点击空白处和FeatureLayer要素。
在判断完确实点击到FeatureLayer要素后，将这个要素的id值传给selectFeature()函数（稍后定义），在这个函数内进行高亮显示的编写。传入的要素id值是一长串，可以和下面这张图对照着看，注意看层级关系。也可以按照注释掉的部分写，那样可能更清楚点。如果在控制台中查看到FeatureLayer并不包含objectid这个字段（我不知道这种情况会不会发生），可以这样写，起到的效果是一样的：selectFeature(response.results[0].graphic.attributes[featureLayer.objectIdField])。其中，featureLayer是FeatureLayer要素图层的名字，是自己起的，而objectIdField是FeatureLayer的一个属性名字。
//选中要素，高亮显示
view.on("click",function(event){
view.hitTest(event).then(function(response){
if(response.results.length>0&&response.results[0].graphic){
//var feature=response.results[0].graphic;
//selectFeature(feature.attributes["objectid"]);
selectFeature(response.results[0].graphic.attributes["objectid"]);
}
});
});
下面进行selectFeature()的编写。
selectionSymbol就是高亮显示的符号。
function selectFeature(objectid){
var selectionSymbol={
type:"simple-marker",
color:"#FFFF00",
size:10,
outline:{
color:"#E69800",
width:2
}
};
};
为FeatureLayer创建一个查询（query），并将查询条件（query.where）设置成FeatureLayer中要素的id值等于传入的那个id值（即在view中点击到的那个要素的id值）。
function selectFeature(objectid){
var selectionSymbol={
type:"simple-marker",
color:"#FFFF00",
size:10,
outline:{
color:"#E69800",
width:2
}
};
var query=featureLayer.createQuery();
query.where=featureLayer.objectIdField+"="+objectid;
};
执行FeatureLayer的queryFeatures查询，传入刚才定义的query对象（里面包含查询条件）。查询成功后执行匿名函数（带有参数results），打印输出results对象的相关信息。
function selectFeature(objectid){
var selectionSymbol={
type:"simple-marker",
color:"#FFFF00",
size:10,
outline:{
color:"#E69800",
width:2
}
};
var query=featureLayer.createQuery();
query.where=featureLayer.objectIdField+"="+objectid;
featureLayer.queryFeatures(query).then(function(results){
console.log(results);
});
};
在chrome中可以看到，results对象也包含了一些内容，但和之前view.hitTest那边的response对象的内容是不同的。不过也包含attributes、geometry等一些重要的内容。
在queryFeatures().then()的匿名函数中，进行是否点击到要素的判断后，将results.features[0]赋给lightFeature变量，lightFeature对象现在就包含点击到的那个要素的相关信息（attributes、geometry、经纬度信息等），将之前定义的符号赋值给lightFeature的symbol属性。最后view.graphics.add(lightFeature)将lightFeature以graphics的形式按照lightFeature中包含的经纬度信息绘制到view上。
function selectFeature(objectid){
var selectionSymbol={
type:"simple-marker",
color:"#FFFF00",
size:10,
outline:{
color:"#E69800",
width:2
}
};
var query=featureLayer.createQuery();
query.where=featureLayer.objectIdField+"="+objectid;
featureLayer.queryFeatures(query).then(function(results){
if(results.features.length>0){
var lightFeature=results.features[0];
lightFeature.symbol=selectionSymbol;
view.graphics.add(lightFeature);
}
});
};
查看高亮显示的结果：
可以看到，点击到的要素已经被高亮显示出来，但是如果点击多个要素，之前高亮显示的要素并没有去除，下面在view.on()中的开头添加一行代码以解决这个问题。当每次点击到view，不管有没有点击到FeatureLayer的要素，都会执行去除view上所有graphics的操作。
//选中要素，高亮显示
view.on("click",function(event){
view.graphics.removeAll(); //去除view中所有graphics view.hitTest(event).then(function(response){
if(response.results.length>0&&response.results[0].graphic){
//var feature=response.results[0].graphic;
//selectFeature(feature.attributes["objectid"]);
selectFeature(response.results[0].graphic.attributes["objectid"]);
}
});
});
最终高亮显示的代码：
//选中要素，高亮显示
view.on("click",function(event){
view.graphics.removeAll(); //去除view中所有graphics view.hitTest(event).then(function(response){
if(response.results.length>0&&response.results[0].graphic){
//var feature=response.results[0].graphic;
//selectFeature(feature.attributes["objectid"]);
selectFeature(response.results[0].graphic.attributes["objectid"]);
}
});
});
function selectFeature(objectid){
var selectionSymbol={
type:"simple-marker",
color:"#FFFF00",
size:10,
outline:{
color:"#E69800",
width:2
}
}; var query=featureLayer.createQuery();
query.where=featureLayer.objectIdField+"="+objectid; featureLayer.queryFeatures(query).then(function(results){
if(results.features.length>0){
var lightFeature=results.features[0];
lightFeature.symbol=selectionSymbol;
view.graphics.add(lightFeature);
}
});
};
全部代码：
<html>
<head>
<meta charset="utf-8">
<!-- 移动端优化 -->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>在地图中显示FeatureLayer</title> <!-- JS API 引入 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <!-- 设置样式 -->
<style>
html,body,#viewDiv{
margin:0;
padding:0;
height:100%;
width:100%;
}
</style> <!-- JS API 调用代码 -->
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer", "esri/widgets/Legend", "dojo/domReady!"],function(Map,MapView,TileLayer,FeatureLayer,Legend){
var mapTileLayer=new TileLayer({
url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
});
var map=new Map({
layers:[mapTileLayer]
}); var view=new MapView({
container:"viewDiv",
map:map,
center:[118.79647, 32.05838], //南京城区
zoom:10
}); //创建FeatureLayer
var featureLayer=new FeatureLayer({
url:"https://localhost:6443/arcgis/rest/services/test/南京景点测试/FeatureServer",
renderer:{ //符号渲染器
type:"unique-value",
field:"类别",
uniqueValueInfos:[{
value:"历史古迹",
symbol:{
type:"simple-marker",
color:[115,0,0,0.8], //棕色
size:8
},
label:"历史古迹"
},{
value:"铭记缅怀",
symbol:{
type:"simple-marker",
color:[36,36,36,0.8], //黑色（一点灰）
size:8
},
label:"铭记缅怀"
},{
value:"科教知识",
symbol:{
type:"simple-marker",
color:[230,0,0,0.8], //红色
size:8
},
label:"科教知识"
},{
value:"生活玩乐",
symbol:{
type:"simple-marker",
color:[230,0,169,0.8], //紫色
size:8
},
label:"生活玩乐"
},{
value:"纵情山水",
symbol:{
type:"simple-marker",
color:[0,169,230,0.8], //蓝色
size:8
},
label:"纵情山水"
},{
value:"公园百态",
symbol:{
type:"simple-marker",
color:[76,230,0,0.8], //绿色
size:8
},
label:"公园百态"
}]
}, //符号渲染器结束
popupTemplate:{ //设置popup弹出框
title:"<strong>{景点名}</strong>", //HTML元素在title和下面的content中都是可用的
content:[{ //以文本方式显示字段值，type可以是：text、fields、media、attachment
type:"text", //花括号中写上FeatureLayer的字段名字即可显示出当前要素的这个字段的值
text:"地址：{地址}<br>"+"开放时间：{开放时}<br>"+"票价：{票价}<br>"+
"<hr>"+
"所属风景区：{所属风}<br>"+"星级：{星级}<br>"+"类别：{类别}<br>"+"网址：{网址}"
}]
} //popupTemplate结束
});
map.layers.add(featureLayer); //添加图例控件
var legend=new Legend({ //景点图例
view:view,
layerInfos:[{
layer:featureLayer,
title:"南京景点",
style:"classic" //有两个值，classic和card，但是card没反应？
}]
});
view.ui.add(legend,"bottom-left"); //选中要素，高亮显示
view.on("click",function(event){
view.graphics.removeAll(); //去除view中所有graphics view.hitTest(event).then(function(response){
if(response.results.length>0&&response.results[0].graphic){
//var feature=response.results[0].graphic;
//selectFeature(feature.attributes["objectid"]);
selectFeature(response.results[0].graphic.attributes["objectid"]);
}
});
});
function selectFeature(objectid){
var selectionSymbol={
type:"simple-marker",
color:"#FFFF00",
size:10,
outline:{
color:"#E69800",
width:2
}
}; var query=featureLayer.createQuery();
query.where=featureLayer.objectIdField+"="+objectid; featureLayer.queryFeatures(query).then(function(results){
if(results.features.length>0){
var lightFeature=results.features[0];
lightFeature.symbol=selectionSymbol;
view.graphics.add(lightFeature);
}
});
};
});
</script>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
全部代码
例子使用的链接分享：https://pan.baidu.com/s/1fnyu0OjWx9FUvUs1BGvz3g
因为这个例子中ArcGIS Server发布的是本地服务，所以在别的电脑上无法访问例子中FeatureLayer的url，可以自己发布一个服务再进行尝试。
选中FeatureLayer元素并高亮显示的更多相关文章
- 使用 Jquery-UI 实现一次拖拽多个选中的元素操作
项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序.考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制.拖拽.释放.排序.选择等效果.而在 ...
- 根据on，获取选中的元素
打钩的元素有个on的class. // 礼物发送 function send_gift() { var type,diamond,name,id; var list = $('.live .on'); ...
- is_selected()检查是否选中该元素
is_selected()检查是否选中该元素,一般针对单选框,复选框,返回的结果是bool 值, 以百度登录页面为案例,来验证"下次自动登录"是否勾选,默认是勾选的,返回的结 果应 ...
- JQuery中的id选择器含有特殊字符时，不能选中dom元素
1.jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素.但是:当id含有特殊字符的时候,是不能选中的 2.jquery的id选择器只支持,单词.阿拉伯数字.下 ...
- jQuery为图片添加链接(创建新的元素来包裹选中的元素)
主要用到 wrap()函数 http://www.w3school.com.cn/jquery/manipulation_wrap.asp 这个函数是创建新的的元素去包裹所执行这个方法的元素 如下例子 ...
- js实现选中当前元素并改变颜色（js、jq的各种循环）
1.jq伪类选择器(:not)的使用 2.js jq运用数组循环 3.checkbox的选中循环事件 4.select的选中事件 <select class="ssss" o ...
- js选中当前菜单后高亮显示的导航条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- stylus选中hover元素的兄弟元素下的子元素
stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...
- selenium+python对页面元素进行高亮显示
调用js方法: execute_script(script,*args) Arguments对象: 类数组对象,代表传给一个function的参数列表,当前函数的内置属性,其长度是由实参个数决定而不是 ...
随机推荐
- Putty连接TPYBorad v102 开发板教程
第一步:下载Putty软件 http://www.micropython.net.cn/download/tool/3.html 第二步:通过USB数据线将TPYBorad与PC相连 第三步:打开设备 ...
- jennifersoft,phantomjs
http://jennifersoft.com/en/ Real Value of APM (Application Performance Monitoring) http://npm.taobao ...
- SpringCloud Eureka 报错 无法启动问题
1.SpringCloud Eureka 报错 无法启动基本上都是spring boot的版本与spring cloud的版本不匹配导致的. <dependencyManagement> ...
- 用secureCRT连接虚拟机中的Ubuntu系统，出现“远程主机拒绝连接”错误
因为我的Ubuntu中未安装ssh服务,终端下运行命令: sudo apt-get install openssh-server 之后重启一下sshd服务: sudo service sshd res ...
- Eclipse中Maven Install时发生错误
问题描述 要把一个本地包保存进本地maven库中, 所以对该project执行了run as => Maven Install, 结果报下面的错误. 解决办法 1. 通过命令窗口手动创建这两个文 ...
- rabbitmq 脑裂(网络分区)
1.产生的原因 https://blog.csdn.net/zyz511919766/article/details/45198055 2.相关配置.如何规避 https://blog.csdn.ne ...
- Java中能否利用函数参数来返回值
转自https://blog.csdn.net/da_da_xiong/article/details/70039532 我们在写代码时通常会遇到一种情况,就是我们可能希望在一个函数操作完成后返回两个 ...
- Mac下显示隐藏的文件
显示隐藏文件defaults write com.apple.finder AppleShowAllFiles -bool true; KillAll Finder恢复隐藏文件 defaults wr ...
- 解锁 vmware esxi 6.7 并安装 mac os 10.13
1.安装 esxi 6.7 2.下载 unlocker 2.1.1.zip 3.上传 unlocker 2.1.1.zip esxi的磁盘中 4.开启esxi的ssh登录 5.使用 ssh 登录 es ...
- BZOJ_3653_谈笑风生_树状数组
BZOJ_3653_谈笑风生_树状数组 Description 设T 为一棵有根树,我们做如下的定义: ? 设a和b为T 中的两个不同节点.如果a是b的祖先,那么称“a比b不知道 高明到哪里去了”. ...