欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-04 23:41:05
...

在做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{
                }
            });
相关标签: GIS 天地图