iClient for MapboxGL 开发指南

准备

获取 MapboxGL v1 和 SuperMap iClient for MapboxGL

开发时需要引入 MapboxGL v1 和 SuperMap iClient for MapboxGL。其中，MapboxGL v1 具体包括 CSS 文件和 JS 文件。你可以通过以下方式获取这些文件：

MapboxGL v1

通过 MapboxGL 官网下载 CSS 文件
通过 MapboxGL 官网下载 JS 文件

SuperMap iClient for MapboxGL

通过 SuperMap iClient JavaScript 官网下载最新版本
在 SuperMap iClient for MapboxGL 的 GitHub 中下载 release 版本

引入

文件方式引入

以下详细介绍如何通过 CDN 在线引入 MapboxGL v1 文件，以及如何通过在线站点引入 SuperMap iClient for MapboxGL。

新建一个 HTML 文件，在 <head> 标签中引入 MapboxGL v1 CSS 文件和 JS 文件，填入 BootCDN 的托管地址，如下：

      <!DOCTYPE html>
     <html>
        <head>
            <meta charset="UTF-8">
            <link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.1/mapbox-gl.css" rel="stylesheet">
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.1/mapbox-gl.js"></script>
        </head>
     </html>

引入 iclient-mapboxgl CSS 文件和 JS 文件，填入 SuperMap iClient for MapboxGL 在线站点地址：

      <!DOCTYPE html>
      <html>
          <head>
            <meta charset="UTF-8">
            <link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.1/mapbox-gl.css" rel="stylesheet" />
            <link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.1/iclient-mapboxgl.min.css" rel="stylesheet" />
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.1/mapbox-gl.js"></script>
            <script type="text/javascript" src="https://iclient.supermap.io/dist/mapboxgl/iclient-mapboxgl.js"></script>
          </head>
      </html>

npm 方式引入

使用此方式前请先检查电脑中是否已安装应用程序 Node.js，若未安装，可通过下载安装程序来安装。然后在命令行中输入以下命令安装 SuperMap iClient for MapboxGL：

 npm install @supermap/iclient-mapboxgl

引入 CSS

新建一个 HTML 文件，在 <head> 标签中引入 MapboxGL v1 CSS 文件和 iclient-mapboxgl CSS 文件，如下：

  <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.1/mapbox-gl.css"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.1/iclient-mapboxgl.min.css" rel="stylesheet" />

模块化开发

ES6

开发前需使用 npm 安装依赖，然后通过 ES6 的 import 模块加载语法引入相应的模块。

部分模块引入

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

var map;
var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var attribution = "© Mapbox  | Map Data © SuperMap iServer with © SuperMap iClient";

var map = new mapboxgl.Map({
    container: 'map',
    style: {
        "version": 8,
        "sources": {
            "raster-tiles": {
                "attribution": attribution,
                "type": "raster",
                "tiles": ['https://iserver.supermap.io/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "simple-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 22
        }],
        "sprite": "https://iclient.supermap.io/web/styles/street/sprite"
    },
    center: [0, 0],
    maxZoom: 18,
    zoom: 2
});

map.on('load', function () {
    query();
});

function query() {
    map.addLayer({
        'id': 'polygonLayer',
        'type': 'fill',
        'source': {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [[[0, 0], [60, 0], [60, 39], [0, 39], [0, 0]]]
                }
            }
        },
        'paint': {
            'fill-outline-color': 'blue',
            'fill-color': 'rgba(0, 0, 255, 0.1)'
        }
    });
    var param = new QueryByBoundsParameters({
        queryParams: {
            name: "Capitals@World.1"
        },
        bounds: new mapboxgl.LngLatBounds([0, 0], [60, 39])
    });

    new QueryService(url).queryByBounds(param, function (serviceResult) {
        var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
        var features = recordsets && recordsets[0] && recordsets[0].features;
        map.addLayer({
            "id": "points",
            "type": "circle",
            "paint": {
                "circle-radius": 6,
                "circle-color": "#007cbf",
                "circle-opacity": 0.1,
                "circle-stroke-width": 2,
                "circle-stroke-color": "#007cbf",
                "circle-stroke-opacity": 0.5
            },
            "source": {
                "type": "geojson",
                "data": features
            }
        });
    });
}

全模块引入

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

var map;
var url =  "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var attribution = "© Mapbox  | Map Data © SuperMap iServer with © SuperMap iClient";

var map = new mapboxgl.Map({
    container: 'map',
    style: {
        "version": 8,
        "sources": {
            "raster-tiles": {
                "attribution": attribution,
                "type": "raster",
                "tiles": ['https://iserver.supermap.io/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "simple-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 22
        }],
        "sprite": "https://iclient.supermap.io/web/styles/street/sprite"
    },
    center: [0, 0],
    maxZoom: 18,
    zoom: 2
});

map.on('load', function () {
    query();
});

function query() {
    map.addLayer({
        'id': 'polygonLayer',
        'type': 'fill',
        'source': {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [[[0, 0], [60, 0], [60, 39], [0, 39], [0, 0]]]
                }
            }
        },
        'paint': {
            'fill-outline-color': 'blue',
            'fill-color': 'rgba(0, 0, 255, 0.1)'
        }
    });
    var param = new SuperMap.QueryByBoundsParameters({
        queryParams: {
            name: "Capitals@World.1"
        },
        bounds: new mapboxgl.LngLatBounds([0, 0], [60, 39])
    });

    new mapboxgl.supermap.QueryService(url).queryByBounds(param, function (serviceResult) {
        var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
        var features = recordsets && recordsets[0] && recordsets[0].features;
        map.addLayer({
            "id": "points",
            "type": "circle",
            "paint": {
                "circle-radius": 6,
                "circle-color": "#007cbf",
                "circle-opacity": 0.1,
                "circle-stroke-width": 2,
                "circle-stroke-color": "#007cbf",
                "circle-stroke-opacity": 0.5
            },
            "source": {
                "type": "geojson",
                "data": features
            }
        });
    });
}

CommonJS

CommonJS 是基于 Node.js 环境的 JavaScript 模块化规范。开发前需使用 npm 安装依赖，然后通过 require 方法引入相应的模块。

部分模块引入

     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 attribution = "© Mapbox  | Map Data © SuperMap iServer with © SuperMap iClient";
var map = new mapboxgl.Map({
    container: 'map',
    style: {
        "version": 8,
        "sources": {
            "raster-tiles": {
                "attribution": attribution,
                "type": "raster",
                "tiles": ['https://iserver.supermap.io/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "simple-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 22
        }],
        "sprite": "https://iclient.supermap.io/web/styles/street/sprite"
    },
    center: [0, 0],
    maxZoom: 18,
    zoom: 2
});

map.on('load', function () {
    query();
});

function query() {
    map.addLayer({
        'id': 'polygonLayer',
        'type': 'fill',
        'source': {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [[[0, 0], [60, 0], [60, 39], [0, 39], [0, 0]]]
                }
            }
        },
        'paint': {
            'fill-outline-color': 'blue',
            'fill-color': 'rgba(0, 0, 255, 0.1)'
        }
    });
    var param = new QueryByBoundsParameters({
        queryParams: {
            name: "Capitals@World.1"
        },
        bounds: new mapboxgl.LngLatBounds([0, 0], [60, 39])
    });

    new QueryService(url).queryByBounds(param, function (serviceResult) {
        var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
        var features = recordsets && recordsets[0] && recordsets[0].features;
        map.addLayer({
            "id": "points",
            "type": "circle",
            "paint": {
                "circle-radius": 6,
                "circle-color": "#007cbf",
                "circle-opacity": 0.1,
                "circle-stroke-width": 2,
                "circle-stroke-color": "#007cbf",
                "circle-stroke-opacity": 0.5
            },
            "source": {
                "type": "geojson",
                "data": features
            }
        });
    });
}

全模块引入

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

var url =  "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var attribution = "© Mapbox  | Map Data © SuperMap iServer with © SuperMap iClient";
var map = new mapboxgl.Map({
    container: 'map',
    style: {
        "version": 8,
        "sources": {
            "raster-tiles": {
                "attribution": attribution,
                "type": "raster",
                "tiles": 'https://iserver.supermap.io/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "simple-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 22
        }],
        "sprite": "https://iclient.supermap.io/web/styles/street/sprite"
    },
    center: [0, 0],
    maxZoom: 18,
    zoom: 2
});

map.on('load', function () {
    query();
});

function query() {
    map.addLayer({
        'id': 'polygonLayer',
        'type': 'fill',
        'source': {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [[[0, 0], [60, 0], [60, 39], [0, 39], [0, 0]]]
                }
            }
        },
        'paint': {
            'fill-outline-color': 'blue',
            'fill-color': 'rgba(0, 0, 255, 0.1)'
        }
    });
    var param = new SuperMap.QueryByBoundsParameters({
        queryParams: {
            name: "Capitals@World.1"
        },
        bounds: new mapboxgl.LngLatBounds([0, 0], [60, 39])
    });

    new mapboxgl.superamp.QueryService(url).queryByBounds(param, function (serviceResult) {
        var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
        var features = recordsets && recordsets[0] && recordsets[0].features;
        map.addLayer({
            "id": "points",
            "type": "circle",
            "paint": {
                "circle-radius": 6,
                "circle-color": "#007cbf",
                "circle-opacity": 0.1,
                "circle-stroke-width": 2,
                "circle-stroke-color": "#007cbf",
                "circle-stroke-opacity": 0.5
            },
            "source": {
                "type": "geojson",
                "data": features
            }
        });
    });
}

AMD

以下例子利用 RequireJS 库实现，将 mapbox-gl.js 和 iclient-mapboxgl.js 通过 “ 获取 MapboxGL v1 和 SuperMap iClient for MapboxGL ” 下载后放在与 RequireJS 指定的入口主文件所在目录下。

全模块引入

                                            require.config({
    shim: {
        'iclient-mapboxgl': {
            deps: ['mapbox-gl'],
            exports: 'SuperMap'
        }
    }
});

require(['js/mapbox-gl.js'], function(mapboxgl) {
    window.mapboxgl = mapboxgl;
    require(['js/iclient-mapboxgl'], function(SuperMap) {
        var url = 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World';
        var attribution = '© Mapbox  | Map Data © SuperMap iServer with © SuperMap iClient';
        var map = new mapboxgl.Map({
            container: 'map',
            style: {
                version: 8,
                sources: {
                    'raster-tiles': {
                        attribution: attribution,
                        type: 'raster',
                        tiles: [
                        'https://iserver.supermap.io/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'
                        ],
                        tileSize: 256
                    }
                },
                layers: [
                    {
                        id: 'simple-tiles',
                        type: 'raster',
                        source: 'raster-tiles',
                        minzoom: 0,
                        maxzoom: 22
                    }
                ],
                sprite: 'https://iclient.supermap.io/web/styles/street/sprite'
            },
            center: [0, 0],
            maxZoom: 18,
            zoom: 2
        });

        map.on('load', function() {
            query();
        });

        function query() {
            map.addLayer({
                id: 'polygonLayer',
                type: 'fill',
                source: {
                    type: 'geojson',
                    data: {
                        type: 'Feature',
                        geometry: {
                            type: 'Polygon',
                            coordinates: [[[0, 0], [60, 0], [60, 39], [0, 39], [0, 0]]]
                        }
                    }
                },
                paint: {
                    'fill-outline-color': 'blue',
                    'fill-color': 'rgba(0, 0, 255, 0.1)'
                }
            });
            var param = new SuperMap.QueryByBoundsParameters({
                queryParams: {
                    name: 'Capitals@World.1'
                },
                bounds: new mapboxgl.LngLatBounds([0, 0], [60, 39])
            });

            new mapboxgl.supermap.QueryService(url).queryByBounds(param, function(serviceResult) {
                var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
                var features = recordsets && recordsets[0] && recordsets[0].features;
                map.addLayer({
                    id: 'points',
                    type: 'circle',
                    paint: {
                        'circle-radius': 6,
                        'circle-color': '#007cbf',
                        'circle-opacity': 0.1,
                        'circle-stroke-width': 2,
                        'circle-stroke-color': '#007cbf',
                        'circle-stroke-opacity': 0.5
                    },
                    source: {
                        type: 'geojson',
                        data: features
                    }
                });
            });
        }
    });
});

CMD

以下例子利用 SeaJS 库实现，将 mapbox-gl.js 和 iclient-mapboxgl.js 通过 “ 获取 MapboxGL v1 和 SuperMap iClient for MapboxGL ” 下载后放在与 SeaJS 指定的入口主文件所在目录下。

全模块引入

                                                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 attribution = '© Mapbox  | Map Data © SuperMap iServer with © SuperMap iClient';
    var map = new mapboxgl.Map({
        container: 'map',
        style: {
            version: 8,
            sources: {
                'raster-tiles': {
                    attribution: attribution,
                    type: 'raster',
                    tiles: [
                        'https://iserver.supermap.io/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'
                    ],
                    tileSize: 256
                }
            },
            layers: [
                {
                    id: 'simple-tiles',
                    type: 'raster',
                    source: 'raster-tiles',
                    minzoom: 0,
                    maxzoom: 22
                }
            ],
            sprite: 'https://iclient.supermap.io/web/styles/street/sprite'
        },
        center: [0, 0],
        maxZoom: 18,
        zoom: 2
    });

    map.on('load', function() {
        query();
    });

    function query() {
        map.addLayer({
            id: 'polygonLayer',
            type: 'fill',
            source: {
                type: 'geojson',
                data: {
                    type: 'Feature',
                    geometry: {
                        type: 'Polygon',
                        coordinates: [[[0, 0], [60, 0], [60, 39], [0, 39], [0, 0]]]
                    }
                }
            },
            paint: {
                'fill-outline-color': 'blue',
                'fill-color': 'rgba(0, 0, 255, 0.1)'
            }
        });
        var param = new SuperMap.QueryByBoundsParameters({
            queryParams: {
                name: 'Capitals@World.1'
            },
            bounds: new mapboxgl.LngLatBounds([0, 0], [60, 39])
        });

        new mapboxgl.supermap.QueryService(url).queryByBounds(param, function(serviceResult) {
            var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
            var features = recordsets && recordsets[0] && recordsets[0].features;
            map.addLayer({
                id: 'points',
                type: 'circle',
                paint: {
                    'circle-radius': 6,
                    'circle-color': '#007cbf',
                    'circle-opacity': 0.1,
                    'circle-stroke-width': 2,
                    'circle-stroke-color': '#007cbf',
                    'circle-stroke-opacity': 0.5
                },
                source: {
                    type: 'geojson',
                    data: features
                }
            });
        });
    }
})

打包配置

SuperMap iClient for MapboxGL 使用了 ES6 语法，为了兼容不支持 ES6 语法的浏览器，需要在打包的过程中进行一些配置，包括语法转换的处理。

这里的打包配置是针对于 ES6 和 CommonJS 模块开发，对于 AMD 和 CMD 模块开发的项目，不需要利用打包工具。

这里以 webpack 打包工具为例，由于使用不同的包管理器会导致安装包的结构有所不同，所以下面分别介绍了 npm 和 cnpm 两种配置方式：

若您用 npm install 或者 cnpm install --by=npm 安装的依赖，那么您需要在 webpack.config.js 的配置文件的 module 中加入如下配置项：

 module: {
    rules: [{
    // 使用babel-loader将ES6语法转换为ES5
        test: /\.js$/,
        include: [
            path.resolve(__dirname, "node_modules/@supermap/iclient-common"),
            path.resolve(__dirname, "node_modules/@supermap/iclient-mapboxgl"),
            // 由于iClient对Elasticsearch的API进行了封装而Elasticsearch也使用了ES6的语法
            path.resolve(__dirname, "node_modules/elasticsearch"),
        ],
        loader: 'babel-loader',
        options: {
             presets: ['env']
        }
    }]
}

若您用 cnpm install 安装的依赖，那么您需要在 webpack.config.js 的配置文件的 module 中加入如下配置项：

                                                module: {
        rules: [{
            // 使用babel-loader将ES6语法转换为ES5
            test: /\.js$/,
            include: [
                path.resolve(__dirname, "node_modules/_@supermap_iclient-common@10.1.2@@supermap/iclient-common"),
                path.resolve(__dirname, "node_modules/_@supermap_iclient-mapboxgl@10.1.2@@supermap/iclient-mapboxgl"),
                // 由于iClient对Elasticsearch的API进行了封装而Elasticsearch也使用了ES6的语法
                path.resolve(__dirname, "node_modules/_elasticsearch@16.7.1@elasticsearch"),
            ],
            loader: 'babel-loader',
            options: {
                presets: ['env']
            }
        }]
    }

创建一幅地图

SuperMap iServer 发布的地图

在准备章节，已经新建了一个 HTML 页面，在页面<body>标签中添加代码以创建地图，如下：

                         <!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.1/mapbox-gl.css" rel="stylesheet">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.12.1/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>

以嵌入 SuperMap iServer 发布的中国地图为例，在 <script> 中继续添加如下代码，初始化地图信息：

  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], // starting position
    zoom: 3 // starting zoom
});查看源码 »

运行效果

添加控件

通过向地图添加控件的方式，实现对图层的放大，缩小，全屏等交互操作，常用的控件包括：

控件	类名	简介
导航	mapboxgl.NavigationControl	默认位于地图左上角
比例尺	mapboxgl.ScaleControl	默认位于地图左下角
全屏	mapboxgl.FullscreenControl	默认位于地图左上角
定位	mapboxgl.GeolocateControl	默认位于地图左上角
版权	mapboxgl.AttributionControl	默认位于右下角
卷帘	mapboxgl.Compare	卷帘默认出现在地图中心

添加控件时，首先初始化地图，然后通过 addControl() 方法将控件添加到地图上，例如：

导航控件：

 // 添加控件
map.addControl(new mapboxgl.NavigationControl(), 'top-left');查看源码 »

运行效果

比例尺控件：

 map.addControl(new mapboxgl.ScaleControl({}));查看源码 »

运行效果

使用矢量瓦片

矢量瓦片是将矢量数据通过不同的描述文件来组织和定义，在客户端实时解析数据并完成绘制。使用 SuperMap iServer 提供的矢量瓦片示例如下：

 var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'https://iserver.supermap.io/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
    center: [120.143, 30.236], // starting position
    zoom: 0,
    attributionControl: false
});
         查看源码 »

运行效果

绘制符号与图形

基本绘制

MapboxGL v1 本身不支持点线面的绘制，需要引入插件 mapbox-gl-draw.js。

在线引用可在 <script> 标签中通过 CDN 引入所需插件：

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

运行效果

面积和距离量算

SuperMap iClient for MapboxGL 支持距离量算和面积量算。

距离量算

距离量算功能的实现步骤：

1.构建服务参数类

量算服务参数类提供服务请求所需的信息，该类提供量算的查询参数封装，提供的参数有 geometry 和 unit，用来定义量算的几何对象和单位，代码如下：

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

2.构建服务类并发送请求

量算服务类负责向服务端发送请求，并将查询结果返回。使用服务类需要指定服务 URL 等服务参数，向服务端发送请求信息，然后通过监听服务请求完成事件，从事件服务数据类中获取最终的结果 Result 对象，按照用户需求进行处理，代码如下：

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

运行效果

面积量算

1.实例化测量服务构造函数，代码如下：

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

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

2.调用测量函数

调用测量函数，并获取返回结果，代码如下：

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

运行效果

地物查询

SuperMap iClient for MapboxGL 支持的地物查询功能主要包括：

指定 ID 查询
指定 SQL 查询
矩形范围查询
任意几何范围查询
距离查询
缓冲区查询
查询栅格信息
查询字段信息

指定 ID 查询

指定 ID 查询，即在数据集中查询符合指定 ID 的地理空间要素，并在客户端中展示出来。本示例为：在 World 数据服务中查询指定 ID 的要素。

使用接口 mapboxgl.supermap.FeatureService 在数据集 “World:Countries” 中查询 ID 为 247 的地理空间要素。

         // 数据集ID查询服务参数
var idsParam = new SuperMap.GetFeaturesByIDsParameters({
    IDs: [247],
    datasetNames: ["World:Countries"]
});
// 创建指定ID查询实例
var url = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
new mapboxgl.supermap.FeatureService(url).getFeaturesByIDs(idsParam, function (serviceResult) {
    // 获取服务器返回的结果
var featuers = serviceResult.result.features；
});查看源码 »

运行效果

指定 SQL 查询

指定 SQL 查询，即在指定数据集集合中查找符合 SQL 条件的矢量要素，并在客户端中展示出来。本示例为：在 World 数据服务中查询指定 SMID 的要素。

使用接口 mapboxgl.supermap.FeatureService 在数据集 “World:Countries” 中查询 SMID 为 247 的要素。的矢量要素。

              // 指定 SQL 查询服务参数
var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
    queryParameter: {
        name: "Countries@World",
        attributeFilter: "SMID = 247"
    },
    datasetNames: ["World:Countries"]
});
// 创建 SQL 查询实例
var url = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
new mapboxgl.supermap.FeatureService(url).getFeaturesBySQL(sqlParam,function (serviceResult) {
    // 获取服务器返回的结果
var featuers = serviceResult.result.features；
});查看源码 »

运行效果

矩形范围查询

矩形范围查询，即在指定数据集集合中查找符合矩形范围的矢量要素，并在客户端中展示出来。本示例为：在 World 数据服务中查询指定矩形范围的要素。

使用接口mapboxgl.supermap.FeatureService 在数据集 “World:Capitals” 中查找符合此矩形范围的矢量要素。

          var url =  "https://iserver.supermap.io/iserver/services/data-world/rest/data";
// 指定矩形范围查询处理
var sw = new mapboxgl.LngLat(-20, -20);
var ne = new mapboxgl.LngLat(20, 20);
var lngLatBounds = new mapboxgl.LngLatBounds(sw, ne);

// 设置矩形范围查询参数
var boundsParam = new SuperMap.GetFeaturesByBoundsParameters({
    datasetNames: ["World:Capitals"],
    bounds: lngLatBounds
});
// 创建矩形范围查询实例
new mapboxgl.supermap.FeatureService(url) .getFeaturesByBounds(boundsParam,function (serviceResult) {
    // 获取服务器返回的结果
var featuers = serviceResult.result.features;
});查看源码 »

运行效果

任意几何范围查询

几何范围查询，即在指定数据集集合中查找符合几何范围的矢量要素，并在客户端中展示出来。本示例为：在 World 数据服务中查询任意几何范围的要素。

使用接口 mapboxgl.supermap.FeatureService 在 “World:Countries” 数据集中采用相交空间查询模式查询符合此几何范围的矢量要素。

         var url = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
// 设置几何查询范围
var  queryPolygonGeometry = {
    "type": "Polygon",
    "coordinates": [[[0, 0], [-10, 30], [-30, 0], [0, 0]]]
};
// 设置任意几何范围查询参数
var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
    datasetNames: ["World:Countries"],
    geometry: queryPolygonGeometry,
    spatialQueryMode: "INTERSECT" // 相交空间查询模式
});
// 创建任意几何范围查询实例
new mapboxgl.supermap .FeatureService(url) .getFeaturesByGeometry(geometryParam,function (serviceResult) {
    // 获取服务器返回的结果
var featuers = serviceResult.result.features;
});查看源码 »

运行效果

距离查询

距离查询，即在地图服务中的指定图层中查找符合一定距离的矢量要素，并在客户端中展示出来。本示例为：在 World 地图服务中查询符合距离的矢量要素。

使用接口 mapboxgl.supermap.QueryService 在图层 “Capitals@World.1” 中查找距离指定点为10度（地图坐标单位）的矢量要素。

         var url = https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
// 添加查询中心点
var point = new mapboxgl.LngLat(104, 30);
// 设置距离查询参数
var param = new SuperMap.QueryByDistanceParameters({
    queryParams: {name: "Capitals@World.1"},
    distance: 10, // distance的单位跟地物的坐标系单位一致，此处为度
    geometry: point
});
// 创建距离查询实例
new mapboxgl.supermap.QueryService(url) .queryByDistance(param,function (serviceResult) {
    // 获取服务器返回的结果
var featuers = serviceResult.result.features;
});查看源码 »

运行效果

缓冲区查询

缓冲区查询，即在数据服务中的指定数据集集合中查找符合缓冲区的矢量要素，并在客户端中展示出来。本示例为：在 World 数据服务中查询指定缓冲区的要素。

使用接口 mapboxgl.supermap.FeatureService 在数据集 “World:Capitals” 中查找符合此缓冲区范围距离为10度（地图坐标单位）的矢量要素。

         var url = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
// 设置缓冲区查询范围
var queryBufferGeometry = {
    "type": "Polygon",
    "coordinates": [[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]
};
// 设置缓冲区查询参数
var bufferParam = new SuperMap.GetFeaturesByBufferParameters({
    datasetNames: ["World:Capitals"],
    bufferDistance: 10, // bufferDistance的单位跟地物的坐标系单位一致，此处为度
    geometry:queryBufferGeometry
});
// 创建缓冲区查询实例，向服务器发送请求，并获取返回的结果
new mapboxgl.supermap .FeatureService(url) .getFeaturesByBuffer(bufferParam,function (serviceResult) {
    // 获取服务器返回的结果
var featuers = serviceResult.result.features;
});查看源码 »

运行效果

查询栅格信息

查询栅格信息，即在指定数据集集合中查找某一地理位置所对应的像素值信息，并在客户端中展示出来。

使用接口 mapboxgl.supermap.GridCellInfosService 在数据集“WorldEarth”中查询栅格信息为例，示例代码如下：

         var url = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
map.on("click",function (evt) {
    // 获取当前点击的(x,y)
    var x = evt.latlng.lng;
    var y = evt.latlng.lat;
    // 设置栅格查询的参数信息
    var getGridCellInfosParam = new SuperMap.GetGridCellInfosParameters({
        dataSourceName: "World",
        datasetName:"WorldEarth",
        X: x,
        Y: y
    });
    // 创建栅格查询实例
new mapboxgl.supermap.GridCellInfosService(url).getGridCellInfos(getGridCellInfosParam,function(serviceResult) {
        if (!serviceResult.result) {
            return;
        }
        // 获取服务端返回数据
        var result = serviceResult.result;
    });
});查看源码 »

运行效果

查询字段信息

查询字段信息，即在指定数据集集合中查询字段的信息，包括：字段名称、字段类型、字段别名、字段默认值等，并在客户端中展示出来。本示例为：在 World 数据服务中查询指定字段的信息，并做字段统计。

使用接口 mapboxgl.supermap.FieldService，在数据集 “continent_T” 中查询字段名为 “SmID” 的详细字段信息，并对数据集中所有 SmID 值进行统计，求出平均值、最大值、最小值等。

         var dataURL = "https://iserver.supermap.io/iserver/services/data-world/rest/data"
// 设置字段查询参数
var param = new SuperMap.FieldParameters({
    datasource: "World",
    dataset: "continent_T"
});
var fieldName = 'SmID';
// 创建字段查询实例
new mapboxgl.supermap.FieldService(dataURL).getFields(param,function (serviceResult) {
    fieldStatistic(fieldName);
});
// 查询指定字段
function fieldStatistic(fieldName) {
    // 设置查询指定字段参数
    var param = new SuperMap.FieldStatisticsParameters({
        datasource: currentData.dataSourceName,
        dataset: currentData.dataSetName,
        fieldName: fieldName,
    });
    // 向服务端发送请求并获取数据
new mapboxgl.supermap.FieldService(dataURL).getFieldStatisticsInfo(param, function (serviceResult) {
        // 获取返回数据
    var result = serviceResult.result;
});
}查看源码 »

运行效果

地物编辑

地物编辑功能可以实现在地图中添加或删除要素。使用接口 mapboxgl.supermap.FeatureService 在数据集 “Capitals” 中添加地物信息。

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

运行效果

专题图

地图学中将突出而深入地表示一种或几种要素或现象，即集中表示一个主题内容的地图称为专题地图。在 SuperMap 中，专题图是地图图层的符号化显示，即用各种图形渲染风格（大小，颜色，线型，填充等）来图形化地表现专题要素的某方面特征。专题图可以基于 GIS 客户端的 API 直接制作，也可以通过调用后台的地图服务由 GIS 服务器端制作。由服务器端制作专题图的方式，相对具有更高的性能，出图效率也更高；由客户端制作的专题图，则可以引入最新的前端技术，实现更直观漂亮的展示效果和交互效果。

服务端专题图

服务端专题图是由服务器进行专题图的制作，即客户端向服务器发送专题图参数，如数据集名称、风格等，服务器根据参数制作专题图，返回给客户端，由客户端进行展示。

以点密度专题图为例。

点密度专题图用一定大小、形状相同的点表示现象分布范围、数量特征和分布密度。点的多少和所代表的意义由地图的内容决定。点密度专题图使用点的数目或者密集程度来反映一个区域或范围所对应的专题值。

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

运行效果

客户端专题图

客户端专题图是根据数据的形状和属性数据，在客户端进行相应计算，通过要素图层或任意图层赋予不同的绘制风格并在客户端进行专题图的展示。

SuperMap iClient for MapboxGL 支持的专题图包含：

单值专题图
分段专题图
符号等级专题图
标签专题图
图表专题图

单值专题图

单值专题图是将专题值相同的要素归为一类，为每一类设定一种渲染风格，如颜色或符号等，专题值相同的要素采用相同的渲染风格，从而用来区分不同的类别。

SuperMap iClient for MapboxGL 实现单值专题图的代码如下：

     //创建 Unique 单值专题图层
var themeLayer = new mapboxgl.supermap.UniqueThemeLayer("ThemeLayer", {
    // 开启 hover 高亮效果
    isHoverAble: true
});
map.addlayer(themeLayer);
// 图层基础样式
themeLayer.style = new SuperMap.ThemeStyle({
    shadowBlur: 3,
    shadowColor: "#000000",
    shadowOffsetX: 1,
    shadowOffsetY: 1,
    fillColor: "#FFFFFF"
});
// hover 高亮样式
themeLayer.highlightStyle = new 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"
        }
    }
];查看源码 »

运行效果

分段专题图

分段专题图是指按照某种分段方式被分成多个范围段，要素根据各自的专题值被分配到其中一个范围段中，在同一个范围段中的要素使用相同的颜色，填充，符号等风格进行显示。分段专题图所基于的专题变量必须为数值型，分段专题图一般用来反映连续分布现象的数量或程度特征，如降水量的分布，土壤侵蚀强度的分布等。

SuperMap iClient for MapboxGL 实现分段专题图的主要代码如下：

     //定义 rangeThemeLayer 分段专题图层
var themeLayer = new mapboxgl.rangeThemeLayer("ThemeLayer", {
            // 开启 hover 高亮效果
            isHoverAble: true,
            opacity: 0.8
        }).addTo(map);
themeLayer.style = new SuperMap.ThemeStyle({
    shadowBlur: 16,
    shadowColor: "#000000",
    fillColor: "#FFFFFF"
});
// hover 高亮样式
themeLayer.highlightStyle = new 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'
    }
}
}];查看源码 »

运行效果

符号等级专题图

符号等级专题图根据各要素的某个数量特征，按照一定的分类方法用一组等级符号表示在地图上，以呈现要素间该数量特征的相对关系。

SuperMap iClient for MapboxGL 实现符号等级专题图的主要代码如下：

     //创建一个符号等级专题图层
var themeLayer = new mapboxgl.rankSymbolThemeLayer("RankSymbolLayer", 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);查看源码 »

运行效果

标签专题图

地图上的必要的标注是必不可少的，不仅帮助用户更好的区分地物要素，同时也显示了要素的某些重要属性，如行政区划、河流、机关、旅游景点的名称、等高线的高程等。在 SuperMap 中，通过制作标签专题图，用户可以轻松实现地图标注。

SuperMap iClient for MapboxGL 实现标签专题图的主要代码如下：

     //创建一个标签专题图层
var themeLayer = new mapboxgl.labelThemeLayer("LabelThemeLayer");
themeLayer.style = new 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"
        }
    }
];
查看源码 »

运行效果

图表专题图

图表专题图是通过为每个要素或记录绘制统计图来反映其对应的专题值的大小。图表专题图可以基于多个变量，反映多种属性，即可以将多个专题值绘制在一个统计图上。通过统计专题图可以在区域本身与各区域之间形成横向和纵向的对比。多用于具有相关数量特征的地图上，比如表示不同地区多年的粮食产量、GDP、人口等，不同时段客运量、地铁流量等。

在图表专题图中，每个区域都会有一幅表示该区域各专题值的统计图，专题图有多种表现形式，目前提供的类型有：柱状图，折线图，三维柱状图，折线图，点状图，饼图，环装图，三维饼图，玫瑰图，三维玫瑰图，环状图。

SuperMap iClient for MapboxGL 实现图表专题图，主要代码如下：

     //柱状图和三维柱状图的图表配置
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年"],   //  轴标签内容
    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);查看源码 »

运行效果

三维专题图

专题图以普通地图为地理基础，着重表示制图区域内某一种或几种自然或社会经济现象的地图。作为该图主题的专题要素予以详尽表示，其地理基础内容则视主题而异。

SuperMap iClient for MapboxGL 提供了三维专题图可视化效果图层的支持，接口为:

                            mapboxgl.supermap.RangeTheme3DLayer("range3DThemeLayer", options)

下面以京津地区人口密度为例，将数据进行三维可视化的展示。

指定图层的配置项和数据：

                         var themeField = "POP_DENSITY99", themeLayer;
     buildThemeLayer();

        function buildThemeLayer() {
            var getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
                queryParameter: new SuperMap.FilterParameter({
                    name: "Jingjin",
                    attributeFilter: "SMID > -1"
                }),
                toIndex: 500,
                datasetNames: ["Jingjin:BaseMap_R"]
            });

            var queryFeatures = new SuperMap.GetFeaturesBySQLService(dataUrl, {
                eventListeners: {
                    processCompleted: function (serviceResult) {
                        if (serviceResult.error) {
                            alert("error:" + JSON.stringify(serviceResult.error));
                            return;
                        }
                        var result = serviceResult.result;
                        if (result.features) {
                            createThemeLayer(result.features);
                        }
                    }
                },
                format: SuperMap.DataFormat.GEOJSON
            });
            queryFeatures.processAsync(getFeatureBySQLParams);
        }

        //创建专题图图层
        function createThemeLayer(data) {
            popup = new mapboxgl.Popup({closeOnClick: true}).addTo(map);
            themeLayer = new mapboxgl.supermap.RangeTheme3DLayer("range3DThemeLayer", {
                heightField: themeField,
                themeField: themeField,
                parseNumber: true,
                enableHighlight: true,

                heightStops: [
                    [0.01, 1000], [0.1, 5000], [0.2, 6000]
                ],
                colorStops: [
                    [0.01, "#FDE2CA"], [0.02, "#FACE9C"], [0.04, "#F09C42"], [0.06, "#D0770B"], [0.1, "#945305"], [0.2, "#714902"]
                ],

                // 显示图例
                showLegend: true,
                legendTitle: resources.text_densityOfPopulation,
                legendOrientation: 'vertical'
            });
            themeLayer.setHighlightStyleOptions({
                color: "#058e94", callback: highlightCallback
            }).setData(data).addTo(map);
            map.easeTo({
                pitch: 60,
                bearing: 0
            })
        }

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

运行效果

空间分析

空间分析（Spatial Analysis）是基于地理对象的位置和形态特征的空间数据分析技术，其目的在于提取和传输空间信息。SuperMap iClient for MapboxGL 支持的空间分析功能包括：

缓冲区分析
泰森多边形
叠加分析
表面分析
点定里程
里程定点
里程定线
栅格代数运算
地形计算

缓冲区分析

缓冲区分析（buffer）是根据指定的距离在点、线和多边形实体周围自动建立一定宽度的区域范围的分析方法。例如，在环境治理时，常在污染的河流周围划出一定宽度的范围表示受到污染的区域；又如在飞机场，常根据附近居民的健康需要在周围划分出一定范围的区域作为非居住区等。

下面以京津数据为例，对“莲花池东路”进行半径为300米的圆头缓冲分析，缓冲区分析的接口使用方法如下：

设置缓冲区分析参数、缓冲区通用参数。

     //设置缓冲区分析参数
var dsBufferAnalystParams = new SuperMap.DatasetBufferAnalystParameters({
    // 用来做缓冲区分析的数据源中数据集名称
    dataset: "Road_L@Jingjin",
    // 设置数据集中集合对象的过滤条件
    filterQueryParameter: new SuperMap.FilterParameter({
        // 属性过滤条件
        attributeFilter: "NAME='莲花池东路'"
    }),
    //缓冲区分析通用参数设置
    bufferSetting: new SuperMap.BufferSetting({
        // 缓冲区端点枚举值，包含FLAT和ROUND
        endType: 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;
});查看源码 »

运行效果

泰森多边形

泰森多边形是荷兰气候学家 A.H.Thiessen 提出的一种根据离散分布的气象站的降雨量来计算平均降雨量的方法，即将所有相邻气象站连成三角形，作这些三角形各边的垂直平分线，于是每个气象站周围的若干垂直平分线便围成一个多边形。用这个多边形内所包含的一个唯一气象站的降雨强度来表示这个多边形区域内的降雨强度，并称这个多边形为泰森多边形。泰森多边形又称为 Voronoi 图，是由一组连接两邻点直线的垂直平分线组成的连续多边形组成。

泰森多边形的特性为：

每个泰森多边形内仅含有一个离散点数据；
泰森多边形内的点到相应离散点的距离最近；
位于泰森多边形边上的点到其两边的离散点的距离相等。

泰森多边形的接口使用方法如下：

SuperMap.REST.ThiessenAnalystService 泰森多边形分析服务类，该类负责将客户设置的泰森多边形分析参数传递给服务端，并接收服务端返回的分析结果数据；
泰森多边形分析结果通过该类支持的事件的监听函数参数获取，参数类型为 {SuperMap.REST.ThiessenAnalystEventArgs}；
获取的结果数据包括 originResult 、result 两种：
- originResult 为服务端返回的用 JSON 对象表示的泰森多边形分析结果数据；
- result 为服务端返回的类型为 {SuperMap.REST.ThiessenAnalystResult} 的泰森多边形分析结果数据对象。
泰森多边形分析的参数支持两种：
- 当参数为 {SuperMap.REST.DatasetThiessenAnalystParameters} 类型时，执行数据集泰森多边形分析；
- 当参数为 {SuperMap.REST.GeometryThiessenAnalystParameters} 类型时，执行几何对象泰森多边形分析。

下面以数据集泰森多边形为例，设置泰森多边形服务对象，用于将客户端设置的泰森多边形服务参数传递给服务端，并接收服务端返回的泰森多边形分析结果数据。

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

运行效果

叠加分析

叠加分析是 GIS 中的一项非常重要的空间分析功能，是指在统一空间参考系统下，通过对两个数据集进行的一系列集合运算，产生新数据集的过程，其目的是通过对空间数据的加工或分析，提取用户需要的新的空间几何信息。同时，通过叠加分析，还将对数据的各种属性信息进行处理。

目前叠加分析广泛应用于资源管理、城市建设评估、国土管理、农林牧业、统计等领域。叠加分析在各领域中的作用：

资源管理主要应用于农业和林业领域，解决农业和林业领域各种资源（如土地、森林、草场等）分布变化、统计等问题；
城市建设评估主要应用于分析城市人口、经济、建设等的发展变化，统计变化趋势和变化规律；
土地和地籍管理涉及土地使用性质变化、地块轮廓变化、地籍权属关系变化等许多内容，借助 GIS 的叠加分析功能可以高效、高质量地完成这些工作；
生态、环境的管理评价用于区域生态规划的评价、环境现状评价、环境影响评价、污染物削减分配的决策支持等；
地学研究与应用中的地形分析、流域分析、土地利用研究、经济地理研究、空间统计分析、制图等都可以借助叠加分析来完成。

下面将京津地区的行政区域与临边地区的行政区域进行叠加分析，叠加分析接口使用方法如下所示：

设置叠加分析参数：

     // 设置叠加分析参数
var dsOverlayAnalyParams = new SuperMap.DatasetOverlayAnalystParameters({
    // 叠加分析中源数据集的名称
    sourceDataset: "BaseMap_R@Jingjin",
    // 叠加分析中操作数据集名称
    operateDataset: "Neighbor_R@Jingjin",
    // 容限
    tolerance: 0,
    // 叠加分析操作类型
    operation: 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) {
    // 获取返回的featuers数据
    var features = serviceResult.result.regions;
});查看源码 »

运行效果

提取等值线/面

提取等值线和提取等值面。等值线是将相邻的、具有相同值的点连起来的线，常用的等值线有等高线、等深线、等温线、等压线、等降水量线等。等值线的分布反映了栅格表面上值的变化，等值线分布越密集的地方，表示栅格表面值的变化比较剧烈。等值线分布较稀疏的地方，表示栅格表面值的变化较小。通过提取等值线，可以找到高程、温度、降水量等值相同的位置，同时等值线的分布状况也可以反映出变化的陡峭和平缓区。等值面是由相邻的等值线封闭组成的面，等值面的变化可以很直观的表示出相邻等值线之间的变化，诸如高程、降水、温度或大气压力等。通过提取等值面可以获得高程、降水、温度等值相同的地方。

本节将通过从全国平均气温采样点中提取等值线的功能来具体说明表面分析的接口使用。

设置表面分析参数、表面分析提取操作参数。

     // 剪裁区域设置
var region = {
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [0, 4010338],
            [1063524, 4010338],
            [1063524, 3150322],
            [0, 3150322]
        ]]
    }
};
// 表面分析参数设置
var extractParams = new SuperMap.SurfaceAnalystParametersSetting({
    datumValue: 0, // 表面分析中提取等值线基准值
    interval: 2, // 等值距，两条等值线之间的间隔值
    resampleTolerance: 0, // 重采样容限
    smoothMethod: SuperMap.SmoothMethod.BSPLINE, // 光滑处理所使用的方法
    smoothness: 3, // 等值线的光滑度
    clipRegion: region // 裁剪对象
});
// 表面分析提取操作参数
var surfaceAnalystParams = new 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) {
    // 获取返回的featuers数据
    var features = serviceResult.result.regions;
});查看源码 »

运行效果

点定里程

点定里程是计算路由上某点到起始点的 M 值，实际应用情景例如知道某事故发生的位置确定该点位于某路口距离。

下面以京津数据为例，计算一条路上发生交通事故的地点到该条路路口的距离。

点定里程接口使用方法如下：

地图加载完成后进行点定里程分析服务，构造路由对象之后才能进行后续的点定里程操作。

      // 为了构造下面里程定点服务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 SuperMap.RouteCalculateMeasureParameters({
        "sourceRoute": routeLine, // 路由类型
        "point": pointGeometryData,// 查询点
        "tolerance": 0.0001,
        "isIgnoreGap": false
});
// 向服务端发送请求并获取数据
routeCalculateMeasureService.routeCalculateMeasure(routeCalculateMeasureParameters, function (routeCaculateServiceResult) {
// 获取服务端返回的数据
var result = routeCaculateServiceResult.result；
});
});查看源码 »

运行效果

里程定点

里程定点是根据指定路由上的 M 值来定位点。应用情景与点定里程相反，如知道某事故距离某路口位置，需要确定其相对精确的坐标的时候使用。

下面以京津数据为例，确定一条发生交通事故的路上与路口距离为6753m的事故点，里程定点的接口使用方法：

地图加载完成后进行里程定点分析服务，构造路由对象之后才能进行后续的里程定点操作。

     // 为了构造下面里程定点服务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 SuperMap.RouteLocatorParameters({
    "sourceRoute": routeLine, // 路由对象
    "type": "POINT", // 类型，点或线
    "measure": 6753, // 里程值
    "offset": 0, // 定位点偏移量
    "isIgnoreGap": true // 是否忽略子对象之间的距离
    });
 // 向服务器发送请求进行里程定点服务分析，并将返回的结果进行处理展现在客户端上
 routeLocatorService.routeLocate(routeLocatorParams_point, function (serviceResult) {
  // 获取服务端返回的数据
  var result = routeCaculateServiceResult.result；
 });
});查看源码 »

运行效果

里程定线

里程定线是根据指定线的范围来确定路由上对应的线对象。应用场景如当知道某一路段发生阻塞，能够确定该路段相对精确的位置范围。

下面以京津数据为例，一条路在距离路口 1123-4489km 之间的发生堵塞。

地图加载完成后进行里程定线分析服务，构造路由对象之后才能进行后续的里程定线操作。里程定线的接口使用方法如下：

             // 为了构造下面里程定点服务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 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；
 })
});查看源码 »

运行效果

栅格代数运算

栅格代数运算是运用代数学的观点对地理特征和现象进行空间分析，即对一个或多个栅格数据进行数学运算和函数运算。同时，运算得出的结果栅格数据的像元值是由一个或多个输入栅格数据的同一位置的像元值通过代数运算得到的。

为了更好的实现栅格代数运算功能，SuperMap 提供了丰富的运算符、函数和运算表达式，除了常用的算术运算（如加、减、乘、除和取整等）方法，还支持通过用户自定义的表达式，来进行栅格的算术运算、条件运算、逻辑运算、函数运算（包括常用函数、三角函数等）和复合运算，用户可以通过栅格代数运算实现多种栅格分析需求。

栅格代数运算接口使用方法如下：

     //创建栅格代数运算服务实例
var mathExpressionAnalysisService =new mapboxgl.supermap.SpatialAnalystService(serviceUrl);
//创建栅格代数运算参数实例
var mathExpressionAnalysisParameters = new 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;
});查看源码 »

运行效果

地形计算

地形计算又称地形曲率计算，格数据表面的曲率，包括平均曲率、剖面曲率和平面曲率。曲率是表面的二阶导数，或者可称之为坡度的坡度。输出结果为地形栅格每个像元的表面曲率，该值通过将该像元与八个相邻像元拟合而得。结果输出为栅格数据集，可输出曲率类型为：平均曲率、剖面曲率和平面曲率，平均曲率为必须输出的结果，剖面曲率和平面曲率为可选择输出。其中，剖面曲率是指沿最大斜率方向的曲率，平面曲率是指垂直于最大斜率方向的曲率。应用场景如当知道某一路段发生阻塞，能够确定该路段相对精确的位置范围。

设置曲率计算的栅格数据集有以下几个：

数据源：列出了当前工作空间中所有的数据源，选择要进行曲率计算的栅格数据集所在的数据源；
数据集：列出了当前数据源中所有的栅格数据集，在列表中选择曲率计算栅格数据集。若在工作空间管理器中选中了栅格数据集，则会自动定位到该数据集；
高程缩放系数：计算曲率时，要求地形栅格值（即高程值）的单位与 x，y 坐标的单位相同，通常需要将高程值乘以一个高程缩放系数，使得三者单位一致。例如，X、Y 方向上的单位是米，而 Z 方向的单位是英尺，由于 1 英尺等于 0.3048 米，则需要指定缩放系数为 0.3048。如果设置为 1，表示不缩放。

在进行地形计算处理之前，需要先初始化地图。

地图加载完成后进行地形计算分析服务。

     // 设置地形曲率计算服务参数
var terrainCurvatureCalculationParameters = new 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;
});查看源码 »

运行效果

交通换乘分析

交通换乘分析的使用方法如下：

定义起始站点和终点站点名查询函数；
进行交通换乘查询，首先需在客户端设置用于向服务端发送的交通换乘参数，其次定义交通换乘服务，用于向服务端发送请求并从服务端获得交通换乘结果数据，最后将返回的结果在客户端进行展示。

下面以长春交通数据模拟的公交线路数据为例，起点为省汽修，终点为中安大厦，范例提供了最少时间的换乘策略，用户可根据自己的需要选择最为合适的出行路线。

1. 交通换乘方案查询

交通方案查询：该方法返回所有的乘车方案，根据方案中的介绍信息可以获取具体的乘车路线。实现过程首先需要设置交通换乘参数，需要设置的参数包括 solutionCount、transferTactic、walkingRatio、points，定义交通换乘服务函数，向服务端发送请求，待服务端成功处理并返回交通换乘结果数据。

         // 定义公交换乘方案查询
paths.points = [26, 180];
// 配置公交换乘方案查询参数
var params = new SuperMap.TransferSolutionParameters({
        //最大换乘导引数量
        solutionCount: 6,
        //公交换乘策略类型
        transferTactic: LESS_TIME,
        //步行与公交的消耗权重比
        walkingRatio: 10,
        //起始点坐标
        points: paths.points
});
var serviceUrl = "https://iserver.supermap.io/iserver/services/traffictransferanalyst-sample/restjsr/traffictransferanalyst/Traffic-Changchun";
// 向服务器发送请求，并获取返回的结果
new mapboxgl.supermap.TrafficTransferAnalystService(serviceUrl)
        .analysisTransferSolution(params, function (serviceResult) {
            // 获取服务端返回的结果
            var result = serviceResult.result;
    });

2. 乘车路线查询

根据换乘方案查询结果( transferSolutions )得到的乘车方案，获取某一条乘车路线的详细信息。

 // 设置查询参数
var params = new SuperMap.TransferPathParameters({
    // 起始点坐标
    points: paths["points"],
    // 当前换乘路线，包含路线ID、起止点等
    transferLines: transLines
    });
// 向服务端发送请求并获取数据
new mapboxgl.supermap.TrafficTransferAnalystService(serviceUrl)
      .analysisTransferPath(params, function (serviceResult) {
       // 获取返回的路线的详细信息
         var transGuide = serviceResult.result;
        });
}

网络分析

SuperMap iClient for MapboxGL 支持的网络分析主要包含：

服务区分析
查找最近设施
选址分区分析
多旅行商分析/物流配送
最佳路径分析

服务区分析

服务区分析是为网络上指定的服务中心点查找其服务范围。例如：为网络上某点计算其 30 分钟的服务区，则结果服务区内，任意点出发到该点的时间都不会超过30分钟。

下面以长春数据为例，然后在地图中选择将要分析的服务中心点（支持多中心），根据选择服务中心点的顺序依次按照 400、500、600...递增的数值作为服务半径进行缓冲区分析。即第一个服务中心点的服务半径为400，第二个服务中心点的服务半径为 500，依次类推。

服务区分析接口使用方法：

设置服务区分析参数 findServiceAreasParams，包括网络分析通用参数、途径站点等。

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

定义服务区分析服务对象，用于将客户端设置的服务区分析服务参数( findServiceAreasParams )传递给服务端，并接收服务端返回的动态分段分析结果数据。当向服务端发送请求并且服务端成功返回结果时，用户可对获得的服务区分析结果做相应处理。

 //定义服务区分析服务
    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;
    });

查找最近设施

最近设施分析是指在网络上给定一个事件点和一组设施点，为事件点查找以最小耗费能到达的一个或几个设施点，结果显示从事件点到设施点(或从设施点到事件点)的最佳路径，耗费，及行驶方向。例如事件发生点是一起交通事故，要求查找在10分钟内能到达的最近医院，超过10分钟到达的都不予考虑。此例中，事故发生地即是一个事件点，周边的医院则是设施点。最近设施查找实际上也是一种路径分析，因此，同样可以应用障碍边和障碍点的设置，在行驶路途上这些障碍将不能被穿越，在路径分析中会予以考虑。

下面以长春数据为例，在地图上标记事故事件点，然后针对三个医院进行最近设施查找分析，其接口使用方法如下所示：

设置最近设施分析参数，包括交通网络分析通用参数、事件点、设施点、查找半径等。

 //设置网络分析结果参数
    var resultSetting = new SuperMap.TransportationAnalystResultSetting({
    //是否在分析结果中包含弧段要素集合
    returnEdgeFeatures: true,
    //返回的弧段要素集合中是否包含集合对象信息
    returnEdgeGeometry: true,
    //返回的结果中是否包含经过弧段ID集合
    returnEdgeIDs: true,
    //返回的分析结果总是否包含结点要素集合
    returnNodeFeatures: true,
    //返回的结点要素集合中是否包含集合对象信息
    returnNodeGeometry: true,
    //返回的分析结果中是否包含经过结点ID集合
    returnNodeIDs: true,
    //返回分析结果中是否包含行驶导引集合
    returnPathGuides: true,
    //返回结果中是否包含路由对象集合
    returnRoutes: true
    };
    //设置交通网络分析通用参数
    var analystParameter = new SuperMap.TransportationAnalystParameter({
    //分析结果返回内容
    resultSetting: resultSetting,
    //转向权重字段的名称
    turnWeightField: "TurnCost",
    //阻力字段的名称
    weightFieldName: "length"
    });
    //设置最近设施分析参数
    var findClosetFacilitiesParams = new 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 = SuperMap.SupplyCenterType.FIXEDCENTER;
    var supplyCenterType_NULL = SuperMap.SupplyCenterType.NULL;
    var supplyCenterType_OPTIONALCENTER = SuperMap.SupplyCenterType.OPTIONALCENTER;
    // 以一个中心点为例
    var supplyCenters = [new SuperMap.SupplyCenter({
    maxWeight: 500,             // 资源供给中心的最大耗费值,必设参数
    nodeID: 139,                // 资源供给中心点的结点 ID 号,必设参数
    resourceValue: 100,         // 资源供给中心能提供的最大服务量或商品数量,必设参数
    type: supplyCenterType_OPTIONALCENTER      //选址分区中资源中心的类型包括固定中心和可选中心两种
    })];
    // 设置选址分区分析参数
    findLocationParameter = new 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;
    });

多旅行商分析/物流配送

多旅行商分析也称为物流配送，是指在网络数据集中，给定M个配送中心点和N个配送目的地（M，N为大于零的整数），查找经济有效的配送路径，并给出相应的行走路线。多旅行商分析功能就是解决如何合理分配配送次序和送货路线，使配送总花费达到最小或每个配送中心的花费达到最小。

多旅行商分析的结果将给出，每个配送中心所负责的配送目的地，并且在某个配送中心向其负责的配送目的地配送货物的时候，又给出经过各个配送目的地的顺序，和相应的行走路线，从而使该配送中心的配送花费最少，或者使得所有的配送中心的总花费最小。

下面以长春数据为例，利用多旅行商分析和旅行商分析对食品厂各个仓库配送中心到用户指定的零售站的配送路线进行分析，并且给出质检员定期到各个零售站检查货品情况时所走的花费最小的路线，其接口使用方法如下所示：

设置多旅行商分析参数 findMTSPPathsParams，包括交通网络分析通用参数、配送中心点集合、配送目标点集合、配送模式等。

 //交通网络分析结果参数
    var resultSetting = new SuperMap.TransportationAnalystResultSetting({
    //是否在分析结果中包含弧段要素集合
    returnEdgeFeatures: true,
    //返回的弧段要素集合中是否包含集合对象信息
    returnEdgeGeometry: true,
    //返回的结果中是否包含经过弧段ID集合
    returnEdgeIDs: true,
    //返回的分析结果总是否包含结点要素集合
    returnNodeFeatures: true,
    //返回的结点要素集合中是否包含集合对象信息
    returnNodeGeometry: true,
    //返回的分析结果中是否包含经过结点ID集合
    returnNodeIDs: true,
    //返回分析结果中是否包含行驶导引集合
    returnPathGuides: true,
    //返回结果中是否包含路由对象集合
    returnRoutes: true
    };
    //交通网络分析通用参数
    var analystParameter = new SuperMap.TransportationAnalystParameter({
    //分析结果返回的内容
    resultSetting: resultSetting,
    //阻力字段的名称
    weightFieldName: "length"
    });
    //多旅行商分析参数
    var findMTSPPathsParams = new 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;
    });

最佳路径分析

最佳路径分析，是求解网络中两点之间阻抗最小的路经，必须按照结点的选择顺序访问网络中的结点。“阻抗最小”有多种理解，如基于单因素考虑的时间最短、费用最低、风景最好、路况最佳、过桥最少、收费站最少、经过乡村最多等。

下面以长春数据为例，计算地图中将要行走的地点间的最佳路径。其接口使用方法如下：

设置最佳路径分析参数 findPathParams，包括交通网络分析通用参数、途径站点等。

 //网络分析结果参数
    var resultSetting = new SuperMap.TransportationAnalystResultSetting({
    //是否在分析结果中包含弧段要素集合
    returnEdgeFeatures: true,
    //返回的弧段要素集合中是否包含集合对象信息
    returnEdgeGeometry: true,
    //返回的结果中是否包含经过弧段ID集合
    returnEdgeIDs: true,
    //返回的分析结果总是否包含结点要素集合
    returnNodeFeatures: true,
    //返回的结点要素集合中是否包含集合对象信息
    returnNodeGeometry: true,
    //返回的分析结果中是否包含经过结点ID集合
    returnNodeIDs: true,
    //返回分析结果中是否包含行驶导引集合
    returnPathGuides: true,
    //返回结果中是否包含路由对象集合
    returnRoutes: true
    });
    //网络分析通用参数
    var analystParameter = new SuperMap.TransportationAnalystParameter({
    //分析结果返回的内容
    resultSetting: resultSetting,
    //阻力字段的名称
    weightFieldName: "length"
    });
    //最佳路径分析参数
    var findPathParams = new 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
    });

向服务端提交最佳路径分析的请求，待服务端成功处理并返回最佳路径分析结果 serviceResult对其进行解析，将行驶路线在地图中展现出来并给出行驶导引信息。

 //创建最佳路径分析实例
    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;
    });

地址匹配

SuperMap iClient for MapboxGL 支持地址匹配服务。地址匹配服务包含正向匹配与反向匹配两种方式，即，用户可通过地点名称找到地址位置，也可以找到指定位置上的地点。

正向地址匹配

正向地址匹配根据地点描述、城市范围返回对应的地理坐标和结构化的地址详细描述，支持中文模糊匹配。

                        // 正向匹配参数
var geoCodeParam = new 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 featuers = obj.result
});查看源码 »

运行效果

反向地址匹配

反向地址匹配通过输入地址坐标来获取对应的规范化的地址描述。

                        // 反向匹配参数
var geoDecodeParam = new 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 featuers = obj.result
});查看源码 »

运行效果

大数据分析

SuperMap iClient for MapboxGL 对接了 SuperMap iServer 的分布式分析服务，为用户提供大数据分析功能，主要包括：

密度分析
点聚合分析
单对象空间查询分析
区域汇总分析
矢量裁剪分析

密度分析

SuperMap iServer 的分布式分析服务中的密度分析包括简单点密度分析和核密度分析两种：

简单点密度分析：用于计算每个点的指定邻域形状内的每单位面积量值。计算方法为点的测量值除以指定邻域面积，点的邻域叠加处，其密度值也相加，每个输出栅格的密度均为叠加在栅格上的所有邻域密度值之和。结果栅格值的单位为原数据集单位的平方的倒数，即若原数据集单位为米，则结果栅格值的单位为每平方米；
核密度分析：用于计算点、线要素测量值在指定邻域范围内的单位密度。简单来说，它能直观的反映出离散测量值在连续区域内的分布情况。其结果是中间值大周边值小的光滑曲面，栅格值即为单位密度，在邻域边界处降为0。核密度分析可用于计算人口密度、建筑密度、获取犯罪情况报告、旅游区人口密度监测、连锁店经营情况分析等等。

下面对大数据进行简单点密度分析，网格面类型为四边形网格。其接口使用方法如下：

设置密度分析参数 kernelDensityJobParam，包括数据集、分析方法、分析类型、格网大小等。

  // 密度分析参数
    var kernelDensityJobParam = new 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 mapboxgl.supermap.ProcessingService(processingUrl);
    // 向服务器发送请求进行密度分析服务，并获取返回的数据
    processingService.addKernelDensityJob(kernelDensityJobParams, function (serviceResult) {
    // 获取服务端返回的数据
    var result = serviceResult.result;
    });查看源码 »

运行效果

点聚合分析

点聚合分析，是指针对点数据集制作聚合图的一种空间分析作业。通过网格面或多边形对地图点要素进行划分，然后计算每个面对象内点要素的数量，并作为面对象的统计值，也可以引入点的权重信息，考虑面对象内点的加权值作为面对象的统计值；最后基于面对象的统计值，按照统计值大小排序的结果，通过色带对面对象进行色彩填充。

目前支持的点聚合分析类型包括：网格面聚合和多边形聚合，其中网格面聚合图按照网格类型又可分为四边形网格和六边形网格。

下面进行点聚合分析，其中聚合类型为网格面聚合，网格面类型为四边形网格。其接口使用方法如下：

设置点聚合分析参数 summaryMeshJobParam，包括数据集、聚合类型、统计模式、格网大小等。

  // 点聚合分析参数
    var summaryMeshJobParam = new 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 mapboxgl.supermap.ProcessingService(processingUrl);
    //向服务器发送请求进行点聚合分析服务，并获取返回的结果
    processingService.addSummaryMeshJob(summaryMeshJobParam,function(serviceResult){
    // 获取服务端返回的数据
    var result = serviceResult.result;
    });查看源码 »

运行效果

单对象空间查询分析

空间查询是通过几何对象之间的空间位置关系来构建过滤条件的一种查询方式。例如：通过空间查询可以找到被包含在面中的空间对象，相离或者相邻的空间对象等。

SuperMap iServer 的分布式分析服务中的单对象空间查询，是指只支持查询对象数据集中的一个对象对被查询数据集做空间查询。如果查询对象数据集中有多个对象，则默认用 SmID 最小的对象对被查询数据集做空间查询。

下面进行单对象空间查询分析，其中空间查询模式使用“相交”。其接口使用方法如下：

设置单对象空间查询分析参数 singleObjectQueryJobsParam，包括源数据集、查询对象数据集、空间查询模式。

  //单对象空间查询分析参数
    var singleObjectQueryJobsParam = new 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;
    });查看源码 »

运行效果

区域汇总分析

区域汇总分析，是指针对线数据集和面数据集制作聚合图的一种空间分析作业。指通过网格面或多边形对地图线或面要素进行划分，然后，以标准属性字段或权重字段对每个网格单元内线或面要素进行统计，将统计结果作为该网格单元的统计值。最后按照网格单元统计值的大小进行排序，通过色带对网格单元进行色彩填充。

区域汇总分析的概念与点聚合分析的概念类似，不同的是点聚合分析是对点数据集进行统计计算，而区域汇总分析是对线数据集和面数据集进行统计计算。在区域汇总分析的概念里，网格单元的统计值有两种统计方式，以标准属性字段统计和以权重字段统计。

下面进行区域汇总分析，其中汇总类型为网格面汇总，网格面类型为四边形网格。其接口使用方法如下：

设置区域汇总分析参数 summaryRegionJobParam，包括数据集、汇总类型、网格面汇总类型等。

  // 区域汇总分析参数
    var summaryRegionJobParam = new 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 mapboxgl.supermap.ProcessingService(processingUrl);
    //向服务器发送请求进行区域汇总分析服务，并获取返回的结果
    processingService.addSummaryRegionJob(summaryRegionJobParam,function(serviceResult){
    // 获取服务端返回的数据
    var result = serviceResult.result;
    });查看源码 »

运行效果

矢量裁剪分析

矢量裁剪分析为对矢量数据集进行裁剪。包括内部裁剪和外部裁剪。内部裁剪指被裁剪的矢量数据集在裁剪区范围内的部分被保留到结果数据集中；相反，使用外部裁剪，则保留不在裁剪区范围内的那部分数据到结果数据集中。

SuperMap iServer 的分布式分析服务中的矢量裁剪分析，只支持裁剪对象数据集中的一个对象对源数据集做矢量裁剪。如果裁剪数据集中有多个对象，则默认用 SmID 最小的对象对源数据集做矢量裁剪。

下面进行矢量裁剪分析，裁剪矢量分析模式使用内部裁剪。其接口使用方法如下：

设置矢量裁剪分析参数 vectorClipJobsParam，包括源数据、裁剪对象数据集、裁剪分析模式。

  // 矢量裁剪分析参数
    var vectorClipJobsParam = new 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 mapboxgl.supermap.ProcessingService(processingUrl);
    //向服务器发送请求进行矢量裁剪分析服务，并对返回结果进行处理展现在地图上
    processingService.addVectorClipJob(vectorClipJobsParam, function(serviceResult){
    // 获取服务端返回的数据
    var result = serviceResult.result;
    });查看源码 »

运行效果

数据流

SuperMap iServer 提供数据流服务，使客户端与服务器之间实现低延迟和实时数据传输。数据流服务采用 WebSocket 协议，支持全双工、双向式通信。服务器可将实时数据服务的分析处理结果作为数据来源向客户端广播，客户端与数据流服务建立连接后，即可自动接收服务器广播的数据。

                    //初始化地图
var map,urlQuery ="https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326",
urlDataFlow ="https://iserver.supermap.io/iserver/services/dataflowTest/dataflow";
var popup = new mapboxgl.Popup();
        map.on('load', function () {
            var options = {
                ws: urlDataFlow
            };
            var dataFlowSubscribe = new mapboxgl.supermap.DataFlowService(options.ws, {
                geometry: options.geometry,
                prjCoordSys: options.prjCoordSys,
                excludeField: options.excludeField
            }).initSubscribe();
            dataFlowSubscribe.on('messageSuccessed', function (msg) {
                popup.remove();
                addLayer(msg);
            });
            query();
        });


//模拟实时数据
//查询一个线数据，每两秒将一个点通过dataFlowService广播给iSevrer的dataflow服务
function query() {
       var param = new SuperMap.QueryBySQLParameters({
        queryParams: {
        name: "Main_Road_L@China#1",
        attributeFilter: "SMID = 1755"
    }
    queryService = new mapboxgl.supermap.QueryService(urlQuery).queryBySQL(param, function (serviceResult) {
                        featureResult = serviceResult;
                        dataFlowBroadcast = new mapboxgl.supermap.DataFlowService(urlDataFlow).initBroadcast();
                        dataFlowBroadcast.on('broadcastSocketConnected', function (e) {
 timer = window.setInterval("broadcast()", 2000);
                        });

                    });
                }

                var count = 200;

function broadcast() {

    if (count >= featureResult.result.recordsets[0].features.features[0].geometry.coordinates.length) {
        window.clearInterval(timer);
        return;
    }
    var point = featureResult.result.recordsets[0].features.features[0].geometry.coordinates[count];
    var feature = {
        geometry: {
            coordinates: [point[0], point[1]],
            type: "Point"
        },
        type: "Feature",
        properties: {
            id: 1,
            time: new Date()
        }
    };
    dataFlowBroadcast.broadcast(feature);
    count += 3;
}

function addLayer(msg) {
    if (!msg.featureResult) {
        return;
    }
    var feature = msg.featureResult;
    var coord = feature.geometry.coordinates;
    var data = {
        geometry: {
            type: 'Point',
            coordinates: coord,
        },
        type: "Feature"
    };

    if (!map.getSource('location')) {
        map.addSource('location', {
            'type': 'geojson',
            'data': data
        });
        map.addLayer({
            "id": "point",
            "type": "circle",
            "paint": {
                "circle-radius": 6,
                "circle-color": 'red',
            },
            "source": 'location'
        });
    }查看源码 »

运行效果

数据可视化

SuperMap iClient for MapboxGL 支持可视化包含：

热力图

原理：在客户端直接渲染的栅格图，热力图的渲染需要三大要素：

热力数据，热力数据需要点数据，每一个热力数据需要有地理位置以及权重值（能够明显的表现某位置某事件发生频率或事物分布密度等，如可以为温度的高低、人口密集度等等）
热力衰减渐变填充色集合，用于渲染每一个热力从中心向外衰减时的渐变色
热力半径，也就是衰减半径。每一个热力需要从中心点外四周根据半径计算衰减度，对在热力衰减区内的每一个像素计算需要渲染的颜色值，然后进行客户端渲染

应用场景：由于热力图的衰减是像素级别的，视觉效果方面极佳，但不能与具体数据进行一一对应，只能表示权重之间的差别，所以可以用于一些对精度要求不高而需要重点突出权重渐变的行业，如可以制作气象温度对比动态效果图、地震区域的震点强弱图等。

示例代码

         //定义热力点数量，加热力半径
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);查看源码 »

运行效果

高效率点图层

高效率点图层(graphicLayer)，主要是针对前端大数据量的点渲染。graphicLayer 支持选取对象事件。

下面以纽约出租车上车点为例，进行可视化的展示：

直接通过 cdn 引入插件papaparse.min.js

<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

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari 等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图，仪表盘，并且支持图与图之间的混搭。

ECharts 官网地址为:

                        https://echarts.baidu.com/index.html

下面以长春市公交路特效图为例，将公交路线的数据进行可视化的展示：

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

});查看源码 »

运行效果

EChartsGL

ECharts GL 是 ECharts 的 WebGL 扩展，其中提供了三维散点图，飞线图，柱状图，曲面图，地球等多种三维可视化方式。并且增加 scatterGL，graphGL 系列类型用于二维的散点图，关系图的加速绘制和布局。

ECharts GL官网地址为:

                        https://echarts.baidu.com/option-gl.html#globe

下面以全球风能为例，将风能数据进行可视化的展示：

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

运行效果

DeckGL

DeckGL是由Uber开发并开源出来的基于WebGL的大数据量可视化框架。

它具有提供不同类型可视化图层，GPU渲染的高性能，React和Mapbox GL集成，结合地理信息数据（GPS）的特点。

DeckGL 官网地址为:

                        https://eng.uber.com/deck-gl-framework/

以下例子对数据进行蜂巢图层展示

                    $.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

Mapv 是一款地理信息可视化开源库，可以用来展示大量地理信息数据，点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。

MapV 可展示大量的点数据，形式可以为热力图、网格、蜂窝状、点聚合、按颜色区间、按半径大小等。可展示大量的线数据，如普通画线、高亮叠加、热力线数据展示等方式，还有各种动画效果，适合用于呈现大量轨迹的场景。也可展示大量的自定义面数据，按颜色区间来展示，行政区域也是其中一种应用场景，可直接使用。

MapV 官网地址为:

https://mapv.baidu.com/

SuperMap iClient for MapboxGL 提供了对使用 MapV 可视化效果图层的支持，接口为:

                        mapboxgl.supermap.MapvLayer(dataSet, options)

下面以 MapV 强边界图为例，将数据进行可视化的展示。

指定图层的配置项和数据：

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

运行效果

threejs

three.js是一款开源的主流3D绘图JS引擎（名字Three就是3D的含义），原作者为Mr.Doob，项目地址为：https://github.com/mrdoob/three.js/。我们知道WebGL是一种网页3D绘图标准，和jQuery简化了HTML DOM操作一样，Three.js可以简化WebGL编程。

Three.js 官网地址为:

https://threejs.org/

SuperMap iClient for MapboxGL 提供了对使用 three.js 可视化效果图层的支持，接口为:

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

运行效果