Cesium的打点分为两类：

  1. 通过Entity（实体）来打点
  2. 通过geometry（几何图形）来打点

在实际应用中，需要对各种点进行定制化的话，可以通过Entity中的billboard（广告牌）引入图片来进行点处理，故大多数使用Entity。本文主要介绍使用实体打点的两种方式，point和billboard。

1. 打点

首先创建一个cesium实例，并创建一个point实体和一个billboard实体：

  1. //Map.vue
  2. <template>
  3.     <div id="map"></div>
  4. </template>
  5. <script>
  6. import "cesium/Build/Cesium/Widgets/widgets.css";
  7. import { Viewer, Cartesian3, Entity } from 'cesium';
  8. export default {
  9.     mounted() {
  10.       const defaultCesiumConifg = {
  11.       geocoder: false,                //查找位置工具
  12.       homeButton: false,              //返回初始位置按钮
  13.       sceneModePicker: false,         //视角选择器
  14.       baseLayerPicker: false,         //图层选择器
  15.       navigationHelpButton: false,    //导航帮助按钮
  16.       animation: false,               //动画控制器
  17.       timeline: false,                //时间线
  18.       fullscreenButton: false,        //全屏控制
  19.     };
  20.     const viewer = new Viewer('map', defaultCesiumConifg);
  21.     viewer._cesiumWidget._creditContainer.style.display = "none";    //关闭版权声明
  22.     viewer.infoBox.destroy();                            //关闭实体点击是默认显示的信息盒子
  23.     viewer.selectionIndicator.destroy();    //关闭实体点击时，实体的选择指示器
  24.     //创建一个外圈红色，内圈白色的点
  25.     viewer.entities.add(new Entity({        //此处建议使用new Entity的方式，方便编辑器进行类型推导，不使用它也会自动转化为entity类
  26.         position: Cartesian3.fromDegrees(111.4, 40.4),  //经纬度位置转化
  27.         point: {
  28.             pixelSize: 30,
  29.             color: Color.WHITE,
  30.             outlineColor: Color.RED,
  31.             outlineWidth: 5,
  32.         },
  33.     }));
  34.     //添加带图片类型的点
  35.     viewer.entities.add(new Entity({
  36.         position: Cartesian3.fromDegrees(-111.6, 40.6),
  37.         billboard: {
  38.             image: '/01.png',    //图片路径
  39.           width: 30,
  40.           height: 30,
  41.         }
  42.     }));
  43.   }
  44. }
  45. </script>

实体信息盒子和选择指示器未关闭时，显示如下： image.png

两个打点的效果如下：
image.png

2. 气泡弹窗

在map中添加一个div，id为popup，并在初始化好的Entity后面添加点击事件。

  1. <template>
  2.     <div id="map">
  3.       <div id="popup"></div>
  4.   </div>
  5. </template>
  7. <script>
  8. import {ScreenSpaceEventHandler, ScreenSpaceEventType, } from 'cesium';
  9. ...
  10.     //点击显示气泡
  11.   const handler = new ScreenSpaceEventHandler(viewer.scene.canvas);    //获取事件处理器
  12.   const scene = viewer.scene;    
  13.   const popup = document.querySelector('#popup');
  14.   popup.style.display = 'none';    //设置气泡为不可见，也方便进行变量查询
  15.   let entity;        //声明被点击的实体变量
  16.     handler.setInputAction(event => {        //注册画布点击事件
  17.       const clickPoint = scene.pick(event.position);    //设置拾取点，如果点击处有实体，返回拾取对象，否则返回undefined
  18.     if(clickPoint && viewer.entities.contains(clickPoint.id)) {        //判断实体是否存在
  19.         entity = clickPoint.id;    //实体获取
  20.       //气泡的显示以及位置设置
  21.       popup.style.display = 'block';
  22.       popup.style.left = event.position.x - 200 + 'px';
  23.       popup.style.top = event.position.y -350 + 'px';
  24.     }
  25.   }, ScreenSpaceEventType.LEFT_CLICK);
  26.   //气泡跟随实体点的移动而移动
  27.   scene.postRender.addEventListener(() => {            //渲染事件监听
  28.       if(popup.style.display !== 'none') {                //气泡已经被点击显示的时候触发
  29.       //将实体的坐标系位置转化为当前窗口位置
  30.         const entityPos = SceneTransforms.wgs84ToWindowCoordinates(scene, entity.position._value);
  31.       popup.style.top = entityPos.y - 350 + 'px';
  32.       popup.style.left = entityPos.x - 200 + 'px';
  33.     }
  34.   });
  35. </script>
  36. <style>
  37.   #popup {
  38.       width: 400px;
  39.     height: 300px;
  40.   }
  41. </style>

实现效果如下，且随着三维球的运动，弹窗也会随之移动：
image.png

拾取到实体的对象数据结构 image.png 实体内position结构 image.png

参考资料：