版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
记录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