使用 3D 符号可视化点

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

3D 模型可用于符号化 SceneView 中的点。例如，可以将树位置的数据集可视化为逼真的树。城市中的街道设施，如长椅或公共汽车站，可以使用逼真的 3D 模型。

street-lamp

在GeoScene Maps SDK for JavaScript中，3D 模型可以作为 Web 样式 (从 GeoScene Pro 发布到 GeoScene Online 或 Enterprise 的样式中的符号加载，也可作为 glTF 模型加载。使用 Web 样式部分介绍了如何向应用程序添加 Web 样式以及如何自定义符号。GeoScene 提供了一组 3D 模型作为 Web 样式符号，您可立即在应用程序中使用这些模型。此处是这些模型的完整列表，其中包含可将它们添加到应用程序中的代码片段。如果您要查找的 3D 符号不在此列表中，则有几种方法可以将您自己的 3D 模型用作符号：

使用 Web 样式 ​

GeoScene 以 Web 样式形式提供的 3D 符号 ​

您可以使用 WebStyleSymbol 类向场景添加真实和示意图 3D 符号。此类提供对 API 中立即可用的数百个符号的访问。只需引用 styleName 和符号名称即可创建所需的可视化效果。

js
var symbol = {
 type: "web-style", // autocasts as new WebStyleSymbol()
 styleName: "EsriRealisticTransportationStyle",
 name: "Audi_A6"
};

layer.renderer = {
 type: "simple", // autocasts as new SimpleRenderer()
 symbol: symbol
};

有关有效 styleNames 及其符号名称的完整列表，请参阅 GeoScene Web 样式符号指南页面。

更改 WebStyleSymbol 大小和颜色 ​

WebStyleSymbol 没有典型的符号属性，如 size 和 color。可将其视为一个封装器，用于创建具有 ObjectSymbol3DLayer 或 IconSymbol3DLayer 的 PointSymbol3D 对象。要修改任何符号属性，必须先使用 WebStyleSymbol.fetchSymbol() 将 WebStyleSymbol 转换为常规符号。

js
var symbol = {
 type: "web-style", // autocasts as new WebStyleSymbol()
 styleName: "EsriRealisticTransportationStyle",
 name: "Ambulance"
};

symbol.fetchSymbol()
 .then(function(ambulanceSymbol){
    var objectSymbolLayer = ambulanceSymbol.symbolLayers.getItemAt(0);
    objectSymbolLayer.material = { color: "red" };
    objectSymbolLayer.height \*= 2;
    objectSymbolLayer.width \*= 2;
    objectSymbolLayer.depth \*= 2;

    var renderer = layer.renderer.clone();
    renderer.symbol = ambulanceSymbol;
    layer.renderer = renderer;
 });

使用可视变量时，不需要将 WebStyleSymbols 转换为 PointSymbol3D 实例。

js
// scales the size of each symbol based on a real-world measurement

var renderer = {
 type: "simple", // autocasts as new SimpleRenderer()
 symbol: {
    type: "web-style", // autocasts as new WebStyleSymbol()
    styleName: "EsriRealisticTreesStyle",
    name: "Other"
 },
 label: "generic tree",
 visualVariables: [{
    type: "size",
    axis: "height",
    field: "Height",
    valueUnit: "feet"
 }, {
    type: "size",
    axis: "width-and-depth",
    field: "canopy_diameter",
    valueUnit: "feet"
 }]
};

将自定义 3D 模型发布为 Web 样式符号 ​

从 GeoScene Pro 2.0 开始，您可以将 3D 模型作为 Web 样式符号发布到 GeoScene Online 和 GeoScene Enterprise 2.0。

发布 Web 样式后，可以使用 WebStyleSymbol 类在应用程序中加载其任何符号：

js
var symbol = {
 type: "web-style", // autocasts as new WebStyleSymbol()
 styleName: "My3DSymbolsStyle",
 name: "MySymbolName"
};

layer.renderer = {
 type: "simple", // autocasts as new SimpleRenderer()
 symbol: symbol
};

该模式与 GeoScene 提供的 3D Web 样式符号相同。有关详细信息，请参阅使用 Web 样式部分。

使用 glTF 格式的自定义 3D 模型 ​

glTF 是一种基于 JSON 的 3D 模型开放标准，许多 3D 建模应用程序都支持该标准。支持 glTF 的软件的完整列表可以在官方 GitHub 库中找到。此外，还有一些网站可以下载现成的 glTF 模型，其中一些是免费的。

从GeoScene Maps SDK for JavaScript4.11 开始，要在应用程序中使用 glTF 模型，有两个选项可供使用：

  • 作为使用 ObjectSymbol3DLayer 进行符号化的资源

  • 导入到格网几何实例

使用 ObjectSymbol3DLayer ​

glTF 格式的 3D 模型可以作为 ObjectSymbol3DLayer.resource 的 href 属性的源引用。如果要将模型用作点（例如树木、长凳、飞机等）的符号，请使用此选项。

在GeoScene Maps SDK for JavaScript中，您可以通过在服务器上托管 3D glTF 模型并将 ObjectSymbol3DLayer.resource 的 href 属性指向样式的 URL 来使用它们。该 URL 可以指向引用外部二进制资源 (.bin 文件和纹理) 的 glTF 文件 (.gltf) 或单个二进制文件 (.glb)。

js
const simpleRenderer = {
 type: "simple", // autocasts as new UniqueValueRenderer()
 symbol: new PointSymbol3D({
    symbolLayers: [
        new ObjectSymbol3DLayer({
            resource: {
                // the dependencies referenced in the gltf file will be requested as well
                href: "../3d-assets/model.gltf"
            },
            height: 3,
            material: {
                color: "red"
            }
        })
    ]
 })
};

使用格网几何 ​

加载 glTF 模型的另一种方法是使用 createFromGLTF() 方法将其导入为格网几何。当模型表示 3D 几何（例如建筑物或地质模型）时，请使用此方法。应在导入时指定模型的地理位置。导入后，格网几何可以在图形中使用，并添加到 GraphicsLayer 或 view.graphics。您可以使用 offset()、rotate() 和 scale() 方法来进一步修改模型的定位。

js

// geographic location where the origin of the model will be placed
const location = new Point({
    x: 8.540446,
    y: 47.377887,
    z: 50
});

Mesh.createFromGLTF(location, "../3d-model.gltf")
 .then(function(geometry) {
    // increase it a factor of 3
    geometry.scale(3, {origin: location});
    // rotate it by 90 degrees around the z axis
    geometry.rotate(0, 0, -90);

    // add it to a graphic
    const graphic = new Graphic({
        geometry,
        symbol: {
            type: "mesh-3d", // autocasts as new MeshSymbol3D()
            symbolLayers: [{
                type: "fill", // autocasts as new FillSymbol3DLayer()
                material: {
                    color: [255, 255, 255, 1],
                    colorMixMode: "tint"
                }
            }]
        }
    });

    view.graphics.add(graphic);
 })
 .catch(console.error);

GeoScene Maps SDK for JavaScript 中的 glTF 支持

  • 仅支持 glTF 版本 2.0。

  • glTF 文件必须包含单个场景。

  • 场景可以包含任意数量的节点、格网和基元类型 TRIANGLE、TRIANGLE_STRIP 或 TRIANGLE_FAN。POINTS 和 LINES 不受支持。

  • 仅支持金属粗糙度类型的材料。

  • 通过 MSFT lod 扩展支持多个细节级别。

  • 不支持动画、外观和相机定义。

注

在版本 4.11 之前，可以通过使用 GeoScene Pro SDK 从 3D 模型导出 Web 3D 对象来完成添加客户端 3D 模型。尽管此方法仍然有效，我们仍建议您使用 glTF 格式的 3D 模型。