哈哈,大噶猴,我又来了,好久没写博客了,都有点生疏了,回到这里还是熟悉的味道,真好!
好的,进入正题,今天记录arcgis 调取天地图POI兴趣点,例如搜索超市,酒店啥的。
上效果图 --------------------------------------------------------------------------------------------------------------------
上面的图是不是看不清楚啊?
那就到大家最喜欢的环节,直接上代码吧,这是我自己简单写的一个demo
其中用的是arcgis 调取的天地图底图(具体看我另一篇博客 -^ ^);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调取天地图poi点</title>
<link rel="stylesheet" href="http://ytgisapi.591map.net/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" href="http://ytgisapi.591map.net/arcgis_js_api/library/3.16/3.16/esri/css/esri.css"/>
<script type="text/javascript" src="http://ytgisapi.591map.net/arcgis_js_api/library/3.16/3.16/init.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/tdt.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#mapDiv{
width: 800px;
height: 800px;
margin: 10px auto;
border: 1px solid red;
}
</style>
<body>
<div id="mapDiv"></div>
<div>
<input type="text" id="search">
<button id="btn">确定</button>
</div>
</body>
<script>
require([
"esri/map",
//基本工具
"esri/dijit/InfoWindow",
"esri/toolbars/draw",
"esri/Color",
"esri/geometry/Extent",
"esri/SpatialReference",
//图层
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/layers/ArcGISImageServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
//查询
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
//信息窗口
"esri/toolbars/draw",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/geometry/Circle",
"esri/symbols/TextSymbol",
"esri/symbols/Font",
"esri/InfoTemplate",
"esri/dijit/InfoWindow",
//符号
"esri/symbols/TextSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureMarkerSymbol",
//查询
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/tasks/GeometryService",
"esri/tasks/BufferParameters",
"esri/geometry/Geometry",
//天地图
"tdlib/TDTLayer",
"tdlib/TDTAnnoLayer",
"tdlib/TDT_ImgLayer",
"tdlib/TDT_ImgAnnoLayer",
"dojo/domReady!"
],function(
Map,InfoWindow,Draw,Color,Extent,SpatialReference,
Graphic,GraphicsLayer,ArcGISImageServiceLayer,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer,
IdentifyTask,IdentifyParameters,
Draw,Point,Polyline,Polygon,Circle,TextSymbol,Font,InfoTemplate,InfoWindow,
TextSymbol,SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,PictureMarkerSymbol,
Query,QueryTask,GeometryService,BufferParameters,Geometry,
TDTLayer,TDTAnnoLayer
){
var map =new Map("mapDiv",{
logo:false,
nav:false,
zoom:10,
center:[117.28,31.86]
})
var tdtLayer =new TDTLayer();
var tdtAnnoLayer =new TDTAnnoLayer();
map.addLayer(tdtLayer);
map.addLayer(tdtAnnoLayer);
var graph =new GraphicsLayer({id:"graph"})
map.addLayer(graph);
$("#btn").click(function(){
var val =$("#search").val();
Costomquery(val,map,function (data) {
console.log(data);
showResult(data);
});
//视野里搜索
Viewquery(val,map,function (data) {
console.log(data);
//showResult(data);
});
})
//展示搜索点
function showResult(e) {
var pois =e.pois;
var s=new SimpleMarkerSymbol();
s.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);
s.setSize(10);
s.setOutline(null);
s.setColor(new Color([255,0,0,1]));
for (var i=0;i<pois.length;i++){
var lonlat= pois[i].lonlat.split(' ');
var lon =parseFloat(lonlat[0]);
var lat =parseFloat(lonlat[1]);
var point =new Point(lon,lat,new SpatialReference({wkid:4326}));
var gra =new Graphic(point,s,null,null);
graph.add(gra);
}
}
});
</script>
</html>
demo可以直接用的,调取的 关键 js 资源我已上传,就是 tdt.js ,里面的一些方法我都已经加了注释,对着我这个demo就能测试,找到你需要的方法,感谢大家阅读,咱们下次再见!(说实话我也不知道下次什么时候再次记录,哎,最近有点散漫 -_-)
js资源传送门:https://download.csdn.net/download/kk_bluebule/10816068 (已过时)
tips:2019年1月起,天地图更新了api,目前js代码我已跟随更新,可以继续使用
我本来想更换资源的,可是没找到对应的操作,只好重新发布了一份,之前那个资源不知道怎么删除的,我把分降到了1分,
新的js资源地址:https://download.csdn.net/download/kk_bluebule/10941264