1. 程式人生 > >arcgis 調取天地圖poi興趣點

arcgis 調取天地圖poi興趣點

哈哈,大噶猴,我又來了,好久沒寫部落格了,都有點生疏了,回到這裡還是熟悉的味道,真好!

好的,進入正題,今天記錄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