当前位置： 首页 > news >正文

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

news 来源：原创 2024/5/16 8:21:55

在做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{
                }
            });

相关文章：

  • css3中的伪类before和after常见用法
  • openlayers4获取一个图形的边界
  • Vue.js小例子--tab选项卡切换
  • 使用openlayers3加载png格式图片
  • openalyers为自定义覆盖物overlay添加点击事件
  • absolute和float的区别
  • float定位对内联元素和块状元素的影响
  • javascript实现拖拽弹框高度，可调节弹框大小
  • vue中的template标签
  • SVN文件夹图标显示不正常的解决办法
  • 集中式开发和分布式开发的区别
  • SVN与GIT的优缺点对比
  • cesiumjs加载geojson+建筑物分层设色
  • js数组中关于filter()、map()、some()、every()、forEach()
  • 去除数组中的重复元素
  • JavaScript-如何实现克隆(clone)函数
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • JavaScript新鲜事·第5期
  • LintCode 31. partitionArray 数组划分
  • Linux后台研发超实用命令总结
  • sessionStorage和localStorage
  • Shell编程
  • 关于Java中分层中遇到的一些问题
  • 利用jquery编写加法运算验证码
  • 微信端页面使用-webkit-box和绝对定位时，元素上移的问题
  • 微信支付JSAPI，实测！终极方案
  • Java数据解析之JSON
  • 测评：对于写作的人来说，Markdown是你最好的朋友 ...
  • ​人工智能之父图灵诞辰纪念日，一起来看最受读者欢迎的AI技术好书
  • ​业务双活的数据切换思路设计（下）
  • （C#）if (this == null)？你在逗我，this 怎么可能为 null！用 IL 编译和反编译看穿一切
  • （HAL）STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • （二）hibernate配置管理
  • （论文阅读23/100）Hierarchical Convolutional Features for Visual Tracking
  • （算法设计与分析）第一章算法概述-习题
  • (转)创业的注意事项
  • （转载）跟我一起学习VIM - The Life Changing Editor
  • .babyk勒索病毒解析：恶意更新如何威胁您的数据安全
  • .form文件_SSM框架文件上传篇
  • .net core 实现redis分片_基于 Redis 的分布式任务调度框架 earth-frost
  • .net 前台table如何加一列下拉框_如何用Word编辑参考文献
  • .NET 使用 JustAssembly 比较两个不同版本程序集的 API 变化
  • .net 托管代码与非托管代码
  • .net/c# memcached 获取所有缓存键(keys)
  • .net开发时的诡异问题，button的onclick事件无效
  • @RequestMapping 的作用是什么？
  • [ 数据结构 - C++]红黑树RBTree
  • [Contest20180313]灵大会议
  • [HTML API]HTMLCollection
  • [iOS开发]事件处理与响应者链
  • [Java] 什么是IoC？什么是DI？它们的区别是什么？
  • [JavaEE系列] wait(等待) 和 notify(唤醒)
  • [Kubernetes]2. k8s集群中部署基于nodejs golang的项目以及Pod、Deployment详解
  • [MySQL]视图索引以及连接查询案列
  • [NOIP2005]过河