SuperMap iClient for MapboxGL loads REST map services through resources in different formats

SuperMap iClient for MapboxGL supports loading REST map services through resources in different formats, including: iServer zxyTileImage resource template, iServer image resource template, iServer tileImage resource template, and iServer tileFeature resource template. Among them: iServer zxyTileImage resource template, iServer image resource template, iServer tileImage resource template is for raster tile rendering; Server tileFeature resource template is for vector tile rendering. Next, let’s take a look at how to load resources in different formats!

1. iServer zxyTileImage resource template

The zxyTileImage resource represents the tiles of the map divided into ZXY specifications. For details, please refer to: ZXY standard map tiles . It should be noted that ZXY standard map tiles only support fixed scale sets under the Web Mercator coordinate system (i.e. PCS_WGS_1984_WORLD_MERCATOR, EPSG Code: 3857), so REST map services published outside of this coordinate system and scale tiles cannot use this resource. picture.

1.1 tiles parameter filling format

tiles: [‘http://localhost:8091/iserver/services/map-world/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}’],

1.2 Sample code

  <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript"  src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

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

  <body>
    <div id="map"></div>
    <script type="text/javascript">
    var map = new mapboxgl.Map({
       container: 'map', // container id
       style: {
           version: 8,
           sources: {
               'raster-tiles': {
                   type: 'raster',
                   tileSize: 256,
                   tiles: ['http://localhost:8091/iserver/services/map-world/rest/maps/World/zxyTileImage.png?z={z}&x={x}&y={y}'],
               }
           },

           layers: [
               {
                   id: 'simple-tiles',
                   type: 'raster',
                   source: 'raster-tiles',
                   minzoom: 0,
                   maxzoom: 22
               }
           ]
       },
       center: [0, 0],
       zoom: 2
   });
    </script>
  </body>
</html>

Note: zxyTileImage resource does not need to carry rasterSource: 'iserver' parameter when drawing.

1.3 Loading effect

Insert image description here

2. iServer image resource template

The image resource is a sub-resource of the map resource and is used to obtain a picture of the map resource.

2.1 tiles parameter filling format

tiles: [‘http://localhost:8091/iserver/services/map-world/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}’],

2.2 Sample code

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

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

  <body>
    <div id="map"></div>
    <script type="text/javascript">
       var map = new mapboxgl.Map({
           container: 'map', // container id
           style: {
               version: 8,
               sources: {
                   'raster-tiles': {
                       type: 'raster',
                       tileSize: 256,
                        tiles: ['http://localhost:8091/iserver/services/map-world/rest/maps/World/image.png?viewBounds={viewBounds}&width={width}&height={height}'],
                       //rasterSource: 'iserver'
                   }
               },

               layers: [
                   {
                       id: 'simple-tiles',
                       type: 'raster',
                       source: 'raster-tiles',
                       minzoom: 0,
                       maxzoom: 22
                   }
               ]
           },
           crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326  或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
           center: [0, 0],
           zoom: 0
       });
    </script>
  </body>
</html>

Note: 1. There is no need to carry the rasterSource: 'iserver' parameter when rendering image resources.
2. There is an escaping problem when loading the sample service on the official website. If you need to use the sample service, please use the local sample service.

2.3 Loading effect

Insert image description here

3. iServer tileimage resource template

By executing a GET request for the tileImage resource, you can obtain the corresponding grid image in the map ({mapName}). You can include some parameters for customizing the output image in the URI, such as setting the layer of the image, the image size, and the grid row and column number. , whether the map is transparent, the target projection of dynamic projection, etc. These parameters must be included in the URI and cannot be placed in the request body. The grid division rules are as follows: When the map is displayed in full width, the picture starts from the upper left corner and is cut downward and to the right. The default size of the cut is 256*256 pixels. The grid row number in the upper left corner is 0 and the column number is 0, increasing downward and to the right. Among them, parameters such as the size of the grid and the scale of the map can be specified at the time of request.

3.1 tiles parameter filling format

tiles: [‘http://localhost:8091/iserver/services/map-world/rest/maps/World/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={“x”:-180,“y”:90}’],

3.2 Sample code

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

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

  <body>
    <div id="map"></div>
    <script type="text/javascript">
       var map = new mapboxgl.Map({
           container: 'map', // container id
           style: {
               version: 8,
               sources: {
                   'raster-tiles': {
                       type: 'raster',
                       tileSize: 256,
                       tiles: ['http://localhost:8091/iserver/services/map-world/rest/maps/World/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&origin={"x":-180,"y":90}'],
                       //rasterSource: 'iserver'
                   }
               },

               layers: [
                   {
                       id: 'simple-tiles',
                       type: 'raster',
                       source: 'raster-tiles',
                       minzoom: 0,
                       maxzoom: 22
                   }
               ]
           },
           crs: 'EPSG:4326', // 或者 mapboxgl.CRS.EPSG4326  或者 new mapboxgl.CRS('EPSG:4326',[-180,-90,180,90]);
           center: [0, 0],
           zoom: 0
       });
    </script>
  </body>
</html>

Note: 1. The tileImage resource does not need to carry the rasterSource: 'iserver' parameter when drawing.
2. There is an escaping problem when loading the sample service on the official website. If you need to use the sample service, please use the local sample service.

3.3 Loading effect

Insert image description here

4. iServer tileFeature resource template

By executing a request on the tileFeature resource, you can obtain the tile features in the vector layer {layerName} in the map. The tile elements obtained by the client can be rendered using customized styles and can be queried and interacted with.

4.1style parameter filling format

style: 'http://localhost:8091/iserver/services/map-china400/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
(Note: tileFeature is a vector tile and cannot load raster Data layer, the World map contains a raster layer. Using tileFeature to export the map will lose the raster data layer, so this example uses the China service)

4.2 Sample code

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_tiledMapLayer_4326WGS84"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <script type="text/javascript"  src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

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

  <body>
    <div id="map"></div>
    <script type="text/javascript">
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'http://localhost:8091/iserver/services/map-china400/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
           center: [120.143, 30.236],
           zoom: 3
    });
    </script>
  </body>
</html>