Skip to main content

Load WMTS service

To support loading the WMTS service of Suzhou 2000 coordinate system, the coordinate system parameter project:'SZ2000' needs to be set.

show
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SZ2000</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>

    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script>

      // Suzhou 2000 rpm SDK coordinates
      let center = mapmost.Convert.fromDefinedProj([342171.097900000400841, 665836.627800000831485]);

      // Map initialization
      let map = new mapmost.Map({
        container: 'map', // map container id
        style: '<your style url>', // sz2000 style file
        center: center, //Coordinates of the initial center point of the map
        zoom: 13, // Initial zoom level of the map
        pitch: 60, // Map initial pitch angle
        bearing: 0, // initial azimuth of the map
        userId:'***', // Authorization code
      });

      map.on('load', function () {

        //Load WMTS raster service
        let wmts_option = {
          id: "wmts-test-layer",
          project: "SZ2000",
          source: {
            tiles: ["http://******/CIC/SIPGIS/esri-tile/layerTileService/SZ2000_sipmap/rest/services/MapServer/tile/{z}/{y}/{x}"],
            origin: [-5273200, 7202100],
            resolutions: resolutions
          }
        };
        map.addRasterLayer2(wmts_option);
      })
    </script>
  </body>
</html>