877 lines
32 KiB
JavaScript
877 lines
32 KiB
JavaScript
|
import * as DT from 'dt-sdk'
|
||
|
|
import * as turf from '@turf/turf'
|
||
|
|
/**
|
||
|
|
|
||
|
|
* @author zhangti
|
||
|
|
* @param viewer {object} 三维对象
|
||
|
|
* @param options {object} 初始化参数
|
||
|
|
* @constructor
|
||
|
|
*/
|
||
|
|
DT.Measure = (function () {
|
||
|
|
/**
|
||
|
|
* 绘制对象
|
||
|
|
* @param viewer
|
||
|
|
* @param options
|
||
|
|
* @constructor
|
||
|
|
*/
|
||
|
|
function _(viewer, options = {}) {
|
||
|
|
if (viewer && viewer instanceof DT.Viewer) {
|
||
|
|
this._drawLayer = new DT.Cesium.CustomDataSource('measureLayer')
|
||
|
|
viewer && viewer.dataSourceDisplay.dataSources.add(this._drawLayer)
|
||
|
|
this._basePath = options.basePath || ''
|
||
|
|
this._viewer = viewer
|
||
|
|
this._drawIndex = 0
|
||
|
|
this.drawPoints = {
|
||
|
|
'draw-total-0': [],
|
||
|
|
'draw-clear-0': []
|
||
|
|
}
|
||
|
|
this.toggleHandler(true)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
_.prototype = {
|
||
|
|
/***
|
||
|
|
* 坐标转换 84转笛卡尔
|
||
|
|
*
|
||
|
|
* @param {Object} {lng,lat,alt} 地理坐标
|
||
|
|
*
|
||
|
|
* @return {Object} Cartesian3 三维位置坐标
|
||
|
|
*/
|
||
|
|
transformWGS84ToCartesian: function (position, alt) {
|
||
|
|
if (this._viewer) {
|
||
|
|
return position
|
||
|
|
? DT.Cesium.Cartesian3.fromDegrees(
|
||
|
|
position.lng || position.lon,
|
||
|
|
position.lat,
|
||
|
|
(position.alt = alt || position.alt),
|
||
|
|
DT.Cesium.Ellipsoid.WGS84
|
||
|
|
)
|
||
|
|
: DT.Cesium.Cartesian3.ZERO
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/***
|
||
|
|
* 坐标数组转换 笛卡尔转84
|
||
|
|
*
|
||
|
|
* @param {Array} WSG84Arr {lng,lat,alt} 地理坐标数组
|
||
|
|
* @param {Number} alt 拔高
|
||
|
|
* @return {Array} Cartesian3 三维位置坐标数组
|
||
|
|
*/
|
||
|
|
transformWGS84ArrayToCartesianArray: function (WSG84Arr, alt) {
|
||
|
|
if (this._viewer && WSG84Arr) {
|
||
|
|
var $this = this
|
||
|
|
return WSG84Arr
|
||
|
|
? WSG84Arr.map(function (item) {
|
||
|
|
return $this.transformWGS84ToCartesian(item, alt)
|
||
|
|
})
|
||
|
|
: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/***
|
||
|
|
* 坐标转换 笛卡尔转84
|
||
|
|
*
|
||
|
|
* @param {Object} Cartesian3 三维位置坐标
|
||
|
|
*
|
||
|
|
* @return {Object} {lng,lat,alt} 地理坐标
|
||
|
|
*/
|
||
|
|
transformCartesianToWGS84: function (cartesian) {
|
||
|
|
if (this._viewer && cartesian) {
|
||
|
|
var ellipsoid = DT.Cesium.Ellipsoid.WGS84
|
||
|
|
var cartographic = ellipsoid.cartesianToCartographic(cartesian)
|
||
|
|
return {
|
||
|
|
lng: DT.Cesium.Math.toDegrees(cartographic.longitude),
|
||
|
|
lat: DT.Cesium.Math.toDegrees(cartographic.latitude),
|
||
|
|
alt: cartographic.height
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/***
|
||
|
|
* 坐标数组转换 笛卡尔转86
|
||
|
|
*
|
||
|
|
* @param {Array} cartesianArr 三维位置坐标数组
|
||
|
|
*
|
||
|
|
* @return {Array} {lng,lat,alt} 地理坐标数组
|
||
|
|
*/
|
||
|
|
transformCartesianArrayToWGS84Array: function (cartesianArr) {
|
||
|
|
if (this._viewer) {
|
||
|
|
var $this = this
|
||
|
|
return cartesianArr
|
||
|
|
? cartesianArr.map(function (item) {
|
||
|
|
return $this.transformCartesianToWGS84(item)
|
||
|
|
})
|
||
|
|
: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 84坐标转弧度坐标
|
||
|
|
* @param {Object} position wgs84
|
||
|
|
* @return {Object} Cartographic 弧度坐标
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
transformWGS84ToCartographic: function (position) {
|
||
|
|
return position
|
||
|
|
? DT.Cesium.Cartographic.fromDegrees(
|
||
|
|
position.lng || position.lon,
|
||
|
|
position.lat,
|
||
|
|
position.alt
|
||
|
|
)
|
||
|
|
: DT.Cesium.Cartographic.ZERO
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 拾取位置点
|
||
|
|
*
|
||
|
|
* @param {Object} px 屏幕坐标
|
||
|
|
*
|
||
|
|
* @return {Object} Cartesian3 三维坐标
|
||
|
|
*/
|
||
|
|
getCatesian3FromPX: function (px) {
|
||
|
|
if (this._viewer && px) {
|
||
|
|
var picks = this._viewer.cesiumViewer.scene.drillPick(px)
|
||
|
|
var cartesian = null
|
||
|
|
var isOn3dtiles = false,
|
||
|
|
isOnTerrain = false
|
||
|
|
// drillPick
|
||
|
|
for (let i in picks) {
|
||
|
|
let pick = picks[i]
|
||
|
|
if (
|
||
|
|
(pick && pick.primitive instanceof DT.Cesium.Cesium3DTileFeature) ||
|
||
|
|
(pick && pick.primitive instanceof DT.Cesium.Cesium3DTileset) ||
|
||
|
|
(pick && pick.primitive instanceof DT.Cesium.Model)
|
||
|
|
) {
|
||
|
|
//模型上拾取
|
||
|
|
isOn3dtiles = true
|
||
|
|
}
|
||
|
|
// 3dtilset
|
||
|
|
if (isOn3dtiles) {
|
||
|
|
this._viewer.cesiumViewer.scene.pick(px) // pick
|
||
|
|
cartesian = this._viewer.cesiumViewer.scene.pickPosition(px)
|
||
|
|
if (cartesian) {
|
||
|
|
let cartographic = DT.Cesium.Cartographic.fromCartesian(cartesian)
|
||
|
|
|
||
|
|
if (cartographic.height < 0) cartographic.height = 0
|
||
|
|
let lon = DT.Cesium.Math.toDegrees(cartographic.longitude),
|
||
|
|
lat = DT.Cesium.Math.toDegrees(cartographic.latitude),
|
||
|
|
height = cartographic.height
|
||
|
|
cartesian = this.transformWGS84ToCartesian({
|
||
|
|
lng: lon,
|
||
|
|
lat: lat,
|
||
|
|
alt: height
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 地形
|
||
|
|
let boolTerrain =
|
||
|
|
this._viewer.cesiumViewer.terrainProvider instanceof
|
||
|
|
DT.Cesium.EllipsoidTerrainProvider
|
||
|
|
// Terrain
|
||
|
|
if (!isOn3dtiles && !boolTerrain) {
|
||
|
|
var ray = this._viewer.cesiumViewer.scene.camera.getPickRay(px)
|
||
|
|
if (!ray) return null
|
||
|
|
cartesian = this._viewer.cesiumViewer.scene.globe.pick(
|
||
|
|
ray,
|
||
|
|
this._viewer.cesiumViewer.scene
|
||
|
|
)
|
||
|
|
// isOnTerrain = true
|
||
|
|
}
|
||
|
|
// 地球
|
||
|
|
if (!isOn3dtiles && !isOnTerrain && boolTerrain) {
|
||
|
|
cartesian = this._viewer.cesiumViewer.scene.camera.pickEllipsoid(
|
||
|
|
px,
|
||
|
|
this._viewer.cesiumViewer.scene.globe.ellipsoid
|
||
|
|
)
|
||
|
|
}
|
||
|
|
if (cartesian) {
|
||
|
|
let position = this.transformCartesianToWGS84(cartesian)
|
||
|
|
if (position.alt < 0) {
|
||
|
|
cartesian = this.transformWGS84ToCartesian(position, 0.1)
|
||
|
|
}
|
||
|
|
let cartographic = DT.Cesium.Cartographic.fromCartesian(cartesian)
|
||
|
|
return cartesian
|
||
|
|
}
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 获取84坐标的距离
|
||
|
|
* @param {*} positions
|
||
|
|
*/
|
||
|
|
getPositionDistance: function (positions) {
|
||
|
|
let distance = 0
|
||
|
|
for (let i = 0; i < positions.length - 1; i++) {
|
||
|
|
let point1cartographic = this.transformWGS84ToCartographic(positions[i])
|
||
|
|
let point2cartographic = this.transformWGS84ToCartographic(
|
||
|
|
positions[i + 1]
|
||
|
|
)
|
||
|
|
let geodesic = new DT.Cesium.EllipsoidGeodesic()
|
||
|
|
geodesic.setEndPoints(point1cartographic, point2cartographic)
|
||
|
|
let s = geodesic.surfaceDistance
|
||
|
|
s = Math.sqrt(
|
||
|
|
Math.pow(s, 2) +
|
||
|
|
Math.pow(point2cartographic.height - point1cartographic.height, 2)
|
||
|
|
)
|
||
|
|
distance = distance + s
|
||
|
|
}
|
||
|
|
return distance.toFixed(3)
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 计算一组坐标组成多边形的面积
|
||
|
|
* @param {*} positions
|
||
|
|
*/
|
||
|
|
getPositionsArea: function (positions) {
|
||
|
|
let result = 0
|
||
|
|
if (positions) {
|
||
|
|
let h = 0
|
||
|
|
let ellipsoid = DT.Cesium.Ellipsoid.WGS84
|
||
|
|
positions.push(positions[0])
|
||
|
|
for (let i = 1; i < positions.length; i++) {
|
||
|
|
let oel = ellipsoid.cartographicToCartesian(
|
||
|
|
this.transformWGS84ToCartographic(positions[i - 1])
|
||
|
|
)
|
||
|
|
let el = ellipsoid.cartographicToCartesian(
|
||
|
|
this.transformWGS84ToCartographic(positions[i])
|
||
|
|
)
|
||
|
|
h += oel.x * el.y - el.x * oel.y
|
||
|
|
}
|
||
|
|
result = Math.abs(h).toFixed(2)
|
||
|
|
}
|
||
|
|
return result
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 测距
|
||
|
|
* @param {*} options
|
||
|
|
*/
|
||
|
|
drawLineMeasureGraphics: function (options = {}) {
|
||
|
|
if (this._viewer && options) {
|
||
|
|
var positions = [],
|
||
|
|
latLon = [],
|
||
|
|
_lineEntity = new DT.Cesium.Entity(),
|
||
|
|
$this = this,
|
||
|
|
lineObj,
|
||
|
|
_handlers = new DT.Cesium.ScreenSpaceEventHandler(
|
||
|
|
this._viewer.cesiumViewer.scene.canvas
|
||
|
|
)
|
||
|
|
$this._viewer.cesiumViewer.canvas.style.cursor = 'crosshair'
|
||
|
|
// left
|
||
|
|
_handlers.setInputAction(function (movement) {
|
||
|
|
var cartesian = $this.getCatesian3FromPX(movement.position)
|
||
|
|
let cat = DT.Cesium.Cartographic.fromCartesian(cartesian)
|
||
|
|
|
||
|
|
if (cartesian && cartesian.x) {
|
||
|
|
if (positions.length == 0) {
|
||
|
|
latLon.push(movement.position)
|
||
|
|
positions.push(cartesian.clone())
|
||
|
|
}
|
||
|
|
// 添加量测信息点
|
||
|
|
_addInfoPoint(cartesian)
|
||
|
|
positions.push(cartesian)
|
||
|
|
}
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
|
|
|
||
|
|
_handlers.setInputAction(function (movement) {
|
||
|
|
var cartesian = $this.getCatesian3FromPX(movement.endPosition)
|
||
|
|
if (positions.length >= 2) {
|
||
|
|
if (cartesian && cartesian.x) {
|
||
|
|
latLon.push(movement.position)
|
||
|
|
positions.pop()
|
||
|
|
positions.push(cartesian)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||
|
|
// right
|
||
|
|
_handlers.setInputAction(function (movement) {
|
||
|
|
_handlers.destroy()
|
||
|
|
_handlers = null
|
||
|
|
let cartesian = $this.getCatesian3FromPX(movement.position)
|
||
|
|
// 角度小于5大于-160右边显示
|
||
|
|
let type = 'left'
|
||
|
|
if (positions.length > 1) {
|
||
|
|
let lat = $this.transformCartesianToWGS84(cartesian)
|
||
|
|
let lat2 = $this.transformCartesianToWGS84(positions[positions.length - 2])
|
||
|
|
let point1 = turf.point([lat.lng, lat.lat]);
|
||
|
|
let point2 = turf.point([lat2.lng, lat2.lat]);
|
||
|
|
let bearing = turf.bearing(point1, point2);
|
||
|
|
if (bearing > -160 && bearing < 5) {
|
||
|
|
type = 'right'
|
||
|
|
}
|
||
|
|
_addInfoPoint(cartesian, type)
|
||
|
|
// 添加清除功能
|
||
|
|
_addClearPoint(cartesian, type)
|
||
|
|
}
|
||
|
|
$this._viewer.cesiumViewer.canvas.style.cursor = 'default'
|
||
|
|
if (typeof options.callback === 'function') {
|
||
|
|
options.callback(
|
||
|
|
$this.transformCartesianArrayToWGS84Array(positions),
|
||
|
|
lineObj
|
||
|
|
)
|
||
|
|
}
|
||
|
|
$this._drawIndex++
|
||
|
|
$this.drawPoints[`draw-total-${$this._drawIndex}`] = []
|
||
|
|
$this.drawPoints[`draw-clear-${$this._drawIndex}`] = []
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
||
|
|
|
||
|
|
_lineEntity.polyline = {
|
||
|
|
name: `draw-total-${$this._drawIndex}`,
|
||
|
|
width: options.width || 2,
|
||
|
|
material: options.material || DT.Cesium.Color.RED.withAlpha(0.8),
|
||
|
|
clampToGround: true
|
||
|
|
}
|
||
|
|
_lineEntity.polyline.positions = new DT.Cesium.CallbackProperty(
|
||
|
|
function () {
|
||
|
|
return positions
|
||
|
|
},
|
||
|
|
false
|
||
|
|
)
|
||
|
|
let line = this._drawLayer.entities.add(_lineEntity)
|
||
|
|
$this.drawPoints[`draw-total-${$this._drawIndex}`].push(line)
|
||
|
|
//添加坐标点
|
||
|
|
//type === 'last' 代表绘制的最后一个点
|
||
|
|
function _addInfoPoint(position, type = null) {
|
||
|
|
let cat = DT.Cesium.Cartographic.fromCartesian(position)
|
||
|
|
let pointPosition = DT.Cesium.Cartesian3.fromRadians(cat.longitude, cat.latitude, cat.height)
|
||
|
|
let len = $this.getPositionDistance(
|
||
|
|
$this.transformCartesianArrayToWGS84Array(positions)
|
||
|
|
)
|
||
|
|
let text = '起点'
|
||
|
|
if (Number(len) < 1 && Number(len) > 0) {
|
||
|
|
text = '1米'
|
||
|
|
} else if (Number(len) > 1 && Number(len) < 1000) {
|
||
|
|
text = Number(len).toFixed(2) + '米'
|
||
|
|
} else if (Number(len) > 1000) {
|
||
|
|
text = (Number(len) / 1000).toFixed(2) + '公里'
|
||
|
|
}
|
||
|
|
var _labelEntity = new DT.Cesium.Entity({
|
||
|
|
position: pointPosition.clone(),
|
||
|
|
name: `draw-total-${$this._drawIndex}`,
|
||
|
|
point: {
|
||
|
|
pixelSize: 4,
|
||
|
|
color: DT.Cesium.Color.YELLOW,
|
||
|
|
outlineColor: DT.Cesium.Color.RED,
|
||
|
|
outlineWidth: 2,
|
||
|
|
// heightReference: DT.Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
text,
|
||
|
|
font: `bold 18px AlibabaPuHuiTi-2-55-Regular`,
|
||
|
|
fillColor: DT.Cesium.Color.WHITE,
|
||
|
|
backgroundColor: new DT.Cesium.Color(0.165, 0.165, 0.165, 0.8),
|
||
|
|
backgroundPadding: new DT.Cesium.Cartesian2(4, 4),
|
||
|
|
outlineWidth: 4,
|
||
|
|
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
|
|
pixelOffset: new DT.Cesium.Cartesian2(!type || type === 'left' ? 15 : 40, 0),
|
||
|
|
scale: 1,
|
||
|
|
scaleByDistance: new DT.Cesium.NearFarScalar(1, 0.85, 8.0e6, 0.75),
|
||
|
|
// heightReference: DT.Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
|
|
// disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
|
|
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
|
||
|
|
verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM
|
||
|
|
}
|
||
|
|
})
|
||
|
|
let en = $this._drawLayer.entities.add(_labelEntity)
|
||
|
|
$this.drawPoints[`draw-total-${$this._drawIndex}`].push(en)
|
||
|
|
}
|
||
|
|
function _addClearPoint(position, type) {
|
||
|
|
var _labelEntity = new DT.Cesium.Entity()
|
||
|
|
_labelEntity.position = position
|
||
|
|
_labelEntity.name = `draw-clear-${$this._drawIndex}`
|
||
|
|
_labelEntity.billboard = {
|
||
|
|
image: require('@/assets/img/common/clear.png'),
|
||
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
|
|
width: 22,
|
||
|
|
height: 22,
|
||
|
|
pixelOffset: new DT.Cesium.Cartesian2(type === 'left' ? -25 : 25, 0),
|
||
|
|
}
|
||
|
|
let en = $this._drawLayer.entities.add(_labelEntity)
|
||
|
|
$this.drawPoints[`draw-clear-${$this._drawIndex}`].push(en)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 测面积
|
||
|
|
* @param {*} options
|
||
|
|
*/
|
||
|
|
drawAreaMeasureGraphics: function (options = {}) {
|
||
|
|
if (this._viewer && options) {
|
||
|
|
var positions = [],
|
||
|
|
polygon = new DT.Cesium.PolygonHierarchy(),
|
||
|
|
_polygonEntity = new DT.Cesium.Entity(),
|
||
|
|
$this = this,
|
||
|
|
polyObj = null,
|
||
|
|
_label = '',
|
||
|
|
lastPosition = new DT.Cesium.Cartesian3(),
|
||
|
|
_handler = new DT.Cesium.ScreenSpaceEventHandler(
|
||
|
|
this._viewer.cesiumViewer.scene.canvas
|
||
|
|
)
|
||
|
|
$this._viewer.cesiumViewer.canvas.style.cursor = 'crosshair'
|
||
|
|
// left
|
||
|
|
_handler.setInputAction(function (movement) {
|
||
|
|
var cartesian = $this.getCatesian3FromPX(movement.position)
|
||
|
|
if (cartesian && cartesian.x) {
|
||
|
|
if (positions.length == 0) {
|
||
|
|
polygon.positions.push(cartesian.clone())
|
||
|
|
positions.push(cartesian.clone())
|
||
|
|
}
|
||
|
|
positions.push(cartesian.clone())
|
||
|
|
let cartographic = DT.Cesium.Cartographic.fromCartesian(cartesian)
|
||
|
|
lastPosition = cartesian.clone()
|
||
|
|
polygon.positions.push(cartesian.clone())
|
||
|
|
|
||
|
|
if (!polyObj) create()
|
||
|
|
}
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
|
|
// mouse
|
||
|
|
_handler.setInputAction(function (movement) {
|
||
|
|
var cartesian = $this.getCatesian3FromPX(movement.endPosition)
|
||
|
|
// var cartesian = $this._viewer.cesiumViewer.scene.camera.pickEllipsoid(movement.endPosition, $this._viewer.cesiumViewer.scene.globe.ellipsoid);
|
||
|
|
if (positions.length >= 2) {
|
||
|
|
if (cartesian && cartesian.x) {
|
||
|
|
positions.pop()
|
||
|
|
positions.push(cartesian)
|
||
|
|
polygon.positions.pop()
|
||
|
|
polygon.positions.push(cartesian)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||
|
|
|
||
|
|
// right
|
||
|
|
_handler.setInputAction(function (movement) {
|
||
|
|
let cartesian = $this.getCatesian3FromPX(movement.endPosition)
|
||
|
|
_handler.destroy()
|
||
|
|
positions.push(positions[0])
|
||
|
|
// 添加信息点
|
||
|
|
_addInfoPoint(lastPosition)
|
||
|
|
_addClearPoint(lastPosition)
|
||
|
|
$this._viewer.cesiumViewer.canvas.style.cursor = 'default'
|
||
|
|
if (typeof options.callback === 'function') {
|
||
|
|
options.callback(
|
||
|
|
$this.transformCartesianArrayToWGS84Array(positions),
|
||
|
|
polyObj
|
||
|
|
)
|
||
|
|
}
|
||
|
|
$this._drawIndex++
|
||
|
|
$this.drawPoints[`draw-total-${$this._drawIndex}`] = []
|
||
|
|
$this.drawPoints[`draw-clear-${$this._drawIndex}`] = []
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
||
|
|
|
||
|
|
function create() {
|
||
|
|
_polygonEntity.polyline = {
|
||
|
|
width: options.width || 2,
|
||
|
|
material: options.material || DT.Cesium.Color.RED.withAlpha(0.8),
|
||
|
|
clampToGround: true
|
||
|
|
}
|
||
|
|
|
||
|
|
_polygonEntity.polyline.positions = new DT.Cesium.CallbackProperty(
|
||
|
|
function () {
|
||
|
|
return positions
|
||
|
|
},
|
||
|
|
false
|
||
|
|
)
|
||
|
|
|
||
|
|
_polygonEntity.polygon = {
|
||
|
|
hierarchy: new DT.Cesium.CallbackProperty(function () {
|
||
|
|
return polygon
|
||
|
|
}, false),
|
||
|
|
|
||
|
|
material: DT.Cesium.Color.RED.withAlpha(0.2),
|
||
|
|
clampToGround: true
|
||
|
|
}
|
||
|
|
|
||
|
|
polyObj = $this._drawLayer.entities.add(_polygonEntity)
|
||
|
|
$this.drawPoints[`draw-total-${$this._drawIndex}`].push(polyObj)
|
||
|
|
}
|
||
|
|
|
||
|
|
function _addInfoPoint(position) {
|
||
|
|
var _labelEntity = new DT.Cesium.Entity()
|
||
|
|
_labelEntity.position = position
|
||
|
|
let cartographic = DT.Cesium.Cartographic.fromCartesian(position)
|
||
|
|
_labelEntity.point = {
|
||
|
|
pixelSize: 4,
|
||
|
|
color: DT.Cesium.Color.YELLOW,
|
||
|
|
outlineColor: DT.Cesium.Color.RED,
|
||
|
|
outlineWidth: 2
|
||
|
|
}
|
||
|
|
let text = ''
|
||
|
|
let areaValue = Number($this.getPositionsArea($this.transformCartesianArrayToWGS84Array(positions)))
|
||
|
|
if (areaValue < 1) {
|
||
|
|
text = '1平方米'
|
||
|
|
} else if (areaValue < 1000000) {
|
||
|
|
text = areaValue.toFixed(2) + '平方米'
|
||
|
|
} else {
|
||
|
|
text = (areaValue / 1000000).toFixed(2) + '平方公里'
|
||
|
|
}
|
||
|
|
_labelEntity.label = {
|
||
|
|
text,
|
||
|
|
font: `bold 18px AlibabaPuHuiTi-2-55-Regular`,
|
||
|
|
fillColor: DT.Cesium.Color.WHITE,
|
||
|
|
backgroundColor: new DT.Cesium.Color(0.165, 0.165, 0.165, 0.8),
|
||
|
|
backgroundPadding: new DT.Cesium.Cartesian2(4, 4),
|
||
|
|
outlineWidth: 4,
|
||
|
|
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
|
|
pixelOffset: new DT.Cesium.Cartesian2(40, 0),
|
||
|
|
scale: 1,
|
||
|
|
scaleByDistance: new DT.Cesium.NearFarScalar(1, 0.85, 8.0e6, 0.75),
|
||
|
|
// heightReference : DT.Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
|
|
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
|
||
|
|
verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM
|
||
|
|
}
|
||
|
|
let en = $this._drawLayer.entities.add(_labelEntity)
|
||
|
|
$this.drawPoints[`draw-total-${$this._drawIndex}`].push(en)
|
||
|
|
}
|
||
|
|
// 添加面积清除点
|
||
|
|
//TODO 面积删除点由于是多边形,无法计算偏移量是多少,故先放在右边,等有时间再做优化
|
||
|
|
function _addClearPoint(position) {
|
||
|
|
var _labelEntity = new DT.Cesium.Entity()
|
||
|
|
_labelEntity.position = position
|
||
|
|
_labelEntity.name = `draw-clear-${$this._drawIndex}`
|
||
|
|
_labelEntity.billboard = {
|
||
|
|
image: require('@/assets/img/common/clear.png'),
|
||
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
|
|
width: 22,
|
||
|
|
height: 22,
|
||
|
|
pixelOffset: new DT.Cesium.Cartesian2(20, 0),
|
||
|
|
}
|
||
|
|
let en = $this._drawLayer.entities.add(_labelEntity)
|
||
|
|
$this.drawPoints[`draw-clear-${$this._drawIndex}`].push(en)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 画三角量测
|
||
|
|
* @param {*} options
|
||
|
|
*/
|
||
|
|
drawTrianglesMeasureGraphics: function (options = {}) {
|
||
|
|
options.style = options.style || {
|
||
|
|
width: 3,
|
||
|
|
material: DT.Cesium.Color.BLUE.withAlpha(0.5)
|
||
|
|
}
|
||
|
|
if (this._viewer && options) {
|
||
|
|
var _trianglesEntity = new DT.Cesium.Entity(),
|
||
|
|
_tempLineEntity = new DT.Cesium.Entity(),
|
||
|
|
_tempLineEntity2 = new DT.Cesium.Entity(),
|
||
|
|
_positions = [],
|
||
|
|
_tempPoints = [],
|
||
|
|
_tempPoints2 = [],
|
||
|
|
$this = this,
|
||
|
|
_handler = new DT.Cesium.ScreenSpaceEventHandler(
|
||
|
|
this._viewer.cesiumViewer.scene.canvas
|
||
|
|
)
|
||
|
|
// 高度
|
||
|
|
function _getHeading(startPosition, endPosition) {
|
||
|
|
if (!startPosition && !endPosition) return 0
|
||
|
|
if (DT.Cesium.Cartesian3.equals(startPosition, endPosition)) return 0
|
||
|
|
let cartographic = DT.Cesium.Cartographic.fromCartesian(startPosition)
|
||
|
|
let cartographic2 = DT.Cesium.Cartographic.fromCartesian(endPosition)
|
||
|
|
return (cartographic2.height - cartographic.height).toFixed(2)
|
||
|
|
}
|
||
|
|
// 偏移点
|
||
|
|
function _computesHorizontalLine(positions) {
|
||
|
|
let cartographic = DT.Cesium.Cartographic.fromCartesian(positions[0])
|
||
|
|
let cartographic2 = DT.Cesium.Cartographic.fromCartesian(positions[1])
|
||
|
|
return DT.Cesium.Cartesian3.fromDegrees(
|
||
|
|
DT.Cesium.Math.toDegrees(cartographic.longitude),
|
||
|
|
DT.Cesium.Math.toDegrees(cartographic.latitude),
|
||
|
|
cartographic2.height
|
||
|
|
)
|
||
|
|
}
|
||
|
|
// left
|
||
|
|
_handler.setInputAction(function (movement) {
|
||
|
|
var position = $this.getCatesian3FromPX(movement.position)
|
||
|
|
if (!position && !position.z) return false
|
||
|
|
if (_positions.length == 0) {
|
||
|
|
_positions.push(position.clone())
|
||
|
|
_positions.push(position.clone())
|
||
|
|
_tempPoints.push(position.clone())
|
||
|
|
_tempPoints.push(position.clone())
|
||
|
|
} else {
|
||
|
|
_handler.destroy()
|
||
|
|
if (typeof options.callback === 'function') {
|
||
|
|
options.callback({
|
||
|
|
e: _trianglesEntity,
|
||
|
|
e2: _tempLineEntity,
|
||
|
|
e3: _tempLineEntity2
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
|
|
// mouse
|
||
|
|
_handler.setInputAction(function (movement) {
|
||
|
|
var position = $this.getCatesian3FromPX(movement.endPosition)
|
||
|
|
if (position && _positions.length > 0) {
|
||
|
|
//直线
|
||
|
|
_positions.pop()
|
||
|
|
_positions.push(position.clone())
|
||
|
|
let horizontalPosition = _computesHorizontalLine(_positions)
|
||
|
|
//高度
|
||
|
|
_tempPoints.pop()
|
||
|
|
_tempPoints.push(horizontalPosition.clone())
|
||
|
|
//水平线
|
||
|
|
_tempPoints2.pop(), _tempPoints2.pop()
|
||
|
|
_tempPoints2.push(position.clone())
|
||
|
|
_tempPoints2.push(horizontalPosition.clone())
|
||
|
|
}
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||
|
|
|
||
|
|
// create entity
|
||
|
|
|
||
|
|
//直线
|
||
|
|
_trianglesEntity.polyline = {
|
||
|
|
positions: new DT.Cesium.CallbackProperty(function () {
|
||
|
|
return _positions
|
||
|
|
}, false),
|
||
|
|
...options.style
|
||
|
|
}
|
||
|
|
_trianglesEntity.position = new DT.Cesium.CallbackProperty(function () {
|
||
|
|
return _positions[0]
|
||
|
|
}, false)
|
||
|
|
_trianglesEntity.point = {
|
||
|
|
pixelSize: 5,
|
||
|
|
outlineColor: DT.Cesium.Color.BLUE,
|
||
|
|
outlineWidth: 5
|
||
|
|
}
|
||
|
|
_trianglesEntity.label = {
|
||
|
|
text: new DT.Cesium.CallbackProperty(function () {
|
||
|
|
return (
|
||
|
|
'直线:' +
|
||
|
|
$this.getPositionDistance(
|
||
|
|
$this.transformCartesianArrayToWGS84Array(_positions)
|
||
|
|
) +
|
||
|
|
'米'
|
||
|
|
)
|
||
|
|
}, false),
|
||
|
|
show: true,
|
||
|
|
showBackground: true,
|
||
|
|
font: '14px monospace',
|
||
|
|
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
|
||
|
|
verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM,
|
||
|
|
pixelOffset: new DT.Cesium.Cartesian2(50, -100) //left top
|
||
|
|
}
|
||
|
|
//高度
|
||
|
|
_tempLineEntity.polyline = {
|
||
|
|
positions: new DT.Cesium.CallbackProperty(function () {
|
||
|
|
return _tempPoints
|
||
|
|
}, false),
|
||
|
|
...options.style
|
||
|
|
}
|
||
|
|
_tempLineEntity.position = new DT.Cesium.CallbackProperty(function () {
|
||
|
|
return _tempPoints2[1]
|
||
|
|
}, false)
|
||
|
|
_tempLineEntity.point = {
|
||
|
|
pixelSize: 5,
|
||
|
|
outlineColor: DT.Cesium.Color.BLUE,
|
||
|
|
outlineWidth: 5
|
||
|
|
}
|
||
|
|
_tempLineEntity.label = {
|
||
|
|
text: new DT.Cesium.CallbackProperty(function () {
|
||
|
|
return '高度:' + _getHeading(_tempPoints[0], _tempPoints[1]) + '米'
|
||
|
|
}, false),
|
||
|
|
show: true,
|
||
|
|
showBackground: true,
|
||
|
|
font: '14px monospace',
|
||
|
|
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
|
||
|
|
verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM,
|
||
|
|
pixelOffset: new DT.Cesium.Cartesian2(-20, 100) //left top
|
||
|
|
}
|
||
|
|
//水平
|
||
|
|
_tempLineEntity2.polyline = {
|
||
|
|
positions: new DT.Cesium.CallbackProperty(function () {
|
||
|
|
return _tempPoints2
|
||
|
|
}, false),
|
||
|
|
...options.style
|
||
|
|
}
|
||
|
|
_tempLineEntity2.position = new DT.Cesium.CallbackProperty(function () {
|
||
|
|
return _positions[1]
|
||
|
|
}, false)
|
||
|
|
_tempLineEntity2.point = {
|
||
|
|
pixelSize: 5,
|
||
|
|
outlineColor: DT.Cesium.Color.BLUE,
|
||
|
|
outlineWidth: 5
|
||
|
|
}
|
||
|
|
_tempLineEntity2.label = {
|
||
|
|
text: new DT.Cesium.CallbackProperty(function () {
|
||
|
|
return (
|
||
|
|
'水平距离:' +
|
||
|
|
$this.getPositionDistance(
|
||
|
|
$this.transformCartesianArrayToWGS84Array(_tempPoints2)
|
||
|
|
) +
|
||
|
|
'米'
|
||
|
|
)
|
||
|
|
}, false),
|
||
|
|
show: true,
|
||
|
|
showBackground: true,
|
||
|
|
font: '14px monospace',
|
||
|
|
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
|
||
|
|
verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM,
|
||
|
|
pixelOffset: new DT.Cesium.Cartesian2(-150, -20) //left top
|
||
|
|
}
|
||
|
|
this._drawLayer.entities.add(_tempLineEntity2)
|
||
|
|
this._drawLayer.entities.add(_tempLineEntity)
|
||
|
|
this._drawLayer.entities.add(_trianglesEntity)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 测方位角
|
||
|
|
* @param {*} options
|
||
|
|
*/
|
||
|
|
drawLineAzimuthMeasureGraphics: function (options = {}) {
|
||
|
|
if (this._viewer && options) {
|
||
|
|
var positions = [],
|
||
|
|
latLon = [],
|
||
|
|
_lineEntity = new DT.Cesium.Entity(),
|
||
|
|
$this = this,
|
||
|
|
lineObj,
|
||
|
|
bearing,
|
||
|
|
_handlers = new DT.Cesium.ScreenSpaceEventHandler(
|
||
|
|
this._viewer.cesiumViewer.scene.canvas
|
||
|
|
)
|
||
|
|
$this._viewer.cesiumViewer.canvas.style.cursor = 'crosshair'
|
||
|
|
// left
|
||
|
|
_handlers.setInputAction(function (movement) {
|
||
|
|
var cartesian = $this.getCatesian3FromPX(movement.position)
|
||
|
|
if (cartesian && cartesian.x) {
|
||
|
|
if (positions.length < 1) {
|
||
|
|
latLon.push(movement.position)
|
||
|
|
positions.push(cartesian.clone())
|
||
|
|
// 添加量测信息点
|
||
|
|
_addInfoPoint(cartesian.clone())
|
||
|
|
positions.push(cartesian)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
|
|
|
||
|
|
_handlers.setInputAction(function (movement) {
|
||
|
|
var cartesian = $this.getCatesian3FromPX(movement.endPosition)
|
||
|
|
if (positions.length >= 2) {
|
||
|
|
if (cartesian && cartesian.x) {
|
||
|
|
latLon.push(movement.position)
|
||
|
|
positions.pop()
|
||
|
|
positions.push(cartesian)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
||
|
|
// right
|
||
|
|
_handlers.setInputAction(function (movement) {
|
||
|
|
_handlers.destroy()
|
||
|
|
_handlers = null
|
||
|
|
let cartesian = $this.getCatesian3FromPX(movement.position)
|
||
|
|
// 角度小于5大于-160右边显示
|
||
|
|
let type = 'left'
|
||
|
|
if (positions.length > 1) {
|
||
|
|
let lat = $this.transformCartesianToWGS84(cartesian)
|
||
|
|
let lat2 = $this.transformCartesianToWGS84(positions[positions.length - 2])
|
||
|
|
let point1 = turf.point([lat.lng, lat.lat]);
|
||
|
|
let point2 = turf.point([lat2.lng, lat2.lat]);
|
||
|
|
bearing = turf.bearing(point1, point2);
|
||
|
|
if (bearing > -160 && bearing < 5) {
|
||
|
|
type = 'right'
|
||
|
|
}
|
||
|
|
_addInfoPoint(cartesian, type)
|
||
|
|
// 添加清除功能
|
||
|
|
_addClearPoint(cartesian, type)
|
||
|
|
}
|
||
|
|
$this._viewer.cesiumViewer.canvas.style.cursor = 'default'
|
||
|
|
if (typeof options.callback === 'function') {
|
||
|
|
options.callback(
|
||
|
|
$this.transformCartesianArrayToWGS84Array(positions),
|
||
|
|
lineObj
|
||
|
|
)
|
||
|
|
}
|
||
|
|
$this._drawIndex++
|
||
|
|
$this.drawPoints[`draw-total-${$this._drawIndex}`] = []
|
||
|
|
$this.drawPoints[`draw-clear-${$this._drawIndex}`] = []
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
||
|
|
|
||
|
|
_lineEntity.polyline = {
|
||
|
|
name: `draw-total-${$this._drawIndex}`,
|
||
|
|
width: options.width || 2,
|
||
|
|
material: options.material || DT.Cesium.Color.RED.withAlpha(0.8),
|
||
|
|
clampToGround: true
|
||
|
|
}
|
||
|
|
_lineEntity.polyline.positions = new DT.Cesium.CallbackProperty(
|
||
|
|
function () {
|
||
|
|
return positions
|
||
|
|
},
|
||
|
|
false
|
||
|
|
)
|
||
|
|
let line = this._drawLayer.entities.add(_lineEntity)
|
||
|
|
$this.drawPoints[`draw-total-${$this._drawIndex}`].push(line)
|
||
|
|
//添加坐标点
|
||
|
|
//type === 'last' 代表绘制的最后一个点
|
||
|
|
function _addInfoPoint(position, type = null) {
|
||
|
|
var _labelEntity = new DT.Cesium.Entity()
|
||
|
|
_labelEntity.position = position.clone()
|
||
|
|
_labelEntity.name = `draw-total-${$this._drawIndex}`
|
||
|
|
_labelEntity.point = {
|
||
|
|
pixelSize: 4,
|
||
|
|
color: DT.Cesium.Color.YELLOW,
|
||
|
|
outlineColor: DT.Cesium.Color.RED,
|
||
|
|
outlineWidth: 2,
|
||
|
|
// heightReference: DT.Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
|
|
}
|
||
|
|
let text = '起点'
|
||
|
|
if (positions.length > 1) {
|
||
|
|
text = (Number(bearing) + 180).toFixed(2) + ' °'
|
||
|
|
}
|
||
|
|
_labelEntity.label = {
|
||
|
|
text,
|
||
|
|
font: `bold 18px AlibabaPuHuiTi-2-55-Regular`,
|
||
|
|
fillColor: DT.Cesium.Color.WHITE,
|
||
|
|
backgroundColor: new DT.Cesium.Color(0.165, 0.165, 0.165, 0.8),
|
||
|
|
backgroundPadding: new DT.Cesium.Cartesian2(4, 4),
|
||
|
|
outlineWidth: 4,
|
||
|
|
style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
|
|
pixelOffset: new DT.Cesium.Cartesian2(!type || type === 'left' ? 15 : 40, 0),
|
||
|
|
scale: 1,
|
||
|
|
scaleByDistance: new DT.Cesium.NearFarScalar(1, 0.85, 8.0e6, 0.75),
|
||
|
|
heightReference: DT.Cesium.HeightReference.CLAMP_TO_GROUND,
|
||
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
|
|
horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT,
|
||
|
|
verticalOrigin: DT.Cesium.VerticalOrigin.BOTTOM
|
||
|
|
}
|
||
|
|
let en = $this._drawLayer.entities.add(_labelEntity)
|
||
|
|
$this.drawPoints[`draw-total-${$this._drawIndex}`].push(en)
|
||
|
|
}
|
||
|
|
function _addClearPoint(position, type) {
|
||
|
|
var _labelEntity = new DT.Cesium.Entity()
|
||
|
|
_labelEntity.position = position
|
||
|
|
_labelEntity.name = `draw-clear-${$this._drawIndex}`
|
||
|
|
_labelEntity.billboard = {
|
||
|
|
image: require('@/assets/img/common/clear.png'),
|
||
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
|
|
width: 22,
|
||
|
|
height: 22,
|
||
|
|
pixelOffset: new DT.Cesium.Cartesian2(type === 'left' ? -25 : 25, 0),
|
||
|
|
}
|
||
|
|
let en = $this._drawLayer.entities.add(_labelEntity)
|
||
|
|
$this.drawPoints[`draw-clear-${$this._drawIndex}`].push(en)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
toggleHandler: function (status) {
|
||
|
|
let $this = this
|
||
|
|
if (status) {
|
||
|
|
const handler = new DT.Cesium.ScreenSpaceEventHandler(
|
||
|
|
viewer.cesiumViewer.scene.canvas
|
||
|
|
)
|
||
|
|
handler.setInputAction(event => {
|
||
|
|
let evt = viewer.cesiumViewer.scene.pick(event.position)
|
||
|
|
// console.log('点击的', evt)
|
||
|
|
if (evt && evt.primitive && evt.id && evt.id.name && evt.id.name.indexOf('clear') > -1) {
|
||
|
|
let name = evt.id.name
|
||
|
|
$this.drawPoints[name].forEach(el => {
|
||
|
|
$this._drawLayer.entities.remove(el)
|
||
|
|
})
|
||
|
|
$this.drawPoints[`draw-total-${name.split('-')[2]}`].forEach(el => {
|
||
|
|
$this._drawLayer.entities.remove(el)
|
||
|
|
});
|
||
|
|
$this.drawPoints[name] = []
|
||
|
|
$this.drawPoints[`draw-total-${name.split('-')[2]}`] = []
|
||
|
|
}
|
||
|
|
|
||
|
|
}, DT.Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
return _
|
||
|
|
})()
|