### JavaScript: Dynamically Load and Navigate Examples in Map3D DC SDK

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/index.html

This JavaScript code initializes the Map3D DC SDK examples interface. It handles URL parsing to set the initial iframe source and dynamically generates a navigation menu based on the EXAMPLE_LIST data. It also includes functionality to update the 'view source' link and manage the active state of navigation items.

```javascript
$(document).ready(function () {
    let href = undefined;
    let $currentPage = undefined;

    if (window.location.href.indexOf('#') > -1) {
        let hrefArr = window.location.href.split('#');
        if (hrefArr[1]) {
            href = hrefArr[1].replace('_', '/');
        }
        $('#code-link').attr('href', 'https://github.com/dailiwei/map3d-dc-sdk/blob/master/examples/' + href);
    }

    $('#inner-page').attr('src', href || 'info/start.html');

    EXAMPLE_LIST.forEach((item) => {
        let $section = $('<div data-accordion ></div>');
        $section.addClass('example-item');
        let $title = $('<h4></h4>').text(item.name);
        $title.appendTo($section);
        let $pageWrapper = $('<ul></ul>');
        $pageWrapper.appendTo($section);

        if (item.children) {
            item.children.forEach((child) => {
                let $page = $('<li></li>');
                let $link = $('<a></a>').text(child.name);
                $link.attr('href', item.folder + '/' + child.page)
                     .attr('target', 'inner-page');

                $link.bind('click', (e) => {
                    if ($currentPage) {
                        $currentPage.removeClass('active');
                    }
                    window.location.href = window.location.href.replace(/#\w*\.?\w*/g, '') + '#' + item.folder + '_' + child.page;
                    $page.addClass('active');
                    $('#code-link').attr('href', 'https://github.com/dailiwei/map3d-dc-sdk/blob/master/examples/' + item.folder + '/' + child.page);
                    $currentPage = $page;
                });

                $page.append($link);
                $pageWrapper.append($page);
            });
        }
        $section.appendTo($('#example-list'));
    });

    $('#example-list [data-accordion]').accordion();
});
```

--------------------------------

### Initialize DC Viewer and Map Layers (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/terrain/ter_ch.html

Initializes a DC.Viewer instance, sets up terrain using XYZ tiles, adds an Amap base layer, and performs a fly-to animation to a specific geographical position. This example requires the DC SDK to be loaded.

```javascript
let viewer = undefined

function initViewer() {
  viewer = new DC.Viewer('viewer-container')

  let terrain = DC.TerrainFactory.createTerrain(DC.TerrainType.XYZ,{
    url: 'http://data.marsgis.cn/terrain'
  })
  viewer.setTerrain(terrain)

  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
    style:'img',
    crs:'WGS84'
  })
  viewer.addBaseLayer(baseLayer)

  viewer.flyToPosition(
    new DC.Position(96.70456483909693, 28.883444927447762, 48977.26981733466, 0, -31)
  )
}

DC.ready({
  baseUrl:'../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize DC Viewer and Add Base Layer (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/offline/blue.html

Demonstrates how to initialize a DC.Viewer instance and add a single tile imagery layer as the base layer. This requires the DC SDK to be loaded and a 'viewer-container' element to exist in the DOM. The example uses a predefined tile URL.

```javascript
let viewer = undefined

function initViewer() {
  viewer = new DC.Viewer('viewer-container')
  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.SINGLE_TILE,{
    url: '../assets/tile/world_b.jpg'
  })
  viewer.addBaseLayer(baseLayer)
}

DC.ready({
  baseUrl:'../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize DC Viewer and Add Cluster Layer - JavaScript

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/layer/cluster_clustering.html

Initializes a DC.Viewer instance, adds a base imagery layer, creates a DC.ClusterLayer with custom points, and sets up a click event listener for the cluster layer. This example requires the DC SDK to be loaded.

```JavaScript
let viewer = undefined

function generatePosition(num) {
    let list = []
    for (let i = 0; i < num; i++) {
        let lng = 120.38105869 + Math.random() * 0.5
        let lat = 31.10115627 + Math.random() * 0.5
        list.push({lng, lat, attr: { id: DC.Util.uuid() }})
    }
    return list
}

function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP)
    viewer.addBaseLayer(baseLayer)

    let layer = new DC.ClusterLayer('layer', {
        image: '../assets/icon/camera.png',
        style: 'cluster'
    })
    layer.setPoints(generatePosition(10000))
    viewer.addLayer(layer)

    layer.on(DC.MouseEventType.CLICK, e => {
        console.log(e.overlay.attr)
    })

    viewer.flyToPosition("120.62244801448453,31.358576663788927,92653.79773798586,0,-90,0")
}

DC.ready({
    baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize Map3D-DC-SDK Viewer

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/README.md

Start the Map3D-DC-SDK by setting the global DC object and then initializing a new DC.Viewer instance. This is the basic setup for displaying a 3D scene.

```javascript
global.DC = DC
DC.ready({}).then(()=>{
    let viewer = new DC.Viewer()
})
```

--------------------------------

### DC SDK Initialization and Viewer Ready Callback

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/setting/param.html

Initializes the DC SDK with a specified base URL and calls the initViewer function once the SDK is ready. This ensures all necessary resources are loaded before proceeding.

```javascript
DC.ready({
  baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer);
```

--------------------------------

### Initialize Viewer and Add 3D Objects with DC SDK

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/vector/ellipsoid.html

Initializes the DC.Viewer, sets up an AMAP base layer, and adds various 3D ellipsoids to a vector layer. This example demonstrates creating and styling basic 3D shapes within the Map3D environment. It requires the DC SDK and its dependencies to be loaded.

```javascript
let viewer = undefined;

function initViewer() {
  viewer = new DC.Viewer('viewer-container');
  let key = '0f7c1d161d7352116a21aacf0e9f44c1';
  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP, {
    style: 'img',
    crs: 'WGS84'
  });
  viewer.addBaseLayer(baseLayer,);
  let layer = new DC.VectorLayer('layer');
  viewer.addLayer(layer);

  let saturn = new DC.Ellipsoid('-95.0,45.0,300000.0', {
    x: 200000.0,
    y: 200000.0,
    z: 200000.0
  }).setStyle({
    material: new DC.Color(0.95, 0.82, 0.49)
  }).addTo(layer);

  let innerRing = new DC.Ellipsoid('-95.0,45.0,300000.0,30,30', {
    x: 400000.0,
    y: 400000.0,
    z: 400000.0
  }).setStyle({
    innerRadii: {
      x: 300000.0,
      y: 300000.0,
      z: 300000.0
    },
    minimumCone: DC.Math.toRadians(89.8),
    maximumCone: DC.Math.toRadians(90.2),
    material: new DC.Color(0.95, 0.82, 0.49, 0.5)
  }).addTo(layer);

  let outRing = new DC.Ellipsoid('-95.0,45.0,300000.0,30,30', {
    x: 460000.0,
    y: 460000.0,
    z: 460000.0
  }).setStyle({
    innerRadii: {
      x: 415000.0,
      y: 415000.0,
      z: 415000.0
    },
    minimumCone: DC.Math.toRadians(89.8),
    maximumCone: DC.Math.toRadians(90.2),
    material: new DC.Color(0.95, 0.82, 0.49, 0.5)
  }).addTo(layer);

  let blueEllipsoid = new DC.Ellipsoid('-120.0, 40.0,', {
    x: 200000.0,
    y: 200000.0,
    z: 200000.0
  }).setStyle({
    maximumCone: DC.Math.PI_OVER_TWO,
    material: DC.Color.BLUE.withAlpha(0.3),
    outline: true,
  }).addTo(layer);

  let redEllipsoid = new DC.Ellipsoid('-108.0, 40.0', {
    x: 250000.0,
    y: 200000.0,
    z: 150000.0
  }).setStyle({
    innerRadii: {
      x: 100000.0,
      y: 80000.0,
      z: 60000.0
    },
    maximumCone: DC.Math.PI_OVER_TWO,
    material: DC.Color.RED.withAlpha(0.3),
    outline: true,
  }).addTo(layer);

  viewer.flyTo(layer);
}

DC.ready({
  baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer);
```

--------------------------------

### Initialize and Fly to Position with DC.Viewer

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/animation/around_view.html

Initializes a DC.Viewer instance, adds an AMAP base layer, and flies the camera to a specific position. This function sets up the viewer and prepares for camera interactions.

```javascript
let viewer = undefined
let aroundView= undefined
function start(){
  aroundView.start()
}
function stop(){
  aroundView.stop()
}
function initViewer() {
  viewer = new DC.Viewer('viewer-container')
  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
    style:'img',
    crs:'WGS84'
  })
  viewer.addBaseLayer( baseLayer)
  viewer.flyToPosition(
    new DC.Position(120.1223, 31.1232, 1e5, 0, -90),
    () => {
      aroundView = new DC.AroundView(viewer)
    }
  )
}
DC.ready({
  baseUrl:'../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize DC Viewer and Add Layers (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/vector/ellipsoid_trail.html

Initializes the DC.Viewer, adds an AMAP base layer, a vector layer, and an ellipsoid with a trail effect. Requires the DC SDK and its resources.

```javascript
let viewer = undefined
function initViewer() {
  viewer = new DC.Viewer('viewer-container')
  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
    style:'img',
    crs:'WGS84'
  })
  viewer.addBaseLayer(baseLayer)
  let layer = new DC.VectorLayer('layer')
  viewer.addLayer(layer)
  let ellipsoid = new DC.Ellipsoid('-108.0, 40.0',{
    x:200000.0,
    y:200000.0,
    z:200000.0
  }).setStyle({
    maximumCone: DC.Math.PI_OVER_TWO,
    material: new DC.EllipsoidTrailMaterialProperty({
      color: DC.Color.fromCssColorString('#00ffff'),
      speed: 5
    })
  }).addTo(layer)
  viewer.flyTo(layer)
}
DC.ready({
  baseUrl:'../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize DC Viewer and Add Layers (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/layer/graticule.html

Initializes the DC.Viewer component and adds an Amap base layer and a graticule layer. It relies on the DC SDK being loaded and ready.

```javascript
let viewer = undefined
function initViewer() {
  viewer = new DC.Viewer('viewer-container')
  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP, {
    style:'img',
  })
  viewer.addBaseLayer(baseLayer)
  let layer = new DC.GraticuleLayer('layer',)
  viewer.addLayer(layer)
}
DC.ready({
  baseUrl:'../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize DC Viewer and Add Base Layer

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/vector/circle_wave.html

Initializes a new DC.Viewer instance, adds an AMAP imagery layer as the base layer with specified brightness, and creates an empty VectorLayer.

```javascript
let viewer = undefined

function initViewer() {
  viewer = new DC.Viewer('viewer-container')
  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP, {
    style: 'img',
    crs: 'WGS84'
  })
  viewer.addBaseLayer(baseLayer, {
    brightness: 0.1
  })
  let layer = new DC.VectorLayer('layer')
  viewer.addLayer(layer)
}

DC.ready({
  baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize 3D Viewer and Add Layers (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/animation/track_clamp_to_tileset.html

Initializes a DC.Viewer instance, adds an imagery layer (AMAP), and a TilesetLayer with a 3D tileset. Includes setting tile height and flying the camera to the tileset.

```javascript
let viewer = undefined
let tc = undefined
let track = undefined

function play(){
    tc.play()
}

function pause(){
    tc.pause()
}

function restore(){
    tc.restore()
}

function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{ style:'img', crs:'WGS84' })
    viewer.addBaseLayer(baseLayer)

    let layer = new DC.TilesetLayer('layer')
    viewer.addLayer(layer)

    let tileset = new DC.Tileset('//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json')
    tileset.setHeight(-430)
    layer.addOverlay(tileset)

    tc = new DC.TrackController(viewer)
    let positions = "108.95672281090324,34.21936342653068;108.96190926401181,34.21960987901689"
    track = new DC.Track(positions,20,()=>{
        
    },{ clampToTileset:true })
    track.setModel('../assets/data/qiche.gltf',{ scale:0.1 })
    tc.addTrack(track)

    viewer.flyTo(tileset)
}

DC.ready({baseUrl:'../libs/map3d-dc-sdk/resources/'}).then(initViewer)
```

--------------------------------

### DC SDK Ready Callback (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/primitive/video.html

Waits for the DC SDK to be ready and then executes the provided callback function. The baseUrl parameter specifies the path to the SDK resources.

```javascript
DC.ready({
  baseUrl:'../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize DC Viewer and Add Base Layer (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/widget/distance_legend.html

Initializes a new DC.Viewer instance attached to 'viewer-container', adds an Amap imagery layer, and enables the distance legend. Requires the DC library and its resources.

```javascript
let viewer = undefined

function initViewer() {
    viewer = new DC.Viewer('viewer-container');
    let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
        style: 'img'
    });
    viewer.addBaseLayer(baseLayer);
    viewer.distanceLegend.enable = true;
    addGuiController();
}

DC.ready({
    baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer);
```

--------------------------------

### Initialize DC.Viewer and Set Up Layers

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/terrain/ter_exaggeration.html

Initializes the DC.Viewer, sets up a terrain layer from a XYZ URL, adds an AMAP base imagery layer, and flies the camera to a specific position. It requires the DC.Viewer class and DC.TerrainFactory/DC.ImageryLayerFactory.

```javascript
let viewer = undefined;

function initViewer() {
    viewer = new DC.Viewer('viewer-container');
    let terrain = DC.TerrainFactory.createTerrain(DC.TerrainType.XYZ, {
        url: 'http://data.marsgis.cn/terrain'
    });
    viewer.setTerrain(terrain);
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP, {
        style: 'img',
        crs: 'WGS84'
    });
    viewer.addBaseLayer(baseLayer);
    viewer.flyToPosition(new DC.Position(96.70456483909693, 28.883444927447762, 48977.26981733466, 0, -31));
    addGuiController(); // add controller
}

DC.ready({
    baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer);
```

--------------------------------

### Start and Stop Camera Movement with DC.AroundView

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/animation/around_view.html

Provides functions to start and stop camera movements using the DC.AroundView utility. These functions assume that an AroundView instance has already been initialized.

```javascript
let viewer = undefined
let aroundView= undefined
function start(){
  aroundView.start()
}
function stop(){
  aroundView.stop()
}
```

--------------------------------

### Perform Camera Fly-To Operation

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/primitive/point.html

Executes a camera fly-to animation to a specific geographic location and altitude. This is used to guide the user's view to a point of interest on the map.

```javascript
viewer.flyToPosition("120.71194923787839,31.416199224240913,160990.91306777575,0,-90")
```

--------------------------------

### Fly to Specific Geographic Position

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/echarts/plane.html

Controls the camera to fly to a specific geographic position on the 3D map. This is useful for guiding the user's view to a point of interest or for scene transitions.

```javascript
viewer.flyToPosition("115.79782534952115,31.47385026585756,4856091.799441838,0,-90");
```

--------------------------------

### Fly to Specific Camera Position

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/primitive/wall_diffuse.html

Controls the viewer's camera to fly to a specified geographic position, including longitude, latitude, height, heading, pitch, and roll. This is useful for guiding user attention within the 3D scene.

```javascript
viewer.flyToPosition("121.17008196721969,30.97885778607079,24403.084,3,-50.2,0.2");
```

--------------------------------

### Install Map3D-DC-SDK using NPM or YARN

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/README.md

Install the Map3D-DC-SDK package using either NPM or YARN. This is the recommended method for seamless integration with webpack.

```shell
yarn add @narutogis/map3d-dc-sdk
-------------------------
npm install @narutogis/map3d-dc-sdk
```

--------------------------------

### Initialize and Configure DC Viewer with Layers and Overlays

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/vector/wall_image_trail.html

This snippet initializes the DC.Viewer, adds a base Amap imagery layer, and a VectorLayer. It then creates a Wall overlay with a custom image trail material and adds it to the VectorLayer. Finally, it uses flyTo to focus the viewer on the added layer. Dependencies include the Map3d DC SDK and its resources.

```javascript
let viewer = undefined
function initViewer() {
    viewer = new DC.Viewer('viewer-container');
    let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
        style: 'img',
        crs: 'WGS84'
    });
    viewer.addBaseLayer(baseLayer, {
        brightness: 0.1
    });
    let layer = new DC.VectorLayer('layer');
    viewer.addLayer(layer);
    let wall = new DC.Wall('-107.0,43.0,50000.0;-97.0,43.0,50000.0;-97.0,40.0,50000.0;-107.0,40.0,50000.0;-107.0,43.0,50000.0');
    wall.setStyle({
        material: new DC.WallImageTrailMaterialProperty({
            image: '../assets/icon/arrow.png',
            color: DC.Color.YELLOW,
            repeat: {
                x: 100,
                y: 1
            },
            speed: 20
        })
    });
    layer.addOverlay(wall);
    viewer.flyTo(layer);
}
DC.ready({
    baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer);
```

--------------------------------

### Initialize DC Viewer and Add Base Layer with Animated Polylines

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/vector/polyline_flow.html

Initializes a DC.Viewer instance, adds an AMap base layer with adjusted brightness, and creates a vector layer populated with animated polylines. The viewer is then directed to fly to the created layer. Assumes the 'viewer-container' div exists and the DC SDK is loaded.

```javascript
let viewer = undefined
function initViewer() {
  viewer = new DC.Viewer('viewer-container')
  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
    style:'img',
    crs:'WGS84',
  })
  viewer.addBaseLayer(baseLayer,{
    brightness : 0.1
  })
  let layer = new DC.VectorLayer('layer')
  viewer.addLayer(layer)
  let polyline = new DC.Polyline('-75, 35; -80, 35').setStyle({
    width: 5,
    material: new DC.PolylineFlowMaterialProperty({
      color: DC.Color.RED,
      speed: 5,
    }),
    clampToGround: true
  })
  let polyline1 = new DC.Polyline(' -75, 30;-75, 35').setStyle({
    width: 5,
    material: new DC.PolylineFlowMaterialProperty({
      color: DC.Color.ORANGE,
      speed: 5,
    }),
    clampToGround: true
  })
  let polyline2 = new DC.Polyline('-80, 35; -80, 30').setStyle({
    width: 5,
    material: new DC.PolylineFlowMaterialProperty({
      color: DC.Color.YELLOW,
      speed: 10,
    }),
    clampToGround: true
  })
  let polyline3 = new DC.Polyline('-80, 30; -75, 30').setStyle({
    width: 5,
    material: new DC.PolylineFlowMaterialProperty({
      color: DC.Color.GREEN,
      speed: 10,
    }),
    clampToGround: true
  })
  layer.addOverlay(polyline).addOverlay(polyline1).addOverlay(polyline2).addOverlay(polyline3)
  viewer.flyTo(layer)
}
DC.ready({baseUrl:'../libs/map3d-dc-sdk/resources/' }).then(initViewer)
```

--------------------------------

### Initialize DC.Viewer and Load Build Data

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/mini-scene/sz.html

Initializes the DC.Viewer instance, sets up base imagery and terrain layers, and then loads a TilesetLayer with a custom fragment shader for visual effects. It utilizes DC.ready for SDK initialization.

```javascript
let viewer = undefined
function loadBuild(){
    let layer = new DC.TilesetLayer('layer_build').addTo(viewer)
    let build = new DC.Tileset( '//resource.dvgis.cn/data/3dtiles/sz/tileset.json', {
        skipLevels:true
    } )
    let fs = ` varying vec3 v_positionEC;
 void main(void){
    vec4 position = czm_inverseModelView * vec4(v_positionEC,1);
    // 位置
    float glowRange = 100.0; // 光环的移动范围(高度)
    gl_FragColor = vec4(0.2, 0.5, 1.0, 1.0); // 颜色
    gl_FragColor *= vec4(vec3(position.z / 100.0), 1.0); // 渐变
    // 动态光环
    float time = fract(czm_frameNumber / 360.0);
    time = abs(time - 0.5) * 2.0;
    float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
    gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
 }
 `
    build.setCustomShader(fs)
    layer.addOverlay(build)
    viewer.flyTo(build)
}
function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({
        style: 'img',
        crs:'WGS84'
    })
    baseLayer.defaultBrightness = 0.05
    viewer.addBaseLayer([baseLayer])
    let terrain = DC.TerrainFactory.createUrlTerrain({
        url: 'http://data.marsgis.cn/terrain'
    })
    viewer.addTerrain(terrain)
    loadBuild()
}
DC.ready({
    baseUrl:'../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize Viewer and Add Polyline Overlay (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/vector/polyline_lighting_trail.html

Initializes the DC.Viewer, adds an AMAP base layer, a vector layer, and a polyline with a dynamic lighting trail material. It then flies the camera to the added layer. Dependencies include the Map3D DC SDK and its resources.

```javascript
let viewer = undefined

function initViewer() {
    viewer = new DC.Viewer('viewer-container');
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP, {
        style: 'img',
        crs: 'WGS84',
    });
    viewer.addBaseLayer(baseLayer, {
        brightness: 0.1
    });

    let layer = new DC.VectorLayer('layer');
    viewer.addLayer(layer);

    let polyline = new DC.Polyline('-75, 35; -125, 35');
    polyline.setStyle({
        width: 20,
        material: new DC.PolylineLightingTrailMaterialProperty({
            color: DC.Color.YELLOW,
            speed: 5.0
        }),
        clampToGround: true
    });
    layer.addOverlay(polyline);

    viewer.flyTo(layer);
}

DC.ready({
    baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer);
```

--------------------------------

### Initialize DC Viewer and Add Base Layers (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/baselayer/arcgis.html

Initializes the DC.Viewer with a specified container ID and adds multiple ArcGIS imagery layers as base layers. It also sets an initial camera position. This example requires the Map3D DC SDK to be loaded.

```javascript
let viewer = undefined

function initViewer() {
    viewer = new DC.Viewer('viewer-container');

    // Add ArcGIS World Imagery layer
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.ARCGIS, {
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    });
    viewer.addBaseLayer(baseLayer, {
        iconUrl: '../assets/icon/img.png',
        name: '影像'
    });

    // Add ArcGIS World Shaded Relief layer
    let baselayer_shaded = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.ARCGIS, {
        url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer'
    });
    viewer.addBaseLayer(baselayer_shaded, {
        iconUrl: '../assets/icon/elec.png',
        name: '电子'
    });

    // Add ArcGIS World Physical Map layer
    let baselayer_street = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.ARCGIS, {
        url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer'
    });
    viewer.addBaseLayer(baselayer_street, {
        iconUrl: '../assets/icon/ter.png',
        name: '地形'
    });

    // Add ArcGIS World Terrain Base layer
    let baselayer_ter = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.ARCGIS, {
        url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer'
    });
    viewer.addBaseLayer(baselayer_ter, {
        iconUrl: '../assets/icon/ter.png',
        name: '地形'
    });

    // Set initial camera position
    viewer.zoomToPosition(new DC.Position(105.565571, 31.984708, 15362816, 0, -90));
}

// Initialize the viewer when the SDK is ready
DC.ready({
    baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer);
```

--------------------------------

### Initialize DC Viewer and Apply Black and White Effect

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/effect/black_and_white.html

Initializes a DC.Viewer, adds an AMAP base layer, and applies a black and white effect with customizable gradations. It also sets up a GUI controller for real-time adjustments.

```javascript
let viewer = undefined
let effect = undefined

function initViewer() {
  viewer = new DC.Viewer('viewer-container');
  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP, { crs: 'WGS84' });
  viewer.addBaseLayer(baseLayer);
  effect = new DC.Effect(viewer);
  effect.blackAndWhite.enable = true;
  effect.blackAndWhite.gradations = 4;
  addGuiController(); // add controller
}

function addGuiController() {
  let controls = {
    enable: true,
    gradations: 4,
  };
  let gui = new dat.GUI();
  gui.add(controls, 'enable').onChange(value => {
    effect.blackAndWhite.enable = value;
  });
  gui.add(controls, 'gradations', 0, 20).step(1).onChange(value => {
    effect.blackAndWhite.gradations = value;
  });
}

DC.ready({
  baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer);
```

--------------------------------

### Configure Vite for Map3D-DC-SDK

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/README.md

Configure Vite for Map3D-DC-SDK projects using the vite-plugin-dc. This plugin simplifies the setup process for integrating the SDK with Vite.

```javascript
// vite.config.js
import { defineConfig } from 'vite'
import DC from '@narutogis/vite-plugin-dc'

export default defineConfig({
  plugins: [DC()],
})
```

--------------------------------

### Playback Controls (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/animation/track_clamp_to_tileset.html

Provides functions to control the playback of a track within the 3D viewer: play, pause, and restore. These functions interact with a TrackController instance.

```javascript
function play(){
    tc.play()
}

function pause(){
    tc.pause()
}

function restore(){
    tc.restore()
}
```

--------------------------------

### Initialize DC Viewer and Add Layers - JavaScript

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/model/3dtiles_shp.html

Initializes a new DC.Viewer instance, adds an AMAP base layer, and a TilesetLayer with a specific tileset. The viewer is then configured to fly to the added tileset. This requires the DC SDK to be loaded and a 'viewer-container' element to exist in the HTML.

```javascript
let viewer = undefined
function initViewer() {
  viewer = new DC.Viewer('viewer-container')
  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
    style:'img',
    crs:'WGS84'
  })
  viewer.addBaseLayer( baseLayer)
  let layer = new DC.TilesetLayer('layer')
  viewer.addLayer(layer)
  let tileset = new DC.Tileset( '//resource.dvgis.cn/data/3dtiles/ljz/tileset.json' )
  let style = new DC.TilesetStyle()
  style.color = {
    conditions: [
      ['${Height} >= 300', 'rgba(45, 0, 75, 0.5)']
      ,['${Height} >= 200', 'rgb(102, 71, 151)']
      ,['${Height} >= 100', 'rgb(170, 162, 204)']
      ,['${Height} >= 50', 'rgb(224, 226, 238)']
      ,['${Height} >= 25', 'rgb(252, 230, 200)']
      ,['${Height} >= 10', 'rgb(248, 176, 87)']
      ,['${Height} >= 5', 'rgb(198, 106, 11)']
      ,['true', 'rgb(127, 59, 8)']
    ]
  }
  tileset.setStyle(style)
  layer.addOverlay(tileset)
  viewer.flyTo(tileset)
}
DC.ready({
  baseUrl:'../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize DC Viewer and Add Dynamic Billboards (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/vector/dynamic_billboard.html

Initializes the DC.Viewer, adds an AMap base layer with adjusted brightness, and populates a dynamic layer with 50 billboards. Each billboard is given a random position and an icon. The billboard's style is also set.

```javascript
let viewer = undefined

function generatePosition(num) {
    let list = []
    for (let i = 0; i < num; i++) {
        let lng = 120.65276089 + Math.random() * 0.5
        let lat = 31.310530293 + Math.random() * 0.5
        list.push({ lng, lat })
    }
    return list
}

function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({ crs: "WGS84" })
    viewer.addBaseLayer(baseLayer, {
        brightness: 0.1
    })
    let layer = new DC.DynamicLayer('layer').addTo(viewer)
    for (let i = 0; i < 50; i++) {
        let billboard = new DC.DynamicBillboard(generatePosition(1)[0], '../assets/icon/poi.png')
        billboard.size = [79, 263]
        billboard.setStyle({
            scale: 0.5,
        })
        layer.addOverlay(billboard)
    }
    setInterval(() => {
        layer.getOverlays().forEach(item => {
            item.addPosition(generatePosition(1)[0], 10)
        })
    }, 10000)
    viewer.flyTo(layer)
}

DC.ready({
    baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize DC Viewer and Add Cluster Layer (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/layer/cluster_circle.html

Initializes the DC.Viewer, adds an AMAP base layer, creates a cluster layer with custom icons, sets points for the cluster, adds the layer to the viewer, and flies the camera to a specified position. It requires the DC SDK to be loaded and ready.

```javascript
let viewer = undefined
function generatePosition(num) {
    let list = []
    for (let i = 0; i < num; i++) {
        let lng = 120.38105869 + Math.random() * 0.5
        let lat = 31.10115627 + Math.random() * 0.5
        list.push([lng, lat])
    }
    return list
}
function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP)
    viewer.addBaseLayer(baseLayer)
    let layer = new DC.ClusterLayer('layer', {
        image: '../assets/icon/camera.png'
    })
    layer.setPoints(generatePosition(10000))
    viewer.addLayer(layer)
    viewer.flyToPosition("120.62244801448453,31.358576663788927,92653.79773798586,0,-90,0")
}
DC.ready({
    baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Generate Random Positions (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/primitive/cloud.html

Generates a list of DC.Position objects with random longitude, latitude, and a fixed altitude. This function is used to position overlays within the viewer.

```javascript
function generatePosition(num) {
  let list = [];
  for (let i = 0; i < num; i++) {
    let lng = 120.38105869 + Math.random() * 0.0005;
    let lat = 31.10115627 + Math.random() * 0.0005;
    list.push(new DC.Position(lng, lat, 1000));
  }
  return list;
}
```

--------------------------------

### Generate and Display Custom Billboards

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/vector/point_icon_custom.html

Generates a list of random geographical positions and creates custom billboards with a dashed line material at each position. These billboards are then added to a vector layer.

```javascript
function generatePosition(num) {
  let list = [];
  for (let i = 0; i < num; i++) {
    let lng = 120.38105869 + Math.random() * 0.5;
    let lat = 31.10115627 + Math.random() * 0.5;
    list.push(new DC.Position(lng, lat, 3000));
  }
  return list;
}

// Inside initViewer function:
let positions = generatePosition(20);
let material = new DC.PolylineDashMaterialProperty({
  color: DC.Color.YELLOW
});
positions.forEach(item => {
  let billboard = new DC.CustomBillboard(item, '../assets/icon/camera.png');
  billboard.setVLine({
    width: 2,
    material
  });
  layer.addOverlay(billboard);
});

viewer.flyTo(layer);
```

--------------------------------

### Initialize DC Viewer and Add Layers (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/layer/html.html

Initializes a new DC.Viewer instance, adds an Amap imagery layer, an HtmlLayer, and populates it with DivIcon overlays. It also includes a function to generate random positions for the overlays and a fly-to animation.

```javascript
let viewer = undefined;

function generatePosition(num) {
    let list = [];
    for (let i = 0; i < num; i++) {
        let lng = 120.38105869 + Math.random() * 0.5;
        let lat = 31.10115627 + Math.random() * 0.5;
        list.push(new DC.Position(lng, lat));
    }
    return list;
}

function initViewer() {
    viewer = new DC.Viewer('viewer-container');
    let baseLayer = DC.ImageryLayerFactory.createAmapImageryLayer({ style: 'img' });
    viewer.addBaseLayer(baseLayer);
    let layer = new DC.HtmlLayer('layer');
    viewer.addLayer(layer);

    let positions = generatePosition(5);
    positions.forEach((item, index) => {
        let divIcon = new DC.DivIcon(
            item,
            `<div style="width:200px;background:rgba(255,255,0,0.2)">我是一个div，你可以对我添加css样式和内容</div>`
        );
        layer.addOverlay(divIcon);
    });

    viewer.flyToPosition(
        new DC.Position(120.472147621, 30.61004946, 65380.21, 14.0, -40.94)
    );
}

DC.ready({
    baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer);
```

--------------------------------

### Fly to Position (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/primitive/video.html

Navigates the viewer's camera to a specific position and orientation in 3D space. The parameters define longitude, latitude, altitude, heading, pitch, and roll.

```javascript
viewer.flyToPosition("-103.90860681010489,39.15476829755646,1432971.4739234317,0,-90,0")
```

--------------------------------

### Initialize DC Viewer and Add Layers (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/layer/geojson.html

Initializes a DC.Viewer instance within a 'viewer-container', adds an OpenStreetMap base layer, and loads a GeoJSON layer from a specified file. It then flies the viewer to the loaded GeoJSON layer.

```javascript
let viewer = undefined

function initViewer() {
  viewer = new DC.Viewer('viewer-container', {
    sceneMode: DC.SceneMode.SCENE2D
  })

  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP, {
    style: 'img',
  })
  viewer.addBaseLayer(baseLayer)

  let layer = new DC.GeoJsonLayer('layer', '../assets/data/simplestyles.geojson')
  viewer.addLayer(layer)

  viewer.flyTo(layer)
}

DC.ready({
  baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Initialize DC Viewer and Add Base Layer

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/primitive/polyline.html

Initializes the DC.Viewer with specified options and adds an AMap base layer. Requires the DC.Viewer library and AMap resources. Outputs a viewer instance with a base map.

```javascript
let viewer = undefined
function initViewer() {
  viewer = new DC.Viewer('viewer-container')
  viewer.setOptions({ enableFxaa:true })
  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{ style:'img', crs:'WGS84' })
  viewer.addBaseLayer( baseLayer)
}
DC.ready({baseUrl:'../libs/map3d-dc-sdk/resources/' }).then(initViewer)
```

--------------------------------

### Add and Style a 3D Wall Overlay

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/vector/wall_trail.html

Demonstrates how to create a 3D wall overlay by defining its coordinates and applying a WallTrailMaterialProperty for visual effects. The wall is then added to a VectorLayer and displayed on the viewer.

```javascript
let layer = new DC.VectorLayer('layer')
viewer.addLayer(layer)
let wall = new DC.Wall( '-107.0,43.0,100000.0;-97.0,43.0,100000.0;-97.0,40.0,100000.0;-107.0,40.0,100000.0;-107.0,43.0,100000.0' )
wall.setStyle({
  material: new DC.WallTrailMaterialProperty({
    color: DC.Color.GREEN,
    speed: 2
  })
})
layer.addOverlay(wall)
viewer.flyTo(layer)
```

--------------------------------

### Create and Configure a ChartLayer with Options

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/echarts/plane.html

Demonstrates how to create a DC.ChartLayer and set its options using a predefined configuration. This allows for rich data visualization on the 3D map, including geographical data mapping and effect rendering.

```javascript
let layer = new DC.ChartLayer('layer', viewer);
layer.setOption(getOption());
viewer.addLayer(layer);
```

--------------------------------

### Create and Style Diffuse Wall Primitives

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/primitive/wall_diffuse.html

Demonstrates the creation of DiffuseWallPrimitive objects with varying positions, heights, and styles including color and number of slices. These primitives are then added to a primitive layer.

```javascript
let wall = new DC.DiffuseWallPrimitive('121.121,31.122',2000,1000);
wall.setStyle({ color:DC.Color.YELLOW });
layer.addOverlay(wall);

wall = new DC.DiffuseWallPrimitive('121.221,31.222',2000,1000);
wall.setStyle({ color:DC.Color.GREEN, slices:6 });
layer.addOverlay(wall);

wall = new DC.DiffuseWallPrimitive('121.121,31.222',2000,1000);
wall.setStyle({ slices:5 });
layer.addOverlay(wall);
```

--------------------------------

### Initialize Viewer and Add Layers (JavaScript)

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/datav/heat_building.html

Initializes a new DC.Viewer instance, adds an AMAP base layer with adjusted brightness, a building layer with a specified tileset, and then flies to a position to add a heatmap layer with randomly generated points. This function relies on the DC.ready() promise to ensure the SDK is loaded.

```javascript
let viewer = undefined

function generatePosition(num) {
  let list = []
  for (let i = 0; i < num; i++) {
    let lng = 121.48339987478337 + Math.random() * 0.05
    let lat = 31.220954026657488 + Math.random() * 0.05
    list.push({lng, lat})
  }
  return list
}

function initViewer() {
  viewer = new DC.Viewer('viewer-container')
  let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP, {
    crs: 'WGS84'
  })
  viewer.addBaseLayer(baseLayer, {
    brightness: 0.1
  })
  let buildingLayer = new DC.TilesetLayer('building-layer').addTo(viewer)
  let tileset = new DC.Tileset('//resource.dvgis.cn/data/3dtiles/ljz/tileset.json')
  buildingLayer.addOverlay(tileset)
  viewer.flyToPosition("121.45765915248303,31.202070402003816,2301.94,44.95,-23.06", () => {
    let layer = new DC.HeatMapLayer('layer', {
      useGround: true
    })
    layer.setPoints(generatePosition(10000))
    viewer.addLayer(layer)
  })
}

DC.ready({
  baseUrl: '../libs/map3d-dc-sdk/resources/'
}).then(initViewer)
```

--------------------------------

### Generate Positions for Map3D DC SDK

Source: https://github.com/dailiwei/narutoigs-map3d-dc-sdk/blob/main/examples/primitive/billboard_m.html

Generates an array of DC.Position objects within a specified longitude and latitude range. This function is used to create locations for adding primitives to the map.

```javascript
function generatePosition(num) {
  let list = []
  for (let i = 0; i < num; i++) {
    let lng = 120.38105869 + Math.random() * 0.5
    let lat = 31.10115627 + Math.random() * 0.5
    list.push(new DC.Position(lng, lat))
  }
  return list
}
```