用于城市的点样式

尝试一下在线预览

将城市的兴趣点可视化会带来以下挑战:

  • 建筑群可隐藏大多数图标
  • 区分每个点的实际位置可能是困难的
  • 在倾斜视图或小比例视图中,屏幕很容易变得杂乱无章

此示例显示了有助于解决这些问题的要素: relative-to-scene , callout , verticalOffset , decluttering 和  screenSizePerspectiveEnabled 。

在此示例中,我们将法国里昂的 700 个兴趣点(博物馆、餐馆等)可视化。这就是仅将所有点可视化而没有任何增强的城市的样子:

city-points-initial

您无法看到城市中心的点,因为建筑群会掩盖它们。 标签和图标重叠,很难理解哪个标签属于哪个图标。 所有图标的大小都相同,因此很难区分哪些图标更靠近相机。 我们可以通过 4 个简单的步骤来解决这些问题:

第一步:位于建筑物内的点应该与建筑物的屋顶对齐

在 3D 城市可视化中,将位于建筑物内的点显示在建筑物顶部以使其可见是很重要的。 相当于场景 的高程模式将点与相应建筑物的高度对齐。

city-points-relative-to-scene

          
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"
  },
  ...
});

第二步:添加标注线,清楚了解点的位置

对于某些点,很难确定它们的位置。 此外,有些点位于地面上,被建筑物隐藏。 为了解决这个问题,我们在点上设置了一个 垂直偏移即使它们位于建筑物后面,地面上的点仍然可以看到。 添加标注线有助于查看点的实际位置

city-points-callout

                         
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 空间中的距离,方法是使离相机更远的图标看起来比离相机更近的图标更小。 默认情况下启用此设置。

city-points-perspective

       
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 ,我们可以选择隐藏一些与其他图标冲突的图标。 距离相机较近的图标仍然可见,而其他较远的图标则被隐藏。

city-points-declutter

        
1
2
3
4
5
6
7
8
// feature layer representing points of interest
const pointsLayer = new FeatureLayer({
  ...
  featureReduction: {
    type: "selection"
  },
  ...
});

另请参阅 将标注线与标签示例一起使用 ,以了解如何在标签上设置类型线的标注。

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.