地图的放大、缩小、平移

发送反馈

通过改变 China 地图出图的参数，可以实现地图图片的放大、缩小、平移等效果。这些效果跟出图参数中的 center、scale、viewBounds 相关，当 center、scale 和 viewBounds 冲突时，以 center 和 scale 为准。

查看 iServer REST API 中的 image 资源页面 GET 请求部分可知，center 指要出图的地图的中心点（也就是 viewerBounds 的中心），通过改变 center，可以实现地图的平移；scale 指地图的当前例尺（也反映在 viewer 和 viewerBounds 的比例关系），通过改变 scale，可以实现地图的放大/缩小。（通过指定 viewerBounds 可以实现同样的效果）

首先，新建一个 HTML 页面如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE>REST 示例——地图的放大、缩小、平移</TITLE>

  <script  type="text/javascript" src="json_parse.js"></script>

  <script  type="text/javascript" src="toJSON.js"></script>

 </HEAD>

 <BODY>

  <input type="submit" name="Submit" value="左平移" onclick=leftpan() />

  <input type="submit" name="Submit" value="右平移" onclick=rightpan() />

  <input type="submit" name="Submit" value="放大" onclick=zoomin() />

  <input type="submit" name="Submit" value="缩小" onclick=zoomout() />

  <br><br>

  <div align=left id="container" style="left:50px;top:50px" onload=getMapImage()>

 </BODY>

 <SCRIPT LANGUAGE="JavaScript">

 <!--

  //示例代码添加的地方

-->

 </SCRIPT>

</HTML>

然后，添加示例代码，实现将 China 地图每次放大/缩小1.2倍、每次平移30万米，代码如下：

<SCRIPT LANGUAGE="JavaScript">

<!--

    //示例代码添加的地方

    //页面载入时就显示图片

    window.onload=function ()

    {

        getMapImage();

    }

    //默认的地图中心点和比例尺

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

    var scale=0.00000003;

    //地图向西平移30万米

    function leftpan()

    {

        center.x+=300000;

        getMapImage();

    }

    //地图向东平移30万米

    function rightpan()

    {

        center.x-=300000;

        getMapImage();

    }

    //地图放大1.2倍

    function zoomin()

    {

        scale*=1.2;

        getMapImage();

    }

    //地图缩小1.2倍

    function zoomout()

    {

        scale/=1.2;

        getMapImage();

    }

    //获取 China 地图中心点为(11000000.0, 3500000.0)，比例尺为1：30000000（约为0.00000003）的图片

    function getMapImage()

    {

        var commit=getcommit();

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

        var uriParams;

        

        //构建出图参数

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

        //将参数加到 URI 中

        uri=uri+"?"+uriParams;

        //alert(uri);

        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+'>';

    }

//-->

</SCRIPT>

HTML 页面载入时，就会获取一张 China 地图的图片，点击相应按钮，就可以对地图图片进行操作，效果如下：