启动iServer服务以后，进入到服务管理页面；在菜单 示范程序 下拉，看到for JavaScript 项；

SuperMap iObjects Java教程 supermap for js_css

进入到for JavaScript示范程序；

SuperMap iObjects Java教程 supermap for js_css_02

以下是第一个示范程序的源码；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>墨卡托投影系地图</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 553px;
            border:1px solid #3473b7;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = '../libs/SuperMap.Include.js'></script>
    <script type="text/javascript">
                var map, layer,
              host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
               url = host + "/iserver/services/map-china400/rest/maps/China";
        function init(){
            //初始化地图
            map = new SuperMap.Map("map",{controls:[
                        new SuperMap.Control.Navigation() ,
                       new SuperMap.Control.Zoom()
            ]});
            map.addControl(new SuperMap.Control.MousePosition());
            //初始化图层
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null,{maxResolution:"auto"});
            //监听图层信息加载完成事件
            layer.events.on({"layerInitialized":addLayer});
        }
        //异步加载图层
        function addLayer(){
            map.addLayer(layer);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(0, 0), 1);
        }

    </script>
</head>
  <body onLoad = "init()">
      <div id = "map"></div>
  </body>
</html>

看一下此发布的地图的坐标系；

SuperMap iObjects Java教程 supermap for js_SuperMap_03

最常用于网络地图应用的两个坐标系统是EPSG：4326和EPSG：3857。

EPSG：4326（又名WGS84，未投影）是一个地理的非项目坐标系。它是lat，longs GPS显示器。它的单位是十进制度。EPSG：4326无法在平面地图上以有意义的方式显示。
EPSG：3857（又名Pseudo-Mercator，球形墨卡托或Web墨卡托）是投影坐标系。这是Google Maps和几乎所有其他Web制图应用程序使用的坐标系。

 

需要包含for Javascript的库；SuperMap.Include.js；和相应的样式文件；

 

<div id = "map"></div>

定义一个div，id为map，作为显现地图的容器；

样式的#map{}部分，定义此容器的样式；

 

host和url是发布的地图服务网址；

 

map = new SuperMap.Map("map",{controls:[
                         new SuperMap.Control.Navigation() ,
                        new SuperMap.Control.Zoom()
             ]});

初始化地图；第一个参数是div的id；

在地图上添加地图浏览控件；Control.Navigation

Navigation是不可见控件，监听鼠标点击、平移、滚轮等事件来实现对地图的浏览操作。

Control.Zoom()，在地图上添加缩放控件；就是左上角的加减号的那个；

SuperMap.Control.MousePosition();     //该控件显示鼠标移动时，所在点的地理坐标。

 

TiledDynamicRestLayer： 动态分块图层，用来对接SuperMap iServer 8C的分块动态REST图层服务

"China", 图层名；

maxResolution {Float} 用于地图实例化的时候设置最大分辨率（设置该值可以使地图在分辨率达到某个值的时候无法 再缩小）。当不想将整张地图都展示在通过 tileSize 指定大小的一张瓦 片上的时候设置该值。设置为auto的时候地图会自适应视口大小。 

 

异步加载图层；图层信息加载完成，执行addLayer()；

map.addLayer(layer); 把图层添加到地图；
map.setCenter(new SuperMap.LonLat(0, 0), 1); 设置地图中心点(0,0)；SuperMap.LonLat是超图经纬度类；1是缩放级别。