Cesium - Entity 绘制简单图形

安装 cesium he vite-plugin-cesium 插件

初始化一个Viewer容器

const viewer = new Cesium.Viewer("cesiumContainer", {
            timeline: false,// 时间线
        navigationHelpButton:false,//是否显示右上角的帮助按钮。
        sceneModePicker:false,// 是否显现地球 平面图 切换功能（视角切换工具）
        baseLayerPicker:false,// 图层选择工具
        fullscreenButton:false,// 是否显示全屏按钮
        geocoder:false, //是否显示地理编码搜索组件。
        homeButton:false, // 是否显示主页按钮
        animation: false,// 是否开启动画(右下角的钟表)
        infoBox:false// 默认信息弹框
      });
      // 去除版权信息  
      viewer._cesiumWidget._creditContainer.style.display = "none";

绘制一个点 

let myAddPoints = (longitude,latitude)=>{
      let point = {
        id:`point-${Math.random()}`,
        name:'自定义点',
        show:true,
        position:Cesium.Cartesian3.fromDegrees(longitude,latitude,0.0),
        // 这是将经纬度转化成了世界坐标 position要接受的值就是一个世界坐标（三维）
        point:{
          color:Cesium.Color.BLUE,
          pixelSize:5
        }
      }
      viewer.entities.add(point)
    }




handler.setInputAction(function (event) {
            const ray = viewer.camera.getPickRay(event.position);
            const earthPosition = viewer.scene.globe.pick(ray, viewer.scene);
    // 这里的earthPosition 就是三维的世界坐标
    ....
}

绘制一条线

let myAdLine = (arr)=>{
      let lineItem = {
        id:`line-${Math.random()}`,
        name:'我的毛线',
        show:true,
        polyline:{
          positions:Cesium.Cartesian3.fromDegreesArray([...arr]),
          width:2,
          material:Cesium.Color.RED,
        }
      }
      viewer.entities.add(lineItem)
    }  

绘制一个面
 

let myAddPolygon = (arr)=>{
      let polygonItem = {
        id:`polygon-${Math.random()}`,
        name:'面面相觑',
        show:true,
        polygon:{
          hierarchy:Cesium.Cartesian3.fromDegreesArray([...arr]),
          outline:true, //好像无效
          material:Cesium.Color.RED.withAlpha(0.4)
        }
      }
      viewer.entities.add(polygonItem)
    }

// 把面设置成有间隔的条纹
material: new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.YELLOW,//奇数条纹颜色 
    oddColor: Cesium.Color.RED,// 偶数条纹颜色
    repeat: 10// 重复次数
})

// 修改颜色的透明度
material:Cesium.Color.RED.withAlpha(0.4)

// 颜色取hex值
Cesium.Color.fromCssColorString(borderColor).withAlpha(0.4)

绘制一个广告牌
 

let myAddBill = ()=>{
      viewer.entities.add({
        id:"209f5501-84e1-4638-8c26-aaaaaaa",
        name: "Blank blue pin",
        label:{
          text :"自定义文字",
          fillColor:Cesium.Color.RED,
          font:'20px',
          pixelOffset:{
            x:0,
            y:-60
          }
        },
        position: Cesium.Cartesian3.fromDegrees(113.19,33.77),
        size:10,
        billboard: {
          // image: pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
          image: 'http://127.0.0.1:5500/img/local.png',
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        },
      });

    }

加载一个模型

const resource = await Cesium.IonResource.fromAssetId(2386629)
      let color = Cesium.Color.PINK
      let model = viewer.entities.add({
        id:"houzi6666",
        position:Cesium.Cartesian3.fromDegrees(114,38,10),
        model:{
          show:true,
          uri:resource,//'http://127.0.0.1:5500/myCar.gltf',
          scale:1, // 设置模型缩放比例
          minimumPixelSize:1000,//模型显示最小是多少
          maximumScale:20000,//模型显示最大值是多少
          silhouetteColor:Cesium.Color.RED,//指定模型的轮廓
          silhouetteSize:1,//模型轮廓的大小 0为不显示
          color:Cesium.Color.fromAlpha(color,parseFloat(0.5)) // 模型的颜色&透明度
        }
      })
      viewer.flyTo(model)

// ！！！ uri 可以是一个网络模型地址  

// 也可以是 Cesium.IonResource.fromAssetId(2386629) （将模型文件上传到cesium官网上 返回的id）