cesium-----练习集合

最新推荐文章于 2025-03-17 12:31:02 发布
三星程序饲养员
最新推荐文章于 2025-03-17 12:31:02 发布
阅读量440
点赞数
分类专栏： gis方向文章标签： cesium
本文链接：https://blog.youkuaiyun.com/ys_ys_y/article/details/102505768
版权
gis方向专栏收录该内容
41 篇文章
订阅专栏
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>cesium app</title>
    <script src="./Cesium/Cesium.js"></script>
    <link rel="stylesheet " href="./Cesium/Widgets/widgets.css">
</head>
<body>
        <div id="cesiumContainer"></div>
        <script>

    //----加载中国谷歌影像地图
    var guge=new Cesium.UrlTemplateImageryProvider({
      url:'http://www.google.cn/maps/vt?lyrs=s@800&x={x}&y={y}&z={z}',
      tilingScheme:new Cesium.WebMercatorTilingScheme(),
      minimumLevel:1,
      maximumLevel:20
    });

    var viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayerPicker: false,
      imageryProvider: guge,
      terrainProvider : Cesium.createWorldTerrain({
        // url : Cesium.IonResource.fromAssetId(3839),
        requestWaterMask:true,
        requestVertexNormals : true
      })
    })
    //-------设置视角
    viewer.camera.setView({
      destination : new Cesium.Cartesian3(1332761.6877998516,-4662399.913291841, 4137888.8927274314), // (纽约)坐标和高度(米)
      orientation: {
        heading : 0.6068261546578739, // east, default value is 0.0 (north)  // 北为0度，90指的是向正东方
        // pitch : Cesium.Math.toRadians(-90),    // default value (looking down) // 平视为0度，-90指的是俯视
        pitch : -0.6663290837739115,
        roll : 0.0                             // default value
      }
      // destination : Cesium.Cartesian3.fromDegrees(116.39, 39.9, 1000.0), // (北京)坐标和高度(米)
      // orientation: {
      //   heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)  // 北为0度，90指的是向正东方
      //   pitch : Cesium.Math.toRadians(-90),    // default value (looking down) // 平视为0度，-90指的是俯视
      //   roll : 0.0                             // default value
      // }
    })
  //-------设置数据样式(楼层，根据高度)
    var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: Cesium.IonResource.fromAssetId(3839)}));
    var transparentStyle = new Cesium.Cesium3DTileStyle({  //设置数据的样式
      color: {
        conditions: [
          ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
          ["${height} >= 200", "rgb(102, 71, 151)"],
          ["${height} >= 100", "rgb(170, 164, 204)"],
          ["${height} >= 50", "rgb(224, 226, 238)"],
          ["${height} >= 25", "rgb(252, 230, 200)"],
          ["${height} >= 10", "rgb(248, 176, 87)"],
          ["${height} >= 5", "rgb(198, 106, 11)"],
          ["true", "rgb(127, 59, 8)"]
        ]
      }
    })
    city.style = transparentStyle;


//--------geojson
var geojsonOptions={    //让地图贴地
  clamToGround:true
};
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./assets/china_zz_20191009.json',geojsonOptions);
var neighborhoods;
neighborhoodsPromise.then(function (dataSource) {
      viewer.dataSources.add(dataSource);
  neighborhoods = dataSource.entities;
       var neighborhoodsEntities = dataSource.entities.values;
      for (var i = 0; i < neighborhoodsEntities.length; i++) {
        var entity = neighborhoodsEntities[i];
        if(Cesium.defined(entity.polygon)){
          entity.name = entity.properties.neighborhood;
          entity.polygon.material = Cesium.Color.fromRandom({
            red: 1,
            maximumGreen: 1,
            maximumBlue: 1,
            alpha : 1.0
          });
          entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
          var polyPostions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
          var polyCenter = Cesium.BoundingSphere.fromPoints(polyPostions).center;
          polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
          entity.position = polyCenter;
          entity.label = {
            text : entity.name,
            showBackground : true,
            scale:0.6,
            horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
            verticalOrigin:Cesium.verticalOrigin.BOTTOM,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0,8000.0),
            disableDepthTestDistance:100.0
          };
        }
      }
})


//------kml文件加载
var viewer = new Cesium.Viewer('cesiumContainer');
    // 加载kml数据，更改description信息，多了黄色的标签里面包含的

    var kmlOptions = {
        camera : viewer.scene.camera,
        canvas : viewer.scene.canvas,
        clampToGround : true
    };
    // Load geocache points of interest from a KML file
    // Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
    var geocachePromise = Cesium.KmlDataSource.load('./assets/doc.kml', kmlOptions);

// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
    // Add the new data as entities to the viewer
    viewer.dataSources.add(dataSource);

    // Get the array of entities
    var geocacheEntities = dataSource.entities.values;

    for (var i = 0; i < geocacheEntities.length; i++) {
        var entity = geocacheEntities[i];
        if (Cesium.defined(entity.billboard)) {
            // Adjust the vertical origin so pins sit on terrain
            entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
            // Disable the labels to reduce clutter
            entity.label = undefined;
            // Add distance display condition
            entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
            // Compute latitude and longitude in degrees
            var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
            var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
            var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);

            // Modify description(将信息添加到description描述信息中，我们这里只添加经纬度)
            var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
            '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
            '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
            '</tbody></table>';
            entity.description = description;
        }
    }
});
        </script> 
    </body>
</html>