KqWebMap
KqWebMap 是采用 Javascript 开发语言开发的 KqGisServer 的客户端。它可以帮助您构建功能丰富的、交互性强的地图。
特性
主题的设置
KqWebMap 可以通过使用侧边栏来设置页面的主题。新的主题可以展现不同的显示效果。
地图画面的截图
KqWebMap 能够截取当前地图的画面，可以保留 UI 或移除 UI 进行截图。
对于实时的点数据的展示与跟踪
KqWebMap 提供了对于实时的点数据的展示与跟踪的功能。它能够将标记点沿折线运动，也能够锁定该点进行跟踪监视。
建筑物的展现
KqWebMap 能够在地图上显示 2.5D 效果的建筑物。将地图放大到一定比例尺可以看到 2.5D 的建筑物图形效果。
作者
概览
包含文件
添加必须的地图DOM元素和脚本。
<body>
<div id="map"></div>
<script src="../../dist/jquery.min.js"></script>
<script src="../../dist/jquery-ui.min.js"></script>
<script src="../../dist/kqlibs.js"></script>
<script src="../../dist/kqwebmap.min.js"></script>
</body>
基础用法
- 获取配置信息。
- 创建mapview对象，设置中心点和层级。
- 初始化mapview对象。
- mapview对象初始化后，输出一些信息。
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
KQ.Local.setLanguage('cn');
var mapView = new KQ.Map.MapView({
center: [ 30.56, 114.30 ],
zoom: 12,
maxZoom: 16,
}, 'google', 'vector');
mapView.initAsync(function () {
console.log('mapview initialized!');
});
});
命名空间
一个完整的函数名： kq.module.class.function
例如: KQ.Map.MapConfig.getInstance()
- KQ是根命名空间。
- Map是模块名。
- MapConfig是类名。
- getInstance是函数名。
主题
基础用法
有两种方式设置主题：
使用config.xml设置初始主题.
<config> <theme name="default-red"></theme> </config>使用侧边栏设置页面的主题。当主题被设置后，需要刷新页面即可看到新主题的效果。
备注：如果删除了浏览器的缓存，主题将在浏览器刷新时返回初始设置。
主题列表
不需要包含任何主题文件，系统将自动载入它们。
- default-blue:
<script src="../../dist/kqcss-default-blue.js"></script> - default-red:
<script src="../../dist/kqcss-default-red.js"></script> - black-black:
<script src="../../dist/kqcss-black-black.js"></script> - blueopal-blue:
<script src="../../dist/kqcss-blueopal-blue.js"></script> - bootstrap-blue:
<script src="../../dist/kqcss-bootstrap-blue.js"></script> - fiori-blue:
<script src="../../dist/kqcss-fiori-blue.js"></script> - flat-black:
<script src="../../dist/kqcss-flat-black.js"></script> - highcontrast-purple:
<script src="../../dist/kqcss-highcontrast-purple.js"></script> - material-blue:
<script src="../../dist/kqcss-material-blue.js"></script> - materialblack-black:
<script src="../../dist/kqcss-materialblack-black.js"></script> - metro-green:
<script src="../../dist/kqcss-metro-green.js"></script> - metroblack-black:
<script src="../../dist/kqcss-metroblack-black.js"></script> - moonlight-black:
<script src="../../dist/kqcss-moonlight-black.js"></script> - nova-red:
<script src="../../dist/kqcss-nova-red.js"></script> - office365-blue:
<script src="../../dist/kqcss-office365-blue.js"></script> - silver-blue:
<script src="../../dist/kqcss-silver-blue.js"></script> - uniform-gray:
<script src="../../dist/kqcss-uniform-gray.js"></script>
预览图
default-blue
default-red
black-black
blueopal-blue
bootstrap-blue
fiori-blue
flat-black
highcontrast-purple
material-blue
materialblack-black
metro-green
metroblack-black
moonlight-black
nova-red
office365-blue
silver-blue
uniform-gray
UI效果
default-blue
default-red
black-black
blueopal-blue
bootstrap-blue
fiori-blue
flat-black
highcontrast-purple
material-blue
materialblack-black
metro-green
metroblack-black
moonlight-black
nova-red
office365-blue
silver-blue
uniform-gray
基础功能
载入效果
当地图文件在载入时显示一个载入消息。该功能用于网速非常非常慢的场合。
设置方法
- 在html文件头部设置需要包含的css文件。
<head> <link href="../../dist/kqmaploading.min.css" rel="stylesheet" type="text/css"> </head> - 在map的div中添加“loading”类。
<div id="map" style="height: 100%;" class="loading"> </div> - 在map的div中添加"Loading..."文本，并且加上“kqmaploadingtxt”类。
<div id="map" style="height: 100%;" class="loading"> <div class="kqmaploadingtxt">Loading...</div> </div>
导入导出
参考: setDrawOption
导出/导入Txt
可以设置draw选项来启用导出/导入txt功能。该设置必须在初始化mapview之前完成
config对象初始化完毕后，设置draw选项：
config.initAsync('', false, function () { config.setDrawOption({ dataFormatList: ['T'], importTxtFunction: function () { console.log('my importTxt!!!'); config._resetDrawImportFileHtml(); }, exportTxtFunction: function () { console.log('my exportTxt!!!'); }, }); });如果正常，导出/导入工具条将会有“txt”模式。
当导出或导入按钮被点击时，将运行设置的函数。
导出/导入Excel
可以设置draw选项来启用导出/导入excel功能。
config对象初始化完毕后，设置draw选项：
config.initAsync('', false, function () { config.setDrawOption({ dataFormatList: ['E'], importExcelFunction: function () { console.log('my importExcel!!!'); config._resetDrawImportFileHtml(); }, exportExcelFunction: function () { console.log('my exportExcel!!!'); }, }); });- 如果正常，导出/导入工具条将会有“excel”模式。
- 当导出或导入按钮被点击时，将运行设置的函数。
导出/导入Dwg,Dxf
可以设置draw选项来启用导出/导入Dwg,Dxf功能。
config对象初始化完毕后，设置draw选项：
config.initAsync('', false, function () { config.setDrawOption({ dataFormatList: ['D'], importExcelFunction: function () { console.log('my importDwgDxf!!!'); config._resetDrawImportFileHtml(); }, exportExcelFunction: function () { console.log('my exportDwgDxf!!!'); }, }); });- 如果正常，导出/导入工具条将会有“dwg,dxf”模式。
- 当导出或导入按钮被点击时，将运行设置的函数。
导入后处理
可以设置draw选项来设置导入后处理函数。
config对象初始化完毕后，设置draw选项：
config.initAsync('', false, function () { config.setDrawOption({ onImportedFunction: function (geojson) { console.log('onImported!'); geojson.eachLayer(function (layer) { layer.bindPopup('Hello', { autoClose: false, closeOnClick: false, }); layer.openPopup(); }); }, }); });- 如果正常，当GeoJSON和Shape导入完成后将执行该函数。
使用截图
能够截取当前地图的画面，可以保留UI或移除UI进行截图。 截图支持KqMapping，WMTS，Marker，GeoJSON等。
加入截图控件
在配置文件中启用截图功能
<control position="topright" type="screenshot"/>
功能说明
点击截图按钮可以截图。 点击显示按钮可以控制是否在截图时显示UI，一共有两种模式：保留UI或移除UI。
效果图
使用API
可以通过API进行地图截图。 截图对象的函数原型：doRectScreenShot(x, y, w, h)，该函数可以截取当前地图上左上角为(x, y)，宽w，高h的矩形范围。
参考以下代码：
var screenshot = KQ.Control.Manager.getInstance().getControl('screenshot');
screenshot.doRectScreenShot(100, 100, 400, 400);
效果图：
自定义图标
给Web控件添加图标
添加图标
使用 font awesome
Font Awesome是一个矢量图标库，它可以深度定制图标尺寸，颜色，阴影等效果。
PS: 常规的方式也不排斥。例如也可以通过定制css和图片来添加图标。
例子
基础图标
可以通过指定一个CSS前缀“fa”和图标的名字来放置一个Font Awesome图标。
<i class="fa fa-camera-retro"></i> fa-camera-retro
大号图标
使用“fa-lg (增大33%), fa-2x, fa-3x, fa-4x, fa-5x”这些类来增大图标尺寸。
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
自定义框选
回调函数
可以设置框选按钮的回调函数。该设置必须在初始化mapview之前完成
在config.xml配置文件中添加框选按钮控件：<subcontrol type="rubber-band"/>
config对象初始化完毕后，设置rubberBand选项：
config.initAsync('', false, function () { // 设置框选按钮的回调函数 config.setRubberBandOption({rubberBandFunction: function (bounds) { // bounds 105.00828568080212,29.978604497692796,105.58946814211257,30.361803043687907 console.log('bounds ' + bounds.toBBoxString()); }}); });
查询
从服务器中查询图层的属性。
参考： InfoQuery
属性查询
在框选的范围内查询指定图层的属性。
var queryInfo = KQ.Query.InfoQuery.getInstance();
console.log(queryInfo);
try {
var options = {
url: 'http://172.16.1.157:8699/KQGis/rest/services/zy',
layerId: 145,
pageSize: '200',
geometry: '{"type":"Polygon","coordinates":[[[104.94105475249448,29.97276304931208],
[104.94105475249448,30.028839993667194],
[105.00551176529433,30.028839993667194],
[105.00551176529433,29.97276304931208],
[104.94105475249448,29.97276304931208]]]}',
fields: 'OBJECTID,XZBM,BSM,YSDM,JXLX,JXXZ,JXSM,BGRQ',
f: 'json',
where: '',
};
queryInfo.queryAsync(options,
function query_good () {
console.log('query_good');
var data = queryInfo.data();
console.log('data.length:' + data.length);
data.forEach(function (d) {
console.log(d.properties);
})
},
function query_error () {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
结果：
SQL 查询
从服务器中进行SQL查询。
参考： SqlQuery
var sql_query = KQ.Query.SqlQuery.getInstance();
console.log(sql_query);
try {
var options = {
url: 'http://172.16.1.157:8699/KQGis/rest/services/zy',
sql: "select distinct " + "XZBM" + " from " + "$$" + 145 + "$$",
};
sql_query.queryAsync(options,
function query_good () {
console.log('query_good');
var data = sql_query.data();
console.log('sql query data.length:' + data.length);
data.forEach(function (d) {
console.log(d.properties);
})
},
function query_error () {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
结果：
叠置分析
从服务器中进行叠置分析。
参考： OverlayAnalysis
var overlay_analysis = KQ.Query.OverlayAnalysis.getInstance();
console.log(overlay_analysis);
try {
var options = {
url: 'http://172.16.1.157:8699/KQGis/rest/services/zy',
layerId: 145,
pageSize: '200',
geometry: '{"type":"Polygon","coordinates":[[[104.94105475249448,29.97276304931208],[104.94105475249448,30.028839993667194],[105.00551176529433,30.028839993667194],[105.00551176529433,29.97276304931208],[104.94105475249448,29.97276304931208]]]}',
fields: 'OBJECTID,XZBM,BSM,YSDM,JXLX,JXXZ,JXSM,BGRQ',
f: 'json',
where: '',
};
overlay_analysis.queryAsync(options,
function query_good () {
console.log('query_good');
var data = overlay_analysis.data();
console.log('overlay analysis data.length:' + data.length);
data.forEach(function (d) {
console.log(d.properties);
})
},
function query_error () {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
结果：
图例查询
从服务器中进行图例信息的查询。
参考： LegendQuery
var legend_query = KQ.Query.LegendQuery.getInstance();
console.log(legend_query);
try {
var options = {
url: 'http://172.16.1.157:8699/KQGis/rest/services/zy',
layerId: 137,
};
legend_query.queryAsync(options,
function query_good () {
console.log('query_good');
var data = legend_query.data();
console.log('legend query data.length:' + data.length);
data.forEach(function (d) {
console.log(d.properties);
})
},
function query_error () {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
结果：
缓冲分析
从服务器中对给定的图形进行缓冲分析。
参考： BufferAnalysis
var buffer_analysis = KQ.Query.BufferAnalysis.getInstance();
console.log(buffer_analysis);
try {
var options = {
url: 'http://172.16.0.106:8699/KQGis/rest/services',
data: '{"type":"Polygon","coordinates":[[[104.94105475249448,29.97276304931208],[104.94105475249448,30.028839993667194],[105.00551176529433,30.028839993667194],[105.00551176529433,29.97276304931208],[104.94105475249448,29.97276304931208]]]}',
geoSRS: 'EPSG:4326',
outSRS: 'EPSG:4326',
sideType: 'outer',
radius: 10000.0,
};
buffer_analysis.queryAsync(options,
function query_good () {
console.log('query_good');
var data = buffer_analysis.data();
console.log('buffer analysis data.length:' + data.length);
data.forEach(function (d) {
console.log(d);
})
},
function query_error () {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
结果：
要素入库
从服务器中将给定的要素集导入到指定的图层中。
参考： FeatureImport
var feature_import = KQ.Query.FeatureImport.getInstance();
console.log(feature_import);
try {
var json_data = {
"type": "Feature",
"ID": "Feature1",
"geometry": {
"type": "Polygon",
"coordinates": [[[105.357937, 30.100403], [105.357937, 30.103263], [105.36324, 30.103263], [105.36324, 30.100403], [105.357937, 30.100403]]]
},
"properties": {
"BSM": 2075,
"BZ": " ",
"DJH": "5120210010110323000",
"DWXZ": "2",
"DZ": " ",
"FHDM": " ",
"FZMJ": 0.0,
"HYDM": " ",
"ISZY": " ",
"JDLH": " ",
"JZMD": 0.47000000000000005,
"JZMJ": 4343.61,
"JZRJL": 3.2600000000000004,
"JZWLX": " ",
"JZWZDMJ": 622.12,
"NZ": " ",
"OBJECTID": 200,
"QDJG": 0.0,
"QLR": "卫生局杨文礼等",
"QSDWDM": "512021001011",
"QSXZ": "20",
"QSXZMC": "国有土地使用权",
"SBDJ": 0.0,
"SCMJ": 0.0,
"SFFZ": 0,
"SM": " ",
"SYQLX": "2",
"SYQX": " ",
"SZTF": " ",
"TDJB": " ",
"TDYT": "071",
"TDZH": " ",
"TDZL": "学沟湾路242",
"TXDZ": " ",
"TXQL": " ",
"XDLH": "071",
"XZ": " ",
"YBDJH": "21-1-11-323",
"YSDJH": " ",
"YSDM": "16110000",
"YTDZH": " ",
"ZDID": 2075,
"ZDMJ": 1331.1860000000002,
"ZDTZM": " ",
"ZGBM": " ",
"ZLDWDM": "512021001000",
"ZZRQ": "2010/12/29"
}
};
var options = {
url: 'http://172.16.0.106:8699/KQGis/rest/services/zy',
layerId: 77,
forceImport: true,
data: JSON.stringify(json_data),
geoSRS: 'EPSG:4326',
};
feature_import.queryAsync(options,
function query_good() {
console.log('query_good');
var data = feature_import.data();
console.log('feature import data.length:' + data.length);
data.forEach(function (d) {
console.log(d.ID);
})
},
function query_error() {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
结果：
要素更新
从服务器中将给定的要素更新到指定的图层中。
参考： FeatureUpdate
var feature_update = KQ.Query.FeatureUpdate.getInstance();
console.log(feature_update);
try {
var json_data = {
"type": "Feature",
"ID": "Feature1",
"where": "objectid=21094",
"geometry": {
"type": "Polygon",
"coordinates": [[[105.357365, 30.09963], [105.357365, 30.100066], [105.363172, 30.100066], [105.363172, 30.09963], [105.357365, 30.09963]]]
},
"properties": {
"BSM": 2075,
"BZ": " ",
"DJH": "5120210010110323000",
"DWXZ": "2",
"DZ": " ",
"FHDM": " ",
"FZMJ": 0.0,
"HYDM": " ",
"ISZY": " ",
"JDLH": " ",
"JZMD": 0.47000000000000005,
"JZMJ": 4343.61,
"JZRJL": 3.2600000000000004,
"JZWLX": " ",
"JZWZDMJ": 622.12,
"NZ": " ",
"OBJECTID": 200,
"QDJG": 0.0,
"QLR": "卫生局杨文礼等",
"QSDWDM": "512021001011",
"QSXZ": "20",
"QSXZMC": "国有土地使用权",
"SBDJ": 0.0,
"SCMJ": 0.0,
"SFFZ": 0,
"SM": " ",
"SYQLX": "2",
"SYQX": " ",
"SZTF": " ",
"TDJB": " ",
"TDYT": "071",
"TDZH": " ",
"TDZL": "学沟湾路242",
"TXDZ": " ",
"TXQL": " ",
"XDLH": "071",
"XZ": " ",
"YBDJH": "21-1-11-323",
"YSDJH": " ",
"YSDM": "16110000",
"YTDZH": " ",
"ZDID": 2075,
"ZDMJ": 1331.1860000000002,
"ZDTZM": " ",
"ZGBM": " ",
"ZLDWDM": "512021001000",
"ZZRQ": "2010/12/29"
}
};
var options = {
url: 'http://172.16.0.106:8699/KQGis/rest/services/zy',
layerId: 77,
forceImport: true,
data: JSON.stringify(json_data),
geoSRS: 'EPSG:4326',
};
feature_update.queryAsync(options,
function query_good() {
console.log('query_good');
var data = feature_update.data();
console.log('feature update data.length:' + data.length);
data.forEach(function (d) {
console.log(d.ID);
})
},
function query_error() {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
结果：
要素删除
从服务器中删除指定的要素。
参考： FeatureDelete
var feature_delete = KQ.Query.FeatureDelete.getInstance();
console.log(feature_delete);
try {
var options = {
url: 'http://172.16.0.106:8699/KQGis/rest/services/zy',
layerId: 77,
where: 'objectid=21337',
};
feature_delete.queryAsync(options,
function query_good() {
console.log('query_good');
var data = feature_delete.data();
console.log('feature delete data.length:' + data.length);
data.forEach(function (d) {
console.log("Feature query count: " + d.querycount);
console.log("Feature delete count: " + d.deletecount);
})
},
function query_error() {
console.log('query_error');
});
}
catch (e) {
console.log('catch error:' + e);
}
结果：
投影转换
一个投影转换类，将一个坐标点由一种投影转换到另一种投影
正向转换
正向转换，将坐标点由源投影转换到目标投影
var sourProjection = 'PROJCS["NAD83 / Massachusetts Mainland",GEOGCS["NAD83",DATUM["North_American_Datum_1983"' +
',SPHEROID["GRS 1980",6378137,298.257222101,AUTHORITY["EPSG","7019"]],AUTHORITY["EPSG","6269"]]' +
',PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.01745329251994328,AUTHORITY["EPSG","9122"]]' +
',AUTHORITY["EPSG","4269"]],UNIT["metre",1,AUTHORITY["EPSG","9001"]],PROJECTION["Lambert_Conformal_Conic_2SP"]' +
',PARAMETER["standard_parallel_1",42.68333333333333],PARAMETER["standard_parallel_2",41.71666666666667],PARAMETER["latitude_of_origin",41]' +
',PARAMETER["central_meridian",-71.5],PARAMETER["false_easting",200000],PARAMETER["false_northing",750000],AUTHORITY["EPSG","26986"]' +
',AXIS["X",EAST],AXIS["Y",NORTH]]';
var destProjection = "+proj=gnom +lat_0=90 +lon_0=0 +x_0=6300000 +y_0=6300000 +ellps=WGS84 +datum=WGS84 +units=m +no_defs";
var transform = new KQ.Projection.ProjectionTransform(sourProjection, destProjection);
// -2690666.297734447, 3662659.88545992
transform.transformForward([2,5]);
反向转换
反向转换，将坐标点由目标投影转换到源投影
var sourProjection = 'PROJCS["NAD83 / Massachusetts Mainland",GEOGCS["NAD83",DATUM["North_American_Datum_1983"' +
',SPHEROID["GRS 1980",6378137,298.257222101,AUTHORITY["EPSG","7019"]],AUTHORITY["EPSG","6269"]]' +
',PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.01745329251994328,AUTHORITY["EPSG","9122"]]' +
',AUTHORITY["EPSG","4269"]],UNIT["metre",1,AUTHORITY["EPSG","9001"]],PROJECTION["Lambert_Conformal_Conic_2SP"]' +
',PARAMETER["standard_parallel_1",42.68333333333333],PARAMETER["standard_parallel_2",41.71666666666667],PARAMETER["latitude_of_origin",41]' +
',PARAMETER["central_meridian",-71.5],PARAMETER["false_easting",200000],PARAMETER["false_northing",750000],AUTHORITY["EPSG","26986"]' +
',AXIS["X",EAST],AXIS["Y",NORTH]]';
var destProjection = "+proj=gnom +lat_0=90 +lon_0=0 +x_0=6300000 +y_0=6300000 +ellps=WGS84 +datum=WGS84 +units=m +no_defs";
var transform = new KQ.Projection.ProjectionTransform(sourProjection, destProjection);
// 1.9999999992433004, 4.999999960884452
transform.transfromInverse([-2690666.297734447, 3662659.88545992]);
预定义投影
投影转换类中预定义了一些投影
// 1 'EPSG:4326', 是下面投影的别名
// 'WGS84'
// 2 'EPSG:4269'
// 3 'EPSG:3857', 是下面投影的别名
// 'EPSG:3785'
// 'GOOGLE'
// 'EPSG:900913'
// 'EPSG:102113'
var transform = new KQ.Projection.ProjectionTransform('EPSG:4326', 'EPSG:3857');
// 12724930.992579103, 3570567.652113043
transform.transformForward([114.31, 30.52]);
高级功能
权限控制
通过权限来控制功能的可用性。
基础用法
在config.xml配置文件中设置控件权限。 如果用户没有权限，该控件将不会被显示。
使用“controlTree”必须拥有权限“3”
使用“controlAdvancedQuery”必须拥有权限“3”
使用“controlOverlayAnalysis”没有权限限制
使用“controlSetting”必须拥有权限“1”
使用“input”必须拥有权限“3”<control position="topleft" type="sidebar"> <subcontrol type="tree" id="controlTree" permission="3"/> <subcontrol type="advanced" id="controlAdvancedQuery" permission="3"/> <subcontrol type="overlay" id="controlOverlayAnalysis"/> <subcontrol type="setting" id="controlSetting" permission="1"/> </control> <control position="topright" type="input" icon="search" width="200px" permission="3"/>在config.xml配置文件中设置图层的权限。
“Base”图层拥有权限限制“1”。因为该图层是一个复合图层（layer group），所以该图层的所有子图层都拥有相同的权限限制，除非子图层设置了独立的权限限制。例如：因为“City”图层没有设置其他的权限限制，它将拥有父节点的权限（1）。“Section_0”图层设置了另外的权限限制（1，3），因此它的权限为“1”和“3”。
使用“Base”图层必须拥有权限“1”
使用“City”图层必须拥有权限“1”
使用“Section_0”图层必须拥有权限“1”或者权限“3”
使用“Section_1”没有权限限制
<layer is_group="1" label="Base" permission="1">
<layer is_group="1" label="City">
<layer src_name="source0" icon="compound_layer" id="73" is_dynamic="1" label="Section_0" permission="1 3"/>
<layer src_name="source0" icon="compound_layer" id="76" is_dynamic="1" label="Section_1"/>
</layer>
</layer>
给mapview对象设置权限
var mapView = new KQ.Map.MapView({ permission: [1], });如果没有错误发生，没有在mapview中设置对应权限的控件和图层将不会在地图中显示。
获取权限
var permission = mapView.getPermission();
绑定事件
可以绑定函数到事件上，当事件发生时将调用绑定的函数。
参考： MapView
地图click事件
参考以下代码：
mapView.on('click', function (e) {
console.log('click position:' + e.latlng);
});
地图resize事件
参考以下代码：
mapView.on('resize', function (e) {
console.log('old size:' + e.oldSize);
console.log('new size:' + e.newSize);
})
移除事件绑定
参考以下代码：
function onClick(e) {
console.log('click position:' + e.latlng);
}
mapView.on('click', onClick); // 添加绑定
mapView.off('click', onClick); // 移除绑定
使用实时数据
它提供了对于实时的点数据的展示与跟踪的功能。它能够将标记点沿折线运动，也能够锁定该点进行跟踪监视。
参考： MapRealtime
基础用法
创建mapview对象并且进行初始化
定义选项。（内置了一组数据方便测试使用，默认不传递数据也能起作用）
var realtime_options = { interval: 1000, popup_label: 'Colin', popup_img: '../../testdata/person1.jpg', };创建realtime对象并且将它加入到mapview中。
var realtime = new KQ.Map.MapRealtime(null, realtime_options); realtime.addToMapView(mapView);
添加数据
改写option的getCoord方法可以提供真实数据，每到时间间隔将会调用该函数获取数据。如果不提供该函数将会使用模拟数据，方便测试。 注意：需返回坐标系为wgs84的（经度，纬度）的格式的数据。
var realtime_options = {
getCoord: function () {
// 通过网络获取数据，或通过其他方式获取
return coord; // [114, 31]
},
};
时间间隔
单位是毫秒。下面的的设置将每隔1秒钟获取一次点数据。
var realtime_options = {
interval: 1000,
};
初始是否弹出信息
默认弹出信息框，设为false则不弹出信息框
var realtime_options = {
is_init_popup: true,
};
弹出框内容
改变popup_label将设置弹出框的标题，改变popup_img将设置弹出框的图像
var realtime_options = {
popup_label: 'Colin',
popup_img: '../../testdata/person1.jpg',
}
定制标记
标记可以设置成不同的形状、颜色、图标。
参考： add-map-marker
var realtime_options = {
"extraIcon": {
icon: 'fa-spinner fa-spin',
markerColor: 'green-dark',
shape: 'circle',
prefix: 'fa',
},
}
定制轨迹
轨迹可以设置样式。
参考： set-style
var realtime_options = {
"style": {
"radius": 5,
"stroke": true,
"color": "#c31b20",
"weight": 2,
"opacity": 0.5,
"fill": true,
"fillColor": "#c31b20",
"fillOpacity": 0.2,
"clickable": true,
},
}
定制轨迹的最大点数
可以在地图上限制轨迹显示的最大点数，如下设置将只显示5个点：
var realtime_options = {
max_track_number: 5,
}
跟踪
可以在地图上跟踪某个realtime。 注意，不要同时在地图上监视两个点。
realtime.setFollow(true);
设置轨迹类型
可以通过选项设置显示点状轨迹还是线状轨迹。默认为点。
var realtime_options = {
shapeType: 'line',
}
点：
线：
使用历史轨迹
它提供了使用geojson对象来播放gps轨迹的功能。它能够将标记点沿折线运动，运动速度和时间相关联。轨迹播放功能类似与一个视频播放器，可以开始和停止播放，改变播放速度等。
参考： Playback
基础用法
创建mapview对象并且进行初始化
定义选项。geojson是数据，它可以是单独的geojson对象或geojson对象的数组。
var playbackOptions = { geojson: demoTracks, };or:
var playbackOptions = { geojson: [track0, track1, track2, track3], };创建playback对象并且将它加入到mapview中。
var playback = new KQ.Control.Playback(playbackOptions); playback.addToMapView(mapView);
数据格式
控件使用geojson格式来展示gps轨迹。数据格式如下：
{
"type": "Feature",
"geometry": {
"type": "MultiPoint",
"coordinates": [/*array of [lng,lat] coordinates*/]
},
"properties": {
"time": [/*array of UNIX timestamps*/]
}
}
注意: coordinates和time的数量必须一致，否则会导致问题 coordinates：坐标。必须是wgs84。 time：时间。unix的时间格式。 其他属性也可以添加到geojson对象，但是上面是使控件可用的最低格式要求。
启用控制控件
设置选项来启用控制控件。
var playbackOptions = {
// 启用控件
tracksLayer : true,
playControl: true,
dateControl: true,
sliderControl: true,
// 设置控件位置
tracksLayerPosition: 'bottomleft',
playControlPosition: 'bottomleft',
dateControlPosition: 'bottomleft',
sliderControlPosition: 'bottomleft',
};
弹出框和提示框
当点击标记时弹出信息框。
设置playback选项：
var playbackOptions = { popups: true, // 启用弹出框 popups_autoClose: false, // 如果为true，弹出框将在点击其他标记时自动关闭 tooltips: true, // 启用提示框 }在geojson的properties中添加标签和图像。
- 当点击标记时，将弹出信息框。
- 当鼠标悬浮在标记上时，将弹出提示框。
- 当设置为false时，将屏蔽弹出框和提示框。
定制标记
标记可以设置成不同的形状、颜色\图标。
在geojson的properties中添加标记信息。
参考： add-map-marker
- 结果预览：
定制轨迹
轨迹可以设置样式。
在geojson的properties中设置样式信息。
参考： set-style
- 结果预览：
定制控件标签
可以在playback的选项中设置控件标签：
var playbackOptions = {
label_play: '播放轨迹',
label_stop: '停止播放',
label_gpsTrack: 'GPS 轨迹',
label_latlng: '经纬度',
}
初始时弹出信息框
在GeoJSON的properties中添加is_init_popup属性
"properties": {
"is_init_popup": true,
}
使用建筑物
能够在地图上显示2.5D效果的建筑物。
配置图层
在KqMap配图工具的图层树中，右键选择多边形图层，将图层设为建筑物。
- 图层必须为房屋类型的多边形图层，请勿设置无意义的其他类型的多边形图层。
- 建筑物只是叠加在2D图形上的图层，并不影响2D图形的配图，因此2D图形期待什么效果还是需要单独配图。
- 图层必须是数据库形式的数据，因为图形需要支持实时查询
发布服务
在Web服务发布后，将地图放大到一定比例尺，可以看到2.5D的建筑物图形
修改最小显示比例尺
如果比例尺大于该数值，房屋将会显示，默认值是0.0005。在config.xml文件中进行配置：
<config custom="1">
<building min_scale_value="0.0005"/>
...
<config/>
修改高度系数
修改它可以让房屋显得更高或更矮，默认值为1。在config.xml文件中进行配置：
<config custom="1">
<building height_rate="1.2"/>
...
<config/>
设置图层高度字段
可以设置作为高度使用的字段。如果没有设置该字段，房屋的高度将使用默认值。在config.xml中：
<config custom="1">
<tree label="layers">
...
<layers id="layers">
<layer building_height_field="FWHEIGHT" ... />
</layers>
...
<config/>
API调用
参考： MapBuilding
- 可以自由添加、删除房屋数据
- 可以改变房屋高度
- 可以改变房屋墙壁颜色
- 可以改变房屋楼顶颜色
- 可以给房屋加上房顶
- 可以使用onClick事件响应点击
效果图
缓冲分析演示
点图形缓冲
线图形缓冲
面图形缓冲
属性查询后处理
替换属性值
参考以下代码：
var instance = KQ.Control.InfoQueryDialog.getInstance(); // 获取属性查询对话框的实例
instance.addDataProcessingFunc(function (data) {
for (var key in data){ // key为表名(图层名)
let records = data[key].records; // 读取记录
for (let i = 0; i < records.length; ++i){
var record = records[i];
var prop = 'DLBM' // 需要进行替换的字段
// 属性值对应表，进行替换
switch (record[prop]){
case "013":
record[prop] = "旱地";
break;
case "032":
record[prop] = "灌木林地";
break;
case "033":
record[prop] = "其他林地";
break;
default:
break;
}
}
}
});
效果图：
图层加载与显示
使用WMS图层
能够将WMS服务图层加入到地图中，并在该图层上进行查询等功能。 例如：使用Arcgis发布的WMS服务，这样能够将Arcgis的地图服务集成到系统中。
注意：
- 在config.xml配置文件的<prj>标签中，正确的设置WMS服务的投影字符串(格式为wkt)
- source的type类型为wms
设置服务参数
需要弄清楚WMS服务的详细参数，并且设置到config.xml中：
<projection>
<prj>PROJCS["WGS_1984_Web_Mercator_Auxiliary_Sphere",GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",
SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],
PROJECTION["Mercator_Auxiliary_Sphere"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",0.0],
PARAMETER["Standard_Parallel_1",0.0],PARAMETER["Auxiliary_Sphere_Type",0.0],UNIT["Meter",1.0],AUTHORITY["EPSG",3857]]</prj> // 注意点1 设置正确的投影信息
<proj4>+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs</proj4>
<origin x="-20037573.34278925" y="20037540.34278925"></origin>
</projection>
<tree label="洪山区">
<sources>
<source url="http://172.16.0.94:6080/arcgis/services/hongshanqu/MapServer/WmsServer?" type="wms" name="sourceWMS"/> // 注意点2 type的类型为wms
</sources>
<layers id="layers">
<layer opacity="1" src_name="sourceWMS" icon="polygon" type="sl" id="2" is_dynamic="0" label="WMS图层" tooltip_forefather="WMS图层" visible="1"/>
</layers>
</tree>
使用WMTS图层
能够将WMTS服务图层加入到地图中，并在该图层上进行查询等功能。 例如：使用Arcgis发布的WMTS服务，这样能够将Arcgis的地图服务集成到系统中。
注意：WMTS服务的投影以及比例尺信息必须和地图服务完全匹配才能添加。例如：使用EPSG：3857和Google比例尺进行发布。id固定写0能避免冲突问题。
设置服务参数
需要弄清楚WMTS服务的详细参数，并且设置到config.xml中：
<tree label="HongShanQu">
<sources>
<source url="http://172.16.1.174:8699/KQGis/rest/services/hs" type="kqmapping" name="source0"/>
<source url="http://172.16.0.94:6080/arcgis/rest/services/hongshanqu/MapServer/WMTS" type="wmts" name="sourceWMTS"/>
</sources>
<layers id="layers">
<layer opacity="1" src_name="source0" map_src_name="sourceWMTS" icon="polygon" type="sl" id="0" is_dynamic="0" label="HongShanDLTB"
tooltip_forefather="HongShanDLTB" visible="0" _style="default" _layer="hongshanqu" _tilematrixSet="default028mm" _format="image/png"/>
</layers>
</tree>
说明： 使用kqgisserver和数据进行常规的配图和发布，将会生成config.xml和查询相关的配置文件。在此基础上，在config.xml中增加WMTS数据源，并在layer中增加相应的关联信息。WMTS服务的相关信息，可以直接访问WMTS的URL进行查看。
| 字段 | 内容 |
|---|---|
| map_src_name | 地图展示使用的wmts数据源的名称 |
| _style | wmts服务的style，参考wmts服务参数 |
| _layer | wmts服务的layer，参考wmts服务参数 |
| _tilematrixSet | wmts服务的tilematrixSet，参考wmts服务参数 |
比例尺与投影
地图配置的投影信息必须和WMTS完全一致（注意，如果是特殊投影，需要设置投影的范围和比例尺；如果是经纬度，origin根据实际来设置，可能是-180,180） 例如：EPSG3857和Google比例尺，将它们设置到config.xml中：
<scales>
<scale id="0">0.000000001690163571602659</scale>
<scale id="1">0.000000003380327143205318</scale>
<scale id="2">0.000000006760654286410635</scale>
<scale id="3">0.00000001352130857282127</scale>
<scale id="4">0.00000002704261714564254</scale>
<scale id="5">0.00000005408523429128508</scale>
<scale id="6">0.0000001081704685825702</scale>
<scale id="7">0.0000002163409371651403</scale>
<scale id="8">0.0000004326818743302807</scale>
<scale id="9">0.0000008653637486605613</scale>
<scale id="10">0.000001730727497321123</scale>
<scale id="11">0.000003461454994642245</scale>
<scale id="12">0.000006922909989284491</scale>
<scale id="13">0.00001384581997856898</scale>
<scale id="14">0.00002769163995713796</scale>
<scale id="15">0.00005538327991427592</scale>
<scale id="16">0.0001107665598285518</scale>
</scales>
<projection>
<proj4>+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs</proj4>
<origin x="-20037573.34278925" y="20037540.34278925"></origin>
</projection>
微调地图
可以微调config.xml中的origin，使天地图与我们的地图吻合。
效果图
动态添加WMTS图层
let layer = new KQ.Layer.LayerWMTS('http://172.16.0.5:6080/arcgis/rest/services/DLTB2010/MapServer/WMTS', {
layer: 'DLTB2010',
style: "default",
tilematrixSet: "default028mm",
format: "image/png",
}, 25000); // 25000代表的是图层的zIndex
layer.addToMapView(mapView);
使用天地图
能够将天地图图层加入到地图中。 注意：叠加天地图必须使用WGS 1984 Web Mercator和Google比例尺进行发布。
设置投影
投影选择WGS 1984 Web Mercator
设置比例尺
发布服务时，选择google比例尺模式，选择从0级开始
加入天地图
在配置文件中启用天地图
<control type="basemap" position="bottomright" visible="1">
<subcontrol name="天地图矢量" maptype="tianditu" subtype="vector" is_selected="1"></subcontrol>
<subcontrol name="天地图影像" maptype="tianditu" subtype="image"></subcontrol>
<subcontrol name="天地图地形" maptype="tianditu" subtype="terrain"></subcontrol>
</control>
配置文件
地图配置的投影信息必须和天地图完全一致。例如：WGS 1984 Web Mercator和Google比例尺，将它们设置到config.xml中：
<scales>
<scale id="0">0.000000001690163571602659</scale>
<scale id="1">0.000000003380327143205318</scale>
<scale id="2">0.000000006760654286410635</scale>
<scale id="3">0.00000001352130857282127</scale>
<scale id="4">0.00000002704261714564254</scale>
<scale id="5">0.00000005408523429128508</scale>
<scale id="6">0.0000001081704685825702</scale>
<scale id="7">0.0000002163409371651403</scale>
<scale id="8">0.0000004326818743302807</scale>
<scale id="9">0.0000008653637486605613</scale>
<scale id="10">0.000001730727497321123</scale>
<scale id="11">0.000003461454994642245</scale>
<scale id="12">0.000006922909989284491</scale>
<scale id="13">0.00001384581997856898</scale>
<scale id="14">0.00002769163995713796</scale>
<scale id="15">0.00005538327991427592</scale>
<scale id="16">0.0001107665598285518</scale>
</scales>
<projection>
<proj4>+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378137 +b=6378137 +units=m +no_defs </proj4>
<origin x="-20037573.34278925" y="20037540.34278925"></origin>
</projection>
微调地图
可以微调config.xml中的origin，使天地图与我们的地图吻合。
效果图
使用图层对比
能够用多窗口的方式对不同图层进行对比。 目前支持直接使用控件进行二窗口对比，四窗口对比或使用API进行地图对比。
使用控件进行对比
a、在配置文件中启用图层对比功能
<control position="topright" type="compare" is_show_cursor="1" cursor_opacity="1.0" cursor_color="#0000FF" cursor_radius="40"/>
说明：
| 字段 | 内容 |
|---|---|
| is_show_cursor | 是否显示比较窗口内的光标 |
| cursor_opacity | 比较窗口的光标透明度 |
| cursor_color | 比较窗口的光标颜色 |
| cursor_radius | 比较窗口的光标半径 |
| is_enable_2win | 启用2窗口 |
| is_enable_3win | 启用3窗口 |
| is_enable_4win | 启用4窗口 |
| is_enable_5win | 启用5窗口 |
| is_enable_6win | 启用6窗口 |
b、二窗口对比效果图
c、四窗口对比效果图
d、六窗口对比效果图
e、能支持二窗口，三窗口，四窗口，五窗口，六窗口对比
使用API进行对比
a、准备对比窗口的代码，可以按需填入需要的内容，路径：kqwebmap/window/empty-window.html
<div id="empty-window"></div>
b、创建窗口对象，并设置好参数
var win = new KQ.Control.Window('empty-window', {
parentID: 'map',
position: {
left: '10px',
top: '10px',
},
width: '1000px',
height: '600px',
title: 'Compare 2011 and 2009',
});
c、初始化窗口对象，并通过API使用地图对比功能
参考： compareTwoMap
win.initAsync(function () {
win.maximize();
mapView.compareTwoMap({
win: win,
parentID: 'empty-window',
leftLayerInfos: [ { src_name: "source0", id: "93" }, { src_name: "source0", id: "95" }, { src_name: "source0", id: "96" } ],
rightLayerInfos: [ { src_name: "source0", id: "105" }, { src_name: "source0", id: "106" }, { src_name: "source0", id: "107" } ],
leftGeoJSON: left_geojson,
rightGeoJSON: right_geojson,
leftQueryLayerInfo: { src_name: "source0", id: "93" },
rightQueryLayerInfo: { src_name: "source0", id: "105" },
zoom: 9,
center: [ 30.3791, 104.9515 ],
});
win.open();
});
d、允许通过返回值取回地图对象和图层控制对象 参考： Return
e、效果图
图层置顶
能够进行图层的置顶和取消置顶。图层置顶后，该图层在所有图层的最上层显示
默认效果图
置顶乐至县的效果图
取消置顶乐至县的效果图
遮罩图层
管理遮罩图层的添加、删除等操作
参考： MaskLayerManager
基本用法(遮罩)
设置遮罩图层：
var maskButtons = [];
var instance = KQ.Common.MaskLayerManager.getInstance();
var layers = instance.layers();
for (var i = 0; i < layers.length; ++i){
(function (idx) {
var button = new KQ.Control.MapButton('fa-copy fa-lg', function () {
// 点击按钮, 设置为遮罩图层
instance.addLayer(layers[idx].key);
}, layers[idx].label);
maskButtons.unshift(button);
})(i);
}
let bar = new KQ.Control.MapButtonBar(maskButtons, { position: 'topleft' });
bar.addToMapView(mapView);
结果：
地图GeoJSON
展现一个GeoJSON对象或一个GeoJSON对象数组。它可以解析GeoJSON数据并将其显示在地图上。
参考： MapGeoJson
基本用法（GeoJSON）
添加一个默认样式的GeoJSON到mapview。
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[
104.91763561707054,
30.154133143258463
],
[
104.93278268710557,
30.092682588091314
],
[
105.03502903861937,
30.10582236698391
]
]
}
}
]
};
var geojson = new KQ.Map.MapGeoJSON(data);
geojson.addToMapView(mapView);
添加样式
GeoJSON可以通过API或者选项设置样式。
var geojson = new KQ.Map.MapGeoJSON(data);
geojson.setStyle({
"pane": "overlayPane",
"nonBubblingEvents": [],
"attribution": null,
"smoothFactor": 1,
"noClip": false,
"stroke": true,
"color": "#e74c3c",
"weight": 4,
"opacity": 0.5,
"lineCap": "round",
"lineJoin": "round",
"dashArray": "15, 10, 1, 10",
"dashOffset": null,
"fill": false,
"fillColor": null,
"fillOpacity": 0.2,
"fillRule": "evenodd",
"interactive": true,
"contextmenu": false,
"contextmenuItems": [],
"contextmenuInheritItems": true,
"clickable": true
});
geojson.addToMapView(mapView);
改变图标
如果数据是点数据，可以通过改变Icon的option的方式来改变图标，如果不设置将使用默认的效果。
var data = {
"type": "Feature",
"properties": {
"options": {
"icon": {
"options": {
"iconUrl": '../../images/custom-marker.png',
"iconSize": [ 25, 41 ],
"iconAnchor": [ 13, 40 ],
"shadowUrl": '../../images/marker-shadow.png',
"shadowSize": [ 25, 41 ],
"shadowAnchor": [ 8, 40 ],
},
"_initHooksCalled": true,
}
}
},
"geometry": {
"type": "Point",
"coordinates": [
104.94174817230561,
30.015712894345075,
],
},
};
var geojson = new KQ.Map.MapGeoJSON(data);
geojson.addToMapView(mapView);
缩放到GeoJSON
缩放地图到图形。
var geojson = new KQ.Map.MapGeoJSON(data);
geojson.addToMapView(mapView);
var bound = geojson.getBounds();
mapView.flyToBounds(bound);
绑定点击事件
在GeoJSON对象上绑定点击事件的相应函数。当对象被点击时，函数将会执行。
function onClick (e) {
console.log('my click!');
}
var geojson = new KQ.Map.MapGeoJSON(data);
geojson.bindOnClick(onClick);
地图标记
它用于在地图上显示可点击/可拖动的图标。
参考： MapMarker
添加标记 1
- 创建mapview对象并且初始化
定义图标的选项：
var icon_0 = { icon: 'fa-coffee', markerColor: 'blue', shape: 'square', prefix: 'fa', }; var icon_1 = { icon: 'fa-spinner fa-spin', markerColor: 'green-dark', shape: 'circle', prefix: 'fa', }; var icon_2 = { icon: 'fa-cog fa-spin', iconColor: 'black', markerColor: 'white', shape: 'star', prefix: 'fa', }; var icon_3 = { icon: 'fa-qq', markerColor: 'purple', shape: 'penta', prefix: 'fa', };创建MapMarker对象，并且将它添加到mapview
new KQ.Map.MapMarker([ 30.56, 113.66 ], { extraIcon: icon_0 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.66, 113.76 ], { extraIcon: icon_1 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.56, 113.86 ], { extraIcon: icon_2 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.46, 113.76 ], { extraIcon: icon_3 }).addToMapView(mapView);
添加标记 2
- 创建mapview对象并且初始化
- 创建一个标记的Icon。
PS: 图片必须放置在'kqwebmap/images'。
var myIcon = new KQ.Struct.Icon({ iconUrl: '../../images/custom-marker.png', iconSize: [ 25, 41 ], iconAnchor: [ 13, 40 ], shadowUrl: '../../images/marker-shadow.png', shadowSize: [ 25, 41 ], shadowAnchor: [ 8, 40 ], }); - 创建MapMarker对象。如果没有传递icon参数，它将使用默认图标。
var marker = new KQ.Map.MapMarker([ 30, 104 ], { icon: myIcon }); - 添加标记对象到mapview对象：
marker.addToMapView(mapView); - 绑定事件，用于事件响应：
marker.on('dblclick', function (e) { console.log('dblclick!'); })
添加数字标记
- 创建mapview对象并且初始化
定义图标的选项：
var icon_0 = { icon: 'fa-number', number: '0', markerColor: 'blue', shape: 'square', prefix: 'fa', }; var icon_1 = { icon: 'fa-number', number: '1', markerColor: 'green-dark', shape: 'circle', prefix: 'fa', }; var icon_2 = { icon: 'fa-number', number: '2', iconColor: 'black', markerColor: 'white', shape: 'star', prefix: 'fa', }; var icon_3 = { icon: 'fa-number', number: '3', markerColor: 'purple', shape: 'penta', prefix: 'fa', };创建MapMarker对象，并且将它添加到mapview。
new KQ.Map.MapMarker([ 30.56, 113.66 ], { extraIcon: icon_0 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.66, 113.76 ], { extraIcon: icon_1 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.56, 113.86 ], { extraIcon: icon_2 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.46, 113.76 ], { extraIcon: icon_3 }).addToMapView(mapView);
添加字母标记
- 创建mapview对象并且初始化
定义图标的选项：
var icon_0 = { icon: 'fa-number', number: 'A', markerColor: 'blue', shape: 'square', prefix: 'fa', }; var icon_1 = { icon: 'fa-number', number: 'B', markerColor: 'green-dark', shape: 'circle', prefix: 'fa', }; var icon_2 = { icon: 'fa-number', number: 'C', iconColor: 'black', markerColor: 'white', shape: 'star', prefix: 'fa', }; var icon_3 = { icon: 'fa-number', number: 'D', markerColor: 'purple', shape: 'penta', prefix: 'fa', };创建MapMarker对象，并且将它添加到mapview。
new KQ.Map.MapMarker([ 30.56, 113.66 ], { extraIcon: icon_0 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.66, 113.76 ], { extraIcon: icon_1 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.56, 113.86 ], { extraIcon: icon_2 }).addToMapView(mapView); new KQ.Map.MapMarker([ 30.46, 113.76 ], { extraIcon: icon_3 }).addToMapView(mapView);
添加提示框
用于鼠标悬浮在标记上时显示一小段提示性的文字或图像。
var marker = new KQ.Map.MapMarker([ 30, 104 ], { icon: myIcon });
marker.bindTooltip('Hello world!', {
offset: new KQ.Struct.Point(10, -30),
});
marker.addToMapView(mapView);
添加弹出框
用于点击标记时弹出信息框。
var marker = new KQ.Map.MapMarker([ 30, 104 ], { icon: myIcon });
marker.bindPopup('Hello world!', {
offset: new KQ.Struct.Point(0, -30),
});
marker.addToMapView(mapView);
文本标记
用于在地图上显示文本信息。
var marker = new KQ.Map.MapMarker([ 30, 104.70 ], { label: `<h1 style="color: red">ABC</h1>` });
marker.addToMapView(mapView);
地图标记簇
管理地图标记的添加、删除等操作
参考： MarkerCluster
基本用法（标记簇）
管理地图标记：
// markercluster.json的内容为: [ [116.4383, 40.1471], [116.4372, 40.1458]... ]
$.get('./markercluster.json', function (data) {
var markerList = [];
var markers = new KQ.Control.MarkerCluster();
for (let i = 0; i < data.length; ++i){
var marker = new KQ.Map.MapMarker([data[i][1], data[i][0]]);
markerList.push(marker);
}
markers.addLayers(markerList);
markers.addToMapView(mapView);
})
结果：
使用API控制底图
允许使用API进行底图控制
基本用法（控制底图）
let base_layers_0 = KQ.Control.MapBaseLayer.getLayers('tianditu', 'vector');
let base_layers_1 = KQ.Control.MapBaseLayer.getLayers('tianditu', 'image');
let button0 = new KQ.Control.MapButton('fa-globe fa-lg', function (btn, map) {
base_layers_0.forEach(function(layer){
mapView._getMap().addLayer(layer);
});
base_layers_1.forEach(function(layer){
mapView._getMap().removeLayer(layer);
});
}, '点击这个按钮 0');
let button1 = new KQ.Control.MapButton('fa-bug', function (btn, map) {
base_layers_1.forEach(function(layer){
mapView._getMap().addLayer(layer);
});
base_layers_0.forEach(function(layer){
mapView._getMap().removeLayer(layer);
});
}, '点击这个按钮 1');
})
结果：
临时改变地图投影
允许临时改变地图投影，显示不同于地图目标投影的地图服务，并在显示完毕后恢复原样。
例如：当前目标投影为EPSG:4326，临时切换到EPSG:3857，加载3857服务的地图并显示。
// change crs from 4326 to 3857
var crs_options = {
"origin": [-20037508.3427892, 20037508.3427892],
"resolutions": [305.748124978916, 152.874062489458, 76.437031244729, 38.2185156223645, 19.10925781118225, 9.554628905591125, 4.777314452795562, 2.388657226397781, 1.1943286131988906, 0.5971643065994453, 0.29858215329972265, 0.14929107664986133, 0.07464553832493066],
"bounds": L.bounds([-20037508.3427892, -20037508.3427892], [20037508.3427892, 20037508.3427892]),
"prj": KQ.Common.CommonValues.defaltPrj_EPSG3857,
"proj4": KQ.Common.CommonValues.defaltProj4_EPSG3857,
};
mapView.setTempCRS(crs_options);
// add 3857 map service
layerwms = new KQ.Layer.LayerWMS("http://172.16.1.174:8699/KQGis/rest/services/hsq3857/MapServer/WMS", {id: "1"});
layerwms.addToMapView(mapView);
... ...
// remove layer
layerwms.removeFromMapView();
// restore crs
mapView.restoreCRS();
矢量瓦片
什么是矢量瓦片
矢量瓦片数据以矢量形式存在。矢量瓦片体积小，可高度压缩，占用的存储空间比栅格瓦片要小上千倍。数据传输体量小，地图更新的代价小。
使用条件
系统使用MapBox GL渲染引擎来渲染矢量瓦片，需满足两个限制条件（EPSG3857投影和Google比例尺）。在配图时需要选择EPSG3857投影，在发布服务时需要选择Google比例尺模式。
设置通用样式
系统能对矢量瓦片图层的一系列通用渲染属性进行设置，例如：比例尺、过滤筛选、透明度、颜色、偏移量等。
比例尺
通过设置最大、最小比例尺的数值，可以控制矢量瓦片图层在哪些级别显示。
效果图：
过滤条件
通过设置过滤条件，可以在瓦片图层中筛选出符合条件的要素进行显示。
效果图：
填充图案
可自定义要素渲染时使用的填充图案。
效果图：
透明度
修改透明度值（0-1）可实时修改相应要素的透明度。
效果图：
颜色
设置颜色可以实时修改要素的填充色。
效果图：
偏移量
设置偏移量可以在要素显示时进行相应的偏移。
效果图：
设置点样式
矢量瓦片点图层包含一些特有的渲染属性，比如：字体符号、字体大小、内边距、文字压盖、最大宽度、字符间距、书写模式、旋转角度等。
字体符号
丰富的符号选择库。
符号模式
能够选择字体图元作为点符号的选
效果图：
文本模式
xxx
效果图：
字体大小
可实时修改字体的大小并浏览。
效果图：
内边距
被编辑属性定义元素边框与元素内容之间的空白区域。
效果图：
文字压盖
勾选来设置是否允许文字压盖。
效果图：
最大宽度
通过设置最大宽度，可以设置文本折行的最大行度。
效果图：
字符间距
通过设置字符间距，可以调整字符之间的距离。
效果图：
书写模式
通过设置书写模式，可以控制字符的方向
效果图：
旋转角度
通过设置旋转角度，可以顺时针旋转文本的角度。
效果图：
设置线样式
矢量瓦片图层包含一些通用的线样式属性，比如：线末端样式、线交叉样式、尖角值、圆角值、宽度、线样式等。
线末端样式
通过设置线末端样式，可以控制线的末端的样式。可选的值有 butt, round, square。
butt 方型末端，仅绘制到直线端点。
round 圆型末端，以线宽的 1/2 为半径，以线端点为圆心，超出线端点绘制。
square 方型末端，以线宽的 1/2 长度超出线端点绘制。
效果图：
线交叉样式
通过设置线交叉样式，可以控制线交叉时的显示样式。可选的值有 bevel, round, miter。
bevel 方型交点，以线宽的 1/2 长度超出交点绘制。
round 圆型交点，以线宽的 1/2 为半径，以交点为圆心绘制，超出交点绘制。
miter 尖型交角，以两线段外沿相交，超出交点绘制。
效果图：
尖角值
通过设置尖角值，用来将锐利的尖型交角自动地转换为方型交角。（需要将线交叉样式设置为miter）
效果图：
圆角值
通过设置圆角值，用来将平浅的圆型交角自动地转换为尖型交角。（需要将线交叉样式设置为round）
效果图：
宽度
通过设置宽度，可以控制线的宽度。
效果图：
线样式
通过设置线样式，指定生成虚线的实部和虚部长度。设置的长度会随着线宽进行缩放。将长度乘以当前线宽即为虚线的实际像素数。
效果图：
设置面样式
正文
渲染模式
矢量瓦片支持两种渲染模式：a 单值渲染 b 分段渲染。两种渲染模式都是基于要素值，按照一定的规则进行渲染。
单值渲染
单值渲染字段值相同的要素归为一类，为每一类设定一种渲染颜色。
效果图：
分段渲染
分段渲染按照某种分段方式被分成多个范围段，要素根据要素值被分配到其中一个范围段中，在同一个范围段中的要素使用相同的颜色进行渲染。
效果图：
图层选择
地图上选中特定的图层，编辑图层的样式。
效果图：
属性选择
地图上选中特定的要素，查看要素的属性值。
效果图：
地图控件
MapButton
在地图上显示按钮，并且定制点击事件发生时的响应函数。
参考： MapButton
添加按钮
在地图上添加按钮。
var button0 = new KQ.Control.MapButton('fa fa-globe fa-lg', function (btn, map) {
console.log('button 0 clicked!');
}, 'Press Button 0');
button0.addToMapView(mapView, 'bottomleft');
结果：
添加按钮条
在地图上添加按钮条。
参考： MapButtonBar
var button0 = new KQ.Control.MapButton('fa fa-globe fa-lg', function (btn, map) {
console.log('button 0 clicked!');
}, 'Press Button 0');
var button1 = new KQ.Control.MapButton('fa fa-bug fa-lg', function (btn, map) {
console.log('button 1 clicked!');
}, 'Press Button 1');
let bar = new KQ.Control.MapButtonBar([ button0, button1 ], { position: 'topleft' });
bar.addToMapView(mapView);
结果：
MapInput
创建地图输入框控件。
注意：地图只允许有一个输入框控件。
参考： MapInput
绑定点击事件
通过config.xml添加输入控件，并且绑定事件：
mapView.initAsync(function() {
var input = mapView.getInput();
input.setOnClick(function () {
console.log('my onclick!!!');
console.log(input.value());
})
});
添加地图输入框
在地图上添加一个输入框控件。
var options = {
position: 'topleft',
iconType: 'heart',
onClick: function () {
console.log('onclick!!!');
console.log(this.value());
},
}
var input = mapView.getInput();
input.setDropdownData([ 'A', 'B', 'C' ]);
input.setOnClick(function () {
console.log('my onclick!!!');
console.log(input.value());
console.log(input.dropdownValue());
});
结果：
MainSidebar
从地图的左边或右边显示一个带标签页的侧边栏。
参考： Sidebar
添加新标签
在侧边栏上添加新标签：
- 找到文件并打开它：'kqwebmap/sidebar/sidebar.html'。
- 找到内容
<ul role="tablist">和它的结束标签</ul>. 在
</ul>前，添加代码<li><a title="new tab" href="#newtab" role="tab"><i class="fa fa-address-book"></i></a></li>。
添加新内容
添加新标签页的内容：
- 找到文件并打开它：'kqwebmap/sidebar/sidebar.html'。
- 找到内容
<div class="sidebar-content">。 - 在下面添加代码：
<div class="sidebar-pane" id="newtab"> <h1 class="sidebar-header">New tab<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1> <div id="controlNewTab"> <button type="submit" id="newTabButton" onclick="onButtonClick()" style="background-color: lightgrey">submit</button> <p>something new</p> </div> </div>
添加事件
添加事件响应函数：
- 找到文件并打开它：'kqwebmap/sidebar/sidebar.html'。
在结束位置添加代码：
<script> function onButtonClick() { console.log('newTabButton clicked'); } function sidebar_init () { console.log('function sidebar_init() run !!!'); } </script>
结果：
(fold)
(unfold)
MapLayerTree
控制图层的加载和显示
参考： MapLayerTree
设置选中图层
设置选中图层并且加载
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
var mapView = new KQ.Map.MapView({});
mapView.initAsync(function () {
var tree = mapView.getTree();
if (tree) {
var selectedLayers = [{sourceName: "source0", layerId: "1"}, {sourceName: "source0", layerId: "2"}];
tree.selectedLayers(selectedLayers);
}
})
});
结果：
清空选中图层
清除所有的选中图层
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
var mapView = new KQ.Map.MapView({});
mapView.initAsync(function () {
var tree = mapView.getTree();
if (tree) {
tree.clearSelectedLayers();
}
})
});
结果：
select事件
选中图层节点，发送select事件
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
var mapView = new KQ.Map.MapView({});
mapView.initAsync(function () {
var tree = mapView.getTree();
if (tree) {
tree.on('select', function (layer) {
console.log("key: " + layer.key + " selected: " + layer.selected); // key: 46@@144 selected: true
});
}
})
});
增加选中图层
增加被选中的图层
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
var mapView = new KQ.Map.MapView({});
mapView.initAsync(function () {
var tree = mapView.getTree();
if (tree) {
tree.addCheckedLayer({key: "46@@144", selected: true});
}
})
});
结果：
控制图层选中数量
为了保证地图的显示效率，默认情况下，最多显示20个图层，可以根据项目的实际需求，进行配置
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
var mapView = new KQ.Map.MapView({});
mapView.initAsync(function () {
var tree = mapView.getTree();
if (tree) {
tree.setMaxLayerSelectedNumber(5);
}
})
});
结果：
定制右键菜单响应函数
定制右键菜单响应函数
var config = KQ.Map.MapConfig.getInstance();
config.initAsync('', false, function () {
var mapView = new KQ.Map.MapView({});
mapView.initAsync(function () {
var tree = mapView.getTree();
if (tree) {
tree.setContextmenuCustomFunction({legend: function (key) {
alert(key);
}
})
});
结果：
OverlayAnalysisResultDialog
显示叠置分析的结果
参考： OverlayAnalysisResultDialog
基本用法
设置数据源，显示叠置分析结果：
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records});
// 打开对话框
var dialog = KQ.Control.OverlayAnalysisResultDialog.getInstance();
dialog.open(dataSource)
结果：
设置对话框的选项
设置对话框的选项, 例如：宽度、高度、位置等
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label :"洪山区dltb", fields: fields, titles: titles, records: records});
// 设置对话框选项
var dialog = KQ.Control.OverlayAnalysisResultDialog.getInstance();
dialog.open(dataSource, {width: 500, height: 300, position: {
top: 100,
left: 200,
}});
结果：
定位地图元素
首先数据源中要存放图形数据，然后选中叠置分析结果框中的一条记录，就能定位到相应的地图元素。
var dataSource = [];
var geometry1 = {"type":"Polygon","coordinates":[[[114.36958885192871,30.65955924987793],[114.3676815032959,30.65955924987793],
[114.36747550964355,30.65949821472168],[114.36593055725098,30.659006118774414],[114.36554145812988,30.659006118774414],
[114.36528587341309,30.659025192260742],[114.36517143249512,30.659128189086914],[114.36512565612793,30.659326553344727],
[114.36519432067871,30.65955924987793],[114.35946846008301,30.65955924987793],[114.35893821716309,30.65852165222168],
[114.35722160339355,30.65379524230957],[114.35468101501465,30.64759635925293],[114.35344886779785,30.645383834838867],
[114.36039161682129,30.645383834838867],[114.36918830871582,30.649988174438477],[114.36958885192871,30.650197982788086],
[114.36958885192871,30.65955924987793]]]};
var geometry2 = {"type":"Polygon","coordinates":[[[114.36593055725098,30.659006118774414],[114.36747550964355,30.65949821472168],
[114.3676815032959,30.65955924987793],[114.36519432067871,30.65955924987793],[114.36512565612793,30.659326553344727],
[114.36517143249512,30.659128189086914],[114.36528587341309,30.659025192260742],[114.36554145812988,30.659006118774414],
[114.36593055725098,30.659006118774414]]]};
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"geometry": geometry1, "OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"geometry": geometry2, "OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records});
// 地位地图元素
var dialog = KQ.Control.OverlayAnalysisResultDialog.getInstance();
dialog.open(dataSource);
结果：
select事件
首先取得叠置分析对话框的实例，然后进行选中事件的绑定，在回调函数中，就可以操作对应的记录
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records});
var instance = KQ.Control.OverlayAnalysisResultDialog.getInstance();
// 绑定选中事件
instance.on('select', function (data) {
console.log(data);
}, instance);
instance.open(dataSource);
设置统计字段
设置叠置分析统计图的统计字段
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江", "areaLength": 100},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有", "areaLength": 200},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records});
var instance = KQ.Control.OverlayAnalysisResultDialog.getInstance();
instance.setChartFields(["BSM"]); // 设置统计字段为BSM
instance.open(dataSource);
结果：
设置模板
设置模板，定制列的表现形式
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var templates = ['<a href="\\#">#= OBJECTID #</a>', "", "", "", "",];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records, templates: templates});
// 打开对话框
var dialog = KQ.Control.OverlayAnalysisResultDialog.getInstance();
dialog.open(dataSource);
结果：
显示、隐藏统计图
显示或者隐藏统计图
var dataSource = [];
var fields = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var titles = ["OBJECTID", "BSM", "YSDM", "DLMC", "QSDWMC"];
var records = [
{"OBJECTID": 594, "BSM": 204335, "YSDM": "2001010100", "DLMC": "河流水面", "QSDWMC": "天兴乡长江"},
{"OBJECTID": 631, "BSM": 204372, "YSDM": "2001010100", "DLMC": "水工建筑用地", "QSDWMC": "天兴乡农民集体所有"},
];
dataSource.push({label: "洪山区dltb", fields: fields, titles: titles, records: records});
var instance = KQ.Control.OverlayAnalysisResultDialog.getInstance();
instance.open(dataSource, {showChart: true}); // 设置为true，显示统计图按钮，设置为false，隐藏统计图按钮
结果：
单位转换功能
重叠面积单位的转换，比如：平方米 --> 亩、平方米 --> 公顷。。。
KQ.Control.OverlayAnalysisResultDialog.getInstance().setUnitConversionOptions(
{
// 转换的字段
field: 'areaLength',
// 转换规则
rules: {
'平方米': function (val) {return val * 1;}, // 平方米 --> 平方米
'公顷': function (val) {return val * 0.000015;}, // 平方米 --> 公顷
'亩': function (val) {return val * 0.0015;}, // 平方米 --> 亩
},
}
)
结果：
查询结果多样化展示
统计图和统计详情在两个不同的窗口展示，实现查询结果的多样化展示
在OverlayAnalysisResultDialog类的open(dataSource, options)函数中, 配置detail参数进行功能定制,格式如下:
options.detail - 分析结果详情按钮 {title: '', callback: callback}
结果：
SimpleSidebar
从地图的左边或右边显示一个不带标签页的侧边栏。
参考： SimpleSidebar
添加内容
在侧边栏上添加内容：
- 找到文件并打开它：'kqwebmap/sidebar'。
添加新文件：'simplesidebar.html'。
<div id="simplesidebar"> <h1>Simple sidebar</h1> <p class="lorem"><b>A responsive sidebar plugin for for KqWebMap, a JS library for interactive maps.</b></p> <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <style> #simplesidebar { padding: 20px; } #simplesidebar p { padding: 10px; } #simplesidebar h1 { padding: 10px; } #simplesidebar ul { margin-left: 2em; } .lorem { text-indent: 2em; } </style>在JS文件里添加代码：
var mapView = new KQ.Map.MapView(); mapView.initAsync(function () { var sidebar = new KQ.Control.SimpleSidebar({ id: 'simplesidebar', fileName: 'simplesidebar.html', closeButton: true, type: 'm', }); sidebar.initAsync(function () { mapView.addControl(sidebar); sidebar.show(); }); });结果：
添加ToolButton
ToolBar中添加ToolButton
config对象初始化完毕后，添加如下代码:
config.initAsync('', false, function () { var CustomButton = KQ.Control.OperatorToolButton.extend({ options: { type: 'custom-button', // 按钮类型 icon: 'icon iconfont icon-excel', // 配置图标 }, // 构造函数 initialize: function (map, parent) { KQ.Control.OperatorToolButton.prototype.initialize.call(this, map, parent); }, // 按钮点击后执行的函数 executeOperator: function(){ console.log('click custom button!!!'); }, }); // 添加ToolButton var toolBar = KQ.Control.Manager.getInstance().getControl('toolbar'); var customButton = new CustomButton(mapView._getMap(), toolBar.getContainer()); toolBar.addButton(customButton); });
RubberBandSelect
地图框选类，使得地图进入、退出框选模式
参考： RubberBandSelect
地图框选类的使用
config对象初始化完毕后，添加如下代码:
config.initAsync('', false, function () { var maskButtons = []; var instance = KQ.Control.RubberBandSelect.getInstance(mapView._getMap()); // 点击按钮进入框选模式 var button = new KQ.Control.MapButton('fa-copy fa-lg', function (){ instance.bindEvent(); }); // 结束框选退出框选模式 instance.on('boundend', function (bounds) { instance.removeEvent(); }, instance); // 地图上添加按钮 maskButtons.unshift(button); var bar = new KQ.Control.MapButtonBar(maskButtons, { position: 'topleft' }); bar.addToMapView(mapView); });
UI控件
AutoComplete
输入提示框控件
参考： AutoComplete
输入提示框的基本用法
在html文件中添加如下代码：
<input id="autocomplete" />在js文件中添加如下代码：
var autoComplete = new KQ.ui.AutoComplete('autocomplete', {}); var data = [ "America", "Australia", "China", "France", "Germany", "Greece", "Iceland", "Japan", "Korea", "Netherlands", "Poland", "Russia", "Switzerland", "England", ]; autoComplete.setDataSource(data);
结果：
Button
UI按钮控件
参考： Button
添加按钮
在Html中添加代码：
<button id="button" type="button">My Button</button>在JS文件中添加代码：
var button = new KQ.ui.Button('button', {}); button.enable(false);
结果：
Chart
统计图控件
参考： Chart
饼状图的基本用法
在html文件中添加如下代码：
<div id="chart" style="width: 600px; height: 500px;"></div>在js文件中添加如下代码：
var data = [{ categoryField: "Asia", value: 30.8, color: "#9de219" },{ categoryField: "Europe", value: 21.1, color: "#90cc38" },{ categoryField: "Latin America", value: 16.3, color: "#068c35" },{ categoryField: "Africa", value: 17.6, color: "#006634" },{ categoryField: "Middle East", value: 9.2, color: "#004d38" },{ categoryField: "North America", value: 4.6, color: "#033939" }]; var chart = new KQ.ui.Chart('chart', { dataSource: { data: data, }, title: { position: "top", text: "Share of Internet Population Growth", }, legend: { visible: true, position: "left", }, series: [{ type: "pie", // 饼状图 field: "value", categoryField: "categoryField", labels: { visible: true, background: "transparent", template: "#= category #: \n #= value#%", } }], tooltip: { visible: true, template: "#= category #-#= value #%", }, });
结果：
柱状图的基本用法（水平方向）
在html文件中添加如下代码：
<div id="chart" style="width: 600px; height: 500px;"></div>在js文件中添加如下代码：
var data = [{ categoryField: "Asia", value: 30.8, color: "#9de219" },{ categoryField: "Europe", value: 21.1, color: "#90cc38" },{ categoryField: "Latin America", value: 16.3, color: "#068c35" },{ categoryField: "Africa", value: 17.6, color: "#006634" },{ categoryField: "Middle East", value: 9.2, color: "#004d38" },{ categoryField: "North America", value: 4.6, color: "#033939" }]; var chart = new KQ.ui.Chart('chart', { dataSource: { data: data, }, title: { position: "top", text: "Share of Internet Population Growth", }, legend: { visible: true, position: "left", }, series: [{ type: "bar", // 柱状图 (水平方向) field: "value", categoryField: "categoryField", }], });
结果：
柱状图的基本用法（垂直方向）
在html文件中添加如下代码：
<div id="chart" style="width: 600px; height: 500px;"></div>在js文件中添加如下代码：
var data = [{ categoryField: "Asia", value: 30.8, color: "#9de219" },{ categoryField: "Europe", value: 21.1, color: "#90cc38" },{ categoryField: "Latin America", value: 16.3, color: "#068c35" },{ categoryField: "Africa", value: 17.6, color: "#006634" },{ categoryField: "Middle East", value: 9.2, color: "#004d38" },{ categoryField: "North America", value: 4.6, color: "#033939" }]; var chart = new KQ.ui.Chart('chart', { dataSource: { data: data, }, title: { position: "top", text: "Share of Internet Population Growth", }, legend: { visible: true, position: "left", }, series: [{ // type: "bar", // 不设置type 为垂直方向柱状图 field: "value", categoryField: "categoryField", }], });
结果：
显示额外的字段
在html文件中添加如下代码：
<div id="chart" style="width: 600px; height: 500px;"></div>在js文件中添加如下代码：
var data = [{ categoryField: "Asia", value: 100, ratio: "50%", color: "#56a36c", },{ categoryField: "Europe", value: 100, ratio: "50%", color: "#2e68aa", }]; var chart = new KQ.ui.Chart('chart', { dataSource: { data: data, }, title: { position: "top", text: "Share of Internet Population Growth", }, legend: { visible: true, position: "left", }, series: [{ type: "pie", // 饼状图 field: "value", categoryField: "categoryField", labels: { visible: true, background: "transparent", template: "#= category #: \n value: #= data.dataItem.value ## ratio: #= data.dataItem.ratio #", } }], });
结果：
Checkbox
复选框控件
参考： Checkbox
添加复选框
在html文件中添加如下代码：
<div id="checkbox"></div>在js文件中添加如下代码：
var checkbox = new KQ.ui.Checkbox('checkbox', {label: 'this is a checkbox'});
结果：
设置选中、不选中状态
在html文件中添加如下代码：
<div id="checkbox1"></div> <div id="checkbox2"></div>在js文件中添加如下代码：
var checkbox1 = new KQ.ui.Checkbox('checkbox1', {label: 'the status is checked'}); var checkbox2 = new KQ.ui.Checkbox('checkbox2', {label: 'the status is unchecked'}); checkbox1.checked(true); checkbox2.checked(false);
结果：
设置可用、不可用状态
在html文件中添加如下代码：
<div id="checkbox1"></div> <div id="checkbox2"></div>在js文件中添加如下代码：
var checkbox1 = new KQ.ui.Checkbox('checkbox1', {label: 'the status is enabled'}); var checkbox2 = new KQ.ui.Checkbox('checkbox2', {label: 'the status is disabled'}); checkbox1.enable(true); checkbox2.enable(false);
结果：
DropdownList
添加下拉菜单组件
参考: dropdownlist
添加下拉菜单
在html文件中添加代码:
<input id="dropdownlist" />在js文件中添加代码:
var dropdownlist = new KQ.ui.DropdownList('dropdownlist', {}); dropdownlist.setDataSource(['A', 'B', 'C']);
结果:
Grid
网格控件
参考： Grid
添加网格控件
在html文件中添加如下代码：
<div id="grid"></div>在js文件中添加如下代码：
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], });
结果：
表头样式设置
在html文件中添加如下代码：
<div id="grid"></div>在js文件中添加如下代码：
var grid = new KQ.ui.Grid('grid', { columns: [ { field: "name", title: "The Name", attributes: { "class": "name-cell", style: "text-align: left", }, headerAttributes: { "class": "name-header", style: "text-align: left", }, }, { field: "age", title: "The Age", width: 100, attributes: { "class": "name-cell", style: "text-align: center", }, headerAttributes: { "class": "name-header", style: "text-align: center", }, }, { field: "sex", title: "The Sex", attributes: { "class": "name-cell", style: "text-align: right", }, headerAttributes: { "class": "name-header", style: "text-align: right", }, }, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], });
结果：
高度和滚动条设置
在html文件中添加如下代码：
<div id="grid"></div>在js文件中添加如下代码：
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], height: 80, scrollable: true, });
结果：
选择属性设置
在html文件中添加如下代码：
<div id="grid"></div>在js文件中添加如下代码：
var grid = new KQ.ui.TreeList('grid', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: true, });
结果：
列宽设置
在html文件中添加如下代码：
<div id="grid"></div>在js文件中添加如下代码：
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name", width: 200}, {field: "age", title: "The Age", width: 200}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], });
结果：
分页属性设置
在html文件中添加如下代码：
<div id="grid"></div>在js文件中添加如下代码：
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name", width: 200}, {field: "age", title: "The Age", width: 200}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], pageable: { pageSize: 2, pageSizes: [1, 2, 4, "all"], refresh: true, }, });
结果：
提示信息设置
在html文件中添加如下代码：
<div id="grid"></div>在js文件中添加如下代码：
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name", width: 200}, {field: "age", title: "The Age", width: 200}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], pageable: { pageSize: 2, messages: { previous: "前一页", next: "后一页", }, }, });
结果：
选中和清除选中项
在html文件中添加如下代码：
<div id="grid"></div>在js文件中添加如下代码：
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name", width: 200}, {field: "age", title: "The Age", width: 200}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: "multiple, row", }); // select the first table row grid.select("tr:eq(0)"); grid.clearSelection();
获取item中的数据
在html文件中添加如下代码：
<div id="grid"></div>在js文件中添加如下代码：
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name", width: 200}, {field: "age", title: "The Age", width: 200}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: "multiple, row", }); var data = grid.dataItem("tbody>tr:eq(1)"); console.log("name: " + data.name + " " + "age: " + data.age + " " + "sex: " + data.sex); // displays "name: John Doe age: 19 sex: Male"
change事件
在html文件中添加如下代码：
<div id="grid"></div>在js文件中添加如下代码：
var grid = new KQ.ui.Grid('grid', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: "multiple, row", change: function(e) { var selectedRows = this.select(); console.log(selectedRows.length); var selectedDataItems = [] for (var i = 0; i < selectedRows.length; i++) { var dataItem = this.dataItem(selectedRows[i]); selectedDataItems.push(dataItem); // selectedDataItems中包含了所有的选中项 } }, });
ListView
列表展示框
参考： ListView
列表展示框的基本用法
在html文件中添加如下代码：
<div id="listView"></div>在js文件中添加如下代码：
var listView = new KQ.ui.ListView('listView', {}); listView.setDataSource([{name: '武汉'}, {name: '南京'}, {name: '上海'}, {name: '杭州'}, {name: '广州'}]); listView.selectFirstItem(); // Selects first list view item var select_item = listView.dataItem(listView.select()); // Get select item var select_item_name = select_item.name; console.log(select_item_name);
结果：
MaskedTextBox
文本输入框控件
参考： MaskedTextBox
文本输入框的基本用法
在html文件中添加如下代码：
<input id="maskedtextbox" />在js文件中添加如下代码：
var maskedtextbox = new KQ.ui.MaskedTextBox('maskedtextbox', {}); maskedtextbox.value("Enter value...");
结果：
PanelBar
面板栏控件
参考： PanelBar
面板栏控件的基本用法
在css文件中添加如下代码：
#panelbar{ margin: 10px; width: 300px; }在html文件中添加如下代码：
<div id="panelbar"></div>在js文件中添加如下代码：
var panelbar = new KQ.ui.PanelBar('panelbar', { dataSource: [ { text: "Baseball", imageUrl: "./icons/baseball.png", items: [ {text: "Top News", imageUrl: "./icons/star.png"}, {text: "Photo Galleries", imageUrl: "./icons/photo.png"}, {text: "Videos Records", imageUrl: "./icons/video.png"}, {text: "Radio Records", imageUrl: "./icons/speaker.png"} ] }, { text: "Golf", imageUrl: "./icons/golf.png", items: [ {text: "Top News", imageUrl: "./icons/star.png"}, {text: "Photo Galleries", imageUrl: "./icons/photo.png"}, {text: "Videos Records", imageUrl: "./icons/video.png"}, {text: "Radio Records", imageUrl: "./icons/speaker.png"} ] }, { text: "Swimming", imageUrl: "./icons/swimming.png", items: [ {text: "Top News", imageUrl: "./icons/star.png"}, {text: "Photo Galleries", imageUrl: "./icons/photo.png"} ] }, { text: "Snowboarding", imageUrl: "./icons/snowboarding.png", items: [ {text: "Photo Galleries", imageUrl: "./icons/photo.png"}, {text: "Videos Records", imageUrl: "./icons/video.png"} ] } ], });
结果：
模板的使用
在css文件中添加如下代码：
#panelbar{ margin: 10px; width: 300px; }在html文件中添加如下代码：
<div id="panelbar"></div>在js文件中添加如下代码：
var panelbar = new KQ.ui.PanelBar('panelbar', { template: "#= item.text ## (#= item.inStock #)", dataSource: [ { text: "foo", inStock: 7, items: [ { text: "bar", inStock: 2 }, { text: "baz", inStock: 5 } ] } ] });
结果：
select事件
在html文件中添加如下代码：
<div id="panelbar"></div>在js文件中添加如下代码：
var panelbar = new KQ.ui.PanelBar('panelbar', { template: "#= item.text ## (#= item.inStock #)", dataSource: [ { text: "foo", inStock: 7, items: [ { text: "bar", inStock: 2 }, { text: "baz", inStock: 5 } ],} ], select: function(e){ var dataItem = panelbar.dataItem(e.item); // 输出: item info: (text: bar, inStock: 2) console.log('item info: ' + '(text: '+ dataItem.text + ', inStock: ' + dataItem.inStock + ')'); }, });
RadioButton
单选按钮控件
查看： RadioButton
添加单选按钮
在html文件中添加如下代码：
<div id="radiobutton"></div>在js文件中添加如下代码：
var radiobutton = new KQ.ui.RadioButton('radiobutton', {label: 'this is a radiobutton'});
结果：
设置选中、不选中状态
在html文件中添加如下代码：
<div id="radiobutton1"></div> <div id="radiobutton2"></div>在js文件中添加如下代码：
var radiobutton1 = new KQ.ui.RadioButton('radiobutton1', {label: 'the status is checked'}); var radiobutton2 = new KQ.ui.RadioButton('radiobutton2', {label: 'the status is unchecked'}); radiobutton1.checked(true); radiobutton2.checked(false);
结果：
设置可用、不可用状态
在js文件中添加如下代码：
<div id="radiobutton1"></div> <div id="radiobutton2"></div>在js文件中添加如下代码：
var radiobutton1 = new KQ.ui.RadioButton('radiobutton1', {label: 'the status is enabled'}); var radiobutton2 = new KQ.ui.RadioButton('radiobutton2', {label: 'the status is disabled'}); radiobutton1.enable(true); radiobutton2.enable(false);
结果：
TabStrip
标签页控件
参考： TabStrip
标签页控件的基本用法
在html文件中添加如下代码：
<div id="tabstrip"> <ul> <li class="k-state-active"> Paris </li> <li> New York </li> <li> London </li> <li> Moscow </li> </ul> <div> <span class="rainy"> </span> <div class="weather"> <h2>17<span>ºC</span></h2> <p>Rainy weather in Paris.</p> </div> </div> <div> <span class="sunny"> </span> <div class="weather"> <h2>29<span>ºC</span></h2> <p>Sunny weather in New York.</p> </div> </div> <div> <span class="sunny"> </span> <div class="weather"> <h2>21<span>ºC</span></h2> <p>Sunny weather in London.</p> </div> </div> <div> <span class="cloudy"> </span> <div class="weather"> <h2>16<span>ºC</span></h2> <p>Cloudy weather in Moscow.</p> </div> </div> </div>在css文件中添加如下代码：
.sunny, .cloudy, .rainy { display: block; margin: 30px auto 10px; width: 128px; height: 128px; background: url('weather.png') transparent no-repeat 0 0; } .cloudy{ background-position: -128px 0; } .rainy{ background-position: -256px 0; } .weather { margin: 0 auto 30px; text-align: center; } #tabstrip h2 { font-weight: lighter; font-size: 5em; line-height: 1; padding: 0 0 0 30px; margin: 0; } #tabstrip h2 span { background: none; padding-left: 5px; font-size: .3em; vertical-align: top; } #tabstrip p { margin: 0; padding: 0; }在js文件中添加如下代码：
var tabstrip = new KQ.ui.TabStrip('tabstrip', {});
结果：
标签页标签中加入图片
在html文件中添加如下代码：
<div id="tabstrip"></div>在js文件中添加如下代码：
var tabstrip = new KQ.ui.TabStrip('tabstrip', { dataTextField: "text", dataImageUrlField: "imageUrl", dataContentField: "content", dataSource: [ { text: "Baseball", imageUrl: "baseball.png", content: "Baseball is a bat-and-ball sport played between two teams of nine players each. The aim is to score runs by hitting a thrown ball with a bat and touching a series of four bases arranged at the corners of a ninety-foot diamond. Players on the batting team take turns hitting against the pitcher of the fielding team, which tries to stop them from scoring runs by getting hitters out in any of several ways. A player on the batting team can stop at any of the bases and advance via a teammate's hit or other means. The teams switch between batting and fielding whenever the fielding team records three outs. One turn at bat for each team constitutes an inning and nine innings make up a professional game. The team with the most runs at the end of the game wins." }, { text: "Golf", imageUrl: "golf.png", content: "Golf is a precision club and ball sport, in which competing players (or golfers) use many types of clubs to hit balls into a series of holes on a golf course using the fewest number of strokes. It is one of the few ball games that does not require a standardized playing area. Instead, the game is played on golf courses, each of which features a unique design, although courses typically consist of either nine or 18 holes. Golf is defined, in the rules of golf, as playing a ball with a club from the teeing ground into the hole by a stroke or successive strokes in accordance with the Rules." }, { text: "Swimming", imageUrl: "swimming.png", content: "Swimming has been recorded since prehistoric times; the earliest recording of swimming dates back to Stone Age paintings from around 7,000 years ago. Written references date from 2000 BC. Some of the earliest references to swimming include the Gilgamesh, the Iliad, the Odyssey, the Bible, Beowulf, and other sagas. In 1578, Nikolaus Wynmann, a German professor of languages, wrote the first swimming book, The Swimmer or A Dialogue on the Art of Swimming (Der Schwimmer oder ein Zwiegespräch über die Schwimmkunst). Competitive swimming in Europe started around 1800, mostly using breaststroke." } ] }); tabstrip.select(0);
结果：
TextArea
添加文本框组件
参考: TextArea
添加文本框
在html文件中添加代码:
<textarea id="myid">default-content</textarea>在js文件中添加代码:
var textarea = new KQ.ui.TextArea('myid'); textarea.value("my content"); //change the contont to "my content" console.log(textarea.value()); //print "my content"
结果:
TreeList
树列表控件
参考： TreeList
添加树列表控件
在html文件中添加如下代码：
<div id="treelist"></div>在js文件中添加如下代码：
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], });
结果：
设置表头样式
在html文件中添加如下代码：
<div id="treelist"></div>在js文件中添加如下代码：
var treelist = new KQ.ui.TreeList('treelist', { columns: [ { field: "name", title: "The Name", attributes: { "class": "name-cell", style: "text-align: left", }, headerAttributes: { "class": "name-header", style: "text-align: left", }, }, { field: "age", title: "The Age", width: 100, attributes: { "class": "name-cell", style: "text-align: center", }, headerAttributes: { "class": "name-header", style: "text-align: center", }, }, { field: "sex", title: "The Sex", attributes: { "class": "name-cell", style: "text-align: right", }, headerAttributes: { "class": "name-header", style: "text-align: right", }, }, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], });
结果：
设置高度和滚动条
在html文件中添加如下代码：
<div id="treelist"></div>在js文件中添加如下代码：
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], height: 80, scrollable: true, });
结果：
选择属性
在html文件中添加如下代码：
<div id="treelist"></div>在js文件中添加如下代码：
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age", width: 100}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: true, });
结果：
展开属性
在html文件中添加如下代码：
<div id="treelist"></div>在js文件中添加如下代码：
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name", expandable: true}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"}, {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"}, {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"}, {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"}, ], });
结果：
选中行或列
在html文件中添加如下代码：
<div id="treelist"></div>在js文件中添加如下代码：
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: "cell", }); treelist.select($("#treelist td:eq(0)"));
结果：
展开行
在html文件中添加如下代码：
<div id="treelist"></div>在js文件中添加如下代码：
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name", expandable: true}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"}, {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"}, {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"}, {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"}, ], }); treelist.expand($("#treelist tbody>tr:eq(0)"));
结果：
得到项的数据
在html文件中添加如下代码：
<div id="treelist"></div>在js文件中添加如下代码：
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name", expandable: true}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"}, {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"}, {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"}, {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"}, ], }); var data = treelist.dataItem("tbody>tr:eq(1)"); console.log("name: " + data.name + " " + "age: " + data.age + " " + "sex: " + data.sex); // displays "name: John Doe age: 19 sex: Male"
change事件
在html文件中添加如下代码：
<div id="treelist"></div>在js文件中添加如下代码：
var treelist = new KQ.ui.TreeList('treelist', { columns: [ {field: "name", title: "The Name"}, {field: "age", title: "The Age"}, {field: "sex", title: "The Sex"}, ], dataSource: [ {name: "Jane Doe", age: 18, sex: "Male"}, {name: "John Doe", age: 19, sex: "Male"}, {name: "Eric Brown", age: 20, sex: "Female"}, {name: "George Doe", age: 21, sex: "Female"}, ], selectable: "multiple, row", change: function(e) { var selectedRows = this.select(); console.log(selectedRows.length); var selectedDataItems = [] for (var i = 0; i < selectedRows.length; i++) { var dataItem = this.dataItem(selectedRows[i]); selectedDataItems.push(dataItem); // selectedDataItems中包含了所有选中项 } }, });
TreeView
树视图控件
参考： TreeView
添加树视图控件
在html文件中添加如下代码：
<div id="treeview"></div>在js文件中添加如下代码：
// 节点包含如下属性： // key 节点id (树视图中必须唯一) // title 节点的显示名称 // data 节点的附加数据 // children 子节点数组 // expanded 是否展开 // folder 是否为文件夹 // selected 是否选中 // tooltip 提示信息 var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"}, {key: "id2", title: "item2"}, {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1"}, {key: "id3.1.2", title: "Sub-item 3.1.2"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3"}, ]}, ]; var treeview = new KQ.ui.TreeView('treeview', { source: dataSource});
结果：
是否显示复选框
在html文件中添加如下代码：
<div id="treeview"></div>在js文件中添加如下代码：
var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"}, {key: "id2", title: "item2", selected: true}, {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1"}, {key: "id3.1.2", title: "Sub-item 3.1.2"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3"}, ]}, ]; var treeview = new KQ.ui.TreeView('treeview', { source: dataSource, checkbox: true});
结果：
定制图标
在html文件中添加如下代码：
<div id="treeview"></div>在js文件中添加如下代码：
var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"}, {key: "id2", title: "item2", selected: true, icon: "point.png"}, {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"}, {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"}, ]}, ]; var treeview = new KQ.ui.TreeView('treeview', { source: dataSource, imagePath: "../../images/"});
结果：
select事件
在html文件中添加如下代码：
<div id="treeview"></div>在js文件中添加如下代码：
var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"}, {key: "id2", title: "item2", selected: true, icon: "point.png"}, { key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"}, {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"}, ] }, ]; var treeview = new KQ.ui.TreeView('treeview', {source: dataSource, imagePath: "../../images/"}); treeview.on('click', function (paramers) { var data = paramers.data; var node = data.node; // key:id1, title:item1 with key and tooltip, tooltip:Look, a tool tip!, icon:line.png console.log("key:" + node.key + ", title:" + node.title + ", tooltip:" + node.tooltip + ", icon:" + node.icon); }, treeview);
遍历节点
在html文件中添加如下代码：
<div id="treeview"></div>在js文件中添加如下代码：
var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"}, {key: "id2", title: "item2", selected: true, icon: "point.png"}, { key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"}, {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"}, ] }, ]; var treeview = new KQ.ui.TreeView('treeview', {source: dataSource, imagePath: "../../images/"}); var keys = []; treeview.visit(function (node) { keys.push(node.key); }); // id1, id2, id3, id3.1, id3.1.1, id3.1.2, id3.2, id3.2.1, id3.2.2, id3.3 console.log(keys.join(", "));
延迟加载
在html文件中添加如下代码：
<div id="treeview"></div>在js文件中添加如下代码：
// 注意: 这里lazy设置为true,才会延迟加载 var source = [ {title: "item1", key: "item1", folder: true, lazy: true}, {title: "item2", key: "item2", folder: true, lazy: true}, {title: "item3", key: "item3", folder: true, lazy: true}, ]; var treeview = new KQ.ui.TreeView('treeview', {source: source}); // node代表当前点击的节点, 返回值是子项的数组(该数组也可以通过ajax远程得到) treeview.subItemsLazyLoadFn(function (node) { if (node.key === "item1"){ return [{title: "sub_item1_1"}, {title: "sub_item1_2"}]; }else if (node.key === "item2"){ return [{title: "sub_item2_1"}, {title: "sub_item2_2"}]; }else if (node.key === "item3"){ return [{title: "sub_item3_1"}, {title: "sub_item3_2"}, {title: "sub_item3_3"}]; } });结果：
TreeViewNode的使用
在html文件中添加如下代码：
<div id="treeview"></div>在js文件中添加如下代码：
var dataSource = [ {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"}, {key: "id2", title: "item2"}, { key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [ { key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [ {key: "id3.1.1", title: "Sub-item 3.1.1"}, {key: "id3.1.2", title: "Sub-item 3.1.2"}, ], }, { key: "id3.2", title: "Sub-item 3.2", folder: true, children: [ {key: "id3.2.1", title: "Sub-item 3.2.1"}, {key: "id3.2.2", title: "Sub-item 3.2.2"}, ], }, {key: "id3.3", title: "Sub-item 3.3"}, ] }, ]; var treeview = new KQ.ui.TreeView("treeview", {source: dataSource, checkbox: true}); var treeViewNode = treeview.getNodeByKey('id3.1'); console.log(treeViewNode.isExpanded()); // true console.log(treeViewNode.isFolder()); // true console.log(treeViewNode.isSelected()); // false treeViewNode.setSelected(true); console.log(treeViewNode.isSelected()); // true
Window
在屏幕上显示一个可移动，可缩放的窗口。它可以有一个标题和一个关闭按钮。
参考： Window
添加窗口
在新窗口中显示定制内容：
- 找到文件夹并打开它：'kqwebmap/window'。
添加新文件：'example.html'。
<div id="example"> <div id="window"> <div class="armchair"> <img src="http://lorempixel.com/199/194" alt="Artek Alvar Aalto - Armchair 402"/> Artek Alvar Aalto - Armchair 402 </div> <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p> <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p> <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p> <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p> </div> <span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to open the window.</span> <div class="responsive-message"></div> <button id="button" type="button" onclick="onExampleButtonClick()">Button</button> <script> function onExampleButtonClick () { console.log('onExampleButtonClick!'); } </script> <style> #undo { text-align: center; position: absolute; white-space: nowrap; padding: 1em; cursor: pointer; } .armchair { float: left; margin: 30px 30px 120px 30px; text-align: center; } .armchair img { display: block; margin-bottom: 10px; width: 199px; height: 194px; } @media screen and (max-width: 500px) { div.k-window { display: none !important; } } </style> </div>在JS文件中添加代码：
KQ.Common.CommonTools.loadUiLib(function () { var win = new KQ.Control.Window('example', { parentID: 'map', position: { left: '100px', top: '100px', }, }); win.initAsync(); win.open(); });
结果：
配置文件
节点属性说明
config.xml
<?xml version="1.0"?>
<config>
<theme name="default-red"></theme>
<map id='map' init_extent="12064306.56825543 2655921.404514898 12119152.13662617 2729344.37442568" full_extent="12064306.56825543 2655921.404514898 12119152.13662617 2729344.37442568" min_scale_id='3' enable_opacity="0" scale_offset="0">
<scales>
<scale id="0">0.000000125</scale>
<scale id="1">0.00000025</scale>
<scale id="2">0.0000005</scale>
<scale id="3">0.000001</scale>
<scale id="4">0.000002</scale>
<scale id="5">0.000004</scale>
<scale id="6">0.000008</scale>
<scale id="7">0.000015625</scale>
<scale id="8">0.00003125</scale>
<scale id="9">0.0000625</scale>
<scale id="10">0.000125</scale>
<scale id="11">0.00025</scale>
<scale id="12">0.0005</scale>
</scales>
<projection>
<prj>PROJCS["WGS_1984_Web_Mercator",GEOGCS["GCS_WGS_1984_Major_Auxiliary_Sphere",DATUM["WGS_1984_Major_Auxiliary_Sphere",SPHEROID["WGS_1984_Major_Auxiliary_Sphere",6378137.0,0.0]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Mercator_1SP"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",0.0],PARAMETER["latitude_of_origin",0.0],UNIT["Meter",1.0]]</prj>
<proj4>+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +over +no_defs</proj4>
<origin x="-20037508.3427892" y="20037508.3427892"></origin>
<bound>-20037508.3427892 -20037508.3427892 20037508.3427892 20037508.3427892</bound>
</projection>
</map>
<controls>
<control type="toolbar" position="topright">
<subcontrol type="zoom_in"></subcontrol>
<subcontrol type="zoom_out"></subcontrol>
<subcontrol type="roaming"></subcontrol>
<subcontrol type="forward-map"></subcontrol>
<subcontrol type="backward-map"></subcontrol>
<subcontrol type="full-map"></subcontrol>
<subcontrol type="drawing"></subcontrol>
<subcontrol type="info-query"></subcontrol>
<subcontrol type="network-analysis" is_optimal_path="1" is_traveling_salesman_problem="1" is_trace_back="1"/>
<subcontrol type="raster-image-analysis"/>
</control>
<control type="sidebar" position="left">
<subcontrol type="tree" id="controlTree"></subcontrol>
<subcontrol type="advanced" id="controlAdvancedQuery"></subcontrol>
<subcontrol type="overlay" id="controlOverlayAnalysis"></subcontrol>
<subcontrol type="setting" id="controlSetting"></subcontrol>
<subcontrol type="featureImport" id="controlFeatureImport" is_delete="1" is_add="1" is_update="1"></subcontrol>
<subcontrol type="bookmark" id="controlBookmark" ></subcontrol>
</control>
<control type="simplesidebar" position="topleft"></control>
<control type="zoom" position="topright" fullscreen="1"></control>
<control type="attribution" label="Kanq" tooltip="苍穹数码" url="http://www.kanq.com.cn" img="../../images/logo.png"></control>
<control type="coordinates" position="bottomleft" decimals="2" label_x="Lng" label_y="Lat"></control>
<control type="draw" position="topleft" import_export="1"></control>
<control type="styleeditor" position="topleft"></control>
<control type="mini" position="bottomright" basemap="osm" basemaptype="vector"></control>
<control type="basemap" position="topright" visible="1">
<subcontrol name="天地图矢量" maptype="tianditu" subtype="vector" is_selected="1"></subcontrol>
<subcontrol name="天地图影像" maptype="tianditu" subtype="image"></subcontrol>
<subcontrol name="天地图地形" maptype="tianditu" subtype="terrain"></subcontrol>
<subcontrol name="高德矢量" maptype="gaode" subtype="vector"></subcontrol>
<subcontrol name="高德影像" maptype="gaode" subtype="image"></subcontrol>
<subcontrol name="谷歌矢量" maptype="google" subtype="vector"></subcontrol>
<subcontrol name="谷歌影像" maptype="google" subtype="image"></subcontrol>
<subcontrol name="智图常规" maptype="geoq" subtype="vector"></subcontrol>
<subcontrol name="智图蓝色" maptype="geoq" subtype="blue"></subcontrol>
<subcontrol name="智图灰色" maptype="geoq" subtype="gray"></subcontrol>
<subcontrol name="智图暖色" maptype="geoq" subtype="warm"></subcontrol>
<subcontrol name="智图冷色" maptype="geoq" subtype="cold"></subcontrol>
<subcontrol name="OSM矢量" maptype="osm" subtype="vector"></subcontrol>
</control>
<control type="compare" position="topright" max_selected_number="18" checked_layers="source0@@144,source0@@152,source0@@159"></control>
<control type="sidebyside" position="topright"></control>
</controls>
<tree label="图层" select_max_count="12">
<sources>
<source name="source0" url="http://172.16.1.157:8699/KQGis/rest/services/chanpin" type="kqmapping"></source>
</sources>
<layers>
<layer is_group="1" label="基础数据层">
<layer id="1" label="贫困户" src_name="source0" opacity="1" icon="compound_layer" is_dynamic="0" type="sl" is_history="1"></layer>
<layer id="4" label="zxdc" src_name="source0" opacity="1" icon="point" is_dynamic="0" type="sl" is_history="1"></layer>
</layer>
<layer id="5" label="xxzq" src_name="source0" opacity="1" icon="polygon" is_dynamic="0" type="sl"></layer>
<layer id="1" label="贫困户" src_name="source0" opacity="1" icon="compound_layer" is_dynamic="0" type="sl" is_mini="1" is_use="0"></layer>
<layer id="1" label="贫困户" src_name="source0" opacity="1" icon="compound_layer" is_dynamic="0" type="sl" is_mask="1" is_use="0"></layer>
</layers>
</tree>
<geometrysource url="http://172.16.1.157:8699/KQGis/rest/services/geometryserver"/>
</config>
<!--
基础配置
config：主节点
custom：如果在主节点设置了custom="1"，则在启动服务时，不会自动刷新服务设置（主要是服务启动时允许自定义配置）
building：房屋配置
min_scale_value：最小比例尺值
height_rate：房屋高度系数
theme：主题信息
name：主题名字，目前的可选项如下，以后可能修改：
default-blue
default-red
black-black
blueopal-blue
bootstrap-blue
fiori-blue
flat-black
highcontrast-purple
material-blue
materialblack-black
metro-green
metroblack-black
moonlight-black
nova-red
office365-blue
silver-blue
uniform-gray
map：配图信息
id：必须为map，此属性可以忽略
init_extent：地图初始范围（左下右上）
full_extent：地图全图范围。注意：如果不设置投影信息（没有投影信息的数据将会使用这个特性），将会根据fullExtent来自动判断地图单位，请务必保证范围的正确性
min_scale_id：地图使用的最小层级索引（索引表示scales数组里0开始的索引，区别于id）。假如为3，则表示地图无法缩放到第0，1，2级，这三级专供鹰眼使用。
enable_opacity：是否启用透明度设置功能，如果不启用效率会高一些。0 or 1
scales：比例尺信息列表
scale：标准比例尺信息
id：比例尺id，如果服务配置的是google模式的比例尺，注意这里的比例尺id将可能不是以0开始，需要严格和服务对应
value：标准比例尺值
min_scale_id：zoom时，最小的比例尺，需要隐藏最小的比例尺时使用
projection：投影信息
prj：prj格式的字符串
proj4：proj4格式的字符串，在map文件中可以获取到（新版本才有）
origin：原点信息，墨卡托为[-20037508.3427892 20037508.3427892]，经纬度为[-180 90]
bound：范围信息，墨卡托为[-20037508.3427892 -20037508.3427892 20037508.3427892 20037508.3427892]，经纬度为[-180 -90 180 90]
controls：控件信息列表(<controls custom="1">:表示控件是自定义模式，此时所有的控件将不可见，自己用api进行调用)
control：控件信息
type：控件类型
position：位置（topleft topright bottomleft bottomright）
zoom：地图缩放按钮
zoom-fullscreen：仅仅在zoom控件中存在，1为添加全屏按钮，0为不添加
zoomslider：地图缩放条
coordinates：地图坐标控件
coordinates-decimals：精度
coordinates-label_x：x标签
coordinates-label_y：y标签
coordinates-is_project：是否投影到目标投影
coordinates-is_show_scale_index：是否显示比例尺索引
coordinates-label_scale：比例尺索引标签
tree：树控件
tree-height（width）：树控件宽高，单独使用树控件时才有效，树控件在slidbar中时无效
draw：绘图功能面板
draw-import_export：是否开启绘制控件的导入导出功能, 0 or 1
styleeditor：样式编辑控件
styleeditor-is_use_marker_icon：是否启用点图形的图标编辑
searchlight：探照灯控件
searchlight-light_size：探照灯直径，单位为像素
compare：地图比较器
max_selected_number: 图层树的最大选中数目
checked_layers: 默认选中的图层
compare-is_show_cursor：是否显示比较窗口内的光标
compare-cursor_opacity：比较窗口的光标透明度
compare-cursor_color：比较窗口的光标颜色
compare-cursor_radius：比较窗口的光标半径
is_enable_2win：启用2窗口 “0” or “1”
is_enable_3win：启用3窗口
is_enable_4win：启用4窗口
is_enable_5win：启用5窗口
is_enable_6win：启用6窗口
measure：地图测量器
measureseparate：地图测量器(长度与面积分开测量)
scale：比例尺控件
scale-fill：填充样式 false|'fill'|'hollow'|'line'
scale-doubleLine：是否显示双线 true|false
scale-showSubunits：是否显示子单位 true|false
scale-labelPlacement：标签位置 'auto'|'top'|'bottom'
mini：迷你图，鹰眼图(普通图层参考layers配置的is_mini)
mini-basemap：可以给迷你图加上第三方服务的底图，可选：osm，gaode，tianditu，google，geoq。注意：地图必须是web墨卡托，google比例尺（从0级开始配）才可以。
mini-basemaptype：地图类型，可选：vector，image；天地图有terrain；osm无image；geoq有vector，blue，gray，warm，cold。
mini-minimized：1 or 0，是否一开始最小化。
basemap：地图底图。注意：地图必须是web墨卡托，google比例尺才可以。
basemap-visible：底图选择器是否可见，1表示可见。
basemap-selected：选中的底图类型。可选：osm，gaode，tianditu，google，geoq。
subcontrol：底图的图层
name：显示名称，可以是中文，如天地图
maptype：第三方服务的底图，可选：osm，gaode，tianditu，google，geoq。注意：地图必须是web墨卡托，google比例尺才可以。
（baidu也支持，但需要非常特殊的比例尺和投影设置）
（maptype也支持自定义的：“custom-tms”，此时subtype为“url”，例如：<subcontrol name="自定义" maptype="custom-tms" subtype="http://localhost:9009/arctiler/google/services/custom-rect-71612/google/{z}/{x}/{y}.png"></subcontrol>）
subtype：地图类型，可选：vector，image；天地图有terrain；osm无image；geoq有vector，blue，gray，warm，cold。
is_selected：是否在开始时被选中，只能设置一个
key：有些地图需要key，例如天地图（默认key无法使用时需要自己申请）
attribution：版权控件
label：显示名
tooltip：鼠标悬浮时显示的文字
url：点击后跳转的链接
img：显示的图片
imgWidth：图片宽，默认24
imgHeight：图片高，默认36
input：输入框
icon：图标，默认为"search"，('check', 'custom', 'play', 'heart')
width：宽度，默认为"200px"
sidebar：滑动条控件（属于二次开发用的高级配置，此处标准版本可以固定下来，具体参考配置文件中）
position：left或right，影响滑出位置
sidebar-init_open_id：初始化时，将展开该id的tab页。如果不设置，将不会展开。
subcontrol：滑动条控件中的子控件
type：滑动条控件中添加的子控件类型 'tree','advanced','overlay','setting', 'featureImport', 'bookmark'
id：控件的id，必须和sidebar.html中的id一致
simplesidebar：简单滑动条控件（默认不在页面中显示，可以通过API调用）
position：left或right，影响滑出位置
toolbar：工具栏
subcontrol：工具栏中的子控件
type：工具栏中添加的子控件类型 'zoom_in','zoom_out','roaming','forward-map','backward-map','full-map','drawing','info-query'
子控件类型 'network-analysis' 表示网络分析, 属性 'is_optimal_path' 表示最佳路线分析,
属性 'is_traveling_salesman_problem' 表示旅行商分析,
属性 'is_trace_back' 表示追溯分析,
子控件类型 'raster-image-analysis' 表示栅格影像分析
sidebyside：卷帘
position：启用卷帘的按钮的位置（topleft topright bottomleft bottomright）
plot: 态势图
mainmenu: 主功能条（注意使用该功能条需要配置其他相关的功能，否则相关功能将无法正常使用）
advmenu：高级功能条（注意使用该功能条需要配置其他相关的功能，否则相关功能将无法正常使用）
tree：树控件配置
tree-label：树控件根节点显示的标题
tree-select_max_count：树控件最多选中的图层数量
sources：数据源信息
is_ipmapping：是否映射数据源（如果服务是内网，通过ip映射到外网，可能客户端无法访问内网，此时需要映射）
source:
name：数据源名称
url：数据源路径
type：数据源服务类型，kqmapping，wms，wmts，tms
scale_offset: WMS、WMTS服务，比例尺的偏移值，默认情况下为0(表示不进行偏移)
untiled: wms服务是单张形式还是瓦片形式 0 瓦片 1 单张 默认是单张的
tileWidth: 瓦片的宽度
tileHeight: 瓦片的高度
layers：图层信息
id：图层在map文件中对应的id
label：图层显示名称
src_name：数据源名称
opacity：透明度，0~1
icon：图标名称，point，line，polygon，compound_layer(复合图层)，annotation(注记图层)，image（影像图层）
is_dynamic：是否为动态图层
type：图层类型，sl(矢量)，yx(影像)
visible：1表示图层初始化时被选中，默认值为0
is_mini：是否该图层用于鹰眼图。1表示是，默认是否 （注意该选项目前只能用于layers下第一层的layer中）
is_mask：是否该图层用于遮罩。1表示是，默认是否
is_use：是否在树中显示并启用该图层。一般是mini的就不启用该图层
is_history：是否该图层用于历史轨迹。1表示是，默认是否
min_standard_scale：如果比例尺小于该比例尺则不显示该图层
layer_extent：图层范围
is_building：是否为房屋数据。1表示是，默认是否
map_src_name：地图显示时用的数据源名称。如果期望查询和显示用不同的数据源可以使用这个属性
如果需要设置图层文件夹，参考如下：
<layer is_group="1" label="复合图层0">
<layer id="2" label="hongshandltb" min_standard_scale="0.0002000000000000000095843472" layer_extent="35437548.3051047995686531066894531250 3327475.5478540598414838314056396484 35537288.4721029996871948242187500000 3378367.9904405982233583927154541016" src_name="image_vector" opacity="1" icon="polygon" is_dynamic="1" type="sl"></layer>
<layer id="3" label="洪山区影像" src_name="image_vector" opacity="1" icon="image" is_dynamic="1" type="yx"></layer>
</layer>
geometrysource：配置用于特殊服务的地址。（如：导入shape，导出shape等）也可以不指定，会默认取tree中的第一个服务来拼凑该地址。注意：如果配置的服务不是2.0的，将没有这个功能。
-->
advanced_search.xml
<?xml version="1.0"?>
<config>
<layers>
<layer id="1" label="贫困户" src_name="source0" query_id="3">
<list_fields>NAME,PAC,SHAPE</list_fields>
<list_fields_alias>NAME,PAC,SHAPE</list_fields_alias>
<fields>NAME,PAC,SHAPE</fields>
<fields_alias>NAME,PAC,SHAPE</fields_alias>
<chart_field></chart_field>
<summary_field></summary_field>
<expression></expression>
<server_type>kq</server_type>
</layer>
<layer id="4" label="zxdc" src_name="source0" query_id="4">
<list_fields>NAME,SHAPE</list_fields>
<list_fields_alias>NAME,SHAPE</list_fields_alias>
<fields>NAME,SHAPE</fields>
<fields_alias>NAME,SHAPE</fields_alias>
<chart_field></chart_field>
<summary_field></summary_field>
<expression></expression>
<server_type>kq</server_type>
</layer>
</layers>
</config>
<!--
高级查询
id：图层id，图层所在map文件中的id
query_id：查询时，真正查询的图层id。当图层为融合图层时才会与id不一致，一般情况下等于id。后台程序使用select * from $$id$$来表示查询对象。
reqcount: 请求返回的记录数
label：图层显示名称
src_name：图层的服务name，如：merc服务，它的具体配置信息在总配置文件里可查
list_fields：查询可选字段列表
list_fields_alias：查询可选字段别名
fields：返回表的字段名称
fields_alias：对应显示的中文名称，需与上面个数相同
summary_field：汇总字段名（RNFields中文中）
chart_field：饼图、柱图分类的字段（RNFields中文中）
expression：过滤条件
server_type：服务器类型
-->
info_query.xml
<?xml version="1.0"?>
<config query_mode="multi">
<layers>
<layer id="1" label="贫困户" query_id="3" src_name="source0" max_stdscale="0.001" min_stdscale="0.00000001">
<fields>NAME,PAC,SHAPE</fields>
<fields_alias>NAME,PAC,SHAPE</fields_alias>
<show_name>NAME</show_name>
<expression></expression>
</layer>
<layer id="4" label="zxdc" query_id="4" src_name="source0" max_stdscale="0.001" min_stdscale="0.00000001">
<fields>NAME,SHAPE</fields>
<fields_alias>NAME,SHAPE</fields_alias>
<show_name>NAME</show_name>
<expression></expression>
</layer>
</layers>
</config>
<!--
信息查询
query_mode（config结点） [single, multi] （设置图层树单选或多选）
id：图层id，图层所在map文件中的id（如果为融合的复合图层，则需要映射为叶子图层的id）
query_id：查询时，真正查询的图层id。当图层为融合图层时才会与id不一致，一般情况下等于id
reqcount: 请求返回的记录数
label：图层显示名称
src_name：图层的服务name，如：merc服务，它的具体配置信息在总配置文件里可查
max_stdscale：最大标准比例尺（map文件中存的最大最小比例尺）
min_stdscale：最小标准比例尺
fields：返回表的字段名称
fields_alias：对应显示的中文名称，需与上面个数相同
show_name：图层树上显示字
expression：过滤条件
-->
overlay_analysis.xml
<?xml version="1.0"?>
<config>
<layers>
<layer id="1" label="贫困户" src_name="source0" query_id="3">
<type></type>
<fields>NAME,PAC</fields>
<fields_alias>NAME,PAC</fields_alias>
<chart_field>PAC</chart_field>
<summary_field>重叠面积</summary_field>
<expression></expression>
</layer>
<layer id="4" label="zxdc" src_name="source0" query_id="4">
<type></type>
<fields>NAME</fields>
<fields_alias>NAME</fields_alias>
<chart_field>NAME</chart_field>
<summary_field>重叠面积</summary_field>
<expression></expression>
</layer>
<layer id="5" label="宗地" src_name="source0" query_id="5">
<type></type>
<fields>OBJECTID,BSM,YSDM,DJH,TXDZ,QLR,XZQDM</fields>
<fields_alias>OBJECTID,标识码,要素代码,地籍号,地址,权利人,行政区代码</fields_alias>
<chart_field>权利人</chart_field>
<summary_field>重叠面积</summary_field>
<expression></expression>
</layer>
</layers>
<display>
<group id="1" name="城镇地籍">
<layer id="1" src_name="source0"/>
<layer id="4" src_name="source0"/>
<layer id="5" src_name="source0" visible="1"/>
</group>
</display>
</config>
<!--
叠置分析
《layers》 用于查询图层信息，不用于树的显示
id：图层id，图层所在map文件中的id
query_id：查询时，真正查询的图层id。当图层为融合图层时才会与id不一致，一般情况下等于id
reqcount: 请求返回的记录数
label：图层显示名称
src_name：图层的服务name，如：merc服务，它的具体配置信息在总配置文件里可查
type：预留，用于指定不同的用途，不再使用id，id还是表示图层所在服务内的id（即map里显示的id）
fields：返回表的字段名称
fields_alias：对应显示的中文名称，需与上面个数相同
summary_field：汇总字段名（RNFields中文中）
chart_field：饼图、柱图分类的字段（RNFields中文中）
expression：过滤条件
flicker_color: 配置图层的闪烁颜色
《display》用于树的显示，信息得通过layers里的配置查询
group：图层集合
id：集合id，需要唯一
name：集合名称，允许重复
layer：图层
id：id，对应上面的layers
src_name：数据源名称，对应上面的layers
visible：1表示图层初始化时被选中，默认值为0
如何对融合图层的多个子图层进行叠置分析？ (属性查询、高级查询的配置方法一样)
<layer query_id="146" src_name="source0" id="145" label="线状地物">
<type/>
<fields>OBJECTID,XZBM,BSM,YSDM,JXLX,JXXZ,JXSM,BGRQ,SHAPE</fields>
<fields_alias>OBJECTID,XZBM,BSM,YSDM,JXLX,JXXZ,JXSM,BGRQ,SHAPE</fields_alias>
<chart_field>XZBM</chart_field>
<summary_field>OBJECTID</summary_field>
<expression/>
</layer>
<layer query_id="147" src_name="source0" id="145" label="地类图斑">
<type/>
<fields>OBJECTID,XZBM,BSM,YSDM,JXLX,JXXZ,JXSM,BGRQ,SHAPE</fields>
<fields_alias>OBJECTID,XZBM,BSM,YSDM,JXLX,JXXZ,JXSM,BGRQ,SHAPE</fields_alias>
<chart_field>XZBM</chart_field>
<summary_field>OBJECTID</summary_field>
<expression/>
</layer>
// 上面配置文件中id指的是融合图层的id， query_id指的是需要进行叠置分析的、融合图层的子图层的id
-->