cesium移动实体_cesium自定义的气泡弹窗（可随球放大缩小，移动）

效果图如下：

1. 从后台获取遍历的数据，先遍历循环加上点位

setTimeout(() => {

this.UAVpoint.forEach(result => {

var pinBuilder = new Cesium.PinBuilder();

var bluePin = this.viewer.entities.add({

id: result["ID"],

name: result["Name"],

position: Cesium.Cartesian3.fromDegrees(result["Longitude"], result["Latitude"]),

billboard: {

image: '../../../../ecology/assets/images/Icon/m1.png',

heightReference: Cesium.HeightReference.CLAMP_TO_GROUND

}

});

})

}, 200);

2. 再次遍历循环为每个加上气泡弹窗

setTimeout(() => {

this.UAVpoint.forEach(result => {

var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);

var that = this;

handler.setInputAction(function (movement) {

var pick = that.viewer.scene.pick(movement["position"]);

var content;

var infoDiv = '

' +

'

' +

'×' +

'

' +

'

' +

'' +

'

' +

'

' +

'' +

'' +

'';

$("#sas").append(infoDiv);

if (Cesium.defined(pick) && (pick.id.id === result["ID"])) {

$('#trackPopUp').show();

var cartographic = Cesium.Cartographic.fromCartesian(movement["position"]);

var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];

var destination = Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0);

var id = pick.id._id.replace(/[^0-9]/ig, "");

content =

'' + pick.id._name + '' +

'

经度' +

'

纬度' +

''

var obj = { position: movement["position"], destination: destination, content: content };

infoWindow(that.viewer, that.scene, obj);

}

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

});

}, 500);

3. 另外调用的两个方法在最外层

var removeHandler;

function infoWindow(viewer, scene, obj) {

var picked = scene.pick(obj.position);

if (Cesium.defined(picked)) {

var id = picked.id;

if (id instanceof Cesium.Entity) {

$(".cesium-selection-wrapper").show();

$('#trackPopUpLink').empty();

$('#trackPopUpLink').append(obj.content);

var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);

$('#trackPopUp').show();

positionPopUp(c); // Initial position

// at the place item

// picked

removeHandler = viewer.scene.postRender.addEventListener(function () {

if (picked.id._polyline != null) {

// var pos = {};

// pos.x = (id._polyline._positions._value["0"].x + id._polyline._positions._value[1].x) / 2;

// pos.y = (id._polyline._positions._value["0"].y + id._polyline._positions._value[1].y) / 2;

// pos.z = (id._polyline._positions._value["0"].z + id._polyline._positions._value[1].z) / 2;

// var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, pos);

console.log("我执行了");

} else {

var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, id._position._value);

}// If things moved, move the

// popUp too

if ((c.x !== changedC.x) || (c.y !== changedC.y)) {

positionPopUp(changedC);

c = changedC;

}

});

// PopUp close button event handler

$('.leaflet-popup-close-button').click(function () {

$('#trackPopUp').hide();

$('#trackPopUpLink').empty();

$(".cesium-selection-wrapper").hide();

removeHandler.call();

return false;

});

return id;

}

} else {

$('#trackPopUp').hide();

}

}

function positionPopUp(c) {

var x = c.x - ($('#trackPopUpContent').width()) / 2;

var y = c.y - ($('#trackPopUpContent').height());

$('#trackPopUpContent').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');

}

4.本文参考: https://blog.csdn.net/zlx312/article/details/79825111