单一符号化

字数统计: 1.6k 字
阅读时长: 约 3 分钟
当前版本: 4.29

什么是单一符号化？ ​

单一符号化是指使用单个符号对图层中的所有要素进行样式化。适用于仅可视化要素的位置。位置或几何是区分一个要素和另一个要素的唯一方法。通过位置可以平等地对待所有要素，并让它们的空间模式在地图上更加明显。

如何用单一符号表示要素 ​

通常，可使用两种方法来样式化要素：

  1. 为图形设置符号：通过这种方法可以展示地图或者场景中的一些临时图形。符号类型必须与图形的几何类型相匹配。

  2. 为数据图层设置渲染器（通过符号）：使用此方法可在地图或场景中为数据图层中的所有要素定义样式。渲染器定义了将符号应用于要素的规则，例如如何根据数据值为要素着色或调整大小。

简单渲染器 ​

单一符号化是一种简单渲染方式。使用简单渲染器，符号的所有视觉属性（例如大小、颜色、不透明度、纹理等）对于每个要素都是固定的。可视化的主要目的是显示要素的位置，而不是关于要素属性的特性。例如，如果您想知道景点的位置，但不需要了解每个站点的额外属性信息，则应使用相同的符号渲染所有点。

注：要了解如何使用其他渲染器使用属性和多个符号设置数据样式，请访问数据驱动型样式。

js
    const renderer = new SimpleRenderer({
        symbol: new SimpleMarkerSymbol({
            size: 4,
            color: [0, 255, 255],
            outline: null
        })
    });

符号 ​

地图中的要素样式由符号进行定义。符号既可以表达数据也可以表达与其他要素的关系。为图层选择符号取决于其渲染视图（2D 或 3D），以及图层中要素的几何类型（点、线、面或网格）。

2D 符号 ​

可以使用 2D 符号对点、线和面进行样式设置，主要类型有标记、线状、填充、图片和文本符号。请参阅以下更多示例。

js
    const symbol = new SimpleMarkerSymbol({
        color: "rgba(0,128,155,0.8)",
        size: "10px",
        outline: new SimpleLineSymbol({
            width: 0.5,
            color: "rgba(255,255,255,0.3)"
        })
    });

3D 符号 ​

可以使用 3D 符号来设置点、线、面和网格的样式，并在场景中显示它们。在场景中，可以选择两种类型的符号：

  • 2D 符号，如标记符号、线符号和面填充符号。

  • 3D 符号，如 3D 模型符号、路径符号和拉伸面符号。

请参阅以下更多示例。

js
    const pointSymbol = new PointSymbol3D({
        symbolLayers: [ new IconSymbol3DLayer({
            resource: { href: "pin.svg" },
            size: 15,
            material: {
                color: "#4c397f"
            },
            anchor: "bottom"
        })]
    });

2D 示例 ​

点 ​

可视化地图中点要素的位置，需要在简单渲染器中设置简单标记符号、图片标记符号或 CIM 符号，然后在图层上设定渲染器。所有要素都将以相同的符号显示在视图中。

此示例展示了景点的位置。

  1. 创建一个简单标记符号，将其添加到简单渲染器中。

  2. 为数据图层设置渲染器。

js
 const renderer = new SimpleRenderer({
    symbol: new SimpleMarkerSymbol({
        size: 4,
        color: [0, 255, 255],
            outline: null
    })
 });

线 ​

要可视化地图中线要素的位置，可以使用简单的线符号或 cim 符号以及简单渲染器。此示例使用单一符号显示主要公路的位置。

步骤 ​

  1. 创建一个简单线符号，并将其添加到简单渲染器中。

  2. 为数据图层设置渲染器。

js
 const renderer = new SimpleRenderer({
    symbol: new SimpleLineSymbol({
        width: 1,
        color: "#fb12ff",
    })
 });

面 ​

要可视化地图中面要素的位置，可以使用简单填充符号或图片填充符号。也可使用简单标记符号、图片标记符号、web 样式符号或 cim 符号来可视化面的质心。此示例使用透明的面可视化山洪警报。

步骤 ​

  1. 创建一个简单填充符号，并将其添加到简单渲染器中。

  2. 为数据图层设置渲染器。

js
        layer.renderer = new SimpleRenderer({
            symbol: new SimpleFillSymbol({
                color: "rgba(0,76,115,0.04)",
                outline: null
            })
        });

3D 示例 ​

点 ​

要在场景中可视化点要素的位置，请在简单渲染器中设置标记符号或 3D 模型符号，并在图层上设置渲染对象。所有要素都将以相同的符号显示在视图中。此示例演示了如何创建显示世界各地城市的三维球体。城市符号是一个别针标记。

步骤 ​

  1. 创建一个标记符号，并将其添加到简单渲染器中。

  2. 将渲染器应用于数据图层，以便每个要素均使用标记符号显示。

js
    const renderer = new SimpleRenderer({
        symbol: new PointSymbol3D({
            symbolLayers: [
                new IconSymbol3DLayer({
                    resource: {
                        href:
                        "https://www.geosceneonline.cn/geoscene/styleItems/Icons/web/resource/Pushpin3.svg",
                        },
                        size: 15,
                        material: {
                        color: "#4c397f",
                    },
                    anchor: "bottom",
                }),
            ],
        }),
    });

线 ​

要在场景中可视化线要素的位置，请在简单渲染器中设置线符号或 3D 路径符号，并在图层上设置渲染对象。此示例展示了如何使用路径符号来样式化街道。

步骤 ​

  1. 创建路径符号，其中宽度和高度均为 10 米。

  2. 将其添加到简单渲染器。

  3. 将渲染器应用于数据图层。

js
    const renderer = new SimpleRenderer({
        symbol: new LineSymbol3D({
            symbolLayers: [
                new PathSymbol3DLayer({
                    profile: "quad",
                    material: {
                        color: [46, 255, 238],
                    },
                    width: 10,
                    height: 10,
                    join: "miter",
                    cap: "round",
                    anchor: "bottom",
                    profileRotation: "all",
                }),
            ],
        }),
    })

面 ​

要在场景中可视化面要素，请使用填充符号或根据真实世界的高度拉伸面。以下示例演示了以固定高度拉伸建筑物轮廓，以显示城市中的建筑示意图。

步骤 ​

  1. 创建拉伸面符号，并将其添加到简单渲染器中。

  2. 将渲染器应用于数据图层。

js
    const renderer = new SimpleRenderer({
        symbol: new PolygonSymbol3D({
            symbolLayers: [ new ExtrudeSymbol3DLayer({
                material: {
                    color: "#ffc53d"
                },
                size: 10,
                edges: {
                type: "solid",
                color: "#a67400",
                size: 1.5
                }
            })]
        })
    });