• 概述
  • 入门指导
  • API参考
  • 代码示例
ESRI JavaScript API简介
        JavaScript API是跟随ArcGIS9.3同时发布的,是ESRI根据JavaScript技术实现的调用REST API接口的一组脚本,利用JavaScript API您可以快速的完成如下操作:显示您发布地图服务或叠加ArcGIS Online上的地图数据服务;执行服务器上的地理信息系统模型并显示执行结果;搜索您的地理信息系统数据并显示搜索结果;搜寻地址,并显示结果。它让您在自己的网站中构建操作简单、功能丰富的地图应用,里面包含构建地图基本功能的各种接口,提供了诸如位置搜索、周边查询、出行路线规划等功能服务。

天地图·四川 ESRI JavaScript API V3.0版具有如下特点:
1、地图载入速度更快,显示更流畅。
2、地图服务更加稳定,使用更加便捷。
3、兼容各大主流浏览器,兼容能力更强。
4、一切基于服务,多种多样的免费开发方式。


功能介绍
  • 基础地图服务在网页中显示地图,支持矢量、影像、透明注记等地图,支持多种服务叠加。
  • 图层管理管理地图显示方式,主要是影像,矢量,注记,用户自定义标记和描绘等相关的图层显示与切换操作。
  • 地图标绘支持用户自定义在地图中进行标绘,获取更直观、明了的地图信息。
  • 路径导航提供包括时间最短(尽量走高速),路程最短等分析方式,可以任意设置途径点\障碍点等,进行最优路径分析。
  • 地图工具提供清除、全图、测距、测面、打印、标绘、纠错、地图分享、鼠标右键等对地图直接进行操作的工具。
  • 地名搜索提供包括地名模糊搜索、范围搜索、缓冲区搜索、属性分类搜索等地名搜索服务。
esri js 介绍
        JavaScript API是跟随ArcGIS9.3同时发布的,是ESRI根据JavaScript技术实现的调用REST API接口的一组脚本,利用JavaScript API您可以快速的完成如下操作:显示您发布地图服务或叠加ArcGIS Online上的地图数据服务;执行服务器上的地理信息系统模型并显示执行结果;搜索您的地理信息系统数据并显示搜索结果;搜寻地址,并显示结果。它让您在自己的网站中构建操作简单、功能丰富的地图应用,里面包含构建地图基本功能的各种接口,提供了诸如位置搜索、周边查询、出行路线规划等功能服务。
面向用户
        JavaScript API面向的读者是有一定JavaScript编程经验的读者,此外,读者还应该对地图产品有一定的了解。初级程序员通过1-2天的学习,即可掌握JavaScript API的使用。
获取v27
        在使用地图前,必须获取到v27的js和css,可以通过<script>标签将v27引用到页面中:
        <link rel="Stylesheet" type="text/css"
        href="http://www.scgis.net.cn/imap/jsapi/v27/js/dojo/dijit/themes/soria/soria.css" />
        <script type="text/javascript" src="http://www.scgis.net.cn/imap/jsapi/v27/"></script>
        
版本说明
        此API为地图展示版本,主要完成地图的展示和操作功能,如地图定位、放大和缩小等!

        兼容性:
                浏览器:IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
                操作系统:Windows、Mac、Linux
hello world

关键代码

var token = "-pxvYt1zsn3NWaFKnNvWv3JpaMr4q52nExENFVKX6BhSRQmKhARxV6rIpd1mgfu9";
var url = "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/mapserver";
var map = new esri.Map("map_container");
var layer = new scgc.layers.SCGISTiledMapServiceLayer(url);
dojo.connect(layer, "onTokenExpired", function(json) {
    layer.setToken(token);
});
map.addLayer(layer);
              

代码解析

1.声明一个访问服务的令牌(token),详细信息参见常见问题
// 把token字符串替换为你申请的token字符串。
var token = "-pxvYt1zsn3NWaFKnNvWv2kuaTHagPUzxurYm4reubnIgagIMvqEL_fQf3XAy-cy";
2.声明一个切片服务地址,记得一定要在后面加'/mapserver' 查看所有服务
var url = "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/mapserver";
3.创建一个地图对象,设置其容器为map_container
var map = new esri.Map("map_container");
              
4.创建一个切片图层对象,把切片的服务地址给它
var layer = new scgc.layers.SCGISTiledMapServiceLayer(url);
              
5.token过期处理
dojo.connect(layer, "onTokenExpired", function(json) {
    layer.setToken(token);
});
              
6.向地图容器中添加切片图层对象
map.addLayer(layer);
              

完整代码

<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        html{height:auto;}
        body{height:auto;margin:0; padding:0;}
        #map_container{ width:800px;height:500px;}
    </style>
    <title>iMap 地图JavaScript API 2.4+ 示例:Hello World</title>
    <link rel="Stylesheet" type="text/css" 
    href="http://www.scgis.net.cn/imap/jsapi/v27/js/dojo/dijit/themes/soria/soria.css" />
    <script type="text/javascript" src="http://www.scgis.net.cn/imap/jsapi/v27/"></script>
    <script type="text/javascript">
        function init() {
            // 把token字符串替换为你申请的token字符串。
            var token = "-pxvYt1zsn3NWaFKnNvWv1iVoRbXYzGEZvyzDfmjsECvIUR3TwTN364G0ItDlNNr";
            // 切片服务地址,记得一定要在后面加'/mapserver'
            var url = "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/mapserver";
            // 创建一个地图对象,设置其容器为map_container
            var map = new esri.Map("map_container");
            // 创建一个切片图层对象,把切片的服务地址给它
            var layer = new scgc.layers.SCGISTiledMapServiceLayer(url);
            // token过期处理
            dojo.connect(layer, "onTokenExpired", function(json) {
                layer.setToken(token);
            });
            // 向地图容器中添加切片图层对象
            map.addLayer(layer);
        }
        // 页面装载时候调用init函数
        dojo.addOnLoad(init);
    </script>
</head>
<body>
<div id="map_container"></div>
</body>
</html>
              

ESRI JavaScript API 参考



SCGISTiledMapServiceLayer 类

此类主要用于加载四川省基础地理中心发布的REST风格的切片地图服务。


构造函数


构造函数说明参数说明
SCGISTiledMapServiceLayer(url:String,options?:Object) 创建一个切片图层的实例

url:切片服务的URL地址

options:可选参数列表

  -toke:令牌


方法


方法返回值说明参数说明
setToken(token:String) None 设置token,当访问令牌失效后重新设置令牌。

token:令牌

switchTileUrl(url:String, options?:Object)

None 在同一图层切换切片服务的地址。

url:切片服务的URL地址

options:可选参数列表

  -toke:令牌


事件

从严格意义上来说,不能称之为事件,它是在特定的情况下,控件会触发的函数,如token过期等。具体使用方法都一样,参见如下:

     var layer=new scgc.layers.SCGISTiledMapServiceLayer("[SCGISTILEMAP_REST_HTTP]");
     dojo.connect(layer,"onTokenExpired",function(json){
         var tokenTask=new scgc.tasks.TokenTask({getipServer:"http://...",...});
         tokenTask.execute(function(token,context){
             context.layer.setToken(token);
         },{account:"test",password:"test"},{layer:layer});
     });
                       

事件说明参数说明
onTokenExpired(json:Object)

当访问令牌失效后所触发的函数。

json:服务器返回的错误信息。

onUnknowError(ex:Object)

除令牌失效的所有错误消息都会触发此函数。

ex:服务返回的错误信息



NameSearchTask 类

用于调用检索地名地址的服务。


常量


常量说明

scgc.tasks.NameSearchTask.META

返回服务查询的元数据。

scgc.tasks.NameSearchTask.DATA

返回服务查询的数据。

scgc.tasks.NameSearchTask.COUNT

返回查询数据的总个数和最大能返回的数据个数。


构造函数


构造函数说明参数说明
NameSearchTask(url:String,token?:String,context?:Object) 创建一个检索地名地址的实例

url:地名地址服务的URL地址

token:令牌

context:附加参数,在服务器执行回调函数时,会将其值不变的传给回调函数。


方法


方法返回值说明参数说明
execute(params:Object) None 此函数会自动调用远程服务器的REST服务进行数据查询,将服务器的查询结果以JSON Object格式返回给客户端。 如下:
type:scgc.tasks.NameSearchTask.Type(必选)
   - 查询的数据的类型。
   - scgc.tasks.NameSearchTask.META:
     返回服务查询的元数据。
     如果选择此项,则只有callback,token,context,
     url这四个参数有效。其它参数将被忽略。            
   - scgc.tasks.NameSearchTask.DATA:
     返回查询的数据。
     如果选择此项,所有参数都有效,
     各参数必须根据相应的参数说明进行设置。
   - scgc.tasks.NameSearchTask.COUNT:
     返回查询数据的总个数和最大能返回的数据个数。
     如果选择此项,所设置参数除startIndex和
     stopIndex以外,
     其它参数与scgc.tasks.NameSearchTask.DATA相同。
url:String(可选)
   - 查询服务的地址。
   - 如果此处没有设置值,将自动使用用构造函数中的值来代替。
     如果在构造函数中和此处设置同时设置,
     则使用此处设置的值, 但此处设置的值只是临时的,
     仅限当前的一次调用有,
     且不会改变这个类全局(构造函数中设置)的值。
keywords:String(和typeCode必选其一)
   - 要查询的关键词。
typeCode:String(和keywords必选其一)
   - 要查询的类型。
     具体值参见该服务元数据列表中的选项。
statePAC:String(可选)
   - 市级的行政区划代码,由四位数组成。
countyPAC:String(可选)
   - 县级的行政区划代码,由六位数组成。
isOnlyName:Boolean(可选,缺省值:false)
   - 是否只返回名称。
boundingBox:esri.geometry.Extent(可选)
   - 需要搜索的指定范围。
startIndex:Integer(可选,缺省值:0)
   - 返回的数据的开始的索引值。从0开始。
     只有选择scgc.tasks.NameSearchTask.DATA此参数才起作用。
stopIndex:Integer(可选,缺省值:100)
   - 返回的数据的结束索引值。
     如果最大个数小于此索引值,则该值不起作用。
     只有选择scgc.tasks.NameSearchTask.DATA此参数才起作用。
callback:Function(必选)
   - 服务器返回后执行的回调函数。
error:Function(可选)
   - 当执行发生错误时执行的函数。
token:String(可选)
   - 向服务器发出查询请求的今牌。
   - 如果此服务为加密服务,则令牌不能为空。
     如果此处没有设置值,
     将自动使用用构造函数中的值来代替。
     如果在构造函数中和此处设置同时设置,
     则使用此处设置的值,
     但此处设置的值只是临时的,
     仅限当前的一次调用有,
     且不会改变这个类全局(构造函数中设置)的值。
context:Object(可选)
   - 附加参数,在服务器执行回调函数时,
     会将其值不变的传给回调函数。
               

事件

从严格意义上来说,不能称之为事件,它是在特定的情况下,控件会触发的函数,如token过期等。具体使用方法都一样,参见如下:

     var layer=new scgc.layers.SCGISTiledMapServiceLayer("[SCGISTILEMAP_REST_HTTP]");
     dojo.connect(layer,"onTokenExpired",function(json){
         var tokenTask=new scgc.tasks.TokenTask({getipServer:"http://...",...});
         tokenTask.execute(function(token,context){
             context.layer.setToken(token);
         },{account:"test",password:"test"},{layer:layer});
     });
                       

事件说明参数说明

onError(ex:Object, context:Object)

服务没有调用成功所触发的事件。

ex:服务返回的错误信息

context:附加参数,execute或构造函数中的context的值。



BufferTask 类

用于调用检索地名地址的服务。


常量


常量说明

scgc.tasks.BufferTask.META

返回服务查询的元数据。

scgc.tasks.BufferTask.DATA

返回服务查询的数据。

scgc.tasks.BufferTask.COUNT

返回查询数据的总个数和最大能返回的数据个数。


构造函数


构造函数说明参数说明
NameSearchTask(url:String,token?:String,context?:Object) 创建一个检索地名地址的实例

url:地名地址服务的URL地址

token:令牌

context:附加参数,在服务器执行回调函数时,会将其值不变的传给回调函数。


方法


方法返回值说明参数说明
execute(params:Object) None 此函数会自动调用远程服务器的REST服务进行数据查询,将服务器的查询结果以JSON Object格式返回给客户端。 如下:
type:scgc.tasks.BufferTask.Type(必选)
   - 查询的数据的类型。
   - scgc.tasks.BufferTask.META:
     返回服务查询的元数据。
     如果选择此项,则只有callback,token,context,url这四个个参数有效。
     其它参数将被忽略。            
   - scgc.tasks.BufferTask.DATA:
     返回查询的数据。
     如果选择此项,所有参数都有效,各参数必须根据相应的参数说明进行设置。
   - scgc.tasks.BufferTask.COUNT:
     返回查询数据的总个数和最大能返回的数据个数。
     如果选择此项,所设置参数除startIndex和stopIndex以外,
     其它参数与scgc.tasks.BufferTask.DATA相同。
url:String(可选)
   - 查询服务的地址。
   - 如果此处没有设置值,将自动使用用构造函数中的值来代替。
     如果在构造函数中和此处设置同时设置,则使用此处设置的值,
     但此处设置的值只是临时的,仅限当前的一次调用有,
     且不会改变这个类全局(构造函数中设置)的值。
keywords:String(和typeCode必选其一)
   - 要查询的关键词。
typeCode:String(和keywords必选其一)
   - 要查询的类型。
     具体值参见该服务元数据列表中的选项。
center:esri.geometry.Point(必选)
   - 搜索中心点坐标。
radius:Number(必选)
   - 搜索半径,单位为m(米)。
startIndex:Integer(可选,缺省值:0)
   - 返回的数据的开始的索引值。从0开始。
     只有选择scgc.tasks.BufferTask.DATA此参数才起作用。
stopIndex:Integer(可选,缺省值:100)
   - 返回的数据的结束索引值。如果最大个数小于此索引值,则该值不起作用。
     只有选择scgc.tasks.BufferTask.DATA此参数才起作用。
callback:Function(必选)
   - 服务器返回后执行的回调函数。
error:Function(可选)
   - 当执行发生错误时执行的函数。
   - 别一种方法就是
     dojo.connect(your_task_instance,"onError",yourErrorFunction);
     errorFunction格式:function onTaskError(ex,context);
token:String(可选)
   - 向服务器发出查询请求的今牌。
   - 如果此服务为加密服务,则令牌不能为空。
     如果此处没有设置值,将自动使用用构造函数中的值来代替。
     如果在构造函数中和此处设置同时设置,则使用此处设置的值,
     但此处设置的值只是临时的,仅限当前的一次调用有,
     且不会改变这个类全局(构造函数中设置)的值。
context:Object(可选)
   - 附加参数,在服务器执行回调函数时,会将其值不变的传给回调函数。
               

事件


事件说明参数说明

onError(ex:Object, context:Object)

服务没有调用成功所触发的事件。

ex:服务返回的错误信息

context:附加参数,execute或构造函数中的context的值。



ShortPathTask 类

用于调用路径分析的服务。


常量


常量说明

scgc.tasks.ShortPathTask.META

返回服务查询的元数据。

scgc.tasks.ShortPathTask.DATA

返回服务查询的数据。


构造函数


构造函数说明参数说明
ShortPathTask(url:String,token?:String,context?:Object) 创建一个调用路径分析类的实例

url:路径分析服务的URL地址

token:令牌

context:附加参数,在服务器执行回调函数时,会将其值不变的传给回调函数。


方法


方法返回值说明参数说明
execute(params:Object) None 此函数会自动调用远程服务器的REST服务进行数据查询,将服务器的查询结果以JSON Object格式返回给客户端。 如下:
type:scgc.tasks.ShortPathTask.Type(必选)
   - 查询的数据的类型。
   - scgc.tasks.ShortPathTask.META:
     返回服务查询的元数据。
     如果选择此项,则只有callback,token,context这三个参数有效,
     其它参数将被忽略。            
   - scgc.tasks.ShortPathTask.DATA。
     返回查询的数据。
     如果选择此项,所有参数都有效,各参数必须根据相应的参数说明进行设置。
url:String(可选)
   - 查询服务的地址。
   - 如果此处没有设置值,将自动使用用构造函数中的值来代替。
     如果在构造函数中和此处设置同时设置,则使用此处设置的值,
     但此处设置的值只是临时的,仅限当前的一次调用有,
     且不会改变这个类全局(构造函数中设置)的值。
start:esri.geometry.Point(必选)
   - 路径的起点。
stop:esri.geometry.Point(必选)
   - 路径的终点。
vias:esri.geometry.Multipoint(可选)
   - 路径的途经点。
barriers:esri.geometry.Multipoint(可选)
   - 路径的障碍点。
direction:Boolean(可选,缺省值:false) 
   - 是否输出方向文本描述信息。
power:String(必选)
   - 求最短路径所使用的权值,即可根据用户的需求选择不同的路径方案。
   - 此参数可根据先请求的元数据中的信息获取。
   - 如power="POWER"表示尽量走高速。power="LENGTH"表示走路程最短。
callback:Function(必选)
   - 服务器返回后执行的回调函数。
error:Function(可选)
   - 当执行发生错误时执行的函数。
token:String(可选)
   - 向服务器发出查询请求的今牌。
   - 如果此服务为加密服务,则令牌不能为空。
     如果此处没有设置值,将自动使用用构造函数中的值来代替。
     如果在构造函数中和此处设置同时设置,则使用此处设置的值,
     但此处设置的值只是临时的,仅限当前的一次调用有,
     且不会改变这个类全局(构造函数中设置)的值。
context:Object(可选)
   - 附加参数,在服务器执行回调函数时,会将其值不变的传给回调函数。
               

事件


事件说明参数说明

onError(ex:Object, context:Object)

服务没有调用成功所触发的事件。

ex:服务返回的错误信息

context:附加参数,execute或构造函数中的context的值。



DataSearchTask 类

用于调用要素查询的服务。


常量


常量说明

scgc.tasks.DataSearchTask.META

返回服务查询的元数据。

scgc.tasks.DataSearchTask.DATA

返回服务查询的数据。

DataSearchTask.SpatialRel.INTERSECTS

Intersects。

DataSearchTask.SpatialRel.CONTAINS

Contains。

DataSearchTask.SpatialRel.OVERLAPS

Overlaps。

DataSearchTask.SpatialRel.WITHIN

Within。


构造函数


构造函数说明参数说明
DataSearchTask(url:String,token?:String,context?:Object) 创建一个要素查询类的实例

url:要素查询服务的URL地址

token:令牌

context:附加参数,在服务器执行回调函数时,会将其值不变的传给回调函数。


方法


方法返回值说明参数说明
execute(params:Object) None 此函数会自动调用远程服务器的REST服务进行数据查询,将服务器的查询结果以JSON Object格式返回给客户端。 如下:
type:scgc.tasks.DataSearchTask.Type(必选)
   - 查询的数据的类型。
   - scgc.tasks.DataSearchTask.META:
     返回服务查询的元数据。
     如果选择此项,则只有callback,token,context,url这四个个参数有效。
     其它参数将被忽略。            
   - scgc.tasks.DataSearchTask.DATA:
     返回查询的数据。
     如果选择此项,所有参数都有效,各参数必须根据相应的参数说明进行设置。
url:String(可选)
   - 查询服务的地址。
   - 如果此处没有设置值,将自动使用用构造函数中的值来代替。
     如果在构造函数中和此处设置同时设置,则使用此处设置的值,
     但此处设置的值只是临时的,仅限当前的一次调用有,
     且不会改变这个类全局(构造函数中设置)的值。
layerID:Integer(必选)
   - 要查询的图层。
geometry:esri.geometry.Geometry(可选)
(只支持esri.geometry.Point | 
       esri.geometry.Polyline | 
       esri.geometry.Polygon)
   - 输入的几何图形。
radius:Number(可选)
   - 搜索半径,单位为m(米)。
     如果不需要要缓冲查询则不输入此值,如果输入的此值就一定会执行缓冲区查询
spatialRel:几何关系(可选,缺省值:
           scgc.layers.DataSearchTask.SpatialRel.INTERSECTS)
   - 和要查询的要素的几何关系。
whereClause:Integer(必选)
   - 查询的条件。
returnGeometry:Boolean(可选,缺省值:true)
   - 是否返回几何信息
outFields:Array(可选,缺省值:[])
   - 返回的字段,如果不设置则返回所有字段。
callback:Function(必选)
   - 服务器返回后执行的回调函数。
error:Function(可选)
   - 当执行发生错误时执行的函数。
   - 别一种方法就是
   dojo.connect(your_task_instance,"onError",yourErrorFunction);
   errorFunction格式:function onTaskError(ex,context);
token:String(可选)
   - 向服务器发出查询请求的今牌。
   - 如果此服务为加密服务,则令牌不能为空。
     如果此处没有设置值,将自动使用用构造函数中的值来代替。
     如果在构造函数中和此处设置同时设置,则使用此处设置的值,
     但此处设置的值只是临时的,仅限当前的一次调用有,
     且不会改变这个类全局(构造函数中设置)的值。
context:Object(可选)
   - 附加参数,在服务器执行回调函数时,会将其值不变的传给回调函数。
               

事件


事件说明参数说明

onError(ex:Object, context:Object)

服务没有调用成功所触发的事件。

ex:服务返回的错误信息

context:附加参数,execute或构造函数中的context的值。

ESRI JavaScript API 示例



iMap Hello World

关键代码


var token = "-pxvYt1zsn3NWaFKnNvWv3JpaMr4q52nExENFVKX6BhSRQmKhARxV6rIpd1mgfu9";
var url = "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/mapserver";
var map = new esri.Map("map_container");
var layer = new scgc.layers.SCGISTiledMapServiceLayer(url);
dojo.connect(layer, "onTokenExpired", function(json) {
    layer.setToken(token);
});
map.addLayer(layer);
              

代码解析


1.声明一个访问服务的令牌(token),详细信息参见常见问题
// 把token字符串替换为你申请的token字符串。
var token = "-pxvYt1zsn3NWaFKnNvWv2kuaTHagPUzxurYm4reubnIgagIMvqEL_fQf3XAy-cy";
2.声明一个切片服务地址,记得一定要在后面加'/mapserver' 查看所有服务
var url = "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/mapserver";
3.创建一个地图对象,设置其容器为map_container
var map = new esri.Map("map_container");
              
4.创建一个切片图层对象,把切片的服务地址给它
var layer = new scgc.layers.SCGISTiledMapServiceLayer(url);
              
5.token过期处理
dojo.connect(layer, "onTokenExpired", function(json) {
    layer.setToken(token);
});
              
6.向地图容器中添加切片图层对象
map.addLayer(layer);
              

完整代码


<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        html{height:auto;}
        body{height:auto;margin:0; padding:0;}
        #map_container{ width:800px;height:500px;}
    </style>
    <title>iMap 地图JavaScript API 2.4+ 示例:Hello World</title>
    <link rel="Stylesheet" type="text/css" 
    href="http://www.scgis.net.cn/imap/jsapi/v27/js/dojo/dijit/themes/soria/soria.css" />
    <script type="text/javascript" src="http://www.scgis.net.cn/imap/jsapi/v27/"></script>
    <script type="text/javascript">
        function init() {
            // 把token字符串替换为你申请的token字符串。
            var token = "-pxvYt1zsn3NWaFKnNvWv1iVoRbXYzGEZvyzDfmjsECvIUR3TwTN364G0ItDlNNr";
            // 切片服务地址,记得一定要在后面加'/mapserver'
            var url = "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/mapserver";
            // 创建一个地图对象,设置其容器为map_container
            var map = new esri.Map("map_container");
            // 创建一个切片图层对象,把切片的服务地址给它
            var layer = new scgc.layers.SCGISTiledMapServiceLayer(url);
            // token过期处理
            dojo.connect(layer, "onTokenExpired", function(json) {
                layer.setToken(token);
            });
            // 向地图容器中添加切片图层对象
            map.addLayer(layer);
        }
        // 页面装载时候调用init函数
        dojo.addOnLoad(init);
    </script>
</head>
<body>
<div id="map_container"></div>
</body>
</html>
              

运行代码



地名搜索服务

关键代码


                     var token = "-pxvYt1zsn3NWaFKnNvWv6xn73FOCTdQ0_wZVxHPOpPNR5lK9g24AKUR_i_VgzYk";
                     //地图初始函数 
                     map = new esri.Map("mapShow");
                     //初始并加载瓦片图层对象 
                     TiledMapServiceLayer = new scgc.layers.SCGISTiledMapServiceLayer(mapUrl);
                     map.addLayer(TiledMapServiceLayer);
                     //注册瓦片图层Token事件 
                     var dc = dojo.connect(TiledMapServiceLayer, "onTokenExpired", function (json) 
                     { TiledMapServiceLayer.setToken(token); });
                  

代码解析


声明一个访问服务的令牌(token),详细信息参见常见问题
// 把token字符串替换为你申请的token字符串。
var token = "-pxvYt1zsn3NWaFKnNvWv6xn73FOCTdQ0_wZVxHPOpPNR5lK9g24AKUR_i_VgzYk";

创建一个地图对象实例,设置地图容器为mapShow面板,初始并加载瓦片图层。

关键代码


                            var queryShow = new scgc.tasks.NameSearchTask();
                            //调用对象实例的execute方法,并录入查询参数
                            queryShow.execute({
                                keywords: "医院", //要查询关键字
                                type: scgc.tasks.NameSearchTask.DATA, //查询的数据的类型
                                startIndex: "0", //返回的数据的开始的索引值
                                stopIndex: "12", //返回的数据的结束的索引值
                                statePAC: "5101", //市级的行政区代码(5101为成都市)
                                countyPAC: "510107", //县级的行政区划代码(510107为武侯区)
                                typeCode: "yl", //要查询的类型(yl为医院)
                                url: nameSearchUrl, //查询服务的地址
                                token: token, //查询服务的地址
                                //回调函数
                                callback: function (json, context) {
                                var data = json.message.features;
                                //地图显示点的样式声明
                                var pointsym = new esri.symbol.SimpleMarkerSymbol(
                                                   esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 15, 
                                                   new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                                                   new dojo.Color([255, 0, 0]), 2), new dojo.Color([98, 194, 204, 0.5]));
                                    //遍历返回的12个数据,在地图上进行显示
                                    for (i = 0; i < data.length; i++) {
                                    var infoStr = data[i].attributes[3];
                                    //声明地图气泡框内容
                                    var infotemplate = new esri.InfoTemplate("详细信息", infoStr);
                                    //声明数据点坐标
                                    var coord = new esri.geometry.Point(data[i].attributes[1], data[i].attributes[2]);
                                    //声明图形层
                                    var graphic = new esri.Graphic(coord, pointsym, null, infotemplate);
                                    //将图形层加载
                                    map.graphics.add(graphic);
                                    }
                                    map.setExtent(new esri.geometry.Extent(104.051, 30.64, 104.148, 30.696));
                                }
                            });
                   

代码解析


创建地名搜索对象实例,使用对象实例的execute方法,构建查询参数,并在回调函数中将返回的数据录入气泡框,并将信息点的位置在地图上进行显示。

完整代码


                        <!DOCTYPE html>
                        <html xmlns="http://www.w3.org/1999/xhtml">
                        <head>
                            <title>天地图四川帮助页面</title>
                            <link rel="stylesheet" type="text/css" 
                                href="http://www.scgis.net.cn/imap/jsapi/v27/js/dojo/dijit/themes/soria/soria.css"/>
                            <script type="text/javascript" src="http://www.scgis.net.cn/imap/jsapi/v27/"></script>
                            <script type="text/javascript">
                                          function init() {
                                    var mapUrl = "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/mapserver";
                                    var nameSearchUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/scNameSearch/";
                                    var token = "-pxvYt1zsn3NWaFKnNvWv6aQ4M6IHPm3my4BmVf0bnDnunqntLQd6uZjmh4MHOx1";
                                    //地图初始函数 
                                    map = new esri.Map("mapShow");
                                    //初始并加载瓦片图层对象 
                                    TiledMapServiceLayer = new scgc.layers.SCGISTiledMapServiceLayer(mapUrl);
                                    map.addLayer(TiledMapServiceLayer);
                                    //注册瓦片图层Token事件 
                                    var dc = dojo.connect(TiledMapServiceLayer, "onTokenExpired", function (json) 
                                    { TiledMapServiceLayer.setToken(token); });
                                    //声明地名搜索功能对象实例
                                    var queryShow = new scgc.tasks.NameSearchTask();
                                    //调用对象实例的execute方法,并录入查询参数
                                    queryShow.execute({
                                        keywords: "医院", //要查询关键字
                                        type: scgc.tasks.NameSearchTask.DATA, //查询的数据的类型
                                        startIndex: "0", //返回的数据的开始的索引值
                                        stopIndex: "12", //返回的数据的结束的索引值
                                        statePAC: "5101", //市级的行政区代码(5101为成都市)
                                        countyPAC: "510107", //县级的行政区划代码(510107为武侯区)
                                        typeCode: "yl", //要查询的类型(yl为医院)
                                        url: nameSearchUrl, //查询服务的地址
                                        token: token, //查询服务的地址
                                        //回调函数
                                        callback: function (json, context) {
                                            var data = json.message.features;
                                            //地图显示点的样式声明
                                            var pointsym = new esri.symbol.SimpleMarkerSymbol(
                                                           esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 15, 
                                                           new esri.symbol.SimpleLineSymbol(
                                                               esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                                                               new dojo.Color([255, 0, 0]), 2),
                                                               new dojo.Color([98, 194, 204, 0.5]));
                                            //遍历返回的12个数据,在地图上进行显示
                                            for (i = 0; i < data.length; i++) {
                                                var infoStr = data[i].attributes[3];
                                                //声明地图气泡框内容
                                                var infotemplate = new esri.InfoTemplate("详细信息", infoStr);
                                                //声明数据点坐标
                                                var coord = new esri.geometry.Point(
                                                               data[i].attributes[1], data[i].attributes[2]);
                                                //声明图形层
                                                var graphic = new esri.Graphic(coord, pointsym, null, infotemplate);
                                                //将图形层加载
                                                map.graphics.add(graphic);
                                            }
                                            map.setExtent(new esri.geometry.Extent(104.051, 30.64, 104.148, 30.696));
                                        }
                                    });

                                }
                                dojo.addOnLoad(init);
                            </script>
                        </head>
                        <body>
                            <div id="mapShow" class="soria" style="width:800px;height:400px;"></div>
                        </body>
                        </html>
                   

运行代码



路径分析服务

关键代码


                     //地图初始函数 
                     map = new esri.Map("mapShow");
                     //初始并加载瓦片图层对象 
                     TiledMapServiceLayer = new scgc.layers.SCGISTiledMapServiceLayer(mapUrl);
                     map.addLayer(TiledMapServiceLayer);
                     //注册瓦片图层Token事件 
                     var dc = dojo.connect(TiledMapServiceLayer, "onTokenExpired", function (json) 
                     { TiledMapServiceLayer.setToken(token); });
                  

代码解析


声明一个访问服务的令牌(token),详细信息参见常见问题
// 把token字符串替换为你申请的token字符串。
var token = "-pxvYt1zsn3NWaFKnNvWvz8XULYQ3EkCCUawdi0vv3FyHI49bieLddJgEHz6bcaR";

创建一个地图对象实例,设置地图容器为mapShow面板,初始并加载瓦片图层。

关键代码


                        var startgeo = new esri.geometry.Point(104.0703, 30.7128);//起点的几何对象
                        var endgeo = new esri.geometry.Point(104.1318, 30.6838);//终点几何对象
                        var pathShow = new scgc.tasks.ShortPathTask();
                            //调用对象实例的execute方法,并录入路径分析参数
                        pathShow.execute({
                            type: scgc.tasks.ShortPathTask.DATA, //返回的数据的类型
                            url: shortPathUrl, //路径分析服务的地址
                            start: startgeo, //起点
                            stop: endgeo, //终点
                            direction: false, //是否输出方向文本描述信息。
                            power: "length", //求最短路径所使用的权值,即可根据用户的需求选择不同的路径方案。
                            //此参数可根据先请求的元数据中的信息获取。
                            //如power="POWER"表示尽量走高速。power="LENGTH"表示走路程最短。
                            token: token, //向服务器发出分析请求的令牌
                            error: function(evt) { alert(evt) },
                            callback: function(json, context) {  //回调函数
                                var temp = json.message;
                                var pointsym = new esri.symbol.SimpleMarkerSymbol(
                                esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 15,new esri.symbol.SimpleLineSymbol(
                                esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 0.5),
                                new dojo.Color([98, 194, 204, 0.5])); //地图显示点的样式声明
                                var infotemplate_s = new esri.InfoTemplate("详细信息", "起点"); //声明起点地图气泡框内容
                                var infotemplate_e = new esri.InfoTemplate("详细信息", "终点"); //声明终点地图气泡框内容
                                var startgra = new esri.Graphic(startgeo, pointsym, "", infotemplate_s); //声明起点图形对象;
                                var endgra = new esri.Graphic(endgeo, pointsym, "", infotemplate_e);  //声明终点图形对象;
                                map.graphics.add(startgra); //地图图形层加入起点对象得到显示
                                map.graphics.add(endgra); //地图图形层加入终点对象得到显示
                                var Polyline = new esri.geometry.Polyline(temp.route); //以返回值构建的一条路径(几何对象,就是一条线)
                                Polyline.addPath(temp.route.paths[0]);
                                var symbol_path = new esri.symbol.SimpleLineSymbol()
                                .setColor(new dojo.Color([0, 0, 255, 0.5])).setWidth(4);//路径的符号,样式
                                var graphic_path = new esri.Graphic(Polyline, symbol_path); //地图图形对象
                                map.graphics.add(graphic_path); //地图图形层加入路径对象得到显示
                                map.setExtent(new esri.geometry.Extent(104.051, 30.664, 104.148, 30.720));
                            }
                        });
                   

代码解析


创建路径分析对象实例,使用对象实例的execute方法,构建分析参数,并在回调函数中将返回的数据录入气泡框,并将信息点的位置在地图上进行显示。

完整代码


                        <!DOCTYPE html>
                        <html xmlns="http://www.w3.org/1999/xhtml">
                        <head>
                            <title>天地图四川帮助页面</title>
                            <link rel="stylesheet" type="text/css" 
                                href="http://www.scgis.net.cn/imap/jsapi/v27/js/dojo/dijit/themes/soria/soria.css"/>
                            <script type="text/javascript" src="http://www.scgis.net.cn/imap/jsapi/v27/"></script>
                            <script type="text/javascript">
                            function init() {
                                    var mapUrl = "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/mapserver";
                                    var shortPathUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/scShortpath/";
                                    var token = "在这里填入你自己申请的Token";
                                    var startgeo = new esri.geometry.Point(104.0703, 30.7128);//起点的几何对象
                                    var endgeo = new esri.geometry.Point(104.1318, 30.6838);//终点几何对象
                                    //地图初始函数 
                                    map = new esri.Map("mapShow");
                                    //初始并加载瓦片图层对象 
                                    TiledMapServiceLayer = new scgc.layers.SCGISTiledMapServiceLayer(mapUrl);
                                    map.addLayer(TiledMapServiceLayer);
                                    //注册瓦片图层Token事件 
                                    var dc = dojo.connect(TiledMapServiceLayer, "onTokenExpired",
                                    function (json) { TiledMapServiceLayer.setToken(token); });
                                    //声明路径分析功能对象实例
                                    var pathShow = new scgc.tasks.ShortPathTask();
                                    //调用对象实例的execute方法,并录入路径分析参数
                                    pathShow.execute({
                                        type: scgc.tasks.ShortPathTask.DATA, //返回的数据的类型
                                        url: shortPathUrl, //路径分析服务的地址
                                        start: startgeo, //起点
                                        stop: endgeo, //终点
                                        direction: false, //是否输出方向文本描述信息。
                                        power: "length", //求最短路径所使用的权值,即可根据用户的需求选择不同的路径方案。
                                                        //此参数可根据先请求的元数据中的信息获取。
                                                        //如power="POWER"表示尽量走高速。power="LENGTH"表示走路程最短。
                                        token: token, //向服务器发出分析请求的令牌
                                        error:function(evt){alert(evt)},
                                        callback: function(json, context) {  //回调函数
                                            var temp = json.message;
                                            var pointsym = new esri.symbol.SimpleMarkerSymbol(
                                            esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 15, new esri.symbol.SimpleLineSymbol(
                                            esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 0.5),
                                            new dojo.Color([98, 194, 204, 0.5])); //地图显示点的样式声明
                                            var infotemplate_s = new esri.InfoTemplate("详细信息", "起点"); //声明起点地图气泡框内容
                                            var infotemplate_e = new esri.InfoTemplate("详细信息", "终点"); //声明终点地图气泡框内容
                                            var startgra = new esri.Graphic(startgeo, pointsym, "", infotemplate_s); 
                                            //声明起点图形对象;
                                            var endgra = new esri.Graphic(endgeo, pointsym, "", infotemplate_e);  
                                            //声明终点图形对象;
                                            map.graphics.add(startgra); //地图图形层加入起点对象得到显示
                                            map.graphics.add(endgra); //地图图形层加入终点对象得到显示
                                            var Polyline = new esri.geometry.Polyline(temp.route); 
                                            //以返回值构建的一条路径(几何对象,就是一条线)
                                            Polyline.addPath(temp.route.paths[0]);
                                            var symbol_path = new esri.symbol.SimpleLineSymbol()
                                            .setColor(new dojo.Color([0, 0, 255, 0.5])).setWidth(4); //路径的符号,样式
                                            var graphic_path = new esri.Graphic(Polyline, symbol_path); //地图图形对象
                                            map.graphics.add(graphic_path); //地图图形层加入路径对象得到显示
                                            map.setExtent(new esri.geometry.Extent(104.051, 30.664, 104.148, 30.720));
                                        }
                                    });
                                }
                                dojo.addOnLoad(init);
                            </script>
                        </head>
                        <body>
                            <div id="mapShow" class="soria" style="width:800px;height:400px;"></div>
                        </body>
                        </html>
                   

运行代码



要素查询服务

关键代码


            // 把token字符串替换为你申请的token字符串。
            var token = "-pxvYt1zsn3NWaFKnNvWv-04S6fwffSImXXHUPYQhLJqvrg4RW60zPSsLVHlD1u4";
            //初始地图对象
            map = new esri.Map("mapShow");
            //初始并加载瓦片图层对象,tilemapurl以/mapserver结束
            var TiledMapServiceLayer = new scgc.layers.SCGISTiledMapServiceLayer(tilemapurl);
            map.addLayer(TiledMapServiceLayer);
            //注册瓦片图层Token事件
            var dc = dojo.connect(TiledMapServiceLayer, "onTokenExpired", function(json) { 
                TiledMapServiceLayer.setToken(token); });
            
            //构建一个查询条件对象,
            var params = {
                type: scgc.tasks.DataSearchTask.DATA,//请求类型
                url: datasearchurl,//请求地址
                token: token,//Token字符串
                layerID: 0,//请求图层
                geometry: polygon,//空间对象
                spatialRel: "spatialRelIntersects",//空间关系
                whereClause: "OBJECTID<50",//条件语句
                //回调函数
                callback: function(json, context) {
                    if (json.success) {
                        addToMap(json.message);
                        map.setExtent(polygon.getExtent());
                    } else {
                        alert("查询错误:" + json.description);
                    }
                },
                //错误函数
                error: function(ex, context) {
                    alert("查询错误:" + ex.description);
                }
            };
            //创建Task并执行请求
            var query = new scgc.tasks.DataSearchTask();
            query.execute(params);
                

代码解析


声明一个访问服务的令牌(token),详细信息参见常见问题
                // 把token字符串替换为你申请的token字符串。
                var token = "-pxvYt1zsn3NWaFKnNvWv5-mzjHQHxI-Wx8RtNhi_we1AmbRU2aD5_hwqJ-PWIra";
                

创建一个地图对象实例,设置地图容器为mapShow面板,初始并加载瓦片图层。

关键代码


            //初始地图对象
            map = new esri.Map("mapShow");
            //初始并加载瓦片图层对象,tilemapurl以/mapserver结束
            var TiledMapServiceLayer = new scgc.layers.SCGISTiledMapServiceLayer(tilemapurl);
            map.addLayer(TiledMapServiceLayer);
            //注册瓦片图层Token事件
            var dc = dojo.connect(TiledMapServiceLayer, "onTokenExpired", function(json) { 
                TiledMapServiceLayer.setToken(token); });
                

代码解析


够建要素查询条件,创建查询对象执行查询。

关键代码


            //创建一个面对象
            var polygonJson = { "rings": [[[103.045, 31.362], [103.023, 29.998], [104.535, 30.388], 
            [104.365, 31.169],[103.045, 31.362]]], "spatialReference": { " wkid": 4326 }
            };
            var polygon = new esri.geometry.Polygon(polygonJson);
            //构建一个查询条件对象,
            var params = {
                type: scgc.tasks.DataSearchTask.DATA,//请求类型
                url: datasearchurl,//请求地址
                token: token,//Token字符串
                layerID: 0,//请求图层
                geometry: polygon,//空间对象
                spatialRel: "spatialRelIntersects",//空间关系
                whereClause: "OBJECTID<50",//条件语句
                //回调函数
                callback: function(json, context) {
                    if (json.success) {
                        addToMap(json.message);
                        map.setExtent(polygon.getExtent());
                    } else {
                        alert("查询错误:" + json.description);
                    }
                },
                //错误函数
                error: function(ex, context) {
                    alert("查询错误:" + ex.description);
                }
            };
            //创建Task并执行请求
            var query = new scgc.tasks.DataSearchTask();
            query.execute(params);
                

代码解析


将查询结果显示在地图上,并将其属性信息加入该图形的提示气泡框中。

关键代码


            //遍历每个要素
            for (var i = 0; i < feas.length; i++) {
                var fea = feas[i];
                //收集要素的字段名称及字段值
                var infoStr = "";
                for (var j = 0; j < cols.length; j++) {
                    infoStr += cols[j].caption + ": " + fea.attributes[j] + "
"; } //创建信息框对象 var infotemplate = new esri.InfoTemplate("详细信息", infoStr); //对不同类型的对象进行添加 if (fea.geometryType == "Point") { var graphic = new esri.Graphic(new esri.geometry.Point(fea.geometry), pointsym, null, infotemplate); map.graphics.add(graphic); } else if (fea.geometryType == "Polyline") { var graphic = new esri.Graphic(new esri.geometry.Polyline(fea.geometry), linesym, null, infotemplate); map.graphics.add(graphic); } else if (fea.geometryType == "Polygon") { var graphic = new esri.Graphic(new esri.geometry.Polygon(fea.geometry), areasym, null, infotemplate); map.graphics.add(graphic); } }

完整代码


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>天地图四川帮助页面</title>
    <link rel="stylesheet" type="text/css" 
        href="http://www.scgis.net.cn/imap/jsapi/v27/js/dojo/dijit/themes/soria/soria.css"/>
    <script type="text/javascript" src="http://www.scgis.net.cn/imap/jsapi/v27/"></script>
    <script type="text/javascript">
        var map;
        var tilemapurl= "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/mapserver";
        var datasearchurl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/SClocation/";
        var token = "-pxvYt1zsn3NWaFKnNvWv54Ql_UXz34YRMam2hLHAjaRU5WfoKkJe9jpTWpQtN9b";
        //地图初始函数
        function init() {
            //初始地图对象
            map = new esri.Map("mapShow",{logo:false});
            //初始并加载瓦片图层对象,tilemapurl以/mapserver结束
            var TiledMapServiceLayer = new scgc.layers.SCGISTiledMapServiceLayer(tilemapurl);
            map.addLayer(TiledMapServiceLayer);
            //注册瓦片图层Token事件
            var dc = dojo.connect(TiledMapServiceLayer, "onTokenExpired", function(json) {
                TiledMapServiceLayer.setToken(token);
            });
            dojo.connect(map, "onLoad", function() {
                search();
            });
        }
        //要素查询函数
        function search() {
            //创建一个面对象
            var polygonJson = { "rings": [[[103.045, 31.362], [103.023, 29.998], [104.535, 30.388],
                 [104.365, 31.169],[103.045, 31.362]]], "spatialReference": { " wkid": 4326 }};
            var polygon = new esri.geometry.Polygon(polygonJson);
            //构建一个查询条件对象,
            var params = {
                type: scgc.tasks.DataSearchTask.DATA, //请求类型
                url: datasearchurl, //请求地址
                token: token, //Token字符串
                layerID: 0, //请求图层
                geometry: polygon, //空间对象
                spatialRel: "spatialRelIntersects", //空间关系
                whereClause: "OBJECTID<50", //条件语句
                //回调函数
                callback: function(json, context) {
                    if (json.success) {
                        addToMap(json.message);
                        map.setExtent(polygon.getExtent());
                    } else {
                        alert("查询错误:" + json.description);
                    }
                },
                //错误函数
                error: function(ex, context) {
                    alert(ex.message);
                }
            };
            //创建Task并执行请求
            var query = new scgc.tasks.DataSearchTask();
            query.execute(params);
        }
        function addToMap(returnData) {
            var cols = returnData.columns;
            var feas = returnData.features;
            map.graphics.clear();
            //地图显示点、线、面的样式
            var pointsym = new esri.symbol.SimpleMarkerSymbol(
                    esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,
                    20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                    new dojo.Color([255, 0, 0]), 2), new dojo.Color([98, 194, 204, 0.5]));
            var linesym = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                    new dojo.Color([250, 30, 30, 1]), 2);
            var areasym = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                    new dojo.Color([98, 194, 204]), 2), new dojo.Color([98, 194, 204, 0.5]))
            //遍历每个要素
            for (var i = 0; i < feas.length; i++) {
                var fea = feas[i];
                //收集要素的字段名称及字段值
                var infoStr = "";
                for (var j = 0; j < cols.length; j++) {
                    infoStr += cols[j].caption + ": " + fea.attributes[j] + "<br />";
                }
                //创建信息框对象
                var infotemplate = new esri.InfoTemplate("详细信息", infoStr);
                var graphic = null;
                //对不同类型的对象进行添加
                if (fea.geometryType == "Point") {
                    var geo = new esri.geometry.Point(fea.geometry);
                    graphic = new esri.Graphic(geo, pointsym, null,infotemplate);                    
                } else if (fea.geometryType == "Polyline") {
                    var geo = new esri.geometry.Polyline(fea.geometry);
                    graphic = new esri.Graphic(geo, linesym, null, infotemplate);
                } else if (fea.geometryType == "Polygon") {
                    var geo = new esri.geometry.Polygon(fea.geometry);
                    graphic = new esri.Graphic(geo, areasym, null, infotemplate);
                }
                map.graphics.add(graphic);
            }
        }
        dojo.addOnLoad(init);    
    </script>
</head>
<body>
    <div id="mapShow" class="soria" style="width:800px;height:400px;"></div>
</body>
</html>
                

运行代码