Mars3d试水--vite（二）

1、 数据图层图表点

图标不显示问题。

• img图标存放的位置不对，之前是存在src/assets/img路径下，但是，完全不会显示其图标点

 image: "./assets/img/map.png",

- 解决：放在public/img路径下即可

// 数据图层-- 图标点:BillboardEntity
  addDemoGraphic3: (graphicLayer: mars3d.layer.GraphicLayer) => {
    const graphic = new mars3d.graphic.BillboardEntity({
      name: "贴地图标",
      position: [116.3, 31.0, 1000],
      style: {
        image: "/public/img/map.png",//此路径下
        scale: 0.2, //图像大小的比例
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,//横向方向的定位
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,//垂直方向的定位
        clampToGround: true,//是否贴地
      },
      attr: { remark: "示例3图标点" },
    });
    graphicLayer.addGraphic(graphic);
    //在图层绑定Popup弹窗
    initGraphicManager(graphic); 
  },

弹出层动态数据不能显示问题

• 想在Popup弹窗显示graphic的attr数据，但是忘记了怎么写的了。

-解决： 反引号<div>反引号 +要展示的数据+ 反引号</div>反引号

// 在单个graphic绘图上做个性化管理及绑定操作
// 在图层绑定Popup弹窗
function initGraphicManager(graphic) {
  console.log(graphic, "在图层绑定Popup弹窗", graphic.options.attr);
  // debugger
  const inithtml =
    `<div>我是graphic上帮点的信息` +
    `<h1>` +
    graphic.options.attr.remark +
    `</h1>` +
    `</div>`;
  // 绑定鼠标单击对象后的弹窗,是像素点 Entity对象
  // 绑定Popup
  graphic.bindPopup(inithtml).openPopup();
}

注意：此处的openPopup(),是为了使Popup显示方便，可以直接在地图上显示。

也可以去掉openPopup()，默认不显示，点击后显示