3D Tiles with attributes

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">
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Tiles with attributes</title>
</head>

<body style="width: 100%;height:100%;margin: 0 0;overflow:hidden">
  <div id="cesiumContainer" style="width: 100%;height:100%"></div>
  <div id="loadingOverlay">
    <h1>Loading...</h1>
  </div>
  <div id="toolbar"></div>
  <div id="demo">
  </div>
</body>

</html>

CSS

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

JavaScript

try {
  var basemapURL = "https://api.hkmapservice.gov.hk/osm/xyz/basemap/WGS84";
  var groundURL = "https://api.hkmapservice.gov.hk/czm/qtmesh/hkterrain/WGS84";

  var apikey = '3563972aa8fe4414837fb565333c5c47';

  XMLHttpRequest.prototype.openRaw = XMLHttpRequest.prototype.open
  XMLHttpRequest.prototype.open = function(method, url, asyn, usr, pwd) {

    if (url.indexOf("api.hkmapservice.gov.hk") >= 0 || url.indexOf("3dapi.hkmapservice.gov.hk") >= 0) {
      if (url.indexOf("?") >= 0) url += "&key=" + apikey
      else url += "?key=" + apikey
    }
    this.openRaw(method, url, asyn, usr, pwd)
  }

  var projection = new Cesium.WebMercatorProjection()
  var terrainProvider = new Cesium.CesiumTerrainProvider({
    url: groundURL
  })
  // Information about the currently selected feature
  const selected = {
    feature: undefined,
    originalColor: new Cesium.Color(),
  };

  // An entity object which will hold info about the currently selected feature for infobox display
  const selectedEntity = new Cesium.Entity();

  const highlighted = {
    feature: undefined,
    originalColor: new Cesium.Color(),
  };
  // Get default left click handler for when a feature is not picked on left click


  Cesium.Ion.defaultServer = ".";
  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?key=" + apikey,
      credit: '© Map from Lands Department',
    }),
    mapProjection: projection
  });
  var ellipsoid = projection.ellipsoid;
  // viewer.scene.canvas.addEventListener('click', function(e) {
  //   var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian3(e.clientX, e.clientY), ellipsoid);
  //   if (cartesian) {
  //     var cartographic...