尝试一下 在 CodePen 中打开 在线预览 将城市的兴趣点可视化会带来以下挑战:
建筑群可隐藏大多数图标 区分每个点的实际位置可能是困难的 在倾斜视图或小比例视图中,屏幕很容易变得杂乱无章 此示例显示了有助于解决这些问题的要素: relative-to-scene , callout , verticalOffset , decluttering 和 screenSizePerspectiveEnabled 。
在此示例中,我们将法国里昂的 700 个兴趣点(博物馆、餐馆等)可视化。这就是仅将所有点可视化而没有任何增强的城市的样子:
您无法看到城市中心的点,因为建筑群会掩盖它们。 标签和图标重叠,很难理解哪个标签属于哪个图标。 所有图标的大小都相同,因此很难区分哪些图标更靠近相机。 我们可以通过 4 个简单的步骤来解决这些问题:
第一步:位于建筑物内的点应该与建筑物的屋顶对齐在 3D 城市可视化中,将位于建筑物内的点显示在建筑物顶部以使其可见是很重要的。 相当于场景 的高程模式将点与相应建筑物的高度对齐。
Copy
1
2
3
4
5
6
7
8
9
10
// feature layer representing points of interest as icons
const pointsLayer = new FeatureLayer({
...
elevationInfo : {
// this elevation mode will place points on top of
// buildings or other SceneLayer 3D objects
mode : "relative-to-scene"
},
...
});
第二步:添加标注线,清楚了解点的位置对于某些点,很难确定它们的位置。 此外,有些点位于地面上,被建筑物隐藏。 为了解决这个问题,我们在点上设置了一个 垂直偏移 ; 即使它们位于建筑物后面,地面上的点仍然可以看到 。 添加标注线有助于查看点的实际位置 。
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// symbol representing a point of interest
const symbol = {
type : "point-3d" , // autocasts as new PointSymbol3D()
symbolLayers : [
{
type : "icon" // autocasts as new IconSymbol3DLayer()
// add properties for the IconSymbol3DLayer here
}
],
verticalOffset : {
screenLength : 40 ,
maxWorldLength : 200 ,
minWorldLength : 35
},
callout : {
type : "line" , // autocasts as new LineCallout3D()
color : "white" ,
size : 2 ,
border : {
color : [ 50 , 50 , 50 ]
}
}
};
第三步:通过使远处的图标更小来提高距离感知在屏幕空间中可视化要素(如 3D 倾斜视图中的图标)的一个问题是深度感知不是很清晰。 所有图标的大小都相同,因此用户不确定哪些图标离相机更近或更远。
FeatureLayer 上的 screenSizePerspectiveEnabled 属性有助于 更好地解释 3D 空间中的距离 ,方法是使离相机更远的图标看起来比离相机更近的图标更小。 默认情况下启用此设置。
Copy
1
2
3
4
5
6
7
const pointsLayer = new FeatureLayer({
...
// we recommend turning this feature off when
// working with size visual variables
screenSizePerspectiveEnabled : false ,
...
});
第四步:通过移除重叠的图标来清理网络场景在这个视图中,我们现在可以看到给定区域内的所有图标。 但是,这会使视图在较小的比例下有点混乱。 使用 declutter ,我们可以选择隐藏一些与其他图标冲突的图标。 距离相机较近的图标仍然可见,而其他较远的图标则被隐藏。
Copy
1
2
3
4
5
6
7
8
// feature layer representing points of interest
const pointsLayer = new FeatureLayer({
...
featureReduction : {
type : "selection"
},
...
});
另请参阅 将标注线与标签示例一起使用 ,以了解如何在标签上设置类型线的标注。