ArcGIS javascript demo

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

时间: 2024-11-10 05:12:56

ArcGIS javascript demo的相关文章

[转]ArcGIS JavaScript API本地部署离线开发环境

1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk的下载链接,api是我们开发需要的库,sdk是说明文档和例子,点击下载api的最新版3.2. 2 本地部署API 打开API包中的arcgis_js_api/library/install.htm安装说明,本文依据此英文说明而来. 解压后在IIS中建立应用程序,如下图.配置好API应用程序后,其路径

诅咒JavaScript之----ArcGIS JavaScript 点聚合 ClusterLayer

对一个之前一直做winForm的 菜鸟来说,突然接触这么神奇的语言,基本上每天都会诅咒一下这门神奇的语言. 最近做了一个小网站,底图用的是天地图的服务,用ArcGIS JavaScript提供的一些GIS功能.个人觉得,天地图API简单易上手,连我这个菜鸟看几个示例代码都能快速的做出包含地图的网站.只是,目前的天地图,基本上只有数据,没有GIS. GIS相关的,esri的东西. 网上看了esri的ClusterLayer的示例代码,网址如下: https://developers.arcgis.

ArcGIS Javascript API 加载高德在线地图扩展

利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_base/declare", "esri/geometry/Extent", "esri/SpatialReference", "esri/geometry/Point", "esri/layers/TileInfo",

ArcGIS JavaScript + 天地图API之显示混乱

原文:ArcGIS JavaScript + 天地图API之显示混乱  异常描述: (1)ArcGIS JavaScript 调用天地图WMTS服务,出现了这种混乱的效果,加载不完整. (2)昨天是相关瓦片的请求,Google浏览器显示的是请求失败.当时怀疑是无线网络的问题,接了有线,还是请求失败.以为是别人的问题,过几天应该就好了,所以也没放在心上 (3)今天一调试发现所有的请求都可以正常响应,可地图却仍然混乱 可能问题猜测: (1)天地图WMTS服务的问题 (2)坐标系的问题,可能是坐标系的

ArcGIS Javascript 异常之No &#39;Access-Control-Allow-Origin&#39; header

本文只描述现象与处理措施,不讨论原理. 开发过程中遇到此异常,查询后网上说是跨域访问的问题,给出的解决方案是通过JQuery的跨域访问机制来解决, 难道我需要直接找ArcGISTiledMapServiceLayer相关代码,去重构吗? 还有给出的解决方案如下,http://resources.arcgis.com/en/help/rest/apiref/config.html,大意就是要设置一下ArcGIS Server服务,可服务是别人的,设置不了. 代码如下,在地图类型切换时需要调用另一个

ArcGIS JavaScript API本地部署离线开发环境[转]

原文地址:http://www.cnblogs.com/brawei/archive/2012/12/28/2837660.html 1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk的下载链接,api是我们开发需要的库,sdk是说明文档和例子,点击下载api的最新版3.2. 2 本地部署API 打开API包中的arcgis_js_api/libr

使用ArcGIS JavaScript API 3.18 加载天地图

对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. ArcGIS JavaScript API最近新推出了3.18版本.所以下面示例代码将基于该版本. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf

FK JavaScript之:ArcGIS JavaScript API之地图动画

地图要素动画应用场景:动态显示地图上的要素的属性随着时间的改变而改变,并根据其属性的变化设置其渲染.比如:某水域项目中,随着时间的变化,动态展现水域的清淤进度 本文目的:对ArcGIS JavaScript 官网示例中的代码进行分析注解.下述代码对官网示例进行了部分调整 示例网址1: 示例网址2: 示例中csv文件 以下为代码注释: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&

如何正确响应ArcGIS JavaScript API中图形的鼠标事件

在使用ArcGIS JavaScript API编写程序的时候,程序员往往需要完成这样一个功能:点击地图上的图形,自动进行专题GIS数据查询,当在地图非图形区域上点击时,自动进行底图兴趣点查询. 由于专题GIS图形是叠加在底图上的,所以我们在处理地图的鼠标点击事件时,就需要根据实际点击的位置和内容来对不同的数据进行查询. ArcGIS JavaScript API为编程人员分别提供了针对地图对象和图形的两个鼠标点击事件. 下面是示例代码: 1 <!DOCTYPE html> 2 <htm