实现SuperMap GIS 周边查询

关键技术：SuperMap GIS、JavaScript 、Jquery
发布人：李嘉乐
撰写时间： 2019/01/18

一、先用SuperMap iDesktop 9D 制作一张地图，然后通过SuperMap iServer 发布地图。再在Visual Studio 通过视图层实例化需要的控件和图层并展示地图。

代码如下：

var map, layer,polygonLayer,vector ,markerLayer ,markerLayer2,drawPoint，infowin = nullurl = 'http://localhost:8097/iserver/services/map-ZengChengQu/rest/maps/区县界_region_1@ZengChengregion1';//地图路径function init() {polygonLayer = new SuperMap.Layer.Vector("Vector Layer");//矢量图层markerLayer = new SuperMap.Layer.Markers("Markers");//点坐标标志图层markerLayer2 = new SuperMap.Layer.Markers("Markers");//点坐标标志图层vector = new SuperMap.Layer.Vector("vector");//绘圆图层drawPoint = new SuperMap.Control.DrawFeature(polygonLayer, SuperMap.Handler.Point);//绘点控件声明drawPoint.events.on({ "featureadded": drawCompletedCenter});map = new SuperMap.Map("map", {controls: [new SuperMap.Control.Zoom(),//缩放控件new SuperMap.Control.LayerSwitcher(),///图层管理器new SuperMap.Control.Navigation({//地图浏览控件dragPanOptions: {enableKinetic: true}}), drawPoint]});//添加控件layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null, { maxResolution: "auto" }); //向服务请求地图，声明图层layer.events.on({ "layerInitialized": addLayer });//layer监听事件//SuperMap.Layer.Vector 该图层用于渲染矢量要素。}function addLayer() {map.addLayers([layer, vector, markerLayer2, polygonLayer, markerLayer]);//添加图层map.setCenter(new SuperMap.LonLat(113.822210532997, 23.290412124899), 3);//地图中心坐标}

二、要执行周边查询，那么就要先明确一个周边查询的中心点。代码如下：

            function drawCompletedCenter(drawGeometryArgs) {drawPoint.deactivate();//选择中心点禁用markerLayer.clearMarkers();//清除标签图层polygonLayer.removeAllFeatures();//清除矢量图层var x = drawGeometryArgs.feature.geometry.x;//获取中心的x坐标var y = drawGeometryArgs.feature.geometry.y//获取中心的y坐标$("#X").html(x);$("#Y").html(y);//给两个分别元素赋上x,y坐标值，显示为none. 方便随时利用。var center= point.x + "," + point.y;$("#center").val(center);//回填中心点坐标var point = drawGeometryArgs.feature.geometry,//获取到对象的相应数据size = new SuperMap.Size(44, 33),//大小//Pixel ： 屏幕坐标offset = new SuperMap.Pixel(-(size.w / 2), -size.h),icon = new SuperMap.Icon("/Content/img/maker_L _Red2.png", size, offset);markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon));//添加标签图层}function xuanze() {drawPoint.activate();//选择中心点激活}

三、有了中心点后，输入需要查询的范围，可勾选多项复选框查询你想要的信息。由于点击查询时可以实现查询多种不同的数据集，我就联想到在每个复选框的value中都给到了相对应的数据集图层名称,用for循环给queryParams数组添加查询过滤条件来实现该功能。每个蓝色标签图层都是查询出来的结果标签图层，点击它就会弹出相对应的结果信息（名称、地址）。

代码如下：

<div id="fuxuan"><div class="checkbox-inline"><input type="checkbox" class="toggle-checkbox" value="P17公司企业_point_1@ZengChengregion" name="">公司</div><div class="checkbox-inline"><input type="checkbox" class="toggle-checkbox" value="P15医疗服务_point_1@ZengChengregion" name="">社康</div><div class="checkbox-inline"><input type="checkbox" class="toggle-checkbox" value="P11商业大厦_point_1@ZengChengregion" name="">商业大厦</div>
</div>
//<---------------------------------------------------------->function addData()//添加圆矢量图层，并向服务请求数据请求数据{var scope= $("#scope").val();//获取查询范围的半径var x = $("#X").html();//获取中心点x轴坐标var y = $("#Y").html();//获取中心点y轴坐标var centerPoint = new SuperMap.Geometry.Point(x, y);//实例化点对象if (x =="" || y== "") {//判断是否选到中心点alert("请选择中心点！！");} else {markerLayer.clearMarkers();//清除中心点标签图层markerLayer2.clearMarkers();//清除查询结果标签图层polygonLayer.removeAllFeatures();//清除点矢量图层vector.removeAllFeatures();//清除圆面矢量图层if (scope* 1 < 100) {//对查询周边区域的范围做判断alert("输入范围不能大于1500米，不能小于100米");} else if (scope* 1 > 1500) {alert("输入范围不能大于1500米，不能小于100米");} else {///createCircle:创建圈子var queryParams = [];var circleP = createCircle(centerPoint, scope/ 300000, 256, 360, 360);//调用绘圆方法var circleVector = new SuperMap.Feature.Vector(circleP);//实例化圆矢量图层circleVector.style = {strokeColor: "#92d7d1",fillColor: "#92d7d1",strokeWidth: 2,fillOpacity: 0.2};//样式vector.addFeatures(circleVector);//circleVector添加到vector图层var v = $("#fuxuan input[type=checkbox]:checked").length;//获取到勾选上的复选框长度if (v == 0) {alert("请选择一种筛选条件！！");} else {//有勾选就执行下面代码for (var i = 0; i < v; i++) {var t = $("#fuxuan input[type=checkbox]:checked")[i].attributes.value.nodeValue;//声明t 获取勾选到当前索引值i的复选框的value值queryParams.push(new SuperMap.REST.FilterParameter({ name: t }))//给queryParams添加查询条件}}var queryByDistanceParams = new SuperMap.REST.QueryByDistanceParameters({//查询过滤条件声明queryParams: queryParams,returnContent: true,distance: scope/ 300000,//范围geometry: centerPoint//对象});var queryByDistanceService = new SuperMap.REST.QueryByDistanceService(url);//查询服务实例化queryByDistanceService.events.on({"processCompleted": processCompleteds  //成功执行processCompleteds方法"processFailed": processFailed     //失败执行processFailed 方法});queryByDistanceService.processAsync(queryByDistanceParams);//向服务端异步请求，并返回结果数据}}}//绘制圆的方法function createCircle(origin, radius, sides, r, angel) {var rR = r * Math.PI / (180 * sides);var rotatedAngle, x, y;var points = [];for (var i = 0; i < sides; ++i) {rotatedAngle = rR * i;  //旋转角度x = origin.x + (radius * Math.cos(rotatedAngle));y = origin.y + (radius * Math.sin(rotatedAngle));points.push(new SuperMap.Geometry.Point(x, y));}rotatedAngle = r * Math.PI / 180;x = origin.x + (radius * Math.cos(rotatedAngle));y = origin.y + (radius * Math.sin(rotatedAngle));points.push(new SuperMap.Geometry.Point(x, y));var ring = new SuperMap.Geometry.LinearRing(points);//闭合线环ring.rotate(parseFloat(angel), origin);//rotate旋转  parseFloat：浮点  origin：中心坐标点//SuperMap.Geometry.Collection 几何对象集合类，存储在本地的 components 属性中（可作为参数传递给构造函数）。 随着新的几何图形添加到集合中，将不能被克隆，当移动几何图形时，需要指定参照物。 getArea和getLength函数只能通过遍历存储几何对components 数组，总计所有几何图形的面积和长度。 构造函数 SuperMap.Geometry.Collection 实例化此类新的实例。 var geo = new SuperMap.Geometry.Collection([ring]);geo.origin = origin;geo.radius = radius;geo.r = r;geo.angel = angel;geo.sides = sides;geo.polygonType = "Curve";//多边形类型=曲线return geo;}//添加查询结果标签图层方法function processCompleteds(queryEventArgs) {var x = $("#X").html();//x轴var y = $("#Y").html();//Y轴map.setCenter(new SuperMap.LonLat(x, y), 6);//地图中心位置var i, j, result = queryEventArgs.result, marker;//queryEventArgs服务端返回的对象if (result && result.recordsets) {//判断传来的result 和 result.recordsets是否有值for (i = 0, recordsets = result.recordsets, len = recordsets.length; i < len; i++) {if (recordsets[i].features) {for (j = 0; j < recordsets[i].features.length; j++) {var f = recordsets[i].features[j];//某个对象的具体数据var point = f.geometry,//x,y坐标信息size = new SuperMap.Size(22, 25),offset = new SuperMap.Pixel(-(size.w / 2), -size.h),icon = new SuperMap.Icon("/Content/img/maker_L_Blue.png", size, offset);//图标marker = new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon);//添加查询结果标签图层marker.n = f.attributes.NAME; //指定某个对象的NAME属性值marker.dz = f.attributes.ADDRESS;marker.type = f.attributes.TYPE;marker.events.on({//marker的监听事件"click": openInfoWins,//单击事件"touchstart": openInfoWins, //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件"scope": marker});markerLayer2.addMarker(marker);//添加标签图层}}}}}function processFailed(e) {alert(e.error.errorMsg); //错误提示} //单击出弹窗方法function openInfoWins() {closeInfoWin();//关闭弹窗var marker = this;//单击当前的对象var lonlat = marker.getLonLat();//获取对象坐标var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";contentHTML += "<div> 名称：" + marker.n + "</div><br/><div> 地址：" + marker.dz + "</div></div>";//弹窗信息var size = new SuperMap.Size(0, 33);var offset = new SuperMap.Pixel(0, -size.h);var icon = new SuperMap.Icon("/Content/img/maker_L_Blue.png", size, offset);//实例化弹窗  FramedCloud:具有指向的弹窗  Popup：弹窗类var popup = new SuperMap.Popup.FramedCloud("popwin",new SuperMap.LonLat(lonlat.lon, lonlat.lat),null,contentHTML,icon,true);infowin = popup;map.addPopup(popup);//添加弹窗} //弹窗打开方法

四、清空所有数据（文本框、复选框、标签图层、矢量图层、弹窗）

代码如下：

//点击清空按钮进行清空操作function removeData() {closeInfoWin();//关闭弹窗vector.removeAllFeatures();//圆矢量图层删除markerLayer.clearMarkers();//中心点标签图层清除markerLayer2.clearMarkers();//查询结果标签图层清除polygonLayer.removeAllFeatures();//中心点矢量图层清除$("#center").val("");//中心文本值为空$("#scope").val("");//查询范围为空$("#fuxuan input[type=checkbox]").attr("checked", false);//设置复选框为不勾选状态}

四、总结：
通过半个月的自学，我了解到SuperMap iDesktop 9D 是个制作地图的开发软件，SuperMap iserver 是一个发布地图的服务器。通过视图层与SuperMap iserve服务器对接将地图展示在客户端。由于第一次接触GIS方面的知识，发现自己还有很多地方理解的不到位，很多技术没能掌握的透彻，需要更加努力，用时间和汗水来弥补自己的不足。同时也体会到了自学的好处，可以提升个人的思维、假想能力。当你遇到一个自己完全搞不懂的难题时，然后你很投入地去想办法去解决，通过一些其他的渠道一步一步的把它解决了。这时候我就会感到很有成就感，越发的有动力。我会一直努力，不忘初心！

实现SuperMap GIS 周边查询相关推荐

SuperMap画圆的周边查询
SuperMap画圆的周边查询 ·························································· 开发工具:Visual Studio 2015 关 ...
SuperMap GIS查询
SuperMap GIS的二次开发是在地图的基础上开发使用一些功能,让人更加方便的使用地图.功能中当然有查询,而查询分类有:1.地图查询 2.数据查询. 地图查询主要针对地图中的数据进行的各类查询:S ...
Supermap GIS二次开发之查询面内数据是否有点数据
Supermap GIS二次开发之查询面内数据是否有点数据作者:谢景,撰写时间:2019-1-18 在我们进行GIS二次开发的时候,经常会需要查询某个面区域里是否有点数据,或者是面区域里面的点数据是 ...
SuperMap GIS二次开发MVC实战训练-佛山顺德慢性病GIS项目总结
SuperMap GIS二次开发MVC实战训练-佛山顺德慢性病GIS项目总结作者:谢景任务完成时间:2018年12月24日-2019年1月15日完成模块功能:区域定位.查询搜索.路径分析.周边分 ...
SuperMap GIS基础产品三维GIS FAQ集锦（1）
SuperMap GIS基础产品三维GIS FAQ集锦(1) [WebGL]交通仿真示例代码中,动态图层中加载带有透明度的S3M模型,遮挡了其他不带有透明度的S3M模型,怎么办? [问题原因]加载ur ...
SuperMap GIS 10i倾斜摄影白皮书
倾斜摄影数据在生产成本.生产周期及真实性.精确度方面具有明显优势,推动三维GIS应用持续快速发展.SuperMap在倾斜摄影数据的高性能加载.对象化管理及专业空间分析方面实现了众多技术创新,提升了 ...
《SuperMap GIS二次开发MVC实战训练---江海区慢性病防治院系统》项目研发阶段性总结
<SuperMap GIS二次开发MVC实战训练-江海区慢性病防治院系统>项目研发阶段性总结作者:爱怡同学本次任务完成时间:2019年1月1日-2019年1月10日开发工具与关键技术 ...
SuperMap GIS 8C(2017) 产品白皮书
详细资料下载地址:http://download.csdn.net/detail/supermapsupport/9816637 目录 1 认识SuperMap GIS 8C(2017) 1. ...
SuperMap GIS BIM类型数据优化 QA
一.BIM数据特点 BIM数据它不仅可以在设计中应用,还可应用于建设工程项目的整个寿命周期中:用BIM进行设计属于数字化设计:BIM的数据库是动态变化的,在应用过程中不断在更新.丰富和充实:为项目参与 ...

实现SuperMap GIS 周边查询

实现SuperMap GIS 周边查询相关推荐

最新文章

热门文章