/*
|
* Html div pop in cesium
|
*/
|
|
(function (window) {
|
'use strict';
|
|
function define_CesiumPop() {
|
//Main object
|
var CesiumPop = {};
|
var prediventity;
|
var pophandler;
|
var popEntityArr = [];
|
var optionsArr = [];
|
|
CesiumPop.bindPopGlobeEventHandler = function (viewer) {
|
bindGlobeEventHandler(viewer);
|
};
|
|
CesiumPop.addDivPop = function (options) {
|
optionsArr.push(options);
|
createPopupElement(options.id, options.content, options.feature);
|
// addCenterMarker(options.viewer,options.pos,options.id,options.extentHeight,options.extentColor);
|
updatePopupPos(options.viewer, options.id, options.pos, options.extentHeight, options.popupWidth, options.popupHeight);
|
};
|
|
function createPopupElement(id, content, feature) {
|
var node = document.createElement("div");
|
node.id = "popupDiv" + id;
|
node.style.position = "absolute";
|
node.style.zIndex = 0;
|
node.innerHTML = content;
|
var arr = document.getElementsByTagName("body");
|
var pNode = arr[0];
|
pNode.appendChild(node);
|
if (feature != undefined) {
|
if (feature instanceof Cesium.Cesium3DTileFeature) {
|
$('#popAlpha').bind('input propertychange', function () {
|
let alpha = Number($('#popAlpha').val());
|
feature._content._batchTable.setAllColor(new Cesium.Color(1, 1, 1, alpha))
|
});
|
} else {
|
var pickPrimitive = feature.primitive;
|
if (pickPrimitive instanceof Cesium.PointPrimitive || pickPrimitive instanceof Cesium.GroundPolylinePrimitive || pickPrimitive instanceof Cesium.GroundPrimitive) {
|
$('#popExport').click(function() {
|
console.log("export");
|
layui.use(['layer'], function () {
|
var layer = layui.layer;
|
layer.config({
|
extend: 'myskin/style.css' //同样需要先加载新皮肤
|
});
|
|
layer.closeAll();
|
layer.open({
|
type: 2,
|
title: '<i class="iconfont icon-liangsuan i-item" style="font-size: 18px; color: white;"></i> ' + "导出",
|
maxmin: true,
|
skin: 'layer-ext-myskin',
|
shade: 0,
|
maxmin: false,
|
scrollbar: false,
|
shadeClose: true, //点击遮罩关闭层
|
area: ['360px', '260px'],
|
resize: false,
|
offset: [layerPageStyle.offsetX, layerPageStyle.offsetY],
|
content: '../../view/project/shpExport.html',
|
success: function (layero, index) {
|
var exportpage = window[layero.find('iframe')[0]['name']];
|
}
|
});
|
});
|
});
|
}
|
}
|
}
|
};
|
|
function addCenterMarker(viewer, pos, id, extentHeight, extentColor) {
|
var position = new Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, pos.alt);
|
var positionextent = new Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, pos.alt + extentHeight);
|
popEntityArr.push(viewer.entities.add({
|
id: "popentity" + id,
|
position: position,
|
point: {
|
pixelSize: 10,
|
color: Cesium.Color.RED.withAlpha(0.8),
|
disableDepthTestDistance: 1000,
|
outlineWidth: 2,
|
outlineColor: Cesium.Color.WHITE.withAlpha(1)
|
},
|
polyline: {
|
positions: [position, positionextent],
|
width: 2,
|
show: true,
|
material: new Cesium.PolylineDashMaterialProperty({
|
color: extentColor
|
})
|
}
|
}));
|
};
|
|
function bindGlobeEventHandler(viewer) {
|
pophandler = pophandler && pophandler.destroy();
|
pophandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
pophandler.setInputAction(function (movement) {
|
for (var i = 0; i < optionsArr.length; i++) {
|
updatePopupPos(viewer, optionsArr[i].id, optionsArr[i].pos, optionsArr[i].extentHeight,
|
optionsArr[i].popupWidth, optionsArr[i].popupHeight);
|
}
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
pophandler.setInputAction(function (movement) {
|
for (var i = 0; i < optionsArr.length; i++) {
|
updatePopupPos(viewer, optionsArr[i].id, optionsArr[i].pos, optionsArr[i].extentHeight,
|
optionsArr[i].popupWidth, optionsArr[i].popupHeight);
|
}
|
}, Cesium.ScreenSpaceEventType.WHEEL);
|
};
|
|
function updatePopupPos(viewer, id, pos, extentHeight, popupWidth, popupHeight) {
|
var scene = viewer.scene;
|
var p3d = Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, pos.alt + extentHeight);
|
var p = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, p3d);
|
if (!p) {
|
return;
|
}
|
var popupNode = document.getElementById("popupDiv" + id);
|
popupNode.style.left = (p.x - popupWidth / 2 + 20) + "px";
|
popupNode.style.top = (p.y - popupHeight) + "px";
|
};
|
|
CesiumPop.updatePopPos = function (viewer, id, pos, extentHeight, popupWidth, popupHeight, extentColor) {
|
updatePopupPos(viewer, id, pos, extentHeight, popupWidth, popupHeight);
|
viewer.entities.removeById("popentity" + id);
|
addCenterMarker(viewer, pos, id, extentHeight, extentColor);
|
for (var i = 0; i < optionsArr.length; i++) {
|
if (optionsArr[i].id == id) {
|
optionsArr[i].pos = pos;
|
break;
|
}
|
}
|
}
|
|
var updateSampledPopupPosi = 0;
|
function updateSampledPopupPos(viewer, id, nodes, extentHeight, popupWidth, popupHeight) {
|
var scene = viewer.scene;
|
var intervalSpop = setInterval(function () {
|
var lon = Cesium.Math.lerp(nodes[0].x, nodes[1].x, 0.01 * updateSampledPopupPosi);
|
var lat = Cesium.Math.lerp(nodes[0].y, nodes[1].y, 0.01 * updateSampledPopupPosi);
|
//var height = nodes[0].z-(nodes[0].z-nodes[1].z)*0.2*updateSampledPopupPosi;
|
var height = Cesium.Math.lerp(nodes[0].z, nodes[1].z, 0.01 * updateSampledPopupPosi);
|
var position = new Cesium.Cartesian3(lon, lat, height);
|
var p = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, position);
|
if (!p) {
|
return;
|
}
|
var popupNode = document.getElementById("popupDiv" + id);
|
popupNode.style.left = (p.x - popupWidth / 2 + 20) + "px";
|
popupNode.style.top = (p.y - popupHeight) + "px";
|
updateSampledPopupPosi++;
|
}, 200);
|
return intervalSpop;
|
};
|
|
CesiumPop.updateSampledPopPos = function (viewer, id, nodes, extentHeight, popupWidth, popupHeight, extentColor) {
|
var times = [];
|
var startTime = Cesium.JulianDate.now(startTime);
|
for (var i = 0; i < nodes.length; i++) {
|
var time = new Cesium.JulianDate();
|
Cesium.JulianDate.addSeconds(startTime, i * 10, time);
|
times.push(time);
|
}
|
var stopTime = times[times.length - 1];
|
//插值
|
var property = new Cesium.SampledPositionProperty();
|
property.addSamples(times, nodes);
|
viewer.entities.getById("popentity" + id).position = property;
|
viewer.entities.getById("popentity" + id).polyline.show = false;
|
var intervalSpop = updateSampledPopupPos(viewer, id, nodes, extentHeight, popupWidth, popupHeight);
|
for (var i = 0; i < optionsArr.length; i++) {
|
if (optionsArr[i].id == id) {
|
optionsArr[i].pos = nodes[nodes.length - 1];
|
break;
|
}
|
}
|
return intervalSpop;
|
}
|
|
CesiumPop.clearDivPop = function (viewer) {
|
for (var i = 0; i < popEntityArr.length; i++) {
|
viewer.entities.remove(popEntityArr[i]);
|
}
|
for (var i = 0; i < optionsArr.length; i++) {
|
var elem = document.getElementById('popupDiv' + optionsArr[i].id);
|
if (elem) {
|
elem.parentNode.removeChild(elem);
|
}
|
}
|
popEntityArr = [];
|
optionsArr = [];
|
pophandler = pophandler && pophandler.destroy();
|
};
|
|
CesiumPop.removeDiv = function (viewer) {
|
for (var i = 0; i < popEntityArr.length; i++) {
|
viewer.entities.remove(popEntityArr[i]);
|
}
|
for (var i = 0; i < optionsArr.length; i++) {
|
var elem = document.getElementById('popupDiv' + optionsArr[i].id);
|
if (elem) {
|
elem.parentNode.removeChild(elem);
|
}
|
}
|
popEntityArr = [];
|
optionsArr = [];
|
};
|
|
|
CesiumPop.removeDivPopById = function (viewer, id) {
|
for (var i = 0; i < optionsArr.length; i++) {
|
if (id === optionsArr[i].id) {
|
viewer.entities.removeById("popentity" + id);
|
var elem = document.getElementById('popupDiv' + id);
|
if (elem) {
|
elem.parentNode.removeChild(elem);
|
}
|
optionsArr.splice(i, 1);
|
break;
|
}
|
}
|
};
|
|
CesiumPop.removePophandler = function (viewer) {
|
pophandler = pophandler && pophandler.destroy();
|
};
|
|
CesiumPop.stopInterval = function (Interval) {
|
clearInterval(Interval);
|
updateSampledPopupPosi = 1;
|
}
|
|
return CesiumPop;
|
}
|
|
if (typeof (CesiumPop) === 'undefined') {
|
window.CesiumPop = define_CesiumPop();
|
} else {
|
console.log("CesiumPop already defined.");
|
}
|
})(window);
|
