/* * 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: ' ' + "导出", 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);