选中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的参数列表,当前函数的内置属性,其长度是由实参个数决定而不是 ...
随机推荐
- Python_字符串的大小写变换
''' lower().upper().capitalize().title().swapcase() 这几个方法分别用来将字符串转换为小写.大写字符串.将字符串首字母变为大写.将每个首字母变为大写以 ...
- Python_heapq
import heapq #导入heapq堆模块 import random data = random.sample(range(1000),10) print(data) heapq.heapif ...
- 集群搭建（一）克隆虚拟机静态IP设置
[抛出问题] 当在搭建集群的时候,我们会将一个安装好相关程序的虚拟机进行克隆,克隆之后,我们会发下一些问题:就是原先的eth0 网卡不见了 原先的网卡 而克隆之后的网卡 会发现原来的网卡eth0 变为 ...
- HTTP相关:TCP/IP、DNS
最近在看HTTP的书,看得有点慢,而且断断续续的,很多东西看完就忘了.知识点多且零散,感觉要多看几遍才能消化. TCP/IP协议族按层次分为4层: 应用层: 应用层决定了向用户提供应用服务时通信的活动 ...
- Myeclipse10.7.1 导出war包报错
myeclipse10.7.1 导出war问题解决办法myeclipse10破解后,导出war包时报"SECURITY ALERT: INTEGERITY CHECK ERROR" ...
- mysql explain中key_len值的说明
在mysql 的explain的输出中,有个key_len的列,其数据是如何计算的呢? 在看到了淘宝的dba以前发布的博客后,我在mysql 5.6上操作一番,了解了一点. 环境准备 – 创建表. u ...
- Switch在swift中的使用
switch的简单使用: 相比 C 和 objective - C 中的 switch 语句,Swift 中的 switch 语句不会默认的掉落到每个 case 的下面进入 另一个 case.相反,第 ...
- sql server 高可用故障转移(2)
添加网卡心跳线 目标: 二台sql服务器需要添加网卡心跳线,用于sql server内部数据传输 计算机名 Ip信息 心跳线 Hsr1 192.168.2.50 (ipv4 ip) 255.25 ...
- 利用javaScript实现鼠标在文字上悬浮时弹出悬浮层
在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失.比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: < ...
- ubuntu16.04如何安装搜狗输入法
1 . 首先我们需要先来下载支持linux版本的搜狗输入法安装包,这里我们先查看下自己的ubuntu系统是什么版本的,这里我们可以在右上角的那个齿轮图标点击查看"系统设置",在里面 ...