- 概述
- 入门指导
- API参考
- 代码示例
天地图·四川 ESRI JavaScript API V3.0版具有如下特点:
1、地图载入速度更快,显示更流畅。
2、地图服务更加稳定,使用更加便捷。
3、兼容各大主流浏览器,兼容能力更强。
4、一切基于服务,多种多样的免费开发方式。
- 基础地图服务在网页中显示地图,支持矢量、影像、透明注记等地图,支持多种服务叠加。
- 图层管理管理地图显示方式,主要是影像,矢量,注记,用户自定义标记和描绘等相关的图层显示与切换操作。
- 地图标绘支持用户自定义在地图中进行标绘,获取更直观、明了的地图信息。
- 路径导航提供包括时间最短(尽量走高速),路程最短等分析方式,可以任意设置途径点\障碍点等,进行最优路径分析。
- 地图工具提供清除、全图、测距、测面、打印、标绘、纠错、地图分享、鼠标右键等对地图直接进行操作的工具。
- 地名搜索提供包括地名模糊搜索、范围搜索、缓冲区搜索、属性分类搜索等地名搜索服务。
<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>
兼容性:
浏览器:IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
操作系统:Windows、Mac、Linux
关键代码
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>