SuperMap iClient for Leaflet

主要介绍 SuperMap iClient for Leaflet 的入门用法，详细的接口参数请参考 API 页面。

准备

获取 Leaflet 和 SuperMap iClient for Leaflet

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

Leaflet

SuperMap iClient for Leaflet

引入

文件方式引入

获取文件后，只需要像普通的 JavaScript 库一样用 <script> 标签引入即可。以下详细介绍如何通过 CDN 在线引入 Leaflet 文件，以及如何通过在线站点引入 SuperMap iClient for Leaflet。

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

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

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

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

npm 方式引入

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

                                            npm install @supermapgis/iclient-leaflet

如果需要使用 v11.1.1 及以前的版本，请安装 @supermap/iclient-leaflet。

引入 CSS

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

                                            <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>

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

模块化开发

ES6

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

  按需引入

首先，安装 @supermapgis/babel-plugin-import：

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

然后，在 .babelrc中添加如下配置：

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

接下来，如果你只希望引入部分组件，比如 TiledMapLayer，那么需要写入以下内容：

                                            import L from 'leaflet';
import {TiledMapLayer} from '@supermapgis/iclient-leaflet';
var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
    crs: L.CRS.EPSG4326,
    center: [0, 0],
    maxZoom: 18,
    zoom: 1
});
var layer = new TiledMapLayer(url)
layer.addTo(map);

注：import { SuperMap } from 'iclient-leaflet' 将被弃用

  全模块引入 

                                            import L from 'leaflet';
import '@supermapgis/iclient-leaflet';
var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
    crs: L.CRS.EPSG4326,
    center: [0, 0],
    maxZoom: 18,
    zoom: 1
});
new L.supermap.TiledMapLayer(url).addTo(map);

CommonJS

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

  部分模块引入 

                                            var L = require('leaflet');
var TiledMapLayer = require('@supermapgis/iclient-leaflet').TiledMapLayer;

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
    crs: L.CRS.EPSG4326,
    center: [0, 0],
    maxZoom: 18,
    zoom: 1
});
TiledMapLayer(url).addTo(map);

  全模块引入 

                                            var L = require('leaflet');
require('@supermapgis/iclient-leaflet');

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
    crs: L.CRS.EPSG4326,
    center: [0, 0],
    maxZoom: 18,
    zoom: 1
});
new L.supermap.TiledMapLayer(url).addTo(map);

AMD

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

  全模块引入 

                                    require(['js/leaflet.js', 'js/iclient-leaflet.js'], function(L) {
    var url = 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World';
    var map = L.map('map', {
        crs: L.CRS.EPSG4326,
        center: [0, 0],
        maxZoom: 18,
        zoom: 1
    });
    new L.supermap.TiledMapLayer(url).addTo(map);
});

CMD

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

  全模块引入 

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

    var url = 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World';
    var map = L.map('map', {
        crs: L.CRS.EPSG4326,
        center: [0, 0],
        maxZoom: 18,
        zoom: 1
    });
    new L.supermap.TiledMapLayer(url).addTo(map);
});

打包配置

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

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

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

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

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

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

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

兼容 IE8 浏览器

为了更好地兼容 IE8，除通过上述方式引入 leaflet.js、iclient-leaflet.js 外，还需引入 es5-shim。

可直接下载 es5-shim.js 和 es5-sham.js

也可引用在线地址：
https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.9/es5-shim.js
https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.9/es5-sham.js

在引入 leaflet.js 的 <script> 标签前加入下面代码: 

                                        <!--[if lte IE 8]>
    <script src="your shim js"></script>
    <script src="your sham js"></script>
<![endif]-->查看源码 »

创建一幅地图

SuperMap iServer 发布的地图

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

                                <!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
    <script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.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 url ="https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
// 初始化地图信息
var map = L.map('map', {
    crs: L.CRS.EPSG4326,
    center: [0, 0],
    maxZoom: 18,
    zoom: 1
});
new L.supermap.TiledMapLayer(url).addTo(map);查看源码 »

运行效果

第三方地图

SuperMap iClient for Leaflet 对多种互联网地图信息进行了封装，例如百度地图、天地图等。以天地图为例，SuperMap iClient for Leaflet 提供了 TiandituTileLayer，代码如下：

                                <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_tiandituLayer_mecartor"></title>
    <script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    <script type="text/javascript" src="../../dist/include-leaflet.js"></script>
    <script type="text/javascript">
        var map = L.map('map', {
            center: [0, 0],
            zoom: 0,
            crs: L.supermap.CRS.TianDiTu_Mercator
        });
        // 添加天地图图层
        new L.supermap.TiandituTileLayer({
            layerType: "img",
            key: '1d109683f4d84198e37a38c442d68311'
        })
        .addTo(map);
        new L.supermap.TiandituTileLayer({
            layerType: 'img',
            isLabel: true,
            key: '1d109683f4d84198e37a38c442d68311'
        })
        .addTo(map);
    </script>
</body>
</html>查看源码 »

运行效果

为地图设置投影

SuperMap iClient for Leaflet 通过投影类 L.supermap.Proj.CRS 可以方便地定义地图投影，支持设置范围、原点、比例尺数组以及分辨率数组。例如：

                            // 定义地图投影
var crs = L.supermap.Proj.CRS("EPSG:4326", {
    origin: [114.59, 42.31],
    scaleDenominators: [100000, 50000, 25000, 20000, 10000, 5000, 2000, 1000, 500, 200, 100, 50, 20, 1]
});
var map = L.map('map', {
    crs: crs,
    center: [39.79, 116.85],
    maxZoom: 5,
    zoom: 0
});
new L.supermap.TiledMapLayer(url).addTo(map);查看源码 »

对于不支持或者用户自定义的投影，需要通过 Proj4js.defs[] 静态常量定义键值对实现。Proj4js 是一个投影相关的 JavaScript 脚本库，详细介绍请参见 Proj4js 官网: https://trac.osgeo.org/proj4js/。

目前 Proj4js 支持的坐标参考系有：

EPSG:4326 EPSG:4269 EPSG:3875
EPSG:4139 EPSG:4181 EPSG:3785
EPSG:4302 EPSG:21781 EPSG:102113
EPSG:26591 EPSG:26912 EPSG:27200
EPSG:27563 EPSG:41001 EPSG:4272
EPSG:42304 EPSG:102067 EPSG:102757
EPSG:102758 EPSG:900913 EPSG:GOOGLE

一个简单的投影信息描述如下：

                            Proj4js.defs("EPSG:21418","+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=18500000 +y_0=0 +ellps=krass +units=m +no_defs ");

有关各种投影的参数定义，可参考 https://spatialreference.org；如果已有定义，可搜索并查看其投影参数，例如 EPSG:21418，其投影参数为 https://spatialreference.org/ref/epsg/21418/proj4/。

对于用户自定义投影，可通过定义 EPSG code 和 defs 来创建投影，defs 内容为参考投影参数，其分别代表了名称、投影、转换到 WGS84 坐标系（三参数）、椭球长半轴、扁率、原点纬线、中央经线、两条标准纬线、东偏移量、北偏移量和单位等。

                            Proj4js.defs("EPSG:10010","+title=Beijing1954 +proj=lcc +towgs84=0.0000,0.0000,0.0000 +a=6378245.0000 +rf=298.3 +lat_0=0.00000000 +lon_0=104.000000000 +lat_1=24.000000000 +lat_2=40.000000000 +x_0=0.000 +y_0=0.000 +units=m +no_defs");

添加控件

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

控件 类名 简介
鹰眼图 L.control.minimap 默认位于地图右下角
缩放 L.control.zoom 默认位于地图左上角
比例尺 L.control.scale 默认位于地图左下角
图层切换 L.control.layers 默认位于地图右上角
卷帘 L.control.sideBySide 卷帘默认出现在地图中心

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

缩放控件：

                            // 添加控件
L.control.zoom().addTo(map);查看源码 »

运行效果

图层切换控件：

                            var url ="https://iserver.supermap.io";
var China = new L.supermap.TiledMapLayer(url + '/iserver/services/map-china400/rest/maps/China',{noWrap:true});
var ChinaDark = new L.supermap.TiledMapLayer(url + '/iserver/services/map-china400/rest/maps/ChinaDark', {noWrap:true});
// 初始化地图
var map = L.map('map', {
    center: {lon: 0, lat: 0},
    maxZoom: 18,
    zoom: 2,
    zoomControl: false,
    layers: [China, cities]
});
var baseMaps = { "China": China, "ChinaDark": ChinaDark };
// 添加图层切换控件
L.control.layers(baseMaps).addTo(map);查看源码 »

运行效果

使用矢量瓦片

矢量瓦片是将矢量数据通过不同的描述文件来组织和定义，在客户端实时解析数据并完成绘制。SuperMap iServer 提供了矢量瓦片图层，即 L.supermap.TiledVectorLayer(url, options)，其中：

  • url：地图服务地址
  • options：图层可选参数

使用默认风格的矢量瓦片示例

                            var url="https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
//创建一个矢量瓦片图层
var vectorLayer = new L.supermap.TiledVectorLayer(url, {
    cacheEnabled: true,
    returnAttributes: true,
    attribution: "Tile Data©SuperMap iServer with©SuperMap iClient"
}).addTo(map);
//矢量瓦片图层添加点击事件，设置默认风格
vectorLayer.on('click', function (evt) {
    var id = evt.layer.properties.id;
    var layerName = evt.layer.layerName;
    // 设置矢量瓦片图层样式
    var selectStyle = {
        fillColor: '#800026',
        fillOpacity: 0.5,
        stroke: true,
        fill: true,
        color: 'red',
        opacity: 1,
        weight: 2
    };
    vectorLayer.setFeatureStyle(id, layerName, selectStyle);
});查看源码 »

运行效果

绘制符号与图形

基本绘制

Leaflet 本身不支持点线面的绘制，需要引入插件 leaflet.draw.js，引入插件包括离线引用和在线引用两种方式。

离线引用需要先下载 leaflet.draw.js，再通过 <script> 标签引用：

  1.进入 github 下载 leaflet.draw.js，下载地址：

                                https://github.com/Leaflet/Leaflet.draw

  2.<script> 标签引入：

                                    <script src="leaflet.draw.js"></script>

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

                                <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>

引入插件后，通过以下代码实现点线面绘制功能：

                                            // 创建一个绘制图层
var editableLayers = new L.FeatureGroup();
// 绘制控件参数配置
var options = {
    position: 'topleft',
    draw: {
        polyline: {}, // 线
        polygon: {}, // 面
        circle: {}, // 圆
        rectangle:{}, // 矩形
        marker: {}, // 标记点
        remove: {}
    },
    edit: {
        featureGroup: editableLayers,
        remove: true
    }
};
// 创建并添加绘制控件
var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);
// 监听绘制事件
map.on(L.Draw.Event.CREATED, function (e) {
    var type = e.layerType, layer = e.layer;
    editableLayers.addLayer(layer);
});查看源码 »

运行效果

捕捉绘制

捕捉绘制是指绘制时鼠标进入到一个已经绘制好的点的一定容差范围内，鼠标点会被吸附到那个已经绘制好的点的位置。

Leaflet 本身不支持点线面的捕捉绘制，需要引入 leaflet-geoman 插件。

  1.<link> 和 <script> 标签引入：

                                    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css"/>
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>

  2.引入插件后，通过以下代码实现点捕捉绘制功能：

                                            // 捕捉绘制控件参数设置
var options = {
    position: 'topleft', // 控件位置
    drawMarker: true, // marker绘制是否可选
    drawPolygon: true, // drawPolygon绘制是否可选
    drawPolyline: true, // drawPolyline绘制是否可选
    editPolygon: true, // editPolygon编辑是否可选
    deleteLayer: true
};
// 添加捕捉绘制控件
map.pm.addControls(options);查看源码 »

运行效果

面积和距离量算

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

距离量算

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

1.构建服务参数类

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

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

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

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

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

运行效果

面积量算

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

                                // 设置测量范围
var polygon = L.polygon([[24, 100], [40, 100], [40, 120], [24, 120], [24, 100]], {color: "red"});
// 实例化传入多边形参数的测量构造函数
var areaMeasureParam = new L.supermap.MeasureParameters(polygon);

2.调用测量函数

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

                                // 提交服务请求，传递服务查询参数，获取返回结果并按照用户需求进行处理
new L.supermap.MeasureService(url).measureArea(areaMeasureParam).then(function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »

运行效果

地物查询

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

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

指定ID查询

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

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

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

运行效果

指定SQL查询

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

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

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

运行效果

矩形范围查询

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

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

                                     var url =  "https://iserver.supermap.io/iserver/services/data-world/rest/data";
// 指定矩形范围查询处理
var polygon = L.polygon([[-20, 20], [0, 20], [0, 40], [-20, 40], [-20, 20]], {color: 'red'});
// 设置矩形范围查询参数
var boundsParam = new L.supermap.GetFeaturesByBoundsParameters({
    datasetNames: ["World:Capitals"],
    bounds: polygon.getBounds()
});
// 创建矩形范围查询实例
new L.supermap.FeatureService(url).getFeaturesByBounds(boundsParam).then(function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »

运行效果

任意几何范围查询

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

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

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

运行效果

距离查询

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

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

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

运行效果

缓冲区查询

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

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

                                    var url = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
// 设置缓冲区查询范围
var polygon = L.polygon([[-20, 20], [0, 20], [0, 40], [-20, 40], [-20, 20]], {color: 'red'});
// 设置缓冲区查询参数
var bufferParam = new L.supermap.GetFeaturesByBufferParameters({
    datasetNames: ["World:Capitals"],
    bufferDistance: 10, // bufferDistance的单位跟地物的坐标系单位一致，此处为度
    geometry:polygon
});
// 创建缓冲区查询实例
new L.supermap.FeatureService(url).getFeaturesByBuffer(bufferParam).then(function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »

运行效果

查询栅格信息

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

使用接口 L.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 L.supermap.GetGridCellInfosParameters({
        dataSourceName: "World",
        datasetName:"WorldEarth",
        X: x,
        Y: y
    });
    // 创建栅格查询实例
    new L.supermap.GridCellInfosService(url).getGridCellInfos(getGridCellInfosParam).then(function(serviceResult) {
        // 获取服务端返回数据
        var result = serviceResult.result;
    });
});查看源码 »

运行效果

查询字段信息

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

使用接口 L.supermap.FieldService 在数据集 “continent_T” 中查询字段为 “SmID” 的字段信息。

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

运行效果

地物编辑

地物编辑

地物编辑，包括对点、线、面等几何图形进行编辑设置，如线型、颜色、线宽等。如果没有自定义设置几何图形的样式，交互控件也会用默认样式进行绘制。

使用接口 L.supermap.FeatureService 在数据集 “Capitals” 中添加地物信息。

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

运行效果

客户端专题图

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

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

  • 单值专题图
  • 分段专题图
  • 等级符号专题图
  • 标签专题图
  • 统计专题图
单值专题图

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

SuperMap iClient for Leaflet 实现单值专题图，代码如下：

                                //创建Unique单值专题图层
var themeLayer = new L.supermap.UniqueThemeLayer("ThemeLayer", {
    // 开启hover高亮效果
    isHoverAble: true,
    opacity: 0.8,
    alwaysMapCRS: true
}).addTo(map);
// 图层基础样式
themeLayer.style = new L.supermap.ThemeStyle({
    shadowBlur: 3,
    shadowColor: "#000000",
    shadowOffsetX: 1,
    shadowOffsetY: 1,
    fillColor: "#FFFFFF"
});
// hover高亮样式
themeLayer.highlightStyle = new L.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 Leaflet 实现分段专题图，主要代码如下：

                                //定义rangeThemeLayer分段专题图层
var themeLayer = new L.supermap.RangeThemeLayer("ThemeLayer", {
    // 开启hover高亮效果
    isHoverAble: true,
    opacity: 0.8,
    alwaysMapCRS: true
}).addTo(map);
themeLayer.style = new L.supermap.ThemeStyle({
    shadowBlur: 16,
    shadowColor: "#000000",
    fillColor: "#FFFFFF"
});
// hover高亮样式
themeLayer.highlightStyle = new L.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 Leaflet 实现等级符号专题图为例，主要代码如下：

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

运行效果

标签专题图

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

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

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

运行效果

统计专题图

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

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

SuperMap iClient for Leaflet 实现统计专题图，主要代码如下：

                                // 柱状图和三维柱状图的图表配置
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 L.supermap.GraphThemeLayer("BarLayer", "Bar", themeLayerOptions);
map.addLayer(themeLayer);查看源码 »

运行效果

空间分析

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

  • 缓冲区分析
  • 泰森多边形
  • 叠加分析
  • 最近距离计算
  • 表面分析
  • 动态分段
  • 点定里程
  • 里程定点
  • 里程定线
  • 插值分析
  • 栅格代数运算
  • 地形坡度计算
  • 地形坡向计算
  • 地形曲率计算
  • 填挖方计算
  • 核密度分析

缓冲区分析

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

下面以长春数据为例，对“团结路”进行半径为 10 m 的圆头缓冲分析，缓冲区分析的接口使用方法如下：

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

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

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

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

运行效果

泰森多边形

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

泰森多边形的特性为：

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

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

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

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

运行效果

叠加分析

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

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

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

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

设置叠加分析参数：

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

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

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

运行效果

最近距离计算

最近距离计算指的是在指定地图上，计算“被计算数据集”中每一个要素到“参考数据集”中在查询范围内的所有要素的距离中的最小值。“被计算数据集”目前仅支持二维点数据集，“参考数据集”可以是二维点、线、面数据集或二维网络数据集。

下面以长春数据为例，查找距离某一点最近的几何对象，其接口使用方法如下所示： 

                                // 用于计算最近距离的点对象
pointGeometryData = {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [2000, -3500]
    }
};
// 最近距离计算参数设置
var minDistanceAnalystParameters = new L.supermap.GeometryMinDistanceAnalystParameters({
    inputGeometries: [pointGeometryData],
    referenceDatasetName: "Park@Changchun",
    createResultDataset: false,
    minDistance: 0,
    maxDistance: -1 // 当设置为 -1 时，表示不限制最大查询距离
})
// 创建最近距离计算服务实例
serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";
var minDistanceAnalystService = new L.supermap.SpatialAnalystService(serviceUrl);
// 向服务端发送请求并获取数据
minDistanceAnalystService.minDistanceAnalysis(minDistanceAnalystParameters).then(function (serviceResult) {
    // 获取服务端返回的数据
    var minDistanceAnalystResult = serviceResult.result.distanceResults;
});查看源码 »

运行效果

提取等值线/面

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

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

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

                                // 剪裁区域设置
var region = L.polygon([[4010338,0],[4010338,1063524],[3150322,1063524],[3150322,0]]);
// 表面分析参数设置
var extractParams = new L.supermap.SurfaceAnalystParametersSetting({
    datumValue: 0, // 表面分析中提取等值线基准值
    interval: 2, // 等值距，两条等值线之间的间隔值
    resampleTolerance: 0, // 重采样容限
    smoothMethod: new L.supermap.SmoothMethod.BSPLINE, // 光滑处理所使用的方法
    smoothness: 3, // 等值线的光滑度
    clipRegion: region // 裁剪对象
});
// 表面分析提取操作参数
var surfaceAnalystParams = new L.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 L.supermap.SpatialAnalystService(serviceUrl);
// 向服务端发送请求，并对返回的结果进行处理
surfaceAnalystService.surfaceAnalysis(surfaceAnalystParams).then(function (serviceResult) {
    // 获取返回的features数据
    var features = serviceResult.result.regions;
});查看源码 »

运行效果

动态分段

动态分段技术是在传统 GIS 数据模型的基础上，利用线性参考技术，实现属性数据在地图上动态地显示、分析及输出等，是 GIS 空间分析中的一个重要技术手段。它不是在线要素沿线上某种属性发生变化的地方进行“物理分段”，而是在传统的 GIS 数据模型的基础上利用线性参考系统的思想及算法，将属性的沿线变化存储为独立的属性表字段（事件属性表）；在分析、显示、查询和输出时直接依据事件属性表中的距离值对线性要素进行动态逻辑分段，使用相对位置描述发生在线上的事件，比传统 GIS 要素更容易定位。除此之外，该技术还提高了数据制作效率和数据存储空间利用率，降低了数据维护的复杂度。目前已广泛应用于公共交通管理、路面质量管理、航海线路模拟、通讯网络管理、电网管理等诸多领域。

本专题将以长春市道路的数据为例，根据某一时刻的某些道路出现拥堵和车路段辆较多现象，利用动态分段技术在客户端实时动态显示出道路的路况（拥挤/缓行/畅通），以提示驾驶人员避免进入拥堵路段，选择合适的行驶路线。动态分段接口使用方法如下：

在客户端设置用于向服务端发送的动态分段各参数，包括数据返回选项 DataReturnOption、动态分段参数 generateSpatialDataParams。

                                // 配置动态分段参数
var generateSpatialDataParams = new L.supermap.GenerateSpatialDataParameters({
    routeTable: "RouteDT_road@Changchun", // 路由数据集
    // 路由数据集的标识字段，即路由ID
    routeIDField: "RouteID",
    // 用于生成空间数据的事件表名
    eventTable: "LinearEventTabDT@Changchun",
    // 用于生成空间数据的事件表的路由标识字段
    eventRouteIDField: "RouteID",
    measureField: "", // 用于生成空间数据的事件表的刻度字段
    measureStartField: "LineMeasureFrom", // 事件表的起始刻度字段
    measureEndField: "LineMeasureTo", // 事件表的终止刻度字段
    measureOffsetField: "", // 刻度偏移量字段
    errorInfoField: "", // 错误信息字段
    //设置数据返回选项
    dataReturnOption: new L.supermap.DataReturnOption({
        expectCount: 1000, // 设置返回的最大记录数
        dataset: "generateSpatialData@Changchun",
        // 如果用户命名的结果数据集名称与已有的数据集重名，则删除已有的数据集
        deleteExistResultDataset: true,
        // 设置数据返回模式为DATASET_ONLY，返回数据集的名称
        dataReturnMode: L.supermap.DataReturnMode.DATASET_ONLY
    })
});

定义动态分段服务对象，用于将客户端设置的动态分段分析服务参数（generateSpatialDataParams ）传递给服务端，并接收服务端返回的动态分段分析结果数据。当向服务端发送请求并且服务端成功返回结果时，用户可在客户端对获得的动态分段空间数据做相应处理，将空间数据中的路况信息以专题图的形式展现给用户。 

                                var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst"
// 创建动态分段服务实例
var generateSpatialDataService = new L.supermap.SpatialAnalystService(serviceUrl);
// 向服务端发送请求，并将返回的结果以专题图的形式展现在客户端
generateSpatialDataService.generateSpatialData(generateSpatialDataParams).then(function (serviceResult) {
    // 获取返回的数据
    var result = serviceResult.result;
});查看源码 »

运行效果

点定里程

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

下面以长春数据为例，计算一条路上（路由 ID 为 1690 的路由）发生交通事故的地点到该条路路口的距离。

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

地图加载完成后进行点定里程分析服务，首先根据 RouteID 获得路由对象，路由对象查询成功之后才能进行后续的点定里程操作。

                                // 通过SQL查询建立路由
var queryBySQLService = new L.supermap.QueryService(baseUrl);
// 设置SQL查询参数
var queryBySQLParams = new L.supermap.QueryBySQLParameters({
    queryParams: [
        new L.supermap.FilterParameter({
            name: "RouteDT_road@Changchun",
            attributeFilter: "RouteID=1690"
        })
    ]
});
// 创建SQL查询
queryBySQLService.queryBySQL(queryBySQLParams).then(function (serviceResult) {
    // 获取SQL查询结果
    var queryBySQLResult = SQLQueryServiceResult.result.recordsets[0].features;
    // 将形成路由的点提出来，为了构造下面点定里程服务sourceRoute
    var pointsList = [];
    var routeObj = queryBySQLResult.features[0].geometry.coordinates[0];
    for (var i = 0; i < routeObj.length; i++) {
        pointsList.push([routeObj[i][0], routeObj[i][1],routeObj[i][2]])
    }
    routeLine = L.polyline(pointsList);
    // 创建点定里程服务实例
    var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";
    var routeCalculateMeasureService = new L.supermap.SpatialAnalystService(serviceUrl);
    // 点定里程服务参数设置
    var routeCalculateMeasureParameters = new L.supermap.RouteCalculateMeasureParameters({
        "sourceRoute": routeLine, // 路由类型
        "point": L.point(routeObj[7][0], routeObj[7][1]),// 查询点
        "tolerance": 10,
        "isIgnoreGap": false
    });
    // 向服务端发送请求并获取数据
    routeCalculateMeasureService.routeCalculateMeasure(routeCalculateMeasureParameters).then(function (routeCalculateServiceResult) {
        // 获取服务端返回的数据
        var result = routeCalculateServiceResult.result;
    });
});查看源码 »

运行效果

里程定点

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

下面以长春数据为例，确定一条发生交通事故的路上（路由 ID 为 1690 的路由）与路口距离为 200 m 的事故点，里程定点的接口使用方法：

地图加载完成后进行里程定点分析服务，首先根据 RouteID 获得路由对象，路由对象查询成功之后才能进行后续的里程定点操作。

                                // 通过SQL查询建立路由
var queryBySQLService = new L.supermap.QueryService(baseUrl);
// 设置SQL查询参数
queryBySQLParams = new L.supermap.QueryBySQLParameters({
    queryParams: [
        new L.supermap.FilterParameter({
            name: "RouteDT_road@Changchun",
            attributeFilter: "RouteID=1690"
        })]
});
// 创建SQL查询
queryBySQLService.queryBySQL(queryBySQLParams).then(function (serviceResult) {
    // 将形成路由的点提出来，为了构造下面里程定点服务sourceRoute属性的routeLine
    var pointsList = [];
    var routeObj = serviceResult.result.recordsets[0].features.features[0].geometry.coordinates[0];
    for (var i = 0; i < routeObj.length; i++) {
        pointsList.push([routeObj[i][1], routeObj[i][0], routeObj[i][2]])
    }
    var routeLine = L.polyline(pointsList);
    // 创建里程定点服务实例
    var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";
    var routeLocatorService = new L.supermap.SpatialAnalystService(serviceUrl);
    // 里程定点参数设置
    var routeLocatorParams_point = new L.supermap.RouteLocatorParameters({
        "sourceRoute": routeLine, // 路由对象
        "type": "POINT", // 类型，点或线
        "measure": 200, // 里程值
        "offset": 0, // 定位点偏移量
        "isIgnoreGap": true // 是否忽略子对象之间的距离
    });
    // 向服务器发送请求进行里程定点服务分析，并将返回的结果进行处理展现在客户端上
    routeLocatorService.routeLocate(routeLocatorParams_point).then(function (serviceResult) {
        // 获取服务端返回的数据
        var result = routeCalculateServiceResult.result;
    });
});查看源码 »

运行效果

里程定线

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

下面以长春数据为例，一条路（路由 ID 为 1690 的路由）在距离路口 10-800 m 之间的发生堵塞。

地图加载完成后进行里程定线分析服务，首先根据 RouteID 获得路由对象，路由对象查询成功之后才能进行后续的里程定线操作。里程定线的接口使用方法如下：

                                        // 通过 SQL 查询的方法建立路由
var queryBySQLService = new L.supermap.QueryService(baseUrl);
// SQL查询服务参数设置
var queryBySQLParams = new L.supermap.QueryBySQLParameters({
    queryParams: [
        new L.supermap.FilterParameter({
            name: "RouteDT_road@Changchun",
            attributeFilter: "RouteID=1690"
        })]
    });
// 创建SQL查询
queryBySQLService.queryBySQL(queryBySQLParams).then(function (serviceResult) {
    // 将形成路由的点提出来，为了构造下面里程定线服务sourceRoute属性的routeLine
    var pointsList = [];
    var routeObj = serviceResult.result.recordsets[0].features.features[0].geometry.coordinates[0];
    for (var i = 0; i < routeObj.length; i++) {
        pointsList.push([routeObj[i][1], routeObj[i][0], routeObj[i][2]])
    }
    var routeLine = L.polyline(pointsList);
    // 里程定线参数设置
    var routeLocatorParams_line = new L.supermap.RouteLocatorParameters({
        "sourceRoute": routeLine, // 路由对象
        "type": "LINE", // 类型，点或线
        "startMeasure": 10, // 定位线的起始M值
        "endMeasure": 800, // 定位线的终止M值
        "isIgnoreGap": true // 是否忽略子对象之间的距离
    });
    // 创建里程定线服务实例
    var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";
    var routeLocatorService = new L.supermap.SpatialAnalystService(serviceUrl);
    // 向服务器发送请求进行里程定线服务分析，并将返回的结果进行处理展现在客户端上
    routeLocatorService.routeLocate(routeLocatorParams_line).then(function (serviceResult) {
        // 获取服务端返回的数据
        var result = routeCalculateServiceResult.result;
    })
});查看源码 »

运行效果

插值分析

插值分析可以将有限的采样点数据，通过插值对采样点周围的数值情况进行预测，从而掌握研究区域内数据的总体分布状况，而使采样的离散点不仅仅反映其所在位置的数值情况，而且可以反映区域的数值分布。SuperMap 中提供三种插值方法，分别是：距离反比权重法（IDW）、克吕金插值方法（Kriging）、径向基函数插值法（RBF）。选用何种方法进行插值分析，通常取决于样点数据的分布和要创建表面的类型。

无论选择哪种插值方法，已知点的数据越多，分布越广，插值结果将越接近实际情况。下面以距离反比权重法为例。

                                // 创建反距离加权插值分析参数实例
var interpolationAnalystParameters = new L.supermap.InterpolationIDWAnalystParameters({
    // 用于做插值分析的数据源中数据集的名称
    dataset: "SamplesP@Interpolation",
    // 插值分析结果数据集的名称
    outputDatasetName: "IDW_result",
    // 插值分析结果数据源的名称
    outputDatasourceName: "Interpolation",
    // 结果栅格数据集存储的像素格式
    pixelFormat: L.supermap.PixelFormat.DOUBLE,
    // 存储用于进行插值分析的字段名称
    zValueFieldName: "AVG_TMP",
    resolution: 7923.84989108,
    // 采取固定点数查找参与运算点的方式
    searchMode: "KDTREE_FIXED_COUNT",
    // 固定点数查找方式下，参与插值运算的点数默认为12
    expectedCount: 12,
    bounds: L.bounds([-2640403.63, 1873792.1], [3247669.39, 5921501.4])
});
// 创建点密度插值分析服务实例
var interpolationAnalystService = new L.supermap.SpatialAnalystService(serviceUrl).interpolationAnalysis(interpolationAnalystParameters).then(
    function (serviceResult) {
        // 获取服务端返回的数据
        interpolationAnalystResult = serviceResult.result;
    }
);查看源码 »

运行效果

栅格代数运算

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

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

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

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

运行效果

地形坡度计算

坡度是表示地球面某一位置的高度变化率的量度，是重要的地形特征因子之一。地形坡度计算用于计算栅格数据集中各个像元的坡度值。坡度值越大，地势越陡峭；坡度值越小，地势越平坦。坡度分析提供了三种坡度表现形式：度数、弧度、百分比。由于计算点的坡度没有实际意义，因此在 SuperMap 中，坡度计算的是各像元平面的平均值。

下面以京津数据为例，计算各个像元的坡度值。在进行计算之前，需要先初始化地图，地图加载完成后进行地形坡度计算分析，其接口使用方法如下所示：

                                // 坡度计算参数设置
var terrainSlopeCalculationParameters = new L.supermap.TerrainSlopeCalculationParameters({
    dataset: "JingjinTerrain@Jingjin",
    zFactor:0.00001, // 高程缩放系数
    slopeType:"DEGREE", // 结果坡度的单位类型
    terrainAnalystSetting: new L.supermap.terrainAnalystSetting({
        boundsType: L.supermap.BoundsType.UNION, // 分析结果数据集范围类型
        cellSizeType: L.supermap.CellSizeType.MAX // 分析结果数据集的单元格类型
    }), 
    resultDatasetName:"testSlope", 
    deleteExistResultDataset:true
});
// 创建地形坡度计算服务实例
var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
// 向服务端发送请求并获取数据
var terrainSlopeCalculationService = new L.supermap.SpatialAnalystService(serviceUrl);
terrainSlopeCalculationService.terrainAspectCalculate(terrainSlopeCalculationParameters).then(function (serviceResult) {
    // 获取服务端返回的数据
    var terrainSlopeCalculationResult = serviceResult.result;
});查看源码 »

运行效果

地形坡向计算

坡向指的是坡度变化的方向，表示地表面某一位置斜坡方向变化的量度，坡向是重要的地形特征因子之一。坡向分析用于计算栅格数据集中各个像元的坡度面的朝向。坡向计算的范围是 0 到 360°，以正北方 0° 为开始，按顺时针移动，回到正北方以 360° 结束。平坦的坡面没有方向，赋值为 -1。

下面以京津数据为例，计算各个像元的坡向值。在进行计算之前，需要先初始化地图，地图加载完成后进行地形坡向计算分析，其接口使用方法如下所示：

                                // 坡向计算参数设置
var terrainAspectCalculationParameters = new L.supermap.TerrainAspectCalculationParameters({
    dataset: "JingjinTerrain@Jingjin",
    // 地形分析基本的环境设置
    terrainAnalystSetting: new L.supermap.terrainAnalystSetting({
        boundsType: L.supermap.BoundsType.UNION,// 分析结果数据集范围类型
        cellSizeType: L.supermap.CellSizeType.MAX// 分析结果数据集的单元格类型
    }), 
    resultDatasetName:"testAspect", 
    deleteExistResultDataset:true
})

// 创建地形坡向计算服务实例
var serviceUrl ="https://iserver.supermap.io/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
// 向服务端发送请求并获取数据
var terrainAspectCalculationService = new L.supermap.SpatialAnalystService(serviceUrl);
terrainAspectCalculationService.terrainAspectCalculate(terrainAspectCalculationParameters).then(function (serviceResult) {
    // 获取服务端返回的数据
    var terrainAspectCalculationResult = serviceResult.result;
});查看源码 »

运行效果

地形曲率计算

地形曲率计算用于栅格数据表面的曲率。曲率是表面的二阶导数，或者可称之为坡度的坡度，地形曲率是表达地形曲面结构的主要参数之一。输出结果为地形栅格每个像元的表面曲率，该值通过将该像元与八个相邻像元拟合而得。结果输出为栅格数据集，可输出曲率类型为：平均曲率、剖面曲率和平面曲率，平均曲率为必须输出的结果，剖面曲率和平面曲率为可选择输出。其中，剖面曲率是指沿最大斜率方向的曲率，平面曲率是指垂直于最大斜率方向的曲率。

高程缩放系数：计算曲率时，要求地形栅格值（即高程值）的单位与 x，y 坐标的单位相同，通常需要将高程值乘以一个高程缩放系数，使得三者单位一致。例如，X、Y 方向上的单位是米，而 Z 方向的单位是英尺，由于 1 英尺等于 0.3048 米，则需要指定缩放系数为 0.3048。如果设置为 1，表示不缩放。

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

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

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

运行效果

填挖方计算

地表经常由于沉积和侵蚀等作用引起表面物质的迁移，表现为地表某些区域的表面物质增加，而某些区域的表面物质减少。在工程中，通常将表面物质的减少称为“挖方”，将表面物质的增加称为“填方”，将一种情况变为另一种情况时需要计算填/挖的面积和体积。 填挖方计算用于计算两个栅格数据集（填挖方前和填挖方后栅格数据集）之间体积和面积的变化，填挖方的计算结果由填挖方后的数据与填挖方前的数据相减得出。填挖方分析包含四种类型：栅格填挖方、选面填挖方、斜面填挖方和三维面填挖方。

下面以京津数据为例，采用填挖方分析计算某一区域内填充和挖掘的面积和体积，其接口使用方法如下所示： 

                                // 填挖方计算参数设置
var terrainCutFillCalculationParameters = new L.supermap.TerrainCutFillCalculationParameters({
    dataset: "JingjinTerrain@Jingjin",
    cutFillType:"REGION3D",
    // 填挖方对象为三维面对象
    region3D: new L.supermap.Geometry3D({
        points:[
            {"x":116.2,"y":40.1,"z":-5.0},
            {"x":116.5,"y":40.5,"z":0.0},
            {"x":116.5,"y":40.1,"z":30.0},
            {"x":116.2,"y":40.1,"z":-5.0}
        ],
        rotationX: 0.0,
        rotationY: 0.0,
        rotationZ: 0.0,
        scaleX: 0.0,
        scaleY: 0.0,
        scaleZ: 0.0,
        type: "REGION3D",
    }),
    resultDataset:"cutfill", 
    buildPyramid:true,// 是否对结果栅格数据集创建金字塔
    deleteExistResultDataset:true
});
// 创建填挖方计算服务实例
serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";
var terrainCutFillCalculateService = new L.supermap.SpatialAnalystService(serviceUrl);
// 向服务端发送请求并获取数据
terrainCutFillCalculateService.minDistanceAnalysis(minDistanceAnalystParameters).then(function (serviceResult) {
    // 获取服务端返回的数据
    var terrainCutFillCalculationResult = serviceResult.result;
});查看源码 »

运行效果

核密度分析

核密度分析用于计算点、线要素测量值在指定邻域范围内的单位密度。简单来说，它能直观地反映出离散测量值在连续区域内的分布情况。其结果是中间值大周边值小的光滑曲面，栅格值即为单位密度，在邻域边界处降为 0。

密度分析可用于计算人口密度、建筑密度、获取犯罪情况报告、旅游区人口密度监测、连锁店经营情况分析等等。例如：

某街区分布了多栋高层公寓及住宅，已知每栋的入住人数，想要了解街区内各处的人口分布情况，即可使用此功能，相当于将每栋楼的人口数量以核函数的变化趋势分布到指定的圆形邻域内，然后对重叠区域进行加和，最后得到街区内各处的人口密度。而人口密度结果可用于店铺选址决策、犯罪率估算等。

在进行核密度分析之前，需要先初始化地图。

地图加载完成后进行核密度分析服务。

                                // 创建点密度插值分析参数实例
var densityAnalystParameters = new L.supermap.DensityKernelAnalystParameters({
    // 指定数据集
    dataset: "Railway@Changchun",
    // 指定范围
    bounds: L.bounds([3800, -3800], [8200, -2200]),
    // 指定数据集中用于核密度分析的字段
    fieldName: "SmLength",
    // Railway@Changchun的单位是米
    searchRadius: 50,
    // 结果数据集名称
    resultGridName: "KernelDensity_Result",
    deleteExistResultDataset: true
});
// 创建核密度分析服务实例
var densityAnalystService = new L.supermap.SpatialAnalystService(serviceUrl);
densityAnalystService.densityAnalysis(densityAnalystParameters).then(function (densityServiceResult) {
    // 获取服务端返回的数据
    var densityAnalystResult = serviceResult.result;
});查看源码 »

运行效果

交通换乘分析

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

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

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

1. 交通换乘方案查询

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

                                    // 定义公交换乘方案查询
paths.points = [26, 180];
// 配置公交换乘方案查询参数
var params = new L.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 L.supermap.TrafficTransferAnalystService(serviceUrl)
    .analysisTransferSolution(params).then(function (serviceResult) {
        // 获取服务端返回的结果
        var result = serviceResult.result;
    });查看源码 »

2. 乘车路线查询

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

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

运行效果

这里仅展示最少时间查询结果，其中起始站点为省汽修，终点站点为中安大厦，查询效果如下所示：

网络分析

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

  • 服务区分析
  • 查找最近设施
  • 选址分区分析
  • 多旅行商分析/物流配送
  • 最佳路径分析
  • 连通性分析
  • 上游/下游追踪分析

服务区分析

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

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

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

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

                        //添加中心点
var marker = L.marker([-3375, 5605]);
// 网络分析结果参数
var resultSetting = new L.supermap.TransportationAnalystResultSetting({
    // 是否在分析结果中包含弧段要素集合
    returnEdgeFeatures: true,
    // 返回的弧段要素集合中是否包含几何对象信息
    returnEdgeGeometry: true,
    // 返回的结果中是否包含经过弧段ID集合
    returnEdgeIDs: true,
    // 返回的分析结果总是否包含结点要素集合
    returnNodeFeatures: true,
    // 返回的结点要素集合中是否包含几何对象信息
    returnNodeGeometry: true,
    // 返回的分析结果中是否包含经过结点ID集合
    returnNodeIDs: true,
    // 返回分析结果中是否包含行驶导引集合
    returnPathGuides: true,
    // 返回结果中是否包含路由对象集合
    returnRoutes: true
};
// 网络分析通用参数
var analystParameter = new L.supermap.TransportationAnalystParameter({
    // 分析结果返回的内容
    resultSetting: resultSetting,
    // 阻力字段的名称
    weightFieldName: "length"
});
// 服务区分析参数
var findServiceAreasParams = new L.supermap.FindServiceAreasParameters({
    // 服务站点数组
    centers: [marker.getLatLng()],
    // 是否通过结点 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 L.supermap.NetworkAnalystService(serviceUrl);
// 向服务器发送请求，并获取返回的结果
service.findServiceAreas(findServiceAreasParams).then(function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »

运行效果

查找最近设施

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

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

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

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

定义最近设施分析对象，用于将客户端设置的最近设施查找分析服务参数传递给服务端， 并接收服务端返回的最近设施分析结果。当向服务端发送请求并且服务端成功返回结果时，用户可对获得的最近设施分析结果做相应处理。 

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

运行效果

选址分区分析

选址分区分析是为了确定一个或多个待建设施的最佳或最优位置，使得设施可以用一种最经济有效的方式为需求方提供服务或者商品。选址分区不仅仅是一个选址过程，还要将需求点的需求分配到相应的新建设施的服务区中，因此称之为选址与分区。

设置选址分区分析参数，包括交通网络分析通用参数、途经站点等。

                        // 设置设施点的资源供给中心
var supplyCenterType_FIXEDCENTER = new L.supermap.SupplyCenterType.FIXEDCENTER;
var supplyCenterType_NULL = new L.supermap.SupplyCenterType.NULL;
var supplyCenterType_OPTIONALCENTER = new L.supermap.SupplyCenterType.OPTIONALCENTER;
// 以一个中心点为例
var supplyCenters = [new L.supermap.SupplyCenter({
    maxWeight: 500,             // 资源供给中心的最大耗费值，必设
    nodeID: 139,                // 资源供给中心点的结点ID号，必设
    resourceValue: 100,         // 资源供给中心能提供的最大服务量或商品数量，必设
    type: supplyCenterType_OPTIONALCENTER      //选址分区中资源中心的类型包括固定中心和可选中心两种
})];
// 设置选址分区分析参数
findLocationParameter = new L.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 L.supermap.NetworkAnalystService(serviceUrl);
// 向服务端发送请求，并对返回结果进行处理
findLocationService.findLocation(findLocationParams).then(function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »

运行效果

多旅行商分析/物流配送

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

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

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

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

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

通过向服务端提交物流配送分析的请求参数，待服务端成功处理并返回分析处理结果后对其进行解析，获得由配送中心依次向各个配送目的地配送货物的最佳路径。

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

运行效果

最佳路径分析

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

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

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

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

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

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

运行效果

连通性分析

在现实生活中，网络可能不是完全连通的。如果需要确定哪些点或者弧段之间是连通的，哪些点或弧段之间不连通，可以使用连通性分析。连通性分析的最大特点是不需要考虑网络阻力（既不考虑转向权值，也不考虑禁止通行的情况），网络上的要素只有连通和不连通的区别。

下面以长春数据为例，通过连通性分析查找区域里相连通或不连通的道路，其接口使用方法如下所示：

设置连通性分析参数 connectedEdgesAnalystParameters，包括是查询连通弧段还是不连通弧段、分析返回结果等。 

                        // 连通性分析参数
var connectedEdgesAnalystParameters = new L.supermap.ConnectedEdgesAnalystParameters({
    edgeIDs:[100],// 结点 ID
    connected: true// 查询相连通的弧段
});

向服务端提交连通性分析的请求并接收服务端返回的连通性分析结果。当向服务端发送请求并且服务端成功返回结果时，用户可对获得的连通性分析结果做相应处理。

                        // 创建连通性分析服务实例
var serviceUrl = "https://iserver.supermap.io/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun";
var connectedEdgesAnalystService = new L.supermap.NetworkAnalystService(serviceUrl)；
connectedEdgesAnalystService.connectedEdgesAnalyst(connectedEdgesAnalystParameters).then(function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;        
});查看源码 »

运行效果

上游/下游追踪分析

上游/下游追踪分析指的是从一个结点开始，按照一定的条件搜索此结点能够达到的上游或者下游所流经所有弧段的网络集合。例如，如果水域某处发生污染，通过上游追踪分析可以寻找污染物可能来自哪些水域，同时通过下游追踪分析可以寻找污染源污染的范围。追踪分析的数据必须具有流向。

下面以长春数据为例，追踪地图中某一结点的上游弧段。其接口使用方法如下：

设置追踪分析参数 traceAnalystParameters，包括追踪分析类型、需查找上游设施的弧段或结点 ID、不确定流向是否有效等参数。 

                        // 追踪分析参数
var traceAnalystParameters = new L.supermap.TraceAnalystParameters({
    edgeID:101,
    traceType:0,// 0 为上游追踪，1 为下游追踪
    weightName:"",
    isUncertainDirectionValid: true,// true 表示不确定流向有效，false 表示不确定流向无效
    returnFeatures: true
});

向服务端提交追踪分析的请求并接收服务端返回的追踪分析结果。当向服务端发送请求并且服务端成功返回结果时，用户可对获得的追踪分析结果做相应处理。

                        // 创建追踪分析实例
var serviceUrl = "https://iserver.supermap.io/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun";
var traceAnalystService = new L.supermap.NetworkAnalystService(serviceUrl);
// 向服务器发送请求，并对返回的结果进行分析处理
traceAnalystService.traceAnalyst(traceAnalystParameters).then(function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
}); 查看源码 »

运行效果

客户端计算

SuperMap iClient for Leaflet 提供 Turf.js 分析接口，以支持客户端计算。

Turf.js 是一个用于空间分析的 JavaScript 库。它包括传统的空间操作，用于创建 GeoJSON数据的帮助函数，以及数据分类和统计工具。 Turf.js 可以作为客户端插件添加到您的网站，也可以使用 Node.js 运行 Turf 服务器。

Turf.js 使用 GeoJSON 来处理所有地理数据。Turf.js 的数据标准是 WGS84 经度、纬度坐标，使用 geojson.io 这个工具轻松创建此数据。

大多数 Turf.js 函数使用 GeoJSON功能。这些是表示属性集合（即：人口，高程，邮政编码等）以及几何的数据片段。 GeoJSON 有几种几何类型，如：

  • Point
  • LineString
  • Polygon

该示例需要引入

Turf (https://github.com/Turfjs/turf/)

以 Turf 格网分析为例

                            //初始化turfLayer
var turfLayer = new L.supermap.TurfLayer(gridAnalyst.turfLayerOptions).addTo(map);
// 以Grids.squareGrid分析类型为例进行客户端计算
turfLayer.process("Grids.squareGrid", {
    "bbox": bbox,
    "cellSide": cellSide,
    "units": units,
    "completelyWithin": completelyWithin
});查看源码 »

运行效果

地址匹配

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

正向地址匹配

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

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

运行效果

反向地址匹配

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

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

运行效果

大数据分析

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

  • 密度分析
  • 点聚合分析
  • 单对象空间查询分析
  • 区域汇总分析
  • 矢量裁剪分析
  • 属性汇总分析
  • 拓扑检查分析

密度分析

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

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

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

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

                        // 密度分析参数
var kernelDensityJobParam = new L.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: L.supermap.AnalystSizeUnit.METER, // 网格大小单位
    radiusUnit: L.supermap.AnalystSizeUnit.METER, // 搜索半径单位
    areaUnit: L.supermap.AnalystAreaUnit.SQUAREMILE, // 面积单位
});

向服务端提交密度分析的请求，获取服务端成功处理并返回的密度分析结果。 

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

运行效果

点聚合分析

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

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

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

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

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

向服务端提交点聚合分析的请求，待服务端成功处理并返回点聚合分析结果后对其进行解析处理。

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

运行效果

单对象空间查询分析

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

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

该示例需要引入

Leaflet.draw (https://github.com/Leaflet/Leaflet.draw/)

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

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

                        // 单对象空间查询分析参数
var singleObjectQueryJobsParam = new L.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 L.supermap.ProcessingService(processingUrl);
// 向服务器发送请求进行单对象空间查询分析服务，并对返回结果进行处理展现在地图上
processingService.addQueryJob(singleObjectQueryJobsParam).then(function (serviceResult){
    // 获取服务端返回的数据
    var result = serviceResult.result;
});查看源码 »

运行效果

区域汇总分析

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

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

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

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

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

向服务端提交区域汇总分析的请求，待服务端成功处理并返回区域汇总分析结果后对其进行解析处理。

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

运行效果

矢量裁剪分析

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

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

该示例需要引入

                            Leaflet.draw (https://github.com/Leaflet/Leaflet.draw/)

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

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

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

向服务端提交矢量裁剪分析的请求，待服务端成功处理并返回矢量裁剪分析结果后对其进行解析处理。

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

运行效果

属性汇总分析

属性汇总统计，指的是对输入的数据集中所选择的属性进行汇总统计。通过对输入的数据集设定分组字段、属性字段以及对属性字段需进行的统计模式，从而得到汇总统计的结果。

SuperMap iServer 的分布式分析服务中的属性汇总分析，默认将对所有对象进行属性汇总统计，也可使用逗号","分隔，设置多个字段，对对象进行分组后，每组分别进行属性汇总。属性汇总分析支持的统计模式有：max、min、average、sum、variance、stdDeviation。

下面进行属性汇总分析，统计模式使用 sum。其接口使用方法如下：

设置属性汇总分析参数 summaryAttributesJobsParameter，包括属性汇总数据集、分组字段、属性字段、统计模式。

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

运行效果

拓扑检查分析

拓扑检查分析，指的是根据相应的拓扑规则对点、线和面数据进行检查，检查出数据集本身及不同类型数据集相互之间不符合拓扑规则的对象，并返回检查出的拓扑错误数据集的一种操作作业。

SuperMap iServer 的分布式分析服务中的拓扑检查分析，支持以下7种拓扑规则：面数据集内部无交叠、面数据集和面数据集无交叠、面数据集被面数据集包含、面数据集被面数据集覆盖、线数据集内部无交叠、线数据集与线数据集无交叠、点数据集内部无重复点。

下面进行拓扑检查分析，拓扑规则使用：面数据集被面数据集覆盖。其接口使用方法如下：

设置拓扑检查分析参数 topologyValidatorJobsParameter，包括拓扑检查数据集、拓扑检查规则、容限。

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

向服务端提交拓扑检查分析的请求，待服务端成功处理并返回拓扑检查分析结果后对其进行解析处理。

 // 创建拓扑检查分析实例
var processingUrl ="https://iserver.supermap.io/iserver/services/spatialprocessing/rest/v1/jobs";
var processingService = new L.supermap.ProcessingService(processingUrl);
// 向服务器发送请求进行拓扑检查分析服务，并对返回结果进行处理展现在地图上
processingService.addTopologyValidatorJob(topologyValidatorJobsParameter).then(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 = L.popup({offset: L.point(0, 0), autoPan: true});
// 创建DataFlowLayer，创建DataFlowLayer订阅DataFlow并将结果加载到地图上
var dataFlowLayer = new L.supermap.DataFlowLayer(urlDataFlow, {
    style: function (feature) {
        return {
            fillColor: "red",
            fillOpacity: 1,
            radius: 6,
            weight: 0
        };
    },
    onEachFeature: function (feature, layer) {
        popup.setLatLng(L.GeoJSON.coordsToLatLng(feature.geometry.coordinates))
            .setContent(feature.properties.time);
        if (!popup.isOpen()) {
            popup.addTo(map);
        }
    },
});
dataFlowLayer.addTo(map);

// 查询一个线数据，每两秒将一个点通过dataFlowService广播给iServer的dataflow服务，模拟实时数据
// 可通过dataFlowService将其他实时数据广播给SuperMap iServer
function query() {
    var param = new L.supermap.QueryBySQLParameters({
        queryParams: {
            name: "Main_Road_L@China#1",
            attributeFilter: "SMID = 1755"
        }
    });
    new L.supermap.QueryService(urlQuery).queryBySQL(param).then(function (serviceResult) {
        featureResult = serviceResult;
        dataFlowService = L.supermap.DataFlowService(urlDataFlow).initBroadcast();
        dataFlowService.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"},
        id: 1,
        type: "Feature",
        properties: {id: 1, time: new Date()}
    };
    dataFlowService.broadcast(feature);
    count += 3;
}查看源码 »

运行效果

数据可视化

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

热力图

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

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

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

该示例需要引入插件 leaflet-heat.js， 引入包括两种方式:

下载 leaflet-heat.js

1.进入 github 下载 leaflet-heat.js，下载地址为:

                    https://github.com/Leaflet/Leaflet.heat

2.<script>标签引入:

<script src="leaflet-heat.js"></script>

直接通过 CDN 引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.heat/0.2.0/leaflet-heat.js"></script>

示例代码

                                        // 定义热力点数量，加热力半径
var heatNumbers = 150, heatRadius = 30;
// 加热力坐标信息数组
var heatPoints = [];
// 遍历添加坐标信息
for (var i = 0; i < heatNumbers; i++) {
    heatPoints[i]=[ Math.random() * 0.28 + 39.78, Math.random() * 0.5 + 116.12, Math.random() * 80];
}
// 调用渲染方法，传入半径，透明度参数，添加到地图
var resultLayer = L.heatLayer(heatPoints, {
        radius: heatRadius,
        minOpacity: 0.5
}).addTo(map);查看源码 »

运行效果

动画

一个提供动态闪烁点的 Leaflet 插件。支持 Leaflet0.7.0 以上版本，兼容现代浏览器。

该示例需要引入插件 L.Icon.Pulse.js ，引入包括两种方式:

下载 L.Icon.Pulse.js

1.进入 github 下载 L.Icon.Pulse.js，下载地址为:

                    https://github.com/mapshakers/leaflet-icon-pulse

2.<script>标签与 link 标签引入:

                    <script src="L.Icon.Pulse.js"></script>
<link rel="stylesheet" href="L.Icon.Pulse.css"/>

直接通过 CDN 引入

<script src="https://iclient.supermap.io/web/libs/leaflet/plugins/leaflet-icon-pulse/L.Icon.Pulse.js"></script>
<link rel="stylesheet" href="//iclient.supermap.io/libs/leaflet/plugins/leaflet-icon-pulse/L.Icon.Pulse.css"/>

示例代码

                // 遍历result数组所有的要素点，转换坐标信息，添加动画Icon
var features = [
    {type: "Feature", coordinates : [11395368.55482056, 2707397.005707026], id: 113},
    {type: "Feature", coordinates : [11395368.55482056, 2707397.005707026], id: 120}
]
features.map(function (feature) {
    var latLng = L.CRS.EPSG3857.unproject(L.point(feature.coordinates));
    markers.push(L.marker(latLng,{icon: pulseIcon}));
});
// 将动画标识添加到地图上
resultLayer = L.featureGroup(markers).addTo(map);查看源码 »

运行效果

聚合

Leaflet.markercluster 是一个提供动态的标识聚类功能的 Leaflet 插件库。

该示例需要引入插件 Leaflet.markercluster，引入包括两种方式:

下载 Leaflet.markercluster

1.进入 github 下载 Leaflet.markercluster，下载地址为:

                            https://github.com/Leaflet/Leaflet.markercluster

2.<script>标签与 link 标签引入:

            <script src="leaflet.markercluster.js"></script>
<link rel="stylesheet" href="MarkerCluster.Default.css"/>
<link rel="stylesheet" href="MarkerCluster.css"/>

直接通过 CDN 引入

            <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.Default.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.css"/>

示例代码

                                    resultLayer = L.markerClusterGroup({
    spiderfyOnMaxZoom: false,
    // 设置为true时显示聚类所占据的范围
    showCoverageOnHover: false,
    // 设置为true时会向低一级聚类缩放
    zoomToBoundsOnClick: false
});
result.features.map(function (feature) {
    var latLng = L.CRS.EPSG3857.unproject(L.point(feature.geometry.coordinates));
    resultLayer.addLayer(L.marker(latLng));
});
resultLayer.addTo(map);查看源码 »

运行效果

高效率点图层

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

该示例需要引入

                            PapaParse (https://github.com/mholt/PapaParse)

创建 graphicLayer，随机绘制 10 万个圆形进行可视化的展示：

                                        var colorCount = 10;
var colors = getRandomColors(colorCount);
function addGraphicLayer() {
    // 生成总圆数
    var count = 100000;
    var graphics = [];
    var e = 45;
    var randomCircleStyles = [];
    for (var i = 0; i < colorCount; i++) {
        // 定义样式相关属性，填充色，边框颜色，半径等
        randomCircleStyles.push(new L.supermap.CircleStyle({
            color: colors[i],
            // 不透明度
            opacity: 1,
            // 半径
            radius: Math.floor(Math.random() * 15 + 1),
            // 是否填充
            fill: true,
            // 填充色
            fillColor: colors[i],
            // 填充不透明度
            fillOpacity: 1
        }));
    }
    // 绘制对象，并添加到图层上
    for (var i = 0; i < count; ++i) {
        // 循环生成随机点坐标
        var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
        // 定义图层
        graphics[i] = L.supermap.Graphic({
            latLng: L.latLng(coordinates[0], coordinates[1]),
            style: randomCircleStyles[Math.floor(Math.random() * colorCount)].getCanvas()
        });
    }
    // 将画出来的点渲染到地图上
    new L.supermap.GraphicLayer(graphics).addTo(map);
}

// 生成随机颜色
function getRandomColors(count) {
    return randomColor({
        luminosity: 'bright',
        hue: 'random',
        alpha: 0.5,
        format: 'rgba',
        count: count
    });
}查看源码 »

运行效果

ECharts

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

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

该示例需要引入

                            Echarts (https://echarts.apache.org/index.html)

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

                            new L.supermap.EchartsLayer(option)

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

                        var map;
// 加载数据，对数据进行处理
$.get('../data/lines-bus.json', function (data) {
    var hStep = 300 / (data.length - 1);
    var busLines = [].concat.apply([], data.map(function (busLine, idx) {
        var prevPt;
        var points = [];
        for (var i = 0; i < busLine.length; i += 2) {
            var pt = [busLine[i], busLine[i + 1]];
            if (i > 0) {
                pt = [
                    prevPt[0] + pt[0],
                    prevPt[1] + pt[1]
                ];
            }
            prevPt = pt;
            points.push([pt[0] / 1e4, pt[1] / 1e4]);
        }
        return {
            coords: points,
            lineStyle: {
                normal: {
                    color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                }
            }
        };
    }));
    // 指定图表的配置项和数据
    // 将数据可视化展示在地图中
    new L.supermap.EchartsLayer(option).addTo(map);
});

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

                       option = {
    // 图表配置对象
    series: [
    {
        // 图表类型
        type: 'lines',
        // 使用的坐标系
        coordinateSystem: 'leaflet',
        // 是否是多段线
        polyline: true,
        data: busLines,
        // 图标是否静态无法交互
        silent: true,
        // 线条样式
        lineStyle: {
            normal: {
                opacity: 0.2,
                width: 1
            }
        },
        // 启用渐进式渲染的图形数量阈值
        progressiveThreshold: 500,
        // 渐进式渲染时每一帧绘制图形数量
        progressive: 200
    },
    {
        type: 'lines',
        coordinateSystem: 'leaflet',
        polyline: true,
        data: busLines,
        lineStyle: {
            normal: {
                width: 0
            }
        },
        // 线特效的配置
        effect: {
            constantSpeed: 20,
            show: true,
            trailLength: 0.1,
            symbolSize: 1.5
        },
        zlevel: 1
    }]
};查看源码 »

运行效果

MapV

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

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

该示例需要引入

Mapv (https://mapv.baidu.com/)

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

                            new L.supermap.MapVLayer(dataSet, options)

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

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

                        var randomCount = 500;
var citys = [cities];
var cityCenter = mapv.utilCityCenter.getCenterByCityName;
var node_data = {
    x: cityCenter.lng - 5 + Math.random() * 10,
    y: cityCenter.lat - 5 + Math.random() * 10,
};
// 自定义数据
var edge_data = [
    {"source": ~~(i * Math.random()), "target": '0'}
];
var results = mapv.utilForceEdgeBundling().nodes(node_data).edges(edge_data);
var data=[{datas}];
var timeData=[{timeData}];
// 创建MapV图层
var dataSet1 = new mapv.DataSet(data);
// 设置MapV图层的样式
var options1 = {
    // 描边颜色
    strokeStyle: 'rgba(55, 50, 250, 0.3)',
    // 颜色叠加方式
    globalCompositeOperation: 'lighter',
    // 投影颜色
    shadowColor: 'rgba(55, 50, 250, 0.5)',
    // 投影模糊级数
    shadowBlur: 10,
    // 一些事件回调函数
    methods: {
        click: function (item) {
        }
    },
    // 描边宽度
    lineWidth: 1.0,
    //最直接的方式绘制点线面
    draw: 'simple'
};
new L.supermap.MapVLayer(dataSet1, options1).addTo(map);

//创建MapV图层
var dataSet2 = new mapv.DataSet(timeData);
var options2 = {
    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'
};
new L.supermap.MapVLayer(dataSet2, options2).addTo(map);查看源码 »

运行效果

D3

D3 是基于数据操作 HTML 文档的可视化 javascript 库，D3 能够把数据和 HTML、SVG、CSS 结合起来，创造出可交互的数据图表。D3 强调 Web 标准，使您可以在不依赖于专有框架的情况下，充分利用现代浏览器的功能，将强大的可视化组件和数据驱动的方法结合在 DOM 操作中。

浏览器兼容方面，D3 支持最近的浏览器，如 Chrome，Edge，Firefox 和 Safari。D3 4.0 及以下版本也支持 IE9 及以上。D3 的部分模块可以在较旧的浏览器中工作。

该示例需要引入

d3 (https://github.com/d3/d3)
                            
Leaflet.D3SvgOverlay (https://github.com/SuperMap/Leaflet.D3SvgOverlay)

SuperMap iClient for Leaflet 提供了对使用 D3 可视化效果图层的支持，接口为 L.supermap.d3Layer(callback)

                        var uniqueMap = {
    "草地": "rgb(193,255,193)",
    "城市": "rgb(205,112,84)",
    "灌丛": "rgb(124,205,124)",
    "旱地": "rgb(238,154,73)",
    "湖泊水库": "rgb(142,229,238)",
    "经济林": "rgb(222,184,135)",
    "水浇地": "rgb(224,255,255)",
    "水田": "rgb(56,142,142)",
    "用材林": "rgb(85,107,47)",
    "沼泽": "rgb(47,79,79)",
    "缺省风格": "rgb(171,171,171)"
};
var d3Layer = L.supermap.d3Layer(function (sel, proj) {
    var upd = sel.selectAll('path').data(serviceResult.result.features.features);
    upd.enter()
    .append('path')
    .attr('d', proj.pathFromGeojson)
    .attr('fill', function (feature) {
        return uniqueMap[feature.properties.LANDTYPE];
    })
    .attr('fill-opacity', '0.8');
})
d3Layer.addTo(map);查看源码 »

运行效果

OSM Buildings

OSM Buildings 是一个在二维地图上构建和展示 2.5D 建筑效果的可视化库。

OSM Buildings 支持 GeoJSON 数据格式。

该示例需要引入插件 OSMBuildings-Leaflet.js，引入包括两种方式:

下载 OSMBuildings-Leaflet.js

1.进入 github 下载 OSMBuildings-Leaflet.js，下载地址为:

https://github.com/kekscom/osmbuildings

2.<script> 标签引入:

<script src="OSMBuildings.js"></script>

直接通过 CDN 引入

<script src="https://cdn.osmbuildings.org/3.2.10/OSMBuildings.js"></script>

核心代码

                $.get('../data/buildings.json', function (geojson) {
    data = geojson;
    new OSMBuildings(map)
        .date(new Date(2017, 5, 15, 17,30))
        .set(geojson)
});查看源码 »

运行效果

动态标绘

    SuperMap iClient for Leaflet支持动态标绘服务，用户可以动态地标绘点标号和线面标号， 并能够独立修改每个标号的风格，也可以灵活地修改标号位置和形状。

    在使用动态标绘功能之前，需要做一些准备工作：

  • 保证服务器存在可用的标绘服务。或者我们可以自行去服务器服务管理页面，通过关联一个可用的标号库快速发布一个标绘服务。
  • 由于动态标绘只是渲染矢量数据，所以不能作为底图，我们需要在 map 上添加一个 tiledMapLayer，具体使用方法可以参见开发指南。

该示例需要引入

iclient-plot-leaflet (https://iclient.supermap.io/web/libs/plotting/leaflet/11.2.1/iclient-plot-leaflet.min.js)

使用标绘面板

  1、创建标绘图层

    首先创建一个标绘图层对象。初始化需要设置图层的名称和标绘服务的 URL 地址。

                            // 标绘服务地址
var plotUrl = "https://iserver.supermap.io/iserver/services/plot-jingyong/rest/plot/";
// 创建一个名为“plottingLayer”的标绘图层
var plottingLayer = L.supermap.plotting.plottingLayer("plottingLayer", plotUrl);
// 向map中添加标绘图层
plottingLayer.addTo(map);

  2、创建标绘和编辑控件

    创建标绘和编辑控件，并分别将控件加载至 map 中。（注：没有编辑控件无法对标号进行编辑操作）

                            // 标绘控件
var drawControl = L.supermap.plotting.drawControl(plottingLayer);
drawControl.addTo(map);
// 编辑控件
var editControl = L.supermap.plotting.editControl();
editControl.addTo(map);

// 创建多图层后，可以通过如下方式切换标绘控件的可标绘图层
var newPlottingLayer = L.supermap.plotting.plottingLayer("new plottingLayer", plotUrl);
drawControl.setDrawingLayer(newPlottingLayer);
newPlottingLayer.addTo(map);

  3、初始化标绘面板和属性面板

    SuperMap iClient for Leaflet 动态标绘提供了标绘和属性两个面板，使用户可以更加方便地标绘及修改属性。使用方法如下：

    首先在 HTML 页面的 <body> 标签内部创建标绘面板和属性面板的 div，并引入面板的 JS 文件

                            <div id="plottingPanel" style="display:block; position:absolute; right:20px; top:95px; width:20%; height:80%; background:#ffffff; z-index:1000;">
    <div class="easyui-panel" style="position:absolute; top:0px; bottom:0px; left:0px; right:0px; padding:5px; width:100%;">
        <div class="easyui-tabs" style="width:100%; height:100%">
            <div id="plotPanel" title="标绘面板"></div>
            <div id="stylePanel" title="属性面板"></div>
        </div>
    </div>
</div>
<script type="text/javascript" include="plottingPanel" src="../js/include-web.js"></script>
<script type="text/javascript" include="PlotPanel,StylePanel" src="../js/PlottingPanel/PlottingPanel.Include.js"></script>

    然后用面板 div、标绘服务地址、及标绘控件、编辑控件初始化标绘面板和属性面板

                            window.onload = function(){
    L.supermap.plotting.initPlotPanel("plotPanel", serverUrl, drawControl);
    L.supermap.plotting.initStylePanel("stylePanel", serverUrl, editControl);
};

  运行效果

    鼠标标绘，鼠标左键单击标绘面板任一标号后，即可在地图上标绘相应的标号：

    属性修改，鼠标标绘完成后，鼠标左键单击选中标号，属性面板会显示该选中的对象的属性值，即可在属性面板上直接修改：

不使用标绘面板

  1、初始化标号库

    除了基本图元外，动态标绘里面用到的所有标号都是标号库提供的，也就是说，除了标绘基本图元以外，标绘其他所有标号都需要初始化标号所在的标号库。 

                            // 标绘服务地址
var plotUrl = "https://iserver.supermap.io/iserver/services/plot-jingyong/rest/plot/";
// 声明动态标绘总控类，从总控类获取标号库管理类
var plotting = L.supermap.plotting.getControl(map, plotUrl);
var symbolLibManager = plotting.getSymbolLibManager();
// 判断标号库管理类如果没有进行初始化，则异步初始化。初始化完成后返回支持的标号库ID列表
if(!symbolLibManager.isInitializeOK()){
    //标号库管理类初始化完成的处理函数
    symbolLibManager.on(SuperMap.Plot.Event.initializecompleted, function(result) {
        console.log(result);
    });
    symbolLibManager.initializeAsync();
}

    值得注意的是：标号库管理类初始化完成后，返回支持的标号库 ID 列表所对应的标号库已经初始化完成，不需要再单独初始化。

  2、标绘标号

    激活控件，标绘控件。这里以警用库的刑事案件标号为例。警用标号库的 ID 为 421，刑事案件的 Code 为 20100。用标号库 ID 和标号 Code 就可以确定要标绘的标号。 

                            // 激活标绘控件
drawControl.handler.enable();
// 将标号的标号库ID、编号Code以及标绘服务地址赋值给标绘控件内部的handler
drawControl.handler.libID = 421;
drawControl.handler.code = 20100;
drawControl.handler.plotUrl = plotUrl;

  3、编辑标号

    选中标号后，可以鼠标编辑编号的大小、旋转等；也可以对标号的边线、衬线、填充、镜像、等级、子标号及注记等属性进行修改。

                            // 取消激活标绘控件
drawControl.handler.disable();

    修改属性。标号可以修改的属性分两部分存储，和风格有关的属性从 L.supermap.plotting.PlottingObject 的 style 里获取，和形状有关的属性从 L.supermap.plotting.PlottingObject 里获取。 这里的代码段只以少部分属性为例，4、动态标绘标号的属性 会具体列出所有属性。

                            // 首先激活featuresselected事件
editControl.on(SuperMap.Plot.Event.featuresselected, function(event){
    if(event&& event!== null){
        // 被选中，要修改的标号
        selectfeature = event. features[0];
        // 修改风格相关的属性
        if(selectfeature !== null && selectfeature.style !== null){
            // 修改边线宽度、边线颜色、边线颜色透明度
            selectfeature.setStyle({weight: 3});
            selectfeature.setStyle({color: "#00ff00"});
            selectfeature.setStyle({opacity: 0.5});
        }
        // 修改形状相关的属性
        if(selectfeature !== null){
            // 修改旋转、缩放、标号等级，适用于点标号
            selectfeature.setRotate(30);
            selectfeature.setScale(2);
            selectfeature.setSymbolRank(1);
        }
    }
});

  4、动态标绘标号的属性

属性名/属性接口 属性/接口含义 点标号 线面标
symbolType {Number}获取标号几何类型，点标号、线面标号或者基本图元类型，只读属性 √ √
libID {Number}获取标号所属标号库ID，只读属性 √ √
code {Number}获取标号Code，只读属性 √ √
symbolName {String}获取标号名称，只读属性 √ √
style.weight {Number}设置/获取标号边线宽度，单位是像素 √ √
style.color {String}设置/获取标号边线颜色, 例如，"ff0000" √ √
style.opacity {Number}设置/获取标号边线颜色透明度，取值范围(0-1) √ √
style.linesSymbolID {String} 线型，它是一个整数，支持（0：实线，1：长虚线，2：由点构成的直线，3：由线划线段组成的直线，4：由重复的线划点图案构成的直线）五种线型，随着线宽的变化线型可以很好地表达，但是只局限于提供支持的线型，优先级高于dashArray。 √ √
style.dashArray {String} 线型，它是一个数列，数与数之间用逗号隔开，指定短划线和缺口的长度，可以自由设置线型样式，但是随着线宽的变化线型表达不理想，优先级低于lineSymbolID。 √ √
style.surroundLineWidth {Number}设置/获取标号衬线宽度，单位是像素 √ √
style.surroundLineColor {String}设置/获取标号衬线颜色，例如，"ffff00" √ √
sstyle.surroundLineColorOpacity {Number}设置/获取标号衬线颜色透明度，取值范围(0-1) √ √
style.fill {Boolean}设置/获取标号填充，不需要填充则设置成false √ √
style.fillGradientMode {String}设置/获取标号渐变填充方式，渐变填充的优先级高于填充，支持LINEAR、RADIAL两种渐变方式 √ √
style.fillColor {String}设置/获取标号填充颜色，例如，"ff0000" √ √
style.fillOpacity {Number}设置/获取标号填充透明度，取值范围(0-1) √ √
style.fillBackColor {String}设置/获取标号背景色，例如，"ffff00"，渐变填充时生效 √ √
style.fillBackOpacity {Number}设置/获取标号背景填充透明度，取值范围(0-1)，渐变填充时生效 √ √
style.display {String}设置/获取标号可见性，display可见，none不可见 √ √
style.fontSize {String}设置/获取点标号注记字体大小，单位是像素，例如，fontSize="2em" √ ×
style.fontColor {String}设置/获取点标号注记字体颜色，十六进制颜色 √ ×
style.fontFamily {String}设置/获取点标号注记字体类型 √ ×
setRotate(value)/getRotate() {Number}设置/获取点标号旋转角度 √ ×
setScale(value)/getSclae() {Number}设置/获取点标号缩放比例 √ ×
setNegativeImage(value)/getNegativeImage() {Boolean}设置/获取点标号镜像 √ ×
setSymbolRank(value)/getSymbolRank() {Number}设置/获取点标号等级，标号可以设置的等级范围可以通过selectfeature.symbolData.symbolRanks获取 √ ×
setSymbolSize(w, h)/getSymbolSize() {Number, Number}设置/获取点标号大小，参数分别为军标宽度和高度，单位是像素 √ ×
setTextContent(value)/getTextContent() {String}设置/获取点标号注记内容 √ ×
setTextPosition(value)/getTextPosition() {Number}设置/获取点标号注记位置，有0：左上，1：左下，2：右上，3：右下，4：上，5：下，6：左，7：右，8：中间共九个位置，标号是否可以设置中间注记可以通过 selectfeature.symbolData.middleMarkExist 判断 √ ×
setSurroundLineType(value)/getSurroundLineType() {Number}设置/获取标号衬线类型，点标号只有0：无衬线和1：有衬线两种，而线面标号除了无衬线外，还有1：内侧衬线，2：外侧衬线，3：双侧衬线 √ √
setSubSymbol(code，index)/getSubSymbol() {Number, Number}设置/获取线面标号的子标号，参数分别为修改后的子标号code及其索引 × √