GIS开发-天地图按照地名搜索定位

其他 2018-06-08 10:07:46 阅读次数: 2

在做GIS开发的时候，底图采用天地图（使用天地图的矢量瓦片图层和遥感影像图层），实现按照地名搜索定位的时候，如果调用OSM官方文档接口会出现很多地方都搜索不到的情况，所以决定采用天地图的服务接口来实现地理定位。查看了天地图的官网的文档，参考网址如下：

https://developer.mapquest.com/documentation/open/nominatim-search/search/ （OSM提供服务接口）
http://www.tianditu.com/query.shtml（天地图提供服务接口）

在地址栏输入 ：http://www.tianditu.com/query.shtml?postStr={“keyWord”:”角门西”,”level”:”11”,”mapBound”:”-180,-90,180,90”,”queryType”:”1”,”count”:”20”,”start”:”0”}’+’&type=query，服务器返回的数据如下：（因为根据经纬度的范围会有所区分，经纬度的范围是-180,-90,180,90，所以会把你搜索的有关角门西的地方都会检索到，然后再根据检索到的地方进行自焚到某条街道某条具体地址的位置）

{"count":"87","resultType":2,"mclayer":"","statistics":{"citysCount":7,"priorityCitys":[{"ename":"BeiJing Shi","name":"北京市","count":"81","adminCode":156110000,"lon":"116.412616","lat":"40.185590999999995"},{"ename":"Nanning Shi","name":"南宁市","count":"1","adminCode":156450100,"lon":"108.46332199999999","lat":"23.056922"},{"ename":"Lu'an City","name":"六安市","count":"1","adminCode":156341500,"lon":"116.229749","lat":"31.659585"},{"ename":"Suqian City","name":"宿迁市","count":"1","adminCode":156321300,"lon":"118.52001","lat":"33.783921"},{"ename":"Luoyang City","name":"洛阳市","count":"1","adminCode":156410300,"lon":"112.031174","lat":"34.291016"},{"ename":"Taiyuan Shi","name":"太原市","count":"1","adminCode":156140100,"lon":"112.32961399999999","lat":"37.881205"}],"provinceCount":7,"allAdmins":[{"ename":"BeiJing Shi","name":"北京市","count":"81","adminCode":156110000,"lon":"116.412616","lat":"40.185590999999995"},{"ename":"Guangxi Zhuang Autonomous Region","childAdmins":[{"ename":"Nanning Shi","name":"南宁市","count":"1","adminCode":"156450100","lon":"108.46332199999999","lat":"23.056922"}],"name":"广西壮族自治区","count":"1","adminCode":156450000,"lon":"108.25124199999999","lat":"23.697352"},{"ename":"Anhui Province","childAdmins":[{"ename":"Lu'an City","name":"六安市","count":"1","adminCode":"156341500","lon":"116.229749","lat":"31.659585"}],"name":"安徽省","count":"1","adminCode":156340000,"lon":"117.226326","lat":"31.825833999999997"},{"ename":"Jiangshu Province","childAdmins":[{"ename":"Suqian City","name":"宿迁市","count":"1","adminCode":"156321300","lon":"118.52001","lat":"33.783921"}],"name":"江苏省","count":"1","adminCode":156320000,"lon":"120.542165","lat":"32.185323"},{"ename":"Henan Province","childAdmins":[{"ename":"Luoyang City","name":"洛阳市","count":"1","adminCode":"156410300","lon":"112.031174","lat":"34.291016"}],"name":"河南省","count":"1","adminCode":156410000,"lon":"113.61451799999999","lat":"33.882175"},{"ename":"Shanxi Province","childAdmins":[{"ename":"Taiyuan Shi","name":"太原市","count":"1","adminCode":"156140100","lon":"112.32961399999999","lat":"37.881205"}],"name":"山西省","count":"1","adminCode":156140000,"lon":"112.288799","lat":"37.571248"},{"ename":"Hebei Province","childAdmins":[{"ename":"Baoding City","name":"保定市","count":"1","adminCode":"156130600","lon":"115.170711","lat":"39.021218"}],"name":"河北省","count":"1","adminCode":156130000,"lon":"118.250316","lat":"40.309934"}],"countryCount":1,"keyword":"角门西"},"keyWord":"角门西"}

如果上面的”mapBound”:”-180,-90,180,90”变为”120.5137,31.3132,120.5137,31.3132”，搜索地点改为常台高速，服务器返回的数据如下所示：

{"landmarkcount":0,"searchversion":"3.6.2","count":"141","engineversion":"20150513","resultType":1,"pois":[{"eaddress":"","ename":"Changtai Expy","address":"江苏省苏州市吴中区","phone":"","name":"常台高速","hotPointID":"C04E0182029874DA","url":"","lonlat":"120.670912 31.241742"},{"eaddress":"","ename":"","address":"江苏省苏州市相城区","phone":"","name":"常台高速公路-G2","hotPointID":"40A244077F2943FF","url":"","lonlat":"120.645032 31.348276"},{"eaddress":"","ename":"","address":"江苏省苏州市常熟市","phone":"","name":"常台高速公路-S5","hotPointID":"414024866E028453","url":"","lonlat":"120.899256 31.635246"},{"eaddress":"","ename":"","address":"江苏省苏州市常熟市","phone":"","name":"常台高速公路-常昆路","hotPointID":"D0C8448623567457","url":"","lonlat":"120.824208 31.568292"},{"eaddress":"","ename":"","address":"江苏省苏州市吴江区","phone":"","name":"周松线-常台高速公路","hotPointID":"017A40001960830B","url":"","lonlat":"120.67932 31.172688"},{"eaddress":"","ename":"","address":"江苏省苏州市吴中区","phone":"","name":"常台高速公路-通湖路","hotPointID":"105E0081063C6739","url":"","lonlat":"120.670664 31.24188"},{"eaddress":"","ename":"","address":"江苏省苏州市相城区","phone":"","name":"常台高速公路-S48","hotPointID":"D12E4102686DAE91","url":"","lonlat":"120.745128 31.503364"},{"eaddress":"","ename":"","address":"江苏省苏州市常熟市","phone":"","name":"常台高速公路-星苑路","hotPointID":"00260586657188D9","url":"","lonlat":"120.925816 31.663186"},{"eaddress":"","ename":"","address":"江苏省苏州市常熟市","phone":"","name":"常台高速公路-星文路","hotPointID":"50FC600728D2C8BC","url":"","lonlat":"120.917544 31.658092"},{"eaddress":"","ename":"","address":"江苏省苏州市相城区","phone":"","name":"常台高速公路-G42","hotPointID":"81FA21077D2325CE","url":"","lonlat":"120.645032 31.348276"},{"eaddress":"","ename":"","address":"江苏省苏州市吴江区","phone":"","name":"常台高速公路-黄胜线","hotPointID":"907240848253AAE4","url":"","lonlat":"120.668176 30.960668"},{"eaddress":"","ename":"","address":"江苏省苏州市常熟市","phone":"","name":"常台高速公路-草荡路","hotPointID":"40C66505B75D7FE5","url":"","lonlat":"120.793352 31.541222"},{"eaddress":"","ename":"","address":"江苏省苏州市相城区","phone":"","name":"凤阳路-常台高速公路","hotPointID":"10AA6582BEAF3FAE","url":"","lonlat":"120.737128 31.487298"},{"eaddress":"","ename":"","address":"江苏省苏州市吴中区","phone":"","name":"常台高速公路-葑谊街","hotPointID":"5016000739BB2296","url":"","lonlat":"120.654728 31.29076"},{"eaddress":"","ename":"","address":"江苏省苏州市相城区","phone":"","name":"华元路-常台高速公路","hotPointID":"015C64866BCD7451","url":"","lonlat":"120.653392 31.379382"},{"eaddress":"","ename":"","address":"江苏省苏州市常熟市","phone":"","name":"常台高速公路-S38","hotPointID":"01E8010570394A7C","url":"","lonlat":"120.931368 31.667118"},{"eaddress":"","ename":"","address":"江苏省苏州市吴中区","phone":"","name":"常台高速公路-苏茜路","hotPointID":"10262400EEA80B70","url":"","lonlat":"120.652728 31.310676"},{"eaddress":"","ename":"","address":"江苏省苏州市吴中区","phone":"","name":"常台高速公路-S58","hotPointID":"10160403594F27D6","url":"","lonlat":"120.673608 31.220344"},{"eaddress":"","ename":"","address":"江苏省苏州市常熟市","phone":"","name":"下家路-常台高速公路","hotPointID":"01BA218775F74445","url":"","lonlat":"120.810392 31.559668"},{"eaddress":"","ename":"","address":"江苏省苏州市吴中区","phone":"","name":"常台高速公路-葑谊桥","hotPointID":"51902085517DDECF","url":"","lonlat":"120.65548 31.284922"}],"dataversion":"2016-11-1 10:44:30","prompt":[{"type":4,"admins":[{"name":"苏州市","adminCode":156320500}]}],"mclayer":"","keyWord":"常台高速"}

下面的搜索则是相对于上面搜索情况的更加具体的体现，因此在js代码的实现过程中，我首先是根据”mapBound”:”-180,-90,180,90”先确定一个大的范围，然后针对每个大的范围找到里面的每一个具体的地点。。。

在js文件的代码组织如下所示：

var place = $("#search").val(); //搜索的关键词
$.getJSON('http://www.tianditu.com/query.shtml?postStr={"keyWord":'+place+',"level":"11","mapBound":"-180,-90,180,90","queryType":"1","count":"20","start":"0"}'+'&type=query',
            function(data){
                var data_string = JSON.stringify(data);
                if(data.resultType==1){//普通poi搜索
                    $('#searchId').show();
                    $(".search_box2 .place_list").html("");
                    var string = "";
                    for (var i = 0; i < data.pois.length; i++) {
                        string += "<li><div class='bgimg'></div>" +
                            "<span class='address'>" + data.pois[i].address + "</span>," +
                            "<span class='name'>" + data.pois[i].name + "</span>" +
                            "<div class='coordinate'>" +
                            "经纬度:<span class='lonlat'>" + data.pois[i].lonlat + "</span>"+
                            "</div>" +
                            "</li>";
                    }
                    $(".search_box2 .place_list").append(string);
                    //选择具体的地方城市
                    $(".search_box2 .place_list").on("click","li",function () {
                        $("#searchId").css("display", "none");
                        var lonlat = $(this).find(".lonlat").html();
                        console.log(lonlat+" "+typeof lonlat);
                        var array_LonLat = lonlat.split(" ");

                        for(var i=0;i<2;i++){
                            array_LonLat[i]=Number(array_LonLat[i]);
                        }
                        console.log(array_LonLat);
                        // 下面把上面的图标附加到地图上，需要一个ol.Overlay
                        $("#anchor img").css("display","block");
                        var anchor = new ol.Overlay({
                            element: document.getElementById('anchor')
                        });
                        // 关键的一点，需要设置附加到地图上的位置
                        anchor.setPosition(array_LonLat);
                        // 然后添加到map上
                        map.addOverlay(anchor);
                        map.getView().setCenter(array_LonLat);
                        map.getView().setZoom(13);
                    });
                }else if(data.resultType==2){//统计搜索，先获取某个具体的省份或者市区，然后再获取市区内具体地点
                    $("#searchCity").css("display","block");
                    $(".search_box_1 .place_list_1").html("");
                    var string = "";
                    //获取到省份
                    var province = data.statistics.allAdmins;//获取关键词出现的所有的省份
                    for(var i=0;i<province.length;i++){
                        //判断是不是有childadmins
                        if(province[i].childAdmins!=undefined){
                            for(var j=0;j<province[i].childAdmins.length;j++){
                                string += "<li><div class='bgimg'></div>" +
                                    "<span class='address'>" + province[i].name+",</span>" +
                                    "<span class='name'>" + province[i].childAdmins[j].name + "</span>" +
                                    "<div class='coordinate'>" +
                                    "经纬度:<span class='lonlat'>" + province[i].childAdmins[j].lon+" "+province[i].childAdmins[j].lat + "</span>"+
                                    "</div>" +
                                    "</li>";
                            }
                        }else{
                            string += "<li><div class='bgimg'></div>" +
                                "<span class='address'>" + province[i].name+"</span>" +
                                "<div class='coordinate'>" +
                                "经纬度:<span class='lonlat'>" + province[i].lon+" "+province[i].lat + "</span>"+
                                "</div>" +
                                "</li>";
                        }
                    }
                    $(".search_box_1 .place_list_1").append(string);

                    //点击选择相应的省份及城市，细分查询地址
                    $(".search_box_1 .place_list_1").on("click","li",function(){
                        $("#searchCity").css("display","none");
                        var lonlat = $(this).find(".lonlat").html();
                        console.log(lonlat+" "+typeof lonlat);
                        var array_LonLat = lonlat.split(" ");
                        for(var i=0;i<2;i++){
                            array_LonLat[i]=Number(array_LonLat[i]);
                        }
                        console.log(array_LonLat);
                        var lonlat = array_LonLat[0]+","+array_LonLat[1]+","+array_LonLat[0]+","+array_LonLat[1];
                        //重新发送ajax请求
                        $.getJSON('http://www.tianditu.com/query.shtml?postStr={"keyWord":'+place+',"level":"11","mapBound":"'+lonlat+'","queryType":"1","count":"20","start":"0"}'+'&type=query',function(data){
                            if(data.resultType==1){
                                $('#searchId').show();
                                $(".search_box2 .place_list").html("");
                                var string = "";
                                for (var i = 0; i < data.pois.length; i++) {
                                    string += "<li><div class='bgimg'></div>" +
                                        "<span class='address'>" + data.pois[i].address + "</span>," +
                                        "<span class='name'>" + data.pois[i].name + "</span>" +
                                        "<div class='coordinate'>" +
                                        "经纬度:<span class='lonlat'>" + data.pois[i].lonlat + "</span>"+
                                        "</div>" +
                                        "</li>";
                                }
                                $(".search_box2 .place_list").append(string);
                                //选择具体的地方城市
                                $(".search_box2 .place_list").on("click","li",function () {
                                    $("#searchId").css("display", "none");
                                    var lonlat = $(this).find(".lonlat").html();
                                    console.log(lonlat+" "+typeof lonlat);
                                    var array_LonLat = lonlat.split(" ");

                                    for(var i=0;i<2;i++){
                                        array_LonLat[i]=Number(array_LonLat[i]);
                                    }
                                    console.log(array_LonLat);
                                    // 下面把上面的图标附加到地图上，需要一个ol.Overlay
                                    $("#anchor img").css("display","block");
                                    var anchor = new ol.Overlay({
                                        element: document.getElementById('anchor')
                                    });
                                    // 关键的一点，需要设置附加到地图上的位置
                                    anchor.setPosition(array_LonLat);
                                    // 然后添加到map上
                                    map.addOverlay(anchor);
                                    map.getView().setCenter(array_LonLat);
                                    map.getView().setZoom(13);
                                });
                            }
                        });
                    });
                }else if(data.resultType==3){//行政区
                    $("#searchId").css("display","block");
                    $(".search_box2 .place_list").html("");
                    var string = "";
                    //获取到市区
                    var cityname = data.area.name;
                    string+="<li><span>行政区划:"+cityname+"</span>"+
                        "<div class='coordinate'>" +
                        "经纬度:<span class='lonlat'>" + data.area.lonlat.split(",").join(" ") + "</span>"+
                        "</div>" +
                        "</li>";
                    $(".search_box2 .place_list").append(string);
                    //选择定位到具体的行政区
                    $(".search_box2 .place_list").on("click","li",function () {
                        $("#searchId").css("display", "none");
                        var lonlat = $(this).find(".lonlat").html();
                        console.log(lonlat+" "+typeof lonlat);
                        var array_LonLat = lonlat.split(" ");

                        for(var i=0;i<2;i++){
                            array_LonLat[i]=Number(array_LonLat[i]);
                        }
                        console.log(array_LonLat);
                        // 下面把上面的图标附加到地图上，需要一个ol.Overlay
                        $("#anchor img").css("display","block");
                        var anchor = new ol.Overlay({
                            element: document.getElementById('anchor')
                        });
                        // 关键的一点，需要设置附加到地图上的位置
                        anchor.setPosition(array_LonLat);
                        // 然后添加到map上
                        map.addOverlay(anchor);
                        map.getView().setCenter(array_LonLat);
                        map.getView().setZoom(12);
                    });
                }else if(data.resultType==4){//普通建议词搜索
                }else if(data.resultType==5){//
                }else{
                }
            });

猜你喜欢

转载自blog.csdn.net/u013594477/article/details/80389735
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022