3DSD 3D Tiles

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">
<body style="width: 100%;height:100%;margin: 0 0;overflow:hidden">
  <div id="cesiumContainer" style="width: 100%;height:100%"></div>
</body>

CSS

.cesium-viewer .cesium-widget-credits {
  display: none
}

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

JavaScript

var apikey = 'c84e886891014383bcf608423555b0ba';

var basemapURL = "https://api.hkmapservice.gov.hk/osm/xyz/worldimagery/WGS84";
var mapEngLBUrl = "https://api.hkmapservice.gov.hk/osm/xyz/label-tc/WGS84";

var groundURL = "https://api.hkmapservice.gov.hk/czm/qtmesh/hkterrain/WGS84";
var infra3Durl = "https://api.hkmapservice.gov.hk/czm/3dtiles/3dsd/infrastructure/WGS84"
var building3Durl = "https://api.hkmapservice.gov.hk/czm/3dtiles/3dsd/building/WGS84"

XMLHttpRequest.prototype.openRaw = XMLHttpRequest.prototype.open
XMLHttpRequest.prototype.open = function(method, url, asyn, usr, pwd) {
  if (url.indexOf("api.hkmapservice.gov.hk") >= 0) {
    if (url.indexOf("?") >= 0) url += "&key=" + apikey
    else url += "?key=" + apikey
  }
  this.openRaw(method, url, asyn, usr, pwd)
}
Cesium.Ion.defaultServer = '.';
var projection = new Cesium.WebMercatorProjection()
var terrainProvider = new Cesium.CesiumTerrainProvider({
  url: groundURL
})
viewer = new Cesium.Viewer('cesiumContainer', {
  homeButton: false,
  infoBox: true,
  fullscreenButton: false,
  geocoder: false,
  scene3DOnly: true,
  useBrowserRecommendedResolution: false,
  skyAtmosphere: false,
  terrainProvider: terrainProvider,
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    url: basemapURL + "/tile/{z}/{x}/{y}.png",
    credit: '© Map from Lands Department',
  }),
  mapProjection: projection
});
var ellipsoid = projection.ellipsoid;

viewer.scene.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
  url: mapEngLBUrl + "/tile/{z}/{x}/{y}.png"
}))
var scene = viewer.scene;
var canvas = viewer.canvas;
viewer.camera.setView({
  destination: {
    x: -2417742.892275954,
    y: 5386763.154599442,
    z: 2404437.2155371616
  },
  orientation: new Cesium.HeadingPitchRange(6.2534630430870095, -0.7570639856841268, 0)
});
var building = new Cesium.Cesium3DTileset({
  url: building3Durl + "/tileset.json",
});
var infra = new Cesium.Cesium3DTileset({
  url: infra3Durl +...