Back to Details

arcgis-3d-advanced

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

ArcGIS 3D Advanced

ArcGIS 高级3D功能

Use this skill for advanced 3D visualization including voxel layers, point clouds, weather, daylight, glTF imports, and custom rendering.
本技能适用于高级3D可视化场景，包括体素图层、点云、天气、日光、glTF模型导入以及自定义渲染。

VoxelLayer (Volumetric 3D Data)

VoxelLayer（3D体数据）

VoxelLayer displays 3D volumetric data like atmospheric, oceanographic, or geological data.
VoxelLayer用于展示3D体数据，如大气、海洋或地质数据。

Basic VoxelLayer

基础VoxelLayer使用

javascript
import VoxelLayer from "@arcgis/core/layers/VoxelLayer.js";

const voxelLayer = new VoxelLayer({
  url: "https://tiles.arcgis.com/tiles/.../SceneServer",
  visible: true,
  popupEnabled: true
});

map.add(voxelLayer);
javascript
import VoxelLayer from "@arcgis/core/layers/VoxelLayer.js";

const voxelLayer = new VoxelLayer({
  url: "https://tiles.arcgis.com/tiles/.../SceneServer",
  visible: true,
  popupEnabled: true
});

map.add(voxelLayer);

VoxelLayer with Map Component

结合Map组件使用VoxelLayer

html
<arcgis-scene viewing-mode="local">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-legend slot="bottom-right"></arcgis-legend>
</arcgis-scene>

<script type="module">
  import VoxelLayer from "@arcgis/core/layers/VoxelLayer.js";

  const vxlLayer = new VoxelLayer({
    url: "https://tiles.arcgis.com/tiles/.../SceneServer"
  });

  const viewElement = document.querySelector("arcgis-scene");
  viewElement.map = new Map({
    layers: [vxlLayer],
    ground: { navigationConstraint: "none" }
  });
</script>
html
<arcgis-scene viewing-mode="local">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
  <arcgis-legend slot="bottom-right"></arcgis-legend>
</arcgis-scene>

<script type="module">
  import VoxelLayer from "@arcgis/core/layers/VoxelLayer.js";

  const vxlLayer = new VoxelLayer({
    url: "https://tiles.arcgis.com/tiles/.../SceneServer"
  });

  const viewElement = document.querySelector("arcgis-scene");
  viewElement.map = new Map({
    layers: [vxlLayer],
    ground: { navigationConstraint: "none" }
  });
</script>

VoxelLayer Configuration

VoxelLayer配置

javascript
const voxelLayer = new VoxelLayer({
  url: "...",
  // Variable to display
  currentVariableId: 0,
  // Slicing
  enableDynamicSections: true,
  // Rendering style
  renderStyle: "volume", // or "surfaces"
  // Quality settings
  qualityFactor: 1.0
});

// Access voxel-specific properties after load
await voxelLayer.load();
console.log("Variables:", voxelLayer.variables);
console.log("Dimensions:", voxelLayer.dimensions);
javascript
const voxelLayer = new VoxelLayer({
  url: "...",
  // Variable to display
  currentVariableId: 0,
  // Slicing
  enableDynamicSections: true,
  // Rendering style
  renderStyle: "volume", // or "surfaces"
  // Quality settings
  qualityFactor: 1.0
});

// Access voxel-specific properties after load
await voxelLayer.load();
console.log("Variables:", voxelLayer.variables);
console.log("Dimensions:", voxelLayer.dimensions);

Voxel Slicing

Voxel切片

javascript
// Add dynamic section (slice)
voxelLayer.enableDynamicSections = true;

// Configure slice plane
const slicePlane = {
  point: { x: 0, y: 0, z: -500 },
  normal: { x: 0, y: 0, z: 1 }
};
javascript
// Add dynamic section (slice)
voxelLayer.enableDynamicSections = true;

// Configure slice plane
const slicePlane = {
  point: { x: 0, y: 0, z: -500 },
  normal: { x: 0, y: 0, z: 1 }
};

Voxel Isosurface

Voxel等值面

javascript
// Create isosurface at specific value
const isosurface = {
  value: 25,
  enabled: true,
  color: [255, 0, 0, 0.7]
};
javascript
// Create isosurface at specific value
const isosurface = {
  value: 25,
  enabled: true,
  color: [255, 0, 0, 0.7]
};

PointCloudLayer (LiDAR Data)

PointCloudLayer（LiDAR数据）

Basic PointCloudLayer

基础PointCloudLayer使用

javascript
import PointCloudLayer from "@arcgis/core/layers/PointCloudLayer.js";

const pcLayer = new PointCloudLayer({
  url: "https://tiles.arcgis.com/tiles/.../SceneServer"
});

map.add(pcLayer);
javascript
import PointCloudLayer from "@arcgis/core/layers/PointCloudLayer.js";

const pcLayer = new PointCloudLayer({
  url: "https://tiles.arcgis.com/tiles/.../SceneServer"
});

map.add(pcLayer);

PointCloud Renderers

PointCloud渲染器

javascript
// RGB (True Color) Renderer
const rgbRenderer = {
  type: "point-cloud-rgb",
  field: "RGB"
};

// Class (Classification) Renderer
const classRenderer = {
  type: "point-cloud-unique-value",
  field: "CLASS_CODE",
  colorUniqueValueInfos: [
    { values: ["2"], label: "Ground", color: [139, 90, 43] },
    { values: ["6"], label: "Building", color: [194, 194, 194] },
    { values: ["5"], label: "High Vegetation", color: [34, 139, 34] }
  ]
};

// Elevation Renderer (Stretch)
const elevationRenderer = {
  type: "point-cloud-stretch",
  field: "ELEVATION",
  fieldTransformType: "none",
  colorModulation: null,
  stops: [
    { value: 0, color: [0, 0, 255] },
    { value: 50, color: [255, 255, 0] },
    { value: 100, color: [255, 0, 0] }
  ]
};

pcLayer.renderer = rgbRenderer;
javascript
// RGB (True Color) Renderer
const rgbRenderer = {
  type: "point-cloud-rgb",
  field: "RGB"
};

// Class (Classification) Renderer
const classRenderer = {
  type: "point-cloud-unique-value",
  field: "CLASS_CODE",
  colorUniqueValueInfos: [
    { values: ["2"], label: "Ground", color: [139, 90, 43] },
    { values: ["6"], label: "Building", color: [194, 194, 194] },
    { values: ["5"], label: "High Vegetation", color: [34, 139, 34] }
  ]
};

// Elevation Renderer (Stretch)
const elevationRenderer = {
  type: "point-cloud-stretch",
  field: "ELEVATION",
  fieldTransformType: "none",
  colorModulation: null,
  stops: [
    { value: 0, color: [0, 0, 255] },
    { value: 50, color: [255, 255, 0] },
    { value: 100, color: [255, 0, 0] }
  ]
};

pcLayer.renderer = rgbRenderer;

Smart Mapping for PointCloud

PointCloud智能映射

javascript
import colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";
import typeRendererCreator from "@arcgis/core/smartMapping/renderers/type.js";

// True color renderer
const rgbResponse = await colorRendererCreator.createPCTrueColorRenderer({
  layer: pcLayer
});
pcLayer.renderer = rgbResponse.renderer;

// Classification renderer
const classResponse = await typeRendererCreator.createPCClassRenderer({
  layer: pcLayer,
  field: "CLASS_CODE"
});

// Continuous color renderer
const elevResponse = await colorRendererCreator.createPCContinuousRenderer({
  layer: pcLayer,
  field: "ELEVATION"
});
javascript
import colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";
import typeRendererCreator from "@arcgis/core/smartMapping/renderers/type.js";

// True color renderer
const rgbResponse = await colorRendererCreator.createPCTrueColorRenderer({
  layer: pcLayer
});
pcLayer.renderer = rgbResponse.renderer;

// Classification renderer
const classResponse = await typeRendererCreator.createPCClassRenderer({
  layer: pcLayer,
  field: "CLASS_CODE"
});

// Continuous color renderer
const elevResponse = await colorRendererCreator.createPCContinuousRenderer({
  layer: pcLayer,
  field: "ELEVATION"
});

PointCloud Filters

PointCloud过滤器

javascript
pcLayer.filters = [{
  field: "CLASS_CODE",
  operator: "includes",
  values: [2, 6] // Ground and Building only
}];

// Remove filters
pcLayer.filters = [];
javascript
pcLayer.filters = [{
  field: "CLASS_CODE",
  operator: "includes",
  values: [2, 6] // Ground and Building only
}];

// Remove filters
pcLayer.filters = [];

Weather Effects

天气效果

Weather Types

天气类型

javascript
// Sunny (default)
view.environment.weather = {
  type: "sunny",
  cloudCover: 0.2
};

// Cloudy
view.environment.weather = {
  type: "cloudy",
  cloudCover: 0.6
};

// Rainy
view.environment.weather = {
  type: "rainy",
  cloudCover: 0.8,
  precipitation: 0.5 // 0-1
};

// Foggy
view.environment.weather = {
  type: "foggy",
  fogStrength: 0.5 // 0-1
};

// Snowy
view.environment.weather = {
  type: "snowy",
  cloudCover: 0.8,
  precipitation: 0.5,
  snowCover: "enabled" // or "disabled"
};
javascript
// Sunny (default)
view.environment.weather = {
  type: "sunny",
  cloudCover: 0.2
};

// Cloudy
view.environment.weather = {
  type: "cloudy",
  cloudCover: 0.6
};

// Rainy
view.environment.weather = {
  type: "rainy",
  cloudCover: 0.8,
  precipitation: 0.5 // 0-1
};

// Foggy
view.environment.weather = {
  type: "foggy",
  fogStrength: 0.5 // 0-1
};

// Snowy
view.environment.weather = {
  type: "snowy",
  cloudCover: 0.8,
  precipitation: 0.5,
  snowCover: "enabled" // or "disabled"
};

Weather Component

天气组件

html
<arcgis-scene item-id="...">
  <arcgis-expand slot="top-right" expanded>
    <arcgis-weather></arcgis-weather>
  </arcgis-expand>
</arcgis-scene>
html
<arcgis-scene item-id="...">
  <arcgis-expand slot="top-right" expanded>
    <arcgis-weather></arcgis-weather>
  </arcgis-expand>
</arcgis-scene>

Weather Widget (Core API) - Deprecated

天气组件（Core API）- 已弃用

DEPRECATED since 4.33: Use the 
arcgis-weather
component shown above instead. For information on widget deprecation, see Esri's move to web components.
javascript
// DEPRECATED - Use arcgis-weather component instead
import Weather from "@arcgis/core/widgets/Weather.js";

const weatherWidget = new Weather({
  view: view
});

view.ui.add(weatherWidget, "top-right");
自4.33版本起弃用： 请改用上方展示的
arcgis-weather
组件。有关组件弃用的信息，请参阅Esri的Web组件迁移计划。
javascript
// DEPRECATED - Use arcgis-weather component instead
import Weather from "@arcgis/core/widgets/Weather.js";

const weatherWidget = new Weather({
  view: view
});

view.ui.add(weatherWidget, "top-right");

Daylight & Lighting

日光与光照

Setting Date/Time

设置日期/时间

javascript
// Set lighting date and time
view.environment.lighting = {
  date: new Date("2024-06-21T12:00:00"),
  directShadowsEnabled: true,
  ambientOcclusionEnabled: true
};

// Update time dynamically
function setTime(hours) {
  const date = new Date(view.environment.lighting.date);
  date.setHours(hours);
  view.environment.lighting.date = date;
}
javascript
// Set lighting date and time
view.environment.lighting = {
  date: new Date("2024-06-21T12:00:00"),
  directShadowsEnabled: true,
  ambientOcclusionEnabled: true
};

// Update time dynamically
function setTime(hours) {
  const date = new Date(view.environment.lighting.date);
  date.setHours(hours);
  view.environment.lighting.date = date;
}

Daylight Component

日光组件

html
<arcgis-scene item-id="...">
  <arcgis-expand slot="top-right" expanded>
    <arcgis-daylight hide-timezone play-speed-multiplier="2"></arcgis-daylight>
  </arcgis-expand>
</arcgis-scene>

<script type="module">
  const daylight = document.querySelector("arcgis-daylight");

  // Toggle sun position vs virtual lighting
  daylight.sunlightingDisabled = false; // Use sun position
  daylight.sunlightingDisabled = true;  // Use virtual light
</script>
html
<arcgis-scene item-id="...">
  <arcgis-expand slot="top-right" expanded>
    <arcgis-daylight hide-timezone play-speed-multiplier="2"></arcgis-daylight>
  </arcgis-expand>
</arcgis-scene>

<script type="module">
  const daylight = document.querySelector("arcgis-daylight");

  // Toggle sun position vs virtual lighting
  daylight.sunlightingDisabled = false; // Use sun position
  daylight.sunlightingDisabled = true;  // Use virtual light
</script>

Daylight Widget (Core API)

日光组件（Core API）

javascript
import Daylight from "@arcgis/core/widgets/Daylight.js";

const daylightWidget = new Daylight({
  view: view,
  playSpeedMultiplier: 2 // Animation speed
});

view.ui.add(daylightWidget, "top-right");
javascript
import Daylight from "@arcgis/core/widgets/Daylight.js";

const daylightWidget = new Daylight({
  view: view,
  playSpeedMultiplier: 2 // Animation speed
});

view.ui.add(daylightWidget, "top-right");

Shadow Analysis

阴影分析

javascript
// Enable shadows
view.environment.lighting.directShadowsEnabled = true;

// Shadow cast analysis
import ShadowCastAnalysis from "@arcgis/core/analysis/ShadowCastAnalysis.js";

const shadowAnalysis = new ShadowCastAnalysis();
view.analyses.add(shadowAnalysis);
javascript
// Enable shadows
view.environment.lighting.directShadowsEnabled = true;

// Shadow cast analysis
import ShadowCastAnalysis from "@arcgis/core/analysis/ShadowCastAnalysis.js";

const shadowAnalysis = new ShadowCastAnalysis();
view.analyses.add(shadowAnalysis);

Importing 3D Models (glTF)

导入3D模型（glTF）

glTF Symbol

glTF符号

javascript
const graphic = new Graphic({
  geometry: {
    type: "point",
    longitude: -122.4,
    latitude: 37.8,
    z: 0
  },
  symbol: {
    type: "point-3d",
    symbolLayers: [{
      type: "object",
      resource: {
        href: "https://example.com/model.glb"
      },
      // Optional: scale and rotate
      width: 10,
      height: 10,
      depth: 10,
      heading: 45,
      tilt: 0,
      roll: 0
    }]
  }
});

graphicsLayer.add(graphic);
javascript
const graphic = new Graphic({
  geometry: {
    type: "point",
    longitude: -122.4,
    latitude: 37.8,
    z: 0
  },
  symbol: {
    type: "point-3d",
    symbolLayers: [{
      type: "object",
      resource: {
        href: "https://example.com/model.glb"
      },
      // Optional: scale and rotate
      width: 10,
      height: 10,
      depth: 10,
      heading: 45,
      tilt: 0,
      roll: 0
    }]
  }
});

graphicsLayer.add(graphic);

Interactive Model Placement

交互式模型放置

javascript
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js";

const graphicsLayer = new GraphicsLayer({
  elevationInfo: { mode: "on-the-ground" }
});

const sketchVM = new SketchViewModel({
  layer: graphicsLayer,
  view: view,
  pointSymbol: {
    type: "point-3d",
    symbolLayers: [{
      type: "object",
      resource: {
        href: "https://example.com/model.glb"
      }
    }]
  }
});

// Start placing model
sketchVM.create("point");

sketchVM.on("create", (event) => {
  if (event.state === "complete") {
    // Model placed, allow editing
    sketchVM.update(event.graphic);
  }
});
javascript
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js";

const graphicsLayer = new GraphicsLayer({
  elevationInfo: { mode: "on-the-ground" }
});

const sketchVM = new SketchViewModel({
  layer: graphicsLayer,
  view: view,
  pointSymbol: {
    type: "point-3d",
    symbolLayers: [{
      type: "object",
      resource: {
        href: "https://example.com/model.glb"
      }
    }]
  }
});

// Start placing model
sketchVM.create("point");

sketchVM.on("create", (event) => {
  if (event.state === "complete") {
    // Model placed, allow editing
    sketchVM.update(event.graphic);
  }
});

IntegratedMeshLayer

IntegratedMeshLayer

javascript
import IntegratedMeshLayer from "@arcgis/core/layers/IntegratedMeshLayer.js";

const meshLayer = new IntegratedMeshLayer({
  url: "https://tiles.arcgis.com/tiles/.../IntegratedMeshServer"
});

map.add(meshLayer);
javascript
import IntegratedMeshLayer from "@arcgis/core/layers/IntegratedMeshLayer.js";

const meshLayer = new IntegratedMeshLayer({
  url: "https://tiles.arcgis.com/tiles/.../IntegratedMeshServer"
});

map.add(meshLayer);

DimensionLayer (Length Dimensioning)

DimensionLayer（长度标注）

Basic DimensionLayer

基础DimensionLayer使用

javascript
import DimensionLayer from "@arcgis/core/layers/DimensionLayer.js";
import DimensionAnalysis from "@arcgis/core/analysis/DimensionAnalysis.js";
import LengthDimension from "@arcgis/core/analysis/LengthDimension.js";

// Create dimension analysis with style
const dimensionAnalysis = new DimensionAnalysis({
  style: {
    type: "simple",
    textBackgroundColor: [0, 0, 0, 0.6],
    textColor: "white",
    fontSize: 12
  }
});

// Create dimension layer
const dimensionLayer = new DimensionLayer({
  title: "Dimensions",
  source: dimensionAnalysis
});

map.add(dimensionLayer);
javascript
import DimensionLayer from "@arcgis/core/layers/DimensionLayer.js";
import DimensionAnalysis from "@arcgis/core/analysis/DimensionAnalysis.js";
import LengthDimension from "@arcgis/core/analysis/LengthDimension.js";

// Create dimension analysis with style
const dimensionAnalysis = new DimensionAnalysis({
  style: {
    type: "simple",
    textBackgroundColor: [0, 0, 0, 0.6],
    textColor: "white",
    fontSize: 12
  }
});

// Create dimension layer
const dimensionLayer = new DimensionLayer({
  title: "Dimensions",
  source: dimensionAnalysis
});

map.add(dimensionLayer);

Add Length Dimensions

添加长度标注

javascript
// Add a dimension between two points
const dimension = new LengthDimension({
  startPoint: {
    x: -122.4, y: 37.8, z: 0,
    spatialReference: { wkid: 4326 }
  },
  endPoint: {
    x: -122.5, y: 37.8, z: 0,
    spatialReference: { wkid: 4326 }
  },
  orientation: 0,  // Rotation in degrees
  offset: 10       // Distance from line
});

dimensionLayer.source.dimensions.push(dimension);
javascript
// Add a dimension between two points
const dimension = new LengthDimension({
  startPoint: {
    x: -122.4, y: 37.8, z: 0,
    spatialReference: { wkid: 4326 }
  },
  endPoint: {
    x: -122.5, y: 37.8, z: 0,
    spatialReference: { wkid: 4326 }
  },
  orientation: 0,  // Rotation in degrees
  offset: 10       // Distance from line
});

dimensionLayer.source.dimensions.push(dimension);

Interactive Dimension Placement

交互式标注放置

javascript
const layerView = await view.whenLayerView(dimensionLayer);

// Start interactive placement
const abortController = new AbortController();

async function startPlacement() {
  try {
    while (!abortController.signal.aborted) {
      await layerView.place({ signal: abortController.signal });
    }
  } catch (error) {
    if (!promiseUtils.isAbortError(error)) throw error;
  }
}

startPlacement();

// Stop placement
abortController.abort();
javascript
const layerView = await view.whenLayerView(dimensionLayer);

// Start interactive placement
const abortController = new AbortController();

async function startPlacement() {
  try {
    while (!abortController.signal.aborted) {
      await layerView.place({ signal: abortController.signal });
    }
  } catch (error) {
    if (!promiseUtils.isAbortError(error)) throw error;
  }
}

startPlacement();

// Stop placement
abortController.abort();

OpenStreetMapLayer (3D Buildings)

OpenStreetMapLayer（3D建筑）

javascript
import OpenStreetMapLayer from "@arcgis/core/layers/OpenStreetMapLayer.js";

// OSM tiles in 3D SceneView
const osmLayer = new OpenStreetMapLayer();

const map = new Map({
  ground: "world-elevation",
  layers: [osmLayer]
});

const view = new SceneView({
  map: map,
  container: "viewDiv"
});
javascript
import OpenStreetMapLayer from "@arcgis/core/layers/OpenStreetMapLayer.js";

// OSM tiles in 3D SceneView
const osmLayer = new OpenStreetMapLayer();

const map = new Map({
  ground: "world-elevation",
  layers: [osmLayer]
});

const view = new SceneView({
  map: map,
  container: "viewDiv"
});

Scene Environment

场景环境

Ground Configuration

地面配置

javascript
// World elevation
map.ground = "world-elevation";

// Custom elevation layer
import ElevationLayer from "@arcgis/core/layers/ElevationLayer.js";

map.ground = {
  layers: [
    new ElevationLayer({
      url: "https://elevation.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
    })
  ]
};

// Underground navigation
map.ground.navigationConstraint = "none"; // Allow underground
map.ground.opacity = 0.5; // Semi-transparent ground
javascript
// World elevation
map.ground = "world-elevation";

// Custom elevation layer
import ElevationLayer from "@arcgis/core/layers/ElevationLayer.js";

map.ground = {
  layers: [
    new ElevationLayer({
      url: "https://elevation.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
    })
  ]
};

// Underground navigation
map.ground.navigationConstraint = "none"; // Allow underground
map.ground.opacity = 0.5; // Semi-transparent ground

Scene Quality

场景质量

javascript
view.qualityProfile = "high"; // "low", "medium", "high"

// Custom quality settings
view.environment.atmosphereEnabled = true;
view.environment.starsEnabled = true;
view.environment.lighting.ambientOcclusionEnabled = true;
javascript
view.qualityProfile = "high"; // "low", "medium", "high"

// Custom quality settings
view.environment.atmosphereEnabled = true;
view.environment.starsEnabled = true;
view.environment.lighting.ambientOcclusionEnabled = true;

Background

背景

javascript
// Solid color background
view.environment.background = {
  type: "color",
  color: [0, 0, 0, 1]
};

// Transparent background (for screenshots)
view.environment.background = {
  type: "color",
  color: [0, 0, 0, 0]
};
javascript
// Solid color background
view.environment.background = {
  type: "color",
  color: [0, 0, 0, 1]
};

// Transparent background (for screenshots)
view.environment.background = {
  type: "color",
  color: [0, 0, 0, 0]
};

Scene Performance

场景性能

Memory Management

内存管理

javascript
// Monitor memory usage
view.watch("memoryUsage", (memoryUsage) => {
  console.log("Memory:", memoryUsage.total, "bytes");
});

// Reduce quality for performance
view.qualityProfile = "low";
javascript
// Monitor memory usage
view.watch("memoryUsage", (memoryUsage) => {
  console.log("Memory:", memoryUsage.total, "bytes");
});

// Reduce quality for performance
view.qualityProfile = "low";

Level of Detail

细节层级

javascript
// For SceneLayer
sceneLayer.lodFactor = 1.0; // 0.5 = lower detail, 2.0 = higher detail
javascript
// For SceneLayer
sceneLayer.lodFactor = 1.0; // 0.5 = lower detail, 2.0 = higher detail

Viewing Modes

查看模式

javascript
// Global mode (default) - spherical Earth
view.viewingMode = "global";

// Local mode - flat, for local areas
view.viewingMode = "local";
html
<!-- Local mode for indoor/underground -->
<arcgis-scene viewing-mode="local">
</arcgis-scene>
javascript
// Global mode (default) - spherical Earth
view.viewingMode = "global";

// Local mode - flat, for local areas
view.viewingMode = "local";
html
<!-- Local mode for indoor/underground -->
<arcgis-scene viewing-mode="local">
</arcgis-scene>

TypeScript Usage

TypeScript使用

3D symbols and configurations use autocasting with 
type
properties. For TypeScript safety, use 
as const
:
typescript
// Use 'as const' for type safety
const graphic = new Graphic({
  geometry: point,
  symbol: {
    type: "point-3d",
    symbolLayers: [{
      type: "object",
      resource: { href: "https://example.com/model.glb" },
      width: 10,
      height: 10
    }]
  } as const
});

// Weather configuration
view.environment.weather = {
  type: "rainy",
  cloudCover: 0.8,
  precipitation: 0.5
} as const;
Tip: See arcgis-core-maps skill for detailed guidance on autocasting vs explicit classes.
3D符号和配置通过
type
属性自动类型转换。为保证TypeScript类型安全，请使用
as const
：
typescript
// Use 'as const' for type safety
const graphic = new Graphic({
  geometry: point,
  symbol: {
    type: "point-3d",
    symbolLayers: [{
      type: "object",
      resource: { href: "https://example.com/model.glb" },
      width: 10,
      height: 10
    }]
  } as const
});

// Weather configuration
view.environment.weather = {
  type: "rainy",
  cloudCover: 0.8,
  precipitation: 0.5
} as const;
提示： 有关自动类型转换与显式类的详细指导，请参阅arcgis-core-maps技能。

Common Pitfalls

常见陷阱

  1. VoxelLayer requires local viewing mode: Use 
    viewing-mode="local"
    for best results
  2. PointCloud renderer fields: Common fields are 
    RGB
    , 
    CLASS_CODE
    , 
    ELEVATION
    , 
    INTENSITY
  3. Weather only in SceneView: Weather effects don't work in MapView
  4. glTF model scale: Models may need scaling to fit the scene properly
  5. Ground navigation constraint: Set 
    navigationConstraint: "none"
    to allow underground viewing
  1. VoxelLayer需要本地查看模式：为获得最佳效果，请使用
    viewing-mode="local"
  2. PointCloud渲染器字段：常用字段包括
    RGB
    、
    CLASS_CODE
    、
    ELEVATION
    、
    INTENSITY
  3. 天气效果仅支持SceneView：天气效果在MapView中无法使用
  4. glTF模型缩放：模型可能需要调整缩放比例以适配场景
  5. 地面导航约束：设置
    navigationConstraint: "none"
    以允许地下查看