cesium 掉arcgis 服务
var apikey = '584b2fa686f14ba283874318b3b8d6b0';
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)
}
});