天天看點

arcgis for javascript 編寫的在頁面上顯示地圖的小例子

本人是初學者還是個實習生,是以就簡單的寫了個小例子(注意此例子是在所有資源都配置好的前提下!!)

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

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

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

    <title>Simple Map</title>

    <style>

      html, body, #map {

        height: 100%;

        width: 100%;

        margin: 0;

        padding: 0;

      }

      body {

        background-color: #FFF;

        overflow: hidden;

        font-family: "Trebuchet MS";

      }

    </style>

    <script type="text/javascript">

//var dynamic_jsapi_url="localhost:8080/arcgis_js_api/library/2.8/jsapi/";

//var arcGisJsApiRootPath = "localhost:8080";

</script>

<%--

<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/2.8/jsapi/js/dojo/dojo/dojo.xd.js"></script>

<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/2.8/jsapi/js/esri/esri.js"></script>

<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/2.8/jsapi/js/esri/jsapi.js"></script>

這裡帶我的人說也可以代替下面的代碼,公司老員工說下面的放到tomcat下更友善,是以你們要用的話就用這裡的代碼(前提是以上幾個js都已将釋出(可以用浏覽器浏覽)

--%>

<%

    //String dynamic_server_gis = request.getServerName()+":"+request.getServerPort();

    //String dynamic_server_gis = "10.1.134.3:8080";

    String dynamic_server_gis = request.getServerName()+":"+request.getServerPort();

    String dynamic_server_name = request.getServerName()+":"+request.getServerPort() + request.getContextPath();

    String dynamic_jsapi_url = dynamic_server_gis + "/arcgis_js_api/library/2.8/jsapi/";

    out.println("<link type=\"text/css\" rel=\"stylesheet\" href=\"http://"+dynamic_jsapi_url+"js/dojo/dijit/themes/tundra/tundra.css\"/>");

    out.println("<script type=\"text/javascript\">var dynamic_jsapi_url=\""+dynamic_jsapi_url+"\";var arcGisJsApiRootPath = \""+dynamic_server_gis+"\";var fullContext=\"http://"+dynamic_server_name+"\";</script>");

    out.println("<script type=\"text/javascript\" src=\"http://"+dynamic_jsapi_url+"js/dojo/dojo/dojo.xd.js\"></script>");

    out.println("<script type=\"text/javascript\" src=\"http://"+dynamic_jsapi_url+"js/esri/esri.js\"></script>");

    out.println("<script type=\"text/javascript\" src=\"http://"+dynamic_jsapi_url+"js/esri/jsapi.js\"></script>");

//    out.println("<script type=\"text/javascript\">esriConfig.defaults.io.proxyUrl=\"http://"+dynamic_server_name+"/js/map/map-core/proxy.jsp"+"\";esriConfig.defaults.io.alwaysUseProxy=false;</script>");

%>

<!--

   <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/2.8/jsapi/js/dojo/dojo/dojo.xd.js"></script>

   <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/2.8/jsapi/js/esri/esri.js"></script>

   <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/2.8/jsapi/js/esri/jsapi.js"></script>

    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/2.8/jsapi/init.js"></script>

 -->    

</script>

  <script type="text/javascript">

  dojo.require("esri.map");

function init() {

var lods = [ {"level": 1,"scale": 36978595.474472,"resolution": 9783.93962049996

    },{"level": 2,"scale": 18489297.737236,"resolution": 4891.96981024998

    }, {"level": 3,"scale": 9244648.868618,"resolution": 2445.98490512499

    }, {"level": 4,"scale": 4622324.434309,"resolution": 1222.99245256249

    }, {"level": 5,"scale": 2311162.217155,"resolution": 611.49622628138

    }, {"level": 6,"scale": 1155581.108577,"resolution": 305.748113140558

    }, {"level": 7,"scale": 577790.554289,"resolution": 152.874056570411

    }, {"level": 8,"scale": 288895.277144,"resolution": 76.4370282850732

    }, {"level": 9,"scale": 144447.638572,"resolution": 38.2185141425366

    }, {"level": 10,"scale": 72223.819286,"resolution": 19.1092570712683

    }, {"level": 11,"scale": 36111.909643,"resolution": 9.55462853563415

    }, {"level": 12,"scale": 18055.954822,"resolution": 4.77731426794937

    }];      //這裡定義的東西是地圖放大縮小滾動條下的級别,不加的話不顯示滾動條隻顯示兩個頭(級别定義不合理也不行)

var mymap = new esri.Map("mapDiv",{logo:false,slider: true,lods: lods,});  //建立一個地圖,第一個參數是下面包含地圖的div的id,第二個參數本别是消logo,顯示滾動條,加lods其餘看API

var mylayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://172.16.10.242:8399/arcgis/rest/services/china/chinalayernew/MapServer");   //向圖從添加服務

mymap.addLayer(mylayer);

mylayer.setVisibility(true);   //可加可不加,預設就是

//以上四行代碼是最基本的代碼(API可查)

}

dojo.addOnLoad(init);

  </script>

</head>

<body class="tundra">

<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>

<div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>

</body>

</html>