GIS地图实现点击按钮获取中心点的范围进行查询

<script src="~/MyFirst/libs/SuperMap.Include.js">script>//超图的插件
<body onload="init()">
<div id="map">
 <ul>
 <li class="active">
       
        <a href="javascript:;"> 
            中心点:
            <button onclick="XZ()" style="border:solid 1px #0099ff;background-color:#0099ff;color:#ffffff;">选择button>
          a>
          <b class="arrow">b>
      li>
  <li class="active">
           
      <a href="javascript:;">
          查询目标:
       <label for="red">医院label>
       <input type="checkbox" name="favcolor" id="red" value="red">
       <label for="blue">小区label>
       <input type="checkbox" name="favcolor" id="blue" value="blue">
       a>
 li>
      <li class="active">
          <a href="javascript:;">
            <button onclick="CX()" style="border:solid 1px #0099ff;background-color:#0099ff;color:#ffffff; margin-left: 80px;">查询button>
            <button onclick="QC()" style="border:solid 1px #0099ff;background-color:#0099ff;color:#ffffff;">清除button>
            a>
      li>
ul>
div>
body>

上面就是我个人写的样式,下面是我实现功能的代码

里面代码都有注释,讲解————在最后面有完成后功能的效果图片

<script>
var map, layer, tu2, vew;//变量
style = {
    strokeColor: "#304DBE",
    strokeWidth: 2,
    pointerEvents: "visiblePainted",
    fillColor: "#304DBE",//渐变文字和镂空文字的效果
    fillOpacity: 0.8
},
    url = "http://localhost:8090/iserver/services/map-GISLW/rest/maps/荔湾区";//这里写的是你上传地图的显示后的路径
function init() {
    //初始化地图
    map = new SuperMap.Map("map");
  
    //对线图层应用样式style(前面有定义)
    layer = style;
    //创建圆图层
    vector = new SuperMap.Layer.Vector("vector");//周边查询图层
    tu2 = new SuperMap.Layer.Markers("M");//周边查询图层
    drawPoint = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Point);//点图层
    drawPoint.events.on({ "featureadded": getMousePositionPx });//featureadded 触发此事件时会传入事件参数
    //初始化地图图层
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null, { maxResolution: "auto" });
    //监听图层信息加载完成事件
    layer.events.on({ "layerInitialized": addLayer });//地图的监听事件
    
    map.addControl(new SuperMap.Control.OverviewMap());//添加地图控件//鹰眼窗口
    map.addControl(new SuperMap.Control.LayerSwitcher());//右上角的图标控件
    map.addControl(new SuperMap.Control.ScaleLine(), new SuperMap.Pixel(30, 750));//控件显示相对于地图左上角的像素位置,不可见控件不支持该操作。
    //Pixel(x(left), y(top));添加mode来设置方位(四个角)  addControl 为地图添加控件。
    //可选的位置参数用来指定控件的像素位置。 Pixel:此类用x,y坐标描绘屏幕坐标(像素点)。
};
function addLayer() {//监听事件的方法
    map.addLayer(layer);//地图图层
    map.addLayer(vector);//周边查询图层
    map.addLayer(tu2);//周边查询图层
    //显示地图范围
    map.setCenter(new SuperMap.LonLat(113.225890711138, 23.0967040935824), 4);//中心点
}
----------中心点查询开始--------------------//
 function XZ() {//选择按钮
    map.addControl(drawPoint);//添加到视图
    drawPoint.activate();//激活图层
}
//鼠标坐标与地图坐标
function getMousePositionPx(e) {//触发事件
    drawPoint.deactivate();//改变控件的状态 deactivate()
    var geometry = e.feature.geometry;//获取X轴,Y轴坐标
    $("#ZXD").val(geometry.x.toFixed(5) + "," + geometry.y.toFixed(5));//回填X轴,Y轴坐标---.toFixed(5)可把 Number 四舍五入为指定小数位数的数字
}
function CX() {//查询按钮
    vector.removeAllFeatures(circleVector);//移除上一次的结果
    var s = $("#BJ").val();//获取半径
    if (Number(s)) {
        var X = $("#ZXD").val().split(",")[0];//分割获取X轴
        var Y = $("#ZXD").val().split(",")[1];//分割获取Y轴
        var centerPoint = new SuperMap.Geometry.Point(X, Y);//点几何对象类
        var circleP = createCircle(centerPoint, s / 500000, 256, 360, 360);//createCircle画圆
        var circleVector = new SuperMap.Feature.Vector(circleP);//获取计算后的值
        circleVector.style = {//给圆添加颜色
            strokeColor: "blue",//线边框颜色
            fillColor: "blue",//面的颜色
            strokeWidth: 2,//边框像素宽度
            fillOpacity: 0.3//填充不透明度。取值范围[0, 1],默认值 1
        };
        vector.addFeatures(circleVector);//添加到图层
    } else {
        alert("查询条件不能为空!请选择");
    }
}
//圆
function createCircle(origin, radius, sides, r, angel) {//圆形范围的生成
    queryByDistance(origin, radius);//热点渲染的最大半径radius, 多边形的中心origin
    var rR = r * Math.PI / (180 * sides);//边数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]);//ring环状图
    geo.origin = origin;//中心
    geo.radius = radius;//边数
    geo.r = r;//半径
    geo.angel = angel;// 旋转角度
    geo.sides = sides;//边数
    geo.polygonType = "Curve";
    return geo;//返回
}

function queryByDistance(origin, radius) {//获取半径,中心
    tu2.clearMarkers();//移除上一次的标记物
    centerPoint = new SuperMap.Geometry.Point(origin.x, origin.y);//获取X轴,Y轴
    var queryParams = [];//声明一个数组
    if ($("#red")[0].checked == true) {//判断医院复选框
        queryParams.push(new SuperMap.REST.FilterParameter({ name: "P15医疗服务_point_1@GISLW" }));
    }//根据SupeMap里的数据查询在该范围内的所有医院药店的数据(P15医疗服务_point_1@GISLW)数据及后面必须@相对应的数据源
    if ($("#blue")[0].checked == true) {//判断小区复选框
        queryParams.push(new SuperMap.REST.FilterParameter({ name: "P19住宅小区_point_1@GISLW" }));
    }//根据SupeMap里的数据查询在该范围内的所有小区的数据(P19住宅小区_point_1@GISLW)数据及后面必须@相对应的数据源
    if ($("#red")[0].checked != true && $("#blue")[0].checked != true) {
        alert("请选择查询对象");//判断是否选中
    }
    var queryByDistanceParams = new SuperMap.REST.QueryByDistanceParameters({//"QueryBySQLParameters"---SQL 查询参数类。 该类用于设置 SQL 查询的相关参数
        queryParams: queryParams,//queryParams查询过滤条件参数数组
        returnContent: true,
        distance: radius,
        geometry: centerPoint,
        //isNearest: true
    });
    var queryByDistanceService = new SuperMap.REST.QueryByDistanceService(url);
    queryByDistanceService.events.on({
        "processCompleted": processCompleted2,//触发事件的名称
        "processFailed": processFailed2
    });
    queryByDistanceService.processAsync(queryByDistanceParams);
}
function processCompleted2(queryEventArgs) {//触发以后获取queryEventArgs数组
        var marker = null;//声明一个空的变量
        var i, j, result = queryEventArgs.result; //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 TYPE = parseInt(feature.attributes.TYPE);
                            if ($("#blue")[0].checked == true && TYPE > 7000)//小区//根据TYPE来判断生成小区图标
                            {
                                //console.log(TYPE)
                                var size = new SuperMap.Size(44, 33),//大小
                               offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
                               icon1 = new SuperMap.Icon("/SuperMap/images/marker-RK.png", size, offset);//显示标点的图片
                            }
                            if ($("#red")[0].checked == true && TYPE <= 2900)//药店,医院根据TYPE来判断生成医院的图标
                            {
                                //console.log(TYPE)
                                var size = new SuperMap.Size(44, 33),//大小
                                offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
                                icon1 = new SuperMap.Icon("/SuperMap/images/marker-RK-GZ.png", size, offset);//显示标点的图片
                            }
                            marker = (new SuperMap.Marker(new SuperMap.LonLat(point.x, point.y), icon1));
                            marker.address = feature.data.ADDRESS + feature.data.NAME;
                            // ambitus(X, Y, address);
                            marker.events.on({ "click": zhoubian, "scope": marker, });//zhoubian的点击事件,
                            tu2.addMarker(marker);//提交到图层
                        } else {
                            feature.style = style;
                            s.addFeatures(feature);
                        }
                    }
                }
            }
        }
    } 
function QC() {//清除按钮
    vector.removeAllFeatures();//清除图层
    tu2.clearMarkers();//清除图层
}
function processFailed2(e) {
    alert(e.error.errorMsg);
}
//医院
function zhoubian() {
    var marker = this;//获取当前的点击的数据
    var lonlat = marker.getLonLat();
  
    var contentHTML = "
"; contentHTML += marker.address;//点击图标弹出该图标的地址 contentHTML += "
"
; outdiv = new SuperMap.Popup.FramedCloud( "chicken", marker.getLonLat(), null, contentHTML, null, true, null, true ); infowinonMessage = outdiv; map.addPopup(outdiv); }
script>

以下就是我展现的功能图片

GIS地图实现点击按钮获取中心点的范围进行查询_第1张图片

你可能感兴趣的:(GIS)