使用js语言调用supermap引擎加载地图并添加覆盖物

1.根据supamap提供的实例demo下载所依赖的js

           http://iclient.supermap.io/examples/classic/editor.html#map_cloudLayer 这个里面含有相应的demo

在这里慢找到相应的资源包,下载相应的js

2.引入js 

       一般来说引入三个js基本上就够用了,要是需要其他js再重新引入

     <script type="text/javascript" include="bootstrap" src="js/include-web.js"></script>
     <script type="text/javascript" exclude="iclient-classic" src="js/include-classic.js"></script>
     <script type="text/javascript" src="http://iclient.supermap.io/web/libs/iclient8c/libs/SuperMap.Include.js"></script>

3.写一个div用来加载地图

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

4.编写相应的js

<script>

//声明一些变量,后面会用到    

       var map, layer, markerlayer, marker,

       url="http://116.136.138.4:53003/iserver/services/map-allzhbj_dt181125/rest/maps/GDB_Items@allzhbj_dt";

       //url  这里面填写自己发布出来的地图地址,没有的话可以用supermap自带

      //的 http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World

//覆盖物图片参数

        var size = new SuperMap.Size(44, 33);
        var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
        var icon = new SuperMap.Icon('img/marker.png', size, offset);    

        init();      //初始化地图

function init(){

//初始化地图  创建map地图对象，通过设置options参数添加指定控件

    map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.Zoom(), //缩放控件 默认情况下垂直显示在地图左上角。

                new SuperMap.Control.Navigation(),

               //可以根据自己需要去API中找到相应的控件    

               // http://iclient.supermap.io/libs/iclient8c/apidoc/files/SuperMap/Control/MousePosition-js.html
            ]
        });

//添加图层  如果想要在一个地图上显示多个自己发布的图层 ,url的值换成js数组,把地址放到数组里面

//js数组:var url=new Array("地址一","地址二","地址三")

       layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url,{maxResolution:"auto"});

       

       layer.events.on({"layerInitialized": addLayer});//给这个图层添加监听事件

        //添加覆盖物图层
        markerlayer = new SuperMap.Layer.Markers("markerLayer");
        marker = new SuperMap.Marker(new SuperMap.LonLat(110.72 , 39.33), icon);

       //给覆盖物添加鼠标点击事件 
        marker.events.on({
            "click": function(){
                var marker = this;
                var lonlat = marker.getLonLat();
                alert(lonlat.lon+","+lonlat.lat)
            }
            //"touchstart": openInfoWin,    //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
            //"scope": marker
        });
        markerlayer.addMarker(marker);

}

function addLayer() {
        map.addLayers([layer, markerlayer]);//添加REST图层和覆盖物图层
        //设置地图的中心点,后面的一个参数("4")是缩放级别可以不要,默认为把该地图显示完全
        map.setCenter(new SuperMap.LonLat(110.72 , 39.33),4);
    }

//添加地图点击事件  supermap 在地图上的点击事件,会得到相应的像素位置,只有转换过之后才能得到坐标位置

map.events.on({"click":function(e,a){
           //删除其他坐标
           markerlayer.removeMarker(marker);
           //获取相对应的像素
           var x = e.layerX;
           var y = e.layerY;

           //把像素转换为坐标位置
           var px = new SuperMap.Pixel(x,y);
           //转换为相应坐标
           var point = map.getLonLatFromPixel(px);

         //创建该覆盖物
        marker = new SuperMap.Marker(new SuperMap.LonLat(point.lon, point.lat), icon);

//给覆盖物添加鼠标点击事件 
        marker.events.on({
            "click": function(){
                var marker = this;
                var lonlat = marker.getLonLat();
                alert(lonlat.lon+","+lonlat.lat)
            }
            //"touchstart": openInfoWin,    //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
            //"scope": marker
        });

        //在图层上添加上覆盖物
        markerlayer.addMarker(marker);
       }});