Dataearth学习之从入门到放弃【初出茅庐】

Dataearth也是基于cesium开发的，由于自己水平太菜，所以决定拿这种封装成熟一点的东西弄弄，先培养培养兴趣，而且与cesium的接口其实差不多；

深表感谢，对于这些在技术上做出伟大贡并且无私奉献的人！

一、创建场景

1）加载地形数据

//超图地形服务地址
var url = "https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path";
var vtxfTerrainProvider = new Cesium.CesiumTerrainProvider({
url: url,
requestVertexNormals: true
});

地形服务地址：

超图： "https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path"

DataEarth：【https://dataearth.airlook.com/web/examples/#terrain】【https://dataearth.airlook.com/web/assets/SampleData/DataEarth/dem/dem3/】

影像服务地址：

谷歌：

 var GoogleMap = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
    url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali" //谷歌影像      
  }));
  viewer.imageryLayers.add(GoogleMap);

 

 

  //创建Google影像
   var google = new Cesium.UrlTemplateImageryProvider({
     url: 'http://mt0.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}',
     tilingScheme: new Cesium.WebMercatorTilingScheme(),
     maximumLevel: 20
   });
   //添加影像数据
   viewer.imageryLayers.addImageryProvider(google); 

 二、添加矢量数据

  //添加影像数据
  viewer.imageryLayers.addImageryProvider(google);
  var layer = viewer.scene.tilesetLayers.add(
    new Cesium.Cesium3DTileset({
      url: "http://127.0.0.1:9080/data/view/1161530617177522177/",
      id: "1161530617177522177",
      name: "成都建筑物",
      maximumMemoryUsage:1024
    })
  );
  layer.style = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        ['${height} >= 70', 'rgba(45, 0, 75, 0.5)'],
        ['${height} >= 60', 'rgb(102, 71, 151, 0.5)'],
        ['${height} >= 40', 'rgb(170, 162, 204, 0.5)'],
        ['${height} >= 30', 'rgb(224, 226, 238, 0.5)'],
        ['${height} >= 20', 'rgb(252, 230, 200, 0.5)'],
        ['${height} >= 10', 'rgb(248, 176, 87, 0.5)'],
        ['${height} >= 5', 'rgb(198, 106, 11, 0.5)'],
        ['true', 'rgb(127, 59, 8)']
      ]
    }
  });
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(104.1, 30.65, 1500),
    orientation: {
      heading: Cesium.Math.toRadians(357.35068101799146),
      pitch: Cesium.Math.toRadians(-31.92035363183754),
      roll: 0.0
    }
  });

  function add() {
    var _height = 0;
    for (var i = 0; i <= 10; i++) {
      setTimeout(function () {
        creatWater(_height += 10)
      }, 1000);
    }
  }

  var water = null;

  function creatWater(_height) {
    if (water != null)
      viewer.scene.waterCollection.remove(water);
    water = new Cesium.DEWater(viewer);
    //水面点集合
    var waterPostion = [];
    waterPostion.push(Cesium.Cartesian3.fromDegrees(104.16, 30.72, _height));
    waterPostion.push(Cesium.Cartesian3.fromDegrees(103.95, 30.72, _height));
    waterPostion.push(Cesium.Cartesian3.fromDegrees(103.95, 30.60, _height));
    waterPostion.push(Cesium.Cartesian3.fromDegrees(104.16, 30.60, _height));
    var waterpolygon = new Cesium.PolygonGeometry({
      polygonHierarchy: new Cesium.PolygonHierarchy(waterPostion),
      perPositionHeight: true
    });
    water.waterPolygon = waterpolygon;
    viewer.scene.waterCollection.add(water);
  }

  var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction(function (evt) {
    var ray = viewer.camera.getPickRay(evt.position);
    var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    var lng = Cesium.Math.toDegrees(cartographic
      .longitude);
    //经度值    
    var lat = Cesium.Math.toDegrees(cartographic.latitude);
    //纬度值    
    var mapPosition = {
      x: lng,
      y: lat,
      z: cartographic.height
    };
    console.log(mapPosition.x, mapPosition.y, mapPosition.z);
    //cartographic.height的值为地形高度。
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

三、绘制水面

var layer = viewer.scene.tilesetLayers.add(
  new Cesium.Cesium3DTileset({
    url: "http://127.0.0.1:9080/data/view/1161530617177522177/",
    id: "1161530617177522177",
    name: "成都建筑物"
  })
);
layer.style = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [
      ['${height} >= 70', 'rgba(45, 0, 75, 0.5)'],
      ['${height} >= 60', 'rgb(102, 71, 151, 0.5)'],
      ['${height} >= 40', 'rgb(170, 162, 204, 0.5)'],
      ['${height} >= 30', 'rgb(224, 226, 238, 0.5)'],
      ['${height} >= 20', 'rgb(252, 230, 200, 0.5)'],
      ['${height} >= 10', 'rgb(248, 176, 87, 0.5)'],
      ['${height} >= 5', 'rgb(198, 106, 11, 0.5)'],
      ['true', 'rgb(127, 59, 8)']
    ]
  }
});
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(104.1, 30.65, 1500),
  orientation: {
    heading: Cesium.Math.toRadians(357.35068101799146),
    pitch: Cesium.Math.toRadians(-31.92035363183754),
    roll: 0.0
  }
});

function add() {
  var _height = 0;
  for (var i = 0; i <= 10; i++) {
    setTimeout(function () {
      creatWater(_height += 10)
    }, 1000);
  }
}

var water = null;

function creatWater(_height) {
  if (water != null)
    viewer.scene.waterCollection.remove(water);
  water = new Cesium.DEWater(viewer);
  //水面点集合
  var waterPostion = [];
  waterPostion.push(Cesium.Cartesian3.fromDegrees(104.16, 30.72, _height));
  waterPostion.push(Cesium.Cartesian3.fromDegrees(103.95, 30.72, _height));
  waterPostion.push(Cesium.Cartesian3.fromDegrees(103.95, 30.60, _height));
  waterPostion.push(Cesium.Cartesian3.fromDegrees(104.16, 30.60, _height));
  var waterpolygon = new Cesium.PolygonGeometry({
    polygonHierarchy: new Cesium.PolygonHierarchy(waterPostion),
    perPositionHeight: true
  });
  water.waterPolygon = waterpolygon;
  viewer.scene.waterCollection.add(water);
}