Layer Load and View

Use WMS

Be able to add a WMTS service layer to the map. Such as: using the WMS services which were published with Arcgis. This can integrate the map services of Arcgis into the system. Note: 1 In the <prj> tag of the config.xml configuration file,sets the correct projection string(wkt) 2 The type of source is WMS

Set Service Param

You need to figure out the detailed parameters of the WMS service and set it to config.xml:

    <projection>
      <prj>PROJCS["WGS_1984_Web_Mercator_Auxiliary_Sphere",GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",
      SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],
      PROJECTION["Mercator_Auxiliary_Sphere"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",0.0],
      PARAMETER["Standard_Parallel_1",0.0],PARAMETER["Auxiliary_Sphere_Type",0.0],UNIT["Meter",1.0],AUTHORITY["EPSG",3857]]</prj> // note1: projection correct
      <proj4>+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs</proj4>
      <origin x="-20037573.34278925" y="20037540.34278925"></origin>
    </projection>

  <tree label="洪山区">
    <sources>
      <source url="http://172.16.0.94:6080/arcgis/services/hongshanqu/MapServer/WmsServer?" type="wms" name="sourceWMS"/>         // note2: type is wms
    </sources>
    <layers id="layers">
      <layer opacity="1" src_name="sourceWMS" icon="polygon" type="sl" id="2" is_dynamic="0" label="WMS图层" tooltip_forefather="WMS图层" visible="1"/>
    </layers>
  </tree>

Use WMTS

Be able to add a WMTS service layer to the map. Such as: using the WMTS services which were published with Arcgis. This can integrate the map services of Arcgis into the system. Note: the projection of the WMTS service and the scale information must be fully matched with the map service to add. For example: use EPSG: 3857 and Google scale to publish.

Set Service Param

You need to figure out the detailed parameters of the WMTS service and set it to config.xml:

<tree label="HongShanQu">
  <sources>
    <source url="http://172.16.1.174:8699/KQGis/rest/services/hs" type="kqmapping" name="source0"/>
    <source url="http://172.16.0.94:6080/arcgis/rest/services/hongshanqu/MapServer/WMTS" type="wmts" name="sourceWMTS"/>
  </sources>
  <layers id="layers">    
    <layer opacity="1" src_name="source0" map_src_name="sourceWMTS" icon="polygon" type="sl" id="1" is_dynamic="0" label="HongShanDLTB" tooltip_forefather="HongShanDLTB" visible="0" _style="default" _layer="hongshanqu" _tilematrixSet="default028mm" _format="image/png"/>    
  </layers>
</tree>

Explanation: Using KqGisServer and data for regular mapping and publishing, you will generate the config.xml and query related configuration files. Base on these files, add the WMTS data source to the config.xml and add relevant information to the layer. The WMTS service information, can directly access the WMTS URL to view.

Fields	Content
map_src_name	The name of the WMTS data source used
style	The style of the WMTS service, reference the WMTS service parameters
layer	The layer of the WMTS service, reference the WMTS service parameters
tilematrixSet	The tilematrixSet of the WMTS service

Scale And Projection

The projection of the WMTS service and the scale information must be fully matched with the map service to add:

<scales>
  <scale id="0">0.000000001690163571602659</scale>
  <scale id="1">0.000000003380327143205318</scale>
  <scale id="2">0.000000006760654286410635</scale>
  <scale id="3">0.00000001352130857282127</scale>
  <scale id="4">0.00000002704261714564254</scale>
  <scale id="5">0.00000005408523429128508</scale>
  <scale id="6">0.0000001081704685825702</scale>
  <scale id="7">0.0000002163409371651403</scale>
  <scale id="8">0.0000004326818743302807</scale>
  <scale id="9">0.0000008653637486605613</scale>
  <scale id="10">0.000001730727497321123</scale>
  <scale id="11">0.000003461454994642245</scale>
  <scale id="12">0.000006922909989284491</scale>
  <scale id="13">0.00001384581997856898</scale>
  <scale id="14">0.00002769163995713796</scale>
  <scale id="15">0.00005538327991427592</scale>
  <scale id="16">0.0001107665598285518</scale>
</scales>
<projection>
  <proj4>+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs</proj4>
  <origin x="-20037573.34278925" y="20037540.34278925"></origin>             
</projection>

Fine-tune the map

You can fine tune the origin in config.xml, make the tianditu map match with our map.

Result

result

Use Tianditu

Tianditu layer can be added to the map. Notice：Use Tianditu must use the WGS 1984 Web Mercator projection and Google scale.

Set Projection

Select projection: WGS 1984 Web Mercator.

Set Scale

When the service is published, select google scale mode and start from 0 level.

Add Tianditu

Enable Tianditu in the configuration file

<control type="basemap" position="bottomright" visible="1">
  <subcontrol name="Tianditu Vector" maptype="tianditu" subtype="vector" is_selected="1"></subcontrol> 
  <subcontrol name="Tianditu Image" maptype="tianditu" subtype="image"></subcontrol>                    
</control>

Config File

The map projection information must be identical to Tianditu. Such as: WGS 1984 Web Mercator and Google scale, and set them to the config.xml file:

<scales>
  <scale id="0">0.000000001690163571602659</scale>
  <scale id="1">0.000000003380327143205318</scale>
  <scale id="2">0.000000006760654286410635</scale>
  <scale id="3">0.00000001352130857282127</scale>
  <scale id="4">0.00000002704261714564254</scale>
  <scale id="5">0.00000005408523429128508</scale>
  <scale id="6">0.0000001081704685825702</scale>
  <scale id="7">0.0000002163409371651403</scale>
  <scale id="8">0.0000004326818743302807</scale>
  <scale id="9">0.0000008653637486605613</scale>
  <scale id="10">0.000001730727497321123</scale>
  <scale id="11">0.000003461454994642245</scale>
  <scale id="12">0.000006922909989284491</scale>
  <scale id="13">0.00001384581997856898</scale>
  <scale id="14">0.00002769163995713796</scale>
  <scale id="15">0.00005538327991427592</scale>
  <scale id="16">0.0001107665598285518</scale>
</scales>
<projection>
  <proj4>+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378137 +b=6378137 +units=m +no_defs </proj4>
  <origin x="-20037573.34278925" y="20037540.34278925"></origin>
</projection>

Modified Slightly

It can modify the origin in config.xml to make Tianditu exactly match our map.

Result

result

Use Layer Compare

You can compare different layers in multiple Windows. Currently, control is supported for two window comparisons, four window comparisons or using API for map comparison.

Use Controls For Comparison

a、Enable the compare function in the configuration file

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

Explanation:

Fields	Content
is_show_cursor	display the cursor or not
cursor_opacity	cursor opacity
cursor_color	cursor color
cursor_radius	cursor radius

b、The result of two window comparisons

result

c、The result of four window comparisons

result

Compare Using Apis

a、To prepare the code for the contrast window, you can fill in the required content as needed, path:：kqwebmap/window/empty-window.html

<div id="empty-window"></div>

b、Create the window object and set the parameters

var win = new KQ.Control.Window('empty-window', {
  parentID: 'map',
  position: {
    left: '10px',
    top: '10px',
  },
  width: '1000px',
  height: '600px',
  title: 'Compare 2011 and 2009',
});

c、Initialize the window object and use the map comparing feature through the API

See: compareTwoMap

win.initAsync(function () {
  win.open();

  mapView.compareTwoMap({
    win: win,
    parentID: 'empty-window',
    leftLayerInfos: [ { src_name: "source0", id: "93" }, { src_name: "source0", id: "95" }, { src_name: "source0", id: "96" }],
    rightLayerInfos: [ { src_name: "source0", id: "105" }, { src_name: "source0", id: "106" }, { src_name: "source0", id: "107" }],
    leftGeoJSON: left_geojson,
    rightGeoJSON: right_geojson,
    leftQueryLayerInfo: { src_name: "source0", id: "93" },
    rightQueryLayerInfo: { src_name: "source0", id: "105" },
    zoom: 9,
    center: [ 30.3791, 104.9515 ],
  });

  win.open();
});

d、Result

result

Stick Layer

Stick and cancel stick the layer. After stick the layer,the layer on top of other layers display.

Default

result

After Stick Lezhi County

result

Cancel Stick Lezhi County

result

MaskLayerManager

Manageer mask layers add、delete...

See： MaskLayerManager

Basic Usage

Set mask layers：

 var maskButtons = [];
 var instance = KQ.Common.MaskLayerManager.getInstance();
 var layers = instance.layers();

 for (var i = 0; i < layers.length; ++i){

   (function (idx) {
     var button = new KQ.Control.MapButton('fa-copy fa-lg', function () {
       // add mask layer
       instance.addLayer(layers[idx].key);
     }, layers[idx].label);

     maskButtons.unshift(button);
   })(i);
 }

 let bar = new KQ.Control.MapButtonBar(maskButtons, { position: 'topleft' });
 bar.addToMapView(mapView);

Result:

result-0

Map GeoJson

Represents a GeoJSON object or an array of GeoJSON objects. Allows you to parse GeoJSON data and display it on the map.

See: MapGeoJson

Usage Example

Add a default style geojson to mapview.

var data = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            104.91763561707054,
            30.154133143258463
          ],
          [
            104.93278268710557,
            30.092682588091314
          ],
          [
            105.03502903861937,
            30.10582236698391
          ]
        ]
      }
    }
  ]
};

var geojson = new KQ.Map.MapGeoJSON(data);    
geojson.addToMapView(mapView);

result

Add Style

GeoJson can set style by api or options.

var geojson = new KQ.Map.MapGeoJSON(data);
geojson.setStyle({
    "pane": "overlayPane",
      "nonBubblingEvents": [],
      "attribution": null,
      "smoothFactor": 1,
      "noClip": false,
      "stroke": true,
      "color": "#e74c3c",
      "weight": 4,
      "opacity": 0.5,
      "lineCap": "round",
      "lineJoin": "round",
      "dashArray": "15, 10, 1, 10",
      "dashOffset": null,
      "fill": false,
      "fillColor": null,
      "fillOpacity": 0.2,
      "fillRule": "evenodd",
      "interactive": true,
      "contextmenu": false,
      "contextmenuItems": [],
      "contextmenuInheritItems": true,
      "clickable": true
  });

geojson.addToMapView(mapView);

result

Change Icon

If the data type is point, can change the setting of the option to change the icon, if not will use the default set.

var data = {
  "type": "Feature",
  "properties": {
    "options": {
      "icon": {
        "options": {
          "iconUrl": '../../images/custom-marker.png',
          "iconSize": [ 25, 41 ],
          "iconAnchor": [ 13, 40 ],
          "shadowUrl": '../../images/marker-shadow.png',
          "shadowSize": [ 25, 41 ],
          "shadowAnchor": [ 8, 40 ],
        },
        "_initHooksCalled": true,
      }
    }
  },
  "geometry": {
    "type": "Point",
    "coordinates": [
      104.94174817230561,
      30.015712894345075,
    ],
  },
};

var geojson = new KQ.Map.MapGeoJSON(data);
geojson.addToMapView(mapView);

Zoom To GeoJson

Zoom map to the graphics.

var geojson = new KQ.Map.MapGeoJSON(data);    
geojson.addToMapView(mapView);

var bound = geojson.getBounds();
mapView.flyToBounds(bound);

Bind Click Event

Bind callback function to the GeoJson object. When the object is clicked, the function will be ran.

function onClick (e) {
  console.log('my click!');
}

var geojson = new KQ.Map.MapGeoJSON(data);
geojson.bindOnClick(onClick);

Map Marker

It used to display clickable/draggable icons on the map.

See: MapMarker

Add Map Marker 1

Create MapView object and initialize it

Define the option of icons:

var icon_0 = {
icon: 'fa-coffee',
markerColor: 'blue',
shape: 'square',
prefix: 'fa',
};
var icon_1 = {
icon: 'fa-spinner fa-spin',
markerColor: 'green-dark',
shape: 'circle',
prefix: 'fa',
};
var icon_2 = {
icon: 'fa-cog fa-spin',
iconColor: 'black',
markerColor: 'white',
shape: 'star',
prefix: 'fa',
};
var icon_3 = {
icon: 'fa-qq',
markerColor: 'purple',
shape: 'penta',
prefix: 'fa',
};

Create MapMarker object and add it to mapview.

new KQ.Map.MapMarker([ 30.56, 113.66 ], { extraIcon: icon_0 }).addToMapView(mapView);
new KQ.Map.MapMarker([ 30.66, 113.76 ], { extraIcon: icon_1 }).addToMapView(mapView);
new KQ.Map.MapMarker([ 30.56, 113.86 ], { extraIcon: icon_2 }).addToMapView(mapView);
new KQ.Map.MapMarker([ 30.46, 113.76 ], { extraIcon: icon_3 }).addToMapView(mapView);

result

Add Map Marker 2

Create MapView object and initialize it

Create a marker icon.

PS: image must be in folder 'kqwebmap/images'.

var myIcon = new KQ.Struct.Icon({
iconUrl: '../../images/custom-marker.png',
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 40 ],
shadowUrl: '../../images/marker-shadow.png',
shadowSize: [ 25, 41 ],
shadowAnchor: [ 8, 40 ],
});

Create MapMarker object. If not pass icon param, it will use default icon.
```
var marker = new KQ.Map.MapMarker([ 30, 104 ], { icon: myIcon });
```
Add marker to mapview object:
```
marker.addToMapView(mapView);
```

Bind event listenner:

marker.on('dblclick', function (e) {
console.log('dblclick!');
})

result

Add Number Marker

Create MapView object and initialize it

Define the option of icons:

var icon_0 = {
icon: 'fa-number',
number: '0',
markerColor: 'blue',
shape: 'square',
prefix: 'fa',
};

var icon_1 = {
icon: 'fa-number',
number: '1',
markerColor: 'green-dark',
shape: 'circle',
prefix: 'fa',
};

var icon_2 = {
icon: 'fa-number',
number: '2',
iconColor: 'black',
markerColor: 'white',
shape: 'star',
prefix: 'fa',
};

var icon_3 = {
icon: 'fa-number',
number: '3',
markerColor: 'purple',
shape: 'penta',
prefix: 'fa',
};

Create MapMarker object and add it to mapview.

new KQ.Map.MapMarker([ 30.56, 113.66 ], { extraIcon: icon_0 }).addToMapView(mapView);
new KQ.Map.MapMarker([ 30.66, 113.76 ], { extraIcon: icon_1 }).addToMapView(mapView);
new KQ.Map.MapMarker([ 30.56, 113.86 ], { extraIcon: icon_2 }).addToMapView(mapView);
new KQ.Map.MapMarker([ 30.46, 113.76 ], { extraIcon: icon_3 }).addToMapView(mapView);

result

Add Alphabet Marker

Create MapView object and initialize it

Define the option of icons:

var icon_0 = {
icon: 'fa-number',
number: 'A',
markerColor: 'blue',
shape: 'square',
prefix: 'fa',
};

var icon_1 = {
icon: 'fa-number',
number: 'B',
markerColor: 'green-dark',
shape: 'circle',
prefix: 'fa',
};

var icon_2 = {
icon: 'fa-number',
number: 'C',
iconColor: 'black',
markerColor: 'white',
shape: 'star',
prefix: 'fa',
};

var icon_3 = {
icon: 'fa-number',
number: 'D',
markerColor: 'purple',
shape: 'penta',
prefix: 'fa',
};

Create MapMarker object and add it to mapview.

new KQ.Map.MapMarker([ 30.56, 113.66 ], { extraIcon: icon_0 }).addToMapView(mapView);
new KQ.Map.MapMarker([ 30.66, 113.76 ], { extraIcon: icon_1 }).addToMapView(mapView);
new KQ.Map.MapMarker([ 30.56, 113.86 ], { extraIcon: icon_2 }).addToMapView(mapView);
new KQ.Map.MapMarker([ 30.46, 113.76 ], { extraIcon: icon_3 }).addToMapView(mapView);

result

Used to display small texts on top of map layers.

var marker = new KQ.Map.MapMarker([ 30, 104 ], { icon: myIcon });
marker.bindTooltip('Hello world!', {
  offset: new KQ.Struct.Point(10, -30),
});
marker.addToMapView(mapView);

result

Used to open popups in certain places of the map.

var marker = new KQ.Map.MapMarker([ 30, 104 ], { icon: myIcon });
marker.bindPopup('Hello world!', {
  offset: new KQ.Struct.Point(0, -30),
});
marker.addToMapView(mapView);

result

Label Marker

Used to display text messages on a map.

var marker = new KQ.Map.MapMarker([ 30, 104.70 ], { label: `<h1 style="color: red">ABC</h1>` });
marker.addToMapView(mapView);

result

Marker cluster

Manager the marker's add\delete...

See: MarkerCluster

Basic Usage

Manager marker:

 // content in markercluster.json: [ [116.4383, 40.1471], [116.4372, 40.1458]... ]
 $.get('./markercluster.json', function (data) {

   var markerList = [];
   var markers = new KQ.Control.MarkerCluster();

   for (let i = 0; i < data.length; ++i){
     var marker = new KQ.Map.MapMarker([data[i][1], data[i][0]]);
     markerList.push(marker);
   }
   markers.addLayers(markerList);

   markers.addToMapView(mapView);
 })

Result:

result-0

Layer Load and View

Use WMS

Set Service Param

Use WMTS

Set Service Param

Scale And Projection

Fine-tune the map

Result

Use Tianditu

Set Projection

Set Scale

Add Tianditu

Config File

Modified Slightly

Result

Use Layer Compare

Use Controls For Comparison

Compare Using Apis

Stick Layer

Default

After Stick Lezhi County

Cancel Stick Lezhi County

MaskLayerManager

Basic Usage

Map GeoJson

Usage Example

Add Style

Change Icon

Zoom To GeoJson

Bind Click Event

Map Marker

Add Map Marker 1

Add Map Marker 2

Add Number Marker

Add Alphabet Marker

Add Tooltip

Add Popup

Label Marker

Marker cluster

Basic Usage