GIS区域定位

GIS区域定位

一、功能实现
区域定位主要包括11个定位地点,点击地图可以实现定位到点击的区域
区域定位的实现界面:见下图。
GIS区域定位
点击上图中的龙城街道可以定位到龙城街道区域的位置,如下图
GIS区域定位
点击上图中的大鹏镇街道可以定位到大鹏镇街道区域的位置,如下图
GIS区域定位
二、相关操作
要定位到某一区域,首先要在SuperMap iDesktop 8C中把这一区域进行切割、编辑节点、添加节点,如下图
GIS区域定位
然后添加该区域的x,y坐标到数据库中如下图
GIS区域定位
三、经典代码

 <li id="qydw" class="libox">
           <p>所选地区 : <i onclick="clickSelectMap(1)">龙岗区</i></p>
           <p>
              <i id="" onclick="clickSelectMap(2)">南澳街道</i>
              <i id="" onclick="clickSelectMap(4)">大鹏镇街道</i>
              <i id="" onclick="clickSelectMap(6)">葵涌街道</i>
              <i id="" onclick="clickSelectMap(8)">坂田街道</i>
           </p>
           <p>                            
              <i id="" onclick="clickSelectMap(9)">横岗街道</i>
              <i id="" onclick="clickSelectMap(10)">龙城街道</i>
              <i id="" onclick="clickSelectMap(12)">坪山街道</i>
              <i id="" onclick="clickSelectMap(14)">坑梓街道</i>
           </p>
           <p>                        
               <i id="" onclick="clickSelectMap(15)">龙岗镇</i>
               <i id="" onclick="clickSelectMap(16)">坪地街道</i>
           </p>                    
      </li>     

//查询事件
function clickSelectMap(Id) {
    var queryParam = [], queryBySQLParams, queryBySQLService;
    villagesLayer.setVisibility(true);
        //查询子网格
        queryParam.push(new SuperMap.REST.FilterParameter({
            name: "乡镇区域[email protected]_Data",//查询数据集名称或者图层名称,根据实际的查询对象而定,必设属性
            attributeFilter: "SmID=" + Id,//属性过滤条件  相当于 SQL 语句中的 WHERE 子句,
        }));

    //SQL 查询参数类。 该类用于设置 SQL 查询的相关参数。
    queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
        queryParams: queryParam//查询过滤条件参数数组
    });
    //SQL 查询服务类。 在一个或多个指定的图层上查询符合 SQL 条件的空间地物信息。
    queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {//url 服务的访问地址
        eventListeners: { "processCompleted": processCompleted_PG }
    });
    //传递到服务端
    queryBySQLService.processAsync(queryBySQLParams);

}

//查询成功调用
function processCompleted_PG(queryEventArgs) {
    //声明字段
    var i, j, feature, bounds, N = [], S = [], W = [], E = [],
    result = queryEventArgs.result;//获取服务器传回来的数据
    villagesLayer.removeAllFeatures();//清除上一次查询
    map.addLayer(villagesLayer);
    var features = [];
    //判断是否有数据
    if (result.currentCount > 0) {
        if (result && result.recordsets) {//判断查询的查询结果记录集数组是否为空
            for (i = 0; i < result.recordsets.length; i++) {//循环记录集数组
                //features===用于存放矢量要素
                if (result.recordsets[i].features) {//判断记录集数组的矢量要素是否为空
                    //如果记录集数组的矢量要素不为空,则又循环 记录集数组的矢量要素
                    for (j = 0; j < result.recordsets[i].features.length; j++) {
                        feature = result.recordsets[i].features[j];//获取记录集数组的矢量要素
                        //判断显示面或点
                        var smID = parseInt(feature.data.SmID);
                        feature.smID = smID;
                        if (smID != "") {//清空
                            //社区网格
                            feature.style = {
                                strokeColor: 'Orange',//边颜色
                                strokeWidth: 1,//边宽度
                                strokeDashstyle: 'solid',//边类型,虚线
                                fillColor: 'Orange',//填充颜色
                                fillOpacity: 0.15,//透明度
                                label: feature.data.Name,
                                fontColor: 'red',
                                fontOpacity: "1",
                                fontSize: '10px',
                                fontWeight: 700
                            };
                            villagesLayer.addFeatures(feature);//给这个图层添加features。也就是把查询结果显示出来   
                        } else {
                        }
                        bounds = feature.geometry.bounds;
                        if (bounds != null) {
                            if (bounds.top != null && Boolean(bounds.top) == true) {
                                N.push(Number(bounds.top));
                            }
                            if (bounds.bottom != null && Boolean(bounds.bottom) == true) {
                                S.push(Number(bounds.bottom));
                            }
                            if (bounds.left != null && Boolean(bounds.left) == true) {
                                W.push(Number(bounds.left));
                            }
                            if (bounds.right != null && Boolean(bounds.right) == true) {
                                E.push(Number(bounds.right));
                            }
                        }
                    }

                }
            }
        }

        if (W.length > 0 && S.length > 0 && E.length > 0 && N.length > 0) {
            var bounds = new SuperMap.Bounds(
                                          Math.min.apply(null, W),//最小的水平坐标系。
                                          Math.min.apply(null, S),//最小的垂直坐标系。
                                          Math.max.apply(null, E),//最大的水平坐标系。
                                          Math.max.apply(null, N) //最大的垂直坐标系。
                                      );

            map.zoomToExtent(bounds);//缩放到指定范围,重新定位中心点。
        }
    } else {
        map.removeLayer(villagesLayer);//清除图层
        map.setCenter(new SuperMap.LonLat(112.88, 23.2));//重新定位中心点。
    }
    
}