SuperMap iClient for MapLibreGL

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

                                {
  "plugins": [
    ["@supermapgis/babel-plugin-import",
        {
        "libraryName": "@supermapgis/iclient-maplibregl"
        }
    ]
  ]
}
                              

 import maplibregl from 'maplibre-gl';
import {QueryByBoundsParameters, QueryService} from '@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 QueryByBoundsParameters(...);
  new QueryService(url).queryByBounds(param).then(function (serviceResult) {
      map.addLayer(...);
  });
});
                            

     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(...);
    });
});
                            

     var maplibregl = require('maplibregl');
var QueryByBoundsParameters = require('@supermapgis/iclient-maplibregl').QueryByBoundsParameters;
var QueryService = require('@supermapgis/iclient-maplibregl').QueryService;

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 QueryByBoundsParameters(...);
  new QueryService(url).queryByBounds(param).then(function (serviceResult) {
      map.addLayer(...);
  });
});
                            

     var maplibregl = require('maplibregl') ;
require('@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(...);
  });
});
                            

                                            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 maplibre.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(...);
        });
    });
});
                            

                                                define(function(require, exports, module) {
    require('./maplibre-gl.js');
    require('./iclient-maplibregl.js');

    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(...);
      });
    });
});
                            

 module: {
    rules: [{
        // Convert ES6 syntax to ES5 using babel-loader
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }]
}
                            

                                                module: {
    rules: [{
        // Convert ES6 syntax to ES5 using babel-loader
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }]
}
                            

                         <!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <link href="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css" rel="stylesheet">
        <script type="text/javascript" src="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js"></script>
        <script type="text/javascript" src="https://iclient.supermap.io/dist/maplibregl/iclient-maplibregl.js"></script>
    </head>
    <body>
        // The div displayed by map
        <div id="map" style="position:absolute;left:0px;right:0px;width:800px;height:500px;"></div>
    </body>
</html>
                        

  var map = new maplibregl.Map({
    container: 'map',
    style: {
        "version": 8,
        "sources": {
            "raster-tiles": {
                "attribution": attribution,
                "type": "raster",
                "tiles": ['https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "simple-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 22
        }]
    },
    center: [120.143, 30.236], // Starting position
    zoom: 3 // Starting zoom
});See full example code »
                        

 var map = new maplibregl.Map({
    container: 'map', // Container id
    style: 'https://iserver.supermap.io/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
    center: [120.143, 30.236], // Starting position
    zoom: 0,
    attributionControl: false
});See full example code »
                        

        // Instantiate feature editing service
var url="https://iserver.supermap.io/iserver/services/data-world/rest/data";
var xmax = 120, xmin = 100, ymax = 50, ymin = 20;
var addPoint = [Math.floor(Math.random() * (xmax - xmin + 1) + xmin), Math.floor(Math.random() * (ymax - ymin + 1) + ymin)];
var pointFeature = {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": addPoint
    },
    "properties": {POP: 1, CAPITAL: 'test'}
};
var featureService = new maplibregl.supermap.FeatureService(url);
// Set the parameters of feature editing field
var addFeatureParams = new maplibregl.supermap.EditFeaturesParameters({
    dataSourceName: "World",
    dataSetName: "Capitals",
    features: pointFeature,
    editType: "add",
    returnContent: true
});
// Use the feature editing service to send requests to the server and get data
featureService.editFeatures(addFeatureParams, function (serviceResult) {
    // Get returned data
    var result = serviceResult.result;
});See full example code »
             

                            var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
// Get the thematic map service, url is the map access service
var themeService = new maplibregl.supermap.ThemeService(url);
// Instantiate a dot density thematic map object and make corresponding settings for it
var themeDotDensity = new maplibregl.supermap.ThemeDotDensity({
    dotExpression:"Pop_1994",
    value: 5000000,
    style: new maplibregl.supermap.ServerStyle({
        markerSize: 3,
        markerSymbolID: 12
    });
});
// Set the thematic map parameter class, which stores the parameters needed to create the theme, including the data source, dataset name, and thematic map object
themeParameters =new maplibregl.supermap.ThemeParameters({
    themes: [themeDotDensity],
    // To build thematic map dataset array, required
    datasetNames: ["Countries"],
    // To build data source array that the thematic map dataset located at, required
    dataSourceNames: ["World"] 
});
// Submit service request, pass the service querying parameters, get the thematic map information and process according to user needs
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // Get the results returned by the server
    var result = serviceResult.result;
});See full example code »
                 

     var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
// Get the thematic map service, url is the map access service
var themeService = new maplibregl.supermap.ThemeService(url);
// The items of unique thematic map
var themeUniqueIteme1 = new maplibregl.supermap.ThemeUniqueItem({
        unique: "黑龙江省",
        style: style1
    }),
    themeUniqueIteme2 = new maplibregl.supermap.ThemeUniqueItem({
        unique: "湖北省",
        style: style2
    })
var themeUniqueItemes = [
    themeUniqueIteme1, themeUniqueIteme2
];
// Instantiate a object of unique thematic map and set parameters
var themeUnique = new maplibregl.supermap.ThemeUnique({
    // The field or expression of unique thematic map
    uniqueExpression: "Name",
    // Subitem array
    items: themeUniqueItemes,
    // The default style of objects that is not involved in the unique thematic map
    defaultStyle: style1
});
// Set the thematic map parameter class, which stores the parameters needed to create the theme, including the data source, dataset name, and thematic map object
var themeParameters = new maplibregl.supermap.ThemeParameters({
    // To build thematic map dataset array, required
    datasetNames: ["China_Province_pg"],
    // To build data source array that the thematic map dataset located at, required
    dataSourceNames: ["China"],
    themes: [themeUnique]
});
// Submit service request, pass the service querying parameters, get the thematic map information and process according to user needs
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // Get the results returned by the server
    var result = serviceResult.result;
});See full example code »
                        

     var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
// Get the thematic map service, url is the map access service
var themeService = new maplibregl.supermap.ThemeService(url);
// The items of range thematic map
themeRangeItem1 = new maplibregl.supermap.ThemeRangeItem({
    start: 0,
    end: 500000000000,
    style: new maplibregl.supermap.ServerStyle({
        fillForeColor: new maplibregl.supermap.ServerColor(211, 255, 250),
        lineColor: new maplibregl.supermap.ServerColor(179, 209, 193),
        lineWidth: 0.1
    })
});
themeRangeItem2 = new maplibregl.supermap.ThemeRangeItem({
    start: 500000000000,
    end: 1000000000000,
    style: new maplibregl.supermap.ServerStyle({
        fillForeColor: new maplibregl.supermap.ServerColor(178, 218, 199),
        lineColor: new maplibregl.supermap.ServerColor(179, 209, 193),
        lineWidth: 0.1
    })
});
// Instantiate a object of range thematic map and set parameters
themeRange = new maplibregl.supermap.ThemeRange({
    // The field or expression of range thematic map
    rangeExpression: "SMAREA",
    // Range mode
    rangeMode: maplibregl.supermap.RangeMode.EQUALINTERVAL,
    // Subitem array
    items: [themeRangeItem1, themeRangeItem2]
});
// Set the thematic map parameter class, which stores the parameters needed to create the theme, including the data source, dataset name, and thematic map object
var themeParameters = new maplibregl.supermap.ThemeParameters({
    // To build thematic map dataset array, required
    datasetNames: ["China_Province_pg"],
    // To build data source array that the thematic map dataset located at, required
    dataSourceNames: ["China"],
    // Join items from external tables of the thematic map
    joinItems: null,
    themes: [themeRange]
});
// Submit service request, pass the service querying parameters, get the thematic map information and process according to user needs
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // Get the results returned by the server
    var result = serviceResult.result;
});See full example code »
 

     var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
// Get the thematic map service, url is the map access service
var themeService = new maplibregl.supermap.ThemeService(url);
// Instantiate a object of unique thematic map and set parameters
var themeGraduatedSymbol = new maplibregl.supermap.ThemeGraduatedSymbol({
    // The field or expression of thematic map
    expression: "SMAREA",
    baseValue: 3000000000000,
    graduatedMode: maplibregl.supermap.GraduatedMode.CONSTANT,
    // The style of positive, negative values and zero
    style: new maplibregl.supermap.ThemeGraduatedSymbolStyle({
        positiveStyle: new maplibregl.supermap.ServerStyle({
            markerSize: 50,
            markerSymbolID: 0,
            lineColor: new maplibregl.supermap.ServerColor(255, 165, 0),
            fillBackColor: new maplibregl.supermap.ServerColor(255, 0, 0)
        })
    })
});
// Set the thematic map parameter class, which stores the parameters needed to create the theme, including the data source, dataset name, and thematic map object
var themeParameters = new maplibregl.supermap.ThemeParameters({
    themes: [themeGraduatedSymbol],
    // To build thematic map dataset array, required
    datasetNames: ["China_Province_pg"],
    // To build data source array that the thematic map dataset located at, required
    dataSourceNames: ["China"]
});

// Submit service request, pass the service querying parameters, get the thematic map information and process according to user needs
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // Get the results returned by the server
    var result = serviceResult.result;
});See full example code »
 

     var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
// Get the thematic map service, url is the map access service
var themeService = new maplibregl.supermap.ThemeService(url);
// The items of label thematic map
var themeLabelItem1 = new maplibregl.supermap.ThemeLabelItem({
    start: 300,// 110000
    end: 3508,// 350000
    style: style1
});
var themeLabelItem2 = new maplibregl.supermap.ThemeLabelItem({
    start: 3508,// 350000
    end: 5508,// 550000
    style: style2
});
// Instantiate a object of label thematic map and set parameters
var themeLabel = new maplibregl.supermap.ThemeLabel({
    // The field or expression of label thematic map
    labelExpression: "NAME",
    // The range field or range expression
    rangeExpression: "pop_2014",
    numericPrecision: 0,
    // Subitem array
    items: [themeLabelItem1, themeLabelItem2],
    // The background style of label
    background: new maplibregl.supermap.ThemeLabelBackground({
        backStyle: new maplibregl.supermap.ServerStyle({
            fillForeColor: new maplibregl.supermap.ServerColor(179, 209, 193),
            fillOpaqueRate: 60,
            lineWidth: 0.1
        }),
        labelBackShape: "RECT"
    })
});
// Set the thematic map parameter class, which stores the parameters needed to create the theme, including the data source, dataset name, and thematic map object
var themeParameters = new maplibregl.supermap.ThemeParameters({
    themes: [themeLabel],
    // To build thematic map dataset array, required
    datasetNames: ["China_Province_pg"],
    // To build data source array that the thematic map dataset located at, required
    dataSourceNames: ["China"]
});
// Submit service request, pass the service querying parameters, get the thematic map information and process according to user needs
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // Get the results returned by the server
    var result = serviceResult.result;
});See full example code »
 

     var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
// Get the thematic map service, url is the map access service
var themeService = new maplibregl.supermap.ThemeService(url);
// Instantiate a object of statistics thematic map and set parameters
var themeGraph = new maplibregl.supermap.ThemeGraph({
    // The items of statistics thematic map
    items: [
        new maplibregl.supermap.ThemeGraphItem({
            // The name of the item
            caption: "全国省份2013_GDP",
            // The field or expression of the item
            graphExpression: "GDP_2013",
            // The style of item
            uniformStyle: new maplibregl.supermap.ServerStyle({
                fillForeColor: new maplibregl.supermap.ServerColor(255, 215, 0),
                lineWidth: 0
            })
        }),
        new maplibregl.supermap.ThemeGraphItem({
            caption: "全国省份2014_GDP",
            graphExpression: "GDP_2014",
            uniformStyle: new maplibregl.supermap.ServerStyle({
                fillForeColor: new maplibregl.supermap.ServerColor(0, 191, 255),
                lineWidth: 0
            })
        }),
    ],
    // The width of bar in bar graph
    barWidth: 0.001,
    // The mapping relationship between the value of a geographic element and the graph size
    // The style of axis on graph
    graphAxes: new maplibregl.supermap.ThemeGraphAxes({
        axesDisplayed: true
    }),
    // The max and min size of symbols on graph
    graphSize: new maplibregl.supermap.ThemeGraphSize({
        maxGraphSize: 500000,
        minGraphSize: 200000
    }),
    // Whether the text on the graph is visible and the style of the graph text
    graphText: new maplibregl.supermap.ThemeGraphText({
        graphTextDisplayed: true,
        graphTextFormat: maplibregl.supermap.ThemeGraphTextFormat.VALUE,
        graphTextStyle: new maplibregl.supermap.ServerTextStyle({
            fontHeight: 10,
            fontWidth: 10
        })
    }),
    // Whether to display the graph in dodge mode
    overlapAvoided: false,
    // Whether symbols are fixed in size when zooming the map
    graphSizeFixed: false,
    // The type of statistics thematic map
    graphType: maplibregl.supermap.ThemeGraphType.BAR
});
// Set the thematic map parameter class, which stores the parameters needed to create the theme, including the data source, dataset name, and thematic map object
themeParameters = new maplibregl.supermap.ThemeParameters({
    themes: [themeGraph],
    // To build thematic map dataset array, required
    datasetNames: ["China_Province_pg"],
    // To build data source array that the thematic map dataset located at, required
    dataSourceNames: ["China"]
});
// Submit service request, pass the service querying parameters, get the thematic map information and process according to user needs
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // Get the results returned by the server
    var result = serviceResult.result;
});See full example code »
 

     // 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
    })
 });
 

             var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalys"
// Define buffer analysis service
var bufferServiceByDatasets =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// Send the request to the server and display the results returned from the server on the map
bufferServiceByDatasets.bufferAnalysis(dsBufferAnalystParams,function(serviceResult){
    // Get the results returned from the server
    var result = serviceResult.result;
});See full example code »
 

     var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
// Set the parameters for the Thiessen polygon analysis
var dsThiessenAnalystParameters = new maplibregl.supermap.DatasetThiessenAnalystParameters({
    dataset: "Town_P@Jingjin"
});
// Define Thiessen polygon analysis
new maplibregl.supermap.SpatialAnalystService(serviceUrl).thiessenAnalysis(dsThiessenAnalystParameters,function (serviceResult) {
    // Get the returned features data
    var features = serviceResult.result.regions;
});See full example code »
 

                                // Set overlay analysis parameters
var dsOverlayAnalyParams = new maplibregl.supermap.DatasetOverlayAnalystParameters({
    // The name of the source dataset of overlay analysis
    sourceDataset: "BaseMap_R@Jingjin",
    // The name of the operate dataset of overlay analysis
    operateDataset: "Neighbor_R@Jingjin",
    // Tolerance
    tolerance: 0,
    // The type of overlay analysis
    operation: maplibregl.supermap.OverlayOperationType.UNION
});
 

                                        var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
// Define overlay analysis service
var overlayAnalystService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// Send the request to the server and display the results returned from the server on the map
overlayAnalystService.overlayAnalysis(dsOverlayAnalyParams, function(serviceResult) {
    // Get the returned features data
    var features = serviceResult.result.regions;
});See full example code »
 

                            // The point need to find closest geometric object
pointGeometryData = {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [2000, -3500]
    }
};
// Min distance calculation parameters
var minDistanceAnalystParameters = new L.supermap.GeometryMinDistanceAnalystParameters({
    inputGeometries: [pointGeometryData],
    referenceDatasetName: "Park@Changchun",
    createResultDataset: false,
    minDistance: 0,
    maxDistance: -1 // -1 indicates that there is no maximum query distance limitation
})
// Create min distance calculation service instance
var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";
var minDistanceAnalystService = new L.supermap.SpatialAnalystService(serviceUrl);
// Send a request to the server and get the returned result
minDistanceAnalystService.minDistanceAnalysis(minDistanceAnalystParameters).then(function (serviceResult) {
    // Get the result returned by the server
    var minDistanceAnalystResult = serviceResult.result.distanceResults;
});See full example code »
                        

     // Set clip area
var region = {
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [0, 4010338],
            [1063524, 4010338],
            [1063524, 3150322],
            [0, 3150322]
        ]]
    }
};
// Set surface analysis parameters
var extractParams = new maplibregl.supermap.SurfaceAnalystParametersSetting({
    datumValue: 0, // The datum value in surface analysis
    interval: 2, // The interval value
    resampleTolerance: 0, // The resample tolerance
    smoothMethod: maplibregl.supermap.SmoothMethod.BSPLINE, // The method used for smoothing
    smoothness: 3, // The smoothness of contour lines
    clipRegion: region // The clip object
});
// The surface analysis parameters
var surfaceAnalystParams = new maplibregl.supermap.DatasetSurfaceAnalystParameters({
    extractParameter: extractParams, // The surface analysis parameters
    dataset: "SamplesP@Interpolation", // The name of the source dataset in overlay analysis
    resolution: 3000, // The resoluton of intermediate results
    zValueFieldName: "AVG_TMP" // The name of the field used for extraction
});
 

                                        var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst" ;
// Initialize surface analysis service instance
var surfaceAnalystService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// Send the request to the server and process the resullts
surfaceAnalystService.surfaceAnalysis(surfaceAnalystParams, function (serviceResult) {
    // Get the returned features data
    var features = serviceResult.result.regions;
});See full example code »
 

      // 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;
});See full example code »
                        

     // 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;
});See full example code »
 

             // 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;
// 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;
});See full example code »
         

                                // Create grid algebraic operation server
var mathExpressionAnalysisService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// Define the grid algebraic operation server parameters
var mathExpressionAnalysisParameters = new maplibregl.supermap.MathExpressionAnalysisParameters({
    // Specify dataset, required
    dataset: "JingjinTerrain@Jingjin",
    // The algebraic expression of the grid operation to be executed, required
    expression: "[Jingjin.JingjinTerrain] + 600",
    // The data source that stores the result dataset, required
    targetDatasource: "Jingjin",
    // The name of result dataset, required
    resultGridName: "MathExpressionAnalysis_Result",
    deleteExistResultDataset: true
});
// Initiate a grid algebraic operation request to iServer
mathExpressionAnalysisService.mathExpressionAnalysis(mathExpressionAnalysisParameters, function (serviceResult) {
    // Get the data returned by the server
    var mathExpressionAnalysisResult = serviceResult.result;
});See full example code »
 

                             // Terrain slope calculation parameters
var terrainSlopeCalculationParameters = new maplibregl.supermap.TerrainSlopeCalculationParameters({
    dataset: "JingjinTerrain@Jingjin",
    zFactor:0.00001, // Elevation scaling factor
    slopeType:"DEGREE", // The unit type of slope result 
    terrainAnalystSetting: new maplibregl.supermap.terrainAnalystSetting({
        boundsType: maplibregl.supermap.BoundsType.UNION, // The range type of Analysis result dataset
        cellSizeType: maplibregl.supermap.CellSizeType.MAX // The cell type of Analysis result dataset
    }), 
    resultDatasetName:"testSlope", 
    deleteExistResultDataset:true
});
// Create terrain slope calculation service instance
var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
// Send a request to the server and get the returned result
var terrainSlopeCalculationService = new maplibregl.supermap.SpatialAnalystService(serviceUrl);
terrainSlopeCalculationService.terrainAspectCalculate(terrainSlopeCalculationParameters).then(function (serviceResult) {
    // Get the result returned by the server
    var terrainSlopeCalculationResult = serviceResult.result;
});See full example code »
                         

                             // Terrain aspect calculation parameters
var terrainAspectCalculationParameters = new maplibregl.supermap.TerrainAspectCalculationParameters({
    dataset: "JingjinTerrain@Jingjin",
    // Basic environment settings of terrain analysis
    terrainAnalystSetting: new maplibregl.supermap.terrainAnalystSetting({
        boundsType: maplibregl.supermap.BoundsType.UNION,// The range type of Analysis result dataset
        cellSizeType: maplibregl.supermap.CellSizeType.MAX// The cell type of Analysis result dataset
    }), 
    resultDatasetName:"testAspect", 
    deleteExistResultDataset:true
})

// Create terrain aspect calculation service instance
var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
// Send a request to the server and get the returned result
var terrainAspectCalculationService = new maplibregl.supermap.SpatialAnalystService(serviceUrl);
terrainAspectCalculationService.terrainAspectCalculate(terrainAspectCalculationParameters).then(function (serviceResult) {
    // Get the result returned by the server
    var terrainAspectCalculationResult = serviceResult.result;
});See full example code »
                         

                                // Set terrain curvature calculation service parameters
var terrainCurvatureCalculationParameters = new maplibregl.supermap.TerrainCurvatureCalculationParameters({
    dataset: "JingjinTerrain@Jingjin",
    zFactor: 1.0,
    averageCurvatureName: "CurvatureA",
    deleteExistResultDataset: true
});
// Construct terrain curvature calculation service instance
var terrainCurvatureCalculationService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// Initiate terrain curvature calculation request to the iServer
var terrainCurvatureCalculationService.terrainCurvatureCalculate(terrainCurvatureCalculationParameters, function (serviceResult) {
   // Get the results returned from the server
    var terrainCurvatureCalculationResult = serviceResult.result;
});See full example code »
 

                                // Terrain cut and fill calculation parameters
var terrainCutFillCalculationParameters = new ol.supermap.TerrainCutFillCalculationParameters({
    dataset: "JingjinTerrain@Jingjin",
    cutFillType:"REGION3D",
    // Create three-dimensional surface object as the cut and fill calculation object
    region3D: new ol.supermap.Geometry3D({
        points:[
            {"x":116.2,"y":40.1,"z":-5.0},
            {"x":116.5,"y":40.5,"z":0.0},
            {"x":116.5,"y":40.1,"z":30.0},
            {"x":116.2,"y":40.1,"z":-5.0}
        ],
        rotationX: 0.0,
        rotationY: 0.0,
        rotationZ: 0.0,
        scaleX: 0.0,
        scaleY: 0.0,
        scaleZ: 0.0,
        type: "REGION3D",
    }),
    resultDataset:"cutfill", 
    buildPyramid:true, // Whether to create a pyramid for the result raster dataset
    deleteExistResultDataset:true
});
// Construct cut and fill calculation service instance
serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";
var terrainCutFillCalculateService = new ol.supermap.SpatialAnalystService(serviceUrl);
// Send a request to server and get the result
terrainCutFillCalculateService.minDistanceAnalysis(minDistanceAnalystParameters).then(function (serviceResult) {
    // Get the data returned by the server
    var terrainCutFillCalculationResult = serviceResult.result;
});See full example code »
                            

                        // Geocoding parameters
var geoCodeParam = new maplibregl.supermap.GeoCodingParameter({
    address: "超图软件",
    fromIndex:0, // Start index value of the returned object
    toIndex:10, // End index value of the returned object
    filters: "北京市,朝阳区",
    prjCoordSys:{epsgcode26},
    maxReturn:3 // Maximum number of returned results
    });
    // Create address match service
var addressUrl = "https://iserver.supermap.io/iserver/services/addressmatch-Address/restjsr/v1/address";
var addressMatchService =new maplibregl.supermap.AddressMatchService(addressUrl);
// Send a request to the server for geocoding and get the returned result
addressMatchService.code(geoCodeParam, function(obj){
    // Get the result returned by the server
    var featuers = obj.result
});See full example code »
                    

                        // Geodecoding parameters
var geoDecodeParam = new maplibregl.supermap.GeoDecodingParameter({
    x: 116.3518541194,
    y: 40.00097839595,
    fromIndex: 0, // Start index value of the returned object
    toIndex: 10, // End index value of the returned object
    filters: "",
    prjCoordSys: {epsgcode26},
    maxReturn: 3,
    geoDecodingRadius: 1000
});
// Create address match service
var addressUrl = "https://iserver.supermap.io/iserver/services/addressmatch-Address/restjsr/v1/address",
addressMatchService = new maplibregl.supermap.AddressMatchService(addressUrl);
// Send a request to the server for geodecoding and get the returned result
addressMatchService.decode(geoDecodeParam, function(obj){
    // Get the result returned by the server
    var featuers = obj.result
});See full example code »
                    

                        // 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,
});
                    

                        // Create a density service instance
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
// Send a request to the server for density anlysis and get the returned result
processingService.addKernelDensityJob(kernelDensityJobParams, function (serviceResult) {
    // Get the result from server
    var result = serviceResult.result;
});See full example code »
                        

                            // Point aggregation analysis parameters
var summaryMeshJobParam = new maplibregl.supermap.SummaryMeshJobParameter({
    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,
    // 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,
    query: [-74.050,40.650,-73.850,40.850], // Range
    statisticModes: maplibregl.supermap.StatisticAnalystMode.MAX, // Statistical mode. Must be consistent with the number of weight fields
    type: maplibregl.supermap.SummaryType.SUMMARYMESH,
    regionDataset: 'regionDataset' // Used in polygon aggregation
});
    

                            // Create a point aggregation analysis instance
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
// Send a request to the server for density anlysis and get the returned result
processingService.addSummaryMeshJob(summaryMeshJobParam,function(serviceResult){
    // Get the result from server
    var result = serviceResult.result;
});See full example code »
                        

                        mapbox-gl-draw (https://github.com/mapbox/mapbox-gl-draw)
                      

                            // Single object spatial query analysis parameters
var singleObjectQueryJobsParam = new maplibregl.supermap.SingleObjectQueryJobsParameter({
    datasetName: 'ProcessingData_processing_newyorkZone_R',
    datasetQuery: 'ProcessingData_processing_singleRegion_R', // The name of the dataset where the query object is located
    mode:'INTERSECT'
});
                        

                            // Create a single object spatial query analysis instance
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
// Send a request to the server for single object spatial query anlysis and get the returned result
processingService.addQueryJob(singleObjectQueryJobsParam,function(serviceResult){
    // Get the result from server
    var result = serviceResult.result;
});See full example code »
                        

                        var summaryRegionJobParam = new maplibregl.supermap.SummaryRegionJobParameter({
    datasetName: 'ProcessingData_processing_newyorkZone_R',
    // Summary polygon dataset, used in polygon summary
    regionDataset: 'regionDataset',
    // Symmary type, includes mesh summary and polygon summary
    type: maplibregl.supermap.SummaryType.SUMMARYMESH,
    // 0 represents quadrilateral mesh, and 1 represents hexagonal mesh
    meshType:0,
    query: [-74.050,40.650,-73.850,40.850], // Range
    standardSummaryFields: true,
    // The mode of statistics by standard attribute fields
    standardStatisticModes: maplibregl.supermap.StatisticAnalystMode.MAX,
    // The name of statistics by standard attribute fields
    standardFields: "LocationID",
    weightedFields:false,
    // The mode of statistics by weight fields
    weightedStatisticModes: "",
    // The name of statistics by weight fields
    weightedSummaryFields: "",
    // 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:100,
    meshSizeUnit: maplibregl.supermap.AnalystSizeUnit.METER, // The unit of mesh size
    sumShape:true // Whether to count the length or area
});
                    

                        // Create regional summary anlysis instance
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
// Send a request to the server for single object spatial query anlysis and get the returned result
processingService.addSummaryRegionJob(summaryRegionJobParam,function(serviceResult){
    var result = serviceResult.result;
});See full example code »
                        

                        mapbox-gl-draw (https://github.com/mapbox/mapbox-gl-draw)
                      

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

                            // Create a vector clip analysis instance
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
// Send a request to the server for single object spatial query anlysis and get the returned result, and show on the map
processingService.addVectorClipJob(vectorClipJobsParam, function(serviceResult){
    var result = serviceResult.result;
});See full example code »
                        

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

                             // Create a summary attributes analysis instance
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
// Send a request to the server for summary attributes analysis and get the returned result
processingService.addSummaryAttributesJob(summaryAttributesJobsParameter, function(serviceResult){
    //  Get the result from server
    var result = serviceResult.result;
});See full example code »
                        

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

                            // Create a topology validator analysis instance
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
// Send a request to the server for topology validator analysis and get the returned result
processingService.addTopologyValidatorJob(topologyValidatorJobsParameter, function(serviceResult){
    // Get the result from server
    var result = serviceResult.result;
});See full example code »
                        

        // Set the number and radius of hot spots
heatMapLayer = new maplibregl.supermap.HeatMapLayer(
    "heatMap",
    {
        "map": map,
        "id": "heatmap",
        "radius": 45,
        // Specify featureWeight value is used to create a heat map for the heat weight value
        "featureWeight": "value",
    }
);

// Construct heat map center
function createHeatPoints() {
    clearHeatPoints();
    var heatPoints = [];
    var num = 200;
    var radius = 50;
    var unit = "px";
    heatMapLayer.useGeoUnit = true;
}
heatMapLayer.radius = radius;

var features = [];

for (var i = 0; i < num; i++) {

    features[i] =
        {
            "type": "feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    Math.random() * 360 - 180,
                    Math.random() * 160 - 80]
            },
            "properties": {
                "value": Math.random() * 9,
            }
        };
}

var heatPoints = {
    "type": "FeatureCollection",
    "features": features
};

heatMapLayer.addFeatures(heatPoints);
map.addLayer(heatMapLayer);See full example code »
                

                        Papaparse (https://github.com/mholt/PapaParse)
deck.gl (https://github.com/visgl/deck.gl)
dat-gui (https://github.com/dataarts/dat.gui)
                      

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.2/papaparse.min.js"></script>

                    $.get('../data/nyc-taxi.csv', function (csvstr) {
    // Read the data in the file
    var result = Papa.parse(csvstr, {skipEmptyLines: true, header: true});
    addLayer(result.data);
});
// Define style-related properties
function addLayer(points) {
    var graphics = [];
    for (var i = 0; i < points.length; i++) {

        var lngLat = {
            lng: parseFloat(points[i].lng),
            lat: parseFloat(points[i].lat)
        };

        graphics.push(new maplibregl.supermap.Graphic(lngLat));
    }

    var graphicStyle = {
        color: [0, 255, 128],
        radius: 10
    };
    // Draw an object and add it to the layer
    graphicLayer = new maplibregl.supermap.GraphicLayer("graphic", {
        graphics: graphics,
        radius: graphicStyle.radius,
        color: graphicStyle.color,
        highlightColor: [255, 0, 0, 255],
    });
    // Render the drawn points to the map
    map.addLayer(graphicLayer);
}See full example code »

                        ECharts (https://github.com/apache/echarts)
echartsLayer(https://github.com/lzxue/echartsLayer)
                      

                    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);
});See full example code »
                

                            deck.gl (https://github.com/visgl/deck.gl)
                          

                    $.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);
}See full example code »
                

                              Mapv (https://github.com/huiyan-fe/mapv)
                            

                        maplibregl.supermap.MapvLayer(dataSet, options)
                    

                    var randomCount = 500;
var node_data = {
    "0": {"x": 108.154518, "y": 36.643346},
    "1": {"x": 121.485124, "y": 31.235317},
};
var edge_data = [
    {"source": "1", "target": "0"}
];
var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];

// Construction data
for (var i = 1; i < randomCount; i++) {
    var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
    node_data[i] = {
        x: cityCenter.lng - 5 + Math.random() * 10,
        y: cityCenter.lat - 5 + Math.random() * 10,
    };
    edge_data.push(
        {"source": ~~(i * Math.random()), "target": '0'}
    );
}

var fbundling = mapv.utilForceEdgeBundling()
    .nodes(node_data)
    .edges(edge_data);

var results = fbundling();

var data = [];
var timeData = [];

for (var i = 0; i < results.length; i++) {
    var line = results[i];
    var coordinates = [];
    for (var j = 0; j < line.length; j++) {
        coordinates.push([line[j].x, line[j].y]);
        timeData.push({
            geometry: {
                type: 'Point',
                coordinates: [line[j].x, line[j].y]
            },
            count: 1,
            time: j
        });
    }

    data.push({
        geometry: {
            type: 'LineString',
            coordinates: transformCoords(coordinates)
        }
    });

    function transformCoords(coordinates) {
        var coords = [];
        coordinates.map(function (coordinate) {
            coords.push(coordinate);
        });
        return coords;
    }
}

var dataSet = new mapv.DataSet(data);

var options = {
    strokeStyle: 'rgba(55, 50, 250, 0.3)',
    globalCompositeOperation: 'lighter',
    shadowColor: 'rgba(55, 50, 250, 0.5)',
    shadowBlur: 10,
    lineWidth: 1.0,
    draw: 'simple'
};

var mapVLinelayer = new maplibregl.supermap.MapvLayer("", dataSet, options);
map.addLayer(mapVLinelayer);

var dataSet = new mapv.DataSet(timeData);

var options = {
    fillStyle: 'rgba(255, 250, 250, 0.9)',
    globalCompositeOperation: 'lighter',
    size: 1.5,
    animation: {
        type: 'time',
        stepsRange: {
            start: 0,
            end: 100
        },
        trails: 1,
        duration: 5
    },
    draw: 'simple'
};

var mapVAnimationLinelayer = new maplibregl.supermap.MapvLayer("", dataSet, options);
map.addLayer(mapVAnimationLinelayer);See full example code »
             

                                three.js (https://github.com/mrdoob/three.js)
GLTFLoader (https://github.com/johh/three-gltf-loader)
                              

maplibregl.supermap.ThreeLayer('three')
                         

                        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 maplibregl.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);
    });
}See full example code »