开发工具与关键技术：Visual Studio2015 javascript SuperMap iClient For JavaScript
作者：华境聪
撰写时间：2019/02/01
首先就是常规性的获取地图，然后添加klialin和layer的矢量图层和draw控件，利用draw控件在地图上获取经纬度的具体坐标，然后通过点击btnchaxun按钮触发获取半径和经纬度的值，进行自定义定位画圆形查询周边。
1. var map, local, layer,
2. url = "http://localhost:8090/iserver/services/map-Zhuhaimap/rest/maps/County_R@Zhuhai";
3. function init() {
4. //初始化地图
5. map = new SuperMap.Map("map", {
6. control: [
7. new SuperMap.Control.PanZoomBar(),//平移缩放控件
8. new SuperMap.Control.ScaleLine(),//比例尺控件
9. new SuperMap.Control.Navigation(),//鼠标拖拽控件 ],
10. });
11. //鼠标移动获取坐标值
12. map.events.on({ "mousemove": getMousePositionPx });
13. //初始化图层
14. layer = new SuperMap.Layer.TiledDynamicRESTLayer("海珠地图", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });
15. //监听图层信息加载完成事件
16. layer.events.on({ "layerInitialized": addLayer });
17. klialin = new SuperMap.Layer.Vector("周边分析图层", { displayInLayerSwitcher: false });
18. //获取坐标
19. draw = new SuperMap.Control.DrawFeature(klialin, SuperMap.Handler.Point);//查询多变形
20. draw.events.on({ "featureadded": drawCom });//使用on()接口监听事件
21. //添加控件
22. map.addControl(draw);
23. }
24. function addLayer() {
25. map.addLayers([layer,klialin]);
26. }
27. //获取中心点
28. function drawCom(drawGeometryArgs) {
29. var xCoordinate = drawGeometryArgs.feature.geometry.x;
30. var yCoordinate = drawGeometryArgs.feature.geometry.y;
31. $("#zxdwbk").val(xCoordinate + "-" + yCoordinate);
32. draw.deactivate();//控件失效
33. }
34. //进行圆形定位
35. $("#btnchaxun").click(function () {
36. klialin.removeAllFeatures();
37. markerLayer.clearMarkers();
38. var kl = $("input[name='yiban']:checked")
39. if ($("#zxdwbk").val() == "" || kl.length == 0) {
40. alert('请选择中心点或者查询目标！')
41. klialin.removeAllFeatures();
42. markerLayer.clearMarkers();
43. } else {
44. $("#ZHZSrightban1").addClass("none");
45. $("#ZHZSrightban").removeClass("none");
46. var li = $("#zxdwbk").val().split("-")[0];//获取input标签第1个索引的经度的值
47. var ijn = $("#zxdwbk").val().split("-")[1];//获取input标签第2个索引的纬度的值
48. var chen_centerPoint = new SuperMap.Geometry.Point(li, ijn);//用来生成线串的点数组
49. var rou = $("#bjwbk").val();//半径
50. var polygon = SuperMap.Geometry.Polygon.createRegularPolygon(chen_centerPoint, rou, 360, 360);//实例化多边形
51. var circleVector = new SuperMap.Feature.Vector(polygon);//矢量数据集
52. circleVector.style = {
53. strokeColor: "#3f7ee5",
54. fillColor: "#ccc",
55. strokeWidth: 2,
56. fillOpacity: 0.3,
57. strokeOpacity: 0.5
58. };
59. klialin.addFeatures(circleVector);
60. circleselect(circleVector);
61. }
62. })
63. //绘制圆形成功请求
64. function circleselect(circleVector) {
65. var kl = $("input[name='yiban']:checked")
66. for (var i = 0; i < kl.length; i++) {
67. //查询条件
68. var condition = "";
69. //回调函数名
70. var name = ""
71. var name1 = ""
72. if (kl[i].value == "医院") {
73. condition = "NAME like '%医院'"
74. } else if (kl[i].value == "药店") {
75. condition = "NAME like '%药%'";
76. }
77. else if (kl[i].value == "社康") {
78. condition = "NAME like '%服务中心' or NAME like '%卫生站'";
79. }
80. // 查询。
81. var queryParam = [], queryBySQLService, queryByGeometryParameters;
82. // 查询参数传入所需要的信息
83. queryParam.push(new SuperMap.REST.FilterParameter({
84. name: "P15医疗服务_point_1@Zhuhai",
85. attributeFilter: condition
86. })),
87. //查询几何对象
88. queryByGeometryParameters = new SuperMap.REST.QueryByGeometryParameters({
89. queryParams: queryParam,
90. geometry: circleVector.geometry,
91. });
92. // SQL查询服务
93. queryBySQLService = new SuperMap.REST.QueryByGeometryService(url, {
94. eventListeners: { "processCompleted": processHospital, "processFailed": processFailed }//processCompleted 进行监听
95. });
96. //提交服务请求，传递服务查询参数
97. queryBySQLService.processAsync(queryByGeometryParameters);
98. }
99. }
需要注意的是：
var polygon = SuperMap.Geometry.Polygon.createRegularPolygon(chen_centerPoint, rou, 360, 360);//实例化多边形。第一个是经纬度，第二个是半径，第三个是边数，第四个是旋转角度。