1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<title>CesiumJS: Reverse Geocode</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<!-- Load ArcGIS REST JS from CDN -->
<script src="https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js"></script>
<script src="https://unpkg.com/@esri/arcgis-rest-geocoding@4.0.0/dist/bundled/geocoding.umd.js"></script>
<style>
html,
body {
margin: 0px;
padding: 0px;
height: 100%;
}
#cesiumContainer {
height: 100%;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script type="module">
const apiKey = "YOUR_API_KEY";
Cesium.ArcGisMapService.defaultAccessToken = apiKey;
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
Cesium.Ion.defaultAccessToken = cesiumAccessToken;
const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE, {
enablePickFeatures:false
});
const viewer = new Cesium.Viewer("cesiumContainer", {
baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
terrain: Cesium.Terrain.fromWorldTerrain(),
timeline: false,
animation: false,
geocoder:false
});
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-122.388805,37.797517,2000),
orientation: {
heading: Cesium.Math.toRadians(-130),
pitch: Cesium.Math.toRadians(-70.0),
}
});
const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer");
const i3sProvider = await Cesium.I3SDataProvider.fromUrl("https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_3DObjects_1_7/SceneServer",{
geoidTiledTerrainProvider: geoidService
});
viewer.scene.primitives.add(i3sProvider);
function onLeftClick(movement) {
viewer.entities.removeAll();
const pickedPosition = viewer.scene.pickPosition(movement.position);
const cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
const originLatLng = [Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude)]
findAddress(originLatLng);
}
viewer.screenSpaceEventHandler.setInputAction(onLeftClick,Cesium.ScreenSpaceEventType.LEFT_CLICK);
function findAddress(coordinates) {
arcgisRest
.reverseGeocode(coordinates, {
authentication
})
.then((response) => {
const pinBuilder = new Cesium.PinBuilder();
const location = Cesium.Cartesian3.fromDegrees(response.location.x,response.location.y);
const result = viewer.entities.add({
name:`${response.location.x.toLocaleString()}, ${response.location.y.toLocaleString()}`,
description:`${response.address.LongLabel}`,
position:location,
billboard: {
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
scale:0.6,
image: pinBuilder.fromColor(Cesium.Color.fromCssColorString('#5491f5'),48).toDataURL(),
}
})
viewer.selectedEntity = result;
})
}
findAddress([-122.392, 37.796])
</script>
</body>
</html>
