使用 3D 符号可视化点

1
2
3
4
5
6
7
8
9
10
var symbol = {
  type: "web-style",  // 自动转换为新的 WebStyleSymbol()
  styleName: "EsriRealisticTransportationStyle",
  name: "Audi_A6"
};

layer.renderer = {
  type: "simple",  // 自动转换为新的 SimpleRenderer()
  symbol: symbol
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var symbol = {
  type: "web-style",  // 自动转换为新的 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;
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 根据实际测量值缩放每个符号的大小

var renderer = {
  type: "simple",  // 自动转换为新的 SimpleRenderer()
  symbol: {
    type: "web-style",  // 自动转换为新的 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"
  }]
};

1
2
3
4
5
6
7
8
9
10
var symbol = {
  type: "web-style",  // 自动转换为新的 WebStyleSymbol()
  styleName: "My3DSymbolsStyle",
  name: "MySymbolName"
};

layer.renderer = {
  type: "simple",  // 自动转换为新的 SimpleRenderer()
  symbol: symbol
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const simpleRenderer = {
  type: "simple", // 自动转换为新的 UniqueValueRenderer()
  symbol: new PointSymbol3D({
    symbolLayers: [
      new ObjectSymbol3DLayer({
        resource: {
          // gltf 文件中引用的依赖项也将被请求
          href: "../3d-assets/model.gltf"
        },
        height: 3,
        material: {
          color: "red"
        }
      })
    ]
  })
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// 放置模型原点的地理位置
const location = new Point({
  x: 8.540446,
  y: 47.377887,
  z: 50
});

Mesh.createFromGLTF(location, "../3d-model.gltf")
  .then(function(geometry) {
    // 将其增加 3 倍
    geometry.scale(3, {origin: location});
    // 绕 z 轴旋转 90 度
    geometry.rotate(0, 0, -90);

    // 将其添加到图形中
    const graphic = new Graphic({
      geometry,
      symbol: {
        type: "mesh-3d", // 自动转换为新的 MeshSymbol3D()
        symbolLayers: [{
          type: "fill", // 自动转换为新的 FillSymbol3DLayer()
          material: {
            color: [255, 255, 255, 1],
            colorMixMode: "tint"
          }
        }]
      }
    });

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