2 年之前 · 8da75f4af1
--- a/examples/analysis/camera_video.html
+++ b/examples/analysis/camera_video.html
@@ -0,0 +1,77 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="viewer-container">
  <video id="video" muted autoplay loop crossorigin controls>
    <source src="../assets/data/demo.mp4" type="video/mp4" />
  </video>
 </div>

 <script>
  let viewer = undefined
  let cameraVideo = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      style:"img",
      crs:"WGS84"
    })
    viewer.addBaseLayer(baselayer)
    let layer1 = new DC.TilesetLayer('layer').addTo(viewer)
    let tileset = new DC.Tileset(
      '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
    )
    tileset.setHeight(-420)
    layer1.addOverlay(tileset)
    let layer = new DC.CameraVideoLayer('video-layer').addTo(viewer)
    let position =  new DC.Position(
      108.9594135,
      34.2184197,
      100.25,
      4.2,
      -53.5,
    )
    viewer.flyToPosition(
      position,
      () => {
        cameraVideo = new DC.CameraVideo(position,document.getElementById('video'))
        cameraVideo.setStyle({
          fov: 30,
          far: 120,
          near: 0.01,
          aspectRatio: 1.3,
          alpha:0.7
        })
        layer.addOverlay(cameraVideo)
      }
    )

  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/camera_video_mask.html
+++ b/examples/analysis/camera_video_mask.html
@@ -0,0 +1,77 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="viewer-container">
  <video id="video" muted autoplay loop crossorigin controls>
    <source src="../assets/data/demo.mp4" type="video/mp4" />
  </video>
 </div>
 <script>
  let viewer = undefined
  let cameraVideo = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      style:"img",
      crs:"WGS84"
    })
    viewer.addBaseLayer(baselayer)
    let layer1 = new DC.TilesetLayer('layer').addTo(viewer)

    let tileset = new DC.Tileset(
      '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
    )
    tileset.setHeight(-420)
    layer1.addOverlay(tileset)
    let layer = new DC.CameraVideoLayer('video-layer').addTo(viewer)
    let position =  new DC.Position(
      108.9594135,
      34.2184197,
      100.25,
      4.2,
      -53.5,
    )
    viewer.flyToPosition(
      position,
      () => {
        cameraVideo = new DC.CameraVideo(position,document.getElementById('video'),'../assets/analysis/mask.png')
        cameraVideo.setStyle({
          fov: 30,
          far: 120,
          near: 0.01,
          aspectRatio: 1.3,
          alpha:0.7
        })
        layer.addOverlay(cameraVideo)
      }
    )

  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/contourLine.html
+++ b/examples/analysis/contourLine.html
@@ -0,0 +1,91 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="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 terrain = DC.TerrainFactory.createUrlTerrain({
      url: 'http://data.marsgis.cn/terrain'
    })
    viewer.addTerrain(terrain)
    viewer.flyToPosition(
      new DC.Position(
        96.70456483909693,
        28.883444927447762,
        48977.26981733466,
        0,
        -31
      )
    )
    viewer.use(new DC.Analysis())
    viewer.analysis.contourLine()
    addGuiController()
  }

  function addGuiController(){
    let controls = {
      enable: true,
      color:"#FFFF00",
      width: 1,
      spacing: 100,
    }
    let gui = new dat.GUI()

    gui.add(controls,'enable').onChange(value=>{
      if(value){
        viewer.analysis.contourLine(DC.Color.fromCssColorString(controls.color), controls.width, controls.spacing)
      }else{
        viewer.analysis.deactivate()
      }
    })

    gui.addColor(controls,'color').onChange(value=>{
      viewer.analysis.contourLine(DC.Color.fromCssColorString(value), controls.width, controls.spacing)
    })

    gui.add(controls,'width',1,5).step(1).onChange(value=>{
      viewer.analysis.contourLine(DC.Color.fromCssColorString(controls.color), value, controls.spacing)
    })

    gui.add(controls,'spacing',50,300).step(10).onChange(value=>{
      viewer.analysis.contourLine(DC.Color.fromCssColorString(controls.color), controls.width, value)
    })

  }

  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/globe_clipping.html
+++ b/examples/analysis/globe_clipping.html
@@ -0,0 +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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    viewer.setOptions({
      showAtmosphere: false,
      skyBox: {
        show: false
      }
    })
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      crs:"WSG84",
      style:"img"
    })
    viewer.addBaseLayer(baselayer)
    globeClipping = new DC.GlobeClipping(viewer)
    globeClipping.positions =
      '119.89,32.08;121.406,32.08;121.406,30.75;119.89,30.75'
    globeClipping.distance = 200000
    globeClipping.enable = true
    viewer.flyToPosition('120.54777855, 28.74389394,203988.73,0,-38')
    addGuiController() // add controller
  }

  function addGuiController(){
    let controls = {
      enable:true,
      distance: 2e5,
    }
    let gui = new dat.GUI()
    gui.add(controls,'enable').onChange(value=>{
      globeClipping.enable=value
    })
    gui.add(controls,'distance',5e4,3e5).step(2e3).onChange(value=>{
      globeClipping.distance=value
    })
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/measure.html
+++ b/examples/analysis/measure.html
@@ -0,0 +1,136 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="gotoModel()">定位模型</button></li>
    <li><button onclick="deactivate()">清空</button></li>
  </ul>
  <ul>
    <li><button onclick="calcDistance()">空间测距</button></li>
    <li><button onclick="calcArea()">空间面积</button></li>
    <li><button onclick="calcAngle()">角度</button></li>
    <li><button onclick="calcHeight()">高度</button></li>
    <li><button onclick="calcHeading()">偏航角度</button></li>
    <li><button onclick="calcTriangleHeight()">三角测量</button></li>
  </ul>
  <ul>
    <li><button onclick="distanceSurface()">贴地测距</button></li>
    <li><button onclick="areaSurface()">贴地面积</button></li>
    <li><button onclick="calcModelAngle()">贴物角度</button></li>
    <li><button onclick="calcModelHeight()">贴物高度</button></li>
    <li><button onclick="calcModelTriangleHeight()">贴物三角</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let tileset = undefined

  function calcDistance(){
    viewer.measure.distance()
  }

  function distanceSurface(){
    viewer.measure.distanceSurface()
  }

  function calcArea(){
    viewer.measure.area()
  }

  function areaSurface(){
    viewer.measure.areaSurface()
  }

  function calcAngle(){
    viewer.measure.angle()
  }

  function calcModelAngle(){
    viewer.measure.angle({
      clampToModel:true
    })
  }

  function calcHeight(){
    viewer.measure.height()
  }

  function calcModelHeight(){
    viewer.measure.height({
      clampToModel:true
    })
  }

  function calcHeading(){
    viewer.measure.heading()
  }

  function areaHeight(){
    viewer.measure.areaHeight()
  }


  function calcTriangleHeight(){
    viewer.measure.triangleHeight()
  }

  function calcModelTriangleHeight(){
    viewer.measure.triangleHeight({
      clampToModel:true
    })
  }

  function deactivate(){
    viewer.measure.deactivate()
  }

  function gotoModel(){
    viewer.flyTo(tileset)
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      style:'img',
      crs:"WGS84"
    })
    viewer.addBaseLayer(baselayer)
    viewer.use(new DC.Measure())
    let layer = new DC.TilesetLayer('layer').addTo(viewer)
    tileset = new DC.Tileset(
      '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
    )
    tileset.setHeight(-420)
    layer.addOverlay(tileset)
    viewer.flyTo(tileset)
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/model_manager.html
+++ b/examples/analysis/model_manager.html
@@ -0,0 +1,75 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="manager.spread(10,5)">展开</button></li>
    <li><button onclick="manager.combine(4)">合并</button></li>
    <li><button onclick="manager.restore()">还原</button></li>
    <li><button onclick="viewer.flyToPosition('120.72296587904076,31.24839628931203,40.25,338.95,-17.38')">定位</button></li>
  </ul>
  <ul>
    <li><button onclick="manager.showModel(0)">一层</button></li>
    <li><button onclick="manager.showModel(1)">二层</button></li>
    <li><button onclick="manager.showModel(2)">三层</button></li>
    <li><button onclick="manager.showModel(3)">四层</button></li>
    <li><button onclick="manager.showModel(4)">五层</button></li>
    <li><button onclick="manager.showModel(5)">六层</button></li>
    <li><button onclick="manager.showModel(6)">七层</button></li>
    <li><button onclick="manager.showModel(7)">八层</button></li>
    <li><button onclick="manager.showModel(8)">九层</button></li>
    <li><button onclick="manager.showModel(9)">十层</button></li>
  </ul>
 </div>

 <script>
  let viewer = undefined
  let manager = undefined

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    viewer.setOptions({
      globe:{
        baseColor:DC.Color.BLACK
      }
    })
    let layer = new DC.VectorLayer("layer").addTo(viewer)
    for (let i = 0; i < 10; i++) {
      let model = new DC.Model(
        [120.722487, 31.249024, 3 * i - 2.5, 89],
        'examples/data/model/floor.glb'
      )
      layer.addOverlay(model)
    }
    manager = new DC.ModelManager(viewer, layer.getOverlays())
    viewer.flyToPosition('120.72296587904076,31.24839628931203,40.25,338.95,-17.38')
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/model_position.html
+++ b/examples/analysis/model_position.html
@@ -0,0 +1,76 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="translation()">移动</button></li>
    <li><button onclick="rotation()">旋转</button></li>
    <li><button onclick="stop()">结束</button></li>
    <li><button onclick="locate()">定位</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let positionEditor = undefined

  function translation(){
    positionEditor.activate(DC.PositionEditorType.TRANSLATION,e=>{})
  }

  function rotation(){
    positionEditor.activate(DC.PositionEditorType.ROTATION,e=>{})
  }

  function  stop(){
    positionEditor.deactivate()
  }


  function locate(){
    viewer.flyTo(viewer.getLayer("layer"))
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createBaiduImageryLayer({
      style: 'dark',
      crs:"WGS84"
    })
    viewer.addBaseLayer(baselayer)
    let layer = new DC.VectorLayer("layer").addTo(viewer)
    let model = new DC.Model("121.46748793889597,31.22345700031846,200","examples/data/model/Cesium_Air.glb")

    layer.addOverlay(model)
    positionEditor = new DC.PositionEditor(viewer)
    positionEditor.overlay = model
    viewer.flyTo(layer)
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/model_primitive_position.html
+++ b/examples/analysis/model_primitive_position.html
@@ -0,0 +1,76 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="translation()">移动</button></li>
    <li><button onclick="rotation()">旋转</button></li>
    <li><button onclick="stop()">结束</button></li>
    <li><button onclick="locate()">定位</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let positionEditor = undefined

  function translation(){
    positionEditor.activate(DC.PositionEditorType.TRANSLATION,e=>{})
  }

  function rotation(){
    positionEditor.activate(DC.PositionEditorType.ROTATION,e=>{})
  }

  function  stop(){
    positionEditor.deactivate()
  }


  function locate(){
    viewer.flyToPosition("121.46739860539422,31.222994902679385,32,10,-33")
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createBaiduImageryLayer({
      style: 'dark',
      crs:"WGS84"
    })
    viewer.addBaseLayer(baselayer)

    let layer = new DC.PrimitiveLayer("layer").addTo(viewer)
    let model = new DC.ModelPrimitive("121.46748793889597,31.22345700031846","examples/data/model/GroundVehicle.glb")
    layer.addOverlay(model)
    positionEditor = new DC.PositionEditor(viewer)
    positionEditor.overlay = model
    viewer.flyToPosition("121.46739860539422,31.222994902679385,32,10,-33")
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/plane_video.html
+++ b/examples/analysis/plane_video.html
@@ -0,0 +1,74 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="viewer-container">
  <video id="video" muted autoplay loop crossorigin controls>
    <source src="../assets/data/demo.mp4" type="video/mp4" />
  </video>
 </div>
 <script>
  let viewer = undefined
  let planeVideo = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createBaiduImageryLayer({
      style: 'dark',
      crs:'WGS84'
    })
    viewer.addBaseLayer(baselayer)
    let layer1 = new DC.TilesetLayer('layer').addTo(viewer)
    let tileset = new DC.Tileset(
      '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
    )
    tileset.setHeight(-420)
    layer1.addOverlay(tileset)
    let layer = new DC.PlaneVideoLayer('video-layer').addTo(viewer)
    let position =  new DC.Position(
      108.9594135,
      34.2184197,
       50,
    )
    viewer.flyToPosition(
      "108.9596880295684,34.21388323284156,148.15,3.05,-11.5734",
      () => {
        planeVideo = new DC.PlaneVideo(position,document.getElementById('video'))
        planeVideo.setStyle({
          fov: 60,
          far: 120,
          near: 1,
          aspectRatio: 1.3,
        })
        layer.addOverlay(planeVideo)
        layer.showHelp(true,planeVideo)
      }
    )

  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/point_buffer.html
+++ b/examples/analysis/point_buffer.html
@@ -0,0 +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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      crs:"WSG84"
    })
    viewer.addBaseLayer(baselayer)
    let layer = new DC.VectorLayer('layer')
    viewer.addLayer(layer)
    let point = new DC.Point("120.71259021075333,31.22148081085083")
    layer.addOverlay(point)
    let coords = DC.GeoTools.pointBuffer("120.71259021075333,31.22148081085083",100)
    let polygon = new DC.Polygon(coords)
    polygon.setStyle({
      material:DC.Color.RED.withAlpha(0.4)
    })
    layer.addOverlay(polygon)
    viewer.flyTo(layer)
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/polygon_buffer.html
+++ b/examples/analysis/polygon_buffer.html
@@ -0,0 +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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      crs:"WSG84"
    })
    viewer.addBaseLayer(baselayer)
    let layer = new DC.VectorLayer('layer')
    viewer.addLayer(layer)
    let polygon = new DC.Polygon("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343")
    polygon.setStyle({
      zIndex:1,
      material:DC.Color.YELLOW
    })
    layer.addOverlay(polygon)
    let coords = DC.GeoTools.polygonBuffer("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343",150)
    let buffer = new DC.Polygon(coords)
    buffer.setStyle({
      material:DC.Color.RED.withAlpha(0.4)
    })
    layer.addOverlay(buffer)
    viewer.flyTo(layer)
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>







--- a/examples/analysis/polygon_rotate.html
+++ b/examples/analysis/polygon_rotate.html
@@ -0,0 +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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      crs:"WSG84"
    })
    viewer.setOptions({
      enableFxaa:true
    })
    viewer.addBaseLayer(baselayer)
    let layer = new DC.VectorLayer('layer')
    viewer.addLayer(layer)
    let polygon = new DC.Polygon("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343")
    polygon.setStyle({
      material:DC.Color.YELLOW
    })
    layer.addOverlay(polygon)
    let coords = DC.GeoTools.transformPolygonRotate("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343",45)
    polygon = new DC.Polygon(coords)
    polygon.setStyle({
      zIndex:1,
      material:DC.Color.RED.withAlpha(0.5)
    })
    layer.addOverlay(polygon)
    viewer.flyTo(layer)
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>


--- a/examples/analysis/polygon_scale.html
+++ b/examples/analysis/polygon_scale.html
@@ -0,0 +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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      crs:"WSG84"
    })
    viewer.addBaseLayer(baselayer)
    let layer = new DC.VectorLayer('layer')
    viewer.addLayer(layer)
    let polygon = new DC.Polygon("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343")
    polygon.setStyle({
      material:DC.Color.YELLOW
    })
    layer.addOverlay(polygon)
    let coords = DC.GeoTools.transformPolygonScale("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566;120.7140691869497,31.21875584696343",1.5)
    let buffer = new DC.Polygon(coords)
    buffer.setStyle({
      zIndex:1,
      material:DC.Color.RED.withAlpha(0.4)
    })
    layer.addOverlay(buffer)
    viewer.flyTo(layer)
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>







--- a/examples/analysis/polygon_sector.html
+++ b/examples/analysis/polygon_sector.html
@@ -0,0 +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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      crs:"WSG84"
    })
    viewer.addBaseLayer(baselayer)
    let layer = new DC.VectorLayer('layer')
    viewer.addLayer(layer)
    let polygon = new DC.Polygon(DC.GeoTools.sector('120.71259021075333,31.22148081085083',100,20,60))
    polygon.setStyle({
      material: DC.Color.YELLOW,
      extrudedHeight:8,
    })
    layer.addOverlay(polygon)

    polygon = new DC.Polygon(DC.GeoTools.sector('120.71259021075333,31.22148081085083',100,220,260))
    polygon.setStyle({
      material: DC.Color.BLUE.withAlpha(.6),
      outline:true,
      extrudedHeight:1,
    })
    layer.addOverlay(polygon)

    polygon = new DC.Polygon(DC.GeoTools.sector('120.71259021075333,31.22148081085083',100,300,340))
    polygon.setStyle({
      material: DC.Color.RED,
      extrudedHeight:5,
    })
    layer.addOverlay(polygon)
    viewer.flyTo(layer)
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/polyline_buffer.html
+++ b/examples/analysis/polyline_buffer.html
@@ -0,0 +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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      crs:"WSG84"
    })
    viewer.setOptions({
      enableFxaa:true
    })
    viewer.addBaseLayer(baselayer)
    let layer = new DC.VectorLayer('layer')
    viewer.addLayer(layer)
    let polyline = new DC.Polyline("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566")
    polyline.setStyle({
      width:2,
      material:DC.Color.YELLOW,
      zIndex:1
    })
    layer.addOverlay(polyline)
    let coords = DC.GeoTools.polylineBuffer("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566",100)
    let polygon = new DC.Polygon(coords)
    polygon.setStyle({
      material:DC.Color.RED.withAlpha(0.4)

    })
    layer.addOverlay(polygon)
    viewer.flyTo(layer)
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>


--- a/examples/analysis/polyline_rotate.html
+++ b/examples/analysis/polyline_rotate.html
@@ -0,0 +1,63 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      crs:"WSG84"
    })
    viewer.setOptions({
      enableFxaa:true
    })
    viewer.addBaseLayer(baselayer)
    let layer = new DC.VectorLayer('layer')
    viewer.addLayer(layer)
    let polyline = new DC.Polyline("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566")
    polyline.setStyle({
      width:5,
      material:DC.Color.BLUE
    })
    layer.addOverlay(polyline)
    let coords = DC.GeoTools.transformPolylineRotate("120.71259021075333,31.22148081085083;120.71611354431036,31.221447256684566",80)
    polyline = new DC.Polyline(coords)
    polyline.setStyle({
      width:5,
      material:DC.Color.RED
    })
    layer.addOverlay(polyline)
    viewer.flyTo(layer)
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>


--- a/examples/analysis/shadows.html
+++ b/examples/analysis/shadows.html
@@ -0,0 +1,78 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="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

 function start(){
    viewer.analysis.shadows(new Date(),1600)
  }

  function stop(){
    viewer.analysis.deactivate(DC.AnalysisType.SHADOWS)
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      crs:"WGS84"
    })
    viewer.addBaseLayer(baselayer)
    let layer = new DC.TilesetLayer('layer')
    viewer.addLayer(layer)
    let tileset = new DC.Tileset(
      'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
    )
    let style = new DC.TilesetStyle()
    style.color = {
      conditions: [
        ['${Height} >= 300', 'rgba(45, 0, 75, 0.5)'],
        ['${Height} >= 200', 'rgb(102, 71, 151)'],
        ['${Height} >= 100', 'rgb(170, 162, 204)'],
        ['${Height} >= 50', 'rgb(224, 226, 238)'],
        ['${Height} >= 25', 'rgb(252, 230, 200)'],
        ['${Height} >= 10', 'rgb(248, 176, 87)'],
        ['${Height} >= 5', 'rgb(198, 106, 11)'],
        ['true', 'rgb(127, 59, 8)']
      ]
    }
    tileset.setStyle(style)
    layer.addOverlay(tileset)
    viewer.use(new DC.Analysis())
    viewer.flyTo(tileset)
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/sight_circle.html
+++ b/examples/analysis/sight_circle.html
@@ -0,0 +1,92 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="viewer-container"></div>
 <div class="btn-box">
  <ul>
    <li><button onclick="draw()">标绘</button></li>
    <li><button onclick="removeAll()">清除</button></li>
    <li><button onclick="gotoTerrain()">定位山区</button></li>
    <li><button onclick="gotoModel()">定位模型</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let plot = undefined
  let tileset = undefined

  function draw(){
    viewer.analysis.deactivate(DC.AnalysisType.SIGHT_CIRCLE)
    plot.draw(DC.OverlayType.CIRCLE,overlay => {
        viewer.analysis.sightCircle(overlay.center,overlay.radius,[])
    })
  }

  function removeAll(){
    viewer.analysis.deactivate(DC.AnalysisType.SIGHT_CIRCLE)
  }

  function gotoTerrain(){
    removeAll()
    viewer.flyToPosition("102.72499624,30.46623447,13002.32,13.57,-21.91")
  }

  function gotoModel(){
    removeAll()
    viewer.flyTo(tileset)
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    viewer.setOptions({enableFxaa:true})
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      style:"img",
      crs:"WGS84"
    })
    viewer.addBaseLayer(baselayer)
    let terrain = DC.TerrainFactory.createArcgisTerrain({
      url:
        'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer'
    })
    viewer.addTerrain(terrain)
    let tilsetLayer = new DC.TilesetLayer('layer').addTo(viewer)
    tileset = new DC.Tileset(
      '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
    )
    tileset.setHeight(10)
    tilsetLayer.addOverlay(tileset)
    plot = new DC.Plot(viewer,{
      clampToGround: false
    })
    viewer.use(new DC.Analysis())
    viewer.flyToPosition("102.72499624,30.46623447,13002.32,13.57,-21.91")
  }

  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/sight_line.html
+++ b/examples/analysis/sight_line.html
@@ -0,0 +1,137 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

 <div class="btn-box">
  <ul>
    <li><button onclick="drawStartPoint()">起点</button></li>
    <li><button onclick="drawEndPoint()">终点</button></li>
    <li><button onclick="removeAll()">清除</button></li>
    <li><button onclick="gotoTerrain()">定位山区</button></li>
    <li><button onclick="gotoModel()">定位模型</button></li>
  </ul>
 </div>
 <script>
  let viewer = undefined
  let layer = undefined
  let startPoint = undefined
  let endPoint = undefined
  let plot = undefined
  let tileset = undefined

  function drawStartPoint(){
    startPoint &&  layer.removeOverlay(startPoint)
    plot.draw(DC.OverlayType.BILLBOARD,overlay => {
      startPoint = overlay
      startPoint.size=[71,85]
      startPoint.setStyle({
        scale:0.5
      })
      layer.addOverlay(startPoint)
      if(startPoint && endPoint){
        viewer.analysis.deactivate(DC.AnalysisType.SIGHT_LINE)
        viewer.analysis.sightLine( startPoint.position,endPoint.position,[startPoint,endPoint])
      }
    },{
      image:"../assets/icon/start.png",
      width:71,
      height:85,
      scale:0.5
    })
  }

  function drawEndPoint(){
    endPoint &&  layer.removeOverlay(endPoint)
    plot.draw(DC.OverlayType.BILLBOARD,overlay => {
      endPoint = overlay
      endPoint.size=[71,85]
      endPoint.setStyle({
        scale:0.5
      })
      layer.addOverlay(endPoint)
      if(startPoint && endPoint){
        viewer.analysis.deactivate(DC.AnalysisType.SIGHT_LINE)
        viewer.analysis.sightLine( startPoint.position,endPoint.position,[startPoint,endPoint])
      }
    },{
      image:"../assets/icon/end.png",
      width:71,
      height:85,
      scale:0.5
    })

  }

  function removeAll(){
    layer.clear()
    startPoint = undefined
    endPoint = undefined
    viewer.analysis.deactivate(DC.AnalysisType.SIGHT_LINE)
  }

  function gotoTerrain(){
    removeAll()
    viewer.flyToPosition("102.72499624,30.46623447,13002.32,13.57,-21.91")
  }

  function gotoModel(){
    removeAll()
    viewer.flyTo(tileset)
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    viewer.setOptions({enableFxaa:true})
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      style:"img",
      crs:"WGS84"
    })
    viewer.addBaseLayer(baselayer)
    let terrain = DC.TerrainFactory.createArcgisTerrain({
      url:
        'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer'
    })
    viewer.addTerrain(terrain)
    layer = new DC.VectorLayer('layer').addTo(viewer)
    let tilsetLayer = new DC.TilesetLayer('layer').addTo(viewer)
    tileset = new DC.Tileset(
      '//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json'
    )
    tileset.setHeight(10)
    tilsetLayer.addOverlay(tileset)
    plot = new DC.Plot(viewer,{
      clampToGround: false
    })
    viewer.use(new DC.Analysis())
    viewer.flyToPosition("102.72499624,30.46623447,13002.32,13.57,-21.91")
  }

  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/terrain_clipping.html
+++ b/examples/analysis/terrain_clipping.html
@@ -0,0 +1,90 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    viewer.setOptions({
      globe:{
        depthTestAgainstTerrain:true
      }
    })
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      crs:"WSG84",
      style:"img"
    })
    viewer.addBaseLayer(baselayer)
    terrainClipping = new DC.TerrainClipping(viewer,{
      bottomImage: '../assets/analysis/excavate_bottom.jpeg',
      sideImage: '../assets/analysis/excavate_side.png'
    })
    terrainClipping.enable = true
    terrainClipping.height = 20
    plot= new DC.Plot(viewer)
    addGuiController() // add controller
  }

  function addGuiController(){
    let controls = {
      '\u6807\u7ed8':()=>{
        plot.draw(DC.OverlayType.POLYGON,overlay => {
          terrainClipping.positions=overlay.positions
        })
      },
      '\u6e05\u9664':()=>{
        terrainClipping.positions = []
      },
      '\u6df1\u5ea6\u68c0\u6d4b': true,
      enable:true,
      height:20
    }
    let gui = new dat.GUI()
    gui.add(controls,'enable').onChange(value=>{
      terrainClipping.enable = value
    })
    gui.add(controls,'height',20,80).step(10).onChange(value=>{
      terrainClipping.height=value
    })
    gui.add(controls,'深度检测').onChange(value=>{
      viewer.setOptions({
        globe:{
          depthTestAgainstTerrain:value
        }
      })
    })
    gui.add(controls,'标绘')
    gui.add(controls,'清除')
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/terrain_clipping_ch.html
+++ b/examples/analysis/terrain_clipping_ch.html
@@ -0,0 +1,94 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    viewer.setOptions({
      globe:{
        depthTestAgainstTerrain:true
      }
    })
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer({
      crs:"WSG84",
      style:"img"
    })
    viewer.addBaseLayer(baselayer)
    let terrain = DC.TerrainFactory.createUrlTerrain({
      url: 'http://data.marsgis.cn/terrain'
    })
    viewer.addTerrain(terrain)
    terrainClipping = new DC.TerrainClipping(viewer,{
      bottomImage: '../assets/analysis/excavate_bottom.jpeg',
      sideImage: '../assets/analysis/excavate_side.png'
    })
    terrainClipping.enable = true
    terrainClipping.height = 20
    plot= new DC.Plot(viewer)
    addGuiController() // add controller
  }

  function addGuiController(){
    let controls = {
      '\u6807\u7ed8':()=>{
        plot.draw(DC.OverlayType.POLYGON,overlay => {
          terrainClipping.positions=overlay.positions
        })
      },
      '\u6e05\u9664':()=>{
        terrainClipping.positions = []
      },
      '\u6df1\u5ea6\u68c0\u6d4b': true,
      enable:true,
      height:20
    }
    let gui = new dat.GUI()
    gui.add(controls,'enable').onChange(value=>{
      terrainClipping.enable = value
    })
    gui.add(controls,'height',20,80).step(10).onChange(value=>{
      terrainClipping.height=value
    })
    gui.add(controls,'深度检测').onChange(value=>{
      viewer.setOptions({
        globe:{
          depthTestAgainstTerrain:value
        }
      })
    })
    gui.add(controls,'标绘')
    gui.add(controls,'清除')
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/tileset_clipping.html
+++ b/examples/analysis/tileset_clipping.html
@@ -0,0 +1,104 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

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

  function locate(){
    viewer.flyTo(viewer.getLayer("layer").getOverlays()[0])
  }

  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").addTo(viewer)
    let tileset = new DC.Tileset('//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json')
    tileset.setHeight(-420)
    layer.addOverlay(tileset)
    viewer.flyTo(tileset)
    tilesetClipping = new DC.TilesetClipping(tileset)
    tilesetClipping.enable = true
    tilesetClipping.direction = DC.ClippingDirection.LEFT
    plot= new DC.Plot(viewer)
    addGuiController()
  }

  function addGuiController(){
    let controls = {
      '\u65b9\u5411': 'left',
      '\u8ddd\u79bb': 0,
      '\u6807\u7ed8\u7ebf':()=>{
        tilesetClipping.angle = 0
        tilesetClipping.direction = undefined
        plot.draw(DC.OverlayType.POLYLINE,overlay => {
          console.log(overlay.positions)
          tilesetClipping.positions = overlay.positions.slice(0,2)
        })
      },
      '\u6807\u7ed8\u9762':()=>{
        tilesetClipping.angle = 0
        tilesetClipping.direction = undefined
        plot.draw(DC.OverlayType.POLYGON,overlay => {
          console.log(overlay.positions)
          tilesetClipping.positions = overlay.positions
        })
      },
      '\u6e05\u9664':()=>{
        tilesetClipping.positions = []
      },
      '\u89d2\u5ea6': 0,
      enable:true
    }
    let gui = new dat.GUI()
    gui.add(controls,'enable').onChange(value=>{
      tilesetClipping.enable = value
    })
    gui.add(controls,'方向',{ '\u5411\u4e0a': 'up', '\u5411\u4e0b': 'down', '\u5411\u5de6': 'left' , '\u5411\u53f3': 'right','\u5411\u524d': 'front','\u5411\u540e':'back' } ).onChange(value=>{
      tilesetClipping.direction = value
    })
    gui.add(controls,'角度',0,360).step(5).onChange(value=>{
      tilesetClipping.angle=value
    })
    gui.add(controls,'标绘线')
    gui.add(controls,'标绘面')
    gui.add(controls,'距离',-300,300).step(10).onChange(value=>{
      tilesetClipping.distance=value
    })
    gui.add(controls,'清除')
  }

  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/tileset_position.html
+++ b/examples/analysis/tileset_position.html
@@ -0,0 +1,78 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="viewer-container">
  <div class="btn-box">
    <ul>
      <li><button onclick="translation()">移动</button></li>
      <li><button onclick="rotation()">旋转</button></li>
      <li><button onclick="stop()">结束</button></li>
      <li><button onclick="locate()">定位</button></li>
    </ul>
  </div>
 </div>
 <script>
  let viewer = undefined
  let positionEditor = undefined

  function translation(){
    positionEditor.activate(DC.PositionEditorType.TRANSLATION,e=>{})
  }

  function rotation(){
    positionEditor.activate(DC.PositionEditorType.ROTATION,e=>{})
  }

  function  stop(){
    positionEditor.deactivate()
  }


  function locate(){
    viewer.flyTo(viewer.getLayer("layer").getOverlays()[0])
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createBaiduImageryLayer({
      style: 'dark',
      crs:"WGS84"
    })
    viewer.addBaseLayer(baselayer)
    let layer = new DC.TilesetLayer("layer").addTo(viewer)
    let tileset = new DC.Tileset('//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json')
    layer.addOverlay(tileset)
    positionEditor = new DC.PositionEditor(viewer,{
      axisLineScale: 10
    })
    positionEditor.overlay = tileset
    viewer.flyTo(tileset)
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/analysis/viewshed.html
+++ b/examples/analysis/viewshed.html
@@ -0,0 +1,107 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>

 <div id="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)
    viewer.setOptions({
      globe:{
        depthTestAgainstTerrain:true
      }
    })
    let layer = new DC.TilesetLayer("layer").addTo(viewer)
    let tileset = new DC.Tileset('//resource.dvgis.cn/data/3dtiles/dayanta/tileset.json')
    tileset.setHeight(-420)
    layer.addOverlay(tileset)
    viewer.flyTo(tileset)
    viewer.use(new DC.Analysis())
    viewer.analysis.viewshed("108.95772292882747,34.22122559229137,20,130",400, 60,1.3)
    addGuiController()
  }

  function addGuiController(){
    let position =  DC.Position.fromString("108.95772292882747,34.22122559229137,20,130")
    let controls = {
      depthTest: true,
      fov: 60,
      aspectRatio:1.3,
      far:400,
      heading:130,
      showHelp:false
    }
    let gui = new dat.GUI()
    gui.add(controls,'depthTest').onChange(value=>{
      viewer.setOptions({
        globe:{
          depthTestAgainstTerrain:value
        }
      })
    })
    gui.add(controls,'fov',0,100).step(10).onChange(value=>{
      viewer.analysis.viewshed(position,controls.far, value , controls.aspectRatio,{
        showHelp:controls.showHelp
      })
    })

    gui.add(controls,'aspectRatio',1,5).step(0.1).onChange(value=>{
      viewer.analysis.viewshed(position,controls.far, controls.fov , value,{
        showHelp:controls.showHelp
      })
    })

    gui.add(controls,'far',100,1000).step(100).onChange(value=>{
      viewer.analysis.viewshed(position,value,controls.fov ,  controls.aspectRatio,{
        showHelp:controls.showHelp
      })
    })

    gui.add(controls,'heading',0,360).step(5).onChange(value=>{
      position.heading = value
      viewer.analysis.viewshed(position,controls.far,controls.fov ,  controls.aspectRatio,{
        showHelp:controls.showHelp
      })
    })

    gui.add(controls,'showHelp').onChange(value=>{
      viewer.analysis.viewshed(position,controls.far,controls.fov ,controls.aspectRatio,{
        showHelp:value
      })
    })
  }

  DC.ready(initViewer)
 </script>
 </body>
 </html>
--- a/examples/assets/data/Cesium_Air.glb
+++ b/examples/assets/data/Cesium_Air.glb
--- a/examples/assets/data/GroundVehicle.glb
+++ b/examples/assets/data/GroundVehicle.glb
--- a/examples/assets/data/demo.mp4
+++ b/examples/assets/data/demo.mp4
--- a/examples/assets/data/facilities.kml
+++ b/examples/assets/data/facilities.kml
--- a/examples/assets/data/qiche.gltf
+++ b/examples/assets/data/qiche.gltf
--- a/examples/assets/data/simple.czml
+++ b/examples/assets/data/simple.czml
--- a/examples/assets/data/simplestyles.geojson
+++ b/examples/assets/data/simplestyles.geojson
--- a/examples/assets/data/waterNormalsSmall.jpg
+++ b/examples/assets/data/waterNormalsSmall.jpg
--- a/examples/assets/icon/arrow.png
+++ b/examples/assets/icon/arrow.png
--- a/examples/assets/icon/arrow_1.png
+++ b/examples/assets/icon/arrow_1.png
--- a/examples/assets/icon/bg_circle.png
+++ b/examples/assets/icon/bg_circle.png
--- a/examples/assets/icon/camera.png
+++ b/examples/assets/icon/camera.png
--- a/examples/assets/icon/circleScan.png
+++ b/examples/assets/icon/circleScan.png
--- a/examples/assets/icon/circle_bg.png
+++ b/examples/assets/icon/circle_bg.png
--- a/examples/assets/icon/dark.png
+++ b/examples/assets/icon/dark.png
--- a/examples/assets/icon/elec.png
+++ b/examples/assets/icon/elec.png
--- a/examples/assets/icon/end.png
+++ b/examples/assets/icon/end.png
--- a/examples/assets/icon/img.png
+++ b/examples/assets/icon/img.png
--- a/examples/assets/icon/midnight.png
+++ b/examples/assets/icon/midnight.png
--- a/examples/assets/icon/pin.png
+++ b/examples/assets/icon/pin.png
--- a/examples/assets/icon/poi.png
+++ b/examples/assets/icon/poi.png
--- a/examples/assets/icon/redalert.png
+++ b/examples/assets/icon/redalert.png
--- a/examples/assets/icon/screen.png
+++ b/examples/assets/icon/screen.png
--- a/examples/assets/icon/start.png
+++ b/examples/assets/icon/start.png
--- a/examples/assets/icon/ter.png
+++ b/examples/assets/icon/ter.png
--- a/examples/assets/icon/test.png
+++ b/examples/assets/icon/test.png
--- a/examples/assets/icon/waterNormals.jpg
+++ b/examples/assets/icon/waterNormals.jpg
--- a/examples/assets/icon/waterNormalsSmall.jpg
+++ b/examples/assets/icon/waterNormalsSmall.jpg
--- a/examples/assets/images/sky-box/0/back.png
+++ b/examples/assets/images/sky-box/0/back.png
--- a/examples/assets/images/sky-box/0/down.png
+++ b/examples/assets/images/sky-box/0/down.png
--- a/examples/assets/images/sky-box/0/front.png
+++ b/examples/assets/images/sky-box/0/front.png
--- a/examples/assets/images/sky-box/0/left.png
+++ b/examples/assets/images/sky-box/0/left.png
--- a/examples/assets/images/sky-box/0/right.png
+++ b/examples/assets/images/sky-box/0/right.png
--- a/examples/assets/images/sky-box/0/up.png
+++ b/examples/assets/images/sky-box/0/up.png
--- a/examples/assets/images/sky-box/1/back.png
+++ b/examples/assets/images/sky-box/1/back.png
--- a/examples/assets/images/sky-box/1/down.png
+++ b/examples/assets/images/sky-box/1/down.png
--- a/examples/assets/images/sky-box/1/front.png
+++ b/examples/assets/images/sky-box/1/front.png
--- a/examples/assets/images/sky-box/1/left.png
+++ b/examples/assets/images/sky-box/1/left.png
--- a/examples/assets/images/sky-box/1/right.png
+++ b/examples/assets/images/sky-box/1/right.png
--- a/examples/assets/images/sky-box/1/up.png
+++ b/examples/assets/images/sky-box/1/up.png
--- a/examples/assets/images/sky-box/2/back.png
+++ b/examples/assets/images/sky-box/2/back.png
--- a/examples/assets/images/sky-box/2/down.png
+++ b/examples/assets/images/sky-box/2/down.png
--- a/examples/assets/images/sky-box/2/front.png
+++ b/examples/assets/images/sky-box/2/front.png
--- a/examples/assets/images/sky-box/2/left.png
+++ b/examples/assets/images/sky-box/2/left.png
--- a/examples/assets/images/sky-box/2/right.png
+++ b/examples/assets/images/sky-box/2/right.png
--- a/examples/assets/images/sky-box/2/up.png
+++ b/examples/assets/images/sky-box/2/up.png
--- a/examples/assets/images/sky-box/3/back.png
+++ b/examples/assets/images/sky-box/3/back.png
--- a/examples/assets/images/sky-box/3/down.png
+++ b/examples/assets/images/sky-box/3/down.png
--- a/examples/assets/images/sky-box/3/front.png
+++ b/examples/assets/images/sky-box/3/front.png
--- a/examples/assets/images/sky-box/3/left.png
+++ b/examples/assets/images/sky-box/3/left.png
--- a/examples/assets/images/sky-box/3/right.png
+++ b/examples/assets/images/sky-box/3/right.png
--- a/examples/assets/images/sky-box/3/up.png
+++ b/examples/assets/images/sky-box/3/up.png
--- a/examples/assets/images/sky-box/4/back.png
+++ b/examples/assets/images/sky-box/4/back.png
--- a/examples/assets/images/sky-box/4/down.png
+++ b/examples/assets/images/sky-box/4/down.png
--- a/examples/assets/images/sky-box/4/front.png
+++ b/examples/assets/images/sky-box/4/front.png
--- a/examples/assets/images/sky-box/4/left.png
+++ b/examples/assets/images/sky-box/4/left.png
--- a/examples/assets/images/sky-box/4/right.png
+++ b/examples/assets/images/sky-box/4/right.png
--- a/examples/assets/images/sky-box/4/up.png
+++ b/examples/assets/images/sky-box/4/up.png
--- a/examples/assets/images/sky-box/5/back.png
+++ b/examples/assets/images/sky-box/5/back.png
--- a/examples/assets/images/sky-box/5/down.png
+++ b/examples/assets/images/sky-box/5/down.png
--- a/examples/assets/images/sky-box/5/front.png
+++ b/examples/assets/images/sky-box/5/front.png
--- a/examples/assets/images/sky-box/5/left.png
+++ b/examples/assets/images/sky-box/5/left.png
--- a/examples/assets/images/sky-box/5/right.png
+++ b/examples/assets/images/sky-box/5/right.png
--- a/examples/assets/images/sky-box/5/up.png
+++ b/examples/assets/images/sky-box/5/up.png
--- a/examples/assets/images/sky-box/6/back.jpg
+++ b/examples/assets/images/sky-box/6/back.jpg
--- a/examples/assets/images/sky-box/6/down.jpg
+++ b/examples/assets/images/sky-box/6/down.jpg
--- a/examples/assets/images/sky-box/6/front.jpg
+++ b/examples/assets/images/sky-box/6/front.jpg
--- a/examples/assets/images/sky-box/6/left.jpg
+++ b/examples/assets/images/sky-box/6/left.jpg
--- a/examples/assets/images/sky-box/6/right.jpg
+++ b/examples/assets/images/sky-box/6/right.jpg
--- a/examples/assets/images/sky-box/6/up.jpg
+++ b/examples/assets/images/sky-box/6/up.jpg
--- a/examples/assets/tile/world_b.jpg
+++ b/examples/assets/tile/world_b.jpg
--- a/examples/assets/tile/world_d.jpg
+++ b/examples/assets/tile/world_d.jpg
--- a/examples/assets/tile/world_img.jpg
+++ b/examples/assets/tile/world_img.jpg
--- a/examples/assets/tile/world_n.jpg
+++ b/examples/assets/tile/world_n.jpg
--- a/examples/baselayer/amap.html
+++ b/examples/baselayer/amap.html
@@ -0,0 +1,62 @@
 <!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.base.min.js'></script>
  <script src='/libs/dc-sdk/dc.core.min.js'></script>
  <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>
  <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>
  <link href='../index.css' type='text/css' rel='stylesheet'>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body,#viewer-container{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
 </head>

 <body>
 <div id="viewer-container"></div>
 <script>
  let viewer = undefined
  function initViewer() {
    viewer = new DC.Viewer('viewer-container')
    let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer()
    viewer.addBaseLayer(baselayer, {
      iconUrl: '../assets/icon/elec.png',
      name: '电子'
    })

    let baselayer_img = DC.ImageryLayerFactory.createAmapImageryLayer({
      style: 'img'
    })
    viewer.addBaseLayer(baselayer_img, {
      iconUrl: '../assets/icon/img.png',
      name: '地图'
    })

    let baselayer_cva = DC.ImageryLayerFactory.createAmapImageryLayer({
      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)
    )
  }
  DC.ready(initViewer)
 </script>
 </body>
 </html>

--- a/examples/baselayer/amap_no_offset.html
+++ b/examples/baselayer/amap_no_offset.html