SuperMap iClient for MapboxGL

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

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

 import mapboxgl from 'mapbox-gl';
import {QueryByBoundsParameters, QueryService} from '@supermap/iclient-mapboxgl';

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

     import mapboxgl from 'mapbox-gl';
import '@supermap/iclient-mapboxgl';

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

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

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

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

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

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

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

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

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

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

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

    var url = 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'https://iserver.supermap.io/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
        center: [0, 0],
        zoom: 2
    });
    map.on('load', function() {
        var param = new mapboxgl.supermap.QueryByBoundsParameters(...);
        new mapboxgl.supermap.QueryService(url).queryByBounds(param, 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://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.css" rel="stylesheet">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.js"></script>
        <script type="text/javascript" src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.js"></script>
    </head>
    <body>
        // 地图显示的div
        <div id="map" style="position:absolute;left:0px;right:0px;width:800px;height:500px;"></div>
    </body>
</html>
                     

  var map = new mapboxgl.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 mapboxgl.Map({
    container: 'map', // 指定地图容器
    style: 'https://iserver.supermap.io/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
    center: [120.143, 30.236], // 地图初始中心点
    zoom: 0,
    attributionControl: false
});查看源码 »
                        

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

                 <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.4/mapbox-gl-draw.js"></script>
             

  // mapbox 绘制要素图形控件
var Draw = new MapboxDraw();
map.addControl(Draw,'top-left');查看源码 »
     

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

             // 设置量算服务参数
var measureParam = new mapboxgl.supermap.MeasureParameters();
// 设置要量算的矢量对象({Line}或{Polygon})，geometry可以通过直接初始化的方法获取
measureParam.geometry= geometry;
measureParam.unit = mapboxgl.supermap.Unit.METER;
             

                 var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
// 初始化服务类，设置服务请求关键参数
var measureService = new mapboxgl.supermap.MeasureService(url);
// 提交服务请求，传递服务查询参数，获取返回结果并按照用户需求进行处理
measureService.measureDistance(measureParam,function (serviceResult){
    function doSomething(serviceResult);
    // 获取服务器返回的结果
    var result=serviceResult.result;
});查看源码 »
             

                 // 设置测量范围
var polygon = {
    "type": "Polygon",
    "coordinates": [[[24, 100], [40, 100], [40, 120], [24, 120], [24, 100]]]
};

// 实例化传入多边形参数的测量构造函数
var areaMeasureParam = new mapboxgl.supermap.MeasureParameters(polygon);
 

                 var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
// 提交服务请求，传递服务查询参数，获取返回结果并按照用户需求进行处理
new mapboxgl.supermap.MeasureService(url) .measureArea(areaMeasureParam, function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »
             

        // 实例化地物编辑服务
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 mapboxgl.supermap.FeatureService(url);
// 设置地物编辑字段参数
var addFeatureParams = new mapboxgl.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 mapboxgl.supermap.ThemeService(url);
// 实例化一个点密度专题图对象，并对专题图作相应的设置
var themeDotDensity = new mapboxgl.supermap.ThemeDotDensity({
    dotExpression:"Pop_1994",
    value: 5000000,
    style: new mapboxgl.supermap.ServerStyle({
        markerSize: 3,
        markerSymbolID: 12
    });
});
// 设置专题图参数类，该类存储了制作专题所需的参数，包括数据源、数据集名称和专题图对象
themeParameters =new mapboxgl.supermap.ThemeParameters({
    themes: [themeDotDensity],
    // 要制作专题图的数据集数组，必设
    datasetNames: ["Countries"],
    // 要制作专题图的数据集所在的数据源数组，必设
    dataSourceNames: ["World"]
 });
// 提交服务请求，传递服务查询参数，获取专题图信息并按照用户需求进行处理
themeService.getThemeInfo(themeParameters,function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »
                 

     // 创建Unique单值专题图层
var themeLayer = new mapboxgl.supermap.UniqueThemeLayer("ThemeLayer", {
    // 开启hover高亮效果
    isHoverAble: true
});
map.addlayer(themeLayer);
// 图层基础样式
themeLayer.style = new mapboxgl.supermap.ThemeStyle({
    shadowBlur: 3,
    shadowColor: "#000000",
    shadowOffsetX: 1,
    shadowOffsetY: 1,
    fillColor: "#FFFFFF"
});
// hover高亮样式
themeLayer.highlightStyle = new mapboxgl.supermap.ThemeStyle({
    stroke: true,
    strokeWidth: 2,
    strokeColor: 'blue',
    fillColor: "#00F5FF",
    fillOpacity: 0.2
});
// 用于单值专题图的属性字段名称
themeLayer.themeField = "LANDTYPE";
                        

     // 单值专题类型样式组
styleGroups: [
    {
        value: "草地",
        style: {
            fillColor: "#C1FFC1"
        }
    },
    {
        value: "城市",
        style: {
            fillColor: "#CD7054"
        }
    },
    {
        value: "灌丛",
        style: {
            fillColor: "#7CCD7C"
        }
    }
];查看源码 »
 

     //定义rangeThemeLayer分段专题图层
var themeLayer = new mapboxgl.rangeThemeLayer("ThemeLayer", {
    // 开启hover高亮效果
    isHoverAble: true,
    opacity: 0.8
}).addTo(map);
themeLayer.style = new mapboxgl.supermap.ThemeStyle({
    shadowBlur: 16,
    shadowColor: "#000000",
    fillColor: "#FFFFFF"
});
// hover高亮样式
themeLayer.highlightStyle = new mapboxgl.supermap.ThemeStyle({
    stroke: true,
    strokeWidth: 4,
    strokeColor: 'blue',
    fillColor: "#00EEEE",
    fillOpacity: 0.8
});
// 用于单值专题图的属性字段名称
themeLayer.themeField = "POP_DENSITY99";
// 风格数组，设定值对应的样式
themeLayer.styleGroups = [{
    start: 0,
    end: 0.02,
    style: {
        color: '#FDE2CA'
    }
}, {
    start: 0.02,
    end: 0.04,
    style: {
        color: '#FACE9C'
    }
}
];查看源码 »
 

     //创建一个符号等级专题图层
var themeLayer = new mapboxgl.rankSymbolThemeLayer("RankSymbolLayer", mapboxgl.supermap.ChartType.CIRCLE);
// 指定用于专题图制作的属性字段，详看下面 addThemeLayer() 中的feature.attrs.CON2009
themeLayer.themeField = "CON2009";
// 配置图表参数
themeLayer.symbolSetting = {
    // 允许图形展示的值域范围，此范围外的数据将不制作图形，必设
    codomain: [0, 40000],
    // 圆最大半径，默认100
    maxR: 100,
    // 圆最小半径，默认0
    minR: 0,
    // 圆形样式
    circleStyle: {fillOpacity: 0.8},
    // 符号专题图填充颜色
    fillColor: "#FFA500",
    // 专题图hover样式
    circleHoverStyle: {fillOpacity: 1}
};
map.addLayer(themeLayer);查看源码 »
 

     // 创建一个标签专题图层
var themeLayer = new mapboxgl.labelThemeLayer("LabelThemeLayer");
themeLayer.style = new mapboxgl.supermap.ThemeStyle({
    labelRect: true,
    fontColor: "#000000",
    fontWeight: "bolder",
    fontSize: "18px",
    fill: true,
    fillColor: "#FFFFFF",
    fillOpacity: 1,
    stroke: false,
    strokeColor: "#8B7B8B"
});
map.addLayer(themeLayer);
// 用于专题图的属性字段名称
themeLayer.themeField = "aqi";
// 风格数组，设定值对应的样式
themeLayer.styleGroups = [
    {
        start: 0,
        end: 51,
        style: {
            fillColor: "#6ACD06",
            fontSize: "17px"
        }
    }, {
        start: 51,
        end: 101,
        style: {
            fillColor: "#FBD12A",
            fontSize: "19px"
        }
    }
];
查看源码 »
 

     // 柱状图和三维柱状图的图表配置
var chartsSettingForBarAddBar3DCommon = {
    width: 260,
    height: 120,
    codomain: [0, 40000],   // 允许图表展示的值域范围，此范围外的数据将不制作图表
    xShapeBlank: [15, 15, 15],
    axisYTick: 4,
    axisYLabels: ["4万", "3万", "2万", "1万", "0"],           // y 轴标签内容
    axisXLabels: ["09年", "10年", "11年", "12年", "13年"],   //  x 轴标签内容
    backgroundRadius: [5, 5, 5, 5],
    backgroundStyle: {      // 背景框圆角参数
        fillColor: "#d1eeee",
        shadowBlur: 12,
        shadowColor: "#d1eeee"
    }
};
// 点和线的图表配置
var chartsSettingForPointOrLine = {
    width: 220,
    height: 100,
    codomain: [0, 40000],
    xShapeBlank: [10, 10],
    axisYTick: 4,
    axisYLabels: ["4万", "3万", "2万", "1万", "0"],
    axisXLabels: ["09年", "10年", "11年", "12年", "13年"],
    backgroundStyle: {fillColor: "#d1eeee"},
    backgroundRadius: [5, 5, 5, 5],
    useXReferenceLine: true,
    pointStyle: {
        pointRadius: 5,
        shadowBlur: 12,
        shadowColor: "#D8361B",
        fillOpacity: 0.8
    },
    pointHoverStyle: {
        stroke: true,
        strokeColor: "#D8361B",
        strokeWidth: 2,
        fillColor: "#ffffff",
        pointRadius: 4
    },
};
// 饼状图和环状图的图表配置
var chartsSettingForPieOrRing = {
    width: 240,
    height: 100,
    codomain: [0, 40000],       // 允许图表展示的值域范围，此范围外的数据将不制作图表
    sectorStyle: {fillOpacity: 0.8},      // 柱状图中柱条的（表示字段值的图形）样式
    sectorStyleByFields: [
        {fillColor: "#FFB980"},
        {fillColor: "#5AB1EF"},
        {fillColor: "#B6A2DE"},
        {fillColor: "#2EC7C9"},
        {fillColor: "#D87A80"}],
    sectorHoverStyle: {fillOpacity: 1},
    xShapeBlank: [10, 10, 10],      // 水平方向上的空白间距参数
    axisYLabels: ["4万", "3万", "2万", "1万", "0"],         // y 轴标签内容
    axisXLabels: ["09年", "10年", "11年", "12年", "13年"],         // x 轴标签内容
    backgroundStyle: {fillColor: "#CCE8CF"},        // 背景样式
    backgroundRadius: [5, 5, 5, 5],        // 背景框圆角参数
};
// 设置graphThemeLayer option参数
var themeLayerOptions = {
    map: map,
    attributions: " ",
    themeFields: ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"],
    opacity: 0.9,
    chartsSetting: {},
};
// 创建一个图表专题图层
var themeLayer = new mapboxgl.graphThemeLayer("BarLayer", "Bar", themeLayerOptions);
map.addLayer(themeLayer);查看源码 »
 

     //设置缓冲区分析参数
var dsBufferAnalystParams = new mapboxgl.supermap.DatasetBufferAnalystParameters({
    // 用来做缓冲区分析的数据源中数据集名称
    dataset: "Road_L@Jingjin",
    // 设置数据集中集合对象的过滤条件
    filterQueryParameter: new mapboxgl.supermap.FilterParameter({
        // 属性过滤条件
        attributeFilter: "NAME='莲花池东路'"
    }),
    //缓冲区分析通用参数设置
    bufferSetting: new mapboxgl.supermap.BufferSetting({
        // 缓冲区端点枚举值，包含FLAT和ROUND
        endType: mapboxgl.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 mapboxgl.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 mapboxgl.supermap.DatasetThiessenAnalystParameters({
    dataset: "Town_P@Jingjin"
});
// 创建泰森多边形分析实例
new mapboxgl.supermap.SpatialAnalystService(serviceUrl).thiessenAnalysis(dsThiessenAnalystParameters,function (serviceResult) {
    // 获取返回的features数据
    var features = serviceResult.result.regions;
});查看源码 »
 

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

             var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
// 创建叠加分析服务实例
var overlayAnalystService =new mapboxgl.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 mapboxgl.supermap.SurfaceAnalystParametersSetting({
    datumValue: 0, // 表面分析中提取等值线基准值
    interval: 2, // 等值距，两条等值线之间的间隔值
    resampleTolerance: 0, // 重采样容限
    smoothMethod: mapboxgl.supermap.SmoothMethod.BSPLINE, // 光滑处理所使用的方法
    smoothness: 3, // 等值线的光滑度
    clipRegion: region // 裁剪对象
});
// 表面分析提取操作参数
var surfaceAnalystParams = new mapboxgl.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 mapboxgl.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 mapboxgl.supermap.SpatialAnalystService(serviceUrl);
// 点定里程服务参数设置
var routeCalculateMeasureParameters = new mapboxgl.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 mapboxgl.supermap.SpatialAnalystService(serviceUrl);
// 里程定点参数设置
var routeLocatorParams_point = new mapboxgl.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 mapboxgl.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 mapboxgl.supermap.SpatialAnalystService(serviceUrl);
// 向服务器发送请求进行里程定线服务分析，并将返回的结果进行处理展现在客户端上
routeLocatorService.routeLocate(routeLocatorParams_line, function (serviceResult) {
    // 获取服务端返回的数据
    var result = routeCaculateServiceResult.result；
});查看源码 »
         

     // 创建栅格代数运算服务实例
var mathExpressionAnalysisService =new mapboxgl.supermap.SpatialAnalystService(serviceUrl);
// 创建栅格代数运算参数实例
var mathExpressionAnalysisParameters = new mapboxgl.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 mapboxgl.supermap.TerrainCurvatureCalculationParameters({
    dataset: "JingjinTerrain@Jingjin",
    zFactor: 1.0,
    averageCurvatureName: "CurvatureA",
    deleteExistResultDataset: true
});
// 创建地形曲率计算服务实例
var terrainCurvatureCalculationService =new mapboxgl.supermap.SpatialAnalystService(serviceUrl);
// 向iServer发起地形曲率计算请求
var terrainCurvatureCalculationService.terrainCurvatureCalculate(terrainCurvatureCalculationParameters, function (serviceResult) {
    // 获取服务端返回的数据
    var terrainCurvatureCalculationResult = serviceResult.result;
});查看源码 »
 

 // 添加中心点
var marker = new mapboxgl.Marker()
    .setLngLat([5605，-3375])
    .addTo(map);
    // 网络分析结果参数
var resultSetting = new mapboxgl.supermap.TransportationAnalystResultSetting({
    // 是否在分析结果中包含弧段要素集合
    returnEdgeFeatures: true,
    // 返回的弧段要素集合中是否包含几何对象信息
    returnEdgeGeometry: true,
    // 返回的结果中是否包含经过弧段ID集合
    returnEdgeIDs: true,
    // 返回的分析结果总是否包含结点要素集合
    returnNodeFeatures: true,
    // 返回的结点要素集合中是否包含几何对象信息
    returnNodeGeometry: true,
    // 返回的分析结果中是否包含经过结点ID集合
    returnNodeIDs: true,
    // 返回分析结果中是否包含行驶导引集合
    returnPathGuides: true,
    // 返回结果中是否包含路由对象集合
    returnRoutes: true
});
// 网络分析通用参数
var analystParameter = new mapboxgl.supermap.TransportationAnalystParameter({
    // 分析结果返回的内容
    resultSetting: resultSetting,
    // 阻力字段的名称
    weightFieldName: "length"
    });
// 服务区分析参数
var findServiceAreasParams = new mapboxgl.supermap.FindServiceAreasParameters({
    // 服务站点数组
    //centers: [marker.getLatLng()],
    centers: [marker.getLngLat()],
    // 是否通过节点ID指定路径分析的结点
    isAnalyzeById: false,
    // 交通网络分析通用参数
    parameter: analystParameter,
    // 每个服务站点提供服务的阻力半径
    weights: weightsArray
});
                        

// 定义服务区分析服务
var serviceUrl = "https://iserver.supermap.io/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun";
    // 创建服务区分析服务实例
    var service = new mapboxgl.supermap.NetworkAnalystService(serviceUrl);
    // 向服务器发送请求，并获取返回的结果
    service.findServiceAreas(findServiceAreasParams, function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});
                        

// 设置网络分析结果参数
var resultSetting = new mapboxgl.supermap.TransportationAnalystResultSetting({
    // 是否在分析结果中包含弧段要素集合
    returnEdgeFeatures: true,
    // 返回的弧段要素集合中是否包含几何对象信息
    returnEdgeGeometry: true,
    // 返回的结果中是否包含经过弧段ID集合
    returnEdgeIDs: true,
    // 返回的分析结果总是否包含结点要素集合
    returnNodeFeatures: true,
    // 返回的结点要素集合中是否包含几何对象信息
    returnNodeGeometry: true,
    // 返回的分析结果中是否包含经过结点ID集合
    returnNodeIDs: true,
    // 返回分析结果中是否包含行驶导引集合
    returnPathGuides: true,
    // 返回结果中是否包含路由对象集合
    returnRoutes: true
});
// 设置交通网络分析通用参数
var analystParameter = new mapboxgl.supermap.TransportationAnalystParameter({
    // 分析结果返回内容
    resultSetting: resultSetting,
    // 转向权重字段的名称
    turnWeightField: "TurnCost",
    // 阻力字段的名称
    weightFieldName: "length"
});
// 设置最近设施分析参数
var findClosetFacilitiesParams = new mapboxgl.supermap.FindClosestFacilitiesParameters({
    // 事件点，一般为需要获得服务设施服务的事件位置
    event:new mapboxgl.LngLat(-3700, 5000),
    // 要查找的设施点数量
    expectFacilityCount: 1,
    // 设施点集合，一般为提供服务的服务设施位置
    facilities: [new mapboxgl.LngLat( 2500,-3500),new mapboxgl.LngLat(5500,-2500),new mapboxgl.LngLat(7000,-4000)],
    // 事件点和设施点是否通过节点ID号来指定
    isAnalyzeById: false,
    // 交通网络分析通用参数
    parameter: analystParameter
});
                        

 // 创建最近设施分析服务实例
var serviceUrl = "https://iserver.supermap.io/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun";
var findClosetFacilitiesService = new mapboxgl.supermap.NetworkAnalystService(serviceUrl);
// 向服务端发送请求，并返回结果进行处理
findClosetFacilitiesService.findClosestFacilities(findClosetFacilitiesParams, function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});
                        

// 设置设施点的资源供给中心
var supplyCenterType_FIXEDCENTER = mapboxgl.supermap.SupplyCenterType.FIXEDCENTER;
var supplyCenterType_NULL = mapboxgl.supermap.SupplyCenterType.NULL;
var supplyCenterType_OPTIONALCENTER = mapboxgl.supermap.SupplyCenterType.OPTIONALCENTER;
// 以一个中心点为例
var supplyCenters = [new mapboxgl.supermap.SupplyCenter({
    maxWeight: 500,             // 资源供给中心的最大耗费值，必设
    nodeID: 139,                // 资源供给中心点的结点ID号，必设
    resourceValue: 100,         // 资源供给中心能提供的最大服务量或商品数量，必设
    type: supplyCenterType_OPTIONALCENTER      //选址分区中资源中心的类型包括固定中心和可选中心两种
})];
// 设置选址分区分析参数
findLocationParameter = new mapboxgl.supermap.FindLocationParameters({
    // 期望用于最终设施选址的资源供给中心数量，必设
    expectedSupplyCenterCount: 8,
    // 是否从中心点开始分配资源。默认为false
    isFromCenter: false,
    nodeDemandField: "Demand",
    // 转向权值字段的名称
    turnWeightField: "TurnCost",
    // 阻力字段的名称，必设
    weightName: "length",
    // 资源供给中心集合，必设
    supplyCenters: supplyCenters
});
                        

// 创建选址分区分析服务实例
var serviceUrl = "https://iserver.supermap.io/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun";
var findLocationService = new mapboxgl.supermap.NetworkAnalystService(serviceUrl);
// 向服务端发送请求，并对返回结果进行处理
findLocationService.findLocation(findLocationParams, function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});
                        

 // 交通网络分析结果参数
var resultSetting = new mapboxgl.supermap.TransportationAnalystResultSetting({
    // 是否在分析结果中包含弧段要素集合
    returnEdgeFeatures: true,
    // 返回的弧段要素集合中是否包含几何对象信息
    returnEdgeGeometry: true,
    // 返回的结果中是否包含经过弧段ID集合
    returnEdgeIDs: true,
    // 返回的分析结果总是否包含结点要素集合
    returnNodeFeatures: true,
    // 返回的结点要素集合中是否包含几何对象信息
    returnNodeGeometry: true,
    // 返回的分析结果中是否包含经过结点ID集合
    returnNodeIDs: true,
    // 返回分析结果中是否包含行驶导引集合
    returnPathGuides: true,
    // 返回结果中是否包含路由对象集合
    returnRoutes: true
};
// 交通网络分析通用参数
var analystParameter = new mapboxgl.supermap.TransportationAnalystParameter({
    // 分析结果返回的内容
    resultSetting: resultSetting,
    // 阻力字段的名称
    weightFieldName: "length"
});
// 多旅行商分析参数
var findMTSPPathsParams = new mapboxgl.supermap.FindMTSPPathsParameters({
    // 配送中心集合
    centers: [new mapboxgl.LngLat(6000，-5500),new mapboxgl.LngLat( 5500，-2500),new mapboxgl.LngLat(2500，-3500)],
    // 是否通过节点ID号来指定配送中心点和配送目的点
    isAnalyzeById: false,
    // 配送目标集合
    nodes: [new mapboxgl.LngLat(5000, -5000),new mapboxgl.LngLat(8000，-2800)],
    // 配送模式是否为总花费最小方案
    hasLeastTotalCost: true,
    // 交通网络分析通用参数
    parameter: analystParameter
});
                        

 // 创建多旅行商分析服务实例
var serviceUrl = "https://iserver.supermap.io/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun";
var findMTSPPathsService = new mapboxgl.supermap.NetworkAnalystService(serviceUrl);
// 向服务器发送请求，并对返回结果进行处理
findMTSPPathsService.findMTSPPaths(findMTSPPathsParams, function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});
                        

 // 网络分析结果参数
var resultSetting = new mapboxgl.supermap.TransportationAnalystResultSetting({
    // 是否在分析结果中包含弧段要素集合
    returnEdgeFeatures: true,
    // 返回的弧段要素集合中是否包含几何对象信息
    returnEdgeGeometry: true,
    // 返回的结果中是否包含经过弧段ID集合
    returnEdgeIDs: true,
    // 返回的分析结果总是否包含结点要素集合
    returnNodeFeatures: true,
    // 返回的结点要素集合中是否包含几何对象信息
    returnNodeGeometry: true,
    // 返回的分析结果中是否包含经过结点ID集合
    returnNodeIDs: true,
    // 返回分析结果中是否包含行驶导引集合
    returnPathGuides: true,
    // 返回结果中是否包含路由对象集合
    returnRoutes: true
});
// 网络分析通用参数
var analystParameter = new mapboxgl.supermap.TransportationAnalystParameter({
    // 分析结果返回的内容
    resultSetting: resultSetting,
    // 阻力字段的名称
    weightFieldName: "length"
});
// 最佳路径分析参数
var findPathParams = new mapboxgl.supermap.FindPathParameters({
    // 是否通过结点ID指定路径分析的结点
    isAnalyzeById: false,
    // 最佳路径分析经过的结点或设施点数组
    nodes: [new mapboxgl.LngLat( 4000，-3000),new mapboxgl.LngLat(5500，-2500),new mapboxgl.LngLat(6900，-4000)],
    // 是否按照弧段数最少的进行最佳路径分析
    hasLeastEdgeCount: false,
    // 交通网络分析通用参数
    parameter: analystParameter
});
                        

 // 创建最佳路径分析实例
var serviceUrl = "https://iserver.supermap.io/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun";
var findPathService = new mapboxgl.supermap.NetworkAnalystService(serviceUrl);
// 向服务器发送请求，并对返回的结果进行分析处理，展示在客户端上
findPathService.findPath(findPathParams, function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});
                        

                        // 正向匹配参数
var geoCodeParam = new mapboxgl.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 mapboxgl.supermap.AddressMatchService(addressUrl);
// 向服务端发送请求进行正向地址匹配，并获取返回的结果
addressMatchService.code(geoCodeParam, function(obj){
    // 获取服务端返回的结果
    var features = obj.result
});查看源码 »
                    

                        // 反向匹配参数
var geoDecodeParam = new mapboxgl.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 mapboxgl.supermap.AddressMatchService(addressUrl);
// 向服务端发送请求进行反向地址匹配，并获取返回的结果
addressMatchService.decode(geoDecodeParam, function(obj){
    // 获取服务端返回的结果
    var features = obj.result
});查看源码 »
                    

 // 密度分析参数
var kernelDensityJobParam = new mapboxgl.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: [-74.050,40.650,-73.850,40.850], // 分析范围
    radius: 300, // 分析的影响半径
    meshSizeUnit: mapboxgl.supermap.AnalystSizeUnit.METER, // 网格大小单位
    radiusUnit: mapboxgl.supermap.AnalystSizeUnit.METER, // 搜索半径单位
    areaUnit: mapboxgl.supermap.AnalystAreaUnit.SQUAREMILE, // 面积单位
});
                        

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

 // 点聚合分析参数
var summaryMeshJobParam = new mapboxgl.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: [-74.050,40.650,-73.850,40.850], // 分析范围
    statisticModes: mapboxgl.supermap.StatisticAnalystMode.MAX, // 统计模式，需与“权重值字段”个数保持一致
    type: mapboxgl.supermap.SummaryType.SUMMARYMESH, // 聚合类型，指定聚合类型为网格面聚合，还是多边形聚合
    regionDataset: 'regionDataset' // 聚合面数据集，在多边形聚合时使用
});

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

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

// 创建区域汇总分析实例
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new mapboxgl.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 mapboxgl.supermap.VectorClipJobsParameter({
    datasetName: 'ProcessingData_newyork_taxi_2013-01_14k', // 数据集名
    datasetOverlay: 'ProcessingData_processing_singleRegion_R', // 裁剪对象所在数据集名称
    mode: mapboxgl.supermap.ClipAnalystMode.CLIP // 裁剪分析模式
});
                        

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

 // 属性汇总分析参数
var summaryAttributesJobsParameter = new mapboxgl.supermap.SummaryAttributesJobsParameter({
    datasetName: 'sample_processing_newyorkZone_R',// 数据集名
    groupField: 'borough',//分组字段
    attributeField: 'LocationID',// 属性字段
    statisticModes: 'sum'// 统计模式
});
                

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

// 拓扑检查分析参数
var topologyValidatorJobsParameter = new mapboxgl.supermap.TopologyValidatorJobsParameter({
    datasetName: 'samples_processing_newyorkZone_R',// 数据集名
    datasetTopology: 'samples_processing_newyorkResidential_R',// 检查对象所在的数据集名称
    rule: mapboxgl.supermap.TopologyValidatorRule.REGIONCOVEREDBYREGION,// 拓扑检查规则
    tolerance: 0.000001// 容限
});
                

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

         // 定义热力点数量，加热力半径
heatMapLayer = new mapboxgl.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 mapboxgl.supermap.Graphic(lngLat,{
         *      color:[255,0,0],
         *      radius:40
         * });
         */
        graphics.push(new mapboxgl.supermap.Graphic(lngLat));
    }

    var graphicStyle = {
        color: [0, 255, 128],
        radius: 10
    };
    // 绘制对象，并添加到图层上
    graphicLayer = new mapboxgl.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);
});查看源码 »
                

                        ECharts (https://github.com/apache/echarts)
echartsLayer(https://github.com/lzxue/echartsLayer)
ECharts-GL (https://github.com/ecomfe/echarts-gl)
                      

                    map.on('load', function () {
    $.getJSON('../data/globalWindData.json', function (windData) {
    var data = [];
    var p = 0;
    var maxMag = 0;
    var minMag = Infinity;
    for (var j = 0; j < windData.ny; j++) {
        for (var i = 0; i < windData.nx; i++, p++) {
            var vx = windData.data[p][0];
            var vy = windData.data[p][1];
            var mag = Math.sqrt(vx * vx + vy * vy);
            // 数据是一个一维数组
            // [ [经度, 纬度，向量经度方向的值，向量纬度方向的值] ]
            data.push([
                i / windData.nx * 360 - 180,
                j / windData.ny * 180 - 90,
                vx,
                vy,
                mag
            ]);
            maxMag = Math.max(mag, maxMag);
            minMag = Math.min(mag, minMag);
        }
    }

    var echartslayer = new EchartsLayer(map);
    echartslayer.chart.setOption({
        GLMap: {
            roam: true,
        },
        geo: {
            map: "GLMap"
        },
        visualMap: {
            left: 'right',
            min: minMag,
            max: maxMag,
            dimension: 4,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            realtime: false,
            calculable: true,
            textStyle: {
                color: '#fff'
            }
        },
        series: [{
            type: 'flowGL',
            coordinateSystem: 'GLMap',
            data: data,
            particleDensity: 512,
            particleSpeed: 2,
            particleSize: 1,
            gridWidth: windData.nx,
            gridHeight: windData.ny,
            itemStyle: {
                opacity: 0.7
            }
         }]
     });
    });
});查看源码 »
                

                        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 mapboxgl.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)
                      

                        mapboxgl.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'
};

// mapboxgl.supermap.MapvLayer 构造函数的第一个 map 参数将在下个版本遗弃
var mapVLinelayer = new mapboxgl.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'
};

// mapboxgl.supermap.MapvLayer 构造函数的第一个 map 参数将在下个版本遗弃
var mapVAnimationLinelayer = new mapboxgl.supermap.MapvLayer("", dataSet, options);
map.addLayer(mapVAnimationLinelayer);查看源码 »

             

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

mapboxgl.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 mapboxgl.supermap.ThreeLayer('three');
    threeLayer.on("initialized", render);
    threeLayer.addTo(map);

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

        this.light = new THREE.PointLight(0xaaaaaa, 0.5);
        this.light.position.copy(camera.position);
        scene.add(this.light);
        scene.add(new THREE.AmbientLight(0xffffff));
        threeLayer.setPosition(meshes, position);
        // 设置飞行高度
        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);
    });
}查看源码 »