- class CesiumPopupClass {
- constructor(viewer, options) {
- this.viewer = viewer
- this.position = options.position;
- this.options = this.extend({}, options);
- var popupContainer = document.createElement("div");
- popupContainer.classList.add('popup');
- var popupInner = '标题内容';
- popupContainer.innerHTML = popupInner;
- popupContainer.style.display = 'none';
- viewer.cesiumWidget.container.appendChild(popupContainer);
- popupContainer.style.cssText = "display: none;position: absolute;left: 0;top: 0;min-width: 200px;z-index:9999;";
-
- this.popupContainer = popupContainer;
-
- // 初始化
- this.init();
- }
- init() {
- if (this.position) {
- this.popupContainer.style.display = 'block'
- this.renderListener = this.viewer.scene.postRender.addEventListener(this.render, this)
- }
- }
- render() {
- var ellipsoid = this.viewer.scene.globe.ellipsoid;
- var geometry = Cesium.Cartesian3.fromDegrees(
- this.position[0],
- this.position[1],
- 0,
- ellipsoid
- );
-
- if (!geometry) return
- var position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, geometry)
- if (!position) {
- return
- }
- if (this.popupContainer) {
- this.popupContainer.style.left = position.x - this.popupContainer.offsetWidth / 2 + 'px'
- this.popupContainer.style.top = position.y - this.popupContainer.offsetHeight - 10 + 'px'
- }
- }
- remove() {
- if (this.popupContainer) {
- this.popupContainer.parentNode.removeChild(this.popupContainer)
- this.popupContainer = null
- }
-
- if (this.renderListener) {
- this.renderListener()
- this.renderListener = null
- }
-
- if (this.viewer) {
- this.viewer = null
- }
- }
- extend(obj, obj2) {
- for (var k in obj2) {
- obj[k] = obj2[k];
- }
- return obj;
- }
- }
-
- let p1 = new CesiumPopupClass(viewer, {
- position: [112.57482863, 26.81853529]
- })
- let p2 = new CesiumPopupClass(viewer, {
- position: [112.57524924, 26.81874033]
- })
- p2.remove();