cesium绘制图形

2021/9/20 6:05:21

编程Tag： var 图形绘制 color box add viewer Cesium

本文主要是介绍cesium绘制图形，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

中文小网站：http://cesium.xin/wordpress/

英文网站：https://cesium.com/

先把cesium.js以及css引入，后面的代码就不在显示这些脚本引入

先画简单的点（point）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
    
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // This is the default access token from your ion account

    Cesium.Ion.defaultAccessToken = 'xxxtoken';

    var viewer = new Cesium.Viewer('cesiumContainer');

　　　　viewer.entities.add({
　　　　　　position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
　　　　　　point: {
　　　　　　　　pixelSize: 10,
　　　　　　　　color: Cesium.Color.YELLOW,
　　　　　　},
　　　　});

</script>
 </div>
</body>
</html>

划线（ployline）

   var redLine = viewer.entities.add({
      name: "Red line on terrain",
      polyline: {
        id:1,
        positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
        width: 5,
        material: new Cesium.PolylineOutlineMaterialProperty({
          color: Cesium.Color.fromCssColorString('red').withAlpha('0.5'),
          outlineWidth:2,
          outlineColor: Cesium.Color.fromCssColorString('yellow')
        }),
        clampToGround: true
      },
    });

画立方体（box）

   var redBox = viewer.entities.add({
      name : 'Red box with black outline',
      position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
      box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
      }
    });

czml画立方体（box）

var czml = [{
    "id" : "document",
    "name" : "box",
    "version" : "1.0"
},{
    "id" : "shape2",
    "name" : "Red box with black outline",
    "position" : {
        "cartographicDegrees" : [-107.0, 40.0, 300000.0]
    },
    "box" : {
        "dimensions" : {
            "cartesian": [400000.0, 300000.0, 500000.0]
        },
        "material" : {
            "solidColor" : {
                "color" : {
                    "rgba" : [255, 0, 0, 128]
                }
            }
        },
        "outline" : true,
        "outlineColor" : {
            "rgba" : [0, 0, 0, 255]
        }
    }
}];
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);

画椭圆（ellipse）画好之后通过实例更改颜色

//方法一，构造时赋材质
var entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  ellipse : {
    semiMinorAxis : 250000.0,
    semiMajorAxis : 400000.0,
    material : Cesium.Color.BLUE.withAlpha(0.5)//可设置不同的MaterialProperty
  }
});

//方法二，构造后赋材质
var ellipse = entity.ellipse;
ellipse.material = Cesium.Color.RED;

形状大全

这篇关于cesium绘制图形的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

cesium绘制图形

相关编程文章