Reference Source

基础功能

载入效果

当地图文件在载入时显示一个载入消息。该功能用于网速非常非常慢的场合。

设置方法

  1. 在html文件头部设置需要包含的css文件。
    <head>
<link href="../../dist/kqmaploading.min.css" rel="stylesheet" type="text/css">
</head>
  2. 在map的div中添加“loading”类。
    <div id="map" style="height: 100%;" class="loading">
</div>
  3. 在map的div中添加"Loading..."文本，并且加上“kqmaploadingtxt”类。
    <div id="map" style="height: 100%;" class="loading">
<div class="kqmaploadingtxt">Loading...</div>
</div>

result

导入导出

参考: setDrawOption

导出/导入Txt

可以设置draw选项来启用导出/导入txt功能。该设置必须在初始化mapview之前完成

  1. config对象初始化完毕后，设置draw选项：

    config.initAsync('', false, function () {
config.setDrawOption({
 dataFormatList: ['T'],
 importTxtFunction: function () {
   console.log('my importTxt!!!');

   config._resetDrawImportFileHtml();
 },
 exportTxtFunction: function () {
   console.log('my exportTxt!!!');
 },
});
});

  2. 如果正常，导出/导入工具条将会有“txt”模式。

  3. 当导出或导入按钮被点击时，将运行设置的函数。

result

导出/导入Excel

可以设置draw选项来启用导出/导入excel功能。

  1. config对象初始化完毕后，设置draw选项：

    config.initAsync('', false, function () {
config.setDrawOption({
 dataFormatList: ['E'],
 importExcelFunction: function () {
   console.log('my importExcel!!!');

   config._resetDrawImportFileHtml();
 },
 exportExcelFunction: function () {
   console.log('my exportExcel!!!');
 },
});
});
  2. 如果正常，导出/导入工具条将会有“excel”模式。
  3. 当导出或导入按钮被点击时，将运行设置的函数。

result

导出/导入Dwg,Dxf

可以设置draw选项来启用导出/导入Dwg,Dxf功能。

  1. config对象初始化完毕后，设置draw选项：

    config.initAsync('', false, function () {
config.setDrawOption({
 dataFormatList: ['D'],
 importExcelFunction: function () {
   console.log('my importDwgDxf!!!');

   config._resetDrawImportFileHtml();
 },
 exportExcelFunction: function () {
   console.log('my exportDwgDxf!!!');
 },
});
});
  2. 如果正常，导出/导入工具条将会有“dwg,dxf”模式。
  3. 当导出或导入按钮被点击时，将运行设置的函数。

result

导入后处理

可以设置draw选项来设置导入后处理函数。

  1. 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();
   });
 },
});
});
  2. 如果正常，当GeoJSON和Shape导入完成后将执行该函数。

使用截图

能够截取当前地图的画面，可以保留UI或移除UI进行截图。 截图支持KqMapping，WMTS，Marker，GeoJSON等。

加入截图控件

在配置文件中启用截图功能

<control position="topright" type="screenshot"/>

功能说明

点击截图按钮可以截图。 点击显示按钮可以控制是否在截图时显示UI，一共有两种模式：保留UI或移除UI。

效果图

result

使用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);

效果图：

result

自定义图标

给Web控件添加图标

添加图标

使用 font awesome

Font Awesome是一个矢量图标库，它可以深度定制图标尺寸，颜色，阴影等效果。

fontawesome

PS: 常规的方式也不排斥。例如也可以通过定制css和图片来添加图标。

例子

基础图标

可以通过指定一个CSS前缀“fa”和图标的名字来放置一个Font Awesome图标。

<i class="fa fa-camera-retro"></i> fa-camera-retro

fontawesome

大号图标

使用“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

fontawesome

自定义框选

参考: setRubberBandOption

回调函数

可以设置框选按钮的回调函数。该设置必须在初始化mapview之前完成

  1. 在config.xml配置文件中添加框选按钮控件：<subcontrol type="rubber-band"/>

  2. 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);
   }

结果：

result

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);
   }

结果：

sql-query

叠置分析

从服务器中进行叠置分析。

参考： 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);
     }

结果：

overlay-analysis

图例查询

从服务器中进行图例信息的查询。

参考： 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);
     }

结果：

legend-query

缓冲分析

从服务器中对给定的图形进行缓冲分析。

参考： 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);
 　  }

结果：

buffer-analysis

要素入库

从服务器中将给定的要素集导入到指定的图层中。

参考： 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);
      }

结果：

feature-import

要素更新

从服务器中将给定的要素更新到指定的图层中。

参考： 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);
      }

结果：

feature-update

要素删除

从服务器中删除指定的要素。

参考： 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);
      }

结果：

feature-delete

投影转换

一个投影转换类，将一个坐标点由一种投影转换到另一种投影

参考： ProjectionTransform

正向转换

正向转换，将坐标点由源投影转换到目标投影

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]);