OpenSource
/
dc-sdk
mirror of https://github.com/dvt3d/dc-sdk


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!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 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
        })
        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
      })
    })

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

    gui.add(controls,'lineWidth',1,3).step(0.1).onChange(value=>{
      windLayer.setOptions({
        lineWidth:value
      })
    })

  }

  DC.ready({
    baseUrl:'../libs/dc-sdk/resources/'
  }).then(initViewer)
</script>
</body>
</html>