//提示信息
|
const Tooltip = function (styleOrText = {}, position, show) {
|
let style, _x, _y, _color, id;
|
if (typeof styleOrText === "object") {
|
style = styleOrText;
|
}
|
if (style && style.origin) {
|
style.origin === "center" && ((_x = 15), (_y = -12));
|
style.origin === "top" && ((_x = 15), (_y = -44));
|
style.origin === "bottom" && ((_x = 15), (_y = 20));
|
} else {
|
_x = 15;
|
_y = 20;
|
}
|
if (style && style.color) {
|
style.color === "white" &&
|
(_color = "background: rgba(255, 255, 255, 0.8);color: black;");
|
style.color === "black" &&
|
(_color = "background: rgba(0, 0, 0, 0.5);color: white;");
|
style.color === "yellow" &&
|
(_color =
|
"color: black;background-color: #ffcc33;border: 1px solid white;");
|
} else {
|
_color = "background: rgba(0, 0, 0, 0.5);color: white;";
|
}
|
if (style && style.id) {
|
id = `toolTip${style.id}`;
|
} else {
|
id = "toolTip";
|
}
|
|
let tooltip = null;
|
|
if (!tooltip) {
|
const elementbottom = document.createElement("div");
|
$(".map-widget").append(elementbottom);
|
const html = `<div id="${id}" style="display: none;pointer-events: none;position: absolute;z-index: 1000;opacity: 0.8;border-radius: 4px;padding: 4px 8px;white-space: nowrap;font-family:黑体;color:white;font-weight: bolder;font-size: 14px;${_color}"></div>`;
|
$(".map-widget").append(html);
|
tooltip = document.getElementById(id);
|
}
|
if (show) {
|
tooltip.innerHTML = styleOrText;
|
tooltip.style.left = `${position.x + _x}px`;
|
tooltip.style.top = `${position.y + _y}px`;
|
tooltip.style.display = "block";
|
} else {
|
tooltip.style.display = "none";
|
}
|
return {
|
tooltip: tooltip,
|
style: style,
|
showAt: function (position, text) {
|
this.tooltip.innerHTML = text;
|
if (this.style && this.style.origin) {
|
this.style.origin === "center" &&
|
((_x = 15), (_y = -this.tooltip.offsetHeight / 2));
|
this.style.origin === "top" &&
|
((_x = 15), (_y = -this.tooltip.offsetHeight - 20));
|
this.style.origin === "bottom" && ((_x = 15), (_y = 20));
|
} else {
|
_x = 15;
|
_y = -this.tooltip.offsetHeight / 2;
|
}
|
this.tooltip.style.left = `${position.x + _x}px`;
|
this.tooltip.style.top = `${position.y + _y}px`;
|
this.tooltip.style.display = "block";
|
},
|
show: function (show) {
|
if (show) {
|
this.tooltip.style.display = "block";
|
} else {
|
this.tooltip.style.display = "none";
|
}
|
},
|
};
|
}
|
let handler = null;
|
|
const EditTools = (earthCtrl, callback) => {
|
const parameter = "";
|
let item = null;
|
const textareas = 0;
|
let we;
|
const tempPointsxp = [];
|
handler = new earthCtrl._cesium.ScreenSpaceEventHandler(
|
earthCtrl.coreMap.scene.canvas
|
);
|
const positions = [];
|
let hierarch = {};
|
let poly;
|
let model = {}
|
|
earthCtrl.coreMap.scene.globe.depthTestAgainstTerrain = true;
|
|
//绘制面
|
const PolygonPrimitive = (function () {
|
function execute(hierarch) {
|
this.options = {
|
name: "",
|
polygon: {
|
hierarchy: [],
|
heightReference: earthCtrl._cesium.defaultValue(
|
parameter.heightReference,
|
1
|
),
|
perPositionHeight: parameter.heightReference === 0 ? true : false,
|
material: earthCtrl._cesium.defaultValue(
|
parameter.material,
|
earthCtrl._cesium.Color.YELLOW.withAlpha(0.5)
|
)
|
},
|
};
|
this.hierarchy = hierarch;
|
this._init();
|
}
|
|
execute.prototype._init = function () {
|
const _self = this;
|
const _update = function () {
|
return _self.hierarchy;
|
};
|
//实时更新polygon.hierarchy
|
this.options.polygon.hierarchy = new earthCtrl._cesium.CallbackProperty(
|
_update,
|
false
|
);
|
this.polygon = earthCtrl.entities.add(this.options);
|
item = this.polygon;
|
};
|
return execute;
|
})();
|
|
//鼠标单击画点
|
handler.setInputAction(function (movement) {
|
const ray = earthCtrl.coreMap.camera.getPickRay(movement.position);
|
const cartesian = earthCtrl.coreMap.scene.globe.pick(
|
ray,
|
earthCtrl.coreMap.scene
|
);
|
|
let pickObject = earthCtrl.coreMap.scene.pick(movement.position);
|
model = pickObject
|
// var textArea = getArea(tempPointsxp, positions);
|
const cartographic = earthCtrl._cesium.Cartographic.fromCartesian(
|
cartesian
|
);
|
const longitudeString = earthCtrl._cesium.Math.toDegrees(
|
cartographic.longitude
|
);
|
const latitudeString = earthCtrl._cesium.Math.toDegrees(
|
cartographic.latitude
|
);
|
if (positions.length === 0) {
|
positions.push(cartesian.clone());
|
tempPointsxp.push([longitudeString, latitudeString]);
|
}
|
positions.push(cartesian);
|
hierarch = new earthCtrl._cesium.PolygonHierarchy(positions);
|
tempPointsxp.push([longitudeString, latitudeString]);
|
}, earthCtrl._cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
//鼠标移动
|
const tooltip = new Tooltip();
|
handler.setInputAction(function (movement) {
|
if (positions.length === 0) {
|
tooltip.showAt(movement.endPosition, "左键开始绘制！");
|
} else if (positions.length <= 2) {
|
tooltip.showAt(movement.endPosition, "点击继续绘制！");
|
} else {
|
tooltip.showAt(movement.endPosition, "右键结束绘制！");
|
}
|
const cartesian = earthCtrl.coreMap.scene.pickPosition(
|
movement.endPosition
|
);
|
if (!cartesian) {
|
return;
|
}
|
const cartographic = earthCtrl._cesium.Cartographic.fromCartesian(
|
cartesian
|
);
|
const longitudeString = earthCtrl._cesium.Math.toDegrees(
|
cartographic.longitude
|
);
|
const latitudeString = earthCtrl._cesium.Math.toDegrees(
|
cartographic.latitude
|
);
|
if (positions.length >= 2) {
|
if (!earthCtrl._cesium.defined(poly)) {
|
hierarch = new earthCtrl._cesium.PolygonHierarchy(positions);
|
poly = new PolygonPrimitive(hierarch);
|
} else if (cartesian !== undefined) {
|
positions.pop();
|
cartesian.y += 1 + Math.random();
|
positions.push(cartesian);
|
hierarch = new earthCtrl._cesium.PolygonHierarchy(positions);
|
tempPointsxp.pop();
|
tempPointsxp.push([longitudeString, latitudeString]);
|
}
|
// var textArea = getArea(tempPointsxp, positions);
|
// textareas = textArea;
|
earthCtrl.entities.remove(we);
|
we = earthCtrl.entities.add({
|
name: "多边形面积",
|
position: new earthCtrl._cesium.CallbackProperty(function () {
|
const p = new earthCtrl._cesium.Cartesian3();
|
positions.forEach((item) => {
|
earthCtrl._cesium.Cartesian3.add(p, item, p);
|
});
|
return earthCtrl._cesium.Cartesian3.divideByScalar(
|
p,
|
positions.length,
|
new earthCtrl._cesium.Cartesian3()
|
);
|
}, false),
|
});
|
}
|
}, earthCtrl._cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
//鼠标右键单击结束绘制
|
handler.setInputAction(function (movement) {
|
// _this._tree.endtemporaryItem();
|
handler.destroy();
|
tooltip.show(false);
|
//创建面对象并返回面对象
|
const ploylinejl = {
|
polygon: {},
|
positions: [],
|
area: [],
|
};
|
ploylinejl.polygon = poly;
|
const positionsop = [];
|
for (let j = 0; j < positions.length; j++) {
|
const cartographicdr = earthCtrl._cesium.Cartographic.fromCartesian(
|
positions[j]
|
);
|
const longitudeStringdr = earthCtrl._cesium.Math.toDegrees(
|
cartographicdr.longitude
|
);
|
const latitudeStringdr = earthCtrl._cesium.Math.toDegrees(
|
cartographicdr.latitude
|
);
|
const heightStringdr = cartographicdr.height;
|
positionsop.push({
|
lon: longitudeStringdr,
|
lat: latitudeStringdr,
|
hei: heightStringdr,
|
});
|
}
|
ploylinejl.positions = positionsop;
|
// callback & callback(tempPointsxp, parseInt(textareas))
|
callback & callback(tempPointsxp, model);
|
model = {}
|
// callback & callback(item, tempPointsxp);
|
earthCtrl.entities.remove(we);
|
earthCtrl.entities.remove(item);
|
}, earthCtrl._cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
}
|
|
export default EditTools;
|
