在子图层上设置定义表达式
这个示例演示了如何添加 MapImageLayer 实例到 Map 并更新子图层的 definitionExpression 。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>MapImageLayer - Set definition expressions on sublayers - 4.5</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/MapImageLayer",
"dojo/on",
"dojo/number",
"dojo/domReady!"
],
function(
Map, SceneView, MapImageLayer, on, number
) {
/*****************************************************************
* Create a MapImageLayer instance pointing to a Map Service
* containing data about US Cities, Counties, States and Highways.
* Define sublayers with visibility for each layer in Map Service.
* 创建 MapImageLayer 实例
* 这个实例指向一个包含美国城市、县、州和高速路数据的地图服务
*
* 对每个图层设置子图层可见性
*****************************************************************/
var layer = new MapImageLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
sublayers: [
{
id: 3,
visible: false
},
{
id: 2,
visible: true
},
{
id: 1,
visible: true
},
{
id: 0,
visible: true,
definitionExpression: "pop2000 > 100000"
}]
});
var map = new Map({
basemap: "dark-gray",
layers: [layer]
});
var view = new SceneView({
container: "viewDiv",
map: map,
zoom: 4,
center: [-99, 39]
});
/*****************************************************************
* 监听滑块值改变，将滑块值应用到 definitionExpression
*****************************************************************/
layer.then(function() {
var cities = layer.findSublayerById(0);
var slider = document.querySelector(".population-slider");
var total = document.querySelector(".total");
on(slider, "change", function() {
cities.definitionExpression = "pop2000 > " + slider.value;
});
on(slider, "input", function() {
total.innerText = number.format(parseInt(slider.value));
});
});
});
</script>
<style>
html,
body {
font-family: sans-serif;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 100px;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
color: #fff;
background-color: #0E3B6F;
text-align: center;
}
.population-slider {
padding: 0;
width: 85%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<div class="footer">
<h4>Cities with Population greater than <span class="total">100,000</span></h4>
<input class="population-slider" type="range" min="1000" max="1000000" step="100"
value="100000">
</div>
</body>
</html>
程序运行效果：
沙箱地址：（完）