SuperMap iClient for MapLibreGL

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

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

 import maplibregl from 'maplibre-gl';
import {QueryByBoundsParameters, QueryService} from '@supermap/iclient-maplibregl';

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

     import maplibregl from 'maplibre-gl';
import '@supermap/iclient-maplibregl';

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, function (serviceResult) {
        map.addLayer(...);
    });
});

                            

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

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

     var maplibregl = require('maplibregl') ;
require('@supermap/iclient-maplibregl');

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, 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, 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 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, function (serviceResult) {
            map.addLayer(...);
        });
    });
});
                            

 module: {
    rules: [{
        // 使用babel-loader将ES6语法转换为ES5
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }]
}
                            

                                                module: {
    rules: [{
        // 使用babel-loader将ES6语法转换为ES5
        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@2.4.0/dist/maplibre-gl.css" rel="stylesheet">
        <script type="text/javascript" src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
        <script type="text/javascript" src="https://iclient.supermap.io/dist/maplibregl/iclient-maplibregl.js"></script>
    </head>
    <body>
        // 地图显示的div
        <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], // 地图初始中心点
    zoom: 3 // 地图初始缩放级别
});查看源码 »
                        

 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: [120.143, 30.236], // 地图初始中心点
    zoom: 0,
    attributionControl: false
});查看源码 »
                        

        // 实例化地物编辑服务
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);
// 设置地物编辑字段参数
var addFeatureParams = new maplibregl.supermap.EditFeaturesParameters({
    dataSourceName: "World",
    dataSetName: "Capitals",
    features: pointFeature,
    editType: "add",
    returnContent: true
});
// 使用地物编辑服务向服务端发送请求并获取数据
featureService.editFeatures(addFeatureParams, function (serviceResult) {
    // 获取返回数据
    var result = serviceResult.result;
});查看源码 »
             

 var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
// 获取专题图服务，url是地图访问服务
var themeService = new maplibregl.supermap.ThemeService(url);
// 实例化一个点密度专题图对象，并对专题图作相应的设置
var themeDotDensity = new maplibregl.supermap.ThemeDotDensity({
    // 创建点密度专题图的字段或字段表达式
    dotExpression:"Pop_1994",
    // 专题图中每一个点代表的数值
    value: 5000000,
    style: new maplibregl.supermap.ServerStyle({
        markerSize: 3,
        markerSymbolID: 12
    });
});
// 设置专题图参数类，该类存储了制作专题所需的参数，包括数据源、数据集名称和专题图对象
themeParameters =new maplibregl.supermap.ThemeParameters({
    themes: [themeDotDensity],
    // 要制作专题图的数据集数组，必设
    datasetNames: ["Countries"],
    // 要制作专题图的数据集所在的数据源数组，必设
    dataSourceNames: ["World"] });
// 提交服务请求，传递服务查询参数，获取专题图信息并按照用户需求进行处理
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »
                 

     var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
// 获取专题图服务，url是地图访问服务
var themeService = new maplibregl.supermap.ThemeService(url);
// 单值专题图子项
var themeUniqueIteme1 = new maplibregl.supermap.ThemeUniqueItem({
        unique: "黑龙江省",
        style: style1
    }),
    themeUniqueIteme2 = new maplibregl.supermap.ThemeUniqueItem({
        unique: "湖北省",
        style: style2
    })
var themeUniqueItemes = [
    themeUniqueIteme1, themeUniqueIteme2
];
// 实例化一个单值专题图对象，并对专题图作相应的设置
var themeUnique = new maplibregl.supermap.ThemeUnique({
    // 专题图的字段或表达式
    uniqueExpression: "Name",
    // 子项数组
    items: themeUniqueItemes,
    // 未参与单值专题图制作的对象的显示风格
    defaultStyle: style1
});
// 设置专题图参数类，该类存储了制作专题所需的参数，包括数据源、数据集名称和专题图对象
var themeParameters = new maplibregl.supermap.ThemeParameters({
    // 要制作专题图的数据集数组，必设
    datasetNames: ["China_Province_pg"],
    // 要制作专题图的数据集所在的数据源数组，必设
    dataSourceNames: ["China"],
    themes: [themeUnique]
});
//提交服务请求，传递服务查询参数，获取专题图信息并按照用户需求进行处理
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »
 

     var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
// 获取专题图服务，url是地图访问服务
var themeService = new maplibregl.supermap.ThemeService(url);
// 范围分段专题图子项
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
    })
});
// 实例化一个分段专题图对象，并对专题图作相应的设置
themeRange = new maplibregl.supermap.ThemeRange({
    // 分段字段或表达式
    rangeExpression: "SMAREA",
    // 分段模式
    rangeMode: maplibregl.supermap.RangeMode.EQUALINTERVAL,
    // 子项数组
    items: [themeRangeItem1, themeRangeItem2]
});
// 设置专题图参数类，该类存储了制作专题所需的参数，包括数据源、数据集名称和专题图对象
var themeParameters = new maplibregl.supermap.ThemeParameters({
    // 要制作专题图的数据集数组，必设
    datasetNames: ["China_Province_pg"],
    // 要制作专题图的数据集所在的数据源数组，必设
    dataSourceNames: ["China"],
    // 专题图外部表的连接信息
    joinItems: null,
    themes: [themeRange]
});
// 提交服务请求，传递服务查询参数，获取专题图信息并按照用户需求进行处理
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »
 

     var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
// 获取专题图服务，url是地图访问服务
var themeService = new maplibregl.supermap.ThemeService(url);
// 实例化一个等级符号专题图对象，并对专题图作相应的设置
var themeGraduatedSymbol = new maplibregl.supermap.ThemeGraduatedSymbol({
    // 专题图的字段或字段表达式
    expression: "SMAREA",
    // 基准值
    baseValue: 3000000000000,
    // 分级模式
    graduatedMode: maplibregl.supermap.GraduatedMode.CONSTANT,
    // 正负零值显示风格
    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)
        })
    })
});
// 设置专题图参数类，该类存储了制作专题所需的参数，包括数据源、数据集名称和专题图对象
var themeParameters = new maplibregl.supermap.ThemeParameters({
    themes: [themeGraduatedSymbol],
    // 要制作专题图的数据集数组，必设
    datasetNames: ["China_Province_pg"],
    // 要制作专题图的数据集所在的数据源数组，必设
    dataSourceNames: ["China"]
});

// 提交服务请求，传递服务查询参数，获取专题图信息并按照用户需求进行处理
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »
 

     var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
// 获取专题图服务，url是地图访问服务
var themeService = new maplibregl.supermap.ThemeService(url);
// 分段标签专题图的子项
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
});
// 实例化一个标签专题图对象，并对专题图作相应的设置
var themeLabel = new maplibregl.supermap.ThemeLabel({
    // 标注字段或表达式
    labelExpression: "NAME",
    // 制作分段标签专题的分段字段
    rangeExpression: "pop_2014",
    // 显示精度
    numericPrecision: 0,
    // 子项数组
    items: [themeLabelItem1, themeLabelItem2],
    // 标签的背景风格
    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"
    })
});
// 设置专题图参数类，该类存储了制作专题所需的参数，包括数据源、数据集名称和专题图对象。
var themeParameters = new maplibregl.supermap.ThemeParameters({
    themes: [themeLabel],
    // 要制作专题图的数据集数组，必设
    datasetNames: ["China_Province_pg"],
    // 要制作专题图的数据集所在的数据源数组，必设
    dataSourceNames: ["China"]
});
// 提交服务请求，传递服务查询参数，获取专题图信息并按照用户需求进行处理
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »
 

     var url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
// 获取专题图服务，url是地图访问服务
var themeService = new maplibregl.supermap.ThemeService(url);
// 实例化一个统计专题图对象，并对专题图作相应的设置
var themeGraph = new maplibregl.supermap.ThemeGraph({
    // 统计专题图子项集合
    items: [
        new maplibregl.supermap.ThemeGraphItem({
            // 专题图子项名称
            caption: "全国省份2013_GDP",
            // 专题变量
            graphExpression: "GDP_2013",
            // 统计专题图子项显示风格
            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
            })
        }),
    ],
    // 柱状专题图中柱的宽度
    barWidth: 0.001,
    // 地理要素的值与图表尺寸间的映射关系
    graduatedMode: maplibregl.supermap.GraduatedMode.CONSTANT,
    // 坐标轴样式
    graphAxes: new maplibregl.supermap.ThemeGraphAxes({
        axesDisplayed: true
    }),
    // 统计符号的最大最小尺寸
    graphSize: new maplibregl.supermap.ThemeGraphSize({
        maxGraphSize: 500000,
        minGraphSize: 200000
    }),
    // 统计图上的文字是否可见以及文字标注风格
    graphText: new maplibregl.supermap.ThemeGraphText({
        graphTextDisplayed: true,
        graphTextFormat: maplibregl.supermap.ThemeGraphTextFormat.VALUE,
        graphTextStyle: new maplibregl.supermap.ServerTextStyle({
            fontHeight: 10,
            fontWidth: 10
        })
    }),
    // 是否采用避让方式显示
    overlapAvoided: false,
    // 缩放地图时符号是否固定大小
    graphSizeFixed: false,
    // 统计专题图类型
    graphType: maplibregl.supermap.ThemeGraphType.BAR
});
// 设置专题图参数类，该类存储了制作专题所需的参数，包括数据源、数据集名称和专题图对象
themeParameters = new maplibregl.supermap.ThemeParameters({
    themes: [themeGraph],
    // 要制作专题图的数据集数组，必设
    datasetNames: ["China_Province_pg"],
    // 要制作专题图的数据集所在的数据源数组，必设
    dataSourceNames: ["China"]
});
// 提交服务请求，传递服务查询参数，获取专题图信息并按照用户需求进行处理
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »
 

     // 设置缓冲区分析参数
var dsBufferAnalystParams = new maplibregl.supermap.DatasetBufferAnalystParameters({
    // 用来做缓冲区分析的数据源中数据集名称
    dataset: "Road_L@Jingjin",
    // 设置数据集中集合对象的过滤条件
    filterQueryParameter: new maplibregl.supermap.FilterParameter({
        // 属性过滤条件
        attributeFilter: "NAME='莲花池东路'"
    }),
    // 缓冲区分析通用参数设置
    bufferSetting: new maplibregl.supermap.BufferSetting({
        // 缓冲区端点枚举值，包含FLAT和ROUND
        endType: maplibregl.supermap.BufferEndType.ROUND,
        // 左侧缓冲距离
        leftDistance: {value: 300},
        // 右侧缓冲距离
        rightDistance: {value: 300},
        // 圆头缓冲圆弧处线段的个数
        semicircleLineSegment: 10,
        radiusUnit:'METER'
    })
});
 

             var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalys"
// 创建缓冲区分析服务
var bufferServiceByDatasets =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// 向服务端发送服务请求，并获取返回的结果
bufferServiceByDatasets.bufferAnalysis(dsBufferAnalystParams,function(serviceResult){
    // 获取服务端返回的数据
    var result = serviceResult.result;
});查看源码 »
 

     var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
// 设置泰森多边形分析参数
var dThiessenAnalystParameters = new maplibregl.supermap.DatasetThiessenAnalystParameters({
    dataset: "Town_P@Jingjin"
});
// 创建泰森多边形分析实例
new maplibregl.supermap.SpatialAnalystService(serviceUrl).thiessenAnalysis(dsThiessenAnalystParameters,function (serviceResult) {
    // 获取返回的features数据
    var features = serviceResult.result.regions;
});查看源码 »
 

     // 设置叠加分析参数
var dsOverlayAnalyParams = new maplibregl.supermap.DatasetOverlayAnalystParameters({
    // 叠加分析中源数据集的名称
    sourceDataset: "BaseMap_R@Jingjin",
    // 叠加分析中操作数据集名称
    operateDataset: "Neighbor_R@Jingjin",
    // 容限
    tolerance: 0,
    // 叠加分析操作类型
    operation: maplibregl.supermap.OverlayOperationType.UNION
});
 

             var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
// 创建叠加分析服务实例
var overlayAnalystService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// 向服务端发送服务请求，并获取返回的结果
overlayAnalystService.overlayAnalysis(dsOverlayAnalyParams, function(serviceResult) {
    // 获取返回的features数据
    var features = serviceResult.result.regions;
});查看源码 »
 

     // 剪裁区域设置
var region = {
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [0, 4010338],
            [1063524, 4010338],
            [1063524, 3150322],
            [0, 3150322]
        ]]
    }
};
// 表面分析参数设置
var extractParams = new maplibregl.supermap.SurfaceAnalystParametersSetting({
    datumValue: 0, // 表面分析中提取等值线基准值
    interval: 2, // 等值距，两条等值线之间的间隔值
    resampleTolerance: 0, // 重采样容限
    smoothMethod: maplibregl.supermap.SmoothMethod.BSPLINE, // 光滑处理所使用的方法
    smoothness: 3, // 等值线的光滑度
    clipRegion: region // 裁剪对象
});
// 表面分析提取操作参数
var surfaceAnalystParams = new maplibregl.supermap.DatasetSurfaceAnalystParameters({
    extractParameter: extractParams, // 表面分析参数
    dataset: "SamplesP@Interpolation", // 叠加分析中源数据集名称
    resolution: 3000, // 中间结果分辨率
    zValueFieldName: "AVG_TMP" // 用于提取操作的字段名称
});
 

             var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst" ;
// 创建表面分析服务实例
var surfaceAnalystService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// 向服务端发送请求，并对返回的结果进行处理
surfaceAnalystService.surfaceAnalysis(surfaceAnalystParams, function (serviceResult) {
    // 获取返回的features数据
    var features = serviceResult.result.regions;
});查看源码 »
 

      // 为了构造下面点定里程服务sourceRoute属性的routeLine
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
}

// 将形成路由的点提出来，为了构造下面点定里程服务sourceRoute
var routeObj = LineGeometryData.geometry.coordinates;
var routeLine = LineGeometryData;

// 在组成路由的点中选取一个查询点(数组中第4个点),并添加到地图上
var point = [routeObj[4][0], routeObj[4][1]];
var pointGeometryData = {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": point
    }
};
// 创建点定里程服务实例
var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
var routeCalculateMeasureService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// 点定里程服务参数设置
var routeCalculateMeasureParameters = new maplibregl.supermap.RouteCalculateMeasureParameters({
        "sourceRoute": routeLine, // 路由类型
        "point": pointGeometryData,// 查询点
        "tolerance": 0.0001,
        "isIgnoreGap": false
});
// 向服务端发送请求并获取数据
routeCalculateMeasureService.routeCalculateMeasure(routeCalculateMeasureParameters, function (routeCaculateServiceResult) {
    // 获取服务端返回的数据
    var result = routeCaculateServiceResult.result；
});查看源码 »
                        

     // 为了构造下面里程定点服务sourceRoute属性的routeLine
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
    }
};
// 将形成路由的点提出来，为了构造下面点定里程服务sourceRoute
var routeLine = LineGeometryData;

// 创建里程定点服务实例
var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
var routeLocatorService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// 里程定点参数设置
var routeLocatorParams_point = new maplibregl.supermap.RouteLocatorParameters({
    "sourceRoute": routeLine, // 路由对象
    "type": "POINT", // 类型，点或线
    "measure": 6753, // 里程值
    "offset": 0, // 定位点偏移量
    "isIgnoreGap": true // 是否忽略子对象之间的距离
});
// 向服务器发送请求进行里程定点服务分析，并将返回的结果进行处理展现在客户端上
routeLocatorService.routeLocate(routeLocatorParams_point, function (serviceResult) {
    // 获取服务端返回的数据
    var result = routeCaculateServiceResult.result；
});查看源码 »
 

             // 为了构造下面里程定点服务sourceRoute属性的routeLine
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
    }
};

// 将形成路由的点提出来，为了构造下面点定里程服务sourceRoute
var routeLine = LineGeometryData;
// 里程定线参数设置
var routeLocatorParams_line = new maplibregl.supermap.RouteLocatorParameters({
   "sourceRoute": routeLine, // 路由对象
   "type": "LINE", // 类型，点或线
   "startMeasure": 1123, // 定位线的起始M值
   "endMeasure": 4489, // 定位线的终止M值
   "isIgnoreGap": true // 是否忽略子对象之间的距离
});
// 创建里程定线服务实例
var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
var routeLocatorService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// 向服务器发送请求进行里程定线服务分析，并将返回的结果进行处理展现在客户端上
routeLocatorService.routeLocate(routeLocatorParams_line, function (serviceResult) {
    // 获取服务端返回的数据
    var result = routeCaculateServiceResult.result；
});查看源码 »
         

     // 创建栅格代数运算服务实例
var mathExpressionAnalysisService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// 创建栅格代数运算参数实例
var mathExpressionAnalysisParameters = new maplibregl.supermap.MathExpressionAnalysisParameters({
    // 指定数据集，必设
    dataset: "JingjinTerrain@Jingjin",
    // 要执行的栅格运算代数表达式，必设
    expression: "[Jingjin.JingjinTerrain] + 600",
    // 存储结果数据集的数据源，必设
    targetDatasource: "Jingjin",
    // 结果数据集名称，必设
    resultGridName: "MathExpressionAnalysis_Result",
    deleteExistResultDataset: true
});
// 向iServer发起栅格代数运算请求
mathExpressionAnalysisService.mathExpressionAnalysis(mathExpressionAnalysisParameters, function (serviceResult) {
    // 获取服务端返回的数据
    var mathExpressionAnalysisResult = serviceResult.result;
});查看源码 »
 

     // 设置地形曲率计算服务参数
var terrainCurvatureCalculationParameters = new maplibregl.supermap.TerrainCurvatureCalculationParameters({
    dataset: "JingjinTerrain@Jingjin",
    zFactor: 1.0,
    averageCurvatureName: "CurvatureA",
    deleteExistResultDataset: true
});
// 创建地形曲率计算服务实例
var terrainCurvatureCalculationService =new maplibregl.supermap.SpatialAnalystService(serviceUrl);
// 向iServer发起地形曲率计算请求
var terrainCurvatureCalculationService.terrainCurvatureCalculate(terrainCurvatureCalculationParameters, function (serviceResult) {
    // 获取服务端返回的数据
    var terrainCurvatureCalculationResult = serviceResult.result;
});查看源码 »
 

                        // 正向匹配参数
var geoCodeParam = new maplibregl.supermap.GeoCodingParameter({
    address: "超图软件", // 地址
    fromIndex:0, // 设置返回对象的起始索引值
    toIndex:10, // 设置返回对象的结束索引值
    filters: "北京市,朝阳区", // 过滤条件
    prjCoordSys:{epsgcode26}, // 坐标设置
    maxReturn:3 // 最大返回结果数
});
//创建地址匹配服务
var addressUrl = "https://iserver.supermap.io/iserver/services/addressmatch-Address/restjsr/v1/address",
var addressMatchService =new maplibregl.supermap.AddressMatchService(addressUrl);
// 向服务端发送请求进行正向地址匹配，并获取返回的结果
addressMatchService.code(geoCodeParam, function(obj){
    // 获取服务端返回的结果
    var features = obj.result
});查看源码 »
                    

                        // 反向匹配参数
var geoDecodeParam = new maplibregl.supermap.GeoDecodingParameter({
    x: 116.3518541194, // 横坐标
    y: 40.00097839595, // 纵坐标
    fromIndex: 0, // 设置返回对象的起始索引值
    toIndex: 10, // 设置返回对象的结束索引值
    filters: "", // 过滤字段
    prjCoordSys: {epsgcode26}, // 坐标设置
    maxReturn: 3, // 最大结果数
    geoDecodingRadius: 1000 // 查询半径
});
// 创建地址匹配服务
var addressUrl = "https://iserver.supermap.io/iserver/services/addressmatch-Address/restjsr/v1/address",
addressMatchService = new maplibregl.supermap.AddressMatchService(addressUrl);
// 向服务端发送请求进行反向地址匹配，并获取返回的结果
addressMatchService.decode(geoDecodeParam, function(obj){
    // 获取服务端返回的结果
    var features = obj.result
});查看源码 »
                    

     // 密度分析参数
var kernelDensityJobParam = new maplibregl.supermap.KernelDensityJobParameter({
    // 数据集名
    datasetName: "newyork_taxi_2013_01_14k_csv_newyork_taxi_2013-01_14k",
    // 网格大小，对于四边形网格为网格的边长;对于六边形网格为六边形顶点到中心点的距离
    resolution: 80,
    // 分析方法，指定分析方法为简单点密度分析，还是核密度分析。0表示前者，1表示后者
    method:0,
    // 格网面类型，指定网格单元为四边形网格，还是六边形网格。0表示前者，1表示后者
    meshType:0,
    // 指定待分析的点的权重值所在的字段索引列号集合，字段索引从0开始。格式如:col7，col8
    fields: col7,col8,
    query: Bounds, // 分析范围
    radius: 300, // 分析的影响半径
    meshSizeUnit: Meter, // 网格大小单位
    radiusUnit: Meter, // 搜索半径单位
    areaUnit: SquareMile, // 面积单位
});
                        

 // 创建密度分析实例
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
// 向服务器发送请求进行密度分析服务，并获取返回的数据
processingService.addKernelDensityJob(kernelDensityJobParams, function (serviceResult) {
    // 获取服务端返回的数据
    var result = serviceResult.result;
});查看源码 »
                        

// 点聚合分析参数
var summaryMeshJobParam = new maplibregl.supermap.SummaryMeshJobParameter({
    // 数据集名
    datasetName: "newyork_taxi_2013_01_14k_csv_newyork_taxi_2013-01_14k",
    // 网格大小，对于四边形网格为网格的边长；对于六边形网格为六边形顶点到中心点的距离
    resolution: 80,
    // 网格面类型，指定网格单元为四边形网格，还是六边形网格。0表示前者，1表示后者
    meshType:0,
    // 指定待分析的点的权重值所在的字段索引列号集合，字段索引从0开始。格式如:col7，col8
    fields: col7,
    query: Bounds, // 分析范围
    statisticModes:, // 统计模式，需与“权重值字段”个数保持一致
    type:SummaryType, // 聚合类型，指定聚合类型为网格面聚合，还是多边形聚合
    regionDataset: 'regionDataset' // 聚合面数据集，在多边形聚合时使用
});

// 创建点聚合分析实例
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
// 向服务器发送请求进行点聚合分析服务，并获取返回的结果
processingService.addSummaryMeshJob(summaryMeshJobParam,function(serviceResult){
    // 获取服务端返回的数据
    var result = serviceResult.result;
});查看源码 »
                        

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

    // 单对象空间查询分析参数
var singleObjectQueryJobsParam = new maplibregl.supermap.SingleObjectQueryJobsParameter({
    datasetName: 'ProcessingData_processing_newyorkZone_R', // 数据集名
    datasetQuery: 'ProcessingData_processing_singleRegion_R', // 查询对象所在数据集名称
    mode:'INTERSECT' // 空间查询模式
});
                    

    // 创建单对象空间查询分析实例
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
// 向服务器发送请求进行单对象空间查询分析服务，并对返回结果进行处理展现在地图上
processingService.addQueryJob(singleObjectQueryJobsParam,function(serviceResult){
    // 获取服务端返回的数据
    var result = serviceResult.result;
});查看源码 »
                        

    // 区域汇总分析参数
var summaryRegionJobParam = new maplibregl.supermap.SummaryRegionJobParameter({
    datasetName: 'ProcessingData_processing_newyorkZone_R', // 数据集名
    // 聚合面数据集，在多边形聚合时使用
    regionDataset: 'regionDataset',
    // 汇总类型，包括网格面汇总和多边形汇总两种类型
    type: SummaryType,
    // 网格面类型，指定网格单元为四边形网格，还是六边形网格。0表示前者，1表示后者
    meshType:0,
    query: Bounds, // 分析范围
    standardSummaryFields: true, // 是否以标准属性字段统计
    // 当以标准属性字段统计时，标准属性字段统计的统计模式
    standardStatisticModes: StatisticAnalystMode,
    // 当以标准属性字段统计时，标准属性字段统计的字段名称
    standardFields: "LocationID",
    weightedFields:false,// 是否以权重字段统计
    // 使用权重字段统计模式，权重字段统计的统计模式
    weightedStatisticModes: "",
    // 使用权重字段统计模式时，权重字段统计的字段名称
    weightedSummaryFields: "",
    // 网格大小，对于四边形网格为网格的边长；对于六边形网格为六边形顶点到中心点的距离
    resolution:100,
    meshSizeUnit: Meter, // 网格大小单位
    sumShape:true // 是否统计长度或面积
});
                    

    // 创建区域汇总分析实例
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
// 向服务器发送请求进行区域汇总分析服务，并获取返回的结果
processingService.addSummaryRegionJob(summaryRegionJobParam,function(serviceResult){
    // 获取服务端返回的数据
    var result = serviceResult.result;
});查看源码 »
                        

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

    // 矢量裁剪分析参数
var vectorClipJobsParam = new maplibregl.supermap.VectorClipJobsParameter({
    datasetName: 'ProcessingData_newyork_taxi_2013-01_14k', // 数据集名
    datasetOverlay: 'ProcessingData_processing_singleRegion_R', // 裁剪对象所在数据集名称
    mode:ClipAnalystMode // 裁剪分析模式
});
                    

    // 创建矢量裁剪分析实例
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new maplibregl.supermap.ProcessingService(processingUrl);
//向服务器发送请求进行矢量裁剪分析服务，并对返回结果进行处理展现在地图上
processingService.addVectorClipJob(vectorClipJobsParam, function(serviceResult){
    // 获取服务端返回的数据
    var result = serviceResult.result;
});查看源码 »
                        

        // 定义热力点数量，加热力半径
heatMapLayer = new maplibregl.supermap.HeatMapLayer(
    "heatMap",
    {
        "map": map,
        "id": "heatmap",
        "radius": 45,
        // featureWeight指定以哪个属性值为热力权重值创建热力图
        "featureWeight": "value",
    }
);

// 构造热力中心点
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);查看源码 »
                

                        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) {
    // 读取文件中的数据
    var result = Papa.parse(csvstr, {skipEmptyLines: true, header: true});
    addLayer(result.data);
});
// 定义样式相关属性
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)
        };
        /**
            * 可以单独给要素设置颜色和半径:
            * new maplibregl.supermap.Graphic(lngLat,{
            *      color:[255,0,0],
            *      radius:40
            * });
            */
        graphics.push(new maplibregl.supermap.Graphic(lngLat));
    }

    var graphicStyle = {
        color: [0, 255, 128],
        radius: 10
    };
    // 绘制对象，并添加到图层上
    graphicLayer = new maplibregl.supermap.GraphicLayer("graphic", {
        graphics: graphics,
        radius: graphicStyle.radius,
        color: graphicStyle.color,
        highlightColor: [255, 0, 0, 255],
    });
    // 将画出来的点渲染到地图上
    map.addLayer(graphicLayer);
}查看源码 »
    

                        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);
});查看源码 »
                

                        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, // 是否拉伸要素，默认为 false
                radius: 200, // 六边形半径值，默认为 1000
                elevationScale: 4, // 高程乘数
                coverage: 0.8 // 六边形半径乘数，介于0 - 1之间，六边形的最终半径通过覆盖半径计算。
            // 还可配置的参数：
            // colorRange 色带，
            // 默认为 [[255,255,178,255],[254,217,118,255],[254,178,76,255],[253,141,60,255],[240,59,32,255],[189,0,38,255]]
            },
        callback: {
            getPosition: d => d.COORDINATES,
        }
    });
    map.addLayer(deckglLayer);
}查看源码 »
                

                        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 = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州", "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"];

// 构造数据
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);

// 创建MapV图层
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);查看源码 »
                    
                

                        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();
    // 加载gltf格式数据
    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);
        // 设置飞行高度
        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);
        })()
    }

    // 均匀光照，与相机位置同步
    threeLayer.on("render", function () {
        threeLayer.light.position.copy(threeLayer.renderer.camera.position);
    });
}查看源码 »