dc-sdk/examples/mini-scene/sz_out.html

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

  let sz_zxd_data =[
    {
      label:"姑苏区",
      coord:"120.59665360,31.32417637"
    },
    {
      label:"吴中区",
      coord:"120.26656151,31.12600545"
    },
    {
      label:"吴江区",
      coord:"120.61407203,31.00940314"
    },
    {
      label:"相城区",
      coord:"120.61658599,31.44896501"
    },
    {
      label:"虎丘区",
      coord:"120.42240336,31.35921238"
    },
    {
      label:"工业园区",
      coord:"120.73975003,31.33381359"
    },
    {
      label:"昆山市",
      coord:"120.96280041,31.31506478"
    },
    {
      label:"太仓市",
      coord:"121.15395177,31.57029622"
    },
    {
      label:"常熟市",
      coord:"120.81050568,31.66691104"
    },
    {
      label:"张家港市",
      coord:"120.61839073,31.90941293"
    },
  ]




  function loadVLine (){
    let layer = new DC.PrimitiveLayer('vLine_layer')
    viewer.addLayer(layer)
    let positions =[
      {lng: 119.61305431791536, lat: 31.949257981346843},
      {lng: 119.66748528834533, lat: 31.569088949848066},
      {lng: 119.93621458239951, lat: 30.862978381864128},
      {lng: 120.33269379413352, lat: 30.779032494324515},
      {lng: 120.91846175667051, lat: 30.772412670398687},
      {lng: 121.37081537125513, lat: 31.031108498202467},
      {lng: 121.68788865110909, lat: 31.59956942613548},
      {lng: 121.31821229420665, lat: 32.00645809208013},
      ]
    positions.forEach(item=>{
      let position = DC.Position.fromObject(item)
      let end = position.copy()
      end.alt = 80000 * Math.random()
      let line = new DC.FlowLinePrimitive([position,end],0.5)
      line.setStyle({
        speed: 8,
        color: DC.Color.fromCssColorString("rgb(240,131,61)"),
        percent:0.2,
        gradient:0.01
      })
      layer.addOverlay(line)
    })
  }

  function loadSzData(){
    szData = new DC.GeoJsonLayer('sz','examples/data/sz.geojson')
    sz_out_data = new DC.GeoJsonLayer('sz-out','examples/data/sz_out.geojson')
  }

  function  loadSzZxd(){
    let layer_sz_zxd = new DC.VectorLayer('layer-sz-zxd').addTo(viewer)
    sz_zxd_data.forEach(item=>{
        let position = DC.Position.fromString(item.coord)
        position.alt = 3000
        let billboard =  new DC.Billboard(position,'../assets/bg/bg_name.png')
        billboard.size = [item.label.length * 25,32]
        billboard.setStyle({
          scale:0.8,
          distanceDisplayCondition:{
            near:0,
            far:2.5e5
          }
        })
        billboard.setLabel(item.label,{
          font:"10px",
          disableDepthTestDistance:Number.POSITIVE_INFINITY,
          distanceDisplayCondition:{
            near:0,
            far:2.5e5
          }
        })
        let circle = new DC.Circle(position,2000)
        circle.setStyle({
          height:2000,
          material: new DC.CircleWaveMaterialProperty({
            speed:5,
            color: DC.Color.fromCssColorString("rgb(205,100,33)")
          })
        })
        layer_sz_zxd.addOverlay(billboard).addOverlay(circle)
    })
  }

  function loadSzPolygon(){
    viewer.addLayer(sz_out_data)
    sz_out_data.eachOverlay(entity =>{
      DC.Util.merge(entity.polygon,{
        outline:false,
        material:DC.Color.fromCssColorString("rgb(47,50,54)"),
        extrudedHeight:2000
      })
    })
  }

  function loadSzOutline(){
    let layer_sz_outline = new DC.VectorLayer('layer-sz-outline').addTo(viewer)
    let now = DC.JulianDate.now()
    sz_out_data.eachOverlay(entity => {
      if(entity.polygon){
        let positions = DC.Transform.transformCartesianArrayToWGS84Array(
          entity.polygon.hierarchy.getValue(now).positions
        )
        positions.map(item=>{
          item.alt = 2000
        })
        let polyline = new DC.Polyline(positions)
        polyline.setStyle({
          width:2,
          material: new DC.PolylineTrailMaterialProperty({
            speed:2,
            color: DC.Color.fromCssColorString("rgb(149,236,217)")
          })
        })
        layer_sz_outline.addOverlay(polyline)
      }
    })
  }

  function loadSzLine(){
    let layer_sz = new DC.VectorLayer('layer-sz-line').addTo(viewer)
    let now = DC.JulianDate.now()
    szData.eachOverlay(entity => {
      if(entity.polygon){
        let positions = DC.Transform.transformCartesianArrayToWGS84Array(
          entity.polygon.hierarchy.getValue(now).positions
        )
        positions.map(item=>{
          item.alt = 2000
        })
        let polyline = new DC.Polyline(positions)
        polyline.setStyle({
          width:1,
          material:new DC.PolylineFlickerMaterialProperty({
            speed:10 * Math.random(),
            color: DC.Color.fromCssColorString("rgb(116,173,250)")
          })
        })
        layer_sz.addOverlay(polyline)
      }
    })
  }

  function initViewer() {
    viewer = new DC.Viewer('viewer-container',{
      orderIndependentTranslucency: false,
      contextOptions: {
        webgl: {
          alpha: true
        }
      }
    })
    viewer.setOptions({
      showMoon: false,
      showSun: false,
      enableFaxx:true,
      globe:{
        show:false
      },
      skyBox:{
        show:false
      }
    })
    viewer.use(new DC.Effect())
    loadVLine()
    viewer.zoomToPosition("120.6119943479279,30.237286794313203,126132.920,0,-48.84",()=>{
      loadSzData()
      loadSzOutline()
      loadSzPolygon()
      loadSzLine()
      loadSzZxd()
    })
  }


</script>