问题发现
ArcGIS API for JS 4.8会出现一个问题，添加进来的FeatureLayer在三维模式下，点击高亮显示，在二维下点击就无高亮的效果。当使用labelingInfo注记要素图层的时候也会出现这个问题，在三维下注记显示，在二维下注记不显示。
问题研究
查看官方的API发现，这两个功能都需要WebGL的支持，三维下默认是WebGL渲染，二维下需要代码开启WebGL渲染，说是添加下面代码可以使用WebGL渲染。
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
}如果你觉得这样就会解决，太天真了。这代码加了也没有任何用。最后才发现二维模式下WebGL渲染使用是有限制条件的。
说是可以使用WebGL渲染，可这就相当于是VIP功能了呗！
- 只针对托管在ArcGIS Online的地图服务，和ArcGIS Server10.6.1以上版本发布的服务。
- 对在前端页面自己代码创造的Feature组成的FeatureLayer无法使用
解决方案
二维模式下高亮的解决，可以通过给FeatureLayer添加点击事件，通过点击事件获取的geometry，自己在屏幕上画一个特殊颜色出来就可以了。例子可以参考ArcGIS API for JS4.7加载FeatureLayer，点击弹出信息并高亮显示
至于label注记的解决，我使用的是两个FeatureLayer叠加的形式，一个的symbol用的是"fill-symbol",上面的一层用"text-symbol"。下面是我用GeoJson生成的FeatureLayer，添加图形和注记的代码，可以参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>江西</title>
<link type="text/css" rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.8/esri/css/main.css"/>
<script>
var dojoConfig = {
has: {
"esri-featurelayer-webgl": 1
}
}
</script>
<style type="text/css">
html, body, #mapDIV {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: lightblue;
}
</style>
<script src="http://localhost/arcgis_js_api/library/4.8/init.js"></script>
<script src="http://localhost/arcgis_js_api/library/4.8/dojo/dojo.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
require(["esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/Polygon",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/layers/support/LabelClass",
"esri/tasks/support/Query",
"dojo/_base/connect",
"dojo/on",
"dojo/query",
"esri/request",
"dojo/domReady!"
],
function (
Map,
MapView,
GraphicsLayer,
FeatureLayer,
Graphic,
Polygon,
SimpleLineSymbol,
SimpleFillSymbol,
LabelClass,
Query,
connect,
on,
query,
esriRequest
) {
var layer;
var map = new Map({
// layers: [graphicLayer]
basemap: "dark-gray"
});
var view = new MapView({
container: "mapDIV",
map: map,
extent: {
xmin: 113.574103,
ymin: 24.492908,
xmax: 118.481308,
ymax: 30.076852,
spatialReference: 4326
}
});
var layerRenderer = {
type: "simple",
symbol: {
type: "simple-fill",
color: [12, 60, 142, 1],
outline: {
color: [17, 102, 171],
width: 1
}
}
};
var fields = [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
}, {
name: "areaName",
alias: "areaName",
type: "string"
}, {
name: "areaCode",
alias: "areaCode",
type: "string"
}
];
view.when(function () {
getData()
.then(createGraphics)
.then(createLayer);
});
function getData() {
console.log("获取数据");
var url = "36.json";
return esriRequest(url, {
responseType: "json"
})
}
function createGraphics(response) {
var graphics = [];
var labels = [];
response.data.features.forEach(function (feature, i) {
graphics.push({
geometry: new Polygon({
type: "polygon",
rings: feature.geometry.coordinates[0]
}),
attributes: {
ObjectID: i,
areaName: feature.properties.NAME,
areaCode: feature.properties.CODE
}
});
labels.push({
geometry: new Polygon({
type: "polygon",
rings: feature.geometry.coordinates[0]
}),
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "white",
haloColor: "black",
haloSize: "1px",
text: feature.properties.NAME,
xoffset: 3,
yoffset: 3,
font: { // autocast as new Font()
size: 12,
family: "sans-serif",
weight: "bold"
}
},
attributes: {
ObjectID: i
}
})
});
return [graphics, labels];
}
function createLayer(graphics) {
layer = new FeatureLayer({
source: graphics[0],
fields: fields,
objectIdField: "ObjectID",
renderer: layerRenderer,
spatialReference: {
wkid: 4326
},
outFields: ["*"],
geometryType: "polygon"
});
var labelLayer = new FeatureLayer({
source: graphics[1],
fields: fields,
objectIdField: "ObjectID",
// renderer:layerRenderer,
spatialReference: {
wkid: 4326
},
outFields: ["*"],
geometryType: "polygon"
});
//添加面层
map.add(layer);
//添加注记层
map.add(labelLayer);
}
});
</script>
</head>
<body class="claro">
<div id="mapDIV"></div>
</body>
</html>
就是下面这个样子：
