Reference Source

高级功能

权限控制

通过权限来控制功能的可用性。

基础用法

  1. 在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"/>

  2. 在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>

  1. 给mapview对象设置权限

    var mapView = new KQ.Map.MapView({
permission: [1],
});

  2. 如果没有错误发生，没有在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

基础用法

  1. 创建mapview对象并且进行初始化

  2. 定义选项。（内置了一组数据方便测试使用，默认不传递数据也能起作用）

    var realtime_options = {
interval: 1000,
popup_label: 'Colin',
popup_img: '../../testdata/person1.jpg',
};

  3. 创建realtime对象并且将它加入到mapview中。

    var realtime = new KQ.Map.MapRealtime(null, realtime_options);
realtime.addToMapView(mapView);

    result

添加数据

改写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,
  },
}

result

定制轨迹的最大点数

可以在地图上限制轨迹显示的最大点数，如下设置将只显示5个点：

var realtime_options = {
  max_track_number: 5,
}

result

跟踪

可以在地图上跟踪某个realtime。 注意，不要同时在地图上监视两个点。

realtime.setFollow(true);

result

设置轨迹类型

可以通过选项设置显示点状轨迹还是线状轨迹。默认为点。

var realtime_options = {
  shapeType: 'line',
}

点： result

线： result

使用历史轨迹

它提供了使用geojson对象来播放gps轨迹的功能。它能够将标记点沿折线运动，运动速度和时间相关联。轨迹播放功能类似与一个视频播放器，可以开始和停止播放，改变播放速度等。

参考： Playback

基础用法

  1. 创建mapview对象并且进行初始化

  2. 定义选项。geojson是数据，它可以是单独的geojson对象或geojson对象的数组。

    var playbackOptions = {
geojson: demoTracks,
};

    or:

    var playbackOptions = {
geojson: [track0, track1, track2, track3],
};

  3. 创建playback对象并且将它加入到mapview中。

    var playback = new KQ.Control.Playback(playbackOptions);
playback.addToMapView(mapView);

    result

数据格式

控件使用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',
};

result

弹出框和提示框

当点击标记时弹出信息框。

  1. 设置playback选项：

    var playbackOptions = {
popups: true,               // 启用弹出框
popups_autoClose: false,    // 如果为true，弹出框将在点击其他标记时自动关闭
tooltips: true,             // 启用提示框
}

  2. 在geojson的properties中添加标签和图像。

result

  1. 当点击标记时，将弹出信息框。

result

  1. 当鼠标悬浮在标记上时，将弹出提示框。

result

  1. 当设置为false时，将屏蔽弹出框和提示框。

定制标记

标记可以设置成不同的形状、颜色\图标。

  1. 在geojson的properties中添加标记信息。

    参考： add-map-marker

extraicon

  1. 结果预览：

extraicon

定制轨迹

轨迹可以设置样式。

  1. 在geojson的properties中设置样式信息。

    参考： set-style

styles

  1. 结果预览：

styles

定制控件标签

可以在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配图工具的图层树中，右键选择多边形图层，将图层设为建筑物。

发布服务

在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

效果图

result

缓冲分析演示

点图形缓冲

result

线图形缓冲

result

面图形缓冲

result

属性查询后处理

替换属性值

参考以下代码：

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

效果图：

result

result