- 概述
- 入门指导
- API参考
- 代码示例
天地图·四川 OpenLayer JavaScript API 具有如下特点:
1、可以直接调用地图服务实现地图显示。
2、稳定、兼容性强、便捷。
3、地图预览与地图切换更流畅,视觉效果更优。
4、开发更简单。
- 基础地图服务在网页中显示地图,支持矢量、影像、透明注记等地图,支持多种服务叠加。
- 图层管理管理地图显示方式,主要是影像,矢量,注记,用户自定义标记和描绘等相关的图层显示与切换操作。
- 地图标绘支持用户自定义在地图中进行标绘,获取更直观、明了的地图信息。
- 路径导航提供包括时间最短(尽量走高速),路程最短等分析方式,可以任意设置途径点\障碍点等,进行最优路径分析。
- 地图工具提供清除、全图、测距、测面、打印、标绘、纠错、地图分享、鼠标右键等对地图直接进行操作的工具。
- 地名搜索提供包括地名模糊搜索、范围搜索、缓冲区搜索、属性分类搜索等地名搜索服务。
<link rel="Stylesheet" type="text/css" href="http://www.scgis.net/SCGCMap/OpenLayers-scgisExtension-2.12.03.js" />
兼容性:
浏览器:IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
操作系统:Windows、Mac、Linux
该示例创建一个地图区域
关键代码
var token = "KcZLcw1phSk7n9XICcZcBnhDwtHx35zeE1BsOI-a9tF5VW6HZfYGTx_UfWYa-N3z"; var tilemapUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/"; var map = new OpenLayers.Map("map_container"); var extent=[95.50484501954,28.198615625002, 110.65328251954, 32.284064843752]; var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); map.addLayer(layer);
代码解析
1.声明一个访问服务的令牌(token),详细信息参见常见问题。// 把token字符串替换为你申请的token字符串。 var token = "KcZLcw1phSk7n9XICcZcBnhDwtHx35zeE1BsOI-a9tF5VW6HZfYGTx_UfWYa-N3z";2.声明一个切片服务地址 查看所有服务
var url = "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/";3.创建一个地图对象,设置其容器为map_container
var map = new OpenLayers.Map("map_container");4.创建一个切片图层对象,把切片的服务地址和显示范围给它
var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent});5.向地图容器中添加切片图层对象
map.addLayer(layer);
完整代码
<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="textml; charset=utf-8" /> <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> <script type="text/javascript" src="http://www.scgis.net/SCGCMap/OpenLayers-scgisExtension-2.12.03.js"></script> <script type="text/javascript"> function init() { // 把token字符串替换为你申请的token字符串。 var token = "t0eYFNOSM-gP6rG3RfE6Kf52qNPg1UEySyzyK8ajM_q4ZoqQrGaO_0pkd36FsRzX"; // 切片服务地址 var tilemapUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/"; // 创建一个地图对象,设置其容器为map_container var map = new OpenLayers.Map("map_container"); //创建图层显示范围 var extent=[95.50484501954,28.198615625002, 110.65328251954, 32.284064843752]; // 创建一个切片图层对象,把切片的服务地址给它 var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); // 向地图容器中添加一个切片图层对象 map.addLayer(layer); } </script> </head> <body onload="init()"> <div id="map_container"></div> </body> </html>
Openlayers JavaScript API 参考
SCGISTileMapEx 类
此类主要用于加载四川省基础地理中心发布的REST风格的切片地图服务。
构造函数:
构造函数 | 说明 | 参数说明 |
---|---|---|
OpenLayers.Layer.SCGISTileMapEx(layername:String,url:String,{options?:Object}) | 创建一个切片图层的实例 |
url:切片服务的URL地址 options:可选参数列表 toke:令牌 layername:图层名称 isBaseLayer:是否为基础图层 zoomToExtent:缩放范围 transitionEffect:缩放渐变 errorCallback:加载失败回调函数 visibility:可见性 isZoomToInitialExtent:是否缩放到原始范围 maxExtent:显示最大范围 returnTipTile: 是否让服务器返回带提示信息的空图片 displayOutsideMaxExtent:超出最大范围是否显示 yx:坐标系设置 |
方法:
方法名 | 返回值 | 说明 | 参数说明 |
---|---|---|---|
setToken(token:String) | None | 设置token,当访问令牌失效后重新设置令牌。 | token:令牌 |
setTimeStamp(timestamp:String) | None | 设置时间。 | timestamp:时间 |
SCGISThemeMap 类
主要用于加载地名搜索结果瓦片图层。
构造函数:
构造函数 | 说明 | 参数说明 |
---|---|---|
OpenLayers.Layer.SCGISThemeMap(layername:String,url:String,{options?:Object}) | 创建一个地名搜索结果图层的实例 |
layername:图层名称 url:地名搜索的URL地址 options:可选参数列表 toke:令牌 isBaseLayer:是否基础图层 maxResolution:显示最大分辨率 transitionEffect:缩放渐变 errorCallback:加载失败回调函数 visibility:可见性 format:返回图片格式 |
方法:
方法名 | 返回值 | 说明 | 参数说明 |
---|---|---|---|
setOptionalKVPs (params: Object) | None | 设置扩展参数,主要是地名搜索的关键字或类型。 | params:图层附加参数,包括参数名称和参数值,多个参数以数组传递 |
identify(x:Float,y:Float,tolerancePixel:Intenger,callbackFunction:function(json)) | None | 通过点查询当前图层要素信息 |
x:x坐标 y:y坐标 tolerancePixel:容限像素个数 callbackFunction:查询完毕回调函数 |
getResolution() | Resolution:float | 获取图层分辨率 |
SCGISFramed 类
用于构建自定义信息框。
构造函数:
构造函数 | 说明 | 参数说明 |
---|---|---|
OpenLayers.Popup. SCGISFramed(id:String,lonlat:LonLat,contentSize:Size,contentHTML:String, anchor:String,closeBox:Object,closeBoxCallback:function()) | 创建一个自定义信息框的实例 |
id:信息框id lonlat:经纬度 contentSize:尺寸 contentHTML:信息框html内容 closeBoxCallback:关闭按钮回调函数/p> |
方法:
方法名 | 返回值 | 说明 | 参数说明 |
---|---|---|---|
Show() | None | 显示信息框 | |
Hide() | None | 隐藏信息框 | |
Destroy () | None | 销毁信息框 | |
Visible() | None | 信息框可见性 |
Openlayers JavaScript API 示例
iMap Hello World
该示例创建一个地图区域
关键代码
var token = "KcZLcw1phSk7n9XICcZcBnhDwtHx35zeE1BsOI-a9tF5VW6HZfYGTx_UfWYa-N3z"; var tilemapUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/"; var map = new OpenLayers.Map("map_container"); var extent=[95.50484501954,28.198615625002, 110.65328251954, 32.284064843752]; var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); map.addLayer(layer);
代码解析
1.声明一个访问服务的令牌(token),详细信息参见常见问题。
// 把token字符串替换为你申请的token字符串。 var token = "KcZLcw1phSk7n9XICcZcBnhDwtHx35zeE1BsOI-a9tF5VW6HZfYGTx_UfWYa-N3z";2.声明一个切片服务地址 查看所有服务
var url = "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/";3.创建一个地图对象,设置其容器为map_container
var map = new OpenLayers.Map("map_container");4.创建一个切片图层对象,把切片的服务地址和显示范围给它
var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent});5.向地图容器中添加切片图层对象
map.addLayer(layer);
完整代码
<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="textml; charset=utf-8" /> <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> <script type="text/javascript" src="http://www.scgis.net/SCGCMap/OpenLayers-scgisExtension-2.12.03.js"></script> <script type="text/javascript"> function init() { // 把token字符串替换为你申请的token字符串。 var token = "t0eYFNOSM-gP6rG3RfE6Kf52qNPg1UEySyzyK8ajM_q4ZoqQrGaO_0pkd36FsRzX"; // 切片服务地址 var tilemapUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/"; // 创建一个地图对象,设置其容器为map_container var map = new OpenLayers.Map("map_container"); //创建图层显示范围 var extent=[95.50484501954,28.198615625002, 110.65328251954, 32.284064843752]; // 创建一个切片图层对象,把切片的服务地址给它 var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); // 向地图容器中添加一个切片图层对象 map.addLayer(layer); } </script> </head> <body onload="init()"> <div id="map_container"></div> </body> </html>
运行代码
地名搜索服务
该示例创建一个地图区域加载地图瓦片服务,同时对四川省成都市武侯区的医院进行查询,并将查询结果显示在地图上。
关键代码
var token = "KcZLcw1phSk7n9XICcZcBnhDwtHx35zeE1BsOI-a9tF5VW6HZfYGTx_UfWYa-N3z"; var tilemapUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/"; var map = new OpenLayers.Map("map_container"); var extent=[95.50484501954,28.198615625002, 110.65328251954, 32.284064843752]; var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); map.addLayer(layer);
代码解析
声明一个访问服务的令牌(token),详细信息参见常见问题。
// 把token字符串替换为你申请的token字符串。 var token = "KcZLcw1phSk7n9XICcZcBnhDwtHx35zeE1BsOI-a9tF5VW6HZfYGTx_UfWYa-N3z";
创建一个地图对象实例,设置地图容器为mapShow面板,初始并加载瓦片图层。
关键代码
//查询地址 var nameSearchUrl="http://www.scgis.net.cn:5506/iMap/iMapServer/DefaultRest/services/newtianditunamesearch/"; //定义地名搜索结果图层 //定义查询参数 var _content = { keyname: "医院", //要查询关键字 startIndex: "0", //返回的数据的开始的索引值 stopIndex: "12", //返回的数据的结束的索引值 DiQuKey: "5101", //市级的行政区代码(5101为成都市) QuXianKey: "510107", //县级的行政区划代码(510107为武侯区) typeCode: "yl", //要查询的类型(yl为医院) url: nameSearchUrl, //查询服务的地址 token: token, //向服务器发出查询请求的令牌 //回调函数 callback: namesearchCallback } //声明查询脚本,创建查询请求 var jsonp = new OpenLayers.Protocol.Script(); jsonp.createRequest(nameSearchUrl+"Search?",_content,namesearchCallback); function namesearchCallback(json, context) { var data = json.message.features; //地图显示点的样式声明 //地名点 var geometrypt; //地名要素 var namefeat; //遍历返回的12个数据,在地图上进行显示 for (i = 0; i < data.length; i++) { var stylenamesearch = { externalGraphic: "img/marker.png", graphicWidth: 20, graphicHeight: 20, graphicTitle: data[i].attributes[3] }; var infoStr = data[i].attributes[3]; //要素点坐标 geometrypt = new OpenLayers.Geometry.Point(data[i].attributes[1], data[i].attributes[2]); //要素 namefeat = new OpenLayers.Feature.Vector(geometrypt, data[i].attributes, stylenamesearch); //加载要素 nameSearchVector.addFeatures(namefeat); } }
代码解析
创建地名搜索对象实例,使用对象实例的execute方法,构建查询参数,并在回调函数中将返回的数据录入气泡框,并将信息点的位置在地图上进行显示。
完整代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="textml; charset=utf-8" /> <title>天地图四川帮助页面</title> <script src="http://www.scgis.net/SCGCMap/OpenLayers-scgisExtension-2.12.03.js"></script> <script type="text/javascript"> var nameSearchVector = new OpenLayers.Layer.Vector(); function init() { // 把token字符串替换为你申请的token字符串。 var token = "t0eYFNOSM-gP6rG3RfE6Kf52qNPg1UEySyzyK8ajM_q4ZoqQrGaO_0pkd36FsRzX"; // 切片服务地址 var tilemapUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/"; // 创建一个地图对象,设置其容器为map_container var map = new OpenLayers.Map("mapShow"); //创建图层显示范围 var extent=[95.50484501954,28.198615625002, 110.65328251954, 32.284064843752]; // 创建一个切片图层对象,把切片的服务地址给它 var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); // 向地图容器中添加一个切片图层对象 map.addLayer(layer); map.addLayer(nameSearchVector); //查询地址 var nameSearchUrl="http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditunamesearch/"; //定义地名搜索结果图层 //定义查询参数 var _content = { keyname: "医院", //要查询关键字 startIndex: "0", //返回的数据的开始的索引值 stopIndex: "12", //返回的数据的结束的索引值 DiQuKey: "5101", //市级的行政区代码(5101为成都市) QuXianKey: "510107", //县级的行政区划代码(510107为武侯区) typeCode: "yl", //要查询的类型(yl为医院) url: nameSearchUrl, //查询服务的地址 token: token, //向服务器发出查询请求的令牌 //回调函数 callback: namesearchCallback } //声明查询脚本,创建查询请求 var jsonp = new OpenLayers.Protocol.Script(); jsonp.createRequest(nameSearchUrl+"Search?",_content,namesearchCallback); } function namesearchCallback(json, context) { var data = json.message.features; //地图显示点的样式声明 //地名点 var geometrypt; //地名要素 var namefeat; //遍历返回的12个数据,在地图上进行显示 for (i = 0; i < data.length; i++) { var stylenamesearch = { externalGraphic: "img/marker.png", graphicWidth: 20, graphicHeight: 20, graphicTitle: data[i].attributes[3] }; var infoStr = data[i].attributes[3]; //要素点坐标 geometrypt = new OpenLayers.Geometry.Point(data[i].attributes[1], data[i].attributes[2]); //要素 namefeat = new OpenLayers.Feature.Vector(geometrypt, data[i].attributes, stylenamesearch); //加载要素 nameSearchVector.addFeatures(namefeat); } } </script> </head> <body onload="init()"> <div id="mapShow" class="soria" style="width:800px;height:400px;"></div> </body> </html>
运行代码
路径分析服务
该示例创建一个地图区域加载地图瓦片服务,同时对2个点之间的最短路径进行分析,并将分析结果显示在地图上。
关键代码
var map = new OpenLayers.Map("mapShow"); // 切片服务地址 var tilemapUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/"; extent=[104.0624 - 0.1, 30.6615 - 0.1, 104.0624 + 0.1, 30.6615 + 0.1]; //成都 // 创建一个切片图层对象,把切片的服务地址给它 var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); // 向地图容器中添加一个切片图层对象 map.addLayer(layer); map.addLayer(shortpathLayer);
代码解析
声明一个访问服务的令牌(token),详细信息参见常见问题。
// 把token字符串替换为你申请的token字符串。 var token = "-pxvYt1zsn3NWaFKnNvWvz8XULYQ3EkCCUawdi0vv3FyHI49bieLddJgEHz6bcaR";
创建一个地图对象实例,设置地图容器为mapShow面板,初始并加载瓦片图层。
关键代码
//起点和终点坐标 var startX=104.0703; var startY=30.7128; var stopX=104.1318; var stopY=30.6838; //创建图层显示范围 var extent=[104.0624 - 0.1, 30.6615 - 0.1, 104.0624 + 0.1, 30.6615 + 0.1]; //成都 // 创建一个切片图层对象,把切片的服务地址给它 var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); // 向地图容器中添加一个切片图层对象 map.addLayer(layer); map.addLayer(shortpathLayer); //路径分析参数 var _content = { startX: startX, startY: startY, //起点XY stopX: stopX, stopY: stopY, //终点XY powerColumnName: "length", //路径分析选项(length为路径最短、power时间最短) returnDirection: false, //是否输出方向文本描述信息。 VIAPoints: "", //途经点json BarriesLocation: "", //障碍点json token: token, //令牌 ST: parseInt(Math.random() * 100000) //随机数,以免提交请求的时候路径相同就用客户端缓存。 }; var jsonp = new OpenLayers.Protocol.Script(); jsonp.createRequest(shortPathUrl + "/shortPath", _content, function (json, context) { //回调函数 if(json.success) { var temp = json.message; var imapjson_format = new OpenLayers.Format.SCGISJSON(); //以返回值构建的一条路径(几何对象,就是一条线) var geom = imapjson_format.read(temp.route, "Polyline"); //定义线段样式 var style_path={ strokeColor: "#0000FF", strokeWidth: 4, strokeOpacity: 0.5, strokeDashstyle: "solid" }; //地图图形层加入路径对象得到显示 var graphic_path = new OpenLayers.Feature.Vector(geom, null, style_path); //地图图形对象 shortpathLayer.addFeatures(graphic_path); } else alert(json.message.error); });
代码解析
创建路径分析对象实例,使用对象实例的execute方法,构建分析参数,并在回调函数中将返回的数据录入气泡框,并将信息点的位置在地图上进行显示。
完整代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="textml; charset=utf-8" /> <title>天地图四川帮助页面</title> <script src="http://www.scgis.net/SCGCMap/OpenLayers-scgisExtension-2.12.03.js"></script> <script type="text/javascript"> var shortpathLayer = new OpenLayers.Layer.Vector(); function init() { //定义地图 var map = new OpenLayers.Map("mapShow"); // 把token字符串替换为你申请的token字符串。 var token = "t0eYFNOSM-gP6rG3RfE6Kf52qNPg1UEySyzyK8ajM_q4ZoqQrGaO_0pkd36FsRzX"; // 切片服务地址 var tilemapUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/"; var shortPathUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/scShortpath/"; //路径分析服务地址 //起点和终点坐标 var startX=104.0703; var startY=30.7128; var stopX=104.1318; var stopY=30.6838; //地图初始函数 //创建图层显示范围 var extent=[95.50484501954,28.198615625002, 110.65328251954, 32.284064843752]; extent=[104.0624 - 0.1, 30.6615 - 0.1, 104.0624 + 0.1, 30.6615 + 0.1]; //成都 // 创建一个切片图层对象,把切片的服务地址给它 var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); // 向地图容器中添加一个切片图层对象 map.addLayer(layer); map.addLayer(shortpathLayer); //路径分析参数 var _content = { startX: startX, startY: startY, //起点XY stopX: stopX, stopY: stopY, //终点XY powerColumnName: "length", //路径分析选项(length为路径最短、power时间最短) returnDirection: false, //是否输出方向文本描述信息。 VIAPoints: "", //途经点json BarriesLocation: "", //障碍点json token: token, //令牌 ST: parseInt(Math.random() * 100000) //随机数,以免提交请求的时候路径相同就用客户端缓存。 }; var jsonp = new OpenLayers.Protocol.Script(); jsonp.createRequest(shortPathUrl + "/shortPath", _content, function (json, context) { //回调函数 if(json.success) { var temp = json.message; var imapjson_format = new OpenLayers.Format.SCGISJSON(); //以返回值构建的一条路径(几何对象,就是一条线) var geom = imapjson_format.read(temp.route, "Polyline"); //定义线段样式 var style_path={ strokeColor: "#0000FF", strokeWidth: 4, strokeOpacity: 0.5, strokeDashstyle: "solid" }; //地图图形层加入路径对象得到显示 var graphic_path = new OpenLayers.Feature.Vector(geom, null, style_path); //地图图形对象 shortpathLayer.addFeatures(graphic_path); } else alert(json.message.error); }); } </script> </head> <body onload="init()"> <div id="mapShow" class="soria" style="width:800px;height:400px;"></div> </body> </html>
运行代码
要素查询服务
该示例创建一个地图区域加载地图瓦片服务,同时对要素进行空间(Polygon面)和属性(OBJECTID< 50)的混合查询,并将查询结果显示在地图上。
关键代码
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/"; // 把token字符串替换为你申请的token字符串。 var token = "KcZLcw1phSk7n9XICcZcBnhDwtHx35zeE1BsOI-a9tF5VW6HZfYGTx_UfWYa-N3z";// 切片服务地址 var tilemapUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/"; var datasearchLayer = new OpenLayers.Layer.Vector(); //地图初始函数 function init() { // 创建一个地图对象,设置其容器为map_container map = new OpenLayers.Map("im_mapShow"); //创建图层显示范围 var extent=[95.50484501954,28.198615625002, 110.65328251954, 32.284064843752]; // 创建一个切片图层对象,把切片的服务地址给它 var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); // 向地图容器中添加一个切片图层对象 map.addLayer(layer); map.addLayer(datasearchLayer); 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]]]}; //构建一个查询条件对象, var content={ token: token, //Token字符串 layerID: 0, //请求图层 geometry: polygonJson, //空间对象 spatialRel: "spatialRelIntersects", //空间关系 whereClause: "OBJECTID<50" //条件语句 }; $.ajax({ type: "get", async: false, data:content, url: datasearchurl+"searchData?", //请求地址 dataType: "jsonp", jsonp: "callback", success: callback, error: function(ex) { alert("查询错误:" + ex.description); } }); }
代码解析
声明一个访问服务的令牌(token),详细信息参见常见问题。
// 把token字符串替换为你申请的token字符串。 var token = "-pxvYt1zsn3NWaFKnNvWv5-mzjHQHxI-Wx8RtNhi_we1AmbRU2aD5_hwqJ-PWIra";
创建一个地图对象实例,设置地图容器为mapShow面板,初始并加载瓦片图层。
关键代码
// 创建一个地图对象,设置其容器为map_container map = new OpenLayers.Map("im_mapShow"); //创建图层显示范围 var extent=[95.50484501954,28.198615625002, 110.65328251954, 32.284064843752]; // 创建一个切片图层对象,把切片的服务地址给它 var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); // 向地图容器中添加一个切片图层对象 map.addLayer(layer); map.addLayer(datasearchLayer);
代码解析
够建要素查询条件,创建查询对象执行查询。
关键代码
//创建一个面对象 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 content={ token: token, //Token字符串 layerID: 0, //请求图层 geometry: polygonJson, //空间对象 spatialRel: "spatialRelIntersects", //空间关系 whereClause: "OBJECTID<50" //条件语句 }; $.ajax({ type: "get", async: false, data:content, url: datasearchurl+"searchData?", //请求地址 dataType: "jsonp", jsonp: "callback", success: callback, //回调函数 error: function(ex) { alert("查询错误:" + ex.description); } });
代码解析
将查询结果显示在地图上,并将其属性信息加入该图形的标题中。
关键代码
//遍历每个要素 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] + "
"; } //对查询结果要素进行添加 //对象添加至图层 if (fea.geometryType == "Point") { //地图显示点要素的样式 var style_Point={ externalGraphic: "img/marker.png", graphicWidth: 20, graphicHeight: 20, graphicTitle: infoStr, graphicYOffset: -20 }; feature=new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(fea.geometry.x, fea.geometry.y)); feature.style=style_Point; } datasearchLayer.addFeatures(feature); }
完整代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="textml; charset=utf-8" /> <title>天地图四川帮助页面</title> <script src="http://www.scgis.net/SCGCMap/OpenLayers-scgisExtension-2.12.03.js"></script> <script type="text/javascript"> var map; var tilemapurl = "http://www.scgis.net.cn/imap/iMapServer/DefaultRest/services/SCTileMap/"; var datasearchurl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/SClocation/"; // 把token字符串替换为你申请的token字符串。 var token = "t0eYFNOSM-gP6rG3RfE6Kf52qNPg1UEySyzyK8ajM_q4ZoqQrGaO_0pkd36FsRzX";// 切片服务地址 var tilemapUrl = "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/"; var datasearchLayer = new OpenLayers.Layer.Vector(); //地图初始函数 function init() { // 创建一个地图对象,设置其容器为map_container map = new OpenLayers.Map("mapShow"); //创建图层显示范围 var extent=[95.50484501954,28.198615625002, 110.65328251954, 32.284064843752]; // 创建一个切片图层对象,把切片的服务地址给它 var layer = new OpenLayers.Layer.SCGISTileMapEx("dlgMapLayer", tilemapUrl,{token:token,zoomToExtent:extent}); // 向地图容器中添加一个切片图层对象 map.addLayer(layer); map.addLayer(datasearchLayer); 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]]]}; //构建一个查询条件对象, var content={ token: token, //Token字符串 layerID: 0, //请求图层 geometry: polygonJson, //空间对象 spatialRel: "spatialRelIntersects", //空间关系 whereClause: "OBJECTID<50" //条件语句 }; $.ajax({ type: "get", async: false, data:content, url: datasearchurl+"searchData?", //请求地址 dataType: "jsonp", jsonp: "callback", success: callback, error: function(ex) { alert("查询错误:" + ex.description); } }); } function callback(json, context) { if (json.success) { addToMap(json.message); } else { alert("查询错误:" + json.description); } } function addToMap(returnData) { var cols = returnData.columns; var feas = returnData.features; //遍历每个要素 for (var i = 0; i < feas.length; i++) { var fea = feas[i]; var feature; //收集要素的字段名称及字段值 var infoStr = ""; for (var j = 0; j < cols.length; j++) { infoStr += cols[j].caption + ":" + fea.attributes[j] + ", "; } //对象添加至图层 if (fea.geometryType == "Point") { //地图显示点要素的样式 var style_Point={ externalGraphic: "img/marker.png", graphicWidth: 20, graphicHeight: 20, graphicTitle: infoStr, graphicYOffset: -20 }; feature=new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(fea.geometry.x, fea.geometry.y)); feature.style=style_Point; } datasearchLayer.addFeatures(feature); } } </script> </head> <body onload="init()"> <div id="mapShow" class="soria" style="width:800px;height:400px;"></div> </body> </html>