arcgis 调取天地图POI兴趣点

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/KK_bluebule/article/details/84623769

记录arcgis 调取天地图POI兴趣点,例如搜索超市,酒店啥的。

上效果图 --------------------------------------------------------------------------------------------------------------------

上面的图是不是看不清楚啊?

那就到大家最喜欢的环节,直接上代码吧,这是我自己简单写的一个demo

其中用的是arcgis 调取的天地图底图(具体看我另一篇博客 -^ ^);


 
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>调取天地图poi点 </title>
  6. <link rel="stylesheet" href="http://ytgisapi.591map.net/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css"/>
  7. <link rel="stylesheet" href="http://ytgisapi.591map.net/arcgis_js_api/library/3.16/3.16/esri/css/esri.css"/>
  8. <script type="text/javascript" src="http://ytgisapi.591map.net/arcgis_js_api/library/3.16/3.16/init.js"> </script>
  9. <script src="js/jquery.min.js"> </script>
  10. <script src="js/tdt.js"> </script>
  11. </head>
  12. <style>
  13. *{
  14. margin: 0;
  15. padding: 0;
  16. }
  17. #mapDiv{
  18. width: 800px;
  19. height: 800px;
  20. margin: 10px auto;
  21. border: 1px solid red;
  22. }
  23. </style>
  24. <body>
  25. <div id="mapDiv"> </div>
  26. <div>
  27. <input type="text" id="search">
  28. <button id="btn">确定 </button>
  29. </div>
  30. </body>
  31. <script>
  32. require([
  33. "esri/map",
  34. //基本工具
  35. "esri/dijit/InfoWindow",
  36. "esri/toolbars/draw",
  37. "esri/Color",
  38. "esri/geometry/Extent",
  39. "esri/SpatialReference",
  40. //图层
  41. "esri/graphic",
  42. "esri/layers/GraphicsLayer",
  43. "esri/layers/ArcGISImageServiceLayer",
  44. "esri/layers/ArcGISDynamicMapServiceLayer",
  45. "esri/layers/ArcGISTiledMapServiceLayer",
  46. //查询
  47. "esri/tasks/IdentifyTask",
  48. "esri/tasks/IdentifyParameters",
  49. //信息窗口
  50. "esri/toolbars/draw",
  51. "esri/geometry/Point",
  52. "esri/geometry/Polyline",
  53. "esri/geometry/Polygon",
  54. "esri/geometry/Circle",
  55. "esri/symbols/TextSymbol",
  56. "esri/symbols/Font",
  57. "esri/InfoTemplate",
  58. "esri/dijit/InfoWindow",
  59. //符号
  60. "esri/symbols/TextSymbol",
  61. "esri/symbols/SimpleMarkerSymbol",
  62. "esri/symbols/SimpleLineSymbol",
  63. "esri/symbols/SimpleFillSymbol",
  64. "esri/symbols/PictureMarkerSymbol",
  65. //查询
  66. "esri/tasks/query",
  67. "esri/tasks/QueryTask",
  68. "esri/tasks/GeometryService",
  69. "esri/tasks/BufferParameters",
  70. "esri/geometry/Geometry",
  71. //天地图
  72. "tdlib/TDTLayer",
  73. "tdlib/TDTAnnoLayer",
  74. "tdlib/TDT_ImgLayer",
  75. "tdlib/TDT_ImgAnnoLayer",
  76. "dojo/domReady!"
  77. ], function(
  78. Map,InfoWindow,Draw,Color,Extent,SpatialReference,
  79. Graphic,GraphicsLayer,ArcGISImageServiceLayer,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer,
  80. IdentifyTask,IdentifyParameters,
  81. Draw,Point,Polyline,Polygon,Circle,TextSymbol,Font,InfoTemplate,InfoWindow,
  82. TextSymbol,SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,PictureMarkerSymbol,
  83. Query,QueryTask,GeometryService,BufferParameters,Geometry,
  84. TDTLayer,TDTAnnoLayer
  85. ){
  86. var map = new Map( "mapDiv",{
  87. logo: false,
  88. nav: false,
  89. zoom: 10,
  90. center:[ 117.28, 31.86]
  91. })
  92. var tdtLayer = new TDTLayer();
  93. var tdtAnnoLayer = new TDTAnnoLayer();
  94. map.addLayer(tdtLayer);
  95. map.addLayer(tdtAnnoLayer);
  96. var graph = new GraphicsLayer({ id: "graph"})
  97. map.addLayer(graph);
  98. $( "#btn").click( function(){
  99. var val =$( "#search").val();
  100. Costomquery(val,map, function (data) {
  101. console.log(data);
  102. showResult(data);
  103. });
  104. //视野里搜索
  105. Viewquery(val,map, function (data) {
  106. console.log(data);
  107. //showResult(data);
  108. });
  109. })
  110. //展示搜索点
  111. function showResult(e) {
  112. var pois =e.pois;
  113. var s= new SimpleMarkerSymbol();
  114. s.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);
  115. s.setSize( 10);
  116. s.setOutline( null);
  117. s.setColor( new Color([ 255, 0, 0, 1]));
  118. for ( var i= 0;i<pois.length;i++){
  119. var lonlat= pois[i].lonlat.split( ' ');
  120. var lon = parseFloat(lonlat[ 0]);
  121. var lat = parseFloat(lonlat[ 1]);
  122. var point = new Point(lon,lat, new SpatialReference({ wkid: 4326}));
  123. var gra = new Graphic(point,s, null, null);
  124. graph.add(gra);
  125. }
  126. }
  127. });
  128. </script>
  129. </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

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值