主要介绍 KQWebMap API for Leaflet 的入门用法，详细的接口参数请参考 API 页面。
在页面中添加如下代码以创建中国地图，如下：
<!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>
</head>
<body>
<div id="map" style="position:absolute;left:0px;right:0px;width:800px;height:500px;"></div>
</body>
<script>
var std_scales = [
0.0000000016901668864952648690,
0.0000000033803337729905297381,
0.0000000067606675459810594762,
0.0000000135213350919621189524,
0.0000000270426701839242379048,
0.0000000540853403678484758096,
0.0000001081706807356969516192,
0.0000002163413614713939032383,
0.0000004326827229427878064767,
0.0000008653654458855756129534,
0.0000017307308917711512259068,
0.0000034614617835423024518136,
0.0000069229235670846049036271,
0.0000138458471341692098072543,
0.0000276916942683384196145085,
0.0000553833885366768392290171,
0.0001107667770733536784580342,
0.0002215335541467073569160684,
0.0004430671082934147138321368,
0.0008861342165868294276642736,
0.0017722684331736588553285472,
0.0035445368663473177106570944,
0.0070890737326946354213141888,
0.0141781474653892708426283775,
];
var resolutions = KQCommon.ComputeTools.stdScalesToResolutions(std_scales, 1);
console.log(resolutions);
var url = service_ip + "/KQGis/rest/services/china/MapServer/export";
// 初始化地图信息
var map = L.map('map', {
crs: new L.Proj.CRS("EPSG:3857",
{
origin: [-20037508.342789, 20037508.342789],
resolutions: resolutions,
bounds: L.bounds([-20037508.342789, -20037508.342789], [20037508.342789, 20037508.342789])
}),
center: [30.543, 114.397],
zoom: 3
});
// 添加wms图层
L.kqmap.mapping.singleKanqLayer(url,
{
layers: [1, 2],
style: "default",
format: "image/png",
transparent: true,
}
).addTo(map);
</script>
</html>
运行效果
KQWebMap API for Leaflet 对多种互联网地图信息进行了封装，例如百度地图、天地图等。 以天地图为例，KQWebMap API for Leaflet 提供了 tiandituTileLayer，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_tiandituLayer_mecartor"></title>
<link rel="stylesheet" href="../3rd_libs/leaflet/leaflet.css" />
<script src="../3rd_libs/leaflet/leaflet-src.js"></script>
<script src="../dist/leaflet/kq-debug.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
#map {
margin:0 auto;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// 初始化地图
var map = L.map('map', {
center: [31.59, 120.29],
zoom: 8,
});
// 添加天地图
L.kqmap.mapping.tiandituTileLayer({
layerType: "vec",
}).addTo(map);
L.kqmap.mapping.tiandituTileLayer({
layerType: "cva",
}).addTo(map);
var points =[new KQCommon.Geometry.Point(0,4010338),
new KQCommon.Geometry.Point(1063524,4010338),
new KQCommon.Geometry.Point(1063524,3150322),
new KQCommon.Geometry.Point(0,3150322)
];
var linearRings = new KQCommon.Geometry.LinearRing(points);
var region = new KQCommon.Geometry.Polygon([linearRings]);
var point = new KQCommon.Geometry.Point(-111.04, 45.68);
var geojson = new KQCommon.Format.GeoJSON();
var t = geojson.toGeoJSON(region);
console.log(t);
</script>
</body>
</html>
运行效果
KQWebMap API for Leaflet 支持的查询功能主要包括：
SQL 查询，即在指定数据集集合中查找符合 SQL 条件的矢量要素。
// 初始化地图
var map = L.map('map', {
center: [ 36.36, 102.78 ],
zoom: 5,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
var result = JSON.stringify(response);
var popup = L.popup()
.setLatLng([32.538296076472512, 109.204681529419935])
.setContent('<p>Query good, response: ' + result.substr(0, 400) + '...</p>')
.openOn(map);
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([32.538296076472512, 109.204681529419935])
.setContent('<p>Query error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/china";
options.startindex = 0;
options.reqcount = 10;
// $2$ - 2 is the layer id
options.sql = "SELECT NAME FROM $2$";
L.easyButton( '<i class="fa fa-search fa-lg"></i>', function(){
var query = new L.kqmap.services.SQLQuery(options);
query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
信息查询，是使用指定的空间条件查询指定要素图层中的要素信息。
// 初始化地图
var map = L.map('map', {
center: [ 36.36, 102.78 ],
zoom: 5,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([32.538296076472512, 109.204681529419935])
.setContent('<p>Query good!</p>')
.openOn(map);
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([32.538296076472512, 109.204681529419935])
.setContent('<p>Query error!</p>')
.openOn(map);
}
var latlngs = [[34.849194500411183, 113.3135764880889375], [30.227397652533841, 113.3135764880889375], [30.227397652533841, 105.0957865707509325], [34.849194500411183, 105.0957865707509325]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
map.fitBounds(polygon.getBounds());
var options = {};
var geometry = {type: "Polygon", coordinates: [[[113.3135764880889375, 34.849194500411183], [113.3135764880889375, 30.227397652533841], [105.0957865707509325, 30.227397652533841], [105.0957865707509325, 34.849194500411183], [113.3135764880889375, 34.849194500411183]]]};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/china";
options.layerId = 2;
options.geometry = geometry;
options.fields = "OID, CODE, NAME, KANQDB_LENGTH, KANQDB_AREA";
L.easyButton( '<i class="fa fa-search fa-lg"></i>', function(){
var query = new L.kqmap.services.InfoQuery(options);
query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
图例查询，是查询指定图层中的图例信息。
// 初始化地图
var map = L.map('map', {
center: [ 36.36, 102.78 ],
zoom: 5,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([32.538296076472512, 109.204681529419935])
.setContent('<p>Query good, response: ' + JSON.stringify(response).substr(0, 400) + '...</p>')
.openOn(map);
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([32.538296076472512, 109.204681529419935])
.setContent('<p>Query error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/china";
options.layerId = 2;
options.bbox = '';
L.easyButton( '<i class="fa fa-search fa-lg"></i>', function(){
var query = new L.kqmap.services.LegendQuery(options);
query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
缓冲分析（buffer）是根据指定的距离在点、线和多边形实体周围自动建立一定宽度的区域范围的分析方法。例如，在环境治理时，常在污染的河流周围划出一定宽度的范围表示受到污染的区域；又如在飞机场，常根据附近居民的健康需要在周围划分出一定范围的区域作为非居住区等。 KQWebMap API for Leaflet 支持的缓冲区分析功能包括：
外缓冲分析主要针对面状数据、点状数据，根据指定的距离在图形实体外围自动建立一定宽度的区域范围的分析方法。
// 初始化地图
var map = L.map('map', {
center: [ 30.56, 114.26 ],
zoom: 12,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Buffer Analysis Outer good!</p>')
.openOn(map);
alert("query good, respond=> " + JSON.stringify(response));
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Buffer Analysis Outer error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/hsq"
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';
options.sideType = 'outer';
options.radius = 1000.0;
options.version = '2.0';
L.easyButton( '<i class="fa fa-search fa-lg"></i>', function() {
var query = new L.kqmap.services.BufferAnalysis(options);
query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
内缓冲分析主要针对面状数据，根据指定的距离在图形实体内部自动建立一定宽度的区域范围的分析方法。
// 初始化地图
var map = L.map('map', {
center: [ 30.56, 114.26 ],
zoom: 12,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Buffer Analysis Inner good!</p>')
.openOn(map);
alert("query good, respond=> " + JSON.stringify(response));
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Buffer Analysis Inner error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/hsq"
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';
options.sideType = 'inner';
options.radius = 1000.0;
options.version = '2.0';
L.easyButton( '<i class="fa fa-search fa-lg"></i>', function() {
var query = new L.kqmap.services.BufferAnalysis(options);
query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
双缓冲分析主要针对面状数据，根据指定的距离在图形实体内部和外围自动建立一定宽度的区域范围的分析方法。
// 初始化地图
var map = L.map('map', {
center: [ 30.56, 114.26 ],
zoom: 12,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Buffer Analysis Outer good!</p>')
.openOn(map);
alert("query good, respond=> " + JSON.stringify(response));
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Buffer Analysis Outer error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/hsq"
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';
options.sideType = 'outer';
options.radius = 1000.0;
options.version = '2.0';
L.easyButton( '<i class="fa fa-search fa-lg"></i>', function() {
var query = new L.kqmap.services.BufferAnalysis(options);
query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
地物编辑，包括对点、线、区等几何图形进行编辑设置，如线型、颜色、线宽等。如果没有自定义设置几何图形的样式，交互控件也会用默认样式进行绘制。
要素操作（feature）是将点数据、线数据和面数据进行要素集入库，要素更新和要素删除的操作。 KQWebMap API for Leaflet 支持的要素操作功能包括：
要素入库功能是将给定的要素导入到指定的图层中。
// 初始化地图
var map = L.map('map', {
center: [30.52, 114.40],
zoom: 11,
crs: new L.Proj.CRS("EPSG:3857",
{
origin: [-2.0037508342789244E7, 2.0037508342789244E7],
resolutions: res,
bounds: L.bounds([-2.0037508342789244E7, -2.0037508342789244E7], [2.0037508342789244E7, 2.0037508342789244E7])
})
});
// 添加wms图层
L.kqmap.mapping.singleKanqLayer(url,
{
layers: 1,
style: "default",
format: "image/png",
transparent: true,
}
).addTo(map);
// 要素操作的标识属性
var OID = -1;
// 要素入库操作
L.easyButton( '<i class="fa fa-arrow-circle-o-down fa-lg"></i>', function(){
var good_func = function(response) {
console.log('response: ', JSON.stringify(response));
console.log(response.data.result[0].OID);
OID = response.data.result[0].OID;
var popup = L.popup()
.setLatLng([30.59713378, 114.25027079])
.setContent('<p>Feature import ok!</p>')
.openOn(map);
}
var error_func = function(error) {
var popup = L.popup()
.setLatLng([30.59713378, 114.25027079])
.setContent('<p>Feature import failed!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/hsq";
options.layerId = 4;
options.forceImport = false;
options.data = "{'type':'Feature','ID':'Feature1','geometry':{'type':'Polygon','coordinates':[[[114.21799845,30.57467158],[114.21799845,30.59713378],[114.25027079,30.59713378],[114.25027079,30.57467158],[114.21799845,30.57467158]]]},'properties':{'GEOMETRY':'','XZBM':'','FHDM':'','QSRQ':'','ZZRQ':'','BSM':'','YSDM':'','XZQDM':'','XZQMC':'','KZMJ':'','JSMJ':'','MSSM':'','BGRQ':'','KANQDB_LENGTH':'','KANQDB_AREA':''}}";
options.geoSRS = 'EPSG:4326';
options.outSRS = 'EPSG:4326';
options.version = '2.0';
var query = new L.kqmap.services.FeatureImport(options);
query.queryAsync( good_func, error_func );
}).addTo(map);
运行效果
要素更新功能是将给定的要素更新到指定的图层中。
// 初始化地图
var map = L.map('map', {
center: [30.52, 114.40],
zoom: 11,
crs: new L.Proj.CRS("EPSG:3857",
{
origin: [-2.0037508342789244E7, 2.0037508342789244E7],
resolutions: res,
bounds: L.bounds([-2.0037508342789244E7, -2.0037508342789244E7], [2.0037508342789244E7, 2.0037508342789244E7])
})
});
// 添加wms图层
L.kqmap.mapping.singleKanqLayer(url,
{
layers: 1,
style: "default",
format: "image/png",
transparent: true,
}
).addTo(map);
// 要素操作的标识属性
var OID = -1;
// 要素更新操作
L.easyButton( '<i class="fa fa-refresh fa-lg"></i>', function(){
var good_func = function(response) {
console.log('response: ', JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.59713378, 114.25027079])
.setContent('<p>Feature update ok!</p>')
.openOn(map);
}
var error_func = function(error) {
var popup = L.popup()
.setLatLng([30.59713378, 114.25027079])
.setContent('<p>Feature update failed!</p>')
.openOn(map);
}
if (OID == -1) {
alert("Feature not exist!! please import one first!!!");
return;
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/hsq";
options.layerId = 4;
options.forceImport = false;
options.data = "{" + "'where': 'OID = " + OID + "', " + "'type':'Feature','ID':'Feature1','geometry':{'type':'Polygon','coordinates':[[[114.2417799,30.58669537],[114.24167549,30.58608943],[114.24150259,30.58549521],[114.24126287,30.58491843],[114.24095862,30.58436466],[114.2405928,30.58383922],[114.24016891,30.58334718],[114.23969104,30.58289328],[114.23916379,30.58248188],[114.23859224,30.58211696],[114.23798189,30.58180201],[114.23733863,30.58154009],[114.23666864,30.58133371],[114.23597838,30.58118486],[114.2352745,30.58109497],[114.23456378,30.58106491],[114.23385305,30.58109497],[114.23314917,30.58118486],[114.23245891,30.58133371],[114.23178892,30.58154009],[114.23114566,30.58180201],[114.23053531,30.58211696],[114.22996376,30.58248188],[114.22943651,30.58289328],[114.22895864,30.58334718],[114.22853475,30.58383922],[114.22816893,30.58436466],[114.22786469,30.58491843],[114.22762496,30.58549521],[114.22745206,30.58608943],[114.22734765,30.58669537],[114.22731273,30.58730721],[114.22734765,30.58791904],[114.22745206,30.58852497],[114.22762496,30.58911917],[114.22786469,30.58969592],[114.22816893,30.59024967],[114.22853475,30.59077507],[114.22895864,30.59126707],[114.22943651,30.59172093],[114.22996376,30.59213229],[114.23053531,30.59249718],[114.23114566,30.59281209],[114.23178892,30.59307398],[114.23245891,30.59328034],[114.23314917,30.59342917],[114.23385305,30.59351905],[114.23456378,30.5935491],[114.2352745,30.59351905],[114.23597838,30.59342917],[114.23666864,30.59328034],[114.23733863,30.59307398],[114.23798189,30.59281209],[114.23859224,30.59249718],[114.23916379,30.59213229],[114.23969104,30.59172093],[114.24016891,30.59126707],[114.2405928,30.59077507],[114.24095862,30.59024967],[114.24126287,30.58969592],[114.24150259,30.58911917],[114.24167549,30.58852497],[114.2417799,30.58791904],[114.2417799,30.58669537]]]},'properties':{'GEOMETRY':'','XZBM':'','FHDM':'','QSRQ':'','ZZRQ':'','BSM':'','YSDM':'','XZQDM':'','XZQMC':'','KZMJ':'','JSMJ':'','MSSM':'','BGRQ':'','KANQDB_LENGTH':'','KANQDB_AREA':''}}";
options.geoSRS = 'EPSG:4326';
options.outSRS = 'EPSG:4326';
options.version = '2.0';
console.log('options: ' + JSON.stringify(options));
var query = new L.kqmap.services.FeatureUpdate(options);
query.queryAsync( good_func, error_func );
}).addTo(map);
运行效果
要素删除功能是将给定的要素从图层中删除。
// 初始化地图
var map = L.map('map', {
center: [30.52, 114.40],
zoom: 11,
crs: new L.Proj.CRS("EPSG:3857",
{
origin: [-2.0037508342789244E7, 2.0037508342789244E7],
resolutions: res,
bounds: L.bounds([-2.0037508342789244E7, -2.0037508342789244E7], [2.0037508342789244E7, 2.0037508342789244E7])
})
});
// 添加wms图层
L.kqmap.mapping.singleKanqLayer(url,
{
layers: 1,
style: "default",
format: "image/png",
transparent: true,
}
).addTo(map);
// 要素操作的标识属性
var OID = -1;
// 要素删除操作
L.easyButton( '<i class="fa fa-trash-o fa-lg"></i>', function(){
var good_func = function(response) {
console.log('response: ', JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.59713378, 114.25027079])
.setContent('<p>Feature delete ok!</p>')
.openOn(map);
OID = -1;
}
var error_func = function(error) {
var popup = L.popup()
.setLatLng([30.59713378, 114.25027079])
.setContent('<p>Feature delete failed!</p>')
.openOn(map);
}
if (OID == -1) {
alert("Feature not exist!! please import one first!!!");
return;
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/hsq";
options.layerId = 4;
options.where = "OID = " + OID;
options.geoSRS = 'EPSG:4326';
options.outSRS = 'EPSG:4326';
options.version = '2.0';
var query = new L.kqmap.services.FeatureDelete(options);
query.queryAsync( good_func, error_func );
}).addTo(map);
运行效果
叠置分析是 GIS 中的一项非常重要的空间分析功能，是指在统一空间参考系统下，通过对两个数据集进行的一系列集合运算， 产生新数据集的过程，其目的是通过对空间数据的加工或分析，提取用户需要的新的空间几何信息。 同时，通过叠置分析，还将对数据的各种属性信息进行处理。
目前叠置分析广泛应用于资源管理、城市建设评估、国土管理、农林牧业、统计等领域。叠置分析在各领域中的作用：
KQWebMap API for Leaflet 支持的叠置分析功能主要包括：
重叠分析，是获得符合指定条件的要素与给定的分析图形的交集作为要素的新图形。
// 初始化地图
var map = L.map('map', {
center: [ 36.36, 102.78 ],
zoom: 5,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([32.538296076472512, 109.204681529419935])
.setContent('<p>Query good, response: ' + JSON.stringify(response).substr(0, 400) + '...' + '</p>')
.openOn(map);
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([32.538296076472512, 109.204681529419935])
.setContent('<p>Query error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/china";
options.srcData = "{'type': 'Feature', 'properties':{}, 'geometry':{'type':'Polygon', 'coordinates':[[[100.0, 30.0], [102.0, 30.0], [102.0, 32.0], [100.0, 30.0], [100.0, 30.0]]]}";
options.destData = "{'type': 'Feature', 'properties':{}, 'geometry':{'type':'Polygon', 'coordinates':[[[101.0, 31.0], [103.0, 31.0], [103.0, 33.0], [101.0, 31.0], [101.0, 31.0]]]}";
options.geoSRS = 'EPSG:4326';
options.outSRS = 'EPSG:4326';
var query = new L.kqmap.services.OverlapAnalysis(options);
L.easyButton( '<i class="fa fa-search fa-lg"></i>', function(){
query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
差异分析，是获得符合指定条件的要素与给定的分析图形的差集。
// 初始化地图
var map = L.map('map', {
center: [ 36.36, 102.78 ],
zoom: 5,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([32.538296076472512, 109.204681529419935])
.setContent('<p>Query good, response: ' + JSON.stringify(response).substr(0, 400) + '...' + '</p>')
.openOn(map);
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([32.538296076472512, 109.204681529419935])
.setContent('<p>Query error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/china";
options.srcData = "{'type': 'FeatureCollection', 'features': [{'type': 'Feature', 'geometry':{'type':'Polygon', 'coordinates':[[100.0, 30.0], [102.0, 30.0], [102.0, 32.0], [100.0, 30.0}]}";
options.destData = "{'type': 'FeatureCollection', 'features': [{'type': 'Feature', 'geometry':{'type':'Polygon', 'coordinates':[[101.0, 31.0], [103.0, 31.0], [103.0, 33.0], [101.0, 31.0}]}";
options.geoSRS = 'EPSG:4326';
options.outSRS = 'EPSG:4326';
options.layerId = 2;
L.easyButton( '<i class="fa fa-search fa-lg"></i>', function(){
var query = new L.kqmap.services.DifferenceAnalysis(options);
query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
栅格分析是对地理特征和现象进行空间分析，即对一个或多个栅格数据进行数学运算和函数运算。 同时，运算得出的结果栅格数据的像元值是由一个或多个输入栅格数据的同一位置的像元值通过代数运算得到的。
KQWebMap API for Leaflet 支持的栅格分析功能主要包括：
函数运算，是运用函数运算的方法对栅格数据进行空间分析。
// 初始化地图
var map = L.map('map', {
center: [ 30.56, 114.26 ],
zoom: 12,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Raster Analysis Function good!</p>')
.openOn(map);
alert("query good, respond=> " + JSON.stringify(response));
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Raster Analysis Function error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/shange";
options.layerId1 = 1; // 用于栅格影像分析的第一个图层的ID
options.layerId2 = ''; // 用于栅格影像分析的第二个图层的ID
options.type = 1;
options.condition = '';
options.querytype = KQCommon.CommonValues.rasterAnalysisTypes.function, // 查询类型
L.easyButton( '<i class="fa fa-search fa-lg"></i>', async function() {
var query = new L.kqmap.services.RasterAnalysis(options);
await query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
代数运算，是运用代数运算的方法对栅格数据进行空间分析。
// 初始化地图
var map = L.map('map', {
center: [ 30.56, 114.26 ],
zoom: 12,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Raster Analysis Algebra good!</p>')
.openOn(map);
alert("query good, respond=> " + JSON.stringify(response));
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Raster Analysis Algebra error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/shange";
options.layerId1 = 1; // 用于栅格影像分析的第一个图层的ID
options.layerId2 = 2; // 用于栅格影像分析的第二个图层的ID
options.type = 1;
options.condition = '';
options.querytype = KQCommon.CommonValues.rasterAnalysisTypes.algebra, // 查询类型
L.easyButton( '<i class="fa fa-search fa-lg"></i>', async function() {
var query = new L.kqmap.services.RasterAnalysis(options);
await query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
逻辑运算，是运用逻辑运算的方法对栅格数据进行空间分析。
// 初始化地图
var map = L.map('map', {
center: [ 30.56, 114.26 ],
zoom: 12,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Raster Analysis Logic good!</p>')
.openOn(map);
alert("query good, respond=> " + JSON.stringify(response));
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Raster Analysis Logic error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/shange";
options.layerId1 = 1; // 用于栅格影像分析的第一个图层的ID
options.layerId2 = 2; // 用于栅格影像分析的第二个图层的ID
options.type = 5;
options.condition = '';
options.querytype = KQCommon.CommonValues.rasterAnalysisTypes.logic, // 查询类型
L.easyButton( '<i class="fa fa-search fa-lg"></i>', async function() {
var query = new L.kqmap.services.RasterAnalysis(options);
await query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
条件运算，是运用条件运算的方法对栅格数据进行空间分析。
// 初始化地图
var map = L.map('map', {
center: [ 30.56, 114.26 ],
zoom: 12,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Raster Analysis Condition Select good!</p>')
.openOn(map);
alert("query good, respond=> " + JSON.stringify(response));
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Raster Analysis Condition Select error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/shange";
options.layerId1 = 1; // 用于栅格影像分析的第一个图层的ID
options.layerId2 = ''; // 用于栅格影像分析的第二个图层的ID
options.type = 0;
options.condition = 'Value>1000';
options.querytype = KQCommon.CommonValues.rasterAnalysisTypes.condition_select, // 查询类型
L.easyButton( '<i class="fa fa-search fa-lg"></i>', async function() {
var query = new L.kqmap.services.RasterAnalysis(options);
await query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
网络分析是指依据网络拓扑关系，通过考察网络元素的空间及属性数据， 以数学理论模型为基础，对网络的性能特征进行多方面研究的一种分析计算。
KQWebMap API for Leaflet 支持的网络分析功能主要包括：
最优路径分析，给定起点和终点坐标，也可指定途经点或必须避开的障碍点坐标，自动规划出一条最优线路。
// 初始化地图
var map = L.map('map', {
center: [ 30.56, 114.26 ],
zoom: 12,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Network Analysis Route good!</p>')
.openOn(map);
alert("query good, respond=> " + JSON.stringify(response));
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Network Analysis Route error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/daolu";
options.layerId = 1; // 用于网络分析的图层的ID
options.origin = '106.7223290454022,26.653965610849'; // 起始点坐标
options.destination = '106.72410969549384,26.61540571192948'; // 目标点坐标
options.middlepoint = null; // 中间点，仅“旅行商”模式下有效，点数组[[106.68318799,26.62353767],[106.72501407,26.57076272]]或106.68318799,26.62353767,106.72501407,26.57076272
options.barrierpoints = null; // 避让点，点数组[[106.68318799,26.62353767],[106.72501407,26.57076272]]或106.68318799,26.62353767,106.72501407,26.57076272
options.avoidareas = null; // 或Geometry对象（类型为GeometryCollection或Polygon）
options.mode = 0; // 追溯模式 0:向上追溯 1：向下追溯||其他的参考具体的设置
options.geoSRS = 'EPSG:4326'; // 起始终止点坐标的空间参考
options.outSRS = 'EPSG:4326'; // 返回结果坐标的空间参考
options.querytype = KQCommon.CommonValues.networkAnalysisTypes.optimal_path, // 查询类型 0: 最优路径, 1: 追溯, 2: 旅行商
L.easyButton( '<i class="fa fa-search fa-lg"></i>', async function() {
var query = new L.kqmap.services.NetworkAnalysis(options);
await query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
旅行商分析是指在网络数据集中，给定M个配送中心点和N个配送目的地（M，N为大于零的整数），查找经济有效的配送路径，并给出相应的行走路线。 旅行商分析功能就是解决如何合理分配配送次序和送货路线，使配送总花费达到最小或每个配送中心的花费达到最小。
// 初始化地图
var map = L.map('map', {
center: [ 30.56, 114.26 ],
zoom: 12,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Network Analysis TSP good!</p>')
.openOn(map);
alert("query good, respond=> " + JSON.stringify(response));
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Network Analysis TSP error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/daolu";
options.layerId = 1; // 用于网络分析的图层的ID
options.origin = '106.71725891327593,26.653919938981197'; // 起始点坐标
options.destination = '106.72310613007267,26.614485463908984'; // 目标点坐标
options.middlepoint = '106.73369782162776,26.63462752347093'; // 中间点，仅“旅行商”模式下有效，点数组[[106.68318799,26.62353767],[106.72501407,26.57076272]]或106.68318799,26.62353767,106.72501407,26.57076272
options.barrierpoints = null; // 避让点，点数组[[106.68318799,26.62353767],[106.72501407,26.57076272]]或106.68318799,26.62353767,106.72501407,26.57076272
options.avoidareas = null; // 或Geometry对象（类型为GeometryCollection或Polygon）
options.mode = 0; // 追溯模式 0:向上追溯 1：向下追溯||其他的参考具体的设置
options.geoSRS = 'EPSG:4326'; // 起始终止点坐标的空间参考
options.outSRS = 'EPSG:4326'; // 返回结果坐标的空间参考
options.querytype = KQCommon.CommonValues.networkAnalysisTypes.traveling_salesman_problem, // 查询类型 0: 最优路径, 1: 追溯, 2: 旅行商
L.easyButton( '<i class="fa fa-search fa-lg"></i>', function() {
var query = new L.kqmap.services.NetworkAnalysis(options);
query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果
追溯分析是指向上追溯给定起点的上游线路或向下追溯给定起点的下游线路。
// 初始化地图
var map = L.map('map', {
center: [ 30.56, 114.26 ],
zoom: 12,
});
// 添加谷歌矢量图层
L.kqmap.mapping.googleTileLayer({
layerType: "vec",
}).addTo(map);
var good_func = function(response) {
console.log("query good, respond=> " + JSON.stringify(response));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Network Analysis Traceback good!</p>')
.openOn(map);
alert("query good, respond=> " + JSON.stringify(response));
}
var error_func = function(error) {
console.log("query error, error=> " + JSON.stringify(error));
var popup = L.popup()
.setLatLng([30.56, 114.26])
.setContent('<p>Network Analysis Traceback error!</p>')
.openOn(map);
}
var options = {};
options.url = "http://172.16.0.6:8699/KQGis/rest/services/heliu";
options.layerId = 1; // 用于网络分析的图层的ID
options.origin = '112.94159592789683,29.90791146435398'; // 起始点坐标
options.destination = null; // 目标点坐标
options.middlepoint = null; // 中间点，仅“旅行商”模式下有效，点数组[[106.68318799,26.62353767],[106.72501407,26.57076272]]或106.68318799,26.62353767,106.72501407,26.57076272
options.barrierpoints = null; // 避让点，点数组[[106.68318799,26.62353767],[106.72501407,26.57076272]]或106.68318799,26.62353767,106.72501407,26.57076272
options.avoidareas = null; // 或Geometry对象（类型为GeometryCollection或Polygon）
options.mode = 0; // 追溯模式 0:向上追溯 1：向下追溯||其他的参考具体的设置
options.geoSRS = 'EPSG:4326'; // 起始终止点坐标的空间参考
options.outSRS = 'EPSG:4326'; // 返回结果坐标的空间参考
options.querytype = KQCommon.CommonValues.networkAnalysisTypes.trace_back, // 查询类型 0: 最优路径, 1: 追溯, 2: 旅行商
L.easyButton( '<i class="fa fa-search fa-lg"></i>', function() {
var query = new L.kqmap.services.NetworkAnalysis(options);
query.queryAsync(good_func, error_func);
}).addTo(map);
运行效果