269 lines
8.6 KiB
JavaScript
269 lines
8.6 KiB
JavaScript
|
import MouseTip from '../MouseTip'
|
|||
|
|
import MouseEvent from '../Event'
|
|||
|
|
import Draw from './draw'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @extends Draw*/
|
|||
|
|
class DrawSector extends Draw {
|
|||
|
|
constructor(sdk, options = {}) {
|
|||
|
|
super(sdk, options)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @desc 开始动态绘制面
|
|||
|
|
* @method start
|
|||
|
|
* @param cb {function} 回调函数
|
|||
|
|
* @memberOf DrawRect
|
|||
|
|
* @example draw.start((err,positions)=>{
|
|||
|
|
*
|
|||
|
|
* })
|
|||
|
|
* */
|
|||
|
|
start(cb) {
|
|||
|
|
let that = this
|
|||
|
|
if (YJ.Measure.GetMeasureStatus()) {
|
|||
|
|
cb('上一次测量未结束')
|
|||
|
|
} else {
|
|||
|
|
super.start()
|
|||
|
|
let into
|
|||
|
|
YJ.Measure.SetMeasureStatus(true)
|
|||
|
|
this.tip = new MouseTip('左键确认，右键取消', that.sdk)
|
|||
|
|
this.event = new MouseEvent(that.sdk)
|
|||
|
|
this._sector_id = null; //扇形
|
|||
|
|
this._positions = []; //活动点
|
|||
|
|
this.points_ids = []; //脏数据
|
|||
|
|
this._entities_sector = []; //脏数据
|
|||
|
|
this._radius = 0; //半径
|
|||
|
|
this._startAngle = 0; //起始角度
|
|||
|
|
this._endAngle = 0; //结束角度
|
|||
|
|
this.event.mouse_left((movement, cartesian) => {
|
|||
|
|
if(into === '2D') {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
into = '3D'
|
|||
|
|
// if(that._positions.length == 3) return
|
|||
|
|
|
|||
|
|
if (this._positions.length < 3) {
|
|||
|
|
this.points_ids.push(this.create_point(cartesian));
|
|||
|
|
this._positions.push(this.cartesian3Towgs84(cartesian, this.viewer));
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.end()
|
|||
|
|
cb(null, { center: this._positions[0], radius: this._radius, startAngle: this._startAngle, endAngle: this._endAngle })
|
|||
|
|
}
|
|||
|
|
if (this._positions.length === 2) {
|
|||
|
|
let pointA = Cesium.Cartesian3.fromDegrees(this._positions[0].lng, this._positions[0].lat, this._positions[0].alt);
|
|||
|
|
let pointB = cartesian;
|
|||
|
|
this._radius = Cesium.Cartesian3.distance(pointA, pointB);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.event.mouse_move((movement, cartesian) => {
|
|||
|
|
if(into === '2D') {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.tip.setPosition(
|
|||
|
|
cartesian,
|
|||
|
|
movement.endPosition.x,
|
|||
|
|
movement.endPosition.y
|
|||
|
|
)
|
|||
|
|
if (this._positions.length < 2) return;
|
|||
|
|
if (this._positions.length == 2) {
|
|||
|
|
this._positions.push(this.cartesian3Towgs84(cartesian, this.viewer));
|
|||
|
|
}
|
|||
|
|
if (this._positions.length == 3) {
|
|||
|
|
this._positions.pop();
|
|||
|
|
this._positions.push(this.cartesian3Towgs84(cartesian, this.viewer));
|
|||
|
|
if (!Cesium.defined(this._sector_id)) {
|
|||
|
|
this._sector_id = this.createsector();
|
|||
|
|
this.points_ids.push(this._sector_id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let options = that.calculateAangle(that._positions)
|
|||
|
|
that._startAngle = options.angle1;
|
|||
|
|
that._endAngle = options.angle2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
this.event.mouse_right((movement, cartesian) => {
|
|||
|
|
if(into === '2D') {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.end()
|
|||
|
|
cb(null)
|
|||
|
|
})
|
|||
|
|
if (!this._is2D && this._sdk2D) {
|
|||
|
|
this.event2D = new MouseEvent(this._sdk2D)
|
|||
|
|
this.event2D.mouse_left((movement, cartesian) => {
|
|||
|
|
if(into === '3D') {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
into = '2D'
|
|||
|
|
// if(that._positions.length == 3) return
|
|||
|
|
|
|||
|
|
if (this._positions.length < 3) {
|
|||
|
|
this.points_ids.push(this.create_point(cartesian, this._sdk2D.viewer));
|
|||
|
|
this._positions.push(this.cartesian3Towgs84(cartesian, this.viewer));
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
this.end()
|
|||
|
|
cb(null, { center: this._positions[0], radius: this._radius, startAngle: this._startAngle, endAngle: this._endAngle })
|
|||
|
|
}
|
|||
|
|
if (this._positions.length === 2) {
|
|||
|
|
let pointA = Cesium.Cartesian3.fromDegrees(this._positions[0].lng, this._positions[0].lat, this._positions[0].alt);
|
|||
|
|
let pointB = cartesian;
|
|||
|
|
this._radius = Cesium.Cartesian3.distance(pointA, pointB);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.event2D.mouse_move((movement, cartesian) => {
|
|||
|
|
if(into === '3D') {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.tip.setPosition(
|
|||
|
|
cartesian,
|
|||
|
|
movement.endPosition.x + this.viewer.canvas.width,
|
|||
|
|
movement.endPosition.y
|
|||
|
|
)
|
|||
|
|
if (this._positions.length < 2) return;
|
|||
|
|
if (this._positions.length == 2) {
|
|||
|
|
this._positions.push(this.cartesian3Towgs84(cartesian, this.viewer));
|
|||
|
|
}
|
|||
|
|
if (this._positions.length == 3) {
|
|||
|
|
this._positions.pop();
|
|||
|
|
this._positions.push(this.cartesian3Towgs84(cartesian, this.viewer));
|
|||
|
|
if (!Cesium.defined(this._sector_id)) {
|
|||
|
|
this._sector_id = this.createsector(this._sdk2D.viewer);
|
|||
|
|
this.points_ids.push(this._sector_id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let options = that.calculateAangle(that._positions)
|
|||
|
|
that._startAngle = options.angle1;
|
|||
|
|
that._endAngle = options.angle2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
this.event2D.mouse_right((movement, cartesian) => {
|
|||
|
|
if(into === '3D') {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.end()
|
|||
|
|
cb(null)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//创建直线扇形
|
|||
|
|
createsector(viewer = this.viewer) {
|
|||
|
|
// console.log(this._positions)
|
|||
|
|
let that = this;
|
|||
|
|
let angle
|
|||
|
|
let hierarchy = new Cesium.CallbackProperty(
|
|||
|
|
() => {
|
|||
|
|
let pList = that.calSector(that._positions[0], that._radius, that._startAngle, that._endAngle)
|
|||
|
|
return new Cesium.PolygonHierarchy(pList);
|
|||
|
|
})
|
|||
|
|
// let text = new Cesium.CallbackProperty(
|
|||
|
|
// () => {
|
|||
|
|
// angle = that._endAngle - that._startAngle
|
|||
|
|
// if (angle < 0) {
|
|||
|
|
// angle = 360 + angle
|
|||
|
|
// }
|
|||
|
|
// return angle.toFixed(2) + '°';
|
|||
|
|
// })
|
|||
|
|
let id = that.randomString()
|
|||
|
|
let arrowEntity = viewer.entities.add({
|
|||
|
|
id: id,
|
|||
|
|
position: Cesium.Cartesian3.fromDegrees(that._positions[0].lng, that._positions[0].lat),
|
|||
|
|
// label: {
|
|||
|
|
// text,
|
|||
|
|
// font: "24px Helvetica",
|
|||
|
|
// fillColor: Cesium.Color.SKYBLUE,
|
|||
|
|
// outlineColor: Cesium.Color.BLACK,
|
|||
|
|
// outlineWidth: 2,
|
|||
|
|
// style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|||
|
|
// pixelOffset: new Cesium.Cartesian2(0, -12),
|
|||
|
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|||
|
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|||
|
|
// disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|||
|
|
// },
|
|||
|
|
polygon: {
|
|||
|
|
hierarchy,
|
|||
|
|
show: true,
|
|||
|
|
fill: true,
|
|||
|
|
clampToGround: true,
|
|||
|
|
material: Cesium.Color.fromCssColorString(that.color),
|
|||
|
|
zIndex: 99999999
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
that._entities_sector.push(arrowEntity);
|
|||
|
|
return id
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
cartesianToLatlng(cartesian) {
|
|||
|
|
let latlng = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
|
|||
|
|
let lat = Cesium.Math.toDegrees(latlng.latitude);
|
|||
|
|
let lng = Cesium.Math.toDegrees(latlng.longitude);
|
|||
|
|
return [lng, lat];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 经纬度坐标转墨卡托坐标
|
|||
|
|
*/
|
|||
|
|
// 墨卡托坐标系：展开地球，赤道作为x轴，向东为x轴正方，本初子午线作为y轴，向北为y轴正方向。
|
|||
|
|
// 数字20037508.34是地球赤道周长的一半：地球半径6378137米，赤道周长2*PI*r = 2 * 20037508.3427892，墨卡托坐标x轴区间[-20037508.3427892,20037508.3427892]
|
|||
|
|
lonLatToMercator(Latlng) {
|
|||
|
|
let E = Latlng[0];
|
|||
|
|
let N = Latlng[1];
|
|||
|
|
let x = E * 20037508.34 / 180;
|
|||
|
|
let y = Math.log(Math.tan((90 + N) * Math.PI / 360)) / (Math.PI / 180);
|
|||
|
|
y = y * 20037508.34 / 180;
|
|||
|
|
return [x, y]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
WebMercator2lonLat(mercator) {
|
|||
|
|
let x = mercator[0] / 20037508.34 * 180;
|
|||
|
|
let ly = mercator[1] / 20037508.34 * 180;
|
|||
|
|
let y = 180 / Math.PI * (2 * Math.atan(Math.exp(ly * Math.PI / 180)) - Math.PI / 2)
|
|||
|
|
return [x, y];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//计算角度
|
|||
|
|
calculateAangle(arr) {
|
|||
|
|
function getAangle(start, end) {
|
|||
|
|
let rad = Math.PI / 180,
|
|||
|
|
lat1 = start.y * rad,
|
|||
|
|
lat2 = end.y * rad,
|
|||
|
|
lon1 = start.x * rad,
|
|||
|
|
lon2 = end.x * rad;
|
|||
|
|
const a = Math.sin(lon2 - lon1) * Math.cos(lat2);
|
|||
|
|
const b =
|
|||
|
|
Math.cos(lat1) * Math.sin(lat2) -
|
|||
|
|
Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1);
|
|||
|
|
const radians = Math.atan2(a, b)
|
|||
|
|
const degrees = radians % (2 * Math.PI);
|
|||
|
|
let bearing = 450 - ((degrees * 180) / Math.PI < 0
|
|||
|
|
? 360 + (degrees * 180) / Math.PI
|
|||
|
|
: (degrees * 180) / Math.PI) - 90;
|
|||
|
|
return 360 - (bearing % 360)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let center = arr[0]
|
|||
|
|
let pos84_1 = arr[1]
|
|||
|
|
let pos84_2 = arr[2]
|
|||
|
|
|
|||
|
|
let start = { x: center.lng, y: center.lat }
|
|||
|
|
let end1 = { x: pos84_1.lng, y: pos84_1.lat }
|
|||
|
|
let end2 = { x: pos84_2.lng, y: pos84_2.lat }
|
|||
|
|
|
|||
|
|
let angle1 = getAangle(start, end1)
|
|||
|
|
let angle2 = getAangle(start, end2)
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
angle1,
|
|||
|
|
angle2
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default DrawSector
|