天地图•四川2023年度数据更新年报
  • 概述
  • 入门指导
  • API参考
  • 代码示例
Openlayers JavaScript API简介
        OpenLayers是一个用于开发WebGIS客户端的JavaScript包。用户可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，可以通过远程服务的方式，将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。可以在浏览器中帮助开发者实现地图浏览的基本效果，比如放大（Zoom In）、缩小（Zoom Out）、平移（Pan）等常用操作，还可以进行选取面、选取线、要素选择、图层叠加等不同的操作，甚至可以对已有的OpenLayers 操作和数据支持类型进行扩充，为其赋予更多的功能。

天地图·四川 OpenLayer JavaScript API 具有如下特点:
1、可以直接调用地图服务实现地图显示。
2、稳定、兼容性强、便捷。
3、地图预览与地图切换更流畅，视觉效果更优。
4、开发更简单。

功能介绍
  • 基础地图服务在网页中显示地图,支持矢量、影像、透明注记等地图，支持多种服务叠加。
  • 图层管理管理地图显示方式，主要是影像，矢量，注记，用户自定义标记和描绘等相关的图层显示与切换操作。
  • 地图标绘支持用户自定义在地图中进行标绘，获取更直观、明了的地图信息。
  • 路径导航提供包括时间最短(尽量走高速),路程最短等分析方式,可以任意设置途径点\障碍点等,进行最优路径分析。
  • 地图工具提供清除、全图、测距、测面、打印、标绘、纠错、地图分享、鼠标右键等对地图直接进行操作的工具。
  • 地名搜索提供包括地名模糊搜索、范围搜索、缓冲区搜索、属性分类搜索等地名搜索服务。
openlayers js 介绍
        OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。
操作方面
        OpenLayers 除了可以在浏览器中帮助开发者实现地图浏览的基本效果，比如放大（Zoom In）、缩小（Zoom Out）、平移（Pan）等常用操作之外，还可以进行选取面、选取线、要素选择、图层叠加等不同的操作，甚至可以对已有的OpenLayers 操作和数据支持类型进行扩充，为其赋予更多的功能。
获取API
        地图API是由JavaScript语言编写的，您在使用之前需要通过<script>标签将API引用到页面中： 
        <link rel="Stylesheet" type="text/css" 
        href="http://www.scgis.net/SCGCMap/OpenLayers-scgisExtension-2.12.03.js" />
版本说明
        此API为地图展示版本，主要完成地图的展示和操作功能，如地图定位、放大和缩小等！

        兼容性:
                浏览器：IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
                操作系统：Windows、Mac、Linux
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>

Openlayers JavaScript API 参考

SCGISTileMapEx 类
SCGISThemeMap 类
SCGISFramed 类


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
地名搜索服务
路径分析服务
要素查询服务


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>

运行代码

关于我们 | 免责声明
联系我们 | 更新日志 | 意见反馈 | 工作动态
主办单位：四川测绘地理信息局　　承办单位：自然资源部四川基础地理信息中心
网站支持IPv6甲测资字51002001蜀ICP备11018666号-4
天地图微信小程序