Map API Portal - Indexed 3D Scene Service - 3D Visualisation Map (Individualised models)

Map API Portal - Indexed 3D Scene Service - 3D Visualisation Map (Individualised models)

by LandsD Map API

HTML

<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.24/"></script>
<div id="viewDiv"></div>

CSS

html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#coor {
  position: absolute;
  left: 0;
  bottom: 17px;
  background-color: white;
  padding: 2px;
  border: 1px solid black;
  font-size: 12px;
}

#data_panel {
  position: absolute;
  right: 10px;
  top: 10px;
  background-color: white;
  padding: 2px;
  font-size: 12px;
  box-shadow: 5px 5px 10px #888888;
}

#data_panel input,
#data_panel label {
  cursor: pointer;
}

#data_panel th {
  text-align: left;
}

.esri-attribution a {
  color: black;
  font-size: 12px;
  font-family: sans-serif;
}

.esri-popup__header-title {
  word-break: break-word;
}
.esri-attribution__powered-by{
  display:none;
}

JavaScript

var apikey = "3563972aa8fe4414837fb565333c5c47";
var basemapURL = "https://api.hkmapservice.gov.hk/ags/map/basemap/HK80";
var groundURL = "https://api.hkmapservice.gov.hk/ags/image/hkterrain/HK80";

require([
  "esri/Map", "esri/views/SceneView",
  "esri/layers/SceneLayer", "esri/Basemap",
  "esri/Ground", "esri/layers/TileLayer",
  "esri/layers/ElevationLayer", "esri/layers/SceneLayer",
  "esri/core/urlUtils", "esri/views/MapView",
  "esri/config",
  "esri/geometry/SpatialReference", "esri/geometry/Point",
  "esri/widgets/Compass", "dojo/domReady!"
], function(Map, SceneView, SceneLayer, Basemap, Ground, TileLayer, ElevationLayer, SceneLayer,
  urlUtils,
  MapView, esriConfig, SpatialReference, Point, Compass) {
  esriConfig.request.trustedServers.push("https://api.hkmapservice.gov.hk");
  esriConfig.request.trustedServers.push("https://3dapi.hkmapservice.gov.hk");
  esriConfig.request.interceptors.push({
    before: function(params) {
      if (params.url.indexOf("https://api.hkmapservice.gov.hk") >= 0 || params.url.indexOf("https://3dapi.hkmapservice.gov.hk") >= 0) {
        if (params.requestOptions.query) {
          params.requestOptions.query.key = apikey
        } else {
          params.requestOptions.query = {
            key: apikey
          }
        }
      }

    }
  });

  var basemap = new Basemap({
    baseLayers: [
      new TileLayer({
        url: basemapURL
      })
    ]
  });
  var ground = new Ground({
    layers: [
      new ElevationLayer({
        url: groundURL
      })
    ]
  });


  var map = new Map({
    basemap: basemap,
    ground: ground,
  });

  var scene = new SceneView({
    container: "viewDiv",
    map: map,
    camera: {
      position: {
        longitude: 840800,
        latitude: 818500,
        z: 300,
        spatialReference: {
          wkid: 2326
        }
      },
      tilt: 65,
      heading: 0
    }
  });
  map.add(new SceneLayer({
    url:...