KQWebMap API for Leaflet
主要介绍 KQWebMap API for Leaflet 的入门用法，详细的接口参数请参考 API 页面。
准备
获取 Leaflet 和 KQWebClient for Leaflet
开发时需要引入Leaflet 和 KQClient for Leaflet。你可以这样获取文件：
Leaflet
- 通过 Leaflet 官网 下载 Leaflet.zip
- 在 Leaflet 的 Github 上下载
KQWebClient for Leaflet
- 通过 KQGIS 2D for Leaflet 官网 下载最新版本开发包
引入
获取文件后，只需要像普通的 JavaScript 库一样用 <script> 标签引入即可。以下详细介绍如何引入 KQClient for Leaflet:
新建一个 HTML 文件，在
标签中引入相关 JS 文件，填入 前面下载的依赖包解压后 的文件地址，例如：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>window.lib_path = "../dist/leaflet/3rd_libs"</script>
<script type="text/javascript" src="../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript" src="../dist/leaflet/kq-release.js"></script>
</head>
</html>
创建一幅地图
KQGIS Server 发布的地图
在准备章节，已经新建了一个 HTML 页面，在页面中继续添加代码以创建地图，如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script>window.lib_path = "../../dist/leaflet/3rd_libs"</script>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript" src="../../dist/leaflet/kq-release.js"></script>
<script src="../custom.js"></script>
<link rel="stylesheet" href="../css/example.css"/>
</head>
<body onload="onload()">
<div id="map"></div>
</body>
</html>
以嵌入 KQGIS Server 发布的中国地图为例，在 <script> 中添加代码，初始化地图信息：
// 设置resolutions
var res = [];
for (var i = 0; i < 18; i++) {
res.push(156543.03392828687 / (Math.pow(2, i)));
}
// 初始化地图
var map = L.map('map', {
zoomControl: false,
center: [30.543, 104.397],
zoom: 4,
crs: new L.Proj.CRS("EPSG:3857",
{
origin: [-20037508.3427892, 20037508.3427892],
resolutions: res,
bounds: L.bounds([-20037508.3427892, -20037508.3427892], [20037508.3427892, 20037508.3427892])
})
});
// 加载china地图
L.kqmap.mapping.singleKanqLayer(service_ip + "/KQGis/rest/services/china3857/MapServer/export",
{
layers: [7, 1, 2, 3, 4, 5],
style: "default",
format: "image/png",
transparent: true,
}
).addTo(map);
运行效果
第三方地图
KQWebMap API for Leaflet 对多种互联网地图信息进行了封装，例如百度地图、天地图等。
以天地图为例，KQWebMap API for Leaflet 提供了 tiandituTileLayer，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>window.lib_path = "../../dist/leaflet/3rd_libs"</script>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript" src="../../dist/leaflet/kq-release.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">
// 初始化地图
var map = L.map('map', {
center: [30, 100],
zoom: 3,
});
// 添加天地图
L.kqmap.mapping.tiandituTileLayer({
layerType: "vec",
}).addTo(map);
</script>
</body>
</html>
运行效果:
为地图设置投影
KQClient for Leaflet 通过投影类 L.Proj.CRS 可以方便的定义地图投影，支持设置范围、原点、比例尺数组以及分辨率数组。例如：
// 定义地图投影
var crs = L.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],
});
L.kqmap.mapping.singleKanqLayer(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.pan | 默认位于地图左上角 |
| 鹰眼图 | L.Control.MiniMap | 默认位于地图右下角 |
| 图层切换 | L.control.layers | 默认位于地图右上角 |
| 卷帘 | L.control.sideBySide | 卷帘默认出现在地图中心 |
| 比例尺 | L.control.scale | 默认位于地图左下角 |
| 定位 | L.control.locate | 默认位于地图左上角 |
| 缩放 |
L.kqmap.control.zoomInButton、L.kqmap.control.zoomOutButton |
位置由父控件决定 |
鹰眼控件：
添加鹰眼控件比较简单，直接添加到map中即可:
// 添加控件
L.control.minimap().addTo(map);
运行效果：
图层切换控件：
图层切换控件，可以实现多个图层的切换功能。
第一步，先初始化多个图层 L.kqmap.mapping.tiandituTileLayer()。
然后，定义图层切换控件，并加入到地图中，L.control.layers(baseMaps, overlays).addTo(map).setPosition("topleft");。
// 添加天地图 矢量图层
var vec = L.kqmap.mapping.tiandituTileLayer({
layerType: "vec",
attribution: null
});
// 添加天地图 影像图层
var img = L.kqmap.mapping.tiandituTileLayer({
layerType: "img",
attribution: null
});
// 添加天地图 地形晕染图层
var ter = L.kqmap.mapping.tiandituTileLayer({
layerType: "ter",
attribution: null
});
// 添加天地图 中文注记图层
var cva = L.kqmap.mapping.tiandituTileLayer({
layerType: "cva",
attribution: null
});
// 添加天地图 英文注记图层
var eia = L.kqmap.mapping.tiandituTileLayer({
layerType: "eia",
attribution: null
});
var baseMaps = {
"矢量图层": vec,
"影像图层": img,
"地形晕染图层": ter
};
var overlays = {
"中文注记图层": cva,
"英文注记图层": eia
};
// 初始化地图
var map = L.map("map", {
center: [30.543, 114.397],
zoom: 2,
zoomControl: false,
attributionControl: false,
layers: [vec, cva]
});
L.control.layers(baseMaps, overlays).addTo(map).setPosition("topleft");
运行效果：
绘制符号与图形
基本绘制
Leaflet 本身不支持点线面的绘制。需要引入插件leaflet的draw模块。可以通过这种方式载入：
<script type="text/javascript" include="leaflet.draw"
src="../libs/kqwebclient/leaflet/include-leaflet.js"></script>
引入插件后，通过以下代码实现点线面的绘制：
// 创建一个绘制图层
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
// 绘制控件参数配置
var options = {
position: 'topleft',
draw: {
polyline: {}, // 线
polygon: {}, // 面
circle: {}, // 圆
rectangle: {}, // 矩形
marker: {}, // 标记点
circlemarker: {}
},
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.pm插件。
<script type="text/javascript" include="leaflet.pm"
src="../libs/kqwebclient/leaflet/include-leaflet.js"></script>
引入插件后，通过以下代码实现点线面的绘制：
// 创建一个绘制图层
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
// 捕捉绘制控件参数设置
var pm_options = {
position: 'topleft', // 控件位置
drawMarker: true, // marker绘制是否可选
drawPolygon: true, // drawPolygon绘制是否可选
drawPolyline: true, // drawPolyline绘制是否可选
editPolygon: true, // editPolygon编辑是否可选
deleteLayer: true
};
// 添加捕捉绘制控件
map.pm.addControls(pm_options);
运行效果：
基础数据加载
支持点、线、面基础数据加载及展示，提供多种展示方式：效果参考地址。
以下分别展示点数据、线数据及面数据的示例：
点数据
点数据的加载，一般采用 L.marker() 的方式展示，样式主要由 L.icon 来决定。
例如下面 点高亮的示例：
// icon
var icon1 = L.icon({
iconUrl: '../images/hotel.png',
iconSize: [32, 32], // size of the icon
});
// L.marker
var marker1 = L.marker([32.39189, 111.691888], {
icon: icon1,
highlight: "permanent",
}).addTo(map);
运行效果：
线数据
线数据的加载，线的展示可以采用多种方式，如 L.Polyline等。
以 动画线 示例为例，首先定义展示运动点的 L.icon，然后定义 L.motion.polyline 用于点的运动。
var Icon = L.icon({
iconUrl: '../images/bike.png',
iconSize: [25, 40],
iconAnchor: [12.5, 40],
});
// 线动画
L.motion.polyline(route, {
color: 'yellowgreen'
}, {
auto: true,
duration: 15000,
}, {
showMarker: true,
icon: Icon
}).addTo(map).bindPopup('<div style="width:250px;text-align: center;"><h4>环球骑行路线</h4><img src="../images/bike.jpg" alt=""></div>');
运行效果：
面数据
面数据有多种加载方式，可以通过服务加载图层的方式，也可以通过加载本地配置文件的方式，可以通过绘制的方式等。
应用的方式可以参考 面数据示例。
如下面 中国各省市面 示例，首先初始化数据china，然后调用L.geoJson显示:
geojson = L.geoJson(china, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
运行效果：
面积与距离测量
KQClient for Leaflet 支持距离量算和面积量算。
距离测量
调用 LengthCalculate 类，设置服务地址及查询路径数据等，后设置回调函数即可，如下：
// 接口options
var options = {};
options.url = service_ip + "/KQGis/rest/services/jingjin4326";
options.data = '{"type":"Polyline","coordinates":[[[114.561665, 30.490096], [114.573338, 30.480629], [114.585011, 30.499563]]]}';
options.geoSRS = 'EPSG:4326';
options.outSRS = 'EPSG:4326';
var query = new L.kqmap.services.LengthCalculate(options);
query.queryAsync(onsuccess, onfailed);
运行效果：
面积测量
调用 AreaCalculate 类，设置服务地址及查询范围数据等，后设置回调函数即可，如下：
// 接口options
var options = {};
options.url = service_ip + "/KQGis/rest/services/jingjin4326";
options.data = '{"type":"Polygon","coordinates":[[[114.561665,30.490096],[114.561665,30.499563],[114.573338,30.499563],[114.573338,30.490096],[114.561665,30.490096]]]}';
options.geoSRS = 'EPSG:4326';
options.outSRS = 'EPSG:4326';
var query = new L.kqmap.services.AreaCalculate(options);
query.queryAsync(onsuccess, onfailed);
运行效果：
使用KQGIS服务
KQClient for leaflet 现支持多个多种类型的服务，包含查询服务、分析服务、几何服务、数据服务、WPS服务等。
查询服务
查询服务为KQGIS Server提供的queryserver下的接口功能，包括：
| 差异分析 | 多层差异分析 | 叠置分析 | 多层叠置分析 |
| 表字段查询 | 唯一值查询 | 空间查询 | 汇总查询 |
| 执行SQL语句 | 相关分析 | 回归分析 | 聚类分析 |
| 主成份分析 | 秩相关分析 | 生成空间权重矩阵 | 空间自相关分析 |
| 局部空间自相关分析 | 高低聚类分析 | 频数分析 | 汇总统计分析 |
| 创建要素类 |
要素导入 |
要素更新 |
要素删除 |
以差异分析为例：
// 接口options
var options = {};
var geometry = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"options":{"stroke":true,"color":"#3388ff","weight":4,"opacity":0.5,"fill":true,"fillColor":null,"fillOpacity":0.2,"showArea":true,"clickable":true,"_dashArray":null}},"geometry":{"type":"Polygon","coordinates":[[[115.94651229,39.40190218],[115.94651229,40.6330893],[116.77141198,40.6330893],[116.77141198,39.40190218],[115.94651229,39.40190218]]]}}],"proj4":"+proj=longlat +datum=WGS84 +no_defs","prj":"GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433],AUTHORITY[\"EPSG\",4326]]"};
options.url = service_ip + "/KQGis/rest/services/jingjin4326";
options.geometry = JSON.stringify(getGeomFromFeatureCollection(geometry));
options.layerid = 4;
options.geoSRS = 'EPSG:4326';
options.outSRS = 'EPSG:4326';
var query = new L.kqmap.services.QueryDifferenceAnalysis(options);
query.queryAsync(onsuccess, onfailed);
运行效果：
要素操作
要素操作属于查询服务下的功能，主要包含要素导入、要素更新、要素删除。 调用方法如下：
// 要素导入
var options = {};
options.url = url;
options.layerId = layerId;
options.forceImport = true;
options.data = "{'type':'Feature','ID':'Feature1','geometry':{'type':'Polygon','coordinates':[[[113.03736605,40.8799731],[113.03736605,41.71587145],[113.97225237,41.71587145],[113.97225237,40.8799731],[113.03736605,40.8799731]]]},'properties':{'GEOMETRY':'1','AREA':'1','AREA_1':'1','LANDTYPE':'1','KANQDB_LENGTH':'1','KANQDB_AREA':'1'}}";
options.geoSRS = 'EPSG:4326';
options.outSRS = 'EPSG:4326';
options.version = '2.0';
var query = new L.kqmap.services.FeatureImport(options);
query.queryAsync(create_onsuccess, create_onfailed);
// ---------------------------------------------------------------------
// 要素更新
var options = {};
options.url = url;
options.layerId = layerId;
options.data = "{" + "'where': " + "'" + sqlwhere + "', 'type':'Feature','ID':'Feature1','geometry':{'type':'Polygon','coordinates':[[[113.49381055,41.89185005],[112.69640751,41.29242294],[113.50480921,40.64900118],[114.23622027,41.3034216],[113.49381055,41.89185005]]]},'properties':{'GEOMETRY':'','AREA':'','AREA_1':'','LANDTYPE':'','KANQDB_LENGTH':'','KANQDB_AREA':''}}";
options.geoSRS = 'EPSG:4326';
options.outSRS = 'EPSG:4326';
options.version = '2.0';
var query = new L.kqmap.services.FeatureUpdate(options);
query.queryAsync(update_onsuccess, update_onfailed);
// ---------------------------------------------------------------------
// 要素删除
var options = {};
options.url = url;
options.layerId = layerId;
if (sqlwhere !== "") {
options.where = sqlwhere;
}
options.version = '2.0';c
var query = new L.kqmap.services.FeatureDelete(options);
query.queryAsync(delete_onsuccess, delete_onfailed);
运行效果：
通用查询分析服务
通用查询分析服务包含的查询功能包括：
| 差异分析 | 多层差异分析 | 叠置分析 | 多层叠置分析 |
| 表字段查询 | 唯一值查询 | 空间查询 | 汇总查询 |
| 执行SQL语句 | 相关分析 | 回归分析 | 聚类分析 |
| 主成份分析 | 秩相关分析 | 生成空间权重矩阵 | 空间自相关分析 |
| 局部空间自相关分析 |
高低聚类分析 |
频数分析 |
汇总统计分析 |
通用查询分析服务类似查询服务，在调用方法和用途上与查询服务有所区别。
- 通用查询分析服务的请求，主要采取json格式的参数，采取的接口方法统一为proc;
- 查询服务一般含所查询图层的id，而通用查询分析服务普遍采用geometry的参数和数据库来查询;
几何服务
几何服务提供的功能包含：
| 图形操作 | 坐标投影转换 | 面积长度计算 | 缓冲分析 |
| 叠置分析 | 差异分析 | shp文件导出 | 投影系统转换 |
| 图形合并 | 对称差 | Shapefile文件解析 | CAD文件解析 |
| 图形检查 |
几何属性 |
以缓冲分析为例：
// 接口options
var options = {};
options.url = service_ip + "/KQGis/rest/services/jingjin4326";
options.data = JSON.stringify(geo_src);
options.geoSRS = 'EPSG:4326';
options.outSRS = 'EPSG:4326';
// sideType: 缓冲区方向；outer：外缓冲区（针对面状数据、点状数据）；inner：内缓冲区（针对面状数据）；left：左缓冲区（针对线状数据、点状数据）；right：右缓冲区（针对线状数据）；both：双缓冲区
options.sideType = 'both';
options.radius = Number.parseFloat($("#radius").val());
options.version = '2.0';
var query = new L.kqmap.services.BufferAnalysis(options);
query.queryAsync(onsuccess, onfailed);
运行效果：
数据服务
数据服务提供的方法主要包含：
- 获取数据源列表
- 获取数据目录
- 获取字段属性
- 获取要素类
- 获取要素
以获取数据源列表为例：
// 请求数据
var url = service_ip + "/KQGis/rest/services/jingjin_ds/DataServer/proc";
var options = {
request: "GetDatasourceList"
};
let response = JSON.parse(await KQCommon.NetworkTools.httpPostAsync(url, KQCommon.NetworkTools.getParamString(options)));
WPS服务
WPS服务提供的方法主要包含：
- 边界(Boundary)
- 中心点查询(Centroid)
- 集合差(Symdifference)
- 外缓冲(Buffer)
- 图形包含(Contains)
- 凸包(Convexhull)
- 无交集(Disjoint)
- 通过性(Crosses)
- 差集(Difference)
- 距离(Distance)
- 相等(Equals)
- 交集(Intersection)
- 相交(Intersects)
- 接触(Touches)
- 并集(Union)
以中心点查询为例：
var gmlCoordinatesString = "";
geoJSON.geometries[0].coordinates[0].forEach(function (val) {
gmlCoordinatesString += val[1] + "," + val[0] + " ";
});
// 接口options
var options = {};
options.request = 'Execute';
options.identifier = 'Centroid';
options.inputData = `<wps:Execute
xmlns:wps="http://www.opengis.net/wps/1.0.0"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:gml="http://www.opengis.net/gml"
xmlns:ows="http://www.opengis.net/ows/1.1" service="WPS" version="1.0.0" xsi:schemaLocation="http://www.opengis.net/wps/1.0.0">
<ows:Identifier>Centroid</ows:Identifier>
<wps:DataInputs>
<wps:Input>
<ows:Identifier>GMLInput</ows:Identifier>
<wps:Data>
<wps:ComplexData>
<gml:Polygon srsName="EPSG:4326">
<gml:outerBoundaryIs>
<gml:LinearRing>
<gml:coordinates>` + gmlCoordinatesString + `</gml:coordinates>
</gml:LinearRing>
</gml:outerBoundaryIs>
</gml:Polygon>
</wps:ComplexData>
</wps:Data>
</wps:Input>
</wps:DataInputs>
<wps:ResponseForm>
<wps:ResponseDocument>
<wps:Output mimeType="text/xml; subtype=gml/2.1.2" asReference="false">
<ows:Identifier>Centroid</ows:Identifier>
</wps:Output>
</wps:ResponseDocument>
</wps:ResponseForm>
</wps:Execute>`;
var url = service_ip + "/KQGis/rest/services/WPSServer/WPS";
var response = await KQCommon.NetworkTools.httpPostAsync(url, KQCommon.NetworkTools.getParamString(options));
运行效果：
使用大数据服务
KQClient for Leaflet 支持多种大数据服务，主要包含：
- 矢量大数据分析
- 栅格大数据分析
- 要素编辑
- 视图图层
- 栅格聚合
- 地理编码服务
- 实时流服务
矢量大数据分析
矢量大数据分析，负责矢量图层数据的分析服务。
以 图层与图形叠加分析 为例：
首先，添加矢量图层 和 查询范围图形。
var wmsUrl = kqcloud.kqcloud_ip + "/kqcloudserver/wms";
// 添加wms图层 长株潭
czt4490Layer = L.kqmap.mapping.wmsLayer(wmsUrl, {
layers: kqcloud.cztPolygon,
styles: "M-面-太阳黄",
version: "1.1.0",
opacity: 0.6
}).addTo(map);
L.rectangle([[28.06174966419842, 113.09198390965624], [28.815674224745294, 114.46547023778123]], { color: "blue", fillOpacity: 0 }).addTo(map);
通过调用接口 kqcloud.overlay() 请求服务。
kqcloud.overlay(params).done(function (data) {
$("#loading").css("display", "none");
data.content.forEach(element => {
var json = Terraformer.WKT.parse(element.geometry); // wkt转成geojson格式
L.geoJSON(json, { style: { color: "red" } }).addTo(map);//显示数据
});
notification.show({
message: "分析成功！"
}, "info");
}).fail(function (err) {
$("#loading").css("display", "none");
console.log(error);
notification.show({
message: "分析失败！"
}, "info");
});
运行效果：
栅格大数据分析
栅格大数据分析，负责栅格图层数据的分析服务。
以 坡度与坡向分析 为例：
首先，设置栅格查询的参数params。
var params = {};
params.colorRamp = "BlueToRed";
params.layerId = kqcloud.ex_DEM.split(':')[1];
if (value === "坡向分析") {
params.layerName = "栅格分析_ex_湖北DEM_坡向分析";
params.operator = "aspect";
params.style = "坡向图分级渲染_八向";
}
else {
params.layerName = "栅格分析_ex_湖北DEM_坡度分析";
params.operator = "slope";
params.style = "坡度图分级渲染_90";
}
调用接口 kqcloud.rasterAnalysis() 请求服务。
kqcloud.rasterAnalysis(params).done(function (data) {
if (data) {
$("#loading").css("display", "none");
newLayerID = "kanq:" + data.content;
notification.show({
message: "分析成功"
}, "info");
}
temporaryLayer = L.kqmap.mapping.wmsLayer(wms_layer, {
layers: newLayerID,
styles: params.style,
version: "1.1.0",
}).addTo(map);
}).fail(function (err) {
$("#loading").css("display", "none");
console.log(err);
notification.show({
message: "分析失败"
}, "info");
});
运行效果：
要素编辑
要素编辑，主要包含 要素入库、要素更新、要素删除 功能。
参考 要素编辑 示例，其中主要涉及 apiFeatureAdd, apiFeatureUpdate, apiFeatureDelete 接口。
// 要素入库
const geojson = editLayer.toGeoJSON();
const params = {
layerId: layerId,
geoJson: JSON.stringify(geojson)
};
kqcloud.apiFeatureAdd(params).done(function (data) {
init();
if (data.code === 200) {
notification.show({
message: "要素入库成功"
}, "info");
// 拖拽地图来刷新要素
setTimeout(function () {
map.panBy([1, 0]);
}, 100);
}
}).fail(function (err) {
init();
notification.show({
message: "要素入库失败"
}, "info");
console.log(err);
});
// 要素更新
kqcloud.apiFeatureUpdate(params).done(function (data) {
// ...
});
// 要素删除
kqcloud.apiFeatureDelete(params).done(function (data) {
// ...
});
运行效果：
视图图层
查看视图图层，可以通过 publishVectorViewLayer 接口查询:
var resultLayer = kqcloud.publishVectorViewLayer();
L.kqmap.mapping.wmsLayer(wmsUrl, {
layers: resultLayer,
styles: "L-线-公路线",
version: "1.1.0",
}).addTo(map);
运行效果：
栅格聚合
栅格图层的聚合，可以通过 publishRasterAggLayer 实现:
//加载栅格聚合图层
var resultLayer = kqcloud.publishRasterAggLayer();
L.kqmap.mapping.wmsLayer(wmsUrl, {
layers: resultLayer,
styles: "R-土地覆盖",
version: "1.1.0",
}).addTo(map);
运行效果：
地理编码服务
地理编码服务提供 地理编码查询，关键字查询、POI搜索等服务。
以 POI搜索 为例：
初始化查询参数option。
var options = {};
options.url = service_ip + "/bigdata/api/geo/poisearch";
options.serviceid = kqcloud.dlbmId; // 当与大数据挂载一起时则必须，当独立部署时，则为空
options.keyWord = $('#key').val();
options.isExact = true;
options.queryType = 'default_';
options.pageIndex = 1；
options.pageSize = 10；
调用服务接口，获取查询结果。
const params = {
serviceid: kqcloud.dlbmId,
keyWord: $('#key').val(),
queryType: 'default_',
};
kqcloud.apiGetPOISearch(params).done(function (data) {
// ...
})
运行效果：
实时流服务
实时流服务提供实时的数据流服务，使客户端与服务器之间实现低延迟和实时数据传输。
这里以 订阅实时流 为例，可查看实时数据：
const header = {};//属性过滤
const selectorHeader = {};//空间过滤
if (value === 'att') {
selectorHeader.selector = `#root.headers['nativeHeaders']['carid'][0]=='32fcdcf3062eb980bf323cde48190b1a'`;
} else if (value === 'spa') {
header.scope = 'POLYGON((104.06562968771028 30.680917614940476,104.10356685201693 30.680917614940476,104.10356685201693 30.700487011913133,104.06562968771028 30.700487011913133,104.06562968771028 30.680917614940476))';
header.relation = 'within';
}
// 获取STOMP子协议的客户端对象
stompClient = Stomp.client(`ws://${kqcloud.kqcloud_ip.split('//')[1]}/bigdata/ws`);
// 拦截输出的一大堆垃圾信息
stompClient.debug = null;
stompClient.connect(header, function (frame) {
console.log('WebSocket连接打开。');
subscribe = stompClient.subscribe(`/stream/${kqcloud.streamId}`, function (message) {
let data = JSON.parse(message.body);
const index = carList.findIndex(function (item) {//小车是否存在
return item.carid === data.carid;
});
if (index === -1) {//新增小车
// 创建小车
let marker = L.marker([parseFloat(data.latitude), parseFloat(data.longitude)], { icon: icon });
// 添加小车
carLayer.addLayer(marker);
carList.push({ obj: marker, carid: data.carid, longitude: data.longitude, latitude: data.latitude });
} else {//小车存在改变位置
let rotation = calculateRotation(parseFloat(data.longitude) - parseFloat(carList[index].longitude), parseFloat(data.latitude) - parseFloat(carList[index].latitude));
carList[index].obj.setRotationAngle(rotation);
carList[index].obj.setLatLng([parseFloat(data.latitude), parseFloat(data.longitude)]);
carList[index].longitude = data.longitude;
carList[index].latitude = data.latitude;
}
}, selectorHeader);
});
运行效果：
数据可视化
ECharts
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari 等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图，仪表盘，并且支持图与图之间的混搭。 ECharts 官网地址为:
https://echarts.baidu.com/index.html
KQClient for Leaflet 提供了对使用Echarts可视化效果图层的支持，接口为:
L.kqmap.overlay.echartsLayer(option)
下面以北京公交交通特效图为例，将公交路线的数据进行可视化的展示：
$.get('../data/bus-lines.json', function (data) {
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
};
}));
L.kqmap.overlay.echartsLayer(option).addTo(map);
});
指定图标的配置及数据：
option = {
series: [{
type: 'lines',
coordinateSystem: 'leaflet',
polyline: true,
data: busLines,
silent: true,
lineStyle: {
normal: {
color: 'rgb(200, 35, 45)',
opacity: 0.2,
width: 1
}
},
progressiveThreshold: 500,
progressive: 200
}]
};
运行效果：
MapV
Mapv 是一款地理信息可视化开源库，可以用来展示大量地理信息数据，点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。
MapV 可展示大量的点数据，形式可以为热力图、网格、蜂窝状、点聚合、按颜色区间、按半径大小等。可展示大量的线数据，如普通画线、高亮叠加、热力线数据展示等方式，还有各种动画效果，适合用于呈现大量轨迹的场景。也可展示大量的自定义面数据，按颜色区间来展示，行政区域也是其中一种应用场景，可直接使用。
MapV 官网地址为:
https://mapv.baidu.com/
KQClient for Leaflet 提供了对使用 MapV 可视化效果图层的支持，接口为:
L.kqmap.overlay.mapVLayer(dataSet, options)
下面以 MapV 全国迁徙图 为例，将数据进行可视化的展示。
指定图层的配置项和数据：
//分段值渐变色线图层
var dataSet = new mapv.DataSet(data);
var options = {
globalCompositeOperation: 'lighter',// 颜色叠加方式
gradient: { 0: 'rgba(55, 50, 250, 0)', 1: 'rgba(55, 50, 250, 1)' },// 显示的颜色渐变范围
lineWidth: 0.2,
draw: 'intensity'
}
L.kqmap.overlay.mapVLayer(dataSet, options).addTo(map);
//动态点图
var dataSet = new mapv.DataSet(timeData);
var options = {
fillStyle: 'rgba(255, 250, 250, 0.9)',// 填充颜色
size: 0.5,//大小
animation: {
type: 'time',// 按时间展示动画
stepsRange: {// 动画时间范围,time字段中值
start: 0,
end: 50
},
trails: 1,// 时间动画的拖尾大小
duration: 5,// 单个动画的时间，单位秒
},
draw: 'simple'
}
L.kqmap.overlay.mapVLayer(dataSet, options).addTo(map);
运行效果：