il y a 5 mois · a76e8647cc
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,3 +3,4 @@
 /pack/
 dist/*
 /**/*.ts

--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ docs/.vitepress/cache
 package-lock.json
 .DS_Store
 .history
 test
--- a/examples/animation/around_point.html
+++ b/examples/animation/around_point.html
@@ -1,52 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="btn-box">
      <ul>
        <li><button onclick="start()">开始</button></li>
        <li><button onclick="stop()">结束</button></li>
      </ul>
    </div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="start()">开始</button></li>
    <li><button onclick="stop()">结束</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let aroundPoint = undefined

  function start(){
    aroundPoint.start()
  }

  function stop(){
    aroundPoint.stop()
  }

  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
    })
    aroundPoint  = new DC.AroundPoint(viewer,'121.48914778697578,31.21498411014459',{pitch:-41,range:2000})
    let layer = new DC.TilesetLayer('layer').addTo(viewer)
    let tileset = new DC.Tileset(
      '//resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
    )
    let customShader =  new DC.CustomShader({
      fragmentShaderText:`
      let layer = new DC.TilesetLayer('layer').addTo(viewer)
      let tileset = new DC.Tileset(
        '//resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
      )
      let customShader = new DC.CustomShader({
        fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
         vec4 position = czm_inverseModelView * vec4(fsInput.attributes.positionEC,1); // 位置
         float glowRange = 100.0; // 光环的移动范围(高度)
@@ -58,15 +48,25 @@
         float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
         material.diffuse = vec3(temp.rgb + temp.rgb * (1.0 - diff)) ;
       }
      `
    })
    tileset.setCustomShader(customShader)
    layer.addOverlay(tileset)
    viewer.flyTo(tileset)
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      `,
      })
      tileset.setCustomShader(customShader)
      layer.addOverlay(tileset)
      viewer.flyTo(tileset)

      let aroundPoint = new DC.AroundPoint(
        viewer,
        '121.48914778697578,31.21498411014459',
        { pitch: -41, range: 2000 }
      )

      function start() {
        aroundPoint.start()
      }

      function stop() {
        aroundPoint.stop()
      }
    </script>
  </body>
 </html>
--- a/examples/animation/around_view.html
+++ b/examples/animation/around_view.html
@@ -1,54 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="btn-box">
      <ul>
        <li><button onclick="start()">开始</button></li>
        <li><button onclick="stop()">结束</button></li>
      </ul>
    </div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer)

 <body>
      let aroundView = undefined
      viewer.flyToPosition(
        new DC.Position(120.1223, 31.1232, 1e5, 0, -90),
        () => {
          aroundView = new DC.AroundView(viewer)
        }
      )

 <div id="viewer-container" class="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="start()">开始</button></li>
    <li><button onclick="stop()">结束</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let aroundView= undefined

  function start(){
    aroundView.start()
  }

  function stop(){
    aroundView.stop()
  }
      function start() {
        aroundView.start()
      }

  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)
      function stop() {
        aroundView.stop()
      }
    )
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
    </script>
  </body>
 </html>
--- a/examples/animation/flying.html
+++ b/examples/animation/flying.html
@@ -1,66 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><input type="checkbox" name="check_loop" /> 是否循环 </li>
    <li><button onclick="start()">开始</button></li>
    <li><button onclick="pause()">暂停</button></li>
    <li><button onclick="restore()">继续</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let flying = undefined

  function start(){
    let checked = document.getElementsByName('check_loop')[0].checked
    flying = new DC.Flying(viewer,{
      loop: checked,
      dwellTime:3,
    })
    flying.positions =  [
      {lng: 121.46748793889597, lat: 31.22345700031846, alt: 1082.6691622203975, heading: 0.9161118327237789, pitch: -38.63414039808751},
      {lng: 121.49543157056694, lat: 31.219611353179484, alt: 663.5376240776116, heading: 0.9161124649627334, pitch: -38.63418986635751},
      {lng: 121.53162234574106, lat: 31.228003869427294, alt: 1891.926162456467, heading: 298.6565902579582, pitch: -33.67285705092492},
      {lng: 121.54438164431083, lat: 31.25201585389836,  alt: 1441.4625182144541, heading: 298.65660919687264, pitch: -33.6728415156399}
    ]
    flying.start()
  }

  function pause(){
    flying.pause()
  }

  function restore(){
    flying.restore()
  }

  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.TilesetLayer('layer').addTo(viewer)
    let tileset = new DC.Tileset(
      '//resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
    )
    let customShader =  new DC.CustomShader({
      fragmentShaderText:`
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="btn-box">
      <ul>
        <li><input type="checkbox" name="check_loop" /> 是否循环</li>
        <li><button onclick="start()">开始</button></li>
        <li><button onclick="pause()">暂停</button></li>
        <li><button onclick="restore()">继续</button></li>
      </ul>
    </div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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.TilesetLayer('layer').addTo(viewer)
      let tileset = new DC.Tileset(
        '//resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
      )
      let customShader = new DC.CustomShader({
        fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
         vec4 position = czm_inverseModelView * vec4(fsInput.attributes.positionEC,1); // 位置
         float glowRange = 100.0; // 光环的移动范围(高度)
@@ -72,16 +44,61 @@
         float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
         material.diffuse = vec3(temp.rgb + temp.rgb * (1.0 - diff)) ;
       }
      `
    })
    tileset.setCustomShader(customShader)
    layer.addOverlay(tileset)
      `,
      })
      tileset.setCustomShader(customShader)
      layer.addOverlay(tileset)

      viewer.flyTo(tileset)

      let flying = undefined

      function start() {
        let checked = document.getElementsByName('check_loop')[0].checked
        flying = new DC.Flying(viewer, {
          loop: checked,
          dwellTime: 3,
        })
        flying.positions = [
          {
            lng: 121.46748793889597,
            lat: 31.22345700031846,
            alt: 1082.6691622203975,
            heading: 0.9161118327237789,
            pitch: -38.63414039808751,
          },
          {
            lng: 121.49543157056694,
            lat: 31.219611353179484,
            alt: 663.5376240776116,
            heading: 0.9161124649627334,
            pitch: -38.63418986635751,
          },
          {
            lng: 121.53162234574106,
            lat: 31.228003869427294,
            alt: 1891.926162456467,
            heading: 298.6565902579582,
            pitch: -33.67285705092492,
          },
          {
            lng: 121.54438164431083,
            lat: 31.25201585389836,
            alt: 1441.4625182144541,
            heading: 298.65660919687264,
            pitch: -33.6728415156399,
          },
        ]
        flying.start()
      }

      function pause() {
        flying.pause()
      }

    viewer.flyTo(tileset)
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      function restore() {
        flying.restore()
      }
    </script>
  </body>
 </html>
--- a/examples/animation/globe_rotate.html
+++ b/examples/animation/globe_rotate.html
@@ -1,45 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let  baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({
      style: 'img',
      crs:'WGS84'
    })
    viewer.addBaseLayer( baseLayer)
    let weather  = new DC.Weather(viewer)
    weather.cloud.enable = true
    weather.cloud.rotateAmount=0.04
    let globeRotate = new DC.GlobeRotate(viewer,
      {
        duration:3,
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({
        style: 'img',
        crs: 'WGS84',
      })
      viewer.addBaseLayer(baseLayer)
      let weather = new DC.Weather(viewer)
      weather.cloud.enable = true
      weather.cloud.rotateAmount = 0.04
      let globeRotate = new DC.GlobeRotate(viewer, {
        duration: 3,
        callback: () => {
          viewer.flyToPosition(
            new DC.Position(120.38105869, 31.10115627, 1e5, 0, -90)
          )
        }
        },
      })
    globeRotate.start()
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      globeRotate.start()
    </script>
  </body>
 </html>
--- a/examples/animation/roaming_keyboard.html
+++ b/examples/animation/roaming_keyboard.html
@@ -1,66 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="info-box">
      <ul>
        <li>键盘按键说明</li>
        <li>W(↑)：前进</li>
        <li>A(←)：左移</li>
        <li>S(↓)：后退</li>
        <li>D(→)：右移</li>
        <li>SHIFT + W(↑)：抬高</li>
        <li>SHIFT + S(↓)：降低</li>
        <li>Q：向左旋转</li>
        <li>E：向右旋转</li>
      </ul>
    </div>
    <script>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <div class="info-box">
  <ul>
    <li>键盘按键说明</li>
    <li>W(↑)：前进</li>
    <li>A(←)：左移</li>
    <li>S(↓)：后退</li>
    <li>D(→)：右移</li>
    <li>SHIFT + W(↑)：抬高</li>
    <li>SHIFT + S(↓)：降低</li>
    <li>Q：向左旋转</li>
    <li>E：向右旋转</li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let keyboardRoaming = undefined

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let  baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({
      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(-420)
    layer.addOverlay(tileset)
    viewer.flyTo(tileset)
    keyboardRoaming = new DC.KeyboardRoaming(viewer)
    addGuiController() // add controller
  }

  function addGuiController(){
    let controls = {
      enable: false,
    }
    let gui = new dat.GUI();
    gui.add(controls,'enable').onChange(value=>{
      keyboardRoaming.enable = value
    })
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({
        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(-420)
      layer.addOverlay(tileset)
      viewer.flyTo(tileset)
      let keyboardRoaming = new DC.KeyboardRoaming(viewer)
      let controls = {
        enable: false,
      }
      let gui = new dat.GUI()
      gui.add(controls, 'enable').onChange((value) => {
        keyboardRoaming.enable = value
      })
    </script>
  </body>
 </html>
--- a/examples/animation/roaming_path.html
+++ b/examples/animation/roaming_path.html
@@ -1,56 +1,51 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="btn-box">
      <ul>
        <li><button onclick="play(1)">路径一</button></li>
        <li><button onclick="play(2)">路径二</button></li>
        <li><button onclick="stop()">结束</button></li>
      </ul>
    </div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({
        style: 'img',
        crs: 'WGS84',
      })
      viewer.addBaseLayer(baseLayer)
      let rc = new DC.RoamingController(viewer)
      let path_one = new DC.RoamingPath(
        '120.38105869, 31.10115627;120.38105869,32.10115627',
        60
      )
      let path_two = new DC.RoamingPath(
        '122.38105869, 31.10115627;121.38105869, 31.10115627',
        100
      )
      rc.addPaths([path_one, path_two])

 <body>
      function play(num) {
        rc.activate(num === 1 ? path_one : path_two, {
          pitch: -30,
        })
      }

 <div id="viewer-container" class="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="play(1)">路径一</button></li>
    <li><button onclick="play(2)">路径二</button></li>
    <li><button onclick="stop()">结束</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let rc = undefined
  let path_one = undefined
  let path_two = undefined

  function play(num){
    rc.activate(num===1 ? path_one : path_two,{
      pitch:-30
    })
  }

  function stop() {
    rc.deactivate()
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let  baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({
      style:"img",
      crs:"WGS84"
    })
    viewer.addBaseLayer(baseLayer)
    rc = new DC.RoamingController(viewer)
    path_one = new DC.RoamingPath("120.38105869, 31.10115627;120.38105869,32.10115627",60)
    path_two = new DC.RoamingPath("122.38105869, 31.10115627;121.38105869, 31.10115627",100)
    rc.addPaths([path_one,path_two])
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      function stop() {
        rc.deactivate()
      }
    </script>
  </body>
 </html>
--- a/examples/animation/track.html
+++ b/examples/animation/track.html
@@ -1,72 +1,68 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="btn-box">
      <ul>
        <li><button onclick="play()">播放</button></li>
        <li><button onclick="pause()">暂停</button></li>
        <li><button onclick="restore()">恢复</button></li>
        <li><button onclick="view('1',-20,100)">第一视角</button></li>
        <li><button onclick="view('2')">上帝视角</button></li>
        <li><button onclick="view('tracked')">跟随视角</button></li>
        <li><button onclick="view('free')">自由视角</button></li>
      </ul>
    </div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer)
      let positions =
        '120.71450195156326,31.34008410150321;120.71575718410492, 31.32906254460538;120.71755047923497, 31.319390534202;120.71992195728619, 31.31036033288049;120.72027974558881, 31.3011861708824;120.72044382952038,31.288363396025954;120.72063046005844, 31.281477152748355;120.72044354666637,31.27731493354631'
      let tc = new DC.TrackController(viewer)
      let track = new DC.Track(positions, 20)
      track.setModel('../assets/data/qiche.gltf', {
        scale: 1,
      })
      tc.addTrack(track)
      viewer.flyToPosition(
        '120.71650745697383,31.325149960836068,2817.8608257878627,0,-70'
      )

 <body>
      function play() {
        tc.play()
      }

 <div id="viewer-container" class="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="play()">播放</button></li>
    <li><button onclick="pause()">暂停</button></li>
    <li><button onclick="restore()">恢复</button></li>
    <li><button onclick="view('1',-20,100)">第一视角</button></li>
    <li><button onclick="view('2')">上帝视角</button></li>
    <li><button onclick="view('tracked')">跟随视角</button></li>
    <li><button onclick="view('free')">自由视角</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let tc = undefined
  let track = undefined
      function pause() {
        tc.pause()
      }

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

  function pause(){
    tc.pause()
  }

  function restore(){
    tc.restore()
  }

  function view(mode,pitch,range){
    tc.viewTrack(track,{
      mode: mode,
      pitch:pitch,
      range:range
    })
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      crs:'WGS84'
    })
    viewer.addBaseLayer(baseLayer)
    let positions = "120.71450195156326,31.34008410150321;120.71575718410492, 31.32906254460538;120.71755047923497, 31.319390534202;120.71992195728619, 31.31036033288049;120.72027974558881, 31.3011861708824;120.72044382952038,31.288363396025954;120.72063046005844, 31.281477152748355;120.72044354666637,31.27731493354631"
    tc = new DC.TrackController(viewer)
    track = new DC.Track(positions,20)
    track.setModel('../assets/data/qiche.gltf',{
      scale:1
    })
    tc.addTrack(track)
    viewer.flyToPosition("120.71650745697383,31.325149960836068,2817.8608257878627,0,-70")
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      function view(mode, pitch, range) {
        tc.viewTrack(track, {
          mode: mode,
          pitch: pitch,
          range: range,
        })
      }
    </script>
  </body>
 </html>
--- a/examples/animation/track_clamp_to_ground.html
+++ b/examples/animation/track_clamp_to_ground.html
@@ -1,69 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="btn-box">
      <ul>
        <li><button onclick="play()">播放</button></li>
        <li><button onclick="pause()">暂停</button></li>
        <li><button onclick="restore()">恢复</button></li>
      </ul>
    </div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let terrain = DC.TerrainFactory.createUrlTerrain({
        url: 'http://data.marsgis.cn/terrain',
      })
      viewer.setTerrain(terrain)
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer)
      let tc = new DC.TrackController(viewer)
      let positions =
        '119.6690974094955,30.619898051672074;119.80669126724348,30.820857646248754'
      let track = new DC.Track(positions, 50, () => {}, {
        clampToGround: true,
      })
      track.setModel('../assets/data/qiche.gltf', {
        scale: 2,
      })
      track.setPath(true)
      tc.addTrack(track)
      viewer.flyToPosition(
        '119.71042378562902,30.603208131877633,1596.161323135813,318.3023263470015,-20.968'
      )

 <body>
      function play() {
        tc.play()
      }

 <div id="viewer-container" class="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="play()">播放</button></li>
    <li><button onclick="pause()">暂停</button></li>
    <li><button onclick="restore()">恢复</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let tc = undefined
  let track = undefined
      function pause() {
        tc.pause()
      }

  function play(){
    tc.play()
  }

  function pause(){
    tc.pause()
  }

  function restore(){
    tc.restore()
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let terrain = DC.TerrainFactory.createUrlTerrain({
      url: 'http://data.marsgis.cn/terrain'
    })
    viewer.setTerrain(terrain)
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      style:'img',
      crs:'WGS84'
    })
    viewer.addBaseLayer( baseLayer)
    tc = new DC.TrackController(viewer)
    let positions = "119.6690974094955,30.619898051672074;119.80669126724348,30.820857646248754"
    track = new DC.Track(positions,50,()=>{},{
      clampToGround:true
    })
    track.setModel('../assets/data/qiche.gltf',{
      scale:2
    })
    track.setPath(true)
    tc.addTrack(track)
    viewer.flyToPosition("119.71042378562902,30.603208131877633,1596.161323135813,318.3023263470015,-20.968")
  }

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      function restore() {
        tc.restore()
      }
    </script>
  </body>
 </html>
--- a/examples/animation/track_clamp_to_tileset.html
+++ b/examples/animation/track_clamp_to_tileset.html
@@ -1,71 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="btn-box">
      <ul>
        <li><button onclick="play()">播放</button></li>
        <li><button onclick="pause()">暂停</button></li>
        <li><button onclick="restore()">恢复</button></li>
      </ul>
    </div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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)
      let tc = new DC.TrackController(viewer)
      let positions =
        '108.95672281090324,34.21936342653068;108.96190926401181,34.21960987901689'
      let track = new DC.Track(positions, 20, () => {}, {
        clampToTileset: true,
      })
      track.setModel('../assets/data/qiche.gltf', {
        scale: 0.1,
      })
      tc.addTrack(track)
      viewer.flyTo(tileset)

 <body>
      function play() {
        tc.play()
      }

 <div id="viewer-container" class="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="play()">播放</button></li>
    <li><button onclick="pause()">暂停</button></li>
    <li><button onclick="restore()">恢复</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let tc = undefined
  let track = undefined
      function pause() {
        tc.pause()
      }

  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/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      function restore() {
        tc.restore()
      }
    </script>
  </body>
 </html>
--- a/examples/animation/track_event.html
+++ b/examples/animation/track_event.html
@@ -1,68 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="btn-box">
      <ul>
        <li><button onclick="play()">播放</button></li>
        <li><button onclick="pause()">暂停</button></li>
        <li><button onclick="restore()">恢复</button></li>
      </ul>
    </div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer)
      let layer = new DC.VectorLayer('layer').addTo(viewer)
      let positions =
        '120.71450195156326,31.34008410150321;120.71575718410492, 31.32906254460538;120.71755047923497, 31.319390534202;120.71992195728619, 31.31036033288049;120.72027974558881, 31.3011861708824;120.72044382952038,31.288363396025954;120.72063046005844, 31.281477152748355;120.72044354666637,31.27731493354631'
      let tc = new DC.TrackController(viewer)
      let track = new DC.Track(positions, 20, (position, isLast) => {
        !isLast &&
          layer.addOverlay(new DC.Model(position, '../assets/data/qiche.gltf'))
      })
      track.setModel('../assets/data/qiche.gltf', {
        scale: 1,
      })
      track.setPath(true, {
        width: 3,
      })
      tc.addTrack(track)
      viewer.flyToPosition(
        '120.71650745697383,31.325149960836068,2817.8608257878627,0,-70'
      )

 <body>
      function play() {
        layer.clear()
        tc.play()
      }

 <div id="viewer-container" class="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="play()">播放</button></li>
    <li><button onclick="pause()">暂停</button></li>
    <li><button onclick="restore()">恢复</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let tc = undefined
  let track = undefined
  let layer = undefined
      function pause() {
        tc.pause()
      }

  function play(){
    layer.clear()
    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,{
      crs:'WGS84'
    })
    viewer.addBaseLayer(baseLayer)
     layer = new DC.VectorLayer('layer').addTo(viewer)
    let positions = "120.71450195156326,31.34008410150321;120.71575718410492, 31.32906254460538;120.71755047923497, 31.319390534202;120.71992195728619, 31.31036033288049;120.72027974558881, 31.3011861708824;120.72044382952038,31.288363396025954;120.72063046005844, 31.281477152748355;120.72044354666637,31.27731493354631"
    tc = new DC.TrackController(viewer)
    track = new DC.Track(positions,20,(position,isLast)=>{
      !isLast && layer.addOverlay(new DC.Model(position,'../assets/data/qiche.gltf'))
    })
    track.setModel('../assets/data/qiche.gltf',{
      scale:1
    })
    track.setPath(true,{
      width:3
    })
    tc.addTrack(track)
    viewer.flyToPosition("120.71650745697383,31.325149960836068,2817.8608257878627,0,-70")
  }
 DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      function restore() {
        tc.restore()
      }
    </script>
  </body>
 </html>
--- a/examples/baselayer/amap.html
+++ b/examples/baselayer/amap.html
@@ -1,50 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP)
    viewer.addBaseLayer(baseLayer, {
      iconUrl: '../assets/icon/elec.png',
      name: '电子'
    })
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

    let baseLayer_img = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      style: 'img'
    })
    viewer.addBaseLayer(baseLayer_img, {
      iconUrl: '../assets/icon/img.png',
      name: '影像'
    })
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP
      )
      viewer.addBaseLayer(baseLayer, {
        iconUrl: '../assets/icon/elec.png',
        name: '电子',
      })

    let baseLayer_cva = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      style: 'cva'
    })
    viewer.addBaseLayer([baseLayer_img, baseLayer_cva], {
      iconUrl: '../assets/icon/img.png',
      name: '影像+注记'
    })
      let baseLayer_img = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
        }
      )
      viewer.addBaseLayer(baseLayer_img, {
        iconUrl: '../assets/icon/img.png',
        name: '影像',
      })

    viewer.zoomToPosition(
      new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
    )
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
 </html>
      let baseLayer_cva = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'cva',
        }
      )
      viewer.addBaseLayer([baseLayer_img, baseLayer_cva], {
        iconUrl: '../assets/icon/img.png',
        name: '影像+注记',
      })

      viewer.zoomToPosition(
        new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
      )
    </script>
  </body>
 </html>
--- a/examples/baselayer/amap_no_offset.html
+++ b/examples/baselayer/amap_no_offset.html
@@ -13,56 +13,51 @@
    <div id="viewer-container" class="viewer-container"></div>

    <script>
      let viewer = undefined
      function initViewer() {
        viewer = new DC.Viewer('viewer-container')
        let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
          DC.ImageryType.AMAP,
          {
            crs: 'WGS84',
          }
        )
        viewer.addBaseLayer(baseLayer, {
          iconUrl: '../assets/icon/elec.png',
          name: '电子',
        })
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        iconUrl: '../assets/icon/elec.png',
        name: '电子',
      })

        let baseLayer_img = DC.ImageryLayerFactory.createImageryLayer(
          DC.ImageryType.AMAP,
          {
            style: 'img',
            crs: 'WGS84',
          }
        )
        viewer.addBaseLayer(baseLayer_img, {
          iconUrl: '../assets/icon/img.png',
          name: '影像',
        })
      let baseLayer_img = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer_img, {
        iconUrl: '../assets/icon/img.png',
        name: '影像',
      })

        let baseLayer_cva = DC.ImageryLayerFactory.createImageryLayer(
          DC.ImageryType.AMAP,
          {
            style: 'cva',
            crs: 'WGS84',
          }
        )
        viewer.addBaseLayer([baseLayer_img, baseLayer_cva], {
          iconUrl: '../assets/icon/img.png',
          name: '影像+注记',
        })
      let baseLayer_cva = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'cva',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer([baseLayer_img, baseLayer_cva], {
        iconUrl: '../assets/icon/img.png',
        name: '影像+注记',
      })

        // let layer = new DC.TilesetLayer('layer')
        // viewer.addLayer(layer)
        // let tileset = new DC.Tileset(
        //   '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
        // )
        // tileset.setHeight(-420)
        // layer.addOverlay(tileset)
        // viewer.flyTo(tileset)
      }
      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
      }).then(initViewer)
      let layer = new DC.TilesetLayer('layer')
      viewer.addLayer(layer)
      let tileset = new DC.Tileset(
        '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
      )
      tileset.setHeight(-420)
      layer.addOverlay(tileset)
      viewer.flyTo(tileset)
    </script>
  </body>
 </html>
--- a/examples/baselayer/arcgis.html
+++ b/examples/baselayer/arcgis.html
@@ -1,65 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    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: '影像'
    })
      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: '影像',
      })

    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: '电子'
    })
      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: '电子',
      })

    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: '地形'
    })
      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: '地形',
      })

    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: '地形'
    })
      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: '地形',
      })

    viewer.zoomToPosition(
      new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
    )
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      viewer.zoomToPosition('105.565571, 31.984708, 15362816, 0, -90')
    </script>
  </body>
 </html>
--- a/examples/baselayer/baidu.html
+++ b/examples/baselayer/baidu.html
@@ -1,65 +1,62 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')

    let baselayer_img = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.BAIDU,{
      style:'img'
    })

    viewer.addBaseLayer([baselayer_img], {
      iconUrl: '../assets/icon/img.png',
      name: '影像'
    })


    let baselayer_vec = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.BAIDU,{
      style:'vec'
    })

    viewer.addBaseLayer([baselayer_img,baselayer_vec], {
      iconUrl: '../assets/icon/img.png',
      name: '影像+注记'
    })

    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.BAIDU)

    viewer.addBaseLayer(baseLayer, {
      iconUrl: '../assets/icon/elec.png',
      name: '电子'
    })

    let baselayer_traffic = DC.ImageryLayerFactory.createBaiduImageryLayer({
      style:'traffic'
    })
    viewer.addBaseLayer([ baseLayer,baselayer_traffic], {
      iconUrl: '../assets/icon/elec.png',
      name: '电子+路况'
    })




    viewer.zoomToPosition(
      new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
    )
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

      let baselayer_img = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.BAIDU,
        {
          style: 'img',
        }
      )

      viewer.addBaseLayer([baselayer_img], {
        iconUrl: '../assets/icon/img.png',
        name: '影像',
      })

      let baselayer_vec = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.BAIDU,
        {
          style: 'vec',
        }
      )

      viewer.addBaseLayer([baselayer_img, baselayer_vec], {
        iconUrl: '../assets/icon/img.png',
        name: '影像+注记',
      })

      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.BAIDU
      )

      viewer.addBaseLayer(baseLayer, {
        iconUrl: '../assets/icon/elec.png',
        name: '电子',
      })

      let baselayer_traffic = DC.ImageryLayerFactory.createBaiduImageryLayer({
        style: 'traffic',
      })
      viewer.addBaseLayer([baseLayer, baselayer_traffic], {
        iconUrl: '../assets/icon/elec.png',
        name: '电子+路况',
      })

      viewer.zoomToPosition('105.565571, 31.984708, 15362816, 0, -90')
    </script>
  </body>
 </html>
--- a/examples/baselayer/baidu_no_offset.html
+++ b/examples/baselayer/baidu_no_offset.html
@@ -1,65 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

      let baselayer_img = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.BAIDU,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )

    let baselayer_img = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.BAIDU,{
      style:'img',
      crs:'WGS84'
    })
      viewer.addBaseLayer([baselayer_img], {
        iconUrl: '../assets/icon/img.png',
        name: '影像',
      })

    viewer.addBaseLayer([baselayer_img], {
      iconUrl: '../assets/icon/img.png',
      name: '影像'
    })
      let baselayer_vec = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.BAIDU,
        {
          style: 'vec',
          crs: 'WGS84',
        }
      )

      viewer.addBaseLayer([baselayer_img, baselayer_vec], {
        iconUrl: '../assets/icon/img.png',
        name: '影像+注记',
      })

    let baselayer_vec = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.BAIDU,{
      style:'vec',
      crs:'WGS84'
    })
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.BAIDU,
        {
          crs: 'WGS84',
        }
      )

    viewer.addBaseLayer([baselayer_img,baselayer_vec], {
      iconUrl: '../assets/icon/img.png',
      name: '影像+注记'
    })
      viewer.addBaseLayer(baseLayer, {
        iconUrl: '../assets/icon/elec.png',
        name: '电子',
      })

    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.BAIDU,{
      crs:'WGS84'
    })

    viewer.addBaseLayer(baseLayer, {
      iconUrl: '../assets/icon/elec.png',
      name: '电子'
    })

    let baselayer_traffic = DC.ImageryLayerFactory.createBaiduImageryLayer({
      crs:'WGS84',
      style:'traffic'
    })
    viewer.addBaseLayer([ baseLayer,baselayer_traffic], {
      iconUrl: '../assets/icon/elec.png',
      name: '电子+路况'
    })

  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      let baselayer_traffic = DC.ImageryLayerFactory.createBaiduImageryLayer({
        crs: 'WGS84',
        style: 'traffic',
      })
      viewer.addBaseLayer([baseLayer, baselayer_traffic], {
        iconUrl: '../assets/icon/elec.png',
        name: '电子+路况',
      })
    </script>
  </body>
 </html>
--- a/examples/baselayer/geovis.html
+++ b/examples/baselayer/geovis.html
@@ -1,74 +1,84 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let key = '3eaffc2e10e097cac82fa9ce537e6e4765598a74505ccda5ac3eaa57b0a75c91'
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GEO_VIS,{
      key
    })
    viewer.addBaseLayer(baseLayer, {
      iconUrl: '../assets/icon/elec.png',
      name: '电子'
    })
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

    let baseLayer_img = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GEO_VIS,{
      style: 'img',
      format:"webp",
      key
    })
    viewer.addBaseLayer(baseLayer_img, {
      iconUrl: '../assets/icon/img.png',
      name: '影像'
    })
      viewer = new DC.Viewer('viewer-container')
      let key =
        '3eaffc2e10e097cac82fa9ce537e6e4765598a74505ccda5ac3eaa57b0a75c91'
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GEO_VIS,
        {
          key,
        }
      )
      viewer.addBaseLayer(baseLayer, {
        iconUrl: '../assets/icon/elec.png',
        name: '电子',
      })

    let baseLayer_cva = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GEO_VIS,{
      style: 'cia',
      key
    })
    viewer.addBaseLayer([baseLayer_img, baseLayer_cva], {
      iconUrl: '../assets/icon/img.png',
      name: '影像+注记'
    })
      let baseLayer_img = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GEO_VIS,
        {
          style: 'img',
          format: 'webp',
          key,
        }
      )
      viewer.addBaseLayer(baseLayer_img, {
        iconUrl: '../assets/icon/img.png',
        name: '影像',
      })

    let baseLayer_ter = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GEO_VIS,{
      style: 'ter',
      key
    })
    viewer.addBaseLayer(baseLayer_ter, {
      iconUrl: '../assets/icon/ter.png',
      name: '地形'
    })
      let baseLayer_cva = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GEO_VIS,
        {
          style: 'cia',
          key,
        }
      )
      viewer.addBaseLayer([baseLayer_img, baseLayer_cva], {
        iconUrl: '../assets/icon/img.png',
        name: '影像+注记',
      })

    let baseLayer_cat = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GEO_VIS,{
      style: 'cat',
      key
    })
    viewer.addBaseLayer([baseLayer_ter, baseLayer_cat], {
      iconUrl: '../assets/icon/ter.png',
      name: '地形+注记'
    })
      let baseLayer_ter = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GEO_VIS,
        {
          style: 'ter',
          key,
        }
      )
      viewer.addBaseLayer(baseLayer_ter, {
        iconUrl: '../assets/icon/ter.png',
        name: '地形',
      })

    viewer.zoomToPosition(
      new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
    )
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
 </html>
      let baseLayer_cat = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GEO_VIS,
        {
          style: 'cat',
          key,
        }
      )
      viewer.addBaseLayer([baseLayer_ter, baseLayer_cat], {
        iconUrl: '../assets/icon/ter.png',
        name: '地形+注记',
      })

      viewer.zoomToPosition('105.565571, 31.984708, 15362816, 0, -90')
    </script>
  </body>
 </html>
--- a/examples/baselayer/google.html
+++ b/examples/baselayer/google.html
@@ -1,62 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

 <body>
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GOOGLE,
        {
          style: 'img',
        }
      )

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
      viewer.addBaseLayer(baseLayer, {
        iconUrl: '../assets/icon/img.png',
        name: '影像',
      })

    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GOOGLE,{
       style:'img'
    })
      let baseLayer_img_cva = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GOOGLE,
        {
          style: 'img_cva',
        }
      )
      viewer.addBaseLayer(baseLayer_img_cva, {
        iconUrl: '../assets/icon/img.png',
        name: '影像 + 标注',
      })

    viewer.addBaseLayer( baseLayer, {
      iconUrl: '../assets/icon/img.png',
      name: '影像'
    })
      let baselayer_elc = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GOOGLE
      )
      viewer.addBaseLayer(baselayer_elc, {
        iconUrl: '../assets/icon/elec.png',
        name: '电子',
      })

    let  baseLayer_img_cva = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GOOGLE,{
      style:'img_cva'
    })
    viewer.addBaseLayer( baseLayer_img_cva, {
      iconUrl: '../assets/icon/img.png',
      name: '影像 + 标注'
    })
      let baselayer_ter = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GOOGLE,
        {
          style: 'ter',
        }
      )
      viewer.addBaseLayer(baselayer_ter, {
        iconUrl: '../assets/icon/ter.png',
        name: '地形',
      })

    let baselayer_elc = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GOOGLE)
    viewer.addBaseLayer(baselayer_elc, {
      iconUrl: '../assets/icon/elec.png',
      name: '电子'
    })

    let baselayer_ter = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GOOGLE,{
      style: 'ter'
    })
    viewer.addBaseLayer(baselayer_ter, {
      iconUrl: '../assets/icon/ter.png',
      name: '地形'
    })

    viewer.zoomToPosition(
      new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
    )
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      viewer.zoomToPosition('105.565571, 31.984708, 15362816, 0, -90')
    </script>
  </body>
 </html>
--- a/examples/baselayer/google_no_offset.html
+++ b/examples/baselayer/google_no_offset.html
@@ -1,63 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

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

    viewer.addBaseLayer( baseLayer, {
      iconUrl: '../assets/icon/img.png',
      name: '影像'
    })
      viewer.addBaseLayer(baseLayer, {
        iconUrl: '../assets/icon/img.png',
        name: '影像',
      })

    let  baseLayer_img_cva = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GOOGLE,{
      style:'img_cva',
      crs:'WGS84'
    })
    viewer.addBaseLayer( baseLayer_img_cva, {
      iconUrl: '../assets/icon/img.png',
      name: '影像 + 标注'
    })
      let baseLayer_img_cva = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GOOGLE,
        {
          style: 'img_cva',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer_img_cva, {
        iconUrl: '../assets/icon/img.png',
        name: '影像 + 标注',
      })

    let baselayer_elc = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GOOGLE,{
      crs:'WGS84'
    })
    viewer.addBaseLayer(baselayer_elc, {
      iconUrl: '../assets/icon/elec.png',
      name: '电子'
    })
      let baselayer_elc = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GOOGLE,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baselayer_elc, {
        iconUrl: '../assets/icon/elec.png',
        name: '电子',
      })

    let baselayer_ter = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.GOOGLE,{
      style: 'ter',
      crs:'WGS84'
    })
    viewer.addBaseLayer(baselayer_ter, {
      iconUrl: '../assets/icon/ter.png',
      name: '地形'
    })

    viewer.zoomToPosition(
      new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
    )
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      let baselayer_ter = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.GOOGLE,
        {
          style: 'ter',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baselayer_ter, {
        iconUrl: '../assets/icon/ter.png',
        name: '地形',
      })
      viewer.zoomToPosition('105.565571, 31.984708, 15362816, 0, -90')
    </script>
  </body>
 </html>
--- a/examples/baselayer/tdt.html
+++ b/examples/baselayer/tdt.html
@@ -1,80 +1,71 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

 <body>
      let key = '0f7c1d161d7352116a21aacf0e9f44c1'
      let cva = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TDT, {
        key,
        style: 'cva',
      })

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let key = '0f7c1d161d7352116a21aacf0e9f44c1'
    let cva = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TDT,{
      key,
      style: 'cva'
    })
      let vec = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TDT, {
        key,
      })

    let vec = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TDT,{
      key
    })
      let img = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TDT, {
        key,
        style: 'img',
      })

    let img = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TDT,{
      key,
      style: 'img'
    })
      let ter = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TDT, {
        key,
        style: 'ter',
      })

    let ter = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TDT,{
      key,
      style: 'ter'
    })
      viewer.addBaseLayer(img, {
        name: '影像',
        iconUrl: '../assets/icon/img.png',
      })

    viewer.addBaseLayer(img, {
      name: '影像',
      iconUrl: '../assets/icon/img.png'
    })
      viewer.addBaseLayer([img, cva], {
        name: '影像+注记',
        iconUrl: '../assets/icon/img.png',
      })

    viewer.addBaseLayer([img, cva], {
      name: '影像+注记',
      iconUrl: '../assets/icon/img.png'
    })
      viewer.addBaseLayer(vec, {
        name: '电子',
        iconUrl: '../assets/icon/elec.png',
      })

    viewer.addBaseLayer(vec, {
      name: '电子',
      iconUrl: '../assets/icon/elec.png'
    })
      viewer.addBaseLayer([vec, cva], {
        name: '电子+注记',
        iconUrl: '../assets/icon/elec.png',
      })

    viewer.addBaseLayer([vec, cva], {
      name: '电子+注记',
      iconUrl: '../assets/icon/elec.png'
    })
      viewer.addBaseLayer(ter, {
        name: '地形',
        iconUrl: '../assets/icon/ter.png',
      })

    viewer.addBaseLayer(ter, {
      name: '地形',
      iconUrl: '../assets/icon/ter.png'
    })

    viewer.addBaseLayer([ter, cva], {
      name: '地形+注记',
      iconUrl: '../assets/icon/ter.png'
    })

    viewer.zoomToPosition(
      new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
    )
  }
    DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      viewer.addBaseLayer([ter, cva], {
        name: '地形+注记',
        iconUrl: '../assets/icon/ter.png',
      })
      viewer.zoomToPosition('105.565571, 31.984708, 15362816, 0, -90')
    </script>
  </body>
 </html>
--- a/examples/baselayer/tencent.html
+++ b/examples/baselayer/tencent.html
@@ -1,64 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baselayer_img = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.TENCENT,
        {
          style: 'img',
        }
      )
      let baselayer_vec = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.TENCENT,
        {
          style: 2,
        }
      )
      viewer.addBaseLayer([baselayer_img, baselayer_vec], {
        name: '影像',
        iconUrl: '../assets/icon/img.png',
      })

 <body>
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.TENCENT
      )
      viewer.addBaseLayer(baseLayer, {
        name: '经典',
        iconUrl: '../assets/icon/elec.png',
      })

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer_img = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TENCENT,{
      style:'img'
    })
    let baselayer_vec = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TENCENT,{
      style: 2
    })
    viewer.addBaseLayer([baselayer_img,baselayer_vec], {
      name: '影像',
      iconUrl: '../assets/icon/img.png'
    })
      let baselayer_2 = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.TENCENT,
        {
          style: 4,
        }
      )
      viewer.addBaseLayer(baselayer_2, {
        name: '墨渊',
        iconUrl: '../assets/icon/dark.png',
      })

    let  baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TENCENT)
    viewer.addBaseLayer( baseLayer, {
      name: '经典',
      iconUrl: '../assets/icon/elec.png'
    })

    let baselayer_2 = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TENCENT,{
      style: 4
    })
    viewer.addBaseLayer(baselayer_2, {
      name: '墨渊',
      iconUrl: '../assets/icon/dark.png'
    })

    let baselayer_3 = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.TENCENT,{
      style: 8
    })
    viewer.addBaseLayer(baselayer_3, {
      name: '白浅',
      iconUrl: '../assets/icon/elec.png'
    })

    viewer.zoomToPosition(
      new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
    )
  }
    DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>

 </body>
      let baselayer_3 = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.TENCENT,
        {
          style: 8,
        }
      )
      viewer.addBaseLayer(baselayer_3, {
        name: '白浅',
        iconUrl: '../assets/icon/elec.png',
      })
      viewer.zoomToPosition('105.565571, 31.984708, 15362816, 0, -90')
    </script>
  </body>
 </html>
--- a/examples/datav/heat.html
+++ b/examples/datav/heat.html
@@ -1,51 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const 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
      }

 <body>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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,{
      crs:'WGS84'
    })
    viewer.addBaseLayer( baseLayer,{
      brightness : 0.1
    })

    viewer.flyToPosition("120.670183527,31.348282115,109658.22,0,-90",()=>{
      let layer = new DC.HeatMapLayer('layer')
      layer.setPoints(generatePosition(1000))
      viewer.addLayer(layer)

    })
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      viewer.flyToPosition('120.670183527,31.348282115,109658.22,0,-90', () => {
        let layer = new DC.HeatMapLayer('layer')
        layer.setPoints(generatePosition(1000))
        viewer.addLayer(layer)
      })
    </script>
  </body>
 </html>
--- a/examples/datav/heat_building.html
+++ b/examples/datav/heat_building.html
@@ -1,55 +1,53 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const 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
      }

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })
      layer.setPoints(generatePosition(10000))
      viewer.addLayer(layer)
    })
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      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)
        }
      )
    </script>
  </body>
 </html>
--- a/examples/datav/heat_height.html
+++ b/examples/datav/heat_height.html
@@ -1,51 +1,49 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const generatePosition = (num) => {
        let list = []
        for (let i = 0; i < num; i++) {
          let lng = 120.38105869 + Math.random() * 0.05
          let lat = 31.10115627 + Math.random() * 0.05
          list.push({ lng, lat })
        }
        return list
      }

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined

  function generatePosition(num) {
    let list = []
    for (let i = 0; i < num; i++) {
      let lng = 120.38105869 + Math.random() * 0.05
      let lat = 31.10115627 + 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
    })
    viewer.flyToPosition("120.58464690,30.57441821,35840.6299288431,5.80,-27.24",()=>{
      let layer = new DC.HeatMapLayer('layer',{})
      layer.setPoints(generatePosition(10000))
      viewer.addLayer(layer)
      let layer2 = new DC.HeatMapLayer('layer2',{ height:4000 })
      layer2.setPoints( generatePosition(10000))
      viewer.addLayer(layer2)
    })
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })
      viewer.flyToPosition(
        '120.58464690,30.57441821,35840.6299288431,5.80,-27.24',
        () => {
          let layer = new DC.HeatMapLayer('layer', {})
          layer.setPoints(generatePosition(10000))
          viewer.addLayer(layer)
          let layer2 = new DC.HeatMapLayer('layer2', { height: 4000 })
          layer2.setPoints(generatePosition(10000))
          viewer.addLayer(layer2)
        }
      )
    </script>
  </body>
 </html>
--- a/examples/datav/wind.html
+++ b/examples/datav/wind.html
@@ -1,115 +1,119 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined

  let windLayer = undefined

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

    fetch('../assets/data/wind.json').then(res=>{
      res.json().then(data => {
        windLayer = new DC.WindLayer('wind',{
          colorScale: [
            'rgb(36,104, 180)',
            'rgb(60,157, 194)',
            'rgb(128,205,193 )',
            'rgb(151,218,168 )',
            'rgb(198,231,181)',
            'rgb(238,247,217)',
            'rgb(255,238,159)',
            'rgb(252,217,125)',
            'rgb(255,182,100)',
            'rgb(252,150,75)',
            'rgb(250,112,52)',
            'rgb(245,64,32)',
            'rgb(237,45,28)',
            'rgb(220,24,32)',
            'rgb(180,0,35)'
          ],
          frameRate: 16,
          maxAge: 60,
          globalAlpha: 0.9,
          velocityScale: 1 / 30,
          paths: 2000
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
          style: 'img',
        }
      )
      viewer.addBaseLayer(baseLayer)
      let windLayer
      fetch('../assets/data/wind.json').then((res) => {
        res.json().then((data) => {
          windLayer = new DC.WindLayer('wind', {
            colorScale: [
              'rgb(36,104, 180)',
              'rgb(60,157, 194)',
              'rgb(128,205,193 )',
              'rgb(151,218,168 )',
              'rgb(198,231,181)',
              'rgb(238,247,217)',
              'rgb(255,238,159)',
              'rgb(252,217,125)',
              'rgb(255,182,100)',
              'rgb(252,150,75)',
              'rgb(250,112,52)',
              'rgb(245,64,32)',
              'rgb(237,45,28)',
              'rgb(220,24,32)',
              'rgb(180,0,35)',
            ],
            frameRate: 16,
            maxAge: 60,
            globalAlpha: 0.9,
            velocityScale: 1 / 30,
            paths: 2000,
          })
          windLayer.setData(data)
          viewer.addLayer(windLayer)
          addGuiController() // add controller
        })
        windLayer.setData(data)
        viewer.addLayer(windLayer)
        addGuiController() // add controller
      })

    })
  }

  function  addGuiController(){

    let controls = {
      show:true,
      globalAlpha :0.8,
      maxAge : 60,
      paths:2000,
      velocityScale: 0.03,
      lineWidth:1
    }
    let gui = new dat.GUI();

    gui.add(controls,'show').onChange(value=>{
      windLayer.show = value
    })

    gui.add(controls,'globalAlpha',0,1).step(0.1).onChange(value=>{
      windLayer.setOptions({
        globalAlpha:value
      })
    })
    gui.add(controls,'maxAge',0,180).step(5).onChange(value=>{
      windLayer.setOptions({
        maxAge:value
      })
    })
    gui.add(controls,'paths',1000,4000).step(100).onChange(value=>{
      windLayer.setOptions({
        paths:value
      })
    })
      function addGuiController() {
        let controls = {
          show: true,
          globalAlpha: 0.8,
          maxAge: 60,
          paths: 2000,
          velocityScale: 0.03,
          lineWidth: 1,
        }
        let gui = new dat.GUI()

    gui.add(controls,'velocityScale',0.01,0.1).step(0.01).onChange(value=>{
      windLayer.setOptions({
        velocityScale:value
      })
    })
        gui.add(controls, 'show').onChange((value) => {
          windLayer.show = value
        })

    gui.add(controls,'lineWidth',1,3).step(0.1).onChange(value=>{
      windLayer.setOptions({
        lineWidth:value
      })
    })
        gui
          .add(controls, 'globalAlpha', 0, 1)
          .step(0.1)
          .onChange((value) => {
            windLayer.setOptions({
              globalAlpha: value,
            })
          })
        gui
          .add(controls, 'maxAge', 0, 180)
          .step(5)
          .onChange((value) => {
            windLayer.setOptions({
              maxAge: value,
            })
          })
        gui
          .add(controls, 'paths', 1000, 4000)
          .step(100)
          .onChange((value) => {
            windLayer.setOptions({
              paths: value,
            })
          })

  }
        gui
          .add(controls, 'velocityScale', 0.01, 0.1)
          .step(0.01)
          .onChange((value) => {
            windLayer.setOptions({
              velocityScale: value,
            })
          })

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
        gui
          .add(controls, 'lineWidth', 1, 3)
          .step(0.1)
          .onChange((value) => {
            windLayer.setOptions({
              lineWidth: value,
            })
          })
      }
    </script>
  </body>
 </html>
--- a/examples/echarts/airline.html
+++ b/examples/echarts/airline.html
@@ -14,25 +14,24 @@
    <div id="viewer-container" class="viewer-container"></div>

    <script>
      let viewer = undefined
      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 layer = new DC.ChartLayer('layer', viewer)
        layer.setOption(getOption())
        viewer.addLayer(layer)
        viewer.flyToPosition(
          '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
        )
      }
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      DC.registerLib('echarts', echarts)
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })
      let layer = new DC.ChartLayer('layer', viewer)
      layer.setOption(getOption())
      viewer.addLayer(layer)
      viewer.flyToPosition(
        '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
      )

      function getOption(e) {
        let geoCoordMap = {
@@ -401,11 +400,6 @@
          series: n,
        }
      }

      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
        echarts: window.echarts,
      }).then(initViewer)
    </script>
  </body>
 </html>
--- a/examples/echarts/logistics.html
+++ b/examples/echarts/logistics.html
@@ -14,25 +14,24 @@
    <div id="viewer-container" class="viewer-container"></div>

    <script>
      let viewer = undefined
      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 layer = new DC.ChartLayer('layer', viewer)
        layer.setOption(getOption())
        viewer.addLayer(layer)
        viewer.flyToPosition(
          '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
        )
      }
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      DC.registerLib('echarts', echarts)
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })
      let layer = new DC.ChartLayer('layer', viewer)
      layer.setOption(getOption())
      viewer.addLayer(layer)
      viewer.flyToPosition(
        '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
      )

      function getOption(e) {
        let chinaGeoCoordMap = {
@@ -412,11 +411,6 @@
          series,
        }
      }

      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
        echarts: window.echarts,
      }).then(initViewer)
    </script>
  </body>
 </html>
--- a/examples/echarts/migrate.html
+++ b/examples/echarts/migrate.html
@@ -14,26 +14,25 @@
    <div id="viewer-container" class="viewer-container"></div>

    <script>
      let viewer = undefined
      function initViewer() {
        viewer = new DC.Viewer('viewer-container')
        let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
          DC.ImageryType.AMAP,
          {
            crs: 'WGS84',
          }
        )
        viewer.addBaseLayer(baseLayer, {
          brightness: 0.1,
        })
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      DC.registerLib('echarts', echarts)
      let  viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })

        let layer = new DC.ChartLayer('layer', viewer)
        layer.setOption(getOption())
        viewer.addLayer(layer)
        viewer.flyToPosition(
          '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
        )
      }
      let layer = new DC.ChartLayer('layer', viewer)
      layer.setOption(getOption())
      viewer.addLayer(layer)
      viewer.flyToPosition(
        '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
      )

      function getOption() {
        let geoCoordMap = {
@@ -323,11 +322,6 @@
          series: series,
        }
      }

      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
        echarts: window.echarts,
      }).then(initViewer)
    </script>
  </body>
 </html>
--- a/examples/echarts/plane.html
+++ b/examples/echarts/plane.html
@@ -14,25 +14,24 @@
    <div id="viewer-container" class="viewer-container"></div>

    <script>
      let viewer = undefined
      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 layer = new DC.ChartLayer('layer', viewer)
        layer.setOption(getOption())
        viewer.addLayer(layer)
        viewer.flyToPosition(
          '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
        )
      }
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      DC.registerLib('echarts', echarts)
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })
      let layer = new DC.ChartLayer('layer', viewer)
      layer.setOption(getOption())
      viewer.addLayer(layer)
      viewer.flyToPosition(
        '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
      )

      function getOption(e) {
        let chinaGeoCoordMap = {
@@ -360,11 +359,6 @@
          series,
        }
      }

      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
        echarts: window.echarts,
      }).then(initViewer)
    </script>
  </body>
 </html>
--- a/examples/echarts/pm.html
+++ b/examples/echarts/pm.html
@@ -14,25 +14,24 @@
    <div id="viewer-container" class="viewer-container"></div>

    <script>
      let viewer = undefined
      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 layer = new DC.ChartLayer('layer', viewer)
        layer.setOption(getOption())
        viewer.addLayer(layer)
        viewer.flyToPosition(
          '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
        )
      }
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      DC.registerLib('echarts', echarts)
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })
      let layer = new DC.ChartLayer('layer', viewer)
      layer.setOption(getOption())
      viewer.addLayer(layer)
      viewer.flyToPosition(
        '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
      )

      function getOption() {
        let data = [
@@ -496,10 +495,6 @@
          ],
        }
      }
      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
        echarts: window.echarts,
      }).then(initViewer)
    </script>
  </body>
 </html>
--- a/examples/echarts/population_mobility.html
+++ b/examples/echarts/population_mobility.html
@@ -14,25 +14,24 @@
    <div id="viewer-container" class="viewer-container"></div>

    <script>
      let viewer = undefined
      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 layer = new DC.ChartLayer('layer', viewer)
        layer.setOption(getOption())
        viewer.addLayer(layer)
        viewer.flyToPosition(
          '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
        )
      }
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      DC.registerLib('echarts', echarts)
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })
      let layer = new DC.ChartLayer('layer', viewer)
      layer.setOption(getOption())
      viewer.addLayer(layer)
      viewer.flyToPosition(
        '115.79782534952115,31.47385026585756,4856091.799441838,0,-90'
      )

      function getOption(e) {
        let allData = {
@@ -3256,11 +3255,6 @@
          ],
        }
      }

      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
        echarts: window.echarts,
      }).then(initViewer)
    </script>
  </body>
 </html>
--- a/examples/effect/black_and_white.html
+++ b/examples/effect/black_and_white.html
@@ -1,51 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      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
        })
    </script>
  </body>
 </html>
--- a/examples/effect/bloom.html
+++ b/examples/effect/bloom.html
@@ -1,67 +1,96 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>
      let effect = new DC.Effect(viewer)
      effect.bloom.enable = true
      effect.bloom.brightness = 0.3

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  let effect = undefined
      let layer = new DC.TilesetLayer('layer')
      viewer.addLayer(layer)
      let build = new DC.Tileset(
        'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
        { skipLevels: true }
      )
      let customShader = new DC.CustomShader({
        fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
         vec4 position = czm_inverseModelView * vec4(fsInput.attributes.positionEC,1); // 位置
         float glowRange = 100.0; // 光环的移动范围(高度)
         vec4 temp = vec4(0.2,  0.5, 1.0, 1.0); // 颜色
         temp *= 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));
         material.diffuse = vec3(temp.rgb + temp.rgb * (1.0 - diff)) ;
       }
      `,
      })
      build.setCustomShader(customShader)
      layer.addOverlay(build)
      viewer.flyTo(build)

  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.bloom.enable= true
    addGuiController() // add controller
  }

  function addGuiController(){
    let controls = {
      enable:true,
      contrast: 128,
      brightness: -0.3,
      delta: 1,
      sigma: 3.8,
      stepSize: 5,
    }
    let gui = new dat.GUI()
    gui.add(controls,'enable').onChange(value=>{
      effect.bloom.enable=value
    })
    gui.add(controls,'contrast',0,255).step(1).onChange(value=>{
      effect.bloom.contrast=value
    })
    gui.add(controls,'brightness',-5,5).step(0.1).onChange(value=>{
      effect.bloom.brightness=value
    })
    gui.add(controls,'delta',0,5).step(0.1).onChange(value=>{
      effect.bloom.delta=value
    })
    gui.add(controls,'sigma',0,5).step(0.1).onChange(value=>{
      effect.bloom.delta=value
    })
    gui.add(controls,'stepSize',0,10).step(0.1).onChange(value=>{
      effect.bloom.delta=value
    })
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>


      let controls = {
        enable: true,
        contrast: 128,
        brightness: 0.3,
        delta: 1,
        sigma: 3.8,
        stepSize: 5,
      }
      let gui = new dat.GUI()
      gui.add(controls, 'enable').onChange((value) => {
        effect.bloom.enable = value
      })
      gui
        .add(controls, 'contrast', 0, 255)
        .step(1)
        .onChange((value) => {
          effect.bloom.contrast = value
        })
      gui
        .add(controls, 'brightness', -5, 5)
        .step(0.1)
        .onChange((value) => {
          effect.bloom.brightness = value
        })
      gui
        .add(controls, 'delta', 0, 5)
        .step(0.1)
        .onChange((value) => {
          effect.bloom.delta = value
        })
      gui
        .add(controls, 'sigma', 0, 5)
        .step(0.1)
        .onChange((value) => {
          effect.bloom.delta = value
        })
      gui
        .add(controls, 'stepSize', 0, 10)
        .step(0.1)
        .onChange((value) => {
          effect.bloom.delta = value
        })
    </script>
  </body>
 </html>
--- a/examples/effect/bounds_clip.html
+++ b/examples/effect/bounds_clip.html
@@ -1,122 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">


 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container" style=""></div>
 <script>
  let viewer = undefined
  let effect = undefined

  function initViewer() {
    viewer = new DC.Viewer('viewer-container',{
      orderIndependentTranslucency:false,
      contextOptions:{
        webgl:{
          alpha:true
        }
       }
    }).setOptions({
      showMoon: false,
      showSun: false,
      skyBox: {
        show:false
      },
      showAtmosphere:false,
      globe: {
        showGroundAtmosphere:false,
        depthTestAgainstTerrain: true // 当前示例中的Shader渲染需要开启深度检测，并在无地形时效果好些。
      }
    })
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      style:'img',
      crs:'WGS84'
    })
    viewer.addBaseLayer(baseLayer)

    let Cesium = DC.getLib('Cesium')

    const fs =`
    uniform sampler2D colorTexture;
    uniform sampler2D depthTexture;
    uniform vec3 centerWC;
    uniform vec3 normalWC;
    uniform float radius;
    in vec2 v_textureCoordinates;
    float getDepth(){
      float z_window = czm_unpackDepth(texture(depthTexture, v_textureCoordinates));
      z_window = czm_reverseLogDepth(z_window);
      float n_range = czm_depthRange.near;
      float f_range = czm_depthRange.far;
      return  (2.0 * z_window - n_range - f_range) / (f_range - n_range);
    }

   vec4 toEye(in vec2 uv, in float depth){
      vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));
      vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);
      posInCamera = posInCamera / posInCamera.w;
      return posInCamera;
   }

  vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point){
    vec3 v01 = point - planeOrigin;
    float d = dot(planeNormal, v01) ;
    return (point - planeNormal * d);
  }

    void main() {
      float depth = getDepth();
      vec4 color = texture(colorTexture, v_textureCoordinates);
      vec4 viewPos = toEye(v_textureCoordinates, depth);
      vec4 center = czm_view * vec4(centerWC,1);
      vec4 planeNormal = czm_view * vec4(normalWC,0);
      vec3 prjOnPlane = pointProjectOnPlane(planeNormal.xyz, center.xyz, viewPos.xyz);
      float dis = length(prjOnPlane.xyz - center.xyz);
      if(color.rgb !=vec3(0.0) && dis <= radius && depth < 1.0){
        out_FragColor = vec4(color.rgb, 1.0);
      }
    }`;

    let center = Cesium.Cartesian3.fromDegrees(120,31)
    let up = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(
      center,
      new Cesium.Cartesian3()
    )

    viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
      fragmentShader : fs,
      uniforms : {
        centerWC: function () {
          return center
        },
        normalWC:function () {
          return up
        },
        radius : function () {
          return 10000
        },
      }
    }));

    addGuiController() // add controller
  }

  function addGuiController(){
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
 </html>
--- a/examples/effect/brightness.html
+++ b/examples/effect/brightness.html
@@ -1,53 +1,46 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer)
      let effect = new DC.Effect(viewer)
      effect.brightness.enable = true
      effect.brightness.intensity = 1.5

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  let effect = undefined

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      style:'img',
      crs:'WGS84'
    })
    viewer.addBaseLayer(baseLayer)
    effect = new DC.Effect(viewer)
    effect.brightness.enable= true
    effect.brightness.intensity = 1.5
    addGuiController() // add controller
  }

  function addGuiController(){
    let controls = {
      enable:true,
      intensity: 1.5,
    }
    let gui = new dat.GUI()
    gui.add(controls,'enable').onChange(value=>{
      effect.brightness.enable=value
    })
    gui.add(controls,'intensity',0,5).step(0.1).onChange(value=>{
      effect.brightness.intensity=value
    })
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      let controls = {
        enable: true,
        intensity: 1.5,
      }
      let gui = new dat.GUI()
      gui.add(controls, 'enable').onChange((value) => {
        effect.brightness.enable = value
      })
      gui
        .add(controls, 'intensity', 0, 5)
        .step(0.1)
        .onChange((value) => {
          effect.brightness.intensity = value
        })
    </script>
  </body>
 </html>
--- a/examples/effect/circle_scan.html
+++ b/examples/effect/circle_scan.html
@@ -1,75 +1,71 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container"  class="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="start()">开始</button></li>
    <li><button onclick="stop()">结束</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let circleScan =undefined

  function start(){
    circleScan.start()
  }
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="btn-box">
      <ul>
        <li><button onclick="start()">开始</button></li>
        <li><button onclick="stop()">结束</button></li>
      </ul>
    </div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container').setOptions({
        globe: {
          depthTestAgainstTerrain: true, // 当前示例中的Shader渲染需要开启深度检测，并在无地形时效果好些。
        },
      })
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })
      let layer = new DC.TilesetLayer('layer')
      viewer.addLayer(layer)
      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)'],
        ],
      }
      let tileset = new DC.Tileset(
        'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
      ).setStyle(style)
      layer.addOverlay(tileset)
      let circleScan = new DC.CircleScan(viewer, '121.489206,31.241320', 1000, {
        speed: 3,
      }) // 扫描圈
      viewer.flyToPosition(
        new DC.Position(121.491415, 31.208443, 1954.04, 0, -28)
      )

  function stop(){
    circleScan.stop()
  }
      function start() {
        circleScan.start()
      }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container').setOptions({
      globe: {
        depthTestAgainstTerrain: true // 当前示例中的Shader渲染需要开启深度检测，并在无地形时效果好些。
      function stop() {
        circleScan.stop()
      }
    })
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      crs:'WGS84'
    })
    viewer.addBaseLayer( baseLayer,{
      brightness:0.1
    })
    let layer = new DC.TilesetLayer('layer')
    viewer.addLayer(layer)
    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)']
      ]
    }
    let tileset = new DC.Tileset(
      'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
    ).setStyle(style)
    layer.addOverlay(tileset)
    circleScan = new DC.CircleScan(viewer,'121.489206,31.241320', 1000,{
      speed: 3
    }) // 扫描圈
    viewer.flyToPosition(new DC.Position(121.491415, 31.208443, 1954.04, 0, -28))
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
    </script>
  </body>
 </html>
--- a/examples/effect/depth_of_field.html
+++ b/examples/effect/depth_of_field.html
@@ -1,64 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer)
      let effect = new DC.Effect(viewer)
      effect.depthOfField.enable = true

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  let effect = undefined

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

  function addGuiController(){
    let controls = {
      enable:true,
      focalDistance: 87,
      delta: 1,
      sigma: 3.8,
      stepSize: 2.5,
    }
    let gui = new dat.GUI()
    gui.add(controls,'enable').onChange(value=>{
      effect.depthOfField.enable=value
    })
    gui.add(controls,'focalDistance',0,1000).step(1).onChange(value=>{
      effect.depthOfField.focalDistance=value
    })
    gui.add(controls,'delta',0,5).step(0.1).onChange(value=>{
      effect.depthOfField.delta=value
    })
    gui.add(controls,'sigma',0,5).step(0.1).onChange(value=>{
      effect.depthOfField.sigma=value
    })
    gui.add(controls,'stepSize',0,10).step(0.1).onChange(value=>{
      effect.depthOfField.stepSize=value
    })
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      let controls = {
        enable: true,
        focalDistance: 87,
        delta: 1,
        sigma: 3.8,
        stepSize: 2.5,
      }
      let gui = new dat.GUI()
      gui.add(controls, 'enable').onChange((value) => {
        effect.depthOfField.enable = value
      })
      gui
        .add(controls, 'focalDistance', 0, 1000)
        .step(1)
        .onChange((value) => {
          effect.depthOfField.focalDistance = value
        })
      gui
        .add(controls, 'delta', 0, 5)
        .step(0.1)
        .onChange((value) => {
          effect.depthOfField.delta = value
        })
      gui
        .add(controls, 'sigma', 0, 5)
        .step(0.1)
        .onChange((value) => {
          effect.depthOfField.sigma = value
        })
      gui
        .add(controls, 'stepSize', 0, 10)
        .step(0.1)
        .onChange((value) => {
          effect.depthOfField.stepSize = value
        })
    </script>
  </body>
 </html>
--- a/examples/effect/lens_flare.html
+++ b/examples/effect/lens_flare.html
@@ -1,65 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer)
      let effect = new DC.Effect(viewer)
      effect.lensFlare.enable = true

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
      let controls = {
        enable: true,
        intensity: 2,
        distortion: 10,
        dirtAmount: 0.4,
        haloWidth: 0.4,
      }
      let gui = new dat.GUI()
      gui.add(controls, 'enable').onChange((value) => {
        effect.lensFlare.enable = value
      })

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  let effect = undefined

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

  function addGuiController(){
    let controls = {
      enable: true,
      intensity: 2,
      distortion: 10,
      dirtAmount: 0.4,
      haloWidth: 0.4,
    }
    let gui = new dat.GUI()
    gui.add(controls,'enable').onChange(value=>{
      effect.lensFlare.enable=value
    })

    gui.add(controls,'intensity',0,10).step(0.1).onChange(value=>{
      effect.lensFlare.intensity=value
    })
    gui.add(controls,'distortion',0,100).step(1).onChange(value=>{
      effect.lensFlare.delta=value
    })
    gui.add(controls,'dirtAmount',0,10).step(0.01).onChange(value=>{
      effect.lensFlare.dirtAmount=value
    })
    gui.add(controls,'haloWidth',0,10).step(0.01).onChange(value=>{
      effect.lensFlare.haloWidth=value
    })
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      gui
        .add(controls, 'intensity', 0, 10)
        .step(0.1)
        .onChange((value) => {
          effect.lensFlare.intensity = value
        })
      gui
        .add(controls, 'distortion', 0, 100)
        .step(1)
        .onChange((value) => {
          effect.lensFlare.delta = value
        })
      gui
        .add(controls, 'dirtAmount', 0, 10)
        .step(0.01)
        .onChange((value) => {
          effect.lensFlare.dirtAmount = value
        })
      gui
        .add(controls, 'haloWidth', 0, 10)
        .step(0.01)
        .onChange((value) => {
          effect.lensFlare.haloWidth = value
        })
    </script>
  </body>
 </html>
--- a/examples/effect/night_vision.html
+++ b/examples/effect/night_vision.html
@@ -1,50 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">


 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>


 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  let effect = undefined

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

  function addGuiController(){
    let controls = {
      enable :true,
    }
    let gui = new dat.GUI();
    gui.add(controls,'enable').onChange(value=>{
      effect.night.enable = value
    })
  }

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer)
      let effect = new DC.Effect(viewer)
      effect.night.enable = true

      let controls = {
        enable: true,
      }
      let gui = new dat.GUI()
      gui.add(controls, 'enable').onChange((value) => {
        effect.night.enable = value
      })
    </script>
  </body>
 </html>
--- a/examples/effect/radar_scan.html
+++ b/examples/effect/radar_scan.html
@@ -1,76 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="start()">开始</button></li>
    <li><button onclick="stop()">结束</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let radarScan = undefined

  function start(){
    radarScan.start()
  }

  function stop(){
    radarScan.stop()
  }

  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="btn-box">
      <ul>
        <li><button onclick="start()">开始</button></li>
        <li><button onclick="stop()">结束</button></li>
      </ul>
    </div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container').setOptions({
        globe: {
          depthTestAgainstTerrain: true,
        },
      })
      let baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({
        crs: 'WGS84',
      })
      viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      })
      let layer = new DC.TilesetLayer('layer')
      viewer.addLayer(layer)
      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)'],
        ],
      }
      let tileset = new DC.Tileset(
        'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
      ).setStyle(style)
      layer.addOverlay(tileset)
      let radarScan = new DC.RadarScan(viewer, '121.489206,31.241320', 1000, {
        speed: 3,
      })
      viewer.flyToPosition(
        new DC.Position(121.491415, 31.208443, 1954.04, 0, -28)
      )
      function start() {
        radarScan.start()
      }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container').setOptions({
      globe: {
        depthTestAgainstTerrain: true
      function stop() {
        radarScan.stop()
      }
    })
    let  baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({
      crs: 'WGS84'
    })
    viewer.addBaseLayer( baseLayer,{
      brightness:0.1
    })
    let layer = new DC.TilesetLayer('layer')
    viewer.addLayer(layer)
    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)']
      ]
    }
    let tileset = new DC.Tileset(
      'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
    ).setStyle(style)
    layer.addOverlay(tileset)
    radarScan =new DC.RadarScan( viewer,'121.489206,31.241320',1000,{
      speed: 3
    })
    viewer.flyToPosition(new DC.Position(121.491415, 31.208443, 1954.04, 0, -28))
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
    </script>
  </body>
 </html>
--- a/examples/effect/silhouette.html
+++ b/examples/effect/silhouette.html
@@ -1,42 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
 <body>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baselayer_midnight = DC.ImageryLayerFactory.createAMapImageryLayer({
        style: 'img',
      })
      viewer.addBaseLayer(baselayer_midnight)
      let effect = new DC.Effect(viewer)
      effect.silhouette.enable = true

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  let effect = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer_midnight = DC.ImageryLayerFactory.createAMapImageryLayer({style:'img'})
    viewer.addBaseLayer(baselayer_midnight)
    effect =  new DC.Effect(viewer)
    effect.silhouette.enable= true
    addGuiController() // add controller
  }

  function addGuiController(){
    let controls = {
      enable:true,
    }
    let gui = new dat.GUI()
    gui.add(controls,'enable').onChange(value=>{
      effect.silhouette.enable=value
    })
  }

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      let controls = {
        enable: true,
      }
      let gui = new dat.GUI()
      gui.add(controls, 'enable').onChange((value) => {
        effect.silhouette.enable = value
      })
    </script>
  </body>
 </html>
--- a/examples/effect/sky_line.html
+++ b/examples/effect/sky_line.html
@@ -1,65 +1,59 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  let effect = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      style: 'img'
    })
    viewer.addBaseLayer(baselayer)
    effect =  new DC.Effect(viewer)

    let layer = new DC.TilesetLayer('layer')
    viewer.addLayer(layer)
    let  tileset = new DC.Tileset(
      '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
    )
    tileset.setHeight(-420)
    layer.addOverlay(tileset)
    viewer.flyTo(tileset)
   effect.skyLine.enable= true
   addGuiController() // add controller
  }

  function addGuiController(){
    let controls = {
      enable:true,
      depthThreshold: 0.00001,
      color:'#ff0000'
    }
    let gui = new dat.GUI()


    gui.add(controls,'enable').onChange(value=>{
      effect.skyLine.enable=value
    })

    gui.add(controls,'depthThreshold',0.00001,0.1).step(0.001).onChange(value=>{
      effect.skyLine.depthThreshold=value
    })

    gui.addColor(controls,'color').onChange(value=>{
      effect.skyLine.color = DC.Color.fromCssColorString(value)
    })
  }

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baselayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
        }
      )
      viewer.addBaseLayer(baselayer)
      let effect = new DC.Effect(viewer)

      let layer = new DC.TilesetLayer('layer')
      viewer.addLayer(layer)
      let tileset = new DC.Tileset(
        '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
      )
      tileset.setHeight(-420)
      layer.addOverlay(tileset)
      viewer.flyTo(tileset)
      effect.skyLine.enable = true

      let controls = {
        enable: true,
        depthThreshold: 0.00001,
        color: '#ff0000',
      }
      let gui = new dat.GUI()

      gui.add(controls, 'enable').onChange((value) => {
        effect.skyLine.enable = value
      })

      gui
        .add(controls, 'depthThreshold', 0.00001, 0.1)
        .step(0.001)
        .onChange((value) => {
          effect.skyLine.depthThreshold = value
        })

      gui.addColor(controls, 'color').onChange((value) => {
        effect.skyLine.color = DC.Color.fromCssColorString(value)
      })
    </script>
  </body>
 </html>
--- a/examples/effect/weather.html
+++ b/examples/effect/weather.html
@@ -1,104 +1,121 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer)
      let weather = new DC.Weather(viewer)

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>


 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  let weather = undefined

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

  function addGuiController(){
    let controls = {
      cloudEnable: false,
      cloudRotateAmount: 0,
      rainEnable: false,
      rainSpeed: 10.0,
      snowEnable: false,
      snowSpeed: 10.0,
      rainMixNum: 0.5,
      fogEnable: false,
      fogColor: "#000000",
      fogNear:  10,
      fogFar: 200,

    }
    let gui = new dat.GUI();

    let cloud = gui.addFolder("cloud")
    cloud.add(controls,'cloudEnable').name("enable").onChange(value=>{
      weather.cloud.enable = value
    })
    cloud.add(controls,'cloudRotateAmount',0,1,0.1).name("rotateAmount").onChange(value=>{
      weather.cloud.rotateAmount = Number(value)
    })
      let controls = {
        cloudEnable: false,
        cloudRotateAmount: 0,
        rainEnable: false,
        rainSpeed: 10.0,
        snowEnable: false,
        snowSpeed: 10.0,
        rainMixNum: 0.5,
        fogEnable: false,
        fogColor: '#000000',
        fogNear: 10,
        fogFar: 200,
      }
      let gui = new dat.GUI()

    let rain = gui.addFolder("rain")
    rain.add(controls,'rainEnable').name('enable').onChange(value=>{
      weather.rain.enable = value
    })
    rain.add(controls,'rainSpeed',1,20,1).name('speed').onChange(value=>{
      weather.rain.speed = Number(value)
    })
    rain.add(controls,'rainMixNum',0,1,0.1).name('mixNum').onChange(value=>{
      weather.rain.mixNum = Number(value)
    })
      let cloud = gui.addFolder('cloud')
      cloud
        .add(controls, 'cloudEnable')
        .name('enable')
        .onChange((value) => {
          weather.cloud.enable = value
        })
      cloud
        .add(controls, 'cloudRotateAmount', 0, 1, 0.1)
        .name('rotateAmount')
        .onChange((value) => {
          weather.cloud.rotateAmount = Number(value)
        })

    let snow = gui.addFolder("snow")
    snow.add(controls,'snowEnable').name('enable').onChange(value=>{
      weather.snow.enable = value
    })
    snow.add(controls,'snowSpeed',1,20,1).name('speed').onChange(value=>{
      weather.snow.speed = Number(value)
    })
      let rain = gui.addFolder('rain')
      rain
        .add(controls, 'rainEnable')
        .name('enable')
        .onChange((value) => {
          weather.rain.enable = value
        })
      rain
        .add(controls, 'rainSpeed', 1, 20, 1)
        .name('speed')
        .onChange((value) => {
          weather.rain.speed = Number(value)
        })
      rain
        .add(controls, 'rainMixNum', 0, 1, 0.1)
        .name('mixNum')
        .onChange((value) => {
          weather.rain.mixNum = Number(value)
        })

    let fog = gui.addFolder("fog")
    fog.add(controls,'fogEnable').name('enable').onChange(value=>{
      weather.fog.enable = value
    })
    fog.addColor(controls,'fogColor').onChange(value=>{
      weather.fog.color = DC.Color.fromCssColorString(value)
    })
    fog.add(controls,'fogNear',1,20,1).name('near').onChange(value=>{
      weather.fog.fogByDistance = {
        near: Number(value),
        far: Number(controls.fogFar)
      }
    })
    fog.add(controls,'fogFar',0,200000,10).name('far').onChange(value=>{
      weather.fog.fogByDistance = {
        near: Number(controls.fogNear),
        far: Number(value)
      }
    })
  }
      let snow = gui.addFolder('snow')
      snow
        .add(controls, 'snowEnable')
        .name('enable')
        .onChange((value) => {
          weather.snow.enable = value
        })
      snow
        .add(controls, 'snowSpeed', 1, 20, 1)
        .name('speed')
        .onChange((value) => {
          weather.snow.speed = Number(value)
        })

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      let fog = gui.addFolder('fog')
      fog
        .add(controls, 'fogEnable')
        .name('enable')
        .onChange((value) => {
          weather.fog.enable = value
        })
      fog.addColor(controls, 'fogColor').onChange((value) => {
        weather.fog.color = DC.Color.fromCssColorString(value)
      })
      fog
        .add(controls, 'fogNear', 1, 20, 1)
        .name('near')
        .onChange((value) => {
          weather.fog.fogByDistance = {
            near: Number(value),
            far: Number(controls.fogFar),
          }
        })
      fog
        .add(controls, 'fogFar', 0, 200000, 10)
        .name('far')
        .onChange((value) => {
          weather.fog.fogByDistance = {
            near: Number(controls.fogNear),
            far: Number(value),
          }
        })
    </script>
  </body>
 </html>
--- a/examples/event/camera.html
+++ b/examples/event/camera.html
@@ -1,34 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{ style:'img'})
    viewer.addBaseLayer( baseLayer)
    viewer.on(
      DC.SceneEventType.CAMERA_CHANGED,
      e => {},
      this
    )
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        { style: 'img' }
      )
      viewer.addBaseLayer(baseLayer)
      viewer.on(
        DC.SceneEventType.CAMERA_CHANGED,
        (e) => {
          console.log('camera changed')
        },
        this
      )
    </script>
  </body>
 </html>
--- a/examples/event/camera_move_end.html
+++ b/examples/event/camera_move_end.html
@@ -1,31 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{ style:'img'})
    viewer.addBaseLayer( baseLayer)
    viewer.on(DC.SceneEventType.CAMERA_MOVE_END, e => {
      console.log(e)
    })
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        { style: 'img' }
      )
      viewer.addBaseLayer(baseLayer)
      viewer.on(DC.SceneEventType.CAMERA_MOVE_END, (e) => {
        console.log(e)
      })
    </script>
  </body>
 </html>
--- a/examples/event/clock.html
+++ b/examples/event/clock.html
@@ -1,36 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,
      {
        style:'img',
      }
    )
    viewer.addBaseLayer( baseLayer)
    viewer.on(DC.SceneEventType.CLOCK_TICK, e => {
      console.log(e)
    })
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
        }
      )
      viewer.addBaseLayer(baseLayer)
      viewer.on(DC.SceneEventType.CLOCK_TICK, (e) => {
        console.log(e)
      })
    </script>
  </body>
 </html>
--- a/examples/event/layer_mouse.html
+++ b/examples/event/layer_mouse.html
@@ -1,58 +1,49 @@
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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.createImageryLayer(DC.ImageryType.AMAP,
      {
        style:'img',
        crs:'WGS84'
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      const 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
      }
    )
    viewer.addBaseLayer(baseLayer)
    let layer = new DC.VectorLayer('layer')
    viewer.addLayer(layer)

    let positions = generatePosition(10)
    positions.forEach(item => {
      let point = new DC.Point(item)
      layer.addOverlay(point)
    })

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

    viewer.flyTo(layer)
  }

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      let 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 positions = generatePosition(10)
      positions.forEach((item) => {
        let point = new DC.Point(item)
        layer.addOverlay(point)
      })

      layer.on(DC.MouseEventType.CLICK, (e) => {
        console.log(e)
      })
      viewer.flyTo(layer)
    </script>
  </body>
 </html>
--- a/examples/event/overlay_mouse.html
+++ b/examples/event/overlay_mouse.html
@@ -13,9 +13,9 @@
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      let viewer = undefined
      DC.config.baseUrl = '../libs/dc-sdk/resources/'

      function generatePosition(num) {
      const generatePosition = (num) => {
        let list = []
        for (let i = 0; i < num; i++) {
          let lng = 120.38105869 + Math.random() * 0.5
@@ -25,38 +25,36 @@
        return list
      }

      function initViewer() {
        viewer = new DC.Viewer('viewer-container')
        let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        })
        viewer.addBaseLayer(baseLayer)
        viewer.popup.config = {
          customClass: 'custom-popup',
        }
        let layer = new DC.VectorLayer('layer').addTo(viewer)
        viewer.contextMenu.enable = true
        let positions = generatePosition(20)
        positions.forEach((item, index) => {
          let point = new DC.Point(item)
          point.attr = {
            index: index + 1,
          }
          point.on(DC.MouseEventType.CLICK, (e) => {
            viewer.popup.showAt(e.position, `我是第${e.overlay.attr.index}点`)
          })
          point.addTo(layer)
      )
      viewer.addBaseLayer(baseLayer)
      viewer.popup.config = {
        customClass: 'custom-popup',
      }
      let layer = new DC.VectorLayer('layer').addTo(viewer)
      viewer.contextMenu.enable = true
      let positions = generatePosition(20)
      positions.forEach((item, index) => {
        let point = new DC.Point(item)
        point.attr = {
          index: index + 1,
        }
        point.on(DC.MouseEventType.CLICK, (e) => {
          viewer.popup.showAt(e.position, `我是第${e.overlay.attr.index}点`)
        })
        point.addTo(layer)
      })

        viewer.on(DC.MouseEventType.CLICK, (e) => {
          console.log('我是场景事件')
        })
        viewer.flyTo(layer)
      }
      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
      }).then(initViewer)
      viewer.on(DC.MouseEventType.CLICK, (e) => {
        console.log('我是场景事件')
      })
      viewer.flyTo(layer)
    </script>
  </body>
 </html>
--- a/examples/event/overlay_mouse_propagation.html
+++ b/examples/event/overlay_mouse_propagation.html
@@ -13,9 +13,8 @@
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      let viewer = undefined

      function generatePosition(num) {
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      const generatePosition = (num) => {
        let list = []
        for (let i = 0; i < num; i++) {
          let lng = 120.38105869 + Math.random() * 0.5
@@ -25,41 +24,39 @@
        return list
      }

      function initViewer() {
        viewer = new DC.Viewer('viewer-container', {
          eventPropagation: true,
        })
        let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      let viewer = new DC.Viewer('viewer-container', {
        enableEventPropagation: true,
      })


      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        })
        viewer.addBaseLayer(baseLayer)
        viewer.popup.config = {
          customClass: 'custom-popup',
        }
        let layer = new DC.VectorLayer('layer').addTo(viewer)
        viewer.contextMenu.enable = true
        let positions = generatePosition(20)
        positions.forEach((item, index) => {
          let point = new DC.Point(item)
          point.attr = {
            index: index + 1,
          }
          point.on(DC.MouseEventType.CLICK, (e) => {
            viewer.popup.showAt(e.position, `我是第${e.overlay.attr.index}点`)
          })
          point.addTo(layer)
        })

        viewer.on(DC.MouseEventType.CLICK, (e) => {
          console.log('我是场景事件')
      )
      viewer.addBaseLayer(baseLayer)
      viewer.popup.config = {
        customClass: 'custom-popup',
      }
      let layer = new DC.VectorLayer('layer').addTo(viewer)
      let positions = generatePosition(20)
      positions.forEach((item, index) => {
        let point = new DC.Point(item)
        point.attr = {
          index: index + 1,
        }
        point.on(DC.MouseEventType.CLICK, (e) => {
          viewer.popup.showAt(e.position, `我是第${e.overlay.attr.index}点`)
        })
        point.addTo(layer)
      })

        viewer.flyTo(layer)
      }
      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
      }).then(initViewer)
      viewer.on(DC.MouseEventType.CLICK, (e) => {
        console.log('我是场景事件')
      })
      viewer.flyTo(layer)
    </script>
  </body>
 </html>
--- a/examples/event/scene_hooks.html
+++ b/examples/event/scene_hooks.html
@@ -1,53 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer_img = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      style: 'img'
    })


    viewer.on(DC.SceneEventType.PRE_UPDATE,e=>{

    })

    viewer.on(DC.SceneEventType.POST_UPDATE,e=>{

    })

    viewer.on(DC.SceneEventType.PRE_RENDER,e=>{

    })

    viewer.on(DC.SceneEventType.POST_RENDER,e=>{

    })


    viewer.on(DC.SceneEventType.RENDER_ERROR,e=>{

    })

    viewer.addBaseLayer(baseLayer_img)

  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer_img = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
        }
      )

      viewer.on(DC.SceneEventType.PRE_UPDATE, (e) => {
          console.log('do pre update')
      })

      viewer.on(DC.SceneEventType.POST_UPDATE, (e) => {
        console.log('do post update')
      })

      viewer.on(DC.SceneEventType.PRE_RENDER, (e) => {
        console.log('do pre render')
      })

      viewer.on(DC.SceneEventType.POST_RENDER, (e) => {
        console.log('do post render')
      })

      viewer.on(DC.SceneEventType.RENDER_ERROR, (e) => {})

      viewer.addBaseLayer(baseLayer_img)
    </script>
  </body>
 </html>

--- a/examples/event/viewer_mouse.html
+++ b/examples/event/viewer_mouse.html
@@ -1,43 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baseLayer_img = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{
      style: 'img'
    })
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
        }
      )
      viewer.addBaseLayer(baseLayer)

    viewer.on(DC.MouseEventType.CLICK,e=>{
       console.log(e)
    })
      viewer.on(DC.MouseEventType.CLICK, (e) => {
        console.log(e)
      })

    viewer.on(DC.MouseEventType.RIGHT_CLICK,e=>{
      console.log('do right click')
    })
      viewer.on(DC.MouseEventType.RIGHT_CLICK, (e) => {
        console.log('do right click')
      })

    viewer.on(DC.MouseEventType.WHEEL,e=>{
      console.log('do wheel')
    })

    viewer.addBaseLayer(baseLayer_img)

  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      viewer.on(DC.MouseEventType.WHEEL, (e) => {
        console.log('do wheel')
      })
    </script>
  </body>
 </html>

--- a/examples/html/point_html.html
+++ b/examples/html/point_html.html
@@ -1,53 +1,48 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const 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
      }

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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.createImageryLayer(DC.ImageryType.AMAP,{
      style:'img',
      crs:'WGS84'
    })
    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>`
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      layer.addOverlay(divIcon)
    })
    viewer.flyToPosition(
      new DC.Position(120.472147621, 30.61004946, 65380.21, 14.0,  -40.94)
    )
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
      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('120.472147621, 30.61004946, 65380.21, 14.0, -40.94')
    </script>
  </body>
 </html>
--- a/examples/index.html
+++ b/examples/index.html
@@ -146,7 +146,7 @@
  <body>
    <div class="container">
      <div class="nav">
        <div class="banner">DC-SDK v4.3.0</div>
        <div class="banner">DC-SDK v5.0.0</div>
        <div class="example-list-wrapper">
          <div
            id="example-list"
--- a/examples/info/crs_custom_geographic.html
+++ b/examples/info/crs_custom_geographic.html
@@ -1,68 +1,56 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
    <style>
      .viewer-container {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    .viewer-container{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>

  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    viewer.addBaseLayer(DC.ImageryLayerFactory.createCoordImageryLayer({
      tilingScheme: new DC.CustomGeographicTilingScheme(
        {
          origin: [119.75, 32.25],
          resolutions: [
            9.765664903423653e-4, 4.882832451711827e-4, 2.4414162258559134e-4,
            1.2207081129279567e-4, 6.103540564766688e-5, 3.0517702822564394e-5,
            1.5258851412551242e-5, 7.629425705006574e-6, 3.814712853772333e-6,
            1.90735154359766e-6,
          ],
          zoomOffset: -10,
        }
      ),
    }))
    viewer.flyToPosition('120,31,10000,0,-90,0')
    viewer.on(DC.SceneEventType.MORPH_COMPLETE,e=>{
      setTimeout(()=>{
        viewer.flyToPosition('120,31,10000,0,-90,0')
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container').addBaseLayer(
        DC.ImageryLayerFactory.createCoordImageryLayer({
          tilingScheme: new DC.CustomGeographicTilingScheme({
            origin: [119.75, 32.25],
            resolutions: [
              9.765664903423653e-4, 4.882832451711827e-4, 2.4414162258559134e-4,
              1.2207081129279567e-4, 6.103540564766688e-5,
              3.0517702822564394e-5, 1.5258851412551242e-5,
              7.629425705006574e-6, 3.814712853772333e-6, 1.90735154359766e-6,
            ],
            zoomOffset: -10,
          }),
        })
      )
      viewer.flyToPosition('120,31,10000,0,-90,0')
      viewer.on(DC.SceneEventType.MORPH_COMPLETE, (e) => {
        setTimeout(() => {
          viewer.flyToPosition('120,31,10000,0,-90,0')
        })
      })

    })
    addGuiController() // add controller
  }

  function addGuiController() {
    let controls = {
      sceneMode: 3,
    }
    let gui = new dat.GUI();
    gui.add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 }).onChange(value => {
      viewer.changeSceneMode(Number(value), 2)
    })
  }

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      let controls = {
        sceneMode: 3,
      }
      let gui = new dat.GUI()
      gui
        .add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 })
        .onChange((value) => {
          viewer.changeSceneMode(Number(value), 2)
        })
    </script>
  </body>
 </html>
--- a/examples/info/crs_custom_mercator.html
+++ b/examples/info/crs_custom_mercator.html
@@ -1,82 +1,60 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
    <style>
      .viewer-container {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    .viewer-container{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>

  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    viewer.addBaseLayer(DC.ImageryLayerFactory.createCoordImageryLayer({
      tilingScheme: new DC.CustomMercatorTilingScheme(
        {
          origin: [-5781523.99792, 4883853.592505],
          resolutions: [
            132291.9312505292,
            66145.9656252646,
            26458.386250105836,
            19843.789687579378,
            13229.193125052918,
            6614.596562526459,
            2645.8386250105837,
            1322.9193125052918,
            661.4596562526459,
            264.5838625010584,
            132.2919312505292,
            66.1459656252646,
            26.458386250105836,
            19.843789687579378,
            13.229193125052918,
            6.614596562526459,
            2.6458386250105836,
            1.3229193125052918,
            0.6614596562526459
          ],
        }
      ),
    }))
    viewer.flyToPosition('120,31,10000,0,-90,0')
    viewer.on(DC.SceneEventType.MORPH_COMPLETE,e=>{
      setTimeout(()=>{
        viewer.flyToPosition('120,31,10000,0,-90,0')
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      viewer.addBaseLayer(
        DC.ImageryLayerFactory.createCoordImageryLayer({
          tilingScheme: new DC.CustomMercatorTilingScheme({
            origin: [-5781523.99792, 4883853.592505],
            resolutions: [
              132291.9312505292, 66145.9656252646, 26458.386250105836,
              19843.789687579378, 13229.193125052918, 6614.596562526459,
              2645.8386250105837, 1322.9193125052918, 661.4596562526459,
              264.5838625010584, 132.2919312505292, 66.1459656252646,
              26.458386250105836, 19.843789687579378, 13.229193125052918,
              6.614596562526459, 2.6458386250105836, 1.3229193125052918,
              0.6614596562526459,
            ],
          }),
        })
      )
      viewer.flyToPosition('120,31,10000,0,-90,0')
      viewer.on(DC.SceneEventType.MORPH_COMPLETE, (e) => {
        setTimeout(() => {
          viewer.flyToPosition('120,31,10000,0,-90,0')
        })
      })

    })
    addGuiController() // add controller
  }

  function addGuiController() {
    let controls = {
      sceneMode: 3,
    }
    let gui = new dat.GUI();
    gui.add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 }).onChange(value => {
      viewer.changeSceneMode(Number(value), 2)
    })
  }

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      let controls = {
        sceneMode: 3,
      }
      let gui = new dat.GUI()
      gui
        .add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 })
        .onChange((value) => {
          viewer.changeSceneMode(Number(value), 2)
        })
    </script>
  </body>
 </html>
--- a/examples/info/crs_geographic.html
+++ b/examples/info/crs_geographic.html
@@ -1,47 +1,39 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
    <style>
      .viewer-container {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    .viewer-container{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    viewer.addBaseLayer(DC.ImageryLayerFactory.createCoordImageryLayer())
    addGuiController() // add controller
  }

  function addGuiController() {
    let controls = {
      sceneMode: 3,
    }
    let gui = new dat.GUI();
    gui.add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 }).onChange(value => {
      viewer.changeSceneMode(Number(value), 2)
    })
  }

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container').addBaseLayer(
        DC.ImageryLayerFactory.createCoordImageryLayer()
      )
      let controls = {
        sceneMode: 3,
      }
      let gui = new dat.GUI()
      gui
        .add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 })
        .onChange((value) => {
          viewer.changeSceneMode(Number(value), 2)
        })
    </script>
  </body>
 </html>
--- a/examples/info/crs_webMercator.html
+++ b/examples/info/crs_webMercator.html
@@ -1,51 +1,41 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
    <style>
      .viewer-container {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    .viewer-container{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    viewer.addBaseLayer(DC.ImageryLayerFactory.createCoordImageryLayer({
      tilingScheme: new DC.WebMercatorTilingScheme()
    }))
    addGuiController() // add controller
  }


  function addGuiController() {
    let controls = {
      sceneMode: 3,
    }

    let gui = new dat.GUI();

    gui.add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 }).onChange(value => {
      viewer.changeSceneMode(Number(value), 2)
    })
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container').addBaseLayer(
        DC.ImageryLayerFactory.createCoordImageryLayer({
          tilingScheme: new DC.WebMercatorTilingScheme(),
        })
      )
      let controls = {
        sceneMode: 3,
      }
      let gui = new dat.GUI()
      gui
        .add(controls, 'sceneMode', { '2D': 2, '2.5D': 2.5, '3D': 3 })
        .onChange((value) => {
          viewer.changeSceneMode(Number(value), 2)
        })
    </script>
  </body>
 </html>
--- a/examples/info/custom.html
+++ b/examples/info/custom.html
@@ -4,13 +4,13 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js"></script>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Cesium.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css"
      href="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
    <style>
      .viewer-container {
@@ -25,15 +25,11 @@
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      let viewer = undefined
      function initViewer() {
        let CesiumViewer = new Cesium.CesiumWidget('viewer-container', {
          baseLayer: false,
          shouldAnimate: true,
        })
        viewer = new DC.Viewer(CesiumViewer)
      }
      DC.ready().then(initViewer)
      let CesiumViewer = new Cesium.CesiumWidget('viewer-container', {
        baseLayer: false,
        shouldAnimate: true,
      })
      let viewer = new DC.Viewer(CesiumViewer)
    </script>
  </body>
 </html>
--- a/examples/info/start.html
+++ b/examples/info/start.html
@@ -21,13 +21,8 @@
 <body>
 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
  DC.config.baseUrl = '../libs/dc-sdk/resources/'
  let viewer =  new DC.Viewer('viewer-container')
 </script>
 </body>
 </html>
--- a/examples/layer/cluster_circle.html
+++ b/examples/layer/cluster_circle.html
@@ -1,45 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const 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
      }
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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'
      )
    </script>
  </body>
 </html>
--- a/examples/layer/cluster_clustering.html
+++ b/examples/layer/cluster_clustering.html
@@ -1,49 +1,51 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const 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
      }

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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'
      )
    </script>
  </body>
 </html>
--- a/examples/layer/cluster_clustering_image.html
+++ b/examples/layer/cluster_clustering_image.html
@@ -1,55 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const generatePosition = (num) => {
        let list = []
        let images = [
          '../assets/icon/camera.png',
          '../assets/icon/camera_1.png',
          '../assets/icon/camera_2.png',
        ]
        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(),
              style: {
                image: images[Math.floor(Math.random() * images.length)],
              },
            },
          })
        }
        return list
      }

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined

  function generatePosition(num) {
    let list = []
    let images=["../assets/icon/camera.png","../assets/icon/camera_1.png","../assets/icon/camera_2.png"]
    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(),
         style:{
           image:images[Math.floor(Math.random() * images.length)],
         }
      }})
    }
    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',{
      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/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP
      )
      viewer.addBaseLayer(baseLayer)
      let layer = new DC.ClusterLayer('layer', {
        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'
      )
    </script>
  </body>
 </html>
--- a/examples/layer/czml.html
+++ b/examples/layer/czml.html
@@ -25,9 +25,7 @@
    viewer.addLayer(layer)
  }

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

 </script>
 </body>
 </html>
--- a/examples/layer/dynamic.html
+++ b/examples/layer/dynamic.html
@@ -17,7 +17,7 @@
 <script>
  let viewer = undefined

  function generatePosition(num) {
  const  generatePosition = (num) => {
    let list = []
    for (let i = 0; i < num; i++) {
      let lng = 120.65276089+ Math.random() * 0.5
@@ -27,8 +27,8 @@
    return list
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
    let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,
      {
        style:'img',
@@ -51,9 +51,7 @@

    viewer.flyTo(layer)
  }
    DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)

 </script>
 </body>
 </html>
--- a/examples/layer/geojson.html
+++ b/examples/layer/geojson.html
@@ -1,43 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'

 <body>
      let viewer = new DC.Viewer('viewer-container', {
        sceneMode: DC.SceneMode.SCENE2D,
      })

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      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)
    </script>
  </body>
 </html>
--- a/examples/layer/graticule.html
+++ b/examples/layer/graticule.html
@@ -1,37 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
        }
      )
      viewer.addBaseLayer(baseLayer)
      let layer = new DC.GraticuleLayer('layer')
      viewer.addLayer(layer)
    </script>
  </body>
 </html>
--- a/examples/layer/html.html
+++ b/examples/layer/html.html
@@ -1,56 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const 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
      }

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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.createImageryLayer(DC.ImageryType.AMAP,{
      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>`
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
        }
      )
      layer.addOverlay(divIcon)
    })
      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/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      viewer.flyToPosition(
        '120.472147621, 30.61004946, 65380.21, 14.0,  -40.94'
      )
    </script>
  </body>
 </html>
--- a/examples/layer/i3s.html
+++ b/examples/layer/i3s.html
@@ -12,39 +12,32 @@
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      let viewer = undefined
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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.I3SLayer('layer')
      viewer.addLayer(layer)
      let i3s = new DC.I3S(
        'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/Frankfurt2017_vi3s_18/SceneServer/layers/0',
        {
          cesium3dTilesetOptions: {
            skipLevelOfDetail: true,
            maximumScreenSpaceError: 128,
          },
        }
      )
      layer.addOverlay(i3s)

      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.I3SLayer('layer')
        viewer.addLayer(layer)

        let i3s = new DC.I3S(
          'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/Frankfurt2017_vi3s_18/SceneServer/layers/0',
          {
            cesium3dTilesetOptions: {
              skipLevelOfDetail: true,
              maximumScreenSpaceError: 128,
            },
          }
        )
        layer.addOverlay(i3s)

        viewer.flyToPosition(
          '8.667785654590075,50.10358812638023,806.0017044941886,17.973378573231702,-37.940813171994996'
        )
      }
      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
      }).then(initViewer)
      viewer.flyToPosition(
        '8.667785654590075,50.10358812638023,806.0017044941886,17.973378573231702,-37.940813171994996'
      )
    </script>
  </body>
 </html>
--- a/examples/layer/raster_tile.html
+++ b/examples/layer/raster_tile.html
@@ -12,47 +12,40 @@
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      let viewer = undefined

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

        viewer.addBaseLayer(baseLayer, {
          iconUrl: '../assets/icon/elec.png',
          name: '电子',
        })

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

        viewer.addBaseLayer(baseLayer_img, {
          iconUrl: '../assets/icon/img.png',
          name: '影像',
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')

      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP
      )

      viewer.addBaseLayer(baseLayer, {
        iconUrl: '../assets/icon/elec.png',
        name: '电子',
      })

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

      viewer.addBaseLayer(baseLayer_img, {
        iconUrl: '../assets/icon/img.png',
        name: '影像',
      })

      let layer = new DC.RasterTileLayer(
        'layer',
        DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.WMS, {
          url: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?',
          layers: 'nexrad-n0r',
          parameters: {
            transparent: 'true',
            format: 'image/png',
          },
        })

        let layer = new DC.RasterTileLayer(
          'layer',
          DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.WMS, {
            url: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?',
            layers: 'nexrad-n0r',
            parameters: {
              transparent: 'true',
              format: 'image/png',
            },
          })
        )

        viewer.addLayer(layer)
      }

      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
      }).then(initViewer)
      )
      viewer.addLayer(layer)
    </script>
  </body>
 </html>
--- a/examples/layer/tileset.html
+++ b/examples/layer/tileset.html
@@ -12,30 +12,24 @@
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      let viewer = undefined
      let tileset = 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)
        tileset = new DC.Tileset(
          '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
        )
        tileset.setHeight(-420)
        layer.addOverlay(tileset)
        viewer.flyTo(tileset)
      }
      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
      }).then(initViewer)
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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(-420)
      layer.addOverlay(tileset)
      viewer.flyTo(tileset)
    </script>
  </body>
 </html>
--- a/examples/layer/vector.html
+++ b/examples/layer/vector.html
@@ -1,52 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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.createImageryLayer(DC.ImageryType.AMAP,
      {
        style:'img',
        crs:'WGS84'
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const 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
      }
    )
    viewer.addBaseLayer(baseLayer)
    let layer = new DC.VectorLayer('layer')
    viewer.addLayer(layer)
    let positions = generatePosition(20)
    positions.forEach(item => {
      let billboard = new DC.Billboard(item, '../assets/icon/camera.png')
      layer.addOverlay(billboard)
    })
    viewer.flyTo(layer)
  }

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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 positions = generatePosition(20)
      positions.forEach((item) => {
        let billboard = new DC.Billboard(item, '../assets/icon/camera.png')
        layer.addOverlay(billboard)
      })
      viewer.flyTo(layer)
    </script>
  </body>
 </html>
--- a/examples/list.js
+++ b/examples/list.js
@@ -375,10 +375,6 @@ const EXAMPLE_LIST = [
        name: '脉冲圆',
        page: 'circle_pulse.html',
      },
      {
        name: '脉冲圆',
        page: 'circle_pulse.html',
      },
      {
        name: '多彩圆',
        page: 'circle_vary.html',
@@ -629,10 +625,6 @@ const EXAMPLE_LIST = [
        name: '雷达扫描',
        page: 'radar_scan.html',
      },
      {
        name: '区域切割',
        page: 'bounds_clip.html',
      },
      {
        name: '泛光',
        page: 'bloom.html',
@@ -653,6 +645,10 @@ const EXAMPLE_LIST = [
        name: '夜光',
        page: 'night_vision.html',
      },
      {
        name: '黑白',
        page: 'black_and_white.html',
      },
      {
        name: '镜头眩光',
        page: 'lens_flare.html',
--- a/examples/mini-scene/china.html
+++ b/examples/mini-scene/china.html
@@ -23,8 +23,8 @@
    viewer.addLayer(layer_china)
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
    let  baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({
      style: 'img'
    })
@@ -35,7 +35,5 @@
    })
  }

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

 </script>
--- a/examples/mini-scene/dfmz.html
+++ b/examples/mini-scene/dfmz.html
@@ -107,8 +107,8 @@
    viewer.addLayer(layer_road)
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
    let  baseLayer = DC.ImageryLayerFactory.createBaiduImageryLayer({
      style: 'dark',
      crs:'WGS84'
@@ -129,7 +129,5 @@
    })
  }

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

 </script>
--- a/examples/mini-scene/factory.html
+++ b/examples/mini-scene/factory.html
@@ -1,9 +1,7 @@
 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
       DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
    viewer.setOptions({
      shadows:true,
      globe:{
@@ -67,7 +65,5 @@
    layer2.addOverlay(scanCircle)
    viewer.flyToPosition('116.3904847,39.8773787,2807.38,0,-48.89')
  }
    DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)

 </script>
--- a/examples/mini-scene/ljz.html
+++ b/examples/mini-scene/ljz.html
@@ -110,8 +110,8 @@
   })
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
    let  baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({
      style: 'img',
      crs:'WGS84'
@@ -138,7 +138,5 @@
    globeRotate.start()
  }

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

 </script>
--- a/examples/mini-scene/sz.html
+++ b/examples/mini-scene/sz.html
@@ -26,8 +26,8 @@
    layer.addOverlay(build)
    viewer.flyTo(build)
  }
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
    let  baseLayer = DC.ImageryLayerFactory.createAMapImageryLayer({
      style: 'img',
      crs:'WGS84'
@@ -41,7 +41,5 @@
    loadBuild()
  }

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

 </script>
--- a/examples/mini-scene/sz_out.html
+++ b/examples/mini-scene/sz_out.html
@@ -207,7 +207,5 @@
    })
  }

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

 </script>
--- a/examples/model/3dtiles_3dmax.html
+++ b/examples/model/3dtiles_3dmax.html
@@ -1,46 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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(
      'http://data.marsgis.cn/3dtiles/max-ytlhz/tileset.json',
      {
        loadSiblings:false,
        preferLeaves:true,
        maximumScreenSpaceError:2,
        skipLevelOfDetail:true,
        baseScreenSpaceError:126
      }
    )
    layer.addOverlay(tileset)
    viewer.flyTo(tileset)
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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(
        'http://data.marsgis.cn/3dtiles/max-ytlhz/tileset.json',
        {
          loadSiblings: false,
          preferLeaves: true,
          maximumScreenSpaceError: 2,
          skipLevelOfDetail: true,
          baseScreenSpaceError: 126,
        }
      )
      layer.addOverlay(tileset)
      viewer.flyTo(tileset)
    </script>
  </body>
 </html>
--- a/examples/model/3dtiles_custom_shader.html
+++ b/examples/model/3dtiles_custom_shader.html
@@ -1,38 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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.TilesetLayer('layer')
    viewer.addLayer(layer)
    let build = new DC.Tileset(
      'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
      {skipLevels:true}
    )
    let customShader =  new DC.CustomShader({
      fragmentShaderText:`
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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.TilesetLayer('layer')
      viewer.addLayer(layer)
      let build = new DC.Tileset(
        'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
        { skipLevels: true }
      )
      let customShader = new DC.CustomShader({
        fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
         vec4 position = czm_inverseModelView * vec4(fsInput.attributes.positionEC,1); // 位置
         float glowRange = 100.0; // 光环的移动范围(高度)
@@ -44,15 +43,11 @@
         float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
         material.diffuse = vec3(temp.rgb + temp.rgb * (1.0 - diff)) ;
       }
      `
    })
    build.setCustomShader(customShader)
    layer.addOverlay(build)
    viewer.flyTo(build)
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      `,
      })
      build.setCustomShader(customShader)
      layer.addOverlay(build)
      viewer.flyTo(build)
    </script>
  </body>
 </html>
--- a/examples/model/3dtiles_osgb.html
+++ b/examples/model/3dtiles_osgb.html
@@ -1,40 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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/dayanta/tileset.json'
    )
    tileset.setHeight(-420)
    layer.addOverlay(tileset)
    viewer.flyTo(tileset)
  }
    DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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(-420)
      layer.addOverlay(tileset)
      viewer.flyTo(tileset)
    </script>
  </body>
 </html>
--- a/examples/model/3dtiles_shp.html
+++ b/examples/model/3dtiles_shp.html
@@ -12,43 +12,37 @@
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      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)'],
          ],
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
        tileset.setStyle(style)
        layer.addOverlay(tileset)
        viewer.flyTo(tileset)
      )
      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)'],
        ],
      }
      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
      }).then(initViewer)
      tileset.setStyle(style)
      layer.addOverlay(tileset)
      viewer.flyTo(tileset)
    </script>
  </body>
 </html>
--- a/examples/model/3dtiles_style_and_shader.html
+++ b/examples/model/3dtiles_style_and_shader.html
@@ -1,72 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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.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)

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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.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)

    let customShader =  new DC.CustomShader({
      fragmentShaderText:`
      let customShader = new DC.CustomShader({
        fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
         vec4 position = czm_inverseModelView * vec4(fsInput.attributes.positionEC,1); // 位置
         float glowRange = 100.0; // 光环的移动范围(高度)
         vec4 temp = vec4(material.diffuse,material.alpha); // 颜色
         temp *= vec4(vec3(position.z / 100.0), 1.0);  // 渐变
         temp *= vec4(vec3(position.z / 10.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));
         material.diffuse = vec3(temp.rgb + temp.rgb * (1.0 - diff)) ;
       }
      `
    })
    tileset.setCustomShader(customShader)
    layer.addOverlay(tileset)
    viewer.flyTo(tileset)
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      `,
      })
      tileset.setCustomShader(customShader)
      layer.addOverlay(tileset)
      viewer.flyTo(tileset)
    </script>
  </body>
 </html>
--- a/examples/model/i3s.html
+++ b/examples/model/i3s.html
@@ -12,39 +12,32 @@
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      let viewer = undefined
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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.I3SLayer('layer')
      viewer.addLayer(layer)

      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.I3SLayer('layer')
        viewer.addLayer(layer)

        let i3s = new DC.I3S(
          'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/Frankfurt2017_vi3s_18/SceneServer/layers/0',
          {
            cesium3dTilesetOptions: {
              skipLevelOfDetail: true,
              maximumScreenSpaceError: 128,
            },
          }
        )
        layer.addOverlay(i3s)

        viewer.flyToPosition(
          '8.667785654590075,50.10358812638023,806.0017044941886,17.973378573231702,-37.940813171994996'
        )
      }
      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
      }).then(initViewer)
      let i3s = new DC.I3S(
        'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/Frankfurt2017_vi3s_18/SceneServer/layers/0',
        {
          cesium3dTilesetOptions: {
            skipLevelOfDetail: true,
            maximumScreenSpaceError: 128,
          },
        }
      )
      layer.addOverlay(i3s)
      viewer.flyToPosition(
        '8.667785654590075,50.10358812638023,806.0017044941886,17.973378573231702,-37.940813171994996'
      )
    </script>
  </body>
 </html>
--- a/examples/model/model_primitive.html
+++ b/examples/model/model_primitive.html
@@ -12,9 +12,7 @@
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      let viewer = undefined

      function generatePosition(num) {
      const generatePosition = (num) => {
        let list = []
        for (let i = 0; i < num; i++) {
          let lng = 120.38105869 + Math.random() * 0.5
@@ -31,35 +29,28 @@
        return list
      }

      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.PrimitiveLayer('layer').addTo(viewer)
        let positions = generatePosition(1000)
        positions.forEach((item) => {
          let model = new DC.ModelPrimitive(
            item,
            '../assets/data/Cesium_Air.glb'
          )
          model.setStyle({ scale: 50 })
          layer.addOverlay(model)
        })
        viewer.flyToPosition(
          '120.82005120445152,30.903795335982288,60975.10826917929,341.02,-50.29'
        )
      }
      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
      }).then(initViewer)
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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.PrimitiveLayer('layer').addTo(viewer)
      let positions = generatePosition(100)
      positions.forEach((item) => {
        let model = new DC.ModelPrimitive(item, '../assets/data/Cesium_Air.glb')
        model.setStyle({ scale: 50 })
        layer.addOverlay(model)
      })
      viewer.flyToPosition(
        '120.82005120445152,30.903795335982288,60975.10826917929,341.02,-50.29'
      )
    </script>
  </body>
 </html>
--- a/examples/model/model_primitive_d.html
+++ b/examples/model/model_primitive_d.html
@@ -12,9 +12,7 @@
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      let viewer = undefined

      function generatePosition(num) {
      const generatePosition = (num) => {
        let list = []
        for (let i = 0; i < num; i++) {
          let lng = 120.38105869 + Math.random() * 0.5
@@ -31,47 +29,40 @@
        return list
      }

      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.PrimitiveLayer('layer').addTo(viewer)
        let positions = generatePosition(1000)
        positions.forEach((item) => {
          let model = new DC.ModelPrimitive(
            item,
            '../assets/data/Cesium_Air.glb'
          )
          model.on(DC.ModelEventType.READY, (model) => {
            model.activeAnimations.add({
              index: 0,
              loop: 1,
              multiplier: 1,
            })
            model.activeAnimations.add({
              index: 1,
              loop: 1,
              multiplier: 1,
            })
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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.PrimitiveLayer('layer').addTo(viewer)
      let positions = generatePosition(100)
      positions.forEach((item) => {
        let model = new DC.ModelPrimitive(item, '../assets/data/Cesium_Air.glb')
        model.on(DC.ModelEventType.READY, (model) => {
          model.activeAnimations.add({
            index: 0,
            loop: 1,
            multiplier: 1,
          })
          model.activeAnimations.add({
            index: 1,
            loop: 1,
            multiplier: 1,
          })
          model.setStyle({ scale: 50 })
          layer.addOverlay(model)
        })
        viewer.flyToPosition(
          '120.82005120445152,30.903795335982288,60975.10826917929,341.02,-50.29'
        )
      }
      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
      }).then(initViewer)
        model.setStyle({ scale: 50 })
        layer.addOverlay(model)
      })
      viewer.flyToPosition(
        '120.82005120445152,30.903795335982288,60975.10826917929,341.02,-50.29'
      )
    </script>
  </body>
 </html>
--- a/examples/model/model_vector.html
+++ b/examples/model/model_vector.html
@@ -1,53 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const 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
      }

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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.createImageryLayer(DC.ImageryType.AMAP,{
      style:'img',
      crs:'WGS84'
    })
    viewer.addBaseLayer( baseLayer,{
      brightness:0.1
    })
    let layer = new DC.VectorLayer('layer')
    viewer.addLayer(layer)
    let positions = generatePosition(1)
    positions.forEach(item => {
      let model = new DC.Model(item, '../assets/data/ParcLeadMine.glb')
      layer.addOverlay(model)
    })

    viewer.flyTo(layer)
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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 positions = generatePosition(1)
      positions.forEach((item) => {
        let model = new DC.Model(item, '../assets/data/ParcLeadMine.glb')
        layer.addOverlay(model)
      })
      viewer.flyTo(layer)
    </script>
  </body>
 </html>
--- a/examples/model/model_vector_d.html
+++ b/examples/model/model_vector_d.html
@@ -12,9 +12,7 @@
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      let viewer = undefined

      function generatePosition(num) {
      const generatePosition = (num) => {
        let list = []
        for (let i = 0; i < num; i++) {
          let lng = 120.38105869 + Math.random() * 0.5
@@ -24,31 +22,27 @@
        return list
      }

      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 positions = generatePosition(1)
        positions.forEach((item) => {
          let model = new DC.Model(item, '../assets/data/GroundVehicle.glb')
          layer.addOverlay(model)
        })

        viewer.flyTo(layer)
      }
      DC.ready({
        baseUrl: '../libs/dc-sdk/resources/',
      }).then(initViewer)
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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 positions = generatePosition(1)
      positions.forEach((item) => {
        let model = new DC.Model(item, '../assets/data/GroundVehicle.glb')
        layer.addOverlay(model)
      })
      viewer.flyTo(layer)
    </script>
  </body>
 </html>
--- a/examples/offline/blue.html
+++ b/examples/offline/blue.html
@@ -1,31 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.SINGLE_TILE,
        {
          url: '../assets/tile/world_b.jpg',
        }
      )
      viewer.addBaseLayer(baseLayer)
    </script>
  </body>
 </html>
--- a/examples/offline/day.html
+++ b/examples/offline/day.html
@@ -1,31 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let  baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.SINGLE_TILE,{
      url: '../assets/tile/world_d.jpg'
    })
    viewer.addBaseLayer( baseLayer)
  }
    DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.SINGLE_TILE,
        {
          url: '../assets/tile/world_d.jpg',
        }
      )
      viewer.addBaseLayer(baseLayer)
    </script>
  </body>
 </html>
--- a/examples/offline/img.html
+++ b/examples/offline/img.html
@@ -1,31 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let  baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.SINGLE_TILE,{
      url: '../assets/tile/world_img.jpg'
    })
    viewer.addBaseLayer( baseLayer)
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.SINGLE_TILE,
        {
          url: '../assets/tile/world_img.jpg',
        }
      )
      viewer.addBaseLayer(baseLayer)
    </script>
  </body>
 </html>
--- a/examples/offline/night.html
+++ b/examples/offline/night.html
@@ -1,31 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let  baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.SINGLE_TILE,{
      url: '../assets/tile/world_n.jpg'
    })
    viewer.addBaseLayer( baseLayer)
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.SINGLE_TILE,
        {
          url: '../assets/tile/world_n.jpg',
        }
      )
      viewer.addBaseLayer(baseLayer)
    </script>
  </body>
 </html>
--- a/examples/primitive/billboard.html
+++ b/examples/primitive/billboard.html
@@ -1,51 +1,51 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <script src="../dat.gui.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <script src="../dat.gui.min.js"></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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.createImageryLayer(DC.ImageryType.AMAP,{
      style:'img',
      crs:'WGS84'
    })
    viewer.addBaseLayer( baseLayer)
    let layer = new DC.PrimitiveLayer('layer')
    viewer.addLayer(layer)
    let positions = generatePosition(100)
    positions.forEach(item => {
      let billboard = new DC.BillboardPrimitive(item, '../assets/icon/camera.png')
      billboard.on(DC.MouseEventType.CLICK,e=> console.log(e))
      layer.addOverlay(billboard)
    })
    viewer.flyToPosition("120.8226729498609,31.268693185250438,114716.63624611919,0,-90")
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const 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
      }
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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.PrimitiveLayer('layer')
      viewer.addLayer(layer)
      let positions = generatePosition(100)
      positions.forEach((item) => {
        let billboard = new DC.BillboardPrimitive(
          item,
          '../assets/icon/camera.png'
        )
        billboard.on(DC.MouseEventType.CLICK, (e) => console.log(e))
        layer.addOverlay(billboard)
      })
      viewer.flyToPosition(
        '120.8226729498609,31.268693185250438,114716.63624611919,0,-90'
      )
    </script>
  </body>
 </html>
--- a/examples/primitive/billboard_m.html
+++ b/examples/primitive/billboard_m.html
@@ -1,79 +1,83 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <div class="btn-box">
      <ul>
        <li><button onclick="addPoint(100)">一百</button></li>
        <li><button onclick="addPoint(1000)">一千</button></li>
        <li><button onclick="addPoint(10000)">一万</button></li>
        <li><button onclick="addPoint(50000)">五万</button></li>
        <li><button onclick="addPoint(100000)">十万</button></li>
        <li><button onclick="removeAll()">清除</button></li>
      </ul>
    </div>
    <script>
      const 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
      }
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer)
      layer = new DC.PrimitiveLayer('layer')
      viewer.addLayer(layer)
      let positions = generatePosition(100)
      positions.forEach((item) => {
        let billboard = new DC.BillboardPrimitive(
          item,
          '../assets/icon/camera.png'
        )
        billboard.on(DC.MouseEventType.CLICK, (e) => console.log(e))
        layer.addOverlay(billboard)
      })
      viewer.flyToPosition(
        '120.8226729498609,31.268693185250438,114716.63624611919,0,-90'
      )

 <body>
      function addPoint(num) {
        removeAll()
        let start = new Date().getTime()
        let positions = generatePosition(num)
        console.log(
          'create point time: ' + (new Date().getTime() - start) / 1000
        )
        start = new Date().getTime()
        positions.forEach((item) => {
          let billboard = new DC.BillboardPrimitive(
            item,
            '../assets/icon/camera.png'
          )
          billboard.on(DC.MouseEventType.CLICK, (e) => console.log(e))
          layer.addOverlay(billboard)
        })
        console.log('add point time: ' + (new Date().getTime() - start) / 1000)
      }

 <div id="viewer-container" class="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="addPoint(100)">一百</button></li>
    <li><button onclick="addPoint(1000)">一千</button></li>
    <li><button onclick="addPoint(10000)">一万</button></li>
    <li><button onclick="addPoint(50000)">五万</button></li>
    <li><button onclick="addPoint(100000)">十万</button></li>
    <li><button onclick="removeAll()">清除</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let layer = undefined

  function addPoint(num){
    removeAll()
    let start = new Date().getTime()
    let positions = generatePosition(num)
    console.log('create point time: ' + (new Date().getTime() - start) / 1000 )
    start = new Date().getTime()
    positions.forEach(item => {
      let billboard = new DC.BillboardPrimitive(item, '../assets/icon/camera.png')
      billboard.on(DC.MouseEventType.CLICK,e=> console.log(e))
      layer.addOverlay(billboard)
    })
    console.log('add point time: ' + (new Date().getTime() - start) / 1000 )
  }

  function removeAll(){
    layer.clear()
  }

  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.createImageryLayer(DC.ImageryType.AMAP,{
      style:'img',
      crs:'WGS84'
    })
    viewer.addBaseLayer( baseLayer)
    layer = new DC.PrimitiveLayer('layer')
    viewer.addLayer(layer)
    let positions = generatePosition(100)
    positions.forEach(item => {
      let billboard = new DC.BillboardPrimitive(item, '../assets/icon/camera.png')
      billboard.on(DC.MouseEventType.CLICK,e=> console.log(e))
      layer.addOverlay(billboard)
    })
    viewer.flyToPosition("120.8226729498609,31.268693185250438,114716.63624611919,0,-90")
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      function removeAll() {
        layer.clear()
      }
    </script>
  </body>
 </html>
--- a/examples/primitive/bounce_billboard.html
+++ b/examples/primitive/bounce_billboard.html
@@ -1,57 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>
  <body>
    <div id="viewer-container" class="viewer-container"></div>

 <body>
    <script>
      const 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
      }

 <div id="viewer-container" class="viewer-container"></div>

 <script>
  let viewer = undefined
  let layer = 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.createImageryLayer(DC.ImageryType.AMAP,{
      style:'img',
      crs:'WGS84'
    })
    viewer.addBaseLayer( baseLayer)
    layer = new DC.PrimitiveLayer('layer')
    viewer.addLayer(layer)
    let positions = generatePosition(100)
    positions.forEach(item => {
      let billboard = new DC.BounceBillboardPrimitive(item, '../assets/icon/pin.png')
      billboard.setStyle({
        offsetAmount: Math.random()
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer)
      layer = new DC.PrimitiveLayer('layer')
      viewer.addLayer(layer)
      let positions = generatePosition(100)
      positions.forEach((item) => {
        let billboard = new DC.BounceBillboardPrimitive(
          item,
          '../assets/icon/pin.png'
        )
        billboard.setStyle({
          offsetAmount: Math.random(),
        })
        billboard.on(DC.MouseEventType.CLICK, (e) => console.log(e))
        layer.addOverlay(billboard)
      })
      billboard.on(DC.MouseEventType.CLICK,e=> console.log(e))
      layer.addOverlay(billboard)
    })
    viewer.flyToPosition("120.8226729498609,31.268693185250438,114716.63624611919,0,-90")
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      viewer.flyToPosition(
        '120.8226729498609,31.268693185250438,114716.63624611919,0,-90'
      )
    </script>
  </body>
 </html>
--- a/examples/primitive/bounce_label.html
+++ b/examples/primitive/bounce_label.html
@@ -1,56 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  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.createImageryLayer(DC.ImageryType.AMAP,{
      style:'img',
      crs:'WGS84'
    })
    viewer.addBaseLayer( baseLayer)
    let layer = new DC.PrimitiveLayer('layer')
    viewer.addLayer(layer)
    let positions = generatePosition(20)
    positions.forEach(item => {
      let label = new DC.BounceLabelPrimitive(item, '数字视觉')
      label.setStyle({
        offsetAmount: Math.random()
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const 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
      }
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
        DC.ImageryType.AMAP,
        {
          style: 'img',
          crs: 'WGS84',
        }
      )
      viewer.addBaseLayer(baseLayer,{
        brightness:0.1
      })
      label.setStyle({
        fillColor: DC.Color.YELLOW,
        font: '12px'
      let layer = new DC.PrimitiveLayer('layer')
      viewer.addLayer(layer)
      let positions = generatePosition(20)
      positions.forEach((item) => {
        let label = new DC.BounceLabelPrimitive(item, '数字视界')
        label.setStyle({
          offsetAmount: Math.random(),
        })
        label.setStyle({
          fillColor: DC.Color.ORANGE,
          font: '12px',
        })
        layer.addOverlay(label)
      })
      layer.addOverlay(label)
    })
    viewer.flyToPosition("120.8226729498609,31.268693185250438,114716.63624611919,0,-90")
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      viewer.flyToPosition(
        '120.8226729498609,31.268693185250438,114716.63624611919,0,-90'
      )
    </script>
  </body>
 </html>
--- a/examples/primitive/cloud.html
+++ b/examples/primitive/cloud.html
@@ -1,62 +1,59 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined

  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
  }
  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.PrimitiveLayer('layer')
    viewer.addLayer(layer)
    let positions = generatePosition(20)
    positions.forEach(item => {
      let cloud = new DC.CloudPrimitive(item)
      cloud.setStyle({
        scale:{
          x:25,
          y:12,
        },
        maximumSize:{
          x:25,
          y:12,
          z:15,
        },
        slice: 0.36,
        brightness: 1.0,
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      const 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
      }
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let 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.PrimitiveLayer('layer')
      viewer.addLayer(layer)
      let positions = generatePosition(20)
      positions.forEach((item) => {
        let cloud = new DC.CloudPrimitive(item)
        cloud.setStyle({
          scale: {
            x: 25,
            y: 12,
          },
          maximumSize: {
            x: 25,
            y: 12,
            z: 15,
          },
          slice: 0.36,
          brightness: 1.0,
        })
        layer.addOverlay(cloud)
      })
      layer.addOverlay(cloud)
    })
   viewer.zoomToPosition('120.3813868519986,31.101849248610826,990,225,13.26')
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
      viewer.zoomToPosition(
        '120.3813868519986,31.101849248610826,990,225,13.26'
      )
    </script>
  </body>
 </html>
--- a/examples/primitive/elec_ellipsoid.html
+++ b/examples/primitive/elec_ellipsoid.html
@@ -1,35 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>dc-example</title>
    <script src="/libs/dc-sdk/dc.min.js"></script>
    <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
    <link href="../index.css" type="text/css" rel="stylesheet" />
  </head>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>dc-example</title>
  <script src='/libs/dc-sdk/dc.min.js'></script>
  <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
 </head>

 <body>

 <div id="viewer-container" class="viewer-container"></div>
 <script>
  let viewer = undefined

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    viewer.setOptions({
      globe:{
        baseColor:DC.Color.BLACK
      }
    })
    let layer_build = new DC.TilesetLayer('layer_build').addTo(viewer)
    let build = new DC.Tileset(
      'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
      {skipLevels:true}
    )
    let customShader =  new DC.CustomShader({
      fragmentShaderText:`
  <body>
    <div id="viewer-container" class="viewer-container"></div>
    <script>
      DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
      viewer.setOptions({
        globe: {
          baseColor: DC.Color.BLACK,
        },
      })
      let layer_build = new DC.TilesetLayer('layer_build').addTo(viewer)
      let build = new DC.Tileset(
        'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
        { skipLevels: true }
      )
      let customShader = new DC.CustomShader({
        fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
         vec4 position = czm_inverseModelView * vec4(fsInput.attributes.positionEC,1); // 位置
         float glowRange = 100.0; // 光环的移动范围(高度)
@@ -41,24 +37,25 @@
         float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
         material.diffuse = vec3(temp.rgb + temp.rgb * (1.0 - diff)) ;
       }
      `
    })
    build.setCustomShader(customShader)
    layer_build.addOverlay(build)
    let layer = new DC.PrimitiveLayer('layer').addTo(viewer)
    let center = DC.Position.fromObject({lng: 121.49536592256028, lat: 31.241616722278213})
    let elecEllipsoid= new DC.ElecEllipsoidPrimitive(center,{x:1000,y:1000,z:1000})
    elecEllipsoid.setStyle({
      color: DC.Color.GREEN
    })
    layer.addOverlay(elecEllipsoid)
    viewer.flyToPosition("121.4941629,31.2091462,1859.56,0,-28.71")
  }
  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
 </script>
 </body>
 </html>
 </body>
      `,
      })
      build.setCustomShader(customShader)
      layer_build.addOverlay(build)
      let layer = new DC.PrimitiveLayer('layer').addTo(viewer)
      let center = DC.Position.fromObject({
        lng: 121.49536592256028,
        lat: 31.241616722278213,
      })
      let elecEllipsoid = new DC.ElecEllipsoidPrimitive(center, {
        x: 1000,
        y: 1000,
        z: 1000,
      })
      elecEllipsoid.setStyle({
        color: DC.Color.GREEN,
      })
      layer.addOverlay(elecEllipsoid)
      viewer.flyToPosition('121.4941629,31.2091462,1859.56,0,-28.71')
    </script>
  </body>
 </html>
--- a/examples/primitive/flow_line.html
+++ b/examples/primitive/flow_line.html