视觉变量

使用单一渲染类和视觉变量样式化气象站，以显示空气温度

什么是视觉变量？

地图上能引起视觉变化的基本图形、色彩因素称为视觉变量。视觉变量是允许您根据从字段或表达式返回的数值数据值覆盖渲染符号的一个或多个属性的对象。这是使用分级渲染可视化数据的替代方法。与将值分离到离散数据范围中不同，视觉变量会在数据停靠点之间进行线性插值，以创建平滑、连续（未分类）的可视化效果。

有四个视觉变量可覆盖到数据值。

颜色
大小
不透明度
旋转

视觉变量的工作原理

所有视觉变量都将添加到渲染器的 visualVariables 属性中。渲染器可以包含多个视觉变量，但一次添加多个视觉变量可能会导致混淆。

多元可视化

了解如何在单一渲染中有效地使用多个视觉变量。

颜色

颜色变量基于从字段或表达式返回的数值，使用连续色带从而覆盖符号的颜色。使用颜色可视化数值数据之前，应对其进行归一化，特别是对于面图层。

颜色视觉变量需要满足以下条件：

指定字段名称或 Arcade 表达式。
至少两个色标（用于将数据值与颜色相匹配）。数据值位于指定色标之间的符号颜色是线性插值的。

以下示例采用连续色带渲染气象站报告的当前温度。

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 (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 referenceScale = 9244650*4;


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

          visualVariables: [
            {
              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>

大小

大小变量基于从字段或表达式返回的数据值覆盖符号的大小。不适用于具有填充符号的渲染类型。要按大小可视化面图层，应使用标记符号，其将在面的质心处进行渲染。

可通过两种不同的方式定义大小视觉变量：

大小断点，或
将 maxDataValue 与 maxSize 进行匹配；将 minDataValue 与 minSize 进行匹配。

大小视觉变量需要满足以下条件：

指定字段名称或 Arcade 表达式。
至少两个大小断点（将数据值与大小进行匹配）。数据值介于指定断点之间的符号大小是线性插值的。

以下示例使用连续大小符号渲染气象站报告的当前风速。

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>Size visual variable</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",
            style: "circle",
            color: [50, 50, 50, 0.4],
            outline: {
              color: [255, 255, 255, 0.3],
              width: 0.2
            },
            size: "8px"
          },

          visualVariables: [
            {
              type: "size",
              field: "WIND_SPEED",
              minDataValue: 5,
              maxDataValue: 60,
              minSize: 4,
              maxSize: 22
            }
          ]

        };


        // 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>

旋转

旋转变量可基于从字段或表达式返回的数值数据值设置符号的旋转。这通常用于旋转指示方向性的符号，例如：

风向
交通流量
坡向

旋转视觉变量与其他视觉变量的不同之处在于，它们仅需一个数据值，而不需要停止点。

指定字段名称或 Arcade 表达式。
设置可选旋转类型，几何旋转或变换旋转。

以下示例通过使用箭头标记气象站，并根据风向旋转它们来进行可视化。

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>Rotation visual variable</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: "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>

透明度

透明度变量将基于从字段或表达式返回的数值型数据值覆盖符号的透明度。此变量通常用于展示某些要素比其他要素更突出。

透明度视觉变量需要满足以下条件：

指定字段名称或 Arcade 表达式。
至少两个透明度停靠点，用于将数据值与介于 0 和 1 之间的透明度值相匹配。数据值在指定停靠点之间的符号的透明度是线性插值的。

以下示例可视化了主要作物情况。渲染类具有一个不透明度变量，可通过比较来强调拥有大量农田的地区，并淡化拥有很少农田的地区。

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 (opacity)</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/dark/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;

        function createSymbol(color){
          return {
            type: "simple-fill",
            outline: {
              color: "rgba(50,50,50,0.1)",
              width: 0.5
            },
            color,
            style: "solid"
          }
        }


        const renderer = {
          type: "unique-value",
          field: "DOM_CROP_ACRES",
          uniqueValueInfos: [{
            value: "Corn",
            symbol: createSymbol("#e6d800")
          }, {
            value: "Wheat",
            symbol: createSymbol("#9b19f5")
          }, {
            value: "Soybeans",
            symbol: createSymbol("#0bb4ff")
          }, {
            value: "Cotton",
            symbol: createSymbol("#50e991")
          }, {
            value: "Vegetables",
            symbol: createSymbol("#e60049")
          }],

          visualVariables: [
            {
              type: "opacity",
              field: "TotalFarmedAcres",
              normalizationField: "AREA_ACRES",
              legendOptions: {
                showLegend: false,
              },
              stops: [
                { value: 0.0, opacity: 0.2 },
                { value: 0.1, opacity: 0.5 },
                { value: 0.5, opacity: 0.8 },
                { value: 0.9, opacity: 1.0 }
              ]
            }
          ]

        };


        // Set the renderer on the feature layer
        const layer = new FeatureLayer({
          url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_county_crops_2007_clean/FeatureServer/0",
          title: "U.S. counties",
          renderer: renderer
        });

        const map = new Map({
          basemap: "tianditu-image",
          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>

生成数据驱动型连续大小可视化

大小视觉变量主题

具有真实 3D 符号的主题可视化

数据驱动的连续颜色

数据驱动型拉伸

数据驱动型不透明度

通过旋转可视化数据

数据驱动型连续大小

API 支持

	3D	线	面	格网
唯一类型
分类间隔
视觉变量				¹
时间
多元
众数渲染
点密度
关系
智能制图	²	³	³	³

完全支持部分支持不支持

1. 仅颜色
2. 仅支持点符号按大小变化
3. 不支持3D点符号按大小变化

上一主题分类间隔下一主题时间