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

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

by LandsD Map API

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/Build/Cesium/Widgets/widgets.css">
<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.globe.depthTestAgainstTerrain = false;
const buildingSample = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
  url: "https://3dapi.hkmapservice.gov.hk/czm/3dtiles/meshmodel/WGS84/Sample/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
});