Vue.js2+Cesium1.103.0 六、标绘与测量

点，线，面的绘制，可实时编辑图形，点击折线或多边形边的中心点，可进行添加线段移动顶点位置等操作，并同时计算出点的经纬度，折线的距离和多边形的面积。

Demo

import PlotUtil from '@/utils/CesiumUtils/Plot/index.js'
export default {data () {return {plottingStatus: false,plotData: {},$PlotUtil: null,active: '',btns: [{name: 'point'},{name: 'polyline'},{name: 'polygon'}// {//   name: 'text'// }]}},methods: {handleSave() {this.addGraphic(this.plotData)this.$PlotUtil.Destory()},addGraphic(data) {const _color = new Cesium.Color.fromCssColorString('#17E980')if (data.drawingMode === 'point') {viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(data.centerPoint.longitude, data.centerPoint.latitude, data.centerPoint.altitude),point: {color: _color,// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 30000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 1.0, 0.7e4, 0.8),pixelSize: 14,outlineWidth: 2,outlineColor: Cesium.Color.fromCssColorString('#fff')},label: {text: `经度：${data.centerPoint.longitude}\n纬度：${data.centerPoint.latitude}\n海拔：${data.centerPoint.altitude}米`,font: '30px sans-serif',// pixelOffset: new Cesium.Cartesian2(0.0, 45.0),// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,fillColor: Cesium.Color.fromCssColorString('#fff'),style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.fromCssColorString('#000'),disableDepthTestDistance: Number.POSITIVE_INFINITY,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 30000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 0.6, 0.7e4, 0.5)}})} else if (data.drawingMode === 'polyline') {viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(data.centerPoint.longitude, data.centerPoint.latitude, data.centerPoint.altitude),label: {text: `${data.activeShapeComputed}m`,font: '30px sans-serif',// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,fillColor: Cesium.Color.fromCssColorString('#fff'),style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.fromCssColorString('#000'),disableDepthTestDistance: Number.POSITIVE_INFINITY,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 30000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 0.6, 0.7e4, 0.5)}})if (data.activeSubLine && data.activeSubLine.length > 0) {data.activeSubLine.map((line, lineIndex) => {if (line.distance <= 0) returnconst positions = Cesium.Cartesian3.fromDegreesArrayHeights([line.start.longitude, line.start.latitude, line.start.altitude,line.end.longitude, line.end.latitude, line.end.altitude])viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(line.centerPoint.longitude, line.centerPoint.latitude, line.centerPoint.altitude),polyline: {// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,positions: positions,material: _color,depthFailMaterial: new Cesium.PolylineDashMaterialProperty({_color}),width: 5},label: {text: `${line.distance}米`,font: '30px sans-serif',fillColor: Cesium.Color.fromCssColorString('#fff'),style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.fromCssColorString('#000'),disableDepthTestDistance: Number.POSITIVE_INFINITY,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 30000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 0.6, 0.7e4, 0.5)}})})}} else if (data.drawingMode === 'polygon') {const vertices = data.verticesPosition || data.activeShapePoints || []const _hierarchy = []if (vertices.length > 0) {vertices.map(point => {_hierarchy.push(Cesium.Cartesian3.fromDegrees(point.longitude,point.latitude,point.altitude))})}if (_hierarchy.length > 0) {const dynamicPositions = new Cesium.CallbackProperty(function () {return new Cesium.PolygonHierarchy(_hierarchy)}, false) // 使贴地多边形在模型上有立体效果const center = data.centerPointconst altitudes = vertices.map(_ => _.altitude)const max = altitudes.sort()[altitudes.length - 1]center.altitude = maxviewer.entities.add({position: Cesium.Cartesian3.fromDegrees(data.centerPoint.longitude, data.centerPoint.latitude, data.centerPoint.altitude),polygon: {// hierarchy: hierarchy,hierarchy: dynamicPositions,// extrudedHeight: 200,// perPositionHeight: true,// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,material: new Cesium.ColorMaterialProperty(_color)},label: {text: `${data.activeShapeComputed}平方米`,font: '30px sans-serif',fillColor: Cesium.Color.fromCssColorString('#fff'),style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,outlineColor: Cesium.Color.fromCssColorString('#000'),disableDepthTestDistance: Number.POSITIVE_INFINITY,// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,// eyeOffset: new Cesium.Cartesian3(0, 0, -10000),// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 10000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 0.6, 0.7e4, 0.5)}})}} else if (data.drawingMode === 'text') {viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(data.centerPoint.longitude, data.centerPoint.latitude, data.centerPoint.altitude),label: {text: text,font: _font,fillColor: _color,disableDepthTestDistance: Number.POSITIVE_INFINITY,distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 30000.0),scaleByDistance: new Cesium.NearFarScalar(1.0e2, 0.6, 0.7e4, 0.5),show: visible}})}},initPlotUtil() {const _this = thisthis.$PlotUtil = new PlotUtil({defaultColorValue: '#17E980',PlottingStatus: function (value) {_this.plottingStatus = valueconsole.log('..................PlottingStatus', value)},Finish: function (data) {console.log('..................Finish', data)_this.plotData = data},VerticesFinish: function (data) {console.log('..................VerticesFinish', data)},CurrentEditVertice: function (data) {console.log('..................CurrentEditVertice', data)}})},handleClick (item) {this.active =this.active === item.name? (this.active = ''): (this.active = item.name)if (this.active) {this.$PlotUtil.StartPlot(this.active)} else {this.$PlotUtil.Destory()}}}
}

      <div class="ul"><div v-for="(item, index) of btns" :key="index" class="li" :class="{ active: item.name === active }"@click="handleClick(item)">{{ item.name }}</div><div class="li" :class="{ disabled: plottingStatus }" @click="handleSave">保存</div></div>