Map API Portal - 3D Tiles Service - 3D Visualisation Map (Individualised models)

Map API Portal - 3D Tiles Service - 3D Visualisation Map (Individualised models)

by LandsD Map API

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/Build/Cesium/Widgets/widgets.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/Build/Cesium/Cesium.js"></script>
<div id="cesiumContainer"></div>

CSS

.cesium-credit-logoContainer {
  display: none !important;
}

html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0 0;
  overflow: hidden;
}

JavaScript

const apikey = "3563972aa8fe4414837fb565333c5c47";
XMLHttpRequest.prototype.openRaw = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url, asyn, usr, pwd) {
  if (url.indexOf("https://api.hkmapservice.gov.hk") >= 0 || url.indexOf("https://3dapi.hkmapservice.gov.hk") >= 0)
    url += (url.indexOf("?") >= 0 ? "&" : "?") + "key=" + apikey;
  this.openRaw(method, url, asyn, usr, pwd);
};

const viewer = new Cesium.Viewer("cesiumContainer", {
  homeButton: false,
  infoBox: true,
  fullscreenButton: false,
  geocoder: false,
  useBrowserRecommendedResolution: false,
  skyAtmosphere: false,
  baseLayerPicker: false,
  scene3DOnly: true,
  timeline: false,
  animation: false,
  terrainProvider: new Cesium.CesiumTerrainProvider({
    url: "https://api.hkmapservice.gov.hk/czm/qtmesh/hkterrain/WGS84"
  }),
  mapProjection: new Cesium.WebMercatorProjection(),
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    url: "https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84/tile/{z}/{x}/{y}.png",
    credit: '© Map information from Lands Department',
  }),
});
viewer.scene.light = new Cesium.DirectionalLight({
  direction: viewer.scene.camera.directionWC,
});
viewer.scene.preRender.addEventListener(function(scene, time) {
  viewer.scene.light.direction = Cesium.Cartesian3.clone(
    viewer.scene.camera.directionWC,
    viewer.scene.light.direction
  );
});
const buildingSample = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
  url: "https://3dapi.hkmapservice.gov.hk/czm/3dtiles/individual/WGS84/Sample/Building/tileset.json",
  //maximumMemoryUsage: 8192,
}));
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(114.220857435, 22.305450873, 300),
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-25.0),
    roll: 0.0
  },
  duration: 0
});