webgl的弹框位置总是出现在右下角：
// clickinitial(thisMapCon, viewer, tempp) {
var Cesium = window.Cesium;
// var _this = thisMapCon;
var _this = nextProps.That;
var viewer = window.CesiumViewer;
let tempp = [];
tempp = nextProps.Tempp;
//todo: yjw添加数据服务
var scene = viewer.scene;
var widget = viewer.cesiumWidget;
var promise = tempp[URL_CONFIG.qxsyName];
var scenePosition = null; // 记录在场景中点击的笛卡尔坐标点
// var mybubble = document.getElementById("bubble");
// var mybubble = $("#bubble");
var mybubble = $("#bubble");
var table = document.getElementById("FeatureTable"); // 气泡内的表格
$("#close").click(function(){ // 关闭气泡
$("#bubble").hide();
});
try {
Cesium.when(promise, function (layers) {
if (!scene.pickPositionSupported) {
alert('不支持深度拾取,属性查询功能无法使用！');
}
// var testLayer = viewer.scene.layers;
for (var i = 0; i < layers.length; i++) {
var strLayer = scene.layers.findByIndex(i).name;
var layer = scene.layers.find(strLayer);
// layer.selectEnabled=false;
var str_before = strLayer.split("@")[0];
//设置属性查询参数
layer.setQueryParameter({
url: URL_CONFIG.dataSerUrl,
dataSourceName: URL_CONFIG.dataSourceName,
dataSetName: str_before,
keyWord: 'SmID'
});
}
}, function (e) {
if (widget._showRenderLoopErrors) {
var title = '渲染时发生错误，已停止渲染。';
widget.showErrorPanel(title, undefined, e);
}
});
} catch (e) {
if (widget._showRenderLoopErrors) {
var title = '渲染时发生错误，已停止渲染。';
widget.showErrorPanel(title, undefined, e);
}
}
//设置监听事件
var url = URL_CONFIG.queryApiUrl + '/cjpl/getCjPlById?';
viewer.pickEvent.addEventListener(
function (feature) {
var entity = viewer.selectedEntity;
if (feature.PLPTNO !== undefined) {
axios.get(url + 'plptno=' + feature.PLPTNO + '&mntpcd=' + feature.MNTPCD)
.then(function (response) {
let res = response.data.data;
showBubble(res, entity);
})
.catch(function (error) {
alert(error + url + "服务未启动！");
})
.then(function () {
// always executed
});
} else {
axios.get(url + 'plid=' + feature.PLID + '&mntpcd=' + feature.MNTPCD)
.then(function (response) {
let res = response.data.data;
showBubble(res, entity);
})
.catch(function (error) {
alert(error + url + "服务未启动！");
})
.then(function () {
// always executed
});
}
// _this.viewer.scene.layers.getSelectedLayer().refresh();
}
);
function showBubble(pfeature, entity) {
if (table != null) {
// var x=parseFloat(pfeature["X坐标"]);
// var y=parseFloat(pfeature["Y坐标"]);
// var z=parseFloat(pfeature["地面高程"]);
// //飞行到指定的点
// let tempurl = URL_CONFIG.projectToGeo + 'arg0=' + x + '&arg1=' + y + '&arg2=' + URL_CONFIG.epsgCode;
// axios.get(tempurl).then(function (response2) {
// let res = response2.data;
// var ellipsoid=viewer.scene.globe.ellipsoid;
// var cartographic=Cesium.Cartographic.fromDegrees(res[0],res[1],z);
// var cartesian3=ellipsoid.cartographicToCartesian(cartographic);
//
// _this.setscenePosition(cartesian3);
//
// }).catch(function (error) {
// alert(tempurl + "服务未启动！");
// })
// var position = Cesium.Cartesian3.fromDegrees(entity.scenePos.x, entity.scenePos.y, entity.scenePos.z);
// var position = Cesium.Cartesian3.fromDegrees(x, y, z);
// var mybubble = $("#bubble");
// mybubble.show();
mybubble.show();
_this.setscenePosition(entity.scenePos);
// _this.setscenePosition(position);
for (var i = table.rows.length - 1; i > -1; i--) {
table.deleteRow(i);
}
for (var key in pfeature) {
var newRow = table.insertRow();
var cell1 = newRow.insertCell();
var cell2 = newRow.insertCell();
cell1.innerHTML = key;
cell2.innerHTML = pfeature[key];
}
} else {
alert("没有获取到要素表！");
}
}
setScenePostion函数为：
setscenePosition = (position) => {
infoPosition = position;
}
然后在componentDidMount周期函数中中调用了test函数test(this, this.viewer.scene);
function test(that, scene) {
var Cesium = window.Cesium;
scene.postRender.addEventListener(function () { // 每一帧都去计算气泡的正确位置
if (infoPosition) {
var canvasHeight = scene.canvas.height;
var windowPosition = new Cesium.Cartesian2();
Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, infoPosition, windowPosition);
that.mapModal.movePosition({
bottom: (canvasHeight - windowPosition.y + 8) + 'px',
left: (windowPosition.x - 70) + 'px',
visibility: 'visible'
});
}
});
}
