Kowloon Mesh Model in 3D Tiles by Cesium JS

Kowloon Mesh Model in 3D Tiles by Cesium JS

by LandsD Map API

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kowloon East Mesh Model in 3D Tiles by Cesium JS</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/Build/Cesium/Cesium.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  </head>

  <body style="width: 100%;height:100%;margin: 0 0;overflow:hidden">
    <div id="cesiumContainer" style="width: 100%;height:100%"></div>
    <div id=demo style='position:absolute;bottom:0;right:0;height:15px;width:250px;background:white;font-size:11px;text-align:center'></div>
  </body>
</html>

CSS

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

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

JavaScript

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 meshModelURL = "https://api.hkmapservice.gov.hk/czm/3dtiles/meshmodel/kowloon/WGS84";
var apiKey = 'c84e886891014383bcf608423555b0ba';

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.defaultAccessToken = 'your_access_token';
Cesium.Ion.defaultServer = '.';
var projection = new Cesium.WebMercatorProjection()
viewer = new Cesium.Viewer('cesiumContainer', {
  homeButton: false,
  infoBox: true,
  fullscreenButton: false,
  geocoder: false,
  scene3DOnly: true,
  useBrowserRecommendedResolution: false,
  skyAtmosphere: false,
  terrainProvider: new Cesium.CesiumTerrainProvider({
    url: groundURL
  }),
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    url: basemapURL + "/tile/{z}/{x}/{y}.png",
    credit: '© Map from Lands Department',
  }),
  mapProjection: projection
});
var ellipsoid = projection.ellipsoid;
viewer.scene.canvas.addEventListener('mousemove', function(e) {
  var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian3(e.clientX, e.clientY), ellipsoid);
  if (cartesian) {
    var cartographic = ellipsoid.cartesianToCartographic(cartesian);
    var projected = projection.project(cartographic)
    var display = '(X: ' + projected.x + ', Y: ' + projected.y + ')';
    document.getElementById("demo").innerHTML = display;
  } else {
    //entity.label.show = false;
  }
});
viewer.scene.globe.depthTestAgainstTerrain = false;
viewer.scene.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
  url:...