Cesium-动态绘制面

动态绘制面

let addPolygon = []; // 记录绘制过程中的面实体

// 点击创建面实体
function draw() {
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
  let movePosition = []; // 记录绘制过程中移动的点位置
  let moveEntity = null; // 记录绘制过程中移动的点实体
  let positions = []; // 记录左键点击的点位置
  let polygonEntity = null; // 记录面实体
  let pointEntities = []; // 记录左键点击的点实体

  // 鼠标移动事件
  handler.setInputAction(event => {
    // 除第一次，每次移动都会删除上次的点实体
    moveEntity && viewer.entities.remove(moveEntity);
    // 每次移动，都会删除上次的移动点位置，置为空数组
    movePosition = [];
    // 每次移动都会记录当前点位置
    movePosition.push(changeToThree(event.endPosition));
    // 创建移动点实体
    viewer.entities.add({
      position: movePosition[0],
      point: {
        pixelSize: 8,
        color: Cesium.Color.fromCssColorString('blue').withAlpha(0.7),
      },
    });
    // 记录点实体
    moveEntity = viewer.entities.values.slice(-1)[0];
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    
  // 点击左键事件
  handler.setInputAction(event => {
    // 记录左键点击的点实体位置
    positions.push(changeToThree(event.position));
    // 如果左键已经点击产生了一个点，加上移动的点，已经能够构成一个线段了
    if (positions.length === 1) {
      // 添加绘制的面实体
      polygonEntity = viewer.entities.add({
        polygon: {
          // 绘制动态面实体时，面的位置信息必须是使用 Cesium.CallbackProperty() 和 Cesium.PolygonHierarchy() 返回的坐标
          hierarchy: new Cesium.CallbackProperty(function() {
            return new Cesium.PolygonHierarchy(positions.concat(movePosition));
          }, false),
          material: Cesium.Color.fromCssColorString('blue').withAlpha(0.1),
        },
        polyline: {
          positions: new Cesium.CallbackProperty(function() {
            return positions.concat(movePosition).concat([positions[0]]);
          }, false),
          material: Cesium.Color.fromCssColorString('blue').withAlpha(0.5),
          // 必须给 golyline 设置贴地，否则会造成绘制的面和线在地图放大到一定程度后有误差
          clampToGround: true,
          width: 3,
        },
      });
    }
    // 添加点实体
    viewer.entities.add({
      position: changeToThree(event.position),
      point: {
        pixelSize: 8,
        color: Cesium.Color.fromCssColorString('blue').withAlpha(0.7),
      },
    });
    // 记录点实体
    pointEntities.push(viewer.entities.values.slice(-1)[0]);
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  // 点击右键事件
  handler.setInputAction(() => {
    // 删除所有的点实体
    pointEntities.forEach(item => {
      viewer.entities.remove(item);
    });
    // 必须大于等于 3 个点才能创建面，否则删除
    if (positions.length >= 3) {
      addPolygon.push(polygonEntity);
      // 将最终的面信息保存起来,为了将面的位置信息保存起来
      polygonEntity.polygon.hierarchy = positions;
      // 计算面实体的面积和周长
      const polygon = turf.polygon([changeToLnglgt(positions.concat(positions[0]))]);
      const S = turf.area(polygon);
      const lineString = turf.lineString(changeToLnglgt(positions.concat(positions[0])));
      const C = turf.length(lineString);
      console.log(`该面实体的面积为${ S / 1000000 }km^2, 该面实体的周长为${ C }km`)
    } else {
      viewer.entities.remove(polygonEntity);
    };
    // 记录添加的面实体
    addPolygon.push(polygonEntity);
    movePosition = []; // 控制最后右键点击的点是否保留
    // 删除最后一个移动的点实体
    viewer.entities.remove(moveEntity);
    // 取消所有的监听函数
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
};

// 点击删除所有的面实体
function clearAll() {
  addPolygon.forEach(item => {
    viewer.entities.remove(item);
  });
};

// 定义一个将经纬度格式转为世界坐标格式的方法
function changeToThree(position) {
    if (!position) return [];
    return viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene);
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114