Kowloon Mesh Model in I3S by ArcGIS JS API 4 (HK1980 Grid)

original Kowloon East

by LandsD Map API

HTML

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

<body>
  <div id="viewDiv"></div>
  <div id="landsdlogo" class="landsdlogo"></div>
</body>

CSS

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

#landsdlogo {
  display: inline-block;
  vertical-align: bottom;
  width: 18px;
  height: 18px;
  background: url(https://mapapis01.blob.core.windows.net/images/landsdlogo.jpg);
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

.esri-attribution {
  background: transparent;
}

JavaScript

var basemapURL = "https://api.hkmapservice.gov.hk/ags/map/imagery/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://api.hkmapservice.gov.hk/ags/i3s/meshmodel/kowloon/HK80";

  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",
    "esri/widgets/Bookmarks", "esri/webmap/Bookmark", "esri/Viewpoint",
    "esri/widgets/Expand", "esri/geometry/Extent",
    "esri/widgets/Home",
  ], function(Map, SceneView, IntegratedMeshLayer, Basemap, Ground, TileLayer, ElevationLayer, urlUtils,
    MapView, esriConfig, SpatialReference, Point, Bookmarks, Bookmark, Viewpoint, Expand, Extent, Home) {
    esriConfig.request.trustedServers.push("https://api.hkmapservice.gov.hk");


    esriConfig.request.interceptors.push({
      before: function(params) {
        if (params.url.indexOf("api.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
        }),
        new TileLayer({
          url: mapEngLBUrl
        })
      ]
    });
    var ground = new Ground({
      layers: [
        new ElevationLayer({
          url: groundURL
        })
      ]
    });
    var meshModel = new...