Reference Source

Advanced Function

Permission

Control function availability by permission.

Basic Usage

  1. Set permission of controls in config.xml. If no permission, the control will not be displaybr.

    controlTree of sidebar must have permission 3
    controlAdvancedQuery of sidebar must have permission 3
    controlOverlayAnalysis of sidebar have no permission limit
    controlSetting of sidebar must have permission 1
    input control must have permission 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. Set permission of layers in config.xml. 'Base' layer must have permission 1. Because the layer is a layer group, so all children layer will have the same permission except the children layer set another permission. For example, because 'City' layer do not have another permission, so it will have the parent's permission(1). 'Section_0' layer have another permission(1 3), so it's permission is 1 and 3.

    'Base' layer must have permission 1
    'City' layer must have permission 1
    'Section_0' layer must have permission 1 or 3
    'Section_1' have no permission limit

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

  3. Set permission to mapview object

    var mapView = new KQ.Map.MapView({
permission: [1],
});
  4. If there is no error occurred, the controls and the layers that have no permissions will not displayed in mapview.

Get Permission

var permission = mapView.getPermission();

Bind Event

You can bind functions to events and respond to functions when events occur.

See: MapView

Map Click Event

Refer to the following code:

mapView.on('click', function (e) {
  console.log('click position:' + e.latlng);
});

Map Resize Event

Refer to the following code:

mapView.on('resize', function (e) {
  console.log('old size:' + e.oldSize);
  console.log('new size:' + e.newSize);
})

Remove Event Binding

Refer to the following code：

function onClick(e) {
  console.log('click position:' + e.latlng);
}
mapView.on('click', onClick);   // Add binding
mapView.off('click', onClick);  // Remove binding

Using Realtime Data

It provides the ability to display and track real-time point data. It can move the marker point along the line, and it can lock the point for tracking.

See: MapRealtime

Basic Usage

a. Create mapview object and initialize b. Define the options.

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

c. Create realtime object and add it to the mapview.

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

result

Add Data

Rewrite getCoord method can provide the real data, every interval time will call this function to get the data. If you do not provide this function will use analog data, convenient to try. Note: to return (longitude and latitude) format, must be wgs84 coordinates.

var realtime_options = {
  getCoord: function () {
    // To get the data through the network or by other methord 
    return coord;
  },
};

The Time Interval

The unit is milliseconds. The following settings will every 1 seconds to get a point data.

var realtime_options = {
  interval: 1000,
};

Initial Popup Box

The default initial pop-up message box, not pop up when the initial set to false

var realtime_options = {
  is_init_popup: true,
};

Popup Box Content

Change popup_label will set the title of the popup box, popup_img popup will set up the image

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

Custom Marker

Markers can be set to different shapes, colors, icons.

See: add-map-marker

var realtime_options = {
  "extraIcon": {
    icon: 'fa-spinner fa-spin',
    markerColor: 'green-dark',
    shape: 'circle',
    prefix: 'fa',
  },
}

Custom Track

Track can be set style.

See: 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

Customize Track Maximum

Can restrict track shows that the maximum points on the map, the following settings will display only five points:

var realtime_options = {
  max_track_number: 3,
}

result

Monitor

You can track a realtime on a map. Notice: Do not monitor two points on the map at the same time.

realtime.setFollow(true);

result

Set Shape Type of Track

Can be set by the options shown point tracks or linear. Default is point. 

var realtime_options = {
  shapeType: 'line',
}

Point: result

Line: result

Use Playback

It provides the ability to replay GPS Tracks in the form of GeoJSON objects. Rather than simply animating a marker along a polyline, the speed of the animation is synchroized to a clock. The playback functionality is similar to a video player -- you can start and stop playback, change the playback speed and so on.

See: Playback

Basic Usage

  1. Create MapView object and initialize it

  2. Define the option, geojson is the data:

    var playbackOptions = {
geojson: demoTracks,
};

    or:

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

  3. Create Playback object and add it to mapview.

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

    result

Data Format

Playback consumes GPS tracks in the form of GeoJSON. The schema of the GeoJSON data is as follows: PS: coordinates and time must have the same count. coordinates：coordinates, must be wgs84. time：time, unix time format.

{
  "type": "Feature",
  "geometry": {
    "type": "MultiPoint",
    "coordinates": [/*array of [lng,lat] coordinates*/]
  },
  "properties": {
    "time": [/*array of UNIX timestamps*/]
  }
}

Other attributes may be added to the GeoJSON object, but this is the required minimum schema for the plug-in to work.

Enable Controls

Set playback options to enable the controls.

var playbackOptions = {
  // enable controls
  tracksLayer : true,
  playControl: true,
  dateControl: true,
  sliderControl: true,

  // set the control position
  tracksLayerPosition: 'bottomleft',
  playControlPosition: 'bottomleft',
  dateControlPosition: 'bottomleft',
  sliderControlPosition: 'bottomleft',
};

result

Set Popup & Tooltip

Popup a dialog when click the marker.

a. Set playback options:

var playbackOptions = {
  popups: true,               // enable popups
  popups_autoClose: false,    // if true, the popup will auto close when you click other marker.
  tooltips: true,             // enable tooltips
}

b. Add the label to geojson properties, add the image to geojson properties

result

c. When clicking the marker, a popup will apear.

result

d. When mouse hovering the marker, a tooltip will apear.

result

e. You can disable one of them by setting the option to false.

Custom Marker

The marker can be set to diffrent shape, color, icon.

a. Add the marker info to geojson properties.

See: add-map-marker

extraicon

b. Result picture.

extraicon

Custom Track

The track can be set style.

a. Add the style info to geojson properties.

See: set-style

styles

b. Result picture.

styles

Custom Control Label

You can change the label of controls by setting playback options:

var playbackOptions = {
  label_play: 'Play',
  label_stop: 'Stop',
  label_gpsTrack: 'GPS Track',
  label_latlng: 'LatLng',
}

Start With A Popup

Add the is init popup attribute to the properties of GeoJSON

"properties": {
  "is_init_popup": true,
}

Use Building

It can display 2.5D effect buildings on a map.

Configuration Layer

In the layer tree of the KqMap mapping tool, right-click on the polygon layer, set the layer to the building.

Publishing Service

After the Web service is published, you will be able to zoom in to a certain scale to see the 2.5D building graphics.

Modify Minimum Scale

If the scale is greater than the value, the house will be shown. The default value is 0.0005. In config.xml:

<config custom="1">
  <building min_scale_value="0.0005"/>
  ...
<config/>

Modified Height Coefficient

Modify it to make the house look taller or shorter, with a default value of 1. In config.xml:

<config custom="1">
  <building height_rate="1.2"/>
  ...
<config/>

Set Layer Height Field

You can set the field that is used as height. If the field is not set, building will use default height. In config.xml:

<config custom="1">
 <tree label="layers">   
    ...
   <layers id="layers">
     <layer building_height_field="FWHEIGHT" ... />
   </layers>
 ...
<config/>

API

See: MapBuilding

Result

result

Buffer Analysis

Point Buffer

result

Polyline Buffer

result

Polygon Buffer

result

Info Query Post-Processing

Replace Property Value

Refer to the following code:

      var instance = KQ.Control.InfoQueryDialog.getInstance();
          instance.addDataProcessingFunc(function (data) {
            for (var key in data){
              let records = data[key].records;

              for (let i = 0; i < records.length; ++i){
                var record = records[i];
                var prop = 'BSM'

                switch (record[prop]){
                  case 3453:
                    record[prop] = 6666;
                    break;

                  default:
                    break;
                }
              }
            }
          });

Result:

result

result