运行
刷新

源代码编辑器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>矩形</title>
  <script type="text/javascript" src="../../js/noCopy.js"></script>
 
  <link rel="stylesheet" href="../../CesiumMini/Widgets/widgets.css">
  <script src="../../CesiumMini/Cesium.js"></script>
  <script type="text/javascript" src="../../lib/ZGLobe.js"></script>
  <script type="text/javascript" src="../../js/config.js"></script>
 
  <style>
    body {
      box-sizing: border-box;
      height: 100%;
      padding: 0;
      margin: 0;
    }
 
    #earth {
      position: absolute;
      top: 0px;
      bottom: 0px;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<div id="earth"></div>
<script type="text/javascript">
  var zInst1 = new ZGLobe.Viewer('earth',{
    showFPS: false,
    depthTestAgainstTerrain: false,
    show3DCoordinates: false,
    homeButton: false,
    fullscreenButton: true,
    sceneModePicker: false,
    navigationHelpButton: false,
    geocoder: false,
    infoBox : false,
    selectionIndicator : false,
    enableLighting: true,
    scene3DOnly: false,
    vrButton: false,
    contextOptions: {
      webgl: {
        alpha: false,
        preserveDrawingBuffer: true
      }
    },
    hawkeye: false,
    bookmark:false
  })
  var terrainUrl = config.ip_nginx + 'china30mdem'
  zInst1.objectManager.setTerrain(terrainUrl)
  zInst1.ZEntityCollection.addZEntity(new ZGLobe.ZEntity({
    id: 'RECTANGLE',
    type: ZGLobe.Constants.EntityTypes.RECTANGLE,
    rectangle: {
      coordinates: [113,32,114,34],//属性     可选 属性指定Rectangle。
      show: true,
      fill: true,
      material: ZGLobe.color.fromCssColor('#a32',0.6),
      outline:  true,
      outlineColor: ZGLobe.color.fromCssColor('#ff2',1),
      outlineWidth: 10
    }
  }))
  zInst1.camOper.lookAt(new ZGLobe.Position({longitude: 113.5,
    latitude: 33.0, height: 9000}),new ZGLobe.Euler({heading: 0, pitch: -40, roll: 0}),5000000)
</script>
</body>
</html>