vue2+cesium实现面积计算
需要安装
在页面中引入
AreaUse() {
const viewer = QJViewer;
const _this = this;
var positions = [];
var height = undefined;
var polygonEntity = undefined;
var mesureResultEntity = undefined;
var tempPositions = [];
// 测量功能激活
var isMeasure = true;
_this.$message({
message: "开始计算面积，右键结束计算",
type: "success",
customClass: "message",
});
unRegisterEvents();
//创建面对象
function createPolygonEntity() {
polygonEntity = viewer.entities.add({
polygon: {
hierarchy: new Cesium.CallbackProperty((event) => {
return new Cesium.PolygonHierarchy(tempPositions);
//使用最新1.72的时候 必须返回PolygonHierarchy类型 Cannot read property 'length' of undefined
//低版本好像都可以
}, false),
material: Cesium.Color.RED.withAlpha(0.4),
perPositionHeight: true, //
},
polyline: {
positions: new Cesium.CallbackProperty((event) => {
return tempPositions.concat(tempPositions[0]);
}, false),
width: 1,
material: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.YELLOW,
}),
depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.YELLOW,
}),
},
});
_this.AreaEntities.push(polygonEntity);
}
// 创建起点
function createStartEntity() {
let vertexEntity = viewer.entities.add({
position: positions[0],
type: "MeasureDistanceVertex",
point: {
color: Cesium.Color.FUCHSIA,
pixelSize: 6,
},
});
_this.AreaEntities.push(vertexEntity);
}
// 创建节点
function createVertex() {
let vertexEntity = viewer.entities.add({
position: positions[positions.length - 1],
type: "MeasureAreaVertex",
point: {
color: Cesium.Color.FUCHSIA,
pixelSize: 8,
disableDepthTestDistance: 500,
},
});
_this.AreaEntities.push(vertexEntity);
}
//统一节点的高度
function unifiedHeight(positions, height) {
if (!height) height = getPositionHeight(positions[0]); //如果没有指定高度 就用第一个的高度
let point3d;
for (let i = 0; i < positions.length; i++) {
const element = positions[i];
point3d = cartesian3ToPoint3D(element);
positions[i] = Cesium.Cartesian3.fromDegrees(
point3d.x,
point3d.y,
height
);
}
return height;
}
//获取某个点的高度
function getPositionHeight(position) {
const cartographic = Cesium.Cartographic.fromCartesian(position);
return cartographic.height;
}
// 将 Cesium 的 Cartesian3 类型的位置坐标转换为一个更易于理解和处理的经纬度坐标对象
function cartesian3ToPoint3D(position) {
const cartographic = Cesium.Cartographic.fromCartesian(position);
const lon = Cesium.Math.toDegrees(cartographic.longitude);
const lat = Cesium.Math.toDegrees(cartographic.latitude);
return { x: lon, y: lat, z: cartographic.height };
}
// 计算面积
function computeArea(positions) {
let s = 0;
let p1 = 0;
let p2 = 0;
for (let i = 0; i < positions.length; ++i) {
p1 = positions[i];
let j = (i + 1) % positions.length;
p2 = positions[j];
s += p1.x * p2.y;
s -= p2.x * p1.y;
}
return Math.abs(s / 2 / 1000000.0).toFixed(6);
}
//测量结果标签
function createResultLabel() {
mesureResultEntity = viewer.entities.add({
position: new Cesium.CallbackProperty((event) => {
return getCenterPosition();
}, false),
type: "MeasureAreaResult",
label: {
text: new Cesium.CallbackProperty((event) => {
return "面积" + computeArea(tempPositions) + "km²";
}, false),
scale: 0.5,
font: "normal 28px MicroSoft YaHei",
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 3000, 1),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
// pixelOffset: new Cesium.Cartesian2(0, -30),
outlineWidth: 9,
outlineColor: Cesium.Color.YELLOW,
},
});
_this.AreaEntities.push(mesureResultEntity);
}
//获取节点的中心点
function getCenterPosition() {
let points = [];
if (tempPositions.length < 3) return tempPositions[0];
tempPositions.forEach((position) => {
const point3d = cartesian3ToPoint3D(position);
points.push([point3d.x, point3d.y]);
});
// 构建turf.js lineString
let geo = turf.lineString(points);
let bbox = turf.bbox(geo);
let bboxPolygon = turf.bboxPolygon(bbox);
let pointOnFeature = turf.center(bboxPolygon);
let lonLat = pointOnFeature.geometry.coordinates;
console.log(444);
return Cesium.Cartesian3.fromDegrees(
lonLat[0],
lonLat[1],
height + 0.3
);
}
//禁用
function deactivate() {
if (!isMeasure) return;
unRegisterEvents();
viewer._element.style.cursor = "pointer";
viewer.enableCursorStyle = true;
isMeasure = false;
tempPositions = [];
positions = [];
height = undefined;
}
// 清除
function clear() {
//清除线对象
viewer.entities.remove(polygonEntity);
polygonEntity = undefined;
//清除节点
_this.AreaEntities.forEach((item) => {
viewer.entities.remove(item);
});
_this.AreaEntities = [];
viewer.entities.remove(mesureResultEntity);
mesureResultEntity = undefined;
height = undefined;
}
// 解除鼠标事件
function unRegisterEvents() {
viewer.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_CLICK
);
viewer.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.RIGHT_CLICK
);
viewer.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.MOUSE_MOVE
);
}
//左键点击事件
viewer.screenSpaceEventHandler.setInputAction(function (event) {
viewer._element.style.cursor = "crosshair";
// 获取鼠标点击位置的屏幕坐标
var ray = viewer.camera.getPickRay(event.position);
if (!ray) return null;
var earthPosition = viewer.scene.globe.pick(ray, viewer.scene);
if (Cesium.defined(earthPosition)) {
const ellipsoid = viewer.scene.globe.ellipsoid;
earthPosition = viewer.scene.camera.pickEllipsoid(
event.position,
ellipsoid
);
}
if (!earthPosition) return;
positions.push(earthPosition);
height = unifiedHeight(positions, height);
if (positions.length == 1) {
//首次点击
createPolygonEntity();
createStartEntity();
}
createVertex();
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 鼠标移动事件
viewer.screenSpaceEventHandler.setInputAction(function (event) {
if (!isMeasure) return;
viewer._element.style.cursor = "crosshair";
// 获取鼠标点击位置的屏幕坐标
var ray = viewer.camera.getPickRay(event.endPosition);
if (!ray) return null;
var earthPosition = viewer.scene.globe.pick(ray, viewer.scene);
if (earthPosition) {
earthPosition = viewer.scene.camera.pickEllipsoid(
event.startPosition,
viewer.scene.globe.ellipsoid
);
}
if (!earthPosition) return;
if (positions.length < 1) return;
height = unifiedHeight(positions, height);
tempPositions = positions.concat(earthPosition);
if (tempPositions.length >= 3 && !mesureResultEntity) {
createResultLabel();
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 鼠标右键事件
viewer.screenSpaceEventHandler.setInputAction(function (event) {
// console.log(event);
if (!isMeasure || positions.length < 3) {
deactivate();
clear();
} else {
tempPositions = [...positions];
polygonEntity.polyline = {
positions: positions.concat(positions[0]),
width: 2,
material: Cesium.Color.YELLOW,
depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
color: Cesium.Color.YELLOW,
}),
};
polygonEntity.polygon.hierarchy = new Cesium.PolygonHierarchy(
tempPositions
);
mesureResultEntity.position = getCenterPosition();
mesureResultEntity.label.text =
"总面积" + computeArea(positions) + "km²";
deactivate();
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
},