SuperMap iClient for OpenLayers

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

准备

获取 OpenLayers 和 SuperMap iClient for OpenLayers

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

OpenLayers

SuperMap iClient for OpenLayers

引入

文件方式引入

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

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

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

引入 iclient-openlayers CSS 文件和 JS 文件,填入 SuperMap iClient for OpenLayers 在线站点地址:

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

npm 方式引入

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

                                            npm install @supermap/iclient-openlayers
                                        
引入 CSS

新建一个 HTML 文件,在 <head> 标签中引入 OpenLayers CSS 文件和 iclient-openlayers CSS 文件,如下:

                                            <link href='https://openlayers.org/en/v4.6.5/css/ol.css' rel='stylesheet' />

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

模块化开发

ES6

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

  部分模块引入

                                            import ol from 'openlayers';
import {Logo, TileSuperMapRest} from '@supermap/iclient-openlayers';

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults({attributionOptions: {collapsed: false}}).extend([new Logo()]),
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:4326'
    })
});
var layer = new ol.layer.Tile({
        source: new TileSuperMapRest({
            url: url,
            wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(layer);
                                

  全模块引入

                                            import ol from 'openlayers';
import '@supermap/iclient-openlayers';

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults({attributionOptions: {collapsed: false}})
        .extend([new ol.supermap.control.Logo()]),
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:4326'
    })
});
var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: url,
            wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(layer);
                                        

CommonJS

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

  部分模块引入

                                            var ol = require('openlayers');
var Logo = require('@supermap/iclient-openlayers').Logo;
var TileSuperMapRest = require('@supermap/iclient-openlayers').TileSuperMapRest;

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults({attributionOptions: {collapsed: false}})
        .extend([new Logo()]),
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:4326'
    })
});
var layer = new ol.layer.Tile({
    source: new TileSuperMapRest({
        url: url,
        wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(layer);
                                        

  全模块引入

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

var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults({attributionOptions: {collapsed: false}})
        .extend([new ol.supermap.control.Logo()]),
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:4326'
    })
});
var layer = new ol.layer.Tile({
    source: new ol.source.TileSuperMapRest({
        url: url,
        wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(layer);
                                        

AMD

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

  全模块引入

                                            require.config({
    shim: {
        'iclient-openlayers': {
            deps: ['ol'],
            exports: 'SuperMap'
        }
    }
});

require(['js/ol.js'], function(ol) {
    window.ol = ol;
    require(['js/iclient-openlayers.js'], function(SuperMap) {
        var url = 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World';
        var map = new ol.Map({
            target: 'map',
            controls: ol.control
                .defaults({ attributionOptions: { collapsed: false } })
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [0, 0],
                zoom: 2,
                projection: 'EPSG:4326'
            })
        });
        var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: url,
                wrapX: true
            }),
            projection: 'EPSG:4326'
        });
        map.addLayer(layer);
    });
});
                                        

CMD

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

  全模块引入

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

    var url = 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World';
    var map = new ol.Map({
        target: 'map',
        controls: ol.control
            .defaults({ attributionOptions: { collapsed: false } })
            .extend([new ol.supermap.control.Logo()]),
        view: new ol.View({
            center: [0, 0],
            zoom: 2,
            projection: 'EPSG:4326'
        })
    });
    var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: url,
            wrapX: true
        }),
        projection: 'EPSG:4326'
    });
    map.addLayer(layer);
});
                                            

打包配置

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

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

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

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

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

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

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

创建一幅地图

SuperMap iServer 发布的地图

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

                                        <script type="text/javascript" src="https://iclient.supermap.io/dist/openlayers/iclient-openlayers.js"></script>
                                

以嵌入 SuperMap iServer 发布的世界地图为例,在 <script> 中添加代码,初始化地图信息:

                                    var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
// 初始化地图信息
var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults({attributionOptions: {collapsed: false}})
        .extend([new ol.supermap.control.Logo()]),
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:4326'
    })
});
// 添加图层
var layer = new ol.layer.Tile({
    source: new ol.source.TileSuperMapRest({
        url: url,
        wrapX: true
    }),
    projection: 'EPSG:4326'
});
map.addLayer(layer);查看源码 »
                                        

运行效果

第三方地图

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

                                        <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_tiandituLayer_ll"></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-openlayers.js"></script>
    <script type="text/javascript">
        var map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({attributionOptions: {collapsed: false}})
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [116.402, 39.905],
                zoom: 5,
                projection: "EPSG:4326"
            }),
            // 添加天地图图层
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.Tianditu({
                        layerType: 'ter',
                        projection: "EPSG:4326"
                    });
                }),new ol.layer.Tile({
                    source: new ol.source.Tianditu({
                        layerType: 'ter',
                        isLabel: true,
                        projection: "EPSG:4326"
                    });
                })];
        });
    </script>
</body>
</html>查看源码 »
                            

运行效果

为地图设置投影

SuperMap iClient for OpenLayers 通过设置 map 中 view 属性的 projection 参数来支持多投影。例如:

                                var map = new ol.Map({
    view: new ol.View({
        projection: 'EPSG:4326'
    });
});
                            

projection 参数除了支持 EPSG code 字符串之外,还支持自定义投影参数。通过 ol.proj.Projection 类设置自定义投影参数,例如:

                                    var swissProjection = new ol.proj.Projection({
    code: 'EPSG:21781',
    // extent用于确定缩放级别
    // 投影的extent可以参考https://epsg.io/
    extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
    units: 'm'
});
ol.proj.addProjection(swissProjection);
var map = new ol.Map({
    view: new ol.View({
        projection: swissProjection
    });
});
                            

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

添加控件

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

控件 类名 简介
鹰眼图 ol.control.OverviewMap 默认位于地图右下角
缩放 ol.control.Zoom 默认位于地图左上角
比例尺 ol.control.ScaleLine 默认位于地图左下角
图层切换 ol.control.LayerSwitcher 默认位于地图右上角
版权 ol.control.Attribution 默认位于地图右下角

添加控件时,通过实例化控件类得到实例对象,将实例对象传入 addControl() 方法,例如:

比例尺控件:

                                    scaleControl = new ol.control.ScaleLine();
map.addControl(scaleControl);查看源码 »
                                

运行效果

图层切换控件:

                                    var layerSwitcher = new ol.control.LayerSwitcher({});
map.addControl(layerSwitcher);查看源码 »
                                

运行效果

使用矢量瓦片

矢量瓦片是将矢量数据通过不同的描述文件来组织和定义,在客户端实时解析数据和完成绘制。SuperMap iServer 提供了矢量瓦片图层源,即 ol.source.VectorTileSuperMapRest.optionsFromMapJSON(url,mapJSONObj) 其中:

  • url:地图服务地址
  • mapJSONObj:地图JSON对象(由 getMapInfor() 方法返回的 JSON 数据格式的地图对象)

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

                        new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
//矢量瓦片风格参数对象
var stylesOptions = {
    url: url,
    view: map.getView()
};
//创建瓦片风格对象
var vectorTileStyles = new ol.supermap.VectorTileStyles(stylesOptions);
//通过地图信息获取瓦片参数对象
var vectorTileOptions = ol.source.VectorTileSuperMapRest.optionsFromMapJSON(url, serviceResult.result);
//添加矢量瓦片图层
var vectorLayer = new ol.layer.VectorTile({
    source: new ol.source.VectorTileSuperMapRest(vectorTileOptions),
    style: vectorTileStyles.getFeatureStyle
});
map.addLayer(vectorLayer);查看源码 »
                                    

运行效果

绘制符号与图形

OpenLayers 图形绘制方式主要包括基本绘制,手写绘制,捕捉绘制。几何图形的绘制一般包括点、线、面、圆的绘制。

基本绘制

首先在示例界面上添加几何图形绘制的按钮,并设置其样式,以下代码以绘制点为例。

                                        //设置绘制控件界面,以绘制点为例
<div class="btn-group">
    <button id="drawPoint" value='Point' type="button" class="btn btn-default">绘点</button>
</div>
                                    

在本例中,首先在地图容器中加载一个矢量图层绘制层并创建一个绘图控件对象(ol.interaction.Draw),然后通过调用 addInteraction() 方法添加此绘制图形控件,再根据设置的几何图形类型绘制图层。绘制图层的关键代码如下:

                                        //获取需要绘制的类型
var buttons = $('.btn-group').children();
//实例化矢量图层作为绘图层。
var vector = new ol.layer.Vector({
    source: source
});
map.addLayer(vector);
//创建一个绘图控件对象
var draw = new ol.interaction.Draw({
    source: source,
    type: buttons[key].value,
    snapTolerance: 20
});
//添加绘图控件
map.addInteraction(draw); 查看源码 »
                                    

运行效果

手写绘制

手写绘制是指按住左键不放随意绘制图形,放手绘制完成。关键代码如下:

                                    //获取需要绘制的类型
var buttons = $('.btn-group').children();
//创建一个矢量图层作为绘图层。
var vector = new ol.layer.Vector({
    source: source
});
map.addLayer('vector');
//创建手写图形绘制控件
var draw = new ol.interaction.Draw({
    source: source,
    type: buttons[key].value,
    snapTolerance: 20,
    freehand: true //设置可手写图形绘制
});
//添加手写图形绘制控件
map.addInteraction(draw);查看源码 »
                    

运行效果

捕捉绘制

捕捉绘制是指绘制时鼠标进入到一个已经绘制好的点的一定容差范围内,鼠标点会被吸附到那个已经绘制好的点的位置。关键代码如下:

                                            var source = new ol.source.Vector({wrapX: false});
//创建捕捉绘制控件
var snap = new ol.interaction.Snap({
    source: source  //绘制源
});
//添加捕捉控件
map.addInteraction(snap);查看源码 »
                            

运行效果

面积和距离量算

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

距离量算

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

1.构建服务参数类

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

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

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

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

                                // 提交服务请求,设置服务请求关键参数,获取返回结果并按照用户需求进行处理
var url="https://iserver.supermap.io/iserver/services/map-world/rest/maps/World"; //服务访问的地址
new ol.supermap.MeasureService(url, {measureMode: ""}).measureDistance(distanceMeasureParam, function (serviceResult) {
    function doSomething(serviceResult);
    // 获取服务器返回的结果
    var result=serviceResult.result;
});查看源码 »
                                    

运行效果

面积测量

1.实例化测量服务参数,代码如下:

                                var areaMeasureParam = new SuperMap.MeasureParameters(feature.getGeometry());
                            

2.调用测量函数

调用测量函数 ol.supermap.MeasureService.measureArea,展示测量结果,代码如下:

                                // 设置面积量算服务参数
var areaMeasureParam = new SuperMap.MeasureParameters(feature.getGeometry());
new ol.supermap.MeasureService(url).measureArea(areaMeasureParam, function (serviceResult) {
    // 获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »
                            

运行效果

地物查询

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

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

指定ID查询

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

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

                                        //指定ID查询处理
url = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
//数据集ID查询服务参数
var idsParam = new SuperMap.GetFeaturesByIDsParameters({
    IDs: [246, 247],
    datasetNames: ["World:Countries"]
});
//向服务器发送请求,并获取结果
new ol.supermap.FeatureService(url).getFeaturesByIDs(idsParam, function (serviceResult) {
    //获取返回的features数据
    var features = serviceResult.result.features;
});查看源码 »
                                    

运行效果

指定SQL查询

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

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

                                        //指定SQL查询处理
var url = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
//指定SQL查询服务参数
var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
        queryParameter: {
            name: "Countries@World",
            attributeFilter: "SMID = 247"
        },
        datasetNames: ["World:Countries"]
});
//向服务器发送请求,并对返回的结果进行处理
new ol.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
    //获取返回的features数据
    var features = serviceResult.result.features;
});查看源码 »
                                    

运行效果

矩形范围查询

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

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

                                        //指定矩形范围查询处理
var polygon = new ol.geom.Polygon([[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]);
var polygonSource = new ol.source.Vector({
    features: [new ol.Feature(polygon)],
    wrapX: false
});
//创建集Bounds查询服务
var boundsParam = new SuperMap.GetFeaturesByBoundsParameters({
    datasetNames: ["World:Capitals"],
    bounds: polygon.getExtent()
});
//向服务器发送请求,并对返回的结果进行处理
new ol.supermap.FeatureService(url).getFeaturesByBounds(boundsParam, function (serviceResult) {
    //获取返回的features数据
    var features = serviceResult.result.features;
});查看源码 »
                                

运行效果

任意几何范围查询

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

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

                                    var polygon = new ol.geom.Polygon([[[0, 0], [-10, 30], [-30, 0], [0, 0]]]
// 设置几何查询参数
var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
    datasetNames: ["World:Countries"],
    geometry: polygon,
    spatialQueryMode: "INTERSECT" // 相交空间查询模式
});
// 创建几何范围查询实例
new ol.supermap.FeatureService(url).getFeaturesByGeometry(geometryParam, function (serviceResult) {
    //获取返回的features数据
    var features = serviceResult.result.features;
});查看源码 »
                               

运行效果

距离查询

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

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

                                    // 添加查询中心点
point = new ol.geom.Point([104, 30]);
var feature = new ol.Feature(point);
// 设置查询参数
var param = new SuperMap.QueryByDistanceParameters({
    queryParams: {name: "Capitals@World.1"},
    distance: 10, // distance的单位跟地物的坐标系单位一致,此处为度
    geometry: point
});
// 创建距离查询实例
new ol.supermap.QueryService(url).queryByDistance(param, function (serviceResult) {
    //获取返回的features数据
    var features = serviceResult.result.features;
});查看源码 »
                                

运行效果

缓冲区查询

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

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

                                    //指定矩形范围查询处理
var polygon = new ol.geom.Polygon([[[-20, 20], [-20, -20], [20, -20], [20, 20], [-20, 20]]]);
// 查询参数
var bufferParam = new SuperMap.GetFeaturesByBufferParameters({
    datasetNames: ["World:Capitals"],
    bufferDistance: 30, // bufferDistance的单位跟地物的坐标系单位一致,此处为度
    geometry: polygon
});
// 创建缓冲区查询实例
new ol.supermap.FeatureService(url).getFeaturesByBuffer(bufferParam, function (serviceResult) {
    //获取features数据
    var features = serviceResult.result.features;
});查看源码 »
                                

运行效果

查询栅格信息

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

使用接口 ol.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.coordinate[0];
    var y = evt.coordinate[1];
    if (x < -180.0 || x > 180.0 || y < -90 || y > 90) {
        return;
    }
    // 设置栅格查询的参数信息
    var getGridCellInfosParam = new SuperMap.GetGridCellInfosParameters({
        dataSourceName: "World",
        datasetName: "WorldEarth",
        X: x,
        Y: y
    });
    // 创建栅格查询实例
    new ol.supermap.GridCellInfosService(url).getGridCellInfos(getGridCellInfosParam, function (serviceResult) {
        if (!serviceResult.result) {
            return;
        }
        // 获取服务端返回数据
        var result = serviceResult.result;
    });
});查看源码 »
                                

运行效果

查询字段信息

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

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

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

运行效果

地物编辑

地物编辑,包括对点、线、区等几何图形进行编辑设置,如线型、颜色、线宽等。如果没有自定义设置几何图形的样式,交互控件也会用默认样式进行绘制,绘制完成之后进行提交到 Supermap iServer服务。

                                            //实例化地物编辑参数类
var addFeatureParams = new SuperMap.EditFeaturesParameters({
    features: pointFeature,
    dataSourceName: "World",
    dataSetName: "Capitals",
    editType: "add",
    returnContent: true
});
//构建地物编辑服务,url是supermap iserver数据服务
var editFeaturesService = new ol.supermap.FeatureService(url);
editFeaturesService.editFeatures(addFeatureParams, function (serviceResult) {
    // 获取返回数据
    var result = serviceResult.result;
});
查看源码 » 
                            

运行效果

专题图

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

服务端专题图

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

以点密度专题图为例。

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

                                //实例化点密度专题图
var themeDotDensity = new SuperMap.ThemeDotDensity({
    dotExpression: "Pop_1994",
    value: 5000000,
    style: new SuperMap.ServerStyle({
        markerSize: 3,
        markerSymbolID: 12
    })
});
//专题图参数类 该类存储了制作专题所需的参数,包括数据源、数据集名称和专题图对象。
var themeParameters = new SuperMap.ThemeParameters({
    themes: [themeDotDensity],
    //要制作专题图的数据集数组,必设
    datasetNames: ["Countries"],
    //要制作专题图的数据集所在的数据源数组,必设。
    dataSourceNames: ["World"]
});
//专题图服务类,专题图结果通过该类支持的事件的监听函数参数获取.
new ol.supermap.ThemeService(url).getThemeInfo(themeParameters, function (serviceResult) {
    //获取服务器返回的结果
    var result = serviceResult.result;
});查看源码 »
                            

运行效果

客户端专题图

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

SuperMap iClient for OpenLayers 支持的专题图主要包含:

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

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

SuperMap iClient for OpenLayers 实现单值专题图,代码如下:

                                //单值专题图图层资源
var themeSource = new ol.source.Unique("ThemeLayer", {
    //专题图ID
    map: map,
    attributions: " ",
    //专题图样式
    style: {
        shadowBlur: 3,
        shadowColor: "#000000",
        shadowOffsetX: 1,
        shadowOffsetY: 1,
        fillColor: "#FFFFFF"
    },
    //是否开启hover事件
    isHoverAble: true,
    //开启hover事件后,触发的样式风格
    highlightStyle: {
        stroke: true,
        strokeWidth: 2,
        strokeColor: 'blue',
        fillColor: "#00F5FF",
        fillOpacity: 0.2
    },
    //指定创建专题图字段
    themeField: "LANDTYPE",
});
//创建单值专题图图层
var themeLayer = new ol.layer.Image({
    source: themeSource
});
                            

单值专题图类型以及颜色的配置,代码如下:

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

运行效果

分段专题图

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

Supermap iClient for OpenLayers 实现分段专题图,主要代码如下:

                                //分段专题图图层资源
var themeSource = new ol.source.Range("ThemeLayer",{
    map: map,
    //版权信息
    attributions: " ",
    //分段专题图样式
    style: {
        shadowBlur: 16,
        shadowColor: "#000000",
        fillColor: "#FFFFFF"
    },
    //是否开启hover事件
    isHoverAble: true,
    //开启hover事件后,触发的样式风格
    highlightStyle: {
        stroke: true,
        strokeWidth: 4,
        strokeColor: 'blue',
        fillColor: "#00EEEE",
        fillOpacity: 0.8
    },
     //指定创建专题图字段
    themeField: "POP_DENSITY99",
    //配置分段专题类型样式组
    styleGroups: [
        {
            start: 0,
            end: 0.02,
            style: {
                color: '#FDE2CA'
            }
        },
        {
            start: 0.02,
            end: 0.04,
            style: {
                color: '#FACE9C'
            }
        }
    ];
});
//创建一个分段专题图层
var themeLayer = new ol.layer.Image({
    source: themeSource
});查看源码 »
                            

运行效果

符号等级专题图

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

SuperMap iClient for OpenLayers实现符号等级专题图为例,主要代码如下:

                                //等级专题图图层资源
var themeSource = new ol.source.RankSymbol("RankSymbolLayer", "Circle",
    {
        map: map,
        attributions: " ",
        themeField: "CON2009",
        //配置图表参数
        symbolSetting: {
            //必设参数
            codomain: [0, 40000], // 允许图形展示的值域范围,此范围外的数据将不制作图图形
            //圆最大半径 默认100
            maxR: 100,
            //圆最小半径 默认0
            minR: 0,
            // 圆形样式
            circleStyle: {fillOpacity: 0.8},
            // 符号专题图填充颜色
            fillColor: "#FFA500",
            // 专题图hover 样式
            circleHoverStyle: {fillOpacity: 1}
        }
});
//创建一个等级符号专题图层
var themeLayer = new ol.layer.Image({
    source: themeSource
});查看源码 »
                            

运行效果

标签专题图

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

SuperMap iClient for OpenLayers 实现标签专题图,主要代码如下:

                                //标签专题图图层资源
var themeSource = new ol.source.Label("labelThemeLayer", {
    map: map,
    attributions: " ",
    //标签专题要素的 Style
    style: new SuperMap.ThemeStyle({
        labelRect: true,
        fontColor: "#000000",
        fontWeight: "bolder",
        fontSize: "18px",
        fill: true,
        fillColor: "#FFFFFF",
        fillOpacity: 1,
        stroke: false,
        strokeColor: "#8B7B8B"
    }),
    //指定创建专题图字段
    themeField: "aqi",
    //标签专题图类型样式组
    styleGroups: [
        {
            start: 0,
            end: 51,
            style: {
                fillColor: "#6ACD06",
                fontSize: "17px"
            }
        }, {
            start: 51,
            end: 101,
            style: {
                fillColor: "#FBD12A",
                fontSize: "19px"
            }
        },
    ];
});
//创建一个标签专题图层
var themeLayer = new ol.layer.Image({
    source: themeSource
});查看源码 »
                            

运行效果

图表专题图

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

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

SuperMap iClient for OpenLayers 实现图表专题图,主要代码如下:

                                // 柱状图和三维柱状图的图表配置
var chartsSettingForBarAddBar3DCommon = {
    width: 260,
    height: 120,
    codomain: [0, 40000],   // 允许图表展示的值域范围,此范围外的数据将不制作图表
    xShapeBlank: [15, 15, 15],
    axisYTick: 4,
    axisYLabels: ["4万", "3万", "2万", "1万", "0"],           // y 轴标签内容
    axisXLabels: ["09年", "10年", "11年", "12年", "13年"],   //  轴标签内容
    backgroundRadius: [5, 5, 5, 5],
    backgroundStyle: {      // 背景框圆角参数
        fillColor: "#d1eeee",
        shadowBlur: 12,
        shadowColor: "#d1eeee"
    }
};
// 点和线的图表配置
var chartsSettingForPointOrLine = {
    width: 220,
    height: 100,
    codomain: [0, 40000],
    xShapeBlank: [10, 10],
    axisYTick: 4,
    axisYLabels: ["4万", "3万", "2万", "1万", "0"],
    axisXLabels: ["09年", "10年", "11年", "12年", "13年"],
    backgroundStyle: {fillColor: "#d1eeee"},
    backgroundRadius: [5, 5, 5, 5],
    useXReferenceLine: true,
    pointStyle: {
        pointRadius: 5,
        shadowBlur: 12,
        shadowColor: "#D8361B",
        fillOpacity: 0.8
    },
    pointHoverStyle: {
        stroke: true,
        strokeColor: "#D8361B",
        strokeWidth: 2,
        fillColor: "#ffffff",
        pointRadius: 4
    },
};

// 饼状图和环状图的图表配置
var chartsSettingForPieOrRing = {
    width: 240,
    height: 100,
    codomain: [0, 40000],       // 允许图表展示的值域范围,此范围外的数据将不制作图表
    sectorStyle: {fillOpacity: 0.8},      // 柱状图中柱条的(表示字段值的图形)样式
    sectorStyleByFields: [
        {fillColor: "#FFB980"},
        {fillColor: "#5AB1EF"},
        {fillColor: "#B6A2DE"},
        {fillColor: "#2EC7C9"},
        {fillColor: "#D87A80"}],
    sectorHoverStyle: {fillOpacity: 1},
    xShapeBlank: [10, 10, 10],      // 水平方向上的空白间距参数
    axisYLabels: ["4万", "3万", "2万", "1万", "0"],         // y 轴标签内容
    axisXLabels: ["09年", "10年", "11年", "12年", "13年"],         // x 轴标签内容
    backgroundStyle: {fillColor: "#CCE8CF"},        // 背景样式
    backgroundRadius: [5, 5, 5, 5],        // 背景框圆角参数
};

// 设置graphThemeLayer option参数
var themeLayerOptions = {
    map: map,
    attributions: " ",
    themeFields: ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"],
    opacity: 0.9,
    chartsSetting: {},
};
// 创建一个图表专题源
var themeSource = new ol.source.Graph("BarLayer", "Bar", themeLayerOptions);
// 创建一个图表专题图层
var themeLayer = new ol.layer.Image({
    source: themeSource
});查看源码 » 
                            

运行效果

空间分析

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

  • 缓冲区分析
  • 泰森多边形
  • 叠加分析
  • 表面分析
  • 动态分段
  • 点定里程
  • 里程定点
  • 里程定线
  • 插值分析
  • 栅格代数运算
  • 地形计算
  • 核密度分析

缓冲区分析

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

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

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

                                // 缓冲区分析参数
var dsBufferAnalystParameters = new SuperMap.DatasetBufferAnalystParameters({
    // 缓冲区分析需要的数据源中的数据集名称
    dataset: "RoadLine2@Changchun",
    filterQueryParameter: new SuperMap.FilterParameter({
        attributeFilter: "NAME='团结路'"
    }),
    // 缓冲区分析通用参数设置
    bufferSetting: new SuperMap.BufferSetting({
        // 缓冲区端点枚举值,包含FLAT和ROUND
        endType: SuperMap.BufferEndType.ROUND,
        // 左侧缓冲距离
        leftDistance: {value: 10},
        // 右侧缓冲距离
        rightDistance: {value: 10},
        // 圆头缓冲圆弧处线段的个数
        semicircleLineSegment: 10
    })
});
                            

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

                                var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst"
// 创建缓冲区分析实例
new ol.supermap.SpatialAnalystService(serviceUrl).bufferAnalysis(dsBufferAnalystParameters, function (serviceResult) {
    // 获取返回的featuers数据
    var featuers = serviceResult.result.recordset.features;
});查看源码 »
                            

运行效果

泰森多边形

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

泰森多边形的特性为:

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

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

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

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

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

运行效果

叠加分析

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

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

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

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

设置叠加分析参数:

                                // 设置叠加分析参数
var datasetOverlayAnalystParameters = new SuperMap.DatasetOverlayAnalystParameters({
    sourceDataset: "BaseMap_R@Jingjin",
    operateDataset: "Neighbor_R@Jingjin",
    tolerance: 0,
    operation: SuperMap.OverlayOperationType.UNION
});
                            

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

                                // 创建叠加分析服务实例
// 向服务端发送服务请求,并获取返回的结果
new ol.supermap.SpatialAnalystService(serviceUrl).overlayAnalysis(datasetOverlayAnalystParameters, function (serviceResult) {
    // 获取返回的featuers数据
    var features = serviceResult.result.recordset.features;
});查看源码 »
                            

运行效果

提取等值线/面

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

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

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

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

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

                                // 创建表面分析服务实例
var surfaceAnalystService = new ol.supermap.SpatialAnalystService(serviceUrl);
surfaceAnalystService.surfaceAnalysis(surfaceAnalystParameters, function (surfaceAnalystServiceResult) {
    // 获取返回的数据
    var result = surfaceAnalystServiceResult.result.recordset.features;
});查看源码 »
                            

运行效果

动态分段

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

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

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

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

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

                                // 配置动态分段服务
var serviceUrl = "https://iserver.supermap.io/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst"
// 向服务端发送请求,并获取返回的结果
new ol.supermap.SpatialAnalystService(serviceUrl).generateSpatialData(generateSpatialDataParameters, function (serviceResult) {
    // 获取返回的数据
    var result = serviceResult.result;
});查看源码 »
                            

运行效果

点定里程

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

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

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

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

                                // 通过SQL查询的方法建立路由,并添加到地图上
var queryBySQLService = new ol.supermap.QueryService(baseUrl);
// SQL查询参数设置
var queryBySQLParams = new SuperMap.QueryBySQLParameters({
    queryParams: [
        new SuperMap.FilterParameter({
            name: "RouteDT_road@Changchun",
            attributeFilter: "RouteID=1690"
        })
    ]
});
// 创建SQL查询
queryBySQLService.queryBySQL(queryBySQLParams, function (SQLQueryServiceResult) {
    // 获取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]])
    }
    var routeLine = new ol.geom.LineString([pointsList]);

    // 在组成路由的点中选取一个查询点(数组中第8个点),并添加到地图上
    var point = new ol.geom.Point([routeObj[7][0], routeObj[7][1]]);

    // 点定里程服务
    var routeCalculateMeasureService = new ol.supermap.SpatialAnalystService(serviceUrl);
    var routeCalculateMeasureParameters = new SuperMap.RouteCalculateMeasureParameters({
        "sourceRoute": routeLine,   // 必选,路由类型
        "point": point,            // 必选
        "tolerance": 10,
        "isIgnoreGap": false
    });
    // 向服务端发送请求并获取数据
    routeCalculateMeasureService.routeCalculateMeasure(routeCalculateMeasureParameters, function (routeCaculateServiceResult) {
        // 获取服务端返回的数据
        var result = routeCaculateServiceResult.result;
    });
});查看源码 »
                            

运行效果

里程定点

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

下面以长春数据为例,确定一条发生交通事故的路上(路由ID为1690的路由)与路口距离为10km的事故点,里程定点的接口使用方法:

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

                                // 通过SQL查询的方法建立路由
var queryBySQLService = new ol.supermap.QueryService(baseUrl);
// SQL查询参数设置
var queryBySQLParams = new SuperMap.QueryBySQLParameters({
    queryParams: [
        new SuperMap.FilterParameter({
            name: "RouteDT_road@Changchun",
            attributeFilter: "RouteID=1690"
        })
    ]
});
// 创建SQL查询
queryBySQLService.queryBySQL(queryBySQLParams, function (SQLQueryServiceResult) {
    // 获取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]])
    }
    var routeLine = new ol.geom.LineString([pointsList]);
    // 创建里程定点服务实例
    var routeLocatorService = new ol.supermap.SpatialAnalystService(serviceUrl);
    // 设置里程定点服务所需参数
    var routeLocatorParameters_point = new SuperMap.RouteLocatorParameters({
        "sourceRoute": routeLine,
        "type": "POINT",
        "measure": 800,
        "offset": 0,
        "isIgnoreGap": true
    });
    // 向服务端发送请求并获取数据
    routeLocatorService.routeLocate(routeLocatorParameters_point, function (routeLocateServiceResult) {
        // 获取服务端返回的数据
        var result = routeCaculateServiceResult.result;
    }
});
查看源码 »
                            

运行效果

里程定线

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

下面以长春数据为例,一条路(路由 ID 为1690的路由)在距离路口 10-800km 之间的发生堵塞。

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

                                // 通过SQL查询的方法建立路由,并添加到地图上
var queryBySQLService = new ol.supermap.QueryService(baseUrl);
// SQL查询参数设置
var queryBySQLParams = new SuperMap.QueryBySQLParameters({
    queryParams: [
        new SuperMap.FilterParameter({
            name: "RouteDT_road@Changchun",
            attributeFilter: "RouteID=1690"
        })
    ]
});
// 创建SQL查询
queryBySQLService.queryBySQL(queryBySQLParams, function (SQLQueryServiceResult) {
    // 获取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]])
    }
    var routeLine = new ol.geom.LineString([pointsList]);

    // 创建里程定线服务实例
    var routeLocatorService = new ol.supermap.SpatialAnalystService(serviceUrl);
    // 设置里程定线服务所需参数
    var routeLocatorParameters_line = new SuperMap.RouteLocatorParameters({
        "sourceRoute": routeLine,
        "type": "LINE",
        "startMeasure": 200,
        "endMeasure": 1000,
        "isIgnoreGap": true
    });
    // 向服务端发送请求并获取数据
    routeLocatorService.routeLocate(routeLocatorParameters_line, function (routeLocateServiceResult) {
        // 获取服务端返回的数据
        var result = routeCaculateServiceResult.result;
    });
});查看源码 »
                            

运行效果

插值分析

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

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

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

运行效果

栅格代数运算

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

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

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

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

运行效果

地形计算

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

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

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

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

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

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

运行效果

核密度分析

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

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

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

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

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

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

运行效果

交通换乘分析

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

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

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

1. 交通换乘方案查询

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

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

2. 乘车路线查询

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

                                    // 在地图上点击某一方案并获取具体的路线,构造transLines参数
// 获取乘车路线的详细信息
// 设置查询参数
var params = new SuperMap.TransferPathParameters({
    points: paths["points"],
    transferLines: transLines
});
// 向服务端发送请求并获取数据
new ol.supermap.TrafficTransferAnalystService(serviceUrl)
    .analysisTransferPath(params, function (serviceResult) {
        // 获取返回的路线的详细信息
        var transGuide = serviceResult.result;
    });查看源码 »
                                

运行效果:

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

网络分析

SuperMap iClient for OpenLayers 网络分析功能包括:

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

服务区分析

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

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

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

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

                    //创建服务区分析参数实例
var resultSetting = new SuperMap.TransportationAnalystResultSetting({
//是否在分析结果中包含弧段要素集合
returnEdgeFeatures: true,
//返回的弧段要素集合中是否包含几何对象信息
returnEdgeGeometry: true,
//返回结果中是否包含经过弧段 ID 集合
returnEdgeIDs: true,
//是否在分析结果中包含结点要素集合
returnNodeFeatures: true,
//返回的结点要素集合中是否包含几何对象信息
returnNodeGeometry: true,
//返回结果中是否包含经过结点 ID 集合
returnNodeIDs: true,
//返回分析结果中是否包含行驶导引集合
returnPathGuides: true,
//返回分析结果中是否包含路由对象的集合
returnRoutes: true
});
//服务区分析结果参数类
var analystParameter = new SuperMap.TransportationAnalystParameter({
resultSetting: resultSetting,
weightFieldName: "length"
});
//服务区分析参数
var parameter = new SuperMap.FindServiceAreasParameters({
centers: [point],
isAnalyzeById: false,
parameter: analystParameter
});
                

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

                    //构建服务区分析对象,向服务器传递服务区分析服务参数
new ol.supermap.NetworkAnalystService(serviceUrl).findServiceAreas(parameter, function (serviceResult) {
//获取服务器返回的结果
var result = serviceResult.result;
});
                

运行效果

查找最近设施

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

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

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

                    
//添加事件点
var eventPoint = new ol.geom.Point([5000, -3700]);
//设置网络分析结果参数
var resultSetting = new SuperMap.TransportationAnalystResultSetting({
returnEdgeFeatures: true,
returnEdgeGeometry: true,
returnEdgeIDs: true,
returnNodeFeatures: true,
returnNodeGeometry: true,
returnNodeIDs: true,
returnPathGuides: true,
returnRoutes: true
});
//设置网络分析通用参数
var analystParameter = new SuperMap.TransportationAnalystParameter({
resultSetting: resultSetting,
turnWeightField: "TurnCost",
weightFieldName: "length"  //length,time
});
//设置最近设施分析参数
var findClosetFacilitiesParameter = new SuperMap.FindClosestFacilitiesParameters({
//事件点,必设参数
event: eventPoint,
//要查找的设施点数量。默认值为1
expectFacilityCount: 1,
//设施点集合,必设
facilities: [new ol.geom.Point([2500, -3500]), new ol.geom.Point([5500, -2500]), new ol.geom.Point([7000, -4000])],
isAnalyzeById: false,
parameter: analystParameter
});
                

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

                    //创建最近设施查找分析示例
new ol.supermap.NetworkAnalystService(serviceUrl).findClosestFacilities(findClosetFacilitiesParameter, function (serviceResult) {
//获取服务器返回的结果
var result = serviceResult.result;
});查看源码 »
                

运行效果

选址分区分析

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

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

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

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

                    //创建选址分区分析服务实例
new ol.supermap.NetworkAnalystService(serviceUrl).findLocation(findLocationParameter, function (serviceResult) {
//获取服务器返回的结果
var result = serviceResult.result;
});查看源码 »
                    

运行效果

多旅行商分析/物流配送

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

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

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

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

                    //设置网络分析结果参数
var resultSetting = new SuperMap.TransportationAnalystResultSetting({
returnEdgeFeatures: true,
returnEdgeGeometry: true,
returnEdgeIDs: true,
returnNodeFeatures: true,
returnNodeGeometry: true,
returnNodeIDs: true,
returnPathGuides: true,
returnRoutes: true
});
//设置网络分析通用参数
var analystParameter = new SuperMap.TransportationAnalystParameter({
resultSetting: resultSetting,
weightFieldName: "length"  //"length"或者"time"
});
//设置多旅行商分析参数
var findMTSPPathsParameter = new SuperMap.FindMTSPPathsParameters({
centers: [new ol.geom.Point([6000, -5500]), new ol.geom.Point([5500, -2500]), new ol.geom.Point([2500, -3500])],
isAnalyzeById: false,
nodes: [new ol.geom.Point([5000, -5000]), new ol.geom.Point([6500, -3200])],
hasLeastTotalCost: true,
parameter: analystParameter
});
                

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

            //创建物流配送分析服务实例
new ol.supermap.NetworkAnalystService(serviceUrl).findMTSPPaths(findMTSPPathsParameter, function (serviceResult) {
//获取服务器返回的结果
var result = serviceResult.result;
});查看源码 »
                    

运行效果

规划最佳路径

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

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

设置最佳路径分析参数 findPathParameter,包括交通网络分析通用参数、途径站点等;

                    //设置网络分析结果参数
var resultSetting = new SuperMap.TransportationAnalystResultSetting({
returnEdgeFeatures: true,
returnEdgeGeometry: true,
returnEdgeIDs: true,
returnNodeFeatures: true,
returnNodeGeometry: true,
returnNodeIDs: true,
returnPathGuides: true,
returnRoutes: true
});
var analystParameter = new SuperMap.TransportationAnalystParameter({
resultSetting: resultSetting,
weightFieldName: "length"
});
var findPathParameter = new SuperMap.FindPathParameters({
isAnalyzeById: false,
nodes: [new ol.geom.Point([4000, -3000]), new ol.geom.Point([5500, -2500]), new ol.geom.Point([6900, -4000])],
hasLeastEdgeCount: false,
parameter: analystParameter
});
                

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

                    //创建规划最佳路径分析服务实例
new ol.supermap.NetworkAnalystService(serviceUrl).findPath(findPathParameter, function (serviceResult) {
//获取服务器返回的结果
var result = serviceResult.result;
});查看源码 »
                    

运行效果

客户端计算

SuperMap iClient for OpenLayers 提供 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格网分析为例,关键代码如下:

                            //构建turf资源
var turfSource = new ol.source.Turf({
wrapX: false,
attributions: new ol.Attribution({
    html: ""
}),
}),
//以 Grids.hexGrid 分析类型为例进行客户端计算(其他分析及配置请参考 ol.source.Turf API)
turfSource.process("Grids.hexGrid", {
        "bbox": bbox,
        "cellSide": cellSide,
        "units": units,
        "triangles": triangles
});查看源码 »
                    

运行效果

地址匹配

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

正向地址匹配

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

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

运行效果

反向地址匹配

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

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

运行效果

大数据分析

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

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

密度分析

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

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

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

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

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

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

                        // 创建密度分析实例
var processingService = new ol.supermap.ProcessingService(processingsUrl);
processingService.addKernelDensityJob(kernelDensityJobParameter, function (serviceResult) {
// 获取服务端返回的数据
var result = serviceResult.result;
});查看源码 »
                    

运行效果

点聚合分析

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

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

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

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

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

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

                        // 创建点聚合分析实例
var processingService = new ol.supermap.ProcessingService(processingsUrl);
processingService.addSummaryMeshJob(summaryMeshJobParameter, function (serviceResult) {
// 获取服务端返回的数据
var result = serviceResult.result;
});查看源码 »
                    

运行效果

单对象查询分析

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

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

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

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

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

向服务端提交单对象查询分析的请求,待服务端成功处理并返回单对象查询分析结果后对其进行解析处理。

                        // 创建单对象查询分析实例
var processingService = new ol.supermap.ProcessingService(processingsUrl);
processingService.addQueryJob(singleObjectQueryJobsParameter, function (serviceResult) {
// 获取服务端返回的数据
var result = serviceResult.result;
});查看源码 »
                    

运行效果

区域汇总分析

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

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

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

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

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

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

                        // 创建区域汇总分析实例
var processingService = new ol.supermap.ProcessingService(processingsUrl);
processingService.addSummaryRegionJob(summaryRegionJobParameter, function (serviceResult) {
// 获取服务端返回的数据
var result = serviceResult.result;
});查看源码 »
                        

运行效果

矢量裁剪分析

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

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

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

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

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

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

                        // 创建矢量裁剪分析实例
var processingService = new ol.supermap.ProcessingService(processingsUrl);
processingService.addVectorClipJob(vectorClipJobsParameter, function (serviceResult) {
// 获取服务端返回的数据
var result = serviceResult.result;
});查看源码 »
                    

运行效果

数据流

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

查询一个线数据,每两秒将一个点通过 dataFlowService 广播给 iSevrer 的 dataflow 服务,模拟实时数据, 可通过 dataFlowService 将其他实时数据广播给 iServer。

//实例化 DataFlow 对象
var source = new ol.source.DataFlow({
ws: urlDataFlow
});
//绑定添加要素事件进行内容赋值与坐标位置设置
source.on('addfeature', function (e) {
var feature = e.feature;
content.innerHTML = feature.get('time');
overlay.setPosition(feature.getGeometry().getCoordinates());
});
var resultLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
radius: 6
}),
fill: fill,
})
});
//模拟实时数据
//查询一个线数据,每两秒将一个点通过dataFlowService广播给iSevrer的dataflow服务
new ol.supermap.QueryService(urlQuery)
.queryBySQL(param, function (serviceResult) {
featureResult = serviceResult;
dataFlowBroadcast = new ol.supermap.DataFlowService(urlDataFlow).initBroadcast();
dataFlowBroadcast.on('broadcastSocketConnected', function (e) {
//一直调用下方的广播函数
timer = window.setInterval("broadcast()", 2000);
})
map.addLayer(resultLayer);
});

}

通过间隔2s的定时器对 broadcast 函数进行连续调用,通过 count 的自增来模拟实时的坐标位置的变化,产生实时数据的效果。

var count = 200;
function broadcast() {
//如果count大于模拟坐标点数组长度,清除定时器。
if (count >= featureResult.result.recordsets[0].features.features[0].geometry.coordinates.length) {
window.clearInterval(timer);
return;
}
var point = featureResult.result.recordsets[0].features.features[0].geometry.coordinates[count];
var feature = {
geometry: {
    coordinates: [point[0], point[1]],
    type: "Point"
},
type: "Feature",
properties: {
    id: 1,
    time: new Date()
}
};
//向dataflow服务推送数据
dataFlowBroadcast.broadcast(feature);
count += 3;
}
查看源码 »

运行效果

数据可视化

SuperMap iClient for OpenLayers支持可视化包含:

热力图

原理:在客户端直接渲染的栅格图,热点图的渲染需要三大要素:

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

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

示例代码

                                        //创建热力图
var xmax = 130, xmin = 80, ymax = 50, ymin = 20;
for (var i = 0; i < 100; i++) {
heatPoints[i] = new ol.Feature(new ol.geom.Point([Math.floor(Math.random() * (xmax - xmin + 1) + xmin), Math.floor(Math.random() * (ymax - ymin + 1) + ymin)]));
}
var heatMap = new ol.layer.Heatmap({
source: new ol.source.Vector({
//热力点数组
features: heatPoints,
wrapX: false
}),
//模糊大小
blur: blur,
//半径大小
radius: radius
});
map.addLayer(heatMap);查看源码 »
    

运行效果

聚点图

AnimatedCluster 是一个提供动态标识聚类功能的 OpenLayers 插件。

下载 AnimatedCluster 插件

1.进入 github 下载 AnimatedCluster,下载地址为:

            https://github.com/Viglino/OL3-AnimatedCluster
                

2.script标签引入:

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

示例代码:

var clusterSource = new ol.source.Cluster({
    //聚合点之间的最小距离
    distance: 40,
    source: new ol.source.Vector(),
    //水平不平铺
    wrapX: false
});
//实例化AnimatedCluster插件对象图层类
var clusterLayer = new ol.layer.AnimatedCluster({
    name: 'Cluster',
    source: clusterSource,
    //动画持续时间
    animationDuration: 700,
    //传入下方getStyle函数作为style属性
    style: getStyle
});
map.addLayer(clusterLayer);
//为聚合对象添加要素
function addFeatures(nb) {
    var features = [];
    var xmax = 130, xmin = 80, ymax = 50, ymin = 20;
    for (var i = 0; i < nb; ++i) {
        features[i] = new ol.Feature(new ol.geom.Point([Math.floor(Math.random() * (xmax - xmin + 1) + xmin), Math.floor(Math.random() * (ymax - ymin + 1) + ymin)]));
        features[i].set('id', i);
    }
    clusterSource.getSource().clear();
    clusterSource.getSource().addFeatures(features);
}
addFeatures(2000);
});

根据要素的长度来确定绘制聚点的样式。

function getStyle(feature) {
var styleCache = {};
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
    var color = size > 25 ? "192,0,0" : size > 8 ? "255,128,0" : "0,128,0";
    var radius = Math.max(8, Math.min(size * 0.75, 20));
    var dash = 2 * Math.PI * radius / 6;
    dash = [0, dash, dash, dash, dash, dash, dash];
    style = styleCache[size] = [new ol.style.Style({
        image: new ol.style.Circle({
            radius: radius,
            stroke: new ol.style.Stroke({
                color: "rgba(" + color + ",0.5)",
                width: 15,
                lineDash: dash,
                lineCap: "butt"
            }),
            fill: new ol.style.Fill({
                color: "rgba(" + color + ",1)"
            })
        }),
        text: new ol.style.Text({
            text: size.toString(),
            fill: new ol.style.Fill({
                color: '#fff'
            })
        })
    })
    ];
}
return style;
}
查看源码 »
                

运行效果

动画要素图

基于 OpenLayers 的动态闪烁点的动画示例。

示例代码:

                  //添加随机的要素
function addRandomFeature() {
var xmax = 130, xmin = 80, ymax = 50, ymin = 20;
var feature = new ol.Feature(new ol.geom.Point([Math.floor(Math.random() * (xmax - xmin + 1) + xmin), Math.floor(Math.random() * (ymax - ymin + 1) + ymin)]));
source.addFeature(feature);
}
//实现动画效果
function flash(feature) {
var start = new Date().getTime();
var listenerKey;

function animate(event) {
    //动画的持续时间
    var duration = 3000;
    var vectorContext = event.vectorContext;
    var frameState = event.frameState;
    var flashGeom = feature.getGeometry().clone();
    var elapsed = frameState.time - start;
    var elapsedRatio = elapsed / duration;
    //半径大小
    var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;
    //透明度
    var opacity = ol.easing.easeOut(1 - elapsedRatio);
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: radius,
            snapToPixel: false,
            stroke: new ol.style.Stroke({
                color: 'rgba(255, 0, 0, ' + opacity + ')',
                width: 0.25 + opacity
            })
        })
    });
    vectorContext.setStyle(style);
    vectorContext.drawGeometry(flashGeom);
    if (elapsed > duration) {
        ol.Observable.unByKey(listenerKey);
        return;
    }
    map.render();
}

listenerKey = map.on('postcompose', animate);
}
//将动画绑定到添加要素的事件中
var source = new ol.source.Vector({
wrapX: false
});
source.on('addfeature', function (e) {
flash(e.feature);
});
var vector = new ol.layer.Vector({
source: source
});
map.addLayer(vector);
//通过定时器不断添加动画要素到地图
window.setInterval(addRandomFeature, 1000);
});查看源码 »
                

运行效果

高效率点图层

高效率点图层(graphicLayer),主要是针对前端大数据量的点渲染。

创建 graphicLayer,在地图上随机绘制10万圆形:

                        //高效率点图层要素对象
var graphics = new ol.Graphic(new ol.geom.Point([-74.0095,40.6184]));
map.once('postrender', function () {
var graphicLayer = new ol.layer.Image({
source: new ol.source.Graphic({
    graphics: graphics,
    //渲染方式
    render: "canvas",
    map: map
});
});
map.addLayer(graphicLayer);
});查看源码 »
                    

运行效果

ECharts

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

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

ECharts 官网地址为:

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

SuperMap iClient for OpenLayers 提供了ol3Echarts插件以支持ECharts的可视化效果,以北京公交路特效图为例:

创建 echartslayer 图层,并添加到地图:

                    var echartslayer = new ol3Echarts();
echartslayer.appendTo(map);
                

配置 echartslayer 图层属性,传入图层进行渲染:

                //busLines 为图层数据
var echartsOption = {
series: [{
type: 'lines',
polyline: true,
data: busLines,
silent: true,
lineStyle: {
    normal: {
        opacity: 0.2,
        width: 1
    }
},
progressiveThreshold: 500,
progressive: 200,
zlevel: 2
},
{
type: 'lines',
polyline: true,
data: busLines,
lineStyle: {
    normal: {
        width: 0
    }
},
effect: {
    constantSpeed: 20,
    show: true,
    trailLength: 0.1,
    symbolSize: 1.5
},
zlevel: 1
}]
};
//传入图表配置对象,进行渲染
echartslayer.setChartOptions(echartsOption);查看源码 »
                

运行效果

Mapv

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

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

MapV 官网地址为:

https://mapv.baidu.com/
                

SuperMap iClient for OpenLayers 提供了 ol.source.Mapv 以对可视化效果图层进行支持

                     new ol.source.Mapv(options)
                

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

配置样式参数对象

                //dataSet是保存json数据对象的对象
var dataSet = new mapv.DataSet(data);
//配置线图层属性
var mapvLineOptions = {
//描边颜色
strokeStyle: 'rgba(55, 50, 250, 0.3)',
//颜色叠加方式
globalCompositeOperation: 'lighter',
//投影颜色
shadowColor: 'rgba(55, 50, 250, 0.5)',
//投影模糊级数
shadowBlur: 10,
//描边宽度
lineWidth: 1.0,
//最直接的方式绘制点线面
draw: 'simple'
};
var lineOptions = {
map: map, dataSet: dataSet, mapvOptions: mapvLineOptions
};
map.addLayer(new ol.layer.Image({
source: new ol.source.Mapv(lineOptions)
}));

var dataSet = new mapv.DataSet(timeData);
//配置动画图层属性
var mapvTimeOptions = {
fillStyle: 'rgba(255, 250, 250, 0.9)',
globalCompositeOperation: 'lighter',
size: 1.5,
animation: {
//按时间展示动画
type: 'time',
//动画时间范围
stepsRange: {
    start: 0,
    end: 100
},
//时间动画的拖尾大小
trails: 1,
//单个动画的时间
duration: 5
},
draw: 'simple'
};
var timeOptions = {
map: map,
dataSet: dataSet,
mapvOptions: mapvTimeOptions,
attributions: new ol.Attribution({
html: ''
})
};
//将Mapv图层添加到地图上
map.addLayer(new ol.layer.Image({
source: new ol.source.Mapv(timeOptions)
}));查看源码 »
                

运行效果

OSM Buildings

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

OSM Buildings 支持 GeoJSON 数据格式。

引入插件 OSMBuildings.js 包括两种方式:

下载 OSMBuildings.js

1.进入 github 下载 OSMBuildings.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>
                                    

核心代码

                var data;
$.get('../data/buildings.json', function (geojson) {
data = geojson;
//实例化 OSMBuildings 类,链式调用实例对象方法
new OSMBuildings(map)
.date(new Date(2017, 5, 15, 17, 30))
.set(geojson)
.click(bindPopup);
});查看源码 »
                

运行效果