GIS周边查询

《GIS项目–周边查询》研发阶段性总结

作者：马光佳
本次任务完成的时间：2018年1月16日~2019年1月18日
开发工具与关键技术：MicrossftVisualStudio，GIS
完成模块功能：周边查询

1.功能实现
周边查询主要功能是：获取中心点–》选择范围的半径–》勾选需要查询的地址–》点击查询界面显示地址的图标–》点击图标会显示地点是详细地址信息。如下图，是周边查询模块实现的界面
在这里插入图片描述
2.代码

周边查询页面结构的搭建
所以的方法调用，都是通过onclick=“”触发；
代码如下：

<li class="tpl-left-nav-item">
   <a href="#" class="nav-link tpl-left-nav-link-list " id="zwfx">
       <i class="icon iconfont icon-iconfontzhoubian"></i>
       <span>周边分析</span>
       <i class="icon iconfont icon-chaxun am-fr" id="icon-chaxun"></i>
   </a>
   <ul class="zwfx" style="display: none;">
       <li>
           <div class="zwfxhe" >
               <p style="margin:0px;padding:0px;">
                   <label class="zxd">中心点:</label>
                   <input style="width:120px;border:1px solid #a2b5ba;border-radius:5px;" id="getCenterLonLat"/>
                   <button style="" class="SelectE" name="SelectE"  onclick="Geometry()">选择</button>
               </p>
               <p style="margin:0px;padding:0px;">
                   <label class="bj" >半径:</label>
                   <input style="width:120px;border:1px solid #a2b5ba;border-radius:5px;" value="20000" name="name" id="SelectOp"/>
                   <label style="font-size:15px;font-weight:500;">米</label>
               </p>
               <p style="margin:0px;padding:0px;">
                   <label class="cxmb" >查询目标</label>
               </p>
               <p style="margin:0px;padding:0px;">
                   <input value="医院" type="checkbox" name='selectcheck' style="margin-left:2px;" />
                   <label style="font-size:10px;font-weight:500;">医院</label>
                   <input value="社康" type="checkbox" name='selectcheck'/>
                   <label style="font-size:10px;font-weight:500;">社康</label>
                   <input value="药店" type="checkbox" name='selectcheck'/>
                   <label style="font-size:10px;font-weight:500;">药店</label>
                   <input value="病例" type="checkbox" name='selectcheck'/>
                   <label style="font-size:10px;font-weight:500;">病例</label>
                   <a id="gengdou" style="font-size:10px;color:#309ff3;">更多>></a>
               </p>              
               <p style="margin:0px;padding:0px;">
                   <button type="button" name="name" class="bunn" style="margin-left:65px; background-color:#388dd4" onclick="Selectzb()">查询</button>
                   <button type="button" class="bunn" style="background-color:#337ab7;" onclick="eliminateAnalycz()">重置</button>
                   <button type="button"  class="bunn" style="background-color:red;" onclick="eliminateAnalysis()">清除</button>
               </p>
           </div>
       </li>
   </ul>
</li>

创建图层、控件

<body onload="init()"></body>在body里 调用init()的方法

var layer,map,markerLayer1;
 function init() {
 //创建图层
    markerLayer1 = new SuperMap.Layer.Markers("markerLayer1 ");
 //创建点查询控件
	drawRectangle3 = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Point);
	drawRectangle3.events.on({ "featureadded": drawPointComp });
	 //定义layer图层，TiledDynamicRESTLayer：分块动态 REST 图层
       layer = new SuperMap.Layer.TiledDynamicRESTLayer("map", url,
           {
               transparent: true,
               cacheEnabled: true
           }, {
               maxResolution: "auto"                    
           });
       //为图层初始化完毕添加addLayer()事件
       layer.events.on({ "layerInitialized": addLayer });

      //地图界面
       map = new SuperMap.Map("map", {
           controls: [
           new SuperMap.Control.LayerSwitcher(),
           new SuperMap.Control.OverviewMap(),
           new SuperMap.Control.PanZoomBar(),
           new SuperMap.Control.ScaleLine(),               
           new SuperMap.Control.MousePosition(),//该控件显示鼠标移动时，所在点的地理坐标
           new SuperMap.Control.Navigation({
               dragPanOptions: {
                   enableKinetic: true
               }
           }),
           drawRectangle3]
       });           
   }
}
//加载图层
 function addLayer() {
     map.addLayers([layer, markerLayer1]);//结束保持选中的部分
     map.setCenter(new SuperMap.LonLat(113.079347500686, 23.0312674874081), 1);//地图显示的中心点位置    
  }

获取中心坐标点
代码如下：
Geometry()是选择按钮事件的方法；

//点
function Geometry() {
   //先清除上次的显示结果
   clearFeatures();
   drawRectangle3.activate();
  
}
//点查询
function drawPointComp(drawGeometryArgs) {
	var x = drawGeometryArgs.feature.geometry.x;//声明变量获取x轴的值
	var y = drawGeometryArgs.feature.geometry.y;//声明变量获取y轴的值
	var size = new SuperMap.Size(25, 20),//设置获取中心点图标的宽度和高度
	offset = new SuperMap.Pixel(-(size.w / 2), -size.h),//Pixel是图标的像素，用offset接收
	icon = new SuperMap.Icon("/SuperMap/theme/images/marker.png", size, offset);//图标的相片，用icon接收
	marker = new SuperMap.Marker(new SuperMap.LonLat(x, y), icon);//用marker接收图标
	markerLayer.addMarker(marker);//在markerLayer图层添加marker（图标）
	$("#getCenterLonLat").val(x + "," + y) //回填中心点          
	drawRectangle3.deactivate();//关闭编辑
}

点击查询按钮
代码如下：

//点击周边查询的按钮事件
function Selectzb(X, Y) {
   clearFeatures();
    var centerPoint;
    var SelectOp = $("#getCenterLonLat").val();//声明SelectOp获取中心点的值
    //圆
    var mi = $("#SelectOp").val();//声明mi获取半径的值
    var s = parseInt(mi) / 100;//半径除以100，并且用（parseInt）将字符串转换成整数，声明变量s接收
    if (SelectOp == "") {//中心点的值
        centerPoint = new SuperMap.Geometry.Point(X, Y);
    } else {
        var SelectOp1 = SelectOp.split(",")//把中心点（x值,y值)分割
        centerPoint = new SuperMap.Geometry.Point(SelectOp1[0], SelectOp1[1]);
    }
    var circleP = createCircle(centerPoint, s / 3000, 256, 360, 360);//circleP圆圈，以选的半径在获取的中心点里制造一个圆（用画圆的方法）并且声明变量接收
    var circleVector = new SuperMap.Feature.Vector(circleP);
    circleVector.style = {//圆圈的样式
        strokeColor: "#f45959",
        fillColor: "red",
        strokeWidth: 3,
        fillOpacity: 0.1
    };
    obj = document.getElementsByName("selectcheck");//获取name名叫selectcheck的input
    chVal = [];
    for (k in obj) {
        if (obj[k].checked) {
            chVal.push(obj[k].value);
        }
    }
    for (var k = 0; k < chVal.length; k++) {
        if (chVal[k] == "医院") {
            lineLayer.addFeatures(circleVector);
            var queryByDistanceParams = new SuperMap.REST.QueryByDistanceParameters({
                queryParams: new Array(new SuperMap.REST.FilterParameter({ name: "P15医疗服务_point_1@FOSHNAGNANHAI#1", attributeFilter: "NAME like '%" + "医院" + "%'" })),
                returnContent: true,
                distance: s / 3000,
                geometry: centerPoint
            });
            var queryByDistanceService = new SuperMap.REST.QueryByDistanceService(url);
            queryByDistanceService.events.on({
                "processCompleted": procesCompletedyd,//点击触发查询医院的方法
                "processFailed": processFailed
            });                    
            queryByDistanceService.processAsync(queryByDistanceParams);
        }            
    }   
}

调用查询医院的方法

代码如下：

//医院
function procesCompletedyd(queryEventArgs) {
   var i, j, result = queryEventArgs.result;
   if (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 feature = recordsets[i].features[j];
                   var point = feature.geometry;
                   if (point.CLASS_NAME == SuperMap.Geometry.Point.prototype.CLASS_NAME) {
                       var size = new SuperMap.Size(33, 33),
                       offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
                       icon = new SuperMap.Icon("/SuperMap/theme/images/fillStyle/医院.png", size, offset);
                       marker = new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon);                       
                       marker.name = feature.attributes.NAME;
                       marker.laction = feature.attributes.ADDRESS;
                       marker.GISID = feature.attributes.SmID;
                       marker.Dianhua = feature.attributes.TELEPHONE;
                   } else {
                       feature.style = style;
                       vectorLayer1.addFeatures(feature);
                   }
                   markerLayer1.addMarker(marker);//在markerLayer1图层输出marker的数据
                   marker.events.on({
                       "click": mouseClicHandler,//触发click事件会调用弹窗方法
                       "touchstart": mouseClicHandler,//假如要在移动端的浏览器也实现点击弹框，则在注册touch类事
                   });
               }
           }
       }
   }
}

上面是查询医院的方法，如果还需要查询更多，以else if （）{}的结构拼接下去即可

画圆的方法
构写画圆的方法，在点击查询按钮时调用画圆的方法进行下一步的操作
代码如下：

  //圆(画圆)
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);
    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;
}

弹窗方法
弹窗是指在图层里查询出相当于范围的地点，并且每个地点都有一个图标在此标记着，点击图层上的图标，弹窗会显示，显示该地点的详细地址信息
代码如下：

var infowin = null;
//定义mouseClickHandler函数，触发click事件会调用此函数
function mouseClicHandler(event) {
    closeInfoWin();
    var XCoordinate = event.object.lonlat.lon;
    var YCoordinate = event.object.lonlat.lat;
    var name = event.object.name;
    var laction = event.object.laction;
    var Dianhua = event.object.Dianhua;
    var Type = event.object.type;

    var contentHTML = "<div class='popwin_titleDiv' style='text-align:center;height:26px;font-size:16px;'><span class='popwin_title'>地址点</span></div><div style='font-size:20px;'><b>名称： </b>" + name + "<br/><b>所在地址:&nbsp;</b>" + laction + "<br/><b>联系电话：</b>" + Dianhua + "</div>";

    var size = new SuperMap.Size(21, 25),
                        offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
                        icon = new SuperMap.Icon("/SuperMap/theme/images/marker.png", size, offset);
    //初始化FramedCloud类
    framedCloud = new SuperMap.Popup.FramedCloud(
   "chicken",
     new SuperMap.LonLat(XCoordinate, YCoordinate),
    null,
    contentHTML,
    icon,
    true,
    null,
    true
    );
    infowin = framedCloud;
    map.addPopup(framedCloud);
    map.panTo(new SuperMap.LonLat(XCoordinate, YCoordinate));
}

清除和重置按钮

点击清除按钮将清除图层的数据、勾选的input值、中心点的数据、半径恢复原来默认的值，无法再获取中心点，需要再点击选择才可以
点击重置按钮将清除图层的数据、勾选的input值、中心点的数据、半径恢复原来默认的值，可以在图层里再次选择新的中心点进行下一步的操作
代码如下：

//清除
function eliminateAnalysis() {
   $("[name='selectcheck']").removeAttr("checked");//清空勾选checked的值            
   $("#SelectOp").val("20000");//清除半径，并且赋值半径为20000
   $("#getCenterLonLat").val("");//清空中心点
   clearFeatures();//调用清除按钮的方法清除图层的内容           
}
//重置
function eliminateAnalycz() {
   $("[name='selectcheck']").removeAttr("checked");//清空勾选checked的值            
   $("#SelectOp").val("20000");//清除半径，并且赋值半径为20000
   $("#getCenterLonLat").val("");//清除中心点
   clearFeatures();//调用清除按钮的方法清除图层的内容
   Geometry();//调用获取中心点的方法 
}

《GIS项目–周边查询》研发阶段性总结

猜你喜欢