Cesium 绘制点、线、面和测距

您所在的位置：网站首页 › cesium绘制点线面插件 › Cesium 绘制点、线、面和测距

Cesium 绘制点、线、面和测距

2024-07-11 22:19| 来源: 网络整理| 查看: 265

　　本文基于ES6，采用React+Cesium的Webgis前端开发框架，目前threejs和cesium的结合正在研究中。此段代码采用原生javascript，可能过程中用到了es6的扁平化语法，如()=>{},list.map方法。

废话不多说了，直接上代码。

import Cesium from 'cesium/Source/Cesium'; import monitor from '../style/images/monitor.jpeg'; const ECesium = { version: '0.1', description: '自定义cesium组件', copyright: '2018-enbo' }; ECesium.Tools = function (viewer, callback) { this.viewer = viewer; this.init(); }; ECesium.Tools.prototype.init = function (back) { //初始化事件 const viewer = this.viewer; const scene = viewer.scene; this.drawingMode = null; this.measureMode = null; this.geodesic = new Cesium.EllipsoidGeodesic(); this.handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); this.dataSource = new Cesium.CustomDataSource('test1'); viewer.dataSources.add(this.dataSource); console.log(viewer.dataSources.indexOf(this.dataSource)); }; ECesium.Tools.prototype.draw = function (type) { if (!this.viewer) return console.error('this.viewer 未定义'); this.deactivate(); this.drawingMode = type; switch (type) { case this.DRAW_TYPE.Point: this.DrawPoint(); break; case this.DRAW_TYPE.PolyLine: case this.DRAW_TYPE.Polygon: this.DrawGraphics(); break; default: break; } }; ECesium.Tools.prototype.DrawPoint = function (callback) { const viewer = this.viewer; const this_ = this; this.drawingMode = "point"; this.handler.setInputAction(function (evt) { const ray = viewer.camera.getPickRay(evt.position); const mapPosition = this_.getMapPoint(ray); if (!mapPosition) return; this_.dataSource.entities.add({ id: '云台' + Math.random(), name: '****点', position: Cesium.Cartesian3.fromDegrees(mapPosition.x, mapPosition.y, mapPosition.z), point: new Cesium.PointGraphics({ color: Cesium.Color.SKYBLUE, pixelSize: 10, outlineColor: Cesium.Color.YELLOW, outlineWidth: 3, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND }), description: `` }); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); }; ECesium.Tools.prototype.DrawGraphics = function (callback) { const viewer = this.viewer; const this_ = this; let activeShapePoints = []; let activeShape, floatingPoint; this.handler.setInputAction(function (event) { if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) { return console.log('This browser does not support polylines on terrain.'); } const ray = viewer.camera.getPickRay(event.position); const earthPosition = viewer.scene.globe.pick(ray, viewer.scene); if (Cesium.defined(earthPosition)) { if (activeShapePoints.length === 0) { floatingPoint = this_.createPoint(earthPosition); activeShapePoints.push(earthPosition); const dynamicPositions = new Cesium.CallbackProperty(function () { return activeShapePoints; }, false); activeShape = this_.drawShape(dynamicPositions); } activeShapePoints.push(earthPosition); this_.createPoint(earthPosition); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); this.handler.setInputAction(function (event) { if (Cesium.defined(floatingPoint)) { const ray = viewer.camera.getPickRay(event.endPosition); const newPosition = viewer.scene.globe.pick(ray, viewer.scene); if (Cesium.defined(newPosition)) { floatingPoint.position.setValue(newPosition); activeShapePoints.pop(); activeShapePoints.push(newPosition); } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); this.handler.setInputAction(function () { terminateShape(); }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); function terminateShape() { activeShapePoints.pop(); this_.drawShape(activeShapePoints); this.dataSource.entities.remove(floatingPoint); this.dataSource.entities.remove(activeShape); floatingPoint = undefined; activeShape = undefined; activeShapePoints = []; } }; ECesium.Tools.prototype.getMapPoint = function (ray) { const viewer = this.viewer; const cartesian = viewer.scene.globe.pick(ray, viewer.scene); if (!cartesian) { return null; } const cartographic = Cesium.Cartographic.fromCartesian(cartesian); const lng = Cesium.Math.toDegrees(cartographic.longitude);//经度值 const lat = Cesium.Math.toDegrees(cartographic.latitude);//纬度值 //cartographic.height的值为地形高度。 return {x: lng, y: lat, z: cartographic.height}; }; ECesium.Tools.prototype.createPoint = function (worldPosition) { return this.dataSource.entities.add({ position: worldPosition, point: { color: Cesium.Color.WHITE, pixelSize: 5, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND } }); }; ECesium.Tools.prototype.drawShape = function (positionData) { switch (this.drawingMode) { case this.DRAW_TYPE.PolyLine: return this.dataSource.entities.add({ polyline: { positions: positionData, clampToGround: true, width: 3 } }); case this.DRAW_TYPE.Polygon: return this.dataSource.entities.add({ polygon: { hierarchy: positionData, material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7)) } }); default: return; } }; ECesium.Tools.prototype.measure = function (type) { this.deactivate(); this.measureMode = type; this.DrawMeasureGraphics(); }; ECesium.Tools.prototype.DrawMeasureGraphics = function () { const viewer = this.viewer; const this_ = this; let activeShapePoints = []; let activeShape, floatingPoint; let measureDistance = 0, floatDistance = 0; this.handler.setInputAction(function (event) { if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) { return console.log('This browser does not support polylines on terrain.'); } const ray = viewer.camera.getPickRay(event.position); const earthPosition = viewer.scene.globe.pick(ray, viewer.scene); if (Cesium.defined(earthPosition)) { if (activeShapePoints.length === 0) { floatingPoint = this_.createMeasurePoint(earthPosition); if (this_.measureMode === this_.MEASURE_TYPE.MEASURE_DISTANCE) { floatingPoint.label = { text: new Cesium.CallbackProperty(function (time) { let distance = floatDistance = this_.getLatestLength(activeShapePoints); return ((distance + measureDistance) / 1000).toFixed(2) + ' km'; }, false), showBackground: true, backgroundColor: new Cesium.Color(0, 0, 0, 0.5), backgroundPadding: new Cesium.Cartesian2(7, 5), font: '16px sans-serif', }; this_.createLabel(earthPosition, '起点') } activeShapePoints.push(earthPosition); const dynamicPositions = new Cesium.CallbackProperty(function () { return activeShapePoints; }, false); activeShape = this_.drawMeasureShape(dynamicPositions); } if (activeShapePoints.length > 1 && this_.measureMode === this_.MEASURE_TYPE.MEASURE_DISTANCE) { measureDistance += floatDistance; this_.createLabel(earthPosition, (measureDistance / 1000).toFixed(2) + ' km'); } activeShapePoints.push(earthPosition); this_.createMeasurePoint(earthPosition); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); this.handler.setInputAction(function (event) { if (Cesium.defined(floatingPoint)) { const ray = viewer.camera.getPickRay(event.endPosition); const newPosition = viewer.scene.globe.pick(ray, viewer.scene); if (Cesium.defined(newPosition)) { floatingPoint.position.setValue(newPosition); activeShapePoints.pop(); activeShapePoints.push(newPosition); } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); this.handler.setInputAction(function () { terminateShape(); }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); function terminateShape() { activeShapePoints.pop(); this_.drawMeasureShape(activeShapePoints); this_.dataSource.entities.remove(floatingPoint); this_.dataSource.entities.remove(activeShape); floatingPoint = undefined; activeShape = undefined; activeShapePoints = []; measureDistance = 0; } }; ECesium.Tools.prototype.drawMeasureShape = function (positionData, callback) { console.log("draw shape"); switch (this.measureMode) { case this.MEASURE_TYPE.MEASURE_DISTANCE: return this.dataSource.entities.add({ polyline: { positions: positionData, clampToGround: true, width: 3 } }); case this.MEASURE_TYPE.MEASURE_AREA: return this.dataSource.entities.add({ polygon: { hierarchy: positionData, material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7)) } }); default: return; } }; ECesium.Tools.prototype.getLatestLength = function (activeShapePoints) { const length = activeShapePoints.length; const endPoint = activeShapePoints[length - 1]; const startPoint = activeShapePoints[length - 2]; const startCartographic = Cesium.Cartographic.fromCartesian(startPoint); const endCartographic = Cesium.Cartographic.fromCartesian(endPoint); this.geodesic.setEndPoints(startCartographic, endCartographic); return Math.round(this.geodesic.surfaceDistance); }; ECesium.Tools.prototype.createMeasurePoint = function (worldPosition, callback) { return this.dataSource.entities.add({ position: worldPosition, point: { color: Cesium.Color.WHITE, pixelSize: 8, outlineColor: Cesium.Color.RED, outlineWidth: 3, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, scaleByDistance: new Cesium.NearFarScalar(0, 0, 1, 1) } }); }; ECesium.Tools.prototype.createLabel = function (worldPosition, text) { return this.dataSource.entities.add({ position: worldPosition, label: { text: text, showBackground: true, backgroundColor: new Cesium.Color(1, 1, 1, 0.7), backgroundPadding: new Cesium.Cartesian2(7, 5), font: '16px sans-serif', fillColor: Cesium.Color.BLACK, outlineColor: Cesium.Color.BLACK, pixelOffset: new Cesium.Cartesian2(-15, -15) } }); }; ECesium.Tools.prototype.deactivate = function () { if (this.handler) { this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); } this.drawingMode = null; }; ECesium.Tools.prototype.DRAW_TYPE = { Point: 'Point', PolyLine: 'PolyLine', Polygon: 'Polygon' }; ECesium.Tools.prototype.MEASURE_TYPE = { MEASURE_DISTANCE: 'MeasureTerrainDistance', MEASURE_AREA: 'MeasureTerrainArea' }; export default ECesium;

　　　使用时直接实例化ECesium

this.tool = new ECesium.Tools(this.viewer);

　　　绘制图形

this.tool.draw('Point/PolyLine/Polygon');

　　　测距

this.tool.measure(MeasureTerrainDistance);

Tips*面积测量没有添加计算方法，后期会加上。

【本文地址】

Cesium 绘制点、线、面和测距

Cesium 绘制点、线、面和测距

今日新闻

推荐新闻