我加載的是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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！