使用 3D 符号可视化点

1
2
3
4
5
6
7
8
9
10
var symbol = {
  type: "web-style",  // autocasts as new WebStyleSymbol()
  styleName: "EsriRealisticTransportationStyle",
  name: "Audi_A6"
};

layer.renderer = {
  type: "simple",  // autocasts as new 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",  // 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;
  }); 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 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"
  }]
}; 

1
2
3
4
5
6
7
8
9
10
var symbol = {
  type: "web-style",  // autocasts as new WebStyleSymbol()
  styleName: "My3DSymbolsStyle",
  name: "MySymbolName"
};

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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"
        }
      })
    ]
  })
}; 

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

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