多元数据可视化

气象站采用单一渲染器和视觉变量进行样式化，以显示风速、方向和气温

什么是多元数据可视化？

多元数据可视化涉及在单一渲染器中可视化多个数据值。这样做有很多原因，包括：

查看两个或多个变量之间的关系
比较或对比两个变量之间的差异
一次查看多个变量之间可能不相关的空间模式。

多元数据可视化的工作方法

多元可视化可以通过向单一渲染器添加多个视觉变量来完成。常见的组合包括：

颜色和大小
大小和旋转
大小、旋转和颜色

您还可以使用许多其他视觉变量组合（包括不透明度）来创建多元可视化。

示例

颜色和大小

颜色和大小通常用于显示两个变量之间的关系，或使用颜色变量显示比率，以及使用大小变量显示变量的大小。

以下示例用于可视化湿度如何影响炎热指数，或使用颜色和大小来“感知”温度。

颜色用于可视化相对湿度
大小用于可视化热指数（感知温度）与气象站测量的空气温度之间的差异。

GeoScene JS API
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>GeoScene Developer Guide: Visual variables (size and color)</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/widgets/Legend",
        "geoscene/widgets/Expand"
      ], function(
        geosceneConfig,
        Map,
        MapView,
        FeatureLayer,
        Legend,
        Expand
      ) {

        geosceneConfig.apiKey = "YOUR_API_KEY";

        const renderer = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            style: "circle",
            color: [50, 50, 50],
            outline: {
              color: [255, 255, 255, 0.5],
              width: 0.5
            },
            size: "8px"
          },

          visualVariables: [
            {
              type: "size",
              valueExpression: "$feature.HEAT_INDEX - $feature.TEMP",
              valueExpressionTitle: "Difference in 'feels like' temperature from air temperature",
              minDataValue: 0,
              maxDataValue: 30,
              minSize: 4,
              maxSize: 24
            }, {
              type: "color",
              field: "R_HUMIDITY",
              stops: [
                { value: 20, color: "#ffefdc" },
                { value: 35, color: "#edac90" },
                { value: 50, color: "#da6843" },
                { value: 65, color: "#a03523" },
                { value: 80, color: "#660202" }
              ]
            }
          ]

        };


        // Set the renderer on the feature layer
        const layer = new FeatureLayer({
          portalItem: {
            id: "cb1886ff0a9d4156ba4d2fadd7e8a139"
          },
          title: "Current weather conditions",
          renderer: renderer
        });

        const map = new Map({
          basemap: {
            portalItem: {
              id: "ba223f982a3c4a0ea8c9953346e2a201"
            }
          },
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 36978595,
          center: [ -80.48, 28.30 ],
          constraints: {
            snapToZoom:false
          }
        });

        view.ui.add(new Expand({
          content: new Legend({
            view: view
          }),
          view: view,
          expanded: false
        }), "top-right");
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

大小和旋转

大小变量适合用于可视化总计数或大小。旋转和大小通常一起使用以绘制天气数据，例如风。旋转表示流动的方向，而大小表示风速。

GeoScene JS API
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>GeoScene Developer Guide: Visual variables (size and rotation)</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/widgets/Legend",
        "geoscene/widgets/Expand"
      ], function(
        geosceneConfig,
        Map,
        MapView,
        FeatureLayer,
        Legend,
        Expand
      ) {

        geosceneConfig.apiKey = "YOUR_API_KEY";

        const referenceScale = 9244650*2;


        const renderer = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            // Arrow marker defined as SVG path
            path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
            color: [50, 50, 50],
            outline: {
              color: [255, 255, 255, 0.5],
              width: 0.5
            },
            angle: 180,
            size: "20px"
          },

          visualVariables: [
            {
              type: "size",
              field: "WIND_SPEED",
              minDataValue: 5,
              maxDataValue: 60,
              minSize: 4,
              maxSize: 24
            }, {
              type: "rotation",
              field: "WIND_DIRECT",
              rotationType: "geographic"
            }
          ]

        };


        // Set the renderer on the feature layer
        const layer = new FeatureLayer({
          portalItem: {
            id: "cb1886ff0a9d4156ba4d2fadd7e8a139"
          },
          title: "Current weather conditions",
          renderer: renderer
        });

        const map = new Map({
          basemap: {
            portalItem: {
              id: "ba223f982a3c4a0ea8c9953346e2a201"
            }
          },
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: referenceScale,
          center: [ -95, 38.5 ],
          constraints: {
            snapToZoom:false
          }
        });

        view.ui.add(new Expand({
          content: new Legend({
            view: view
          }),
          view: view,
          expanded: false
        }), "top-right");

      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

大小、旋转和颜色

在极少数情况下，您可以有效地同时使用三个视觉变量。在以下示例中，我们向风可视化添加了一个颜色变量以表示气温。此可视化允许最终用户在一个视觉中同时查看风和温度的模式。

大小 - 风速
旋转 - 风向
颜色 - 气温

GeoScene JS API
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>GeoScene Developer Guide: Multiple visual variables</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",
        "geoscene/layers/FeatureLayer",
        "geoscene/widgets/Legend",
        "geoscene/widgets/Expand"
      ], function(
        geosceneConfig,
        Map,
        MapView,
        FeatureLayer,
        Legend,
        Expand
      ) {

        geosceneConfig.apiKey = "YOUR_API_KEY";

        const referenceScale = 9244650*2;


        const renderer = {
          type: "simple",
          symbol: {
            type: "simple-marker",
            // Arrow marker defined as SVG path
            path: "M14.5,29 23.5,0 14.5,9 5.5,0z",
            color: [250, 250, 250],
            outline: {
              color: [255, 255, 255, 0.5],
              width: 0.5
            },
            angle: 180,
            size: 15
          },

          visualVariables: [
            {
              type: "rotation",
              field: "WIND_DIRECT",
              rotationType: "geographic"
            },
            {
              type: "size",
              field: "WIND_SPEED",
              minDataValue: 5,
              maxDataValue: 60,
              minSize: {
                type: "size",
                valueExpression: "$view.scale",
                // 按比例调整最小尺寸
                stops: [
                  { value: referenceScale, size: 8 },
                  { value: referenceScale*2, size: 6 },
                  { value: referenceScale*4, size: 4 },
                  { value: referenceScale*8, size: 2 }
                ]
              },
              maxSize: {
                type: "size",
                valueExpression: "$view.scale",
                // 按比例调整最大尺寸
                stops: [
                  { value: referenceScale, size: 40 },
                  { value: referenceScale*2, size: 30 },
                  { value: referenceScale*4, size: 20 },
                  { value: referenceScale*8, size: 10 }
                ]
              }
            },
            {
              type: "color",
              field: "TEMP",
              stops: [
                { value: 20, color: "#2b83ba" },
                { value: 35, color: "#abdda4" },
                { value: 50, color: "#ffffbf" },
                { value: 65, color: "#fdae61" },
                { value: 80, color: "#d7191c" }
              ]
            }
          ]

        };


        // Set the renderer on the feature layer
        const layer = new FeatureLayer({
          portalItem: {
            id: "cb1886ff0a9d4156ba4d2fadd7e8a139"
          },
          title: "Current weather conditions",
          renderer: renderer
        });

        const map = new Map({
          basemap: {
            portalItem: {
              id: "ba223f982a3c4a0ea8c9953346e2a201"
            }
          },
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: referenceScale,
          center: [ -95, 38.5 ],
          constraints: {
            snapToZoom: false
          }
        });

        view.ui.add(new Expand({
          content: new Legend({
            view: view
          }),
          view: view,
          expanded: false
        }), "top-right");
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>