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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
							<!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.createAmapImageryLayer({
      style: 'img'
    })
    viewer.addBaseLayer( baseLayer)

    axios.get('./examples/data/wind.json').then(res=>{
      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(res.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>