HTML 标注

---

import { Viewer, HtmlPoint, DrawHandler } from "joDVF";
import { Cartesian3 } from "joCesium";

const { mapContainer, uiContainer } = createContainer();

const viewer = new Viewer(mapContainer);
viewer.camera.flyTo({
  destination: Cartesian3.fromDegrees(118.9117467, 32.1165988, 36000.5)
});
const HtmlPoint1 = new HtmlPoint(viewer);
/**
 * 获取随机数
 */
const getRandomArbitrary = (min, max) => {
  min = Math.ceil(min * 100);
  max = Math.floor(max * 100);
  return Math.floor(Math.random() * (max - min + 1) + min) / 100;
};

const nodesLength = 1;
/*------------测试生成多个billboard start---------------*/
for (let index = 0; index < nodesLength; index++) {
  const position = Cartesian3.fromDegrees(
    getRandomArbitrary(118.71, 118.91),
    getRandomArbitrary(32.11, 32.18),
    900
  );
  const htmlStr = `<div class="container${index}" style="color:#fff;padding:10px;border-radios:30px;background-color:rgba(0,0,0,.5)">
    <header style="text-align:center;margin:10px;">可信赖的无人机源自纵横大鹏</header>
    <section class="company">
      <div class="box" style="display:flex;justify-content:center;">
        <img width="220" height="200"  crossorigin="anonymous" src="https://pic1.zhimg.com/v2-e99d35c5e4158b80072e7b6aaaa848e3_xs.jpg?source=12a79843" />
      </div>

    </section>
  </div>`;
  HtmlPoint1.render({
    html: htmlStr,
    position,
    name: `con${index}`,
    offsetX: 5,
    offsetY: -15
  });

  DrawHandler.drawPoint(viewer, position);
}
function createContainer() {
  const container = document.createElement("div");
  container.style.width = "100%";
  container.style.height = "100%";

  const uiContainer = document.createElement("div");
  uiContainer.style.position = "fixed";
  uiContainer.style.top = "5px";
  uiContainer.style.left = "5px";
  document.body.appendChild(container);
  document.body.appendChild(uiContainer);

  return {
    mapContainer: container,
    uiContainer
  };
}