10行代码完成cesium跟随弹窗，超简单

GIS1024.com

已于 2022-08-09 21:42:41 修改

阅读量1.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： cesium 文章标签：前端 javascript 3d

于 2022-08-09 21:42:03 首次发布

本文链接：https://blog.youkuaiyun.com/u013403742/article/details/126256268

cesium 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Cesium中实现在POI位置弹出窗口并使其随地图移动而移动。通过简单代码示例，展示了如何利用Cesium提供的API解决这一常见需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

一个好习惯，先给结论

使用Cesium.SceneTransforms.wgs84ToWindowCoordinates方法转换经纬度坐标为屏幕坐标，使用scene.postRender.addEventListener方法实时监听地图的转动，将弹窗定位在对应位置。

在线体验地址：点我预览

代码地址：点我github

本文首发于：https://blog.gis1024.com/cesium-popup1.html

这里才是引言

在使用cesium开发项目的过程中，在poi位置弹窗弹窗，并使弹窗始终跟随poi点移动是一个非常常见的需求。

可惜的是，cesium官方没有像其他二维地图框架那样提供一个可以使用的api，所以只能自己写。

之前也参考过网上其他博主写的文章，效果确实能实现，不过要么是代码太过复杂，要么是转动停止后，存在cesium弹窗抖动个不停的问题。

下面的方案，代码极简，核心代码十行出头，可以实现弹窗功能。

代码

该代码直接复制到本地html中可以直接运行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>cesium弹窗popup</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      #cesium-container {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }
    </style>

    <link
      rel="stylesheet"
      href="//lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/cesium/1.86.1/Widgets/widgets.min.css"
    />
    <script src="//lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/cesium/1.90.0/Cesium.js"></script>
  </head>
  <body>
    <div id="cesium-container"></div>
    <a
      href="https://gis1024.com"
      style="position: absolute; left: 10px; top: 10px"
    >
      gis1024.com
    </a>
  </body>

  <script>
    // 请自己去cesium官网注册申请一个token替换
    Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZmJmOGExOC1kMGZjLTRhNmMtYjgyZS04MDU2NDcxMTI2N2IiLCJpZCI6MTY2ODYsImlhdCI6MTY1OTk3MjU2MH0.YacXSjuuxfg6sO8lrcmnMYPyYDuslJ98xiumwnhUh58";
    const viewer = new Cesium.Viewer("cesium-container");
    const scene = viewer.scene;

    let coord = [120.311889, 31.491064];
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(...coord, 1000),
    });

    // 核心代码
    const div = document.createElement("div");
    div.innerHTML = "弹窗里需要填充点内容，支持html字符串";
    viewer.container.append(div);

    scene.postRender.addEventListener(() => {
      let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
        scene,
        Cesium.Cartesian3.fromDegrees(...coord, 0)
      );
      let x = windowCoord.x - div.offsetWidth / 2;
      let y = windowCoord.y - div.offsetHeight;
      div.style.cssText = `
        position:absolute;
        left:0;
        top:0;
        height:100px;
        width:100px;
        background:rgba(0,0,0,0.7);
        color:white;
        transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
    `;
    });
  </script>
</html>