Reference Source

地图控件

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

结果：

result-0

添加按钮条

在地图上添加按钮条。

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

结果：

result-1

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

结果：

result-1

result-2

MainSidebar

从地图的左边或右边显示一个带标签页的侧边栏。

参考： Sidebar

添加新标签

在侧边栏上添加新标签：

  1. 找到文件并打开它：'kqwebmap/sidebar/sidebar.html'。
  2. 找到内容<ul role="tablist">和它的结束标签</ul>.

  3. 在</ul>前，添加代码<li><a title="new tab" href="#newtab" role="tab"><i class="fa fa-address-book"></i></a></li>。

    add-tab

添加新内容

添加新标签页的内容：

  1. 找到文件并打开它：'kqwebmap/sidebar/sidebar.html'。
  2. 找到内容<div class="sidebar-content">。
  3. 在下面添加代码： 
    <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>

添加事件

添加事件响应函数：

  1. 找到文件并打开它：'kqwebmap/sidebar/sidebar.html'。

  2. 在结束位置添加代码：

    <script>
  function onButtonClick() {
    console.log('newTabButton clicked');
  }

  function sidebar_init () {
    console.log('function sidebar_init() run !!!');
  }
</script>

结果：

effect-0 (fold)

effect-1 (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);
        }
      })
    });

结果：

result-0

清空选中图层

清除所有的选中图层

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

结果：

result-1

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

结果：

result-2

控制图层选中数量

为了保证地图的显示效率，默认情况下，最多显示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);
      }
     })
   });

结果：

result-3

定制右键菜单响应函数

定制右键菜单响应函数

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

结果：

result-4

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)

结果：

result-0

设置对话框的选项

设置对话框的选项, 例如：宽度、高度、位置等

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

结果：

result-1

定位地图元素

首先数据源中要存放图形数据，然后选中叠置分析结果框中的一条记录，就能定位到相应的地图元素。

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

结果：

result-2

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

结果：

result-3

设置模板

设置模板，定制列的表现形式

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

结果：

result-4

显示、隐藏统计图

显示或者隐藏统计图

            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，隐藏统计图按钮

结果：

result-5 result-6

单位转换功能

重叠面积单位的转换，比如：平方米 --> 亩、平方米 --> 公顷。。。

      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;},       // 平方米 --> 亩
            },
          }
      )

结果：

result-7

查询结果多样化展示

统计图和统计详情在两个不同的窗口展示，实现查询结果的多样化展示

        在OverlayAnalysisResultDialog类的open(dataSource, options)函数中, 配置detail参数进行功能定制,格式如下:
        options.detail - 分析结果详情按钮 {title: '', callback: callback}

结果：

result-8

SimpleSidebar

从地图的左边或右边显示一个不带标签页的侧边栏。

参考： SimpleSidebar

添加内容

在侧边栏上添加内容：

  1. 找到文件并打开它：'kqwebmap/sidebar'。

  2. 添加新文件：'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>

  3. 在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();
  });
});

    结果：

    result

添加ToolButton

ToolBar中添加ToolButton

  1. 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

地图框选类的使用

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

    result