cesium根据地形画区域面积并覆盖在3d表面上

最近一直在研究在3d地图上添加区域还有车辆路径路线，很是秃然啊！在不断的百度百度再百度，终于有了一套解决办法，先演示一下操作过程，

drawLine()方法

 drawPlane()方法

下面就来堆代码吧。

一、viewer.scene.pickPosition与viewer.camera.pickEllipsoid的区别

前提是开启了地形检测viewer.scene.globe.depthTestAgainstTerrain = true;一般开启会占用一定内存，但是获取笛卡尔坐标更精确了，否则用viewer.camera.pickEllipsoid的话，可能画线的鼠标位置跟线的实际位置差距很大

二、获取鼠标点击位置的笛卡尔坐标

在画区域面积的时候坐标是必备的，通常获取坐标的方法有两中viewer.scene.pickPosition()与viewer.camera.pickEllipsoid()，这就不得不说说两者的区别了

开启了地形检测的话viewer.scene.pickPosition()获取坐标要比viewer.camera.pickEllipsoid()更精确，(viewer.scene.globe.depthTestAgainstTerrain = true),直接用viewer.camera.pickEllipsoid的话，可能画线的鼠标位置跟线的实际位置差距很大,这里推荐使用开启地形检测的pickPosition()方法

1.  
   //首先建立ScreenSpaceEventHandler对象获取鼠标左击事件
2.  
   this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
3.  
   this.handler.setInputAction((movement) => {
4.  
   let cartesian = this.viewer.scene.pickPosition(movement.position);
5.  
   let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
6.  
   let lng = Cesium.Math.toDegrees(cartographic.longitude);
7.  
   let lat = Cesium.Math.toDegrees(cartographic.latitude);
8.  
   let hei = Cesium.Math.toDegrees(cartographic.height);
9.  
   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

以上是获取鼠标左击的迪卡尔坐标并且转换成经纬度坐标

三、根据多点坐标画点或面

两点一线，三点/多点一面，要画线/面必须要2个或多个坐标才能绘画，光有一个坐标是不够的，所以我们要先命名一个变量let positions = [],来记录点击点的坐标，然后根据后面的转换变为画线和面积的坐标，同时需要命名一个变量来存储层次结构的对象  polygon = new Cesium.PolygonHierarchy(),还需要一个codeInfo来记录移动点的所有数据

1.下面就可以通过绑定鼠标事件来获取初始位置

1.  
   this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
2.  
   // left
3.  
   this.handler.setInputAction((movement) => {
4.  
   let cartesian = this.viewer.scene.pickPosition(movement.position);
5.  
   let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
6.  
   let lng = Cesium.Math.toDegrees(cartographic.longitude);
7.  
   let lat = Cesium.Math.toDegrees(cartographic.latitude);
8.  
   let hei = Cesium.Math.toDegrees(cartographic.height);
9.  
    
10.  
    // console.log("><><><><><>", cartographic);
11.  
    if (cartesian && cartesian.x) {
12.  
    if (positions.length == 0) {
13.  
    positions.push(cartesian.clone());
14.  
    }
15.  
    codeInfo.push([lng, lat, hei]);
16.  
    positions.push(cartesian.clone());
17.  
     
18.  
    polygon.positions.push(cartesian.clone());
19.  
    }
20.  
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

2.绑定鼠标移动来获取移动位置

1.  
   this.handler.setInputAction((movement) => {
2.  
   let cartesian = this.viewer.scene.pickPosition(movement.endPosition);
3.  
   let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
4.  
   let lng = Cesium.Math.toDegrees(cartographic.longitude);
5.  
   let lat = Cesium.Math.toDegrees(cartographic.latitude);
6.  
   let hei = Cesium.Math.toDegrees(cartographic.height);
7.  
    
8.  
   if (positions.length >= 0) {
9.  
   if (cartesian && cartesian.x) {
10.  
    positions.pop();
11.  
    positions.push(cartesian);
12.  
    polygon.positions.pop();
13.  
    polygon.positions.push(cartesian);
14.  
    codeInfo.pop();
15.  
    codeInfo.push([lng, lat, hei]);
16.  
    }
17.  
    }
18.  
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

3.绑定鼠标右键来获取终点位置

1.  
   this.handler.setInputAction(() => {
2.  
   this.infoDetail.planeSelf.push({ id: id, positions: codeInfo, polygon });
3.  
   console.log("planeSelf", this.infoDetail.planeSelf);
4.  
   this.handler.destroy();
5.  
   positions.push(positions[0]);
6.  
   }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

这样的话就获取了所有点坐标的信息，接下来就画线/面了。

4.绘画

我们通过添加实体的方法来绘制线/面

1.  
   polyObj = this.viewer.entities.add({
2.  
   id: id,
3.  
   name: "planeSelf",
4.  
   polyline: {
5.  
   positions: new Cesium.CallbackProperty(function () {
6.  
   return positions;
7.  
   }, false),
8.  
   width: this.config.borderWidth,
9.  
   material: this.config.borderColor,
10.  
    clampToGround: true,
11.  
    },
12.  
    polygon: {
13.  
    hierarchy: new Cesium.CallbackProperty(function () {
14.  
    return polygon;
15.  
    }, false),
16.  
    material: this.config.material,
17.  
    clampToGround: true,
18.  
    },
19.  
    });
20.  
    }

这样我们就可以根据我们的鼠标来绘制我们的线/面了

四、根据记录的点实现线/面的绘制

我们根据codeInfo记录的数据获取了线/面的点坐标数据,只需在绘制方法中为其添加坐标参数，即可实现线/面的绘制

1.  
   addLine(id, name, positions) {
2.  
   this.viewer.entities.add({
3.  
   name: name,
4.  
   id: id,
5.  
   polyline: {
6.  
   positions: new Cesium.CallbackProperty(function () {
7.  
   return positions;
8.  
   }, false),
9.  
   width: this.config.borderWidth,
10.  
    material: this.config.borderColor,
11.  
    clampToGround: true,
12.  
    },
13.  
    });
14.  
    }

五、完整绘制线/面的类方法

1.  
   import * as Cesium from "cesium";
2.  
    
3.  
   // add...方法的position数据从this.infoDetail中获取
4.  
    
5.  
   export class Draw {
6.  
   constructor(viewer, config) {
7.  
   /**cesium实例对象 */
8.  
   this.viewer = viewer;
9.  
   /**绘制要素的相关配置
10.  
    * 默认配置
11.  
    * {
12.  
    borderColor: Cesium.Color.BLUE, 边框颜色
13.  
    borderWidth: 2, 边框宽度
14.  
    material: Cesium.Color.GREEN.withAlpha(0.5),填充材质
15.  
    }
16.  
    */
17.  
    this.config = config || {
18.  
    borderColor: Cesium.Color.BLUE,
19.  
    borderWidth: 2,
20.  
    material: Cesium.Color.GREEN.withAlpha(0.5),
21.  
    };
22.  
    /**存贮绘制的数据 坐标 */
23.  
    this.infoDetail = {
24.  
    point: [],
25.  
    line: [],
26.  
    rectangle: [],
27.  
    circle: [],
28.  
    planeSelf: [],
29.  
    };
30.  
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
31.  
    }
32.  
     
33.  
    /*******
34.  
    * @param: id 必须是唯一的 name、position是三点的笛卡尔坐标[lng,lat,hei]
35.  
    * @function: function
36.  
    * @return {*}
37.  
    * @description: 绘制方法
38.  
    */
39.  
    addPoint(id, name, position) {
40.  
    this.viewer.entities.add({
41.  
    position: Cesium.Cartesian3.fromDegrees(...position),
42.  
    name: name,
43.  
    id: id,
44.  
    point: {
45.  
    color: this.config.material,
46.  
    pixelSize: 12,
47.  
    outlineColor: this.config.borderColor,
48.  
    outlineWidth: this.config.borderWidth,
49.  
    },
50.  
    });
51.  
    }
52.  
    /*******
53.  
    * @param: id 必须是唯一的 name、positions
54.  
    * @function: function
55.  
    * @return {*}
56.  
    * @description: 绘制方法
57.  
    */
58.  
    addLine(id, name, positions) {
59.  
    this.viewer.entities.add({
60.  
    name: name,
61.  
    id: id,
62.  
    polyline: {
63.  
    positions: new Cesium.CallbackProperty(function() {
64.  
    return positions;
65.  
    }, false),
66.  
    width: this.config.borderWidth,
67.  
    material: this.config.borderColor,
68.  
    clampToGround: true,
69.  
    },
70.  
    });
71.  
    }
72.  
    /*******
73.  
    * @param: id 必须是唯一的 name、positions
74.  
    * @function: function
75.  
    * @return {*}
76.  
    * @description: 添加平面方法
77.  
    */
78.  
    addPlane(id, name, positions) {
79.  
    let polygon = new Cesium.PolygonHierarchy();
80.  
    polygon.positions = positions;
81.  
    this.viewer.entities.add({
82.  
    id: id,
83.  
    name: name,
84.  
    polyline: {
85.  
    positions: new Cesium.CallbackProperty(function() {
86.  
    return positions;
87.  
    }, false),
88.  
    width: this.config.borderWidth,
89.  
    material: this.config.borderColor,
90.  
    clampToGround: true,
91.  
    },
92.  
    polygon: {
93.  
    hierarchy: new Cesium.CallbackProperty(function() {
94.  
    return polygon;
95.  
    }, false),
96.  
    material: this.config.material,
97.  
    clampToGround: true,
98.  
    },
99.  
    });
100.  
     }
101.  
     drawPoint() {
102.  
     this.handler.destroy();
103.  
      
104.  
     this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
105.  
     this.handler.setInputAction((click) => {
106.  
     let position = this.getMovement(click).position;
107.  
     /**实体的唯一标注 */
108.  
     let id = new Date().getTime();
109.  
      
110.  
     this.addPoint(id, "point", position);
111.  
      
112.  
     this.infoDetail.point.push({ id, position });
113.  
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
114.  
      
115.  
     this.handler.setInputAction((click) => {
116.  
     this.handler.destroy();
117.  
     }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
118.  
     }
119.  
      
120.  
     /*******
121.  
     * @function: function
122.  
     * @description: 绘制矩形区域
123.  
     * @return {*}
124.  
     * @author: xk
125.  
     */
126.  
     drawRectangle() {
127.  
     this.handler.destroy();
128.  
     /**
129.  
     * 矩形四点坐标
130.  
     */
131.  
     let westSouthEastNorth = [];
132.  
     /**实体的唯一标注 */
133.  
     let id = null;
134.  
     /**地图点击对象 */
135.  
     this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
136.  
     this.handler.setInputAction((click) => {
137.  
     /**点击位置笛卡尔坐标 */
138.  
     let cartesian = this.viewer.scene.pickPosition(click.position);
139.  
     /**笛卡尔转弧度坐标 */
140.  
     let cartographic = Cesium.Cartographic.fromCartesian(cartesian, false);
141.  
     /**点击位置经度 */
142.  
     let lng1 = Cesium.Math.toDegrees(cartographic.longitude);
143.  
     /**点击位置维度 */
144.  
     let lat1 = Cesium.Math.toDegrees(cartographic.latitude);
145.  
     /**边框坐标 */
146.  
     westSouthEastNorth = [lng1, lat1];
147.  
     id = new Date().getTime();
148.  
     if (westSouthEastNorth) {
149.  
     this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
150.  
     }
151.  
     /**面实例对象 */
152.  
     let polygons = this.viewer.entities.add({
153.  
     name: "rectangle",
154.  
     id: id,
155.  
     polygon: {
156.  
     hierarchy: new Cesium.CallbackProperty(function() {
157.  
     return {
158.  
     positions: Cesium.Cartesian3.fromDegreesArray(westSouthEastNorth),
159.  
     };
160.  
     }),
161.  
     height: 0,
162.  
     // 填充的颜色，withAlpha透明度
163.  
     material: this.config.material,
164.  
     // 是否被提供的材质填充
165.  
     fill: true,
166.  
     // 是否显示
167.  
     show: true,
168.  
     },
169.  
     polyline: {
170.  
     positions: new Cesium.CallbackProperty(function() {
171.  
     return Cesium.Cartesian3.fromDegreesArray(westSouthEastNorth);
172.  
     }),
173.  
     material: this.config.borderColor,
174.  
     width: this.config.borderWidth,
175.  
     zIndex: 1,
176.  
     },
177.  
     });
178.  
     this.handler.setInputAction((move) => {
179.  
     let cartesian = this.viewer.scene.pickPosition(move.endPosition);
180.  
     let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
181.  
     let lng = Cesium.Math.toDegrees(cartographic.longitude);
182.  
     let lat = Cesium.Math.toDegrees(cartographic.latitude);
183.  
      
184.  
     westSouthEastNorth = [
185.  
     lng1,
186.  
     lat1,
187.  
     lng1,
188.  
     lat,
189.  
     lng,
190.  
     lat,
191.  
     lng,
192.  
     lat1,
193.  
     lng1,
194.  
     lat1,
195.  
     ];
196.  
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
197.  
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
198.  
      
199.  
     this.handler.setInputAction(() => {
200.  
     this.handler.destroy();
201.  
     this.infoDetail.rectangle.push({ id: id, position: westSouthEastNorth });
202.  
     }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
203.  
     }
204.  
     /*******
205.  
     * @function: function
206.  
     * @description: 绘制圆形区域
207.  
     * @return {*}
208.  
     * @author: xk
209.  
     */
210.  
     drawCircle() {
211.  
     this.handler.destroy();
212.  
     /**实体的唯一标注 */
213.  
     let id = null;
214.  
      
215.  
     /**圆半径 */
216.  
     let radius = 0;
217.  
     /**圆心 */
218.  
     let lngLat = [];
219.  
     /**鼠标事件 */
220.  
     this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
221.  
     this.handler.setInputAction((click) => {
222.  
     id = new Date().getTime();
223.  
     let cartesian = this.viewer.scene.pickPosition(click.position);
224.  
      
225.  
     // console.log(">>>", click.position);
226.  
     let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
227.  
      
228.  
     // console.log(">>>>>>>>>", cartographic);
229.  
     let lng = Cesium.Math.toDegrees(cartographic.longitude);
230.  
     let lat = Cesium.Math.toDegrees(cartographic.latitude);
231.  
     let hei = Cesium.Math.toDegrees(cartographic.height);
232.  
     lngLat = [lng, lat, hei];
233.  
     let entity = this.viewer.entities.add({
234.  
     position: new Cesium.CallbackProperty(function() {
235.  
     return new Cesium.Cartesian3.fromDegrees(...lngLat);
236.  
     }, false),
237.  
     name: "circle",
238.  
     id: id,
239.  
     ellipse: {
240.  
     height: hei / 57.3,
241.  
     outline: true,
242.  
     material: this.config.material,
243.  
     outlineColor: this.config.borderColor,
244.  
     outlineWidth: this.config.borderWidth,
245.  
     },
246.  
     // label: {
247.  
     // text: "区域一",
248.  
     // font: "18px sans-serif",
249.  
     // fillColor: Cesium.Color.GOLD,
250.  
     // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
251.  
     // outlineWidth: 2,
252.  
     // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
253.  
     // pixelOffset: new Cesium.Cartesian2(0, 0),
254.  
     // // 对齐方式(水平和竖直)
255.  
     // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
256.  
      
257.  
     // showBackground: true,
258.  
     // backgroundColor: new Cesium.Color.fromBytes(0, 0, 0),
259.  
     // show: true,
260.  
     // },
261.  
     });
262.  
     entity.ellipse.semiMajorAxis = new Cesium.CallbackProperty(function() {
263.  
     return radius;
264.  
     }, false);
265.  
     entity.ellipse.semiMinorAxis = new Cesium.CallbackProperty(function() {
266.  
     return radius;
267.  
     }, false);
268.  
      
269.  
     if (lngLat) {
270.  
     this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
271.  
     }
272.  
     this.handler.setInputAction((move) => {
273.  
     let cartesian2 = this.viewer.scene.pickPosition(move.endPosition);
274.  
     radius = Cesium.Cartesian3.distance(cartesian, cartesian2);
275.  
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
276.  
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
277.  
      
278.  
     this.handler.setInputAction(() => {
279.  
     this.infoDetail.circle.push({ id: id, center: lngLat, radius: radius });
280.  
     this.handler.destroy();
281.  
     }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
282.  
     }
283.  
     /*******
284.  
     * @function: function
285.  
     * @description: 自定义区域绘制
286.  
     * @return {*}
287.  
     * @author: xk
288.  
     */
289.  
     drawPlane() {
290.  
     this.handler.destroy();
291.  
     /**实体的唯一标注 */
292.  
     let id = new Date().getTime();
293.  
     /**记录拐点坐标 */
294.  
     let positions = [],
295.  
     /**记录返回结果 */
296.  
     codeInfo = [],
297.  
     /**面的hierarchy属性 */
298.  
     polygon = new Cesium.PolygonHierarchy(),
299.  
     /**面对象配置 */
300.  
     polyObj = null;
301.  
     this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
302.  
     // left
303.  
     this.handler.setInputAction((movement) => {
304.  
     let cartesian = this.viewer.scene.pickPosition(movement.position);
305.  
     let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
306.  
     let lng = Cesium.Math.toDegrees(cartographic.longitude);
307.  
     let lat = Cesium.Math.toDegrees(cartographic.latitude);
308.  
     let hei = Cesium.Math.toDegrees(cartographic.height);
309.  
      
310.  
     // console.log("><><><><><>", cartographic);
311.  
     if (cartesian && cartesian.x) {
312.  
     if (positions.length == 0) {
313.  
     positions.push(cartesian.clone());
314.  
     }
315.  
     codeInfo.push([lng, lat, hei]);
316.  
     positions.push(cartesian.clone());
317.  
      
318.  
     polygon.positions.push(cartesian.clone());
319.  
      
320.  
     if (!polyObj) {
321.  
     polyObj = this.viewer.entities.add({
322.  
     id: id,
323.  
     name: "planeSelf",
324.  
     polyline: {
325.  
     positions: new Cesium.CallbackProperty(function() {
326.  
     return positions;
327.  
     }, false),
328.  
     width: this.config.borderWidth,
329.  
     material: this.config.borderColor,
330.  
     clampToGround: true,
331.  
     },
332.  
     polygon: {
333.  
     hierarchy: new Cesium.CallbackProperty(function() {
334.  
     return polygon;
335.  
     }, false),
336.  
     material: this.config.material,
337.  
     clampToGround: true,
338.  
     },
339.  
     });
340.  
     }
341.  
     }
342.  
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
343.  
     // mouse
344.  
     this.handler.setInputAction((movement) => {
345.  
     let cartesian = this.viewer.scene.pickPosition(movement.endPosition);
346.  
     let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
347.  
     let lng = Cesium.Math.toDegrees(cartographic.longitude);
348.  
     let lat = Cesium.Math.toDegrees(cartographic.latitude);
349.  
     let hei = Cesium.Math.toDegrees(cartographic.height);
350.  
      
351.  
     if (positions.length >= 0) {
352.  
     if (cartesian && cartesian.x) {
353.  
     positions.pop();
354.  
     positions.push(cartesian);
355.  
     polygon.positions.pop();
356.  
     polygon.positions.push(cartesian);
357.  
     codeInfo.pop();
358.  
     codeInfo.push([lng, lat, hei]);
359.  
     }
360.  
     }
361.  
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
362.  
      
363.  
     // right
364.  
     this.handler.setInputAction((movement) => {
365.  
     this.infoDetail.planeSelf.push({ id: id, positions: codeInfo, polygon });
366.  
     console.log("planeSelf", this.infoDetail.planeSelf);
367.  
     this.handler.destroy();
368.  
     positions.push(positions[0]);
369.  
     }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
370.  
     }
371.  
      
372.  
     /*******
373.  
     * @function: function
374.  
     * @return {*}
375.  
     * @author: xk
376.  
     * @description: 绘制线段
377.  
     */
378.  
     drawLine() {
379.  
     this.handler.destroy();
380.  
     /**实体的唯一标注 */
381.  
     let id = null;
382.  
     /**记录拐点坐标 */
383.  
     let positions = [],
384.  
     /**记录返回结果 */
385.  
     codeInfo = [],
386.  
     /**面的hierarchy属性 */
387.  
     polygon = new Cesium.PolygonHierarchy(),
388.  
     /**面对象配置 */
389.  
     polyObj = null;
390.  
     this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
391.  
     // left
392.  
     this.handler.setInputAction((movement) => {
393.  
     id = new Date().getTime();
394.  
     let cartesian = this.getMovement(movement).cartesian;
395.  
     let position = this.getMovement(movement).position;
396.  
      
397.  
     if (cartesian && cartesian.x) {
398.  
     if (positions.length == 0) {
399.  
     positions.push(cartesian.clone());
400.  
     }
401.  
     codeInfo.push(position);
402.  
     positions.push(cartesian.clone());
403.  
     polygon.positions.push(cartesian.clone());
404.  
     if (!polyObj) {
405.  
     polyObj = this.addLine(id, "line", positions);
406.  
     }
407.  
     }
408.  
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
409.  
     // mouse
410.  
     this.handler.setInputAction((movement) => {
411.  
     let cartesian = this.viewer.scene.pickPosition(movement.endPosition);
412.  
     let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
413.  
     let lng = Cesium.Math.toDegrees(cartographic.longitude);
414.  
     let lat = Cesium.Math.toDegrees(cartographic.latitude);
415.  
      
416.  
     if (positions.length >= 0) {
417.  
     if (cartesian && cartesian.x) {
418.  
     positions.pop();
419.  
     positions.push(cartesian);
420.  
     codeInfo.pop();
421.  
     codeInfo.push([lng, lat]);
422.  
     }
423.  
     }
424.  
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
425.  
      
426.  
     // right
427.  
     this.handler.setInputAction((movement) => {
428.  
     this.infoDetail.line.push({ id, positions: codeInfo });
429.  
     console.log("infoDetail", this.infoDetail.line);
430.  
     this.handler.destroy();
431.  
     }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
432.  
     }
433.  
     /*******
434.  
     * @function: function
435.  
     * @description: 移除实体对象
436.  
     * @return {*}
437.  
     * @author: xk
438.  
     */
439.  
     removeEntity() {
440.  
     this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
441.  
     this.handler.setInputAction((move) => {
442.  
     /**实体对象信息 {id：entities，primitive：。。} */
443.  
     let pick = this.viewer.scene.pick(move.endPosition);
444.  
      
445.  
     if (pick && pick.id && pick.id.id) {
446.  
     document.body.style.cursor = "pointer";
447.  
     this.handler.setInputAction((click) => {
448.  
     let newPoint;
449.  
     switch (pick.id.name) {
450.  
     case "point":
451.  
     /**删除某一条数据 */
452.  
     newPoint = this.infoDetail.point.filter(
453.  
     (item) => item.id != pick.id._id
454.  
     );
455.  
     this.infoDetail.point = newPoint;
456.  
     break;
457.  
     case "line":
458.  
     /**删除某一条数据 */
459.  
     newPoint = this.infoDetail.line.filter(
460.  
     (item) => item.id != pick.id._id
461.  
     );
462.  
     this.infoDetail.line = newPoint;
463.  
     break;
464.  
     case "rectangle":
465.  
     /**删除某一条数据 */
466.  
     newPoint = this.infoDetail.rectangle.filter(
467.  
     (item) => item.id != pick.id._id
468.  
     );
469.  
     this.infoDetail.rectangle = newPoint;
470.  
     break;
471.  
      
472.  
     case "planeSelf":
473.  
     /**删除某一条数据 */
474.  
     newPoint = this.infoDetail.planeSelf.filter(
475.  
     (item) => item.id != pick.id._id
476.  
     );
477.  
     this.infoDetail.planeSelf = newPoint;
478.  
     break;
479.  
     case "circle":
480.  
     /**删除某一条数据 */
481.  
     newPoint = this.infoDetail.circle.filter(
482.  
     (item) => item.id != pick.id._id
483.  
     );
484.  
     this.infoDetail.circle = newPoint;
485.  
     break;
486.  
     default:
487.  
     break;
488.  
     }
489.  
     this.viewer.entities.remove(pick.id);
490.  
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
491.  
     } else {
492.  
     document.body.style = "cursor: default;";
493.  
     }
494.  
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
495.  
     }
496.  
     /*******
497.  
     * @function: function
498.  
     * @return {*}
499.  
     * @author: xk
500.  
     * @description: 返回绘制数据
501.  
     */
502.  
     backInfoDetail() {
503.  
     return this.infoDetail;
504.  
     }
505.  
     }

六、方法使用

1.  
   //新建绘画对象
2.  
   let draw = new Draw(viewer, {
3.  
   borderColor: Cesium.Color.RED,
4.  
   material: Cesium.Color.BLUE.withAlpha(0.3),
5.  
   });
6.  
   draw.drawPlane();

绘画完后f12打开控制台会有这样的数据打印

红框中就是我们需要提取的position数据，通过addPlane方法就可以实现重绘了

1.  
    
2.  
   let polygon = [
3.  
   [
4.  
   {
5.  
   x: 337391.70993699186,
6.  
   y: -4745401.190202851,
7.  
   z: 4234046.05863133,
8.  
   },
9.  
   {
10.  
    x: 338566.5104026345,
11.  
    y: -4745705.230711781,
12.  
    z: 4233614.397144763,
13.  
    },
14.  
    {
15.  
    x: 337520.9493625825,
16.  
    y: -4746057.340173215,
17.  
    z: 4233305.240160256,
18.  
    },
19.  
    {
20.  
    x: 337387.1903192716,
21.  
    y: -4745398.61765625,
22.  
    z: 4234049.280300835,
23.  
    },
24.  
    ],
25.  
    ];
26.  
     
27.  
    draw.addPlane(123123, "planeSelf", polygon);

 教程到这里就结束了，喜欢的不要忘记关注点赞收藏哦

这里附上gitee仓库地址，可以直接拉取查看代码cesium-test: 用于cesium学习测试的仓库

这是我的qq：1711503830有什么问题欢迎添加讨论。

这篇好文章是转载于：学新通技术网