Zoom in, zoom out and pan

Feedback

You can achieve the zooming and panning effects of the map by changing the output parameters. The effects are achieved by changing the parameters: center, scale, and viewBounds. When viewBounds contradicts with center and scale, the values of center and scale will be employed.

By referring to the introduction to the GET request on the page for image Resoruce in the iServer REST APIs section, we know that we can achieve the panning effects by changing the center, the center of the viewBounds. And by changing the scale, which indicates the ratio of the viewer and the viewBounds, we can achieve the zooming effects, both zooming in and zooming out. (We can achieve the same effects by specifying the viewBounds)

First, build an HTML page.

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

<HTML>

 <HEAD>

  <TITLE>REST Sample——Zooming and Panning</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="Pan Left" onclick=leftpan() />

  <input type="submit" name="Submit" value="Pan Right" onclick=rightpan() />

  <input type="submit" name="Submit" value="Zoom In" onclick=zoomin() />

  <input type="submit" name="Submit" value="Zoom Out" onclick=zoomout() />

  <br><br>

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

 </BODY>

 <SCRIPT LANGUAGE="JavaScript">

 <!—

  //Add sample code

//-->

 </SCRIPT>

</HTML>

Then, add the sample code to achieve the effect of zooming out/in 1.2 times each time and panning 300,000 meters each time.

<SCRIPT LANGUAGE="JavaScript">

<!--

    //Add sample code

    //Display the image on page load

    window.onload=function ()

    {

        getMapImage();

    }

    //The default center and scale of the map

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

    var scale=0.00000003;

    //Pan west by 300,000 meters

    function leftpan()

    {

        center.x+=300000;

        getMapImage();

    }

    //Pan east by 300,000 meters

    function rightpan()

    {

        center.x-=300000;

        getMapImage();

    }

    //Zoom in by 1.2 times

    function zoomin()

    {

        scale*=1.2;

        getMapImage();

    }

    //Zoom out by 1.2 times

    function zoomout()

    {

        scale/=1.2;

        getMapImage();

    }

    // Get the map image with the center at (11000000.0, 3500000.0) at the scale of  1：30000000 (around 0.00000003)

    function getMapImage()

    {

        var commit=getcommit();

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

        var uriParams;

        

        //Construct the map parameters

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

        //Add parameters to the URI

        uri=uri+"?"+uriParams;

        //alert(uri);

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

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

        commit.send(null);

        

        //Parse the json string returned from the server to a JavaScript object

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

        //Gets the Div container for display.

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

        //The output result

        container.innerHTML="";

        container.innerHTML += '<p>Image of China: </p><IMG id =map src='+response.imageUrl+'>';

    }

//-->

</SCRIPT>

When the HTML page is loaded, an image for China is displayed. By clicking the buttons above, you can achieve the corresponding effects.