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 + "/tileset.json",

});

scene.primitives.add(building);

scene.primitives.add(infra);

var clickId = null;

var clickeFeature = null

viewer.selectedEntityChanged.addEventListener(function(entity) {

if (!entity) clickId = null;

});

viewer.screenSpaceEventHandler.setInputAction(function(event) {

if (clickeFeature && clickeFeature.content.batchTable) {

clickeFeature.color = new Cesium.Color(1, 1, 1, 1)

clickeFeature = null;

}

var feature = clickeFeature = scene.pick(event.position)

var featurePos = scene.pickPosition(event.position)

if (feature instanceof Cesium.Cesium3DTileFeature) {

if (feature.content.batchTable)

feature.color = Cesium.Color.YELLOW

clickId = feature.getProperty("name")

console.log(clickId)

Cesium.Resource.fetchJson({

url: "https://api.hkmapservice.gov.hk/ags/map/layer/ib1000/buildings/building/query",

queryParameters: {

'f': 'json',

'outFields': 'englishbuildingname,chinesebuildingname,buildingcsuid',

'spatialRel': 'esriSpatialRelIntersects',

'where': "buildingcsuid like '%" + clickId.substr(1, 10) + "%'",

'returnGeometry': 'false',

}

}).then(function(jsonData) {

if (jsonData.features.length > 0) {

var engname = jsonData.features[0].attributes['englishbuildingname']

var chiname = jsonData.features[0].attributes['chinesebuildingname']

var csuid = jsonData.features[0].attributes['buildingcsuid']

var entity = new Cesium.Entity({

name: 'Information',

})

entity.description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +

'<tr><th>' + "English Building Name" + '</th><td>' + (!engname ? "N/A" : engname) + '</td></tr>' +

'<tr><th>' + "Chinese Building Name" + '</th><td>' + (!chiname ? "N/A" : chiname) + '</td></tr>' +

'<tr><th>' + "Building CSU ID" + '</th><td>' + csuid + '</td></tr>' +

'<tr><th>' + "Model ID" + '</th><td>' + clickId + '</td></tr>' +

'</tbody></table>'

entity.position = new Cesium.ConstantPositionProperty(featurePos)

viewer.selectedEntity = entity

} else {

var entity = new Cesium.Entity({

name: 'Information',

})

entity.description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +

'<tr><th>' + "Model ID" + '</th><td>' + clickId + '</td></tr>' +

'</tbody></table>'

entity.position = new Cesium.ConstantPositionProperty(featurePos)

viewer.selectedEntity = entity

}

});

}

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

building.tileVisible.addEventListener(function(tile) {

var content = tile.content;

var featuresLength = content.featuresLength;

for (var i = 0; i < featuresLength; i += 2) {

var feature = content.getFeature(i);

if (feature.content.batchTable)

if (clickId && feature.getProperty("name") == clickId)

feature.color = Cesium.Color.YELLOW

else

feature.color = new Cesium.Color(1, 1, 1, 1)

}

});