具有点几何图形的场景图层
本示例演示了如何在 SceneView 中使用 Point 几何体显示 SceneLayer。颜色和大小根据 SceneLayer 中的数字属性按比例应用于每个要素。
示例所用的数据集包含代表全世界机场的4万多个点。随着用户在场景中导航和缩放，SceneLayer 根据需要检索点。
具有可视变量的数据驱动可视化中使用的属性必须可以被 SceneLayer 的缓存访问。将缓存属性的数量保持在最低可以提高 SceneLayer 的性能。因此，慎重使用服务缓存是最好的做法。关于如何配置场景服务中的缓存属性，请查看https://pro.arcgis.com/en/pro-app/help/sharing/overview/web-scene-layer.htm#ESRI_SECTION1_14E01049E56E4917B9F38ADFAD0EF5FA
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Scene Layer with point geometries - 4.5</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<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/SceneLayer",
"dojo/domReady!"
], function(Map, SceneView, SceneLayer) {
// 使用可视化变量 大小和颜色 来设置渲染器
var renderer = {
type: "simple",
symbol: {
type: "point-3d",
symbolLayers: [{
type: "icon"
}]
},
visualVariables: [{
// 根据机场的海拔来设置图标大小
type: "size",
field: "elevation_ft",
stops: [
{
value: 0,
size: 2
},
{
value: 15000,
size: 35
}]
}, {
// 根据类型为机场设置不同颜色
type: "color",
field: "type_airport",
stops: [{
value: 1,
color: [252, 12, 245]
},
{
value: 3,
color: [83, 0, 244]
},
{
value: 7,
color: [4, 245, 248]
}]
}]
};
// 使用 场景服务 URL 创建场景
var sceneLayer = new SceneLayer({
url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Airports_PointSceneLayer/SceneServer/layers/0",
renderer: renderer, // 设置渲染器
screenSizePerspectiveEnabled: false
});
var map = new Map({
basemap: "dark-gray",
layers: [sceneLayer]
});
var view = new SceneView({
container: "viewDiv",
map: map,
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
程序运行效果：
沙箱地址：（完）