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

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

by LandsD Map API

HTML

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

CSS

html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
.esri-attribution a{
  color: black;
  font-size: 12px; 
  font-family: sans-serif;
}
.esri-attribution__powered-by{
  display:none;
}

JavaScript

var apikey = "3563972aa8fe4414837fb565333c5c47";
var basemapURL = "https://api.hkmapservice.gov.hk/ags/map/basemap/HK80";
var mapEngLBUrl = "https://api.hkmapservice.gov.hk/ags/map/label-tc/HK80";
var groundURL = "https://api.hkmapservice.gov.hk/ags/image/hkterrain/HK80";
var meshModelURL = "https://3dapi.hkmapservice.gov.hk/ags/i3s/meshmodel/HK80/Sample/SceneServer";
require([
  "esri/Map", "esri/views/SceneView",
  "esri/layers/IntegratedMeshLayer", "esri/Basemap",
  "esri/Ground", "esri/layers/TileLayer", "esri/layers/ElevationLayer",
  "esri/core/urlUtils", "esri/views/MapView", "esri/config",
  "esri/geometry/SpatialReference", "esri/geometry/Point"
], function(Map, SceneView, IntegratedMeshLayer, Basemap, Ground, TileLayer, ElevationLayer, urlUtils,
  MapView, esriConfig, SpatialReference, Point) {
  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
          }
        }
      }

    },
    after: function(response) {
      if (!response.ssl) {
        //response.ssl = true;
      }
    }
  });
  urlUtils.removeQueryParameters = function(a, c) {
    return a;
  }

  var basemap = new Basemap({
    baseLayers: [
      new TileLayer({
        url: basemapURL
      })
    ]
  });
  var ground = new Ground({
    layers: [
      new ElevationLayer({
        url: groundURL
      })
    ]
  });
  var meshModel = new IntegratedMeshLayer({
    url: meshModelURL,
    layerId: 0
  });


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

  var...