光晕

4.0 级及以上地震（1970 - 2019 年）。较亮区域表示该区的地震比其他区域多。

什么是光晕？

光晕是一种图层效果，可使表示图层要素的符号变亮，使它们看起来发光。这具有叠加效果，因此有更多要素重叠的区域将具有更亮和更强烈的光芒。这可使光晕成为可视化密集数据集的有效方法。

光晕的工作原理

光晕效果由三个参数控制，在深色背景上看起来最好。

bloom(strength, radius, threshold)

参数	说明
strength	将光晕效果的强度确定为因子或百分比。强度越高，光芒越亮。
radius	以像素为单位确定模糊的半径。
threshold	具有此亮度或更高亮度值的颜色将应用光晕效果。

光晕效果可能对比例、密度和颜色很敏感。有效地使用光晕通常是通过反复试验来完成的。适用于一个图层的参数往往不适用于其他图层。

示例

点

以下示例演示了如何使用光晕来显示表示近 50 年地震的重叠点的密度。

使用很小的符号创建简单渲染器（例如 1 或 2 个像素），并将其应用于图层。
在图层上设置光晕效果。在具有很多点的全球尺度下，半径应非常小（例如 0.1px）。阈值取决于渲染器的颜色选择。较低的数字可捕获更多的颜色（例如 15%）。

4.0 级及以上地震（1970 - 2019 年）。较亮区域表示该区的地震比其他区域多。

GeoScene JS API
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Magnitude 4.0 earthquakes
    </title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(50,50,50,1);
      }
    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>
      require([
        "geoscene/views/MapView",
        "geoscene/Map",
        "geoscene/geometry/SpatialReference",
        "geoscene/layers/FeatureLayer"
      ], (
        MapView,
        Map,
        SpatialReference,
        FeatureLayer
      ) => {


        const earthquakesLayer = new FeatureLayer({
          url: "https://services.arcgis.com/6DIQcwlPy8knb6sg/arcgis/rest/services/quakes/FeatureServer/0/",
          renderer: {
            type: "simple",
            symbol: {
              type: "simple-marker",
              color: "#fd7f6f",
              size: 1,
              outline: null
            }
          }
        });

        earthquakesLayer.effect = "bloom(1.3, 0.1px, 15%)";



        const viewSpatialReference = new SpatialReference({
          wkid: 8857
        });
        let centerPoint = {
          x: 0,
          y: 0,
          spatialReference: viewSpatialReference
        };


        const countriesLayer = new FeatureLayer({
          portalItem: {
            id: "2b93b06dc0dc4e809d3c8db5cb96ba69"
          },
          renderer: {
            type: "simple",
            symbol: {
              type: "simple-fill",
              color: "rgba(75,75,75,1)",
              outline: {
                color: [255, 255, 255, 0.1],
                width: 0.5
              }
            }
          }
        });

        const view = new MapView({
          container: "viewDiv",
          map: new Map({
            layers: [countriesLayer, earthquakesLayer]
          }),
          spatialReference: viewSpatialReference,
          center: centerPoint,
          scale: 206418924,
          constraints: {
            snapToZoom: false,
            minScale: 1100424194
          }
        });

        view.graphics.add({
          symbol: {
            type: "simple-fill",
            color: null,
            outline: {
              width: 0.5,
              color: [208, 208, 203, 0.7]
            }
          },
          geometry: {
            type: "extent",
            xmin: -180,
            xmax: 180,
            ymin: -90,
            ymax: 90,
            // This geometry automatically reprojects
            // when added to the view
            spatialReference: SpatialReference.WGS84
          }
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

线

以下示例演示了如何使用光晕来显示表示佛罗里达州高速公路的重叠线的密度。粗线和重叠的线将比细的非重叠线具有更亮的外观。

创建一个简单、唯一值或分类间隔渲染器并将其设置在图层上。
在图层上设置光晕效果。

佛罗里达州高速公路的年平均每日交通流量。符号的颜色表示每条高速公路的管辖范围。

GeoScene JS API
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Florida Annual Average Daily Traffic
    </title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(50,50,50,1);
      }
    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>
      require([
        "geoscene/views/MapView",
        "geoscene/WebMap",
        "geoscene/layers/FeatureLayer"
      ], (
        MapView,
        WebMap,
        FeatureLayer
      ) => {


        const highwaysLayer = new FeatureLayer({
          portalItem: {
            id: "cca8f554a0764b94b35f8b1781e399de"
          },
          effect: "bloom(1, 0px, 1%)"
        });


        const view = new MapView({
          container: "viewDiv",
          map: new WebMap({
            portalItem: {
              id: "41b13aa63483457cafe2b40f38fa098c"
            },
            layers: [ highwaysLayer ]
          }),
          constraints: {
            snapToZoom: false,
            minScale: 11424194
          }
        });

      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

图层效果的简介

API 支持

下表描述了非常适合每种可视化技术的几何和视图类型。

	2D	线	面	客户端	服务器端
聚类
热点图
不透明度
光晕
聚合
稀疏化	¹	¹	¹	²	³
可见比例范围

全部支持部分支持不支持

1. 不支持通过选择减少要素
2. 仅支持通过选择减少要素
3. 仅支持比例驱动过滤

上一主题不透明度下一主题聚合

GeoScene API for JavaScript

光晕

什么是光晕？

光晕的工作原理

示例

点

线

相关示例和资源

图层效果的简介

API 支持