运行
刷新

源代码编辑器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>边界数据</title>
  <script type="text/javascript" src="../../js/noCopy.js"></script>
 
  <script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="../../js/config.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>
  <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 getRandomColor = function() {
    return '#' +
      (function(color) {
        return (color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
      })('');
  }
  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
  })
  zInst1.camOper.setCenter(89.5, 12.4, 110.4, 51.2, new ZGLobe.Euler({heading: 0, pitch: -80, roll: 0}), 2)
 
 
  $.ajax({
    type: "GET",
    url:  config.ip_nginx + "china_provinces.json",
    dataType: "json",
    success: function (data) {
      console.log(data)
      setLayer(data.features)
    }
  });
  function setLayer(data) {
    data.map(item => {
      var id = item.properties.OBJECTID
      var height = Math.random() * 100000
      var color = getRandomColor()
      if (item.geometry.type === "MultiPolygon") {
        item.geometry.coordinates.map((Polygon, index) => {
          var positions = []
          Polygon[0].map(pol => {
            positions.push({longitude: pol[0], latitude: pol[1]})
          })
          zInst1.ZEntityCollection.addZEntity(new ZGLobe.ZEntity({
            id: id + '-' + index,
            type: ZGLobe.Constants.EntityTypes.POLYGON,
            polygon: {
              positions: positions,
              show: true,
              fill: true,
              extrudedHeight: height,
              material: ZGLobe.color.fromCssColor(color, 1),
              outline: true,
              outlineColor: ZGLobe.color.fromCssColor(color, 0),
              outlineWidth: 10,
              stRotation: 0,
              closeTop: true,
              closeBottom: true,
              shadows: ZGLobe.Constants.ShadowMode.DISABLED,
              distanceDisplayCondition: 0,
              classificationType: Cesium.ClassificationType.BOTH
            }
          }))
        })
      } else {
        var positions = []
        item.geometry.coordinates[0].map(Polygon => {
          positions.push({longitude: Polygon[0], latitude: Polygon[1]})
        })
        zInst1.ZEntityCollection.addZEntity(new ZGLobe.ZEntity({
          id: id,
          type: ZGLobe.Constants.EntityTypes.POLYGON,
          polygon: {
            positions: positions,
            show: true,
            fill: true,
            extrudedHeight: height,
            material: ZGLobe.color.fromCssColor(color, 1),
            outline: true,
            outlineColor: ZGLobe.color.fromCssColor(color, 0),
            outlineWidth: 10,
            stRotation: 0,
            closeTop: true,
            closeBottom: true,
            shadows: ZGLobe.Constants.ShadowMode.DISABLED,
            distanceDisplayCondition: 0,
            classificationType: Cesium.ClassificationType.BOTH
          }
        }))
      }
    })
  }
</script>
</body>
</html>