Cesium.js点线面绘制

Cesium.js在三维GIS中十分的流行，点、线、面的绘制也是GIS开发中经常用到的基础操作。最近在Ceisum.js三维开发时，也是遇到了点、线、面的绘制功能开发，正好这里记录分享一下。

效果

核心代码

• 鼠标坐标获取

注意绘制功能要使用的是三维坐标，最后的点线面要与地形吻合。

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction((click)=>{
      // click.position 二维坐标
      console.log('左键单击事件：',click.position);
      console.log('左键单击事件：',click);
      let ray = viewer.camera.getPickRay(click.position);
      // cartesian 三维坐标
      let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
      points.push(cartesian)
      
    },Cesium.ScreenSpaceEventType.LEFT_CLICK);

• 点绘制

 addPoints(position){
      let entity = new Cesium.Entity({
        name: 'test',
        show: true,
        position: position,
        point: {
          show: true,
          pixelSize: 10,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          color: Cesium.Color.RED,
          outlineColor: Cesium.Color.YELLOW,
          outlineWidth: 3,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)
        },
      });
      window.viewer.entities.add(entity);
    },

• 线绘制

drawLine(points){
      if(points.length>=2){
        window.viewer.entities.add({
          name: 'line',
          polyline: {
            positions:points,
            width: 5,
            material: Cesium.Color.RED,
            clampToGround: true
          }
        })
      }
    },

• 面绘制

 drawPolygon(points){
      if(points.length>2){
        window.viewer.entities.add({
          name: 'polygon',
          polygon: {
            hierarchy:points,
            material: Cesium.Color.GREEN,
          }
        })
      }
    },

全部代码

<template>
  <div id="cesiumContainer">

  </div>
</template>

<script>
import * as Cesium from 'cesium';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },

  setup() {
    window.CESIUM_BASE_URL = '/cesium/';
    Cesium.Ion.defaultAccessToken = '你的token';
  },

  mounted() {
    // "cesiumContainer"是需要渲染地图的dom的id.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });


    viewer.camera.setView({
      // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
      // fromDegrees(lng,lat,height)方法，将经纬度和高程转换为世界坐标
      destination: Cesium.Cartesian3.fromDegrees(111.6265869140625,35.016500995886005,2000),
      orientation: {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-75),
      }
    })
    viewer.zoomTo(viewer);
    let points=[]

    window.viewer = viewer
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction((click)=>{
      // click.position 二维坐标
      console.log('左键单击事件：',click.position);
      console.log('左键单击事件：',click);
      let ray = viewer.camera.getPickRay(click.position);
      // cartesian 三维坐标
      let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
      points.push(cartesian)
      this.addPoints(cartesian)
      this.drawLine(points)
    },Cesium.ScreenSpaceEventType.LEFT_CLICK);

    handler.setInputAction((click)=>{
      // click.position 二维坐标
      // 结束
      this.closeLine(points)
      this.drawPolygon(points)
      
    },Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    


  },
  methods:{
    //绘制面
    drawPolygon(points){
      if(points.length>=2){
        window.viewer.entities.add({
          name: 'polygon',
          polygon: {
            hierarchy:points,
            material: Cesium.Color.GREEN,
          }
        })
      }
    },
    addPoints(position){
      let entity = new Cesium.Entity({
        name: 'test',
        show: true,
        position: position,
        point: {
          show: true,
          pixelSize: 10,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          color: Cesium.Color.RED,
          outlineColor: Cesium.Color.YELLOW,
          outlineWidth: 3,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)
        },
      });
      viewer.entities.add(entity);
    },
    drawLine(points){
      if(points.length>=2){
        window.viewer.entities.add({
          name: 'line',
          polyline: {
            positions:[points[points.length-2],points[points.length-1]],
            width: 5,
            material: Cesium.Color.RED,
            clampToGround: true
          }
        })
      }
    },
    closeLine(points){
      if(points.length>=2){
        window.viewer.entities.add({
          name: 'line',
          polyline: {
            positions:[points[points.length-1],points[0]],
            width: 5,
            material: Cesium.Color.RED,
            clampToGround: true
          }
        })
      }
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>