我加载的是ArcGIS Server本地发布的FeatureService，ArcGIS API for JS4.7记载FeatureLayer时，在二维需要通过代码启用WebGL渲染，在三维模式下，则不需要。不启用WebGL，则无法显示进行高亮显示。我在二维模式下，高亮接口是没有生效，因此，二维模式下，自己写了一个高亮，三维还是用的自带的高亮。

二维模式代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>要素服务</title>
<link type="text/css" rel="stylesheet" href="http://localhost/arcgis/esri/css/main.css"/>
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<script>
//高亮显示只能在WebGL渲染时才能生效，该功能目前处于beta阶段
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
}
</script>
<script src="http://localhost/arcgis/"></script>
</head>
<body>
<div id="viewDiv"></div>

<script>
require(["esri/Map", "esri/views/MapView", "esri/config", "esri/layers/FeatureLayer", "dojo/domReady"], function (Map, MapView, esriConfig, FeatureLayer) {
esriConfig.request.corsEnabledServers.push("localhost:6443");//设置地图服务器已允许跨域
esriConfig.request.corsEnabledServers.push("localhost:63342");
var map = new Map({
// basemap: "streets"//ESRI提供的底 图
basemap: "dark-gray"
});
//二维视图，并初始化视图位置
var view = new MapView({
container: "viewDiv",
map: map,
extent: {
xmin: 111.27418783887504,
ymin: 27.65361115167269,
xmax: 119.18589568326072,
ymax: 30.663629324047992,
spatialReference: 4326
}
});
//乡镇级属性模版
var popupTemplate = {
title: "乡镇数据",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "name",
label: "行政单位名称",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "code",
label: "行政单位代码",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "supercode",
label: "上级行政单位代码",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "level",
label: "行政单位等级",
format: {
places: 0,
digitSeparator: true
}
}]
}]
};
var town = new FeatureLayer({
url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/0",
outFields: ["*"],
popupTemplate: popupTemplate
});//乡镇级数据
popupTemplate.title = "县级数据";
var county = new FeatureLayer({
url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/1",
outFields: ["*"],
popupTemplate: popupTemplate
});//县级数据
popupTemplate.title = "市级数据";
var city = new FeatureLayer({
url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/2",
outFields: ["*"],
popupTemplate: popupTemplate
});//市级数据
popupTemplate.title = "省级数据";
var province = new FeatureLayer({
url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/3",
outFields: ["*"],
popupTemplate: popupTemplate
});//省级数据
map.add(town);
map.add(county);
map.add(city);
map.add(province);
//点击视窗进行碰撞检测，检测点击的目标graphic
view.on("click", function (evt) {
view.hitTest(evt).then(function (response) {
var result = response.results[0];
if (result && result.graphic) {
console.log(result);
var graphic = result.graphic;
//自定义高亮
//这里的几何图形是面状，配置graphic的symbol为fillSymbol
graphic.symbol = {
type: "simple-fill",
color: "red",
outline: {
color: [128, 128, 128, 0.5],
width: "0.5px"
}
};
view.graphics.removeAll();//清除上一次点击目标
view.graphics.add(graphic);//添加新的点击目标
}
})
});
})
</script>
</body>
</html>
二维模式效果图：

三维模式代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>要素服务</title>
<link type="text/css" rel="stylesheet" href="http://localhost/arcgis/esri/css/main.css"/>
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<script src="http://localhost/arcgis/init.js"></script>
</head>
<body>
<div id="viewDiv"></div>
<script>
require(["esri/Map", "esri/views/SceneView", "esri/config", "esri/layers/FeatureLayer", "dojo/domReady"], function (Map, SceneView, esriConfig, FeatureLayer) {
esriConfig.request.corsEnabledServers.push("localhost:6443");//设置地图服务器已允许跨域
esriConfig.request.corsEnabledServers.push("localhost:63342");
var map = new Map({
basemap: "dark-gray"
});
//二维视图，并初始化视图位置
var view = new SceneView({
container: "viewDiv",
map: map,
extent: {
xmin: 111.27418783887504,
ymin: 27.65361115167269,
xmax: 119.18589568326072,
ymax: 30.663629324047992,
spatialReference: 4326
}
});
//乡镇级属性模版
var popupTemplate = {
title: "乡镇数据",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "name",
label: "行政单位名称",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "code",
label: "行政单位代码",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "supercode",
label: "上级行政单位代码",
format: {
places: 0,
digitSeparator: true
}
}, {
fieldName: "level",
label: "行政单位等级",
format: {
places: 0,
digitSeparator: true
}
}]
}]
};
var town = new FeatureLayer({
url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/0",
outFields: ["*"],
popupTemplate: popupTemplate
});//乡镇级数据
popupTemplate.title = "县级数据";
var county = new FeatureLayer({
url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/1",
outFields: ["*"],
popupTemplate: popupTemplate
});//县级数据
popupTemplate.title = "市级数据";
var city = new FeatureLayer({
url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/2",
outFields: ["*"],
popupTemplate: popupTemplate
});//市级数据
popupTemplate.title = "省级数据";
var province = new FeatureLayer({
url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/3",
outFields: ["*"],
popupTemplate: popupTemplate
});//省级数据
map.add(town);
map.add(county);
map.add(city);
map.add(province);
})
</script>
</body>
</html>
三维模式效果图：

---------------------
作者：GIS小博工作室
来源：CSDN
原文：https://blog.csdn.net/GISuuser/article/details/81246825
版权声明：本文为博主原创文章，转载请附上博文链接！

ArcGIS API for JS4.7加载FeatureLayer，点击弹出信息并高亮显示的更多相关文章

  1. ArcGIS API for Silverlight中加载Google地形图（瓦片图）

    原文:ArcGIS API for Silverlight中加载Google地形图(瓦片图) 在做水利.气象.土地等行业中,若能使用到Google的地形图那是再合适不过了,下面就介绍如何在ArcGIS ...

  2. arcgis api for JavaScript _加载三维图层(scene layer)

    arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript  4.x 版本增加对三维的支持. 关于三维图层(sce ...

  3. 练习PopupWindow弹出框之实现界面加载的时候显示弹出框到指定的view下面--两种延迟方法

    今天在练习PopupWindow弹出框的时候,打算在界面加载的时候将弹出框展现出来并显示在指定的view下面. 初步方法是直接在OnResume方法里面直接执行showPopupWindows方法. ...

  4. QT常用代码之加载动态库和弹出对话框

    作者:朱金灿 来源:http://blog.csdn.net/clever101 加载动态库的代码: typedef void (*Execute)(); // 定义导出函数类型 QString st ...

  5. ArcGis API for JavaScript学习——加载地图

    ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...

  6. CEF加载FLASH插件时弹出CMD命令行窗口的问题

    这个是flash插件的一个bug,CEF(chromium系列浏览器)关闭sandbox第一次加载flash插件就会跳出这样的一个提示,在Google官方也看到了chromium的issue: 解决方 ...

  7. ArcGIS API for Windows Phone开发实例(4):点击查看超市信息 --- 关于使用InforWindow

    菩提老王的葡萄架:作品 地址:http://blog.newnaw.com/?p=696

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

    转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...

  9. arcgis android 中shapefile的加载

    前言 本文为大家分享arcgis android 中shapefile的加载,默认你有java环境,懂一定的android基础知识,默认你已经安装android studio.如缺乏以上环境和知识,请 ...

随机推荐

  1. element-ui2源码修改小问题

    最近element-ui升级到2了,添加了不少功能,可喜可贺,可喜可贺! 然而,产品的需求依然那么刁钻,上传与删除图片还是要去改源码,为了同时用新的ele,决定在2中改源码 然而,遇到问题了. 一开始 ...

  2. 客服端与服务端APP支付宝支付接口联调的那些坑

    根据支付宝官方提供的文档的建议: TIPS:这一步应在商户服务端完成,商户服务端直接将组装和签名后的请求串orderString传给客户端,客户端直接传给SDK发起请求.文档和Demo是为了示例效果在 ...

  3. WCF、WebAPI、WCFREST、WebService之间的区别总结（实用）

    在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Services.我分享一下我对 ...

  4. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

  5. Codeforces687C(SummerTrainingDay03-D DP)

    C. The Values You Can Make time limit per test:2 seconds memory limit per test:256 megabytes input:s ...

  6. php获取本月、上月、上上月、今日、昨日、上周的起始时间

    // 本月起始时间: $begin_time = date ( "Y-m-d H:i:s", mktime ( 0, 0, 0, date ( "m" ), 1 ...

  7. var和const和let的区别

    简述: 1.前端的变量申明,可以用到var,ES6的const(衡量)/let(变量) 2.在ES5用的都是var,到ES6之后,也就是2015年开始出现const/let. var 不会报错,有声明 ...

  8. win7下解决vs2015新建项目，提示“未将对象引用设置到引用实例“的问题

    问题描述: 打开vs2015新建c++项目时,出现有如下内容的对话框“未将对象引用设置到引用实例”的提示 解决方法: 1.  温馨提示:千万不要一冲动,就去卸载vs2015!! win7下安装vs20 ...

  9. 手把手在MyEclipse中搭建Hibernate开发环境

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53414303冷血之心的博客) 在MyEclipse中如何搭建Hib ...

  10. Nginx的防爬虫优化

    我们可以根据客户端的 user-agents 首部字段来阻止指定的爬虫爬取我们的网站: 虚拟主机配置如下:(红色标记为添加或者修改内容) [root@Nginx www_date]# cat bria ...