根据点位信息，显示多边形

效果图

初始化

onMounted(async () => {
 // 添加自己的 Cesium 底图服务
  // Cesium.Ion.defaultAccessToken = ""
  const viewer = new Viewer('map', {
    location: false,
    baseLayerPicker: false, // 是否显示图层选择控件
    copyrightLogo: false,
    navigation: false,
    helper: false, // 是否显示帮助信息控件
    terrainProvider: Cesium.createWorldTerrain(),
    sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
    contextOptions: {
      webgl: {
        alpha: true,
      },
    },
  });
  viewer.scene.skyBox.show = false;
  viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;
  viewer.scene.screenSpaceCameraController.enableRotate = false; // 禁止旋转
  viewer.scene.screenSpaceCameraController.enableTranslate = false; // 禁止移动
  viewer.scene.screenSpaceCameraController.enableZoom = false; // 禁止缩放
  window['viewer'] = viewer;
  // manageView  当前组件变量（非响应式） let manageView;
  manageView = viewer;   
  // 初始化多边形
  initLocationPolygon(viewer);
  // 初始化位置信息
  initLocationName(viewer);
  // 调用鼠标事件
  setMouseEvent();
  viewer.camera.flyTo({
    destination: mapParams.destination,
    orientation: mapParams.orientation,
  });
  await getData();
});

根据点位显示多边形

async function initLocationPolygon(viewer) {
  // areaData 本地静态数据文件（无需关注）
  areaData.features.forEach((item) => {
    item.geometry.rings.forEach((it) => {
      // 转化坐标数据结构  无需关注
      const positions = positionFormat(it);
      glowLines.push(
        // 根究点位显示多边形
        viewer.entities.add({
          name: item.attributes.NAME,
          polygon: {
            /**
            	positions： 数据结构如下
            	[
            	  113.85087722000019,
			      34.883164580000056,
			      113.85092251500012,
				  34.8826465450001,
				  ...
				]
            */
            hierarchy: Cesium.Cartesian3.fromDegreesArray(positions),
            height: 0,
            // 多边形颜色，如果设置为透明色，则获取不到polygon实体对象
            material: Cesium.Color.BLACK, 
            // 显示多边形边框
            outline: true,
            // 多边形边框宽度 （Cesium 虽然暴露了outlineWidth，但这个属性更改无效，使用为默认值1）
            outlineWidth: 5,  // 无效，原因如下
            outlineColor: Cesium.Color.DODGERBLUE.withAlpha(0.4), 
        }),
      );
    });
  });
}

注意多边形的outlineWidth为什么设置无效，始终为默认值1呢？请看源码
outlineWidth属性源码


注意：如果想要改变多边形边框宽度，一个是修改源码（不推荐），另一个是借助polyline实体对象，不过，此刻你需要多处理一个实体对象即是polyline

viewer.entities.add({
  name: item.attributes.NAME,
   polygon: {
     hierarchy: Cesium.Cartesian3.fromDegreesArray(positions),
     height: 0,
     material: Cesium.Color.BLACK, // 透明的话获取不到实体对象
     outline: false,
   },
   // 因为outlineWidth 不起作用
   // polyline和polygon  同级
   polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray(positions),
      width: 5,
      material: Cesium.Color.DODGERBLUE.withAlpha(0.4),
   },
 }),

初始化点位信息

async function initLocationName(viewer) {
  // 图片纹理
  const imageUrls = {
    中原区: 'images/map3d/areaIcon-zy.png',
    惠济区: 'images/map3d/areaIcon-hj.png',
    金水区: 'images/map3d/areaIcon-js.png',
    二七区: 'images/map3d/areaIcon-eq.png',
    管城回族区: 'images/map3d/areaIcon-gc.png',
  };
  areaData.features.forEach((item) => {
    glowPoint.push(
      viewer.entities.add({
        name: item.attributes.NAME,
        // 范围区域的中心位置
        position: Cesium.Cartesian3.fromDegrees(item.attributes.centerX, item.attributes.centerY),
        billboard: {
          // 设置图片纹理
          image: imageUrls[item.attributes.NAME],
          // 防止billboard被3dtiles模型覆盖，可在billboard参数中设置disableDepthTestDistance参数，来禁止billboard的深度检测
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
      }),
    );
  });
}

images/map3d/areaIcon-eq.png 对应图片如下

Cesium的事件

function setMouseEvent() {
  // 获取鼠标点击坐标
  const handlerGetCoordinate = new Cesium.ScreenSpaceEventHandler(manageView.canvas);
  handlerGetCoordinate.setInputAction((movement) => {
    // endPosition 鼠标移动事件的点位信息
    const pick = manageView.scene.pick(movement.endPosition);
    if (pick && pick.id) {  // 说明是实体
      glowLines.forEach((item) => {
        item.polygon.outlineColor = Cesium.Color.DODGERBLUE.withAlpha(0.4);
      });
      // const glowLines = [] as any;
      glowLines.forEach((item) => {
        if (item._name === pick.id._name) {
          // 改变多边形实体的边框颜色
          item.polygon.outlineColor = Cesium.Color.GOLDENROD.withAlpha(0.6);
        }
      });
      // 鼠标移动事件
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}