Cesium(九) 角度量算工具 （一）
之前在用超图的进行现在开发，现在用原生的Cesium之后发现量算工具还是个小麻烦。。。关于距离，面积，高度网上都有例子了，但是现在有个角度测量的需求，就自己写了一下。这个是在正北方向做一条辅助线，然后求与正北方向的夹角，过几天做自己画两条线夹角的。
———tool工具类：
———— graphic.js
效果图：
const radiansPerDegree = Math.PI / 180.0;//角度转化为弧度(rad)
const degreesPerRadian = 180.0 / Math.PI;//弧度转化为角度
const color=Cesium.Color.fromCssColorString('rgba(247,224,32,0.6)')
const pointStyle={
pixelSize: 8,
color:color
}
const labelStyle={
font: '36px sans-serif',
fillColor: Cesium.Color.WHITE,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// outlineWidth: 2,
showBackground:true,
scale:0.5,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(20, -20),
heightReference: Cesium.HeightReference.NONE
}
const AngleGraphic=(function(){
function _(viewer,options){
this.viewer = viewer
viewer.scene.postProcessStages.fxaa.enabled = false;
this.options = {
polyline: options
}
this.positions = options.positions || [];
this.entity = this._init();
this.idDestroyed=false
this._depthTestAgainstTerrain=this.viewer.scene.globe.depthTestAgainstTerrain,
this.nodes=[]
}
_.prototype._init = function () {
this.viewer.scene.globe.depthTestAgainstTerrain=true
const _self = this;
const _update = function () {
return _self.positions;
};
//实时更新polyline.positions
this.options.polyline.positions = new Cesium.CallbackProperty(_update, false);
const entity = this.viewer.entities.add(this.options);
return entity
}
_.prototype.remove = function () {
this.viewer.entities.remove(this.entity)
if(this.tmpPolyline){
this.viewer.entities.remove(this.tmpPolyline)
}
for(let p of this.nodes){
this.viewer.entities.remove(p)
}
}
_.prototype.pushNode=function(cartesian){
this.positions.push(cartesian)
const p=this.viewer.entities.add({
position:cartesian,
point:pointStyle
})
this.nodes.push(p)
}
_.prototype.popNode=function(){
this.positions.pop()
const p=this.nodes.pop()
this.viewer.entities.remove(p)
}
_.prototype.destroy=function(){
this.options={
}
this.positions=[]
this.entity=undefined
this.viewer=undefined
this.idDestroyed=true
this.tmpPolyline=undefined
}
_.prototype.stopEdit=function(){
this.viewer.scene.globe.depthTestAgainstTerrain=this._depthTestAgainstTerrain
this.options.label = this.createLabel()
this.options.polyline.positions=this.positions
this.options.position=this.positions[this.positions.length-1]
this.remove()
this.tmpPolyline=this.createAssitGraphic()
this.entity=this.viewer.entities.add(this.options)
}
/**
* 创建辅助线
*/
_.prototype.createAssitGraphic=function(){
if(this.positions.length!==2){
return
}
const startC=Cesium.Cartographic.fromCartesian(this.positions[0])
console.log(startC);
const distance = this.getDistance();
console.log(distance);//单位m
// const endC=Cesium.Cartographic.fromCartesian(this.positions[1])
const tmp=Cesium.Cartesian3.fromRadians(
startC.longitude,
startC.latitude+distance/111000*radiansPerDegree,
startC.height
)
const pts=[this.positions[0],tmp]
return this.viewer.entities.add({
polyline:{
positions:pts,
material:new Cesium.PolylineDashMaterialProperty({
color:color}),
width:10
}
})
}
_.prototype.getDistance = function () {
let distance = 0;
const positions = this.positions
for (let i = 0; i < positions.length - 1; i++) {
let point1cartographic = Cesium.Cartographic.fromCartesian(positions[i]);
let point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1]);
/**根据经纬度计算出距离**/
let geodesic = new Cesium.EllipsoidGeodesic();
geodesic.setEndPoints(point1cartographic, point2cartographic);
let s = geodesic.surfaceDistance;
//console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));
//返回两点之间的距离
s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
distance = distance + s;
}
return distance.toFixed(2);
}
_.prototype.createLabel = function () {
const label = labelStyle
label.text='角度'+this.getAngle().toFixed(2)+'°'
+'长度'+this.getDistance()+'米'
return label
}
_.prototype.getAngle=function(){
if(this.positions.length!==2){
return 'Nan'
}
const startC=Cesium.Cartographic.fromCartesian(this.positions[0])
const endC=Cesium.Cartographic.fromCartesian(this.positions[1])
const distance = this.getDistance();
if(startC&&endC){
const l = parseFloat(this.getDistance())//边长
const topPoint=Cesium.Cartesian3.fromRadians(//北上点的Cartesian3
Cesium.Cartographic.fromCartesian(this.positions[0]).longitude,
Cesium.Cartographic.fromCartesian(this.positions[0]).latitude+distance/111000*radiansPerDegree,
Cesium.Cartographic.fromCartesian(this.positions[0]).height
)
const newPoint =Cesium.Cartesian3.fromRadians(
Cesium.Cartographic.fromCartesian(this.positions[1]).longitude,
Cesium.Cartographic.fromCartesian(this.positions[1]).latitude,
Cesium.Cartographic.fromCartesian(this.positions[1]).height
)
const d = Cesium.Cartesian3.distance(topPoint,newPoint);
console.log(Math.acos((2*l*l-d*d)/(2*l*l)))
console.log(l)
console.log(d)
return Cesium.Cartographic.fromCartesian(this.positions[1]).longitude>Cesium.Cartographic.fromCartesian(this.positions[0]).longitude?
Math.acos((2*l*l-d*d)/(2*l*l))*degreesPerRadian:-Math.acos((2*l*l-d*d)/(2*l*l))*degreesPerRadian
}else{
return 'NaN'
}
}
return _
})();
export AngleGraphic
调用方法
这里只附带了部分方法，其他的可以看这个博主的：
github地址
toggleClick(mode) {
if(!viewer){
this.init(window.viewer)
}
this.mode=mode
if (window.graphicManager) {
this.stopDraw();
return;
}
this.tipVisible(true);
this.curMeasureStatus = "结束测量";
const color = Cesium.Color.fromCssColorString("rgba(247,224,32,1)");
window.graphicManager = new AngleGraphic(viewer, {
positions: this.positions,
material: color,
width: 3
});
this.updateTipText("请单击地图确定起点.");
}
init(cesiumViewer) {
const self = this;
viewer=cesiumViewer;
console.log(viewer);
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
const tooltip = this.createTip();
this.tipVisible(false);
handler.setInputAction(e => {
if (!Cesium.defined(window.graphicManager)) {
return;
}
const pixel = e.position;
const ray = viewer.camera.getPickRay(pixel);
const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
//高度和角度只需要一条线段
if (self.mode === "height"||self.mode === "angle") {
......