GIS开发-天地图按照地名搜索定位
在做GIS开发的时候，底图采⽤天地图（使⽤天地图的⽮量⽡⽚图层和遥感影像图层），实现按照地名搜索定位的时候，如果调⽤OSM官⽅
⽂档接⼝会出现很多地⽅都搜索不到的情况，所以决定采⽤天地图的服务接⼝来实现地理定位。查看了天地图的官⽹的⽂档，参考⽹址如
下：
{"count":"87","resultType":2,"mclayer":"","statistics":{"citysCount":7,"priorityCitys":[{"ename":"BeiJing Shi","name":"北京市","count":"81","adminCode":
如果上⾯的”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"
下⾯的搜索则是相对于上⾯搜索情况的更加具体的体现，因此在js代码的实现过程中，我⾸先是根据”mapBound”:”-180,-
90,180,90”先确定⼀个⼤的范围，然后针对每个⼤的范围到⾥⾯的每⼀个具体的地点。。。
在js⽂件的代码组织如下所⽰：
var place = $("#search").val(); //搜索的关键词
$.getJSON('www.tianditu/query.shtml?postStr={"keyWord":'+place+',"level":"11","mapBound":"-180,-90,180,90","queryType":"1","count":"20","sta function(data){
var data_string = JSON.stringify(data);
sultType==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>" +typeof array
"</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: ElementById('anchor')
});
// 关键的⼀点，需要设置附加到地图上的位置
anchor.setPosition(array_LonLat);
// 然后添加到map上
map.addOverlay(anchor);
});
}else sultType==2){//统计搜索，先获取某个具体的省份或者市区，然后再获取市区内具体地点
$("#searchCity").css("display","block");
$(".search_box_1 .place_list_1").html("");
$(".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('www.tianditu/query.shtml?postStr={"keyWord":'+place+',"level":"11","mapBound":"'+lonlat+'","queryType":"1","count":"
sultType==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
// 下⾯把上⾯的图标附加到地图上，需要⼀个ol.Overlay
$("#anchor img").css("display","block");
var anchor = new ol.Overlay({
element: ElementById('anchor')
});
// 关键的⼀点，需要设置附加到地图上的位置
anchor.setPosition(array_LonLat);
// 然后添加到map上
map.addOverlay(anchor);
});
}
});
});
}else sultType==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: ElementById('anchor')
});
// 关键的⼀点，需要设置附加到地图上的位置
anchor.setPosition(array_LonLat);
// 然后添加到map上
map.addOverlay(anchor);
});
}else sultType==4){//普通建议词搜索
}else sultType==5){//
}else{
}
});
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论