ArcGIS javascript demo

时间：2014-06-25 09:21:40 阅读：273 评论：0 收藏：0 [点我收藏+]

Description

This sample uses a geoprocessing task that takes an input SQLQuery string and filters 911 calls to display only calls that match the query. The task also performs hotspot analysis on the query results and generates a hotspot raster.

The query results are returned as a map service which allows you to easily add the 911 incidents that match the query and the hotspot raster to the map. Note that in the code below a url to the result map service is constructed using the map service url with the result job id.

Code

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; }
      .shadow {
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }
      #map{ margin: 0; padding: 0; }
      #leftPanel {
        margin:5px;
        background: #fff;
        color: #444;
        font-family: arial;
        width: 250px;
        border-right: solid 1px #888;
      }
      #footer{
        border-top: solid 1px #888;
        height:55px;
      }

      #status{
        background-color:#E0E0E0; 
        color: #707070; 
        font-weight:bold;
        padding: 3px; 
        border: solid 1px #707070;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;    
        border-radius:5px;
        position:absolute;
        top:50%;
        right:50%;
        z-index:100;
        display:none;
        height:20px;
      }
    </style>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      require(["dojo/dom",
          "dojo/_base/array",
          "dojo/date/locale",
          "dojo/parser",
          "dijit/registry",

          "esri/domUtils",
          "esri/map",
          "esri/graphic",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/layers/FeatureLayer",
          "esri/tasks/Geoprocessor",
          "esri/dijit/Legend",

          "dijit/form/DateTextBox",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane"],
    function(dom, array, locale, parser, registry,
             domUtils, Map, Graphic, ArcGISDynamicMapServiceLayer, FeatureLayer, Geoprocessor, Legend){
      var gpServiceUrl= "http://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/GPServer/911%20Calls%20Hotspot",
          mapserviceurl= "http://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer/jobs",
          legend;
      
      parser.parse();

      var map = new Map("map",{
        basemap: "streets",
        center: [-122.81, 45.466],
        zoom: 13
      });
      //Run the gp task when the app loads to display default incidents 
      map.on("load", findHotspot);
      
      function findHotspot(){
        var gp = new Geoprocessor(gpServiceUrl);
        var params = {
          Query: buildDefinitionQuery()
        };
        //cleanup any results from previous runs 
        cleanup();
        gp.submitJob(params, gpJobComplete, gpJobStatus, gpJobFailed);
      }

      function gpJobComplete(jobinfo){
        //construct the result map service url using the id from jobinfo we‘ll add a new layer to the map
        var mapurl = mapserviceurl + "/" + jobinfo.jobId;
        var hotspotLayer = new ArcGISDynamicMapServiceLayer(mapurl,{          
"id":"HotspotLayer",          
"opacity":0.7        
});       

//add the hotspot layer to the map        map
.addLayers([hotspotLayer]);                map

.on("layers-add-result",function(evtObj){          domUtils
.show(dom.byId(‘legendDiv‘));                    
if(!legend ){             
//add the legend to show the resulting layer.             
var layerInfo = array.map(evtObj.layers,function(layer,index){              
return{                layer
: layer.layer,                title
: layer.layer.name              
};            
});                      legend 

=newLegend({              map
: map,              layerInfos
: layerInfo            
},"legendDiv");            legend
.startup();          
}        
});      
}                  

function gpJobStatus(jobinfo){        domUtils
.show(dom.byId(‘status‘));        
var jobstatus =‘‘;        
switch(jobinfo.jobStatus){          
case‘esriJobSubmitted‘:            jobstatus 
=‘Submitted...‘;            
break;          
case‘esriJobExecuting‘:            jobstatus 
=‘Executing...‘;            
break;          
case‘esriJobSucceeded‘:            domUtils
.hide(dom.byId(‘status‘));            
break;        
}        dom
.byId(‘status‘).innerHTML = jobstatus;      
}      
function gpJobFailed(error){        dom
.byId(‘status‘).innerHTML = error;        domUtils
.hide(dom.byId(‘status‘));      
}      
function buildDefinitionQuery(){        
var defQuery;        
//get input info from form and build definition expression        
var startDate = locale.format(registry.byId(‘fromDate‘).value,{            datePattern
:‘yyyy-MM-dd hh:mm:ss‘,            selector
:‘date‘        
});        
var endDate = locale.format(registry.byId(‘toDate‘).value,{            datePattern
:‘yyyy-MM-dd hh:mm:ss‘,            selector
:‘date‘        
});        
var def =[];        def
.push("(Date >= date ‘"+ startDate +"‘ and Date <= date ‘"+ endDate +"‘)");                    def
.push("(Day = ‘SUN‘ OR Day= ‘SAT‘ OR Day = ‘FRI‘ OR Day =‘MON‘ OR Day=‘TUE‘ OR Day=‘WED‘ OR Day =‘THU‘)");         

if(def.length >1){            defQuery 
= def.join(" AND ");        
}           
return defQuery;      
}            

function cleanup(){        
//hide the legend and remove the existing hotspot layer        domUtils
.hide(dom.byId(‘legendDiv‘));        
var hotspotLayer = map.getLayer(‘HotspotLayer‘);        
if(hotspotLayer){          map
.removeLayer(hotspotLayer);        
}      
}      app 
={        findHotspot
: findHotspot      
};      
return app;    
});    
</script>  
</head>

<bodyclass="tundra">  
<divdata-dojo-type="dijit.layout.BorderContainer"       
data-dojo-props="design:‘headline‘,gutters:false"       
style="width:100%; height:100%; margin:0;">    

<divid="map"data-dojo-type="dijit.layout.ContentPane"data-dojo-props="region:‘center‘">      
<spanid="status"style=‘position:absolute;bottom:5px;‘></span>     
</div>        

<divid="leftPanel"data-dojo-type="dijit.layout.ContentPane"data-dojo-props="region:‘left‘">      
<divid="info">        
<divstyle="padding-bottom:20px;width:40px">          
<labelfor="fromDate">From:</label>          
<br/>          
<inputtype="text"name="fromDate"id="fromDate"value="1998-01-01"dojoType="dijit.form.DateTextBox"              
required="true"constraints="{min:‘1998-01-01‘,max:‘1998-05-31‘}"onChange="dijit.byId(‘toDate‘).constraints.min = arguments[0];"/>          
<br/>          
<labelfor="toDate">To:</label>          
<br/>          
<inputtype="text"name="toDate"id="toDate"value="1998-01-07"dojoType="dijit.form.DateTextBox"              
required="true"constraints="{min:‘1998-01-01‘,max:‘1998-05-31‘}"/>        
</div>        

<divalign="center">          
<button  id="hotspotButton"onclick="app.findHotspot();">Analyze 911 Calls</button>        
</div>      
</div>            

<divid=‘legendDiv‘style=‘display:none;margin-top:15px;‘></div>    
</div>  
</div>
</body>
</html>

ArcGIS javascript demo,布布扣,bubuko.com

ArcGIS javascript demo

标签：des style class code java http

原文地址：http://www.cnblogs.com/cybersword/p/3806958.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行