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

arcgis 调取天地图poi兴趣点

猜你喜欢