结合arcgis api for js进行PIO搜索

前端PIO搜索

实现功能

本次实验是将ArcGIS API For Js 和PIO区域搜索相结合，然后再利用bootstrap和jq进行相关的事件和样式的控制。

相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
  <script src="https://js.arcgis.com/4.3/"></script>
<style>
    #result{
        position: absolute;
        z-index: 99;
        top: 15px;
        float: right;
        right: 10px;
        border-radius: 6px;
        text-align: center;
        background-color: rgba(198, 226, 36, 0.3)
    }
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .search{
        position: absolute;
        top: 10px;
        border-radius: 3px;
        margin: auto 60px auto;
        background-color: rgba(230, 36, 62, 0.4)
    }
    #ok{
        position: relative;
        left: 60px;
    }
</style>


    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>

        require([
      "esri/Map",
      "esri/views/MapView",
            "esri/symbols/SimpleMarkerSymbol",
      "esri/Graphic",
      "esri/geometry/Point",
      "dojo/domReady!"
    ], function(Map, MapView,SimpleMarkerSymbol,
      Graphic,
      Point) {

      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65]
      });
            function addPoint(x,y){
        let  point = new Point({
        longitude:x,
        latitude: y 
      }),
      markerSymbol = new SimpleMarkerSymbol({
        color: [parseInt(Math.random()*255),parseInt(Math.random()*255),parseInt(Math.random()*255)],
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 2
        }
      }),
              // Create a graphic and add the geometry and symbol to it
      pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
      });
        view.graphics.addMany([pointGraphic]);
      }
        $(function(){
        $("#ok").click(function(){
        var qq=document.getElementById("in").value;
        var ww=document.getElementById("region").value;
       $.ajax({
          type:"GET",
          url:"http://api.map.baidu.com/place/v2/search?q="+ww+"&region="+qq+"&output=json&ak=***",
          dataType:"jsonp",
          success:function(data){
              document.getElementById("result").innerHTML=null;
            alert(data);
            console.log(data);
            var cc="";
                           var head="<table class='table table-striped'><th>名称</th><th>lat</th><th>lng</th>";
            for(x=0;x<data.results.length;x++){
                let a=data.results[x].location.lat,b=data.results[x].location.lng;
                addPoint(b,a);

                cc+="<tr>"+"<td>"+data.results[x].name+"</td><td>"+data.results[x].location.lat+"</td><td>"+data.results[x].location.lng+"</td>"+"</tr>";
                    view.popup.open({
          // Set the popup's title to the coordinates of the location
          title: "Reverse geocode: [" + b+ ", " + a + "]",
          location: [b,a] // Set the location of the popup to the clicked location
        });
        }
            document.getElementById("result").innerHTML=head+cc+"</table>";
          },
          error:function(){
              alert("error!");
           console.log("error");
          }
        });
      });
        });
    });
    </script>
</head>
<body>
     <div id="viewDiv"></div>

  <div class="search">
            <input id="in" class="form-control" placeholder="搜索城市" type="text">
  <input type="text" class="form-control" placeholder="搜索建筑" name="pio" id="region">
  <button id="ok" class="btn btn-success" style="margin:0 auto">Search</button>
  </div>
  <div id="result">
  </div>
</body>
</html>

实现效果展示

如果读者你还想再优雅一点的话

尝试着将代码优化一下，笔者真是懒了，最近还要考研~

就这样，做一只优雅的刺猬。

需要注意的的呀

• 在异步请求时，你可以选择多种方式
• 在异步请求时，注意跨域问题，如果你足够优雅和聪明，一定会没问题滴哟

在GIS的沙场，传播有价值的东西!