做网站网站彩票算犯法吗,济南住房和城乡建设厅网站,推荐几个用vue做的网站,苏州网站制作方法Vue.js2Cesium1.103.0 六、标绘与测量
点#xff0c;线#xff0c;面的绘制#xff0c;可实时编辑图形#xff0c;点击折线或多边形边的中心点#xff0c;可进行添加线段移动顶点位置等操作#xff0c;并同时计算出点的经纬度#xff0c;折线的距离和多边形的面积。 De…Vue.js2Cesium1.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 classuldiv v-for(item, index) of btns :keyindex classli :class{ active: item.name active }clickhandleClick(item){{ item.name }}/divdiv classli :class{ disabled: plottingStatus } clickhandleSave保存/div/div
