Skip to main content

Load ArcGIS dynamic layers

Support loading ArcGIS dynamic layers. There is a performance gap compared to the native framework. Regardless of network speed, the overall loading speed is 1 second slower.

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Load arcgis dynamic layer</title>
    <meta name="referrer" content="strict-origin-when-cross-origin" />
    <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>
      let map = new mapmost.Map({
        container: "map", // container id
        style: {
          version: 8,
          sources: {},
          layers: [],
        }, // style URL
        center: [-117.45296523123258, 33.901713421187964], // starting position [lng, lat]
        zoom: 16, // starting zoom
        pitch: 0,
        userId: "***", // Authorization code
      });

      map.on("load", function () {
        map.addArcGISDynamicLayer({
          id: "layer",
          project: "3857", //Coordinate system name, the default supports "3857", "4326", "4490" and "4528", other coordinate systems need to be passed in through customization
          source: {
            url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/PoolPermits/MapServer/", // Service address
            // resolutions: null, //Tile resolutions, by default the Google tile resolution is obtained based on the service acquisition unit
            // layers: 'show:0', // Displayed layers
            // format: 'PNG', // Image format, default is PNG
            // transparent: true, // Whether the image is transparent, the default is true
          },
        });
      });
    </script>
</body>
</html>