水面（含倒影）

---

import { Viewer, WaterPrimitive } from "joDVF";
import { Cartesian3, Cesium3DTileset } from "joCesium";

const { mapContainer } = createContainer();

const viewer = new Viewer(mapContainer);
viewer.scene.globe.depthTestAgainstTerrain = true;
const dataBaseURL =
  "https://3d-api.southsmart.com/mapserver/rest/seaweedfs/qingxieqinglianghua/3cb6f9d55f3c401b8936f01bf1cb9397/data/layer";

try {
  const tileset = await Cesium3DTileset.fromUrl(dataBaseURL);
  viewer.scene.primitives.add(tileset);
} catch (e) {
  console.log(e);
}

const height = 13.61;
const positions = [
  [120.60065115783391, 30.004961428607423],
  [120.60078615073238, 30.005928090960985],
  [120.60054615017066, 30.005968890471863],
  [120.60030200406126, 30.005993164672226],
  [120.60007379651816, 30.006039826423557],
  [120.59992936336847, 30.00594702587555],
  [120.59983900854532, 30.00552740794912],
  [120.59974257542459, 30.005052026091487],
  [120.60002362058049, 30.004937565066534]
];
const water = new WaterPrimitive({
  scene: viewer.scene,
  positions: positions,
  height,
  initUniforms: {
    size: 1000
  },
  debugOutputReflectionTexture: true
});
viewer.scene.primitives.add(water);
viewer.camera.flyTo({
  destination: new Cartesian3(
    -2814041.5758338734,
    4758113.6093013,
    3171036.9673940265
  ),
  orientation: {
    direction: new Cartesian3(
      0.22644754013742907,
      0.10042698028953595,
      -0.9688322523510624
    ),
    up: new Cartesian3(
      -0.37821919942793114,
      0.9256852591858233,
      0.007552357921212506
    ),
    right: new Cartesian3(
      0.8975921951252713,
      0.3647207459906822,
      0.24760256197018105
    )
  }
});

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
  };
}