arcgis 調取天地圖poi興趣點
阿新 • • 發佈：2018-12-18
哈哈，大噶猴，我又來了，好久沒寫部落格了，都有點生疏了，回到這裡還是熟悉的味道，真好！
好的，進入正題，今天記錄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