Reference Source

Basic Function

Set Map Loading

Display a loading message when files are loading. This function is used for the network speed is very very slow.

How To Set

  1. Add css file in the head of html file. 
    <head>
<link href="../../dist/kqmaploading.min.css" rel="stylesheet" type="text/css">
</head>
  2. Add 'loading' class on map div.
    <div id="map" style="height: 100%;" class="loading">  
</div>
  3. Add loading text in the map div and add 'kqmaploadingtxt' class on it.
    <div id="map" style="height: 100%;" class="loading">
<div class="kqmaploadingtxt">Loading...</div>
</div>

result

Set Draw Option

See: setDrawOption

Export / Import Txt

You can set draw option to enable export / import txt function. The setting must be done before the initialization of mapview.

  1. After config object is initialized, set the draw option: 
    config.initAsync('', false, function () {
config.setDrawOption({
 isUseTxt: true,
 importTxtFunction: function () {
   console.log('my importTxt!!!');
 },
 exportTxtFunction: function () {
   console.log('my exportTxt!!!');
 },    
});
});
  2. Then the export / import toolbar will have 'txt' mode.
  3. When export or import button is clicked, will run the function in option.

result

Export / Import Excel

You can set draw option to enable export / import excel function.

  1. After config object is initialized, set the draw option: 
    config.initAsync('', false, function () {
config.setDrawOption({
 isUseExcel: true,
 importExcelFunction: function () {
   console.log('my importExcel!!!');
 },
 exportExcelFunction: function () {
   console.log('my exportExcel!!!');
 },
});
});
  2. Then the export / import toolbar will have 'excel' mode.
  3. When export or import button is clicked, will run the function in option.

result

Export / Import Dwg, Dxf

You can set the draw option to enable the export / import Dwg, Dxf function.

  1. When the config object is initialized, set the draw option:

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

   config._resetDrawImportFileHtml();
 },
 exportExcelFunction: function () {
   console.log('my exportDwgDxf!!!');
 },
});
});
  2. If normal, the export / import toolbar will have the DWG, DXF mode.
  3. When the export or import button is clicked, the function will be run.

result

Import post processing

You can set the draw option to set the import postprocessing function.

  1. When the config object is initialized, set the draw option:

    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. If normal, the function will be executed when GeoJSON and Shape are imported.

Use screenshot

You can screenshot the map screen，can capture UI or remove UI for a screenshot Screenshot support KqMapping，WMTS，Mark，GeoJSON...

Add Screenshot Control

Enable the screenshot function in the configuration file:

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

Functional Specification

Click the screenshot button to take the screenshot. Click the display button to control whether the UI is displayed in the screenshot.There are two modes: keep the UI or remove the UI.

Result:

result

Use API

You can screenshot by API. Function prototype: doRectScreenShot(x, y, w, h)，(x, y):topleft w:width h:height

See the following code:

var screenshot = KQ.Control.Manager.getInstance().getControl('screenshot');
screenshot.doRectScreenShot(100, 100, 400, 400);

Icons

Add icon to the web control

Add Icon

Using font awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

fontawesome

PS: you can also add icons by yourself with common css and picture.

Example

Basic Icons

You can place Font Awesome icons just about anywher e using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a is more semantically correct).

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

fontawesome

Larger Icons

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

<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

Set Rubber Band Option

See: setRubberBandOption

Custom Callback Function

You can customize the callback function of the box selection button. The setting must be done before the initialization of mapview.

  1. In the config.xml configuration file, add the rubber band control: <subcontrol type="rubber-band"/>

  2. After config object is initialized, set the rubber band option:

    config.initAsync('', false, function () {
 // customize callback function
 config.setRubberBandOption({rubberBandFunction: function (bounds) {
   // bounds 105.00828568080212,29.978604497692796,105.58946814211257,30.361803043687907
   console.log('bounds ' + bounds.toBBoxString());
 }});
});

Query

Query information from the server

See: InfoQuery

Info Query

Query information of the specific layers in the particular range

  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:

result

SQL Query

SQL query information from the server.

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

Result:

sql-query

Overlay Analysis

Overlay analysis from the server.

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

Result:

overlay-analysis

Legend Query

Legend query information from the server.

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

Result:

legend-query

Buffer Analysis

Buffer analysis of the specific graphics from the server.

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

Result:

buffer-analysis

Feature Import

Import a given feature dataset into the specific layer.

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

Result:

feature-import

Feature Update

Update a given feature dataset into the specific layer.

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

Result:

feature-update

Feature Delete

Delete a given feature from the specific layer.

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

Result:

feature-delete

Projection Transform

Represents a class to transform point coordinates from one coordinate system to another.

See: ProjectionTransform

Transform Forward

Coordinate transformation forward.

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

Transform Inverse

Coordinate transformation inverse.

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

Projections Predefined

ProjectionTransform has some projections predefined.

  // ProjectionTransform has the following projections predefined:
  // 'EPSG:4326', which has the following alias
  //    'WGS84'

  // 'EPSG:4269'

  // 'EPSG:3857', which has the following aliases
  //   '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]);