图层加载与显示

使用WMS图层

能够将WMS服务图层加入到地图中，并在该图层上进行查询等功能。例如：使用Arcgis发布的WMS服务，这样能够将Arcgis的地图服务集成到系统中。

注意：

在config.xml配置文件的<prj>标签中，正确的设置WMS服务的投影字符串(格式为wkt)
source的type类型为wms

设置服务参数

需要弄清楚WMS服务的详细参数，并且设置到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>   // 注意点1 设置正确的投影信息
      <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"/>           // 注意点2 type的类型为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>

使用WMTS图层

能够将WMTS服务图层加入到地图中，并在该图层上进行查询等功能。例如：使用Arcgis发布的WMTS服务，这样能够将Arcgis的地图服务集成到系统中。

注意：WMTS服务的投影以及比例尺信息必须和地图服务完全匹配才能添加。例如：使用EPSG：3857和Google比例尺进行发布。id固定写0能避免冲突问题。

设置服务参数

需要弄清楚WMTS服务的详细参数，并且设置到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="0" is_dynamic="0" label="HongShanDLTB"
           tooltip_forefather="HongShanDLTB" visible="0" _style="default" _layer="hongshanqu" _tilematrixSet="default028mm" _format="image/png"/>
  </layers>
</tree>

说明：使用kqgisserver和数据进行常规的配图和发布，将会生成config.xml和查询相关的配置文件。在此基础上，在config.xml中增加WMTS数据源，并在layer中增加相应的关联信息。WMTS服务的相关信息，可以直接访问WMTS的URL进行查看。

字段	内容
map_src_name	地图展示使用的wmts数据源的名称
_style	wmts服务的style，参考wmts服务参数
_layer	wmts服务的layer，参考wmts服务参数
_tilematrixSet	wmts服务的tilematrixSet，参考wmts服务参数

比例尺与投影

地图配置的投影信息必须和WMTS完全一致（注意，如果是特殊投影，需要设置投影的范围和比例尺；如果是经纬度，origin根据实际来设置，可能是-180,180）例如：EPSG3857和Google比例尺，将它们设置到config.xml中：

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

微调地图

可以微调config.xml中的origin，使天地图与我们的地图吻合。

效果图

result

动态添加WMTS图层

let layer = new KQ.Layer.LayerWMTS('http://172.16.0.5:6080/arcgis/rest/services/DLTB2010/MapServer/WMTS', {
  layer: 'DLTB2010',
  style: "default",
  tilematrixSet: "default028mm",
  format: "image/png",
}, 25000);  // 25000代表的是图层的zIndex

layer.addToMapView(mapView);

使用天地图

能够将天地图图层加入到地图中。注意：叠加天地图必须使用WGS 1984 Web Mercator和Google比例尺进行发布。

设置投影

投影选择WGS 1984 Web Mercator

设置比例尺

发布服务时，选择google比例尺模式，选择从0级开始

加入天地图

在配置文件中启用天地图

<control type="basemap" position="bottomright" visible="1">
  <subcontrol name="天地图矢量" maptype="tianditu" subtype="vector" is_selected="1"></subcontrol> 
  <subcontrol name="天地图影像" maptype="tianditu" subtype="image"></subcontrol>
  <subcontrol name="天地图地形" maptype="tianditu" subtype="terrain"></subcontrol>                  
</control>

配置文件

地图配置的投影信息必须和天地图完全一致。例如：WGS 1984 Web Mercator和Google比例尺，将它们设置到config.xml中：

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

微调地图

可以微调config.xml中的origin，使天地图与我们的地图吻合。

效果图

result

使用图层对比

能够用多窗口的方式对不同图层进行对比。目前支持直接使用控件进行二窗口对比，四窗口对比或使用API进行地图对比。

使用控件进行对比

a、在配置文件中启用图层对比功能

<control position="topright" type="compare" is_show_cursor="1" cursor_opacity="1.0" cursor_color="#0000FF" cursor_radius="40"/>

说明：

字段	内容
is_show_cursor	是否显示比较窗口内的光标
cursor_opacity	比较窗口的光标透明度
cursor_color	比较窗口的光标颜色
cursor_radius	比较窗口的光标半径
is_enable_2win	启用2窗口
is_enable_3win	启用3窗口
is_enable_4win	启用4窗口
is_enable_5win	启用5窗口
is_enable_6win	启用6窗口

b、二窗口对比效果图

result

c、四窗口对比效果图

result

d、六窗口对比效果图

result

e、能支持二窗口，三窗口，四窗口，五窗口，六窗口对比

使用API进行对比

a、准备对比窗口的代码，可以按需填入需要的内容，路径：kqwebmap/window/empty-window.html

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

b、创建窗口对象，并设置好参数

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、初始化窗口对象，并通过API使用地图对比功能

参考： compareTwoMap

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

  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、允许通过返回值取回地图对象和图层控制对象 参考： Return

e、效果图

result

图层置顶

能够进行图层的置顶和取消置顶。图层置顶后，该图层在所有图层的最上层显示

默认效果图

result

置顶乐至县的效果图

result

取消置顶乐至县的效果图

result

遮罩图层

管理遮罩图层的添加、删除等操作

参考： MaskLayerManager

基本用法(遮罩)

设置遮罩图层：

  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 () {
        // 点击按钮, 设置为遮罩图层
        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-0

地图GeoJSON

展现一个GeoJSON对象或一个GeoJSON对象数组。它可以解析GeoJSON数据并将其显示在地图上。

参考： MapGeoJson

基本用法（GeoJSON）

添加一个默认样式的GeoJSON到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

添加样式

GeoJSON可以通过API或者选项设置样式。

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

改变图标

如果数据是点数据，可以通过改变Icon的option的方式来改变图标，如果不设置将使用默认的效果。

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

缩放到GeoJSON

缩放地图到图形。

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

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

绑定点击事件

在GeoJSON对象上绑定点击事件的相应函数。当对象被点击时，函数将会执行。

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

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

地图标记

它用于在地图上显示可点击/可拖动的图标。

参考： MapMarker

添加标记 1

创建mapview对象并且初始化

定义图标的选项：

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

创建MapMarker对象，并且将它添加到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

添加标记 2

创建mapview对象并且初始化

创建一个标记的Icon。

PS: 图片必须放置在'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 ],
});

创建MapMarker对象。如果没有传递icon参数，它将使用默认图标。
```
var marker = new KQ.Map.MapMarker([ 30, 104 ], { icon: myIcon });
```
添加标记对象到mapview对象：
```
marker.addToMapView(mapView);
```

绑定事件，用于事件响应：

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

result

添加数字标记

创建mapview对象并且初始化

定义图标的选项：

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

创建MapMarker对象，并且将它添加到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

添加字母标记

创建mapview对象并且初始化

定义图标的选项：

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

创建MapMarker对象，并且将它添加到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

添加提示框

用于鼠标悬浮在标记上时显示一小段提示性的文字或图像。

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

添加弹出框

用于点击标记时弹出信息框。

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

文本标记

用于在地图上显示文本信息。

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

result

地图标记簇

管理地图标记的添加、删除等操作

参考： MarkerCluster

基本用法（标记簇）

管理地图标记：

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

使用API控制底图

允许使用API进行底图控制

基本用法（控制底图）

  let base_layers_0 = KQ.Control.MapBaseLayer.getLayers('tianditu', 'vector');
  let base_layers_1 = KQ.Control.MapBaseLayer.getLayers('tianditu', 'image');
    let button0 = new KQ.Control.MapButton('fa-globe fa-lg', function (btn, map) {
      base_layers_0.forEach(function(layer){
        mapView._getMap().addLayer(layer);
      });

      base_layers_1.forEach(function(layer){
        mapView._getMap().removeLayer(layer);
      });
    }, '点击这个按钮 0');

    let button1 = new KQ.Control.MapButton('fa-bug', function (btn, map) {
      base_layers_1.forEach(function(layer){
        mapView._getMap().addLayer(layer);
      });

      base_layers_0.forEach(function(layer){
        mapView._getMap().removeLayer(layer);
      });
    }, '点击这个按钮 1');
  })

结果：

result-0

临时改变地图投影

允许临时改变地图投影，显示不同于地图目标投影的地图服务，并在显示完毕后恢复原样。

例如：当前目标投影为EPSG:4326，临时切换到EPSG:3857，加载3857服务的地图并显示。

  // change crs from 4326 to 3857
  var crs_options = {
    "origin": [-20037508.3427892, 20037508.3427892],
    "resolutions": [305.748124978916, 152.874062489458, 76.437031244729, 38.2185156223645, 19.10925781118225, 9.554628905591125, 4.777314452795562, 2.388657226397781, 1.1943286131988906, 0.5971643065994453, 0.29858215329972265, 0.14929107664986133, 0.07464553832493066],
    "bounds": L.bounds([-20037508.3427892, -20037508.3427892], [20037508.3427892, 20037508.3427892]),
    "prj": KQ.Common.CommonValues.defaltPrj_EPSG3857,
    "proj4": KQ.Common.CommonValues.defaltProj4_EPSG3857,
  };

  mapView.setTempCRS(crs_options);

  // add 3857 map service
  layerwms = new KQ.Layer.LayerWMS("http://172.16.1.174:8699/KQGis/rest/services/hsq3857/MapServer/WMS", {id: "1"});
  layerwms.addToMapView(mapView);

  ... ...

  // remove layer
  layerwms.removeFromMapView();
  // restore crs
  mapView.restoreCRS();

result