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{
}
});下一篇： JS 对象解构赋值
推荐阅读