获取地图的图片

发送反馈


获取 China 地图的图片,要用到 China 地图的子资源,即 image 资源,URI 如下:

http://localhost:8090/iserver/services/map-china400/rest/maps/China/image.bmp

其中,“.bmp”后缀说明返回为 bmp 格式的图片表述。对该 URI 执行 GET 请求,就可以获取 China 地图的图片,为定制图片的内容,可以再 URI 后附件一些参数,例如:用户显示视窗的大小、地图显示区域的范围、地图的中心点等。关于各参数的含义,请参见 REST API 中的 image 资源页面 GET 请求说明

例如要获取中心点为(11000000.0, 3500000.0),比例尺为1:30000000(约为0.00000003),需要设置的字段是 center 和 scale,构建 url 如下:

http://localhost:8090/iserver/services/map-china400/rest/maps/China/image.bmp?center={x:11000000.0,y:3500000.0}&scale=0.00000003

对该 URI 执行 GET 请求,服务器端返回的是图片的字节流,你可以保存图片到本地。利用浏览器解析服务器端的响应,即可获得中心点为(11000000.0, 3500000.0),比例尺为1:30000000的 China 图片,代码如下:

function getbmp()

{

    //获取用作显示的 Div 容器。

    var container = document.getElementById('container');

    //输出结果

    container.innerHTML="";

    container.innerHTML += '<p>China 图片为:</p><IMG id =map src=http://localhost:8090/iserver/services/map-china400/rest/maps/China/image.bmp?center={x:11000000.0,y:3500000.0}&scale=0.00000003>';

}

另外,SuperMap iServer REST 服务提供了另一种的 image 资源的表述格式——JSON。即对如下 URI 执行 GET 请求:

http://localhost:8090/iserver/services/map-china400/rest/maps/China/image.json

服务器会将图片缓存在服务器端,返回该 China 地图的图片 URI(imageUrl 字段)和地图参数(mapParam),请参见 REST API 中的  image 资源页面 GET 请求说明。提取返回的信息,并放在网页元素中,代码如下:

function getCacheImage()

{

    var commit=getcommit();

    var uri="http://localhost:8090/iserver/services/map-china400/rest/maps/China/image.json"

    var uriParams;

    //构建中心点

    var center={x:11000000.0,y:3500000.0};

    //构建出图参数

    uriParams="center="+toJSON(center)+"&scale="+0.00000003;

    //将参数加到 URI 中

    uri=uri+"?"+uriParams;

    commit.open("GET",encodeURI(uri),false,"","");

    commit.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

    commit.send(null);

    

    //解析从服务器端返回的 json 字符串,解析为一个 JavaScript 对象。

    var response = json_parse(commit.responseText, null);       

    //获取用作显示的 Div 容器。

    var container = document.getElementById('container');

    //输出结果

    container.innerHTML="";

    container.innerHTML += '<p>China 图片为:</p><IMG id =map src='+response.imageUrl+'>';

}

在 HTML 页面中显示如下: