SuperMap iClient JavaScript

https://iclient.supermap.io/en/web/
Admin
SuperMap iClient JavaScript is a cloud GIS web client development platform that integrates open...
Tokens:91,825
Snippets:828
Trust Score:6.4
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install @supermapgis/babel-plugin-import

Source: https://iclient.supermap.io/en/web/introduction/maplibreglDevelop.html

Install the Babel plugin for on-demand module loading.

```bash
npm install @supermapgis/babel-plugin-import -D
```

--------------------------------

### Install @supermapgis/iclient-classic

Source: https://iclient.supermap.io/en/web/download/download.html

Use this command to install the SuperMap iClient Classic package via npm.

```bash
npm install @supermapgis/iclient-classic
```

--------------------------------

### Install @supermapgis/iclient-maplibregl

Source: https://iclient.supermap.io/en/web/download/download.html

Use this command to install the SuperMap iClient for MapLibreGL package via npm.

```bash
npm install @supermapgis/iclient-maplibregl
```

--------------------------------

### CommonJS Module Example

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Demonstrates map creation using CommonJS modules, typically in a Node.js environment. Requires 'ol' and '@supermapgis/iclient-ol' to be installed via npm.

```javascript
var Map = require('ol/Map').default;
var View = require('ol/View').default;
var TileLayer  = require('ol/layer/Tile').default;
var control = require('ol/control');
var Logo = require('@supermapgis/iclient-ol').Logo;
var TileSuperMapRest = require('@supermapgis/iclient-ol').TileSuperMapRest;

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = new Map({
    target: 'map',
    controls: control.defaults({attributionOptions: {collapsed: false}})
        .extend([new Logo()]),
    view: new View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:4326'
    })
});
var layer = new TileLayer({
    source: new TileSuperMapRest({
        url: url,
        wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(layer);
```

--------------------------------

### CMD Module Example with SeaJS

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Illustrates map creation using CMD modules with the SeaJS library. Requires 'ol.js' and 'iclient-ol.js' to be placed in the correct directory.

```javascript
define(function(require, exports, module) {
    require('./ol.js');
    require('./iclient-ol.js');

    var url = 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World';
    var map = new ol.Map({
        target: 'map',
        controls: ol.control
            .defaults({ attributionOptions: { collapsed: false } })
            .extend([new ol.supermap.control.Logo()]),
        view: new ol.View({
            center: [0, 0],
            zoom: 2,
            projection: 'EPSG:4326'
        })
    });
    var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: url,
            wrapX: true
        }),
        projection: 'EPSG:4326'
    });
    map.addLayer(layer);
});
```

--------------------------------

### AMD Module Example with RequireJS

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Shows how to create a map using AMD modules with the RequireJS library. Assumes 'ol.js' and 'iclient-ol.js' are available in the specified path.

```javascript
require(['js/ol.js'], function(ol) {
    window.ol = ol;
    require(['js/iclient-ol.js'], function() {
        var url = 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World';
        var map = new ol.Map({
            target: 'map',
            controls: ol.control
                .defaults({ attributionOptions: { collapsed: false } })
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [0, 0],
                zoom: 2,
                projection: 'EPSG:4326'
            })
        });
        var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: url,
                wrapX: true
            }),
            projection: 'EPSG:4326'
        });
        map.addLayer(layer);
    });
});
```

--------------------------------

### Import CSS files for npm installation

Source: https://iclient.supermap.io/en/web/introduction/maplibreglDevelop.html

Import the necessary CSS files for MapLibreGL and SuperMap iClient for MapLibreGL when using npm.

```html
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css"/>

<link href="https://iclient.supermap.io/dist/maplibregl/iclient-maplibregl.min.css" rel="stylesheet"/>
```

--------------------------------

### Install @supermapgis/iclient-mapboxgl

Source: https://iclient.supermap.io/en/web/download/download.html

Use this command to install the SuperMap iClient for MapboxGL package via npm.

```bash
npm install @supermapgis/iclient-mapboxgl
```

--------------------------------

### Install @supermapgis/iclient-ol

Source: https://iclient.supermap.io/en/web/download/download.html

Use this command to install the SuperMap iClient for OpenLayers package via npm.

```bash
npm install @supermapgis/iclient-ol
```

--------------------------------

### Load and Render 3D Models with Three.js

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

This example demonstrates loading a GLTF model using THREE.GLTFLoader and integrating it into a MapboxGL map via a SuperMap iClient ThreeLayer. It includes scene setup, animation, and camera synchronization.

```javascript
function loaderModels() {
    var loader = new THREE.GLTFLoader();
    // Load gltf format data
    loader.load('./js/airplane/airplane.glb', function (gltf) {
        var scene = gltf.scene;
        scene.rotation.x = -Math.PI / 2;
        scene.rotation.y = Math.PI / 2;
        scene.scale.multiplyScalar(150);

        addThreeLayer(scene);
    });
}

function addThreeLayer(meshes) {
    threeLayer = new mapboxgl.supermap.ThreeLayer('three');
    threeLayer.on("initialized", render);
    threeLayer.addTo(map);

    function render() {
        var renderer = threeLayer.getThreeRenderer(),
            scene = threeLayer.getScene(),
            camera = threeLayer.getCamera();

        this.light = new THREE.PointLight(0xaaaaaa, 0.5);
        this.light.position.copy(camera.position);
        scene.add(this.light);
        scene.add(new THREE.AmbientLight(0xffffff));
        threeLayer.setPosition(meshes, position);
        // Set the flight height
        meshes.translateY(5000);
        scene.add(meshes);

        (function animate() {
            requestAnimationFrame(animate);
            meshes.position.y -= 60;
            var center = map.getCenter().toArray();
            center[1] += 0.00008;
            map.setCenter(center);
            renderer.render(scene, camera);
        })()
    }

    // Uniform illumination, synchronized to camera position
    threeLayer.on("render", function () {
        threeLayer.light.position.copy(threeLayer.renderer.camera.position);
    });
}
```

--------------------------------

### Install @supermapgis/iclient-leaflet

Source: https://iclient.supermap.io/en/web/download/download.html

Use this command to install the SuperMap iClient for Leaflet package via npm.

```bash
npm install @supermapgis/iclient-leaflet
```

--------------------------------

### Complete Vector Tile Visualization Example

Source: https://iclient.supermap.io/en/web/technical-topics.html

This is the full HTML code for visualizing vector tiles. It includes all necessary imports, the map container, and the JavaScript code to initialize and configure the map with vector tile data.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UGCV5(MVT)</title>
    <!-- import MapboxGL v1 file and JS file; import iclient-mapboxgl CSS file and JS file-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.css" rel="stylesheet" />
    <link href="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.js"></script>
    <script type="text/javascript" src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.js"></script>
  </head>
  <body>
    <!--  div for displaying map-->
    <div
      id="map"
      style="
        position: absolute;
        left: 0px;
        right: 0px;
        width: 1920px;
        height: 1080px;
      "
    ></div>
    <script type="text/javascript">
      var map = new mapboxgl.Map({
        container: 'map', // container id
        style:
          'http://localhost:8090/iserver/services/map-China/rest/maps/China_Light/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
        center: [104.35375913450572, 31.572093201149855], // starting position
        zoom: 0, // starting zoom
        attributionControl: false
      });
      map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    </script>
  </body>
</html>

```

--------------------------------

### Render Large Data Volumes with GraphicLayer

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

This example shows how to use GraphicLayer for rendering a large number of points efficiently on the web front-end. It requires importing PapaParse and demonstrates drawing 100,000 circles.

```javascript
                        // Create Greaphiclayer feature objects
var graphics = new ol.Graphic(new ol.geom.Point([-74.0095,40.6184]));
map.once('postrender', function () {
    var graphicLayer = new ol.layer.Image({
        source: new ol.source.Graphic({
            graphics: graphics,
            render: "canvas",
            map: map
        });
    });
    map.addLayer(graphicLayer);
});
```

--------------------------------

### Import CSS files for OpenLayers and iClient

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Link the necessary CSS files for OpenLayers and SuperMap iClient for OpenLayers in the <head> section of your HTML file when using npm or local installations.

```html
<link href='https://iclient.supermap.io/web/libs/openlayers/7.5.2/ol.min.css' rel='stylesheet' />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
                                

```

--------------------------------

### Set up Real-time Data Flow Source

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Instantiate a DataFlow source and configure event listeners for adding features and updating display elements.

```javascript
// Instantiate DataFlow object
var source = new ol.source.DataFlow({
    ws: urlDataFlow
});
// Binding add feature events for content assignment and coordinate position settings
source.on('addfeature', function (e) {
    var feature = e.feature;
    content.innerHTML = feature.get('time');
    overlay.setPosition(feature.getGeometry().getCoordinates());
});
var resultLayer = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({
        image: new ol.style.Circle({
        fill: fill,
        radius: 6
        }),
    fill: fill,
    })
});

```

--------------------------------

### Route Locator Line Operation

Source: https://iclient.supermap.io/en/web/introduction/maplibreglDevelop.html

Determines a line segment on a route based on start and end measures. Use this when you need to precisely locate a portion of a route, for example, when a segment is known to be blocked.

```javascript
var piontLists = [
    [116.2143386597, 39.8959419733, 0],
    [116.217501999125, 39.896670999665, 282.3879789906],
    [116.220156000875, 39.896820999605, 511.787745072744],
    [116.228716999, 39.8968419995966, 1253.201708792909],
    [116.25000000025, 39.8968619995886, 3103.167523778722],
    [116.27412300025, 39.8967689996258, 5201.062444476062],
    [116.310443000875, 39.8971139994878, 8360.617856315024],
    [116.344168500812, 39.8976724992644, 11294.738396325054]
];

var LineGeometryData = {
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": piontLists
    }
 };

var routeLine = LineGeometryData;
// Set Route Locator Line parameters
var routeLocatorParams_line = new maplibregl.supermap.RouteLocatorParameters({
    "sourceRoute": routeLine, // The route object
    "type": "LINE", // Type, point or line
    "startMeasure": 1123, // The from value of the line
    "endMeasure": 4489, // The to value of the line
    "isIgnoreGap": true // Whether to ignore distance between child objects
});
// Create spatial analysis service
var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
var routeLocatorService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// Send the request to the server and display the results on the client side after handling
routeLocatorService.routeLocate(routeLocatorParams_line, function (serviceResult) {
    // Get the results returned from the server
    var result = routeCalculateServiceResult.result;
});
```

--------------------------------

### Configure Best Path Analysis Parameters

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

Set up parameters for best path analysis, including result settings, network common parameters, and specific pathfinding options like nodes and impedance fields.

```javascript
var resultSetting = new mapboxgl.supermap.TransportationAnalystResultSetting({
    // Whether to include arc feature collections in the analysis results
    returnEdgeFeatures: true,
    // Whether the returned arc feature collection contains collection object information
    returnEdgeGeometry: true,
    // Whether the returned analysis result contains a set of arc IDs
    returnEdgeIDs: true,
    // Whether the returned analysis result always contains a node feature set
    returnNodeFeatures: true,
    // Whether the returned node feature collection contains the collection object information
    returnNodeGeometry: true,
    // Whether the returned analysis result contains the passed node ID set
    returnNodeIDs: true,
    // Whether the travel guide set is included in the returned analysis result
    returnPathGuides: true,
    // Whether the returned object contains a set of route objects
    returnRoutes: true
});
// Network analysis common parameters
var analystParameter = new mapboxgl.supermap.TransportationAnalystParameter({
    // The analysis result content
    resultSetting: resultSetting,
    // The name of the resistance field
    weightFieldName: "length"
});
// Best path analysis parameters
var findPathParams = new mapboxgl.supermap.FindPathParameters({
    // Whether to specify the node of the path analysis by the node ID
    isAnalyzeById: false,
    // An array of nodes or facilities which the best path analysis passes through
    nodes: [new mapboxgl.LngLat( 4000, -3000), new mapboxgl.LngLat(5500, -2500), new mapboxgl.LngLat(6900, -4000)],
    // Whether to perform the best path analysis according to the minimum number of arcs
    hasLeastEdgeCount: false,
    // Network analysis common parameters
    parameter: analystParameter
});
```

--------------------------------

### Calculate Route Measure with OpenLayers

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

This snippet demonstrates how to calculate the distance of a point from the start of a route. It first queries for route data using SQL, constructs a LineString geometry for the route, defines a specific point, and then uses the RouteCalculateMeasureParameters to get the measure.

```javascript
                                // Establish route through SQL query
var queryBySQLService = new ol.supermap.QueryService(baseUrl);
// Set SQL query parameters
var queryBySQLParams = new ol.supermap.QueryBySQLParameters({
    queryParams: [
        new ol.supermap.FilterParameter({
            name: "RouteDT_road@Changchun",
            attributeFilter: "RouteID=1690"
        })
    ]
});
// Construct SQL query server
queryBySQLService.queryBySQL(queryBySQLParams).then(function (SQLQueryServiceResult) {
    // Get the results of SQL query
    var queryBySQLResult = SQLQueryServiceResult.result.recordsets[0].features;
    // Extract the points that form the route to construct the parameter sourceRoute
    var pointsList = [];
    var routeObj = queryBySQLResult.features[0].geometry.coordinates[0];
    for (var i = 0; i < routeObj.length; i++) {
        pointsList.push([routeObj[i][0], routeObj[i][1],routeObj[i][2]])
    }
    var routeLine = new ol.geom.LineString([pointsList]);

    // Select a query point (the 8th point in the array) from the points that make up the route and add it to the map.
    var point = new ol.geom.Point([routeObj[7][0], routeObj[7][1]]);

    // Route Calculate Measure Services
    var routeCalculateMeasureService = new ol.supermap.SpatialAnalystService(serviceUrl);
    var routeCalculateMeasureParameters = new ol.supermap.RouteCalculateMeasureParameters({
        "sourceRoute": routeLine,   // Route Type
        "point": point,            // Required
        "tolerance": 10,
        "isIgnoreGap": false
    });
    // Send the request to the server and handle the results returned from the server
    routeCalculateMeasureService.routeCalculateMeasure(routeCalculateMeasureParameters).then(function (routeCalculateServiceResult) {
        // Get the results returned from the server
        var result = routeCalculateServiceResult.result;
    });
});
```

--------------------------------

### Configure Best Path Analysis Parameters

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Set up parameters for best path analysis, including result settings, common network analysis parameters, and specific path parameters like route sites.

```javascript
                    // Set network analysis result parameters
var resultSetting = new ol.supermap.TransportationAnalystResultSetting({
    returnEdgeFeatures: true,
    returnEdgeGeometry: true,
    returnEdgeIDs: true,
    returnNodeFeatures: true,
    returnNodeGeometry: true,
    returnNodeIDs: true,
    returnPathGuides: true,
    returnRoutes: true
});
var analystParameter = new ol.supermap.TransportationAnalystParameter({
    resultSetting: resultSetting,
    weightFieldName: "length"
});
var findPathParameter = new ol.supermap.FindPathParameters({
    isAnalyzeById: false,
    nodes: [new ol.geom.Point([4000, -3000]), new ol.geom.Point([5500, -2500]), new ol.geom.Point([6900, -4000])],
    hasLeastEdgeCount: false,
    parameter: analystParameter
});
                

```

--------------------------------

### ES6 Import and Map Initialization with TileSuperMapRest

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Demonstrates how to import necessary modules using ES6 syntax and initialize a map with a TileSuperMapRest layer. Ensure you have configured Babel for module imports.

```javascript
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { TileSuperMapRest } from '@supermapgis/iclient-ol';

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = new Map({
    target: 'map',
    view: new View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:4326'
    })
});
var layer = new TileLayer({
    source: new TileSuperMapRest({
        url: url,
        wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(layer);
                                

```

--------------------------------

### Initialize Vector Clip Parameters

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

Set up parameters for vector clip analysis, specifying the source dataset, clip dataset, and the clip mode (e.g., inside clip).

```javascript
var vectorClipJobsParam = new mapboxgl.supermap.VectorClipJobsParameter({
    datasetName: 'ProcessingData_newyork_taxi_2013-01_14k', // Source dataset
    datasetOverlay: 'ProcessingData_processing_singleRegion_R', // Clip dataset
    mode:mapboxgl.supermap.ClipAnalystMode.CLIP // Clip mode
});
```

--------------------------------

### Install Babel Plugin for iClient

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Install the @supermapgis/babel-plugin-import package as a development dependency. This plugin is used for optimizing module imports in ES6 development.

```bash
npm install @supermapgis/babel-plugin-import -D
                              

```

--------------------------------

### Configure Kernel Density Analysis Parameters

Source: https://iclient.supermap.io/en/web/introduction/maplibreglDevelop.html

Set up the parameters for density analysis, including dataset, resolution, analysis method, mesh type, fields, query range, radius, and units.

```javascript
                        // Density analysis parameter
var kernelDensityJobParam = new maplibregl.supermap.KernelDensityJobParameter({
    datasetName: "newyork_taxi_2013_01_14k_csv_newyork_taxi_2013-01_14k",
    // Mesh size. For a quadrilateral mesh, it's the side length of the mesh. For a hexagonal mesh, it's the distance from the vertices of the hexagon to the center point
    resolution: 80,
    // Analysis method. 0 represents simple dot density analysis, and 1 represents kernel density analysis
    method:0,
    // 0 represents quadrilateral mesh, and 1 represents hexagonal mesh
    meshType:0,
    // Specify the set of field index column numbers where the weight value of the point to be analyzed is located, and the field index starts from 0
    fields: col7,col8,
    query: [-74.050,40.650,-73.850,40.850], // Range
    radius: 300,
    meshSizeUnit: maplibregl.supermap.AnalystSizeUnit.METER,
    radiusUnit: maplibregl.supermap.AnalystSizeUnit.METER,
    areaUnit: maplibregl.supermap.AnalystAreaUnit.SQUAREMILE,
});
                    
```

--------------------------------

### Calculate Measure on a Route

Source: https://iclient.supermap.io/en/web/introduction/maplibreglDevelop.html

Calculates the M-value (distance from the start) of a point on a given route. Useful for determining the location of a point along a road network.

```javascript
      // In order to construct routeLine of sourceRoute
var piontLists = [
    [116.2143386597, 39.8959419733, 0],
    [116.217501999125, 39.896670999665, 282.3879789906],
    [116.220156000875, 39.896820999605, 509.9746364534],
    [116.228716999, 39.8968419995966, 1242.1340098965],
    [116.25000000025, 39.8968619995886, 3062.3045713007],
    [116.27412300025, 39.8967689996258, 5125.3836697258],
    [116.310443000875, 39.8971139994878, 8231.7823666408],
    [116.344168500812, 39.8976724992644, 11116.7053546891]
];

var LineGeometryData = {
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": piontLists
    }
}
var routeObj = LineGeometryData.geometry.coordinates;
var routeLine = LineGeometryData;

var point = [routeObj[4][0], routeObj[4][1]];
var pointGeometryData = {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": point
    }
};
// Create routeCalculateMeasureService
var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
var routeCalculateMeasureService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// Set parameters
var routeCalculateMeasureParameters = new maplibregl.supermap.RouteCalculateMeasureParameters({
        "sourceRoute": routeLine, // Route Type
        "point": pointGeometryData,// Query point
        "tolerance": 0.0001,
        "isIgnoreGap": false
});
// Send the request to the server and handle the results returned from the server
routeCalculateMeasureService.routeCalculateMeasure(routeCalculateMeasureParameters, function (routeCalculateServiceResult) {
    // Get the results returned from the server
    var result = routeCalculateServiceResult.result;
});
```

--------------------------------

### AMD Import All Modules and Map Initialization

Source: https://iclient.supermap.io/en/web/introduction/maplibreglDevelop.html

Uses RequireJS to load MapLibre GL and SuperMap iClient modules. Ensure maplibre-gl.js and iclient-maplibregl.js are correctly placed and referenced.

```javascript
require(['js/maplibre-gl.js'], function(maplibregl) {
    window.maplibregl = maplibregl;
    require(['js/iclient-maplibregl'], function() {
      var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
      var map = new maplibregl.Map({
          container: 'map',
          style: 'https://iserver.supermap.io/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
          center: [0, 0],
          zoom: 2
      });

      map.on('load', function() {
        var param = new maplibregl.supermap.QueryByBoundsParameters(...);
        new maplibregl.supermap.QueryService(url).queryByBounds(param).then(function (serviceResult) {
            map.addLayer(...);
        });
    });
});
```

--------------------------------

### Locate Point on a Route by Measure

Source: https://iclient.supermap.io/en/web/introduction/maplibreglDevelop.html

Determines the precise coordinates of a point on a route given its M-value (distance from the start). This is the inverse operation of Route Calculate Measure.

```javascript
     // In order to construct routeLine of sourceRoute
var piontLists = [
    [116.2143386597, 39.8959419733, 0],
    [116.217501999125, 39.896670999665, 282.3879789906],
    [116.220156000875, 39.896820999605, 511.787745072744],
    [116.228716999, 39.8968419995966, 1253.201708792909],
    [116.25000000025, 39.8968619995886, 3103.167523778722],
    [116.27412300025, 39.8967689996258, 5201.062444476062],
    [116.310443000875, 39.8971139994878, 8360.617856315024],
    [116.344168500812, 39.8976724992644, 11294.738396325054]
];

var LineGeometryData = {
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": piontLists
    }
};

var routeLine = LineGeometryData;

// Construct Route Locator Point service
var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
var routeLocatorService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// Set Route Locator Point parameters
var routeLocatorParams_point = new maplibregl.supermap.RouteLocatorParameters({
    "sourceRoute": routeLine, // The route object
    "type": "POINT", // Type, point or line
    "measure": 6753, // M value
    "offset": 0, // Offset
    "isIgnoreGap": true //  Whether to ignore distance between child object
});
// Send the request to the server and display the results on the client side after handling
routeLocatorService.routeLocate(routeLocatorParams_point, function (serviceResult) {
    // Get the results returned from the server
    var result = routeCalculateServiceResult.result;
});
```

--------------------------------

### AMD Import All Modules with RequireJS

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

Demonstrates loading Mapbox GL JS and SuperMap iClient for Mapbox GL using AMD's `require` function. Ensure mapbox-gl.js and iclient-mapboxgl.js are correctly placed and referenced.

```javascript
require(['js/mapbox-gl.js'], function(mapboxgl) {
    window.mapboxgl = mapboxgl;
    require(['js/iclient-mapboxgl.js'], function() {
        var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'https://iserver.supermap.io/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
            center: [0, 0],
            zoom: 2
        });

      map.on('load', function() {
        var param = new mapboxgl.supermap.QueryByBoundsParameters(...);
        new mapboxgl.supermap.QueryService(url).queryByBounds(param).then(function (serviceResult) {
            map.addLayer(...);
        });
    });
});
```

--------------------------------

### Configure Topology Validator Parameters

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Set up parameters for topology validator analysis, including dataset names, the topology rule, and tolerance.

```javascript
                            // Topology validator analysis parameters
var topologyValidatorJobsParameter = new ol.supermap.TopologyValidatorJobsParameter({
    datasetName: 'samples_processing_newyorkZone_R',
    datasetTopology: 'samples_processing_newyorkResidential_R',// The name of the dataset where the validate object is located
    rule: ol.supermap.TopologyValidatorRule.REGIONCOVEREDBYREGION,// Topology rule
    tolerance: 0.000001// Tolerance
});
                        
```

--------------------------------

### Configure Buffer Analysis Parameters

Source: https://iclient.supermap.io/en/web/introduction/maplibreglDevelop.html

Set up parameters for buffer analysis, including dataset, filter conditions, and buffer settings like end type, distance, and semicircle segments.

```javascript
     // Set parameters for buffer analysis
var dsBufferAnalystParams = new maplibregl.supermap.DatasetBufferAnalystParameters({
    // The dataset name in the datasource used for buffer analysis
    dataset: "RoadLine2@Changchun",
    // Set the filter condition for feature set in the dataset
    filterQueryParameter: new maplibregl.supermap.FilterParameter({
        // Attribute filter condition
        attributeFilter: "NAME='Tuanjie Road'"
    }),
    // Set buffer analysis common parameters
    bufferSetting: new maplibregl.supermap.BufferSetting({
        // Set end type, including FLAT and ROUND
        endType: maplibregl.supermap.BufferEndType.ROUND,
        // Left radius
        leftDistance: {value: 10},
        // Right radius
        rightDistance: {value: 10},
        // Set the number of line segments for round buffer
        semicircleLineSegment: 10
    })
 });
```

--------------------------------

### Calculate Measure along a Route

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

Calculates the M-value (distance from the start) of a point on a given route. Useful for determining the location of a point relative to a route's origin.

```javascript
      // In order to construct routeLine  of sourceRoute
var piontLists = [
    [116.2143386597, 39.8959419733, 0],
    [116.217501999125, 39.896670999665, 282.3879789906],
    [116.220156000875, 39.896820999605, 509.9746364534],
    [116.228716999, 39.8968419995966, 1242.1340098965],
    [116.25000000025, 39.8968619995886, 3062.3045713007],
    [116.27412300025, 39.8967689996258, 5125.3836697258],
    [116.310443000875, 39.8971139994878, 8231.7823666408],
    [116.344168500812, 39.8976724992644, 11116.7053546891]
];

var LineGeometryData = {
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": piontLists
    }

var routeObj = LineGeometryData.geometry.coordinates;
var routeLine = LineGeometryData;

var point = [routeObj[4][0], routeObj[4][1]];
var pointGeometryData = {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": point
    }
};
// Create routeCalculateMeasureService
    var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
    var routeCalculateMeasureService =new mapboxgl.supermap.SpatialAnalystService(serviceUrl);
    // Set parameters
    var routeCalculateMeasureParameters = new mapboxgl.supermap.RouteCalculateMeasureParameters({
        "sourceRoute": routeLine, // Route Type
        "point": pointGeometryData,// Query point
        "tolerance": 0.0001,
        "isIgnoreGap": false
    });
    // Send the request to the server and handle the results returned from the server
    routeCalculateMeasureService.routeCalculateMeasure(routeCalculateMeasureParameters).then(function (routeCalculateServiceResult) {
        // Get the results returned from the server
        var result = routeCalculateServiceResult.result;
    });
});
```

--------------------------------

### Configure Kernel Density Analysis Parameters

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

Set up the parameters for a kernel density analysis job, including dataset, resolution, analysis method, mesh type, fields, query range, radius, and units.

```javascript
                        // Density analysis parameter
                        var kernelDensityJobParam = new mapboxgl.supermap.KernelDensityJobParameter({
                            datasetName: "newyork_taxi_2013_01_14k_csv_newyork_taxi_2013-01_14k",
                            // Mesh size. For a quadrilateral mesh, it's the side length of the mesh. For a hexagonal mesh, it's the distance from the vertices of the hexagon to the center point
                            resolution: 80,
                            // Analysis method. 0 represents simple dot density analysis, and 1 represents kernel density analysis
                            method:0,
                            // 0 represents quadrilateral mesh, and 1 represents hexagonal mesh
                            meshType:0,
                            // Specify the set of field index column numbers where the weight value of the point to be analyzed is located, and the field index starts from 0
                            fields: col7,col8,
                            query: [-74.050,40.650,-73.850,40.850], // Range
                            radius: 300,
                            meshSizeUnit: mapboxgl.supermap.AnalystSizeUnit.METER,
                            radiusUnit: mapboxgl.supermap.AnalystSizeUnit.METER,
                            areaUnit: mapboxgl.supermap.AnalystAreaUnit.SQUAREMILE,
                        });
                    
```

--------------------------------

### Import OpenLayers CSS and JS

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Include the OpenLayers CSS and JavaScript files in the <head> of your HTML document using script tags. This is a basic setup for using OpenLayers.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://iclient.supermap.io/web/libs/openlayers/7.5.2/ol.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://iclient.supermap.io/web/libs/openlayers/7.5.2/ol.js"></script>
</head>
</html>
                            

```

--------------------------------

### Initialize ECharts Layer with OpenLayers

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

This snippet demonstrates how to initialize an ECharts layer using the ol3Echarts plugin for OpenLayers. It shows the basic setup for adding the ECharts layer to the map.

```javascript
                    var echartslayer = new ol3Echarts();
echartslayer.appendTo(map);
```

--------------------------------

### Query Driving Route Details

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Retrieves detailed information for a specific driving route from the transfer results. This is used after obtaining a transfer plan to get the exact path details.

```javascript
                                    // Click on a plan on the map and get a specific route to construct the transLines parameter
// Get details of the ride route
// Set the query parameters
var params = new ol.supermap.TransferPathParameters({
    points: paths["points"],
    transferLines: transLines
});
// Send request to the server and get the data
new ol.supermap.TrafficTransferAnalystService(serviceUrl)
    .analysisTransferPath(params).then(function (serviceResult) {
        // Get the details of the returned route
        var transGuide = serviceResult.result;
    });See full example code »
                                
```

--------------------------------

### Initialize WebSymbol with Default Resources Path

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

This snippet shows how to initialize the WebSymbol component when the resources folder is in the default location relative to the entry HTML file.

```javascript
new mapboxgl.supermap.WebSymbol().init({basePath: "./resources/symbols"});
```

--------------------------------

### Initialize Summary Attributes Parameters

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

Configure parameters for summary attributes analysis, including the dataset, grouping field, attribute field, and desired statistic modes.

```javascript
// Summary attributes analysis parameters
var summaryAttributesJobsParameter = new mapboxgl.supermap.SummaryAttributesJobsParameter({
    datasetName: 'sample_processing_newyorkZone_R',
    groupField: 'borough',
    attributeField: 'LocationID',
    statisticModes: 'sum'
});
```

--------------------------------

### ECharts Changchun Bus Route Visualization

Source: https://iclient.supermap.io/en/web/introduction/maplibreglDevelop.html

Visualize bus route data using ECharts and its GLMap extension. This example requires loading external data and setting up ECharts options.

```javascript
var uploadedDataURL = "../data/changchunBus.json";
$.get(uploadedDataURL, function (data) {
    option = {
        animation: false,
        GLMap: {
            roam: true
        },
        coordinateSystem: 'GLMap',
        geo: {
            map: 'GLMap',
        },

        series: [{
            type: 'lines',
            polyline: true,
            data: data,
            silent: true,
            lineStyle: {
                normal: {
                    opacity: 0.2,
                    width: 1
                }
            },
            progressiveThreshold: 500,
            progressive: 100,
        }, {

            type: 'lines',
            coordinateSystem: 'GLMap',
            polyline: true,
            data: data,
            lineStyle: {
                normal: {
                    width: 0.2
                }
            },
            effect: {
                constantSpeed: 40,
                show: true,
                trailLength: 0.02,
                symbolSize: 2
            },
        }]
    };
    var echartslayer = new EchartsLayer(map);
    echartslayer.chart.setOption(option);
});
```

--------------------------------

### Configure Transportation Analyst Result Settings

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

Sets up the configuration for the results of a transportation analysis, specifying which geometric and attribute information should be returned for edges and nodes, as well as path guides and routes.

```javascript
var resultSetting = new mapboxgl.supermap.TransportationAnalystResultSetting({
    // Whether to include arc feature collections in the analysis results
    returnEdgeFeatures: true,
    // Whether the returned arc feature collection contains collection object information
    returnEdgeGeometry: true,
    // Whether the returned result contains the set of arc IDs
    returnEdgeIDs: true,
    // Whether the returned analysis result always contains a node feature set
    returnNodeFeatures: true,
    // Whether the returned node feature collection contains the collection object information
    returnNodeGeometry: true,
    // Whether the returned analysis result contains the passed node ID set
    returnNodeIDs: true,
    // Whether the travel guide set is included in the returned analysis result
    returnPathGuides: true,
    // Whether the returned object contains a set of route objects
    returnRoutes: true
 });
```

--------------------------------

### Configure Location-Allocation Parameters

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

Set up supply centers and define parameters for location-allocation analysis, such as expected supply center count, demand fields, and weight fields.

```javascript
                            // Set up a resource supply center for facilities
var supplyCenterType_FIXEDCENTER = mapboxgl.supermap.SupplyCenterType.FIXEDCENTER;
var supplyCenterType_NULL = mapboxgl.supermap.SupplyCenterType.NULL;
var supplyCenterType_OPTIONALCENTER = mapboxgl.supermap.SupplyCenterType.OPTIONALCENTER;
// Taking one center point as an example
var supplyCenters = [new mapboxgl.supermap.SupplyCenter({
    maxWeight: 500,             // The maximum cost of the resource supply center, required
    nodeID: 139,                // The node ID number of the resource supply center point, required
    resourceValue: 100,         // The maximum amount of service or quantity of goods that the resource supply center can provide, required
    type: supplyCenterType_OPTIONALCENTER      // The types of resource centers include fixed centers and optional centers
})];
// Set the location-allocation analysis parameters
findLocationParameter = new mapboxgl.supermap.FindLocationParameters({
    // Number of resource supply centers expected to be used for final facility siting, required
    expectedSupplyCenterCount: 8,
    // Whether to allocate resources from the central point. Default is false
    isFromCenter: false,
    nodeDemandField: "Demand",
    // Turn weight field name
    turnWeightField: "TurnCost",
    // The name of the resistance field, required
    weightName: "length",
    // Resource supply center collection, required
    supplyCenters: supplyCenters
});
                        
```

--------------------------------

### Deck.gl Hexagon Layer Display

Source: https://iclient.supermap.io/en/web/introduction/maplibreglDevelop.html

Display data using a Deck.gl hexagon layer with MapLibre GL JS. This example requires loading GeoJSON data and configuring the hexagon layer properties.

```javascript
$.get('../data/deck.gl/sf-bike-parking.json', function (features) {
    addLayer(features);
});
function addLayer(features) {
    deckglLayer = new maplibregl.supermap.DeckglLayer("hexagon-layer", {
        data: features,
        props: {
            extruded: true, // Whether to stretch the feature, the default is false;
            radius: 200, // Hexagonal radius value, the default is 1000
            elevationScale: 4, // Elevation multiplier
            coverage: 0.8 // The hexagonal radius multiplier, between 0 and 1.
            },
        callback: {
            getPosition: d => d.COORDINATES,
        }
    });
    map.addLayer(deckglLayer);
}
```

--------------------------------

### Configure Kernel Density Analysis Parameters

Source: https://iclient.supermap.io/en/web/introduction/openlayersDevelop.html

Set up the parameters for a density analysis job, specifying dataset, analysis method, mesh type, size, fields, query range, radius, and units.

```javascript
var kernelDensityJobParam = new ol.supermap.KernelDensityJobParameter({
    datasetName: "newyork_taxi_2013_01_14k_csv_newyork_taxi_2013-01_14k",
    resolution: 80,
    method:0,
    meshType:0,
    fields: col7,col8,
    query: [-74.050,40.650,-73.850,40.850],
    radius: 300,
    meshSizeUnit: ol.supermap.AnalystSizeUnit.METER,
    radiusUnit: ol.supermap.AnalystSizeUnit.METER,
    areaUnit: ol.supermap.AnalystAreaUnit.SQUAREMILE,
});
```

--------------------------------

### ES6 Import All Modules and Map Initialization

Source: https://iclient.supermap.io/en/web/introduction/maplibreglDevelop.html

Import all modules from '@supermapgis/iclient-maplibregl' using ES6 syntax. This approach loads all functionalities at once.

```javascript
import maplibregl from 'maplibre-gl';
import '@supermapgis/iclient-maplibregl';

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = new maplibregl.Map({
    container: 'map',
    style: 'https://iserver.supermap.io/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
    center: [0, 0],
    zoom: 2
});

map.on('load', function () {
    var param = new maplibregl.supermap.QueryByBoundsParameters(...);
    new maplibregl.supermap.QueryService(url).queryByBounds(param).then(function (serviceResult) {
        map.addLayer(...);
    });
});
```

--------------------------------

### Set Minimum Distance Calculation Parameters

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

Define parameters for minimum distance calculation, including input geometries, reference dataset, and distance limitations. This setup is crucial for finding the closest features between datasets.

```javascript
// The point need to find closest geometric object
pointGeometryData = {
"type": "Feature",
"geometry": {
    "type": "Point",
    "coordinates": [2000, -3500]
}
};
// Min distance calculation parameters
var minDistanceAnalystParameters = new mapboxgl.supermap.GeometryMinDistanceAnalystParameters({
inputGeometries: [pointGeometryData],
referenceDatasetName: "Park@Changchun",
createResultDataset: false,
minDistance: 0,
maxDistance: -1 // -1 indicates that there is no maximum query distance limitation
})
```

--------------------------------

### Initialize ThreeLayer

Source: https://iclient.supermap.io/en/web/introduction/mapboxglDevelop.html

This snippet shows how to initialize a ThreeLayer for 3D visualizations within MapboxGL using SuperMap iClient.

```javascript
mapboxgl.supermap.ThreeLayer('three')
```
Tokens:
Raw