范例讲解

本章主要讲解代码包中提供的几个范例，以及如何修改范例。在工程文件目录中的assets\www\...下有几个html文件，这便是范例代码。

一、Hello Word

假设我们现在有一个简单的浏览器端地图范例（如下），只需要修改几行代码，便可以让该范例在安卓移动设备上运行起来。 

<!DOCTYPE HTML>
<html>
<head>  
    <meta charset="utf-8" /> 
    <title>SuperMap iClient for JavaScript</title>
    <style>
        #map{
            border:0px solid;
        }
    </style>
    <script src="libs/SuperMap.Include.js"></script>
    <script type="text/javascript">
    var map, layer;
    function init() {
        map = new SuperMap.Map("map",{controls: [                      
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
            ]
        });   
        layer = new SuperMap.Layer.CloudLayer();
        map.addLayer(layer);      
        map.setCenter(new SuperMap.LonLat(11615044.272732, 4422334.5114479), 4);     
    }
    </script>
</head>
<body onload="init()">
    <div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div>    
</body>
</html>

1.引入phonegap相关代码：<script type="text/javascript" src="js/cordova-2.7.0.js"></script>

2.修改初始化方式：删除onload="init()"，加上document.addEventListener("deviceready",init,false);

3.设置运行方式为app应用：SuperMap.Util.setApp(true);

修改后的代码如下：

<!DOCTYPE HTML>
<html>
<head>  
    <meta charset="utf-8" /> 
    <title>SuperMap iClient for JavaScript</title>
    <style>
        #map{
            border:0px solid;
        }
    </style>
    <script type="text/javascript" src="js/cordova-2.7.0.js"></script><!--引入phonegap相关代码-->
    <script src="libs/SuperMap.Include.js"></script>
    <script type="text/javascript">
    var map, layer;
    function init() {
        SuperMap.Util.setApp(true);//设置为app应用
        map = new SuperMap.Map("map",{controls: [                      
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
            ]
        });   
        layer = new SuperMap.Layer.CloudLayer();
        map.addLayer(layer);      
        map.setCenter(new SuperMap.LonLat(11615044.272732, 4422334.5114479), 4);     
    }
    document.addEventListener("deviceready",init,false);//绑定初始化事件
    </script>
</head>
<body>
    <div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div>    
</body>
</html>

在生成的工程目录中，默认运行的便是该范例，见assets\www\helloword.html


二、mbtiles离线缓存范例

JavaScript移动端产品支持iServer生成的mbtiles格式的离线缓存，关于mbtiles离线缓存，请见iserver帮助文档

下面我来讲解如何使用离线缓存：

1.代码包中有一个已经生成好的mbtiles文件（resource\Android\data\China.mbtiles），将该文件拷贝到移动设备sdcard的SuperMap文件夹中（部分设备的SuperMap文件夹可能会出现在内部存储中）。

2.创建一个TiledDynamicRESTLayer，第一个参数为mbtiles文件的文件名（去掉后缀，这里我们用China），第四个参数中，需要设置storageType为db：

layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", "", {}, {"storageType":"db"});

注意：这里不需要再绑定TiledDynamicRESTLayer的layerInitialized事件了。

代码如下：

<!DOCTYPE HTML>
<html>
<head>  
    <meta charset="utf-8" /> 
    <title>SuperMap iClient for JavaScript</title>
    <style>
        #map{
            border:0px solid;
        }
    </style>
    <script type="text/javascript" src="js/cordova-2.7.0.js"></script>
    <script src="libs/SuperMap.Include.js"></script>
    <script type="text/javascript">
    var map, layer;
    function init() {
        SuperMap.Util.setApp(true);
        map = new SuperMap.Map("map",{controls: [                      
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
            ]
        });   
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", "", {}, {"storageType":"db"});  //使用mbtiles  
        map.addLayer(layer);
        map.setCenter(new SuperMap.LonLat(0, 0), 1); 
    }
    document.addEventListener("deviceready",init,false);
    </script>
</head>
<body>
    <div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div>    
</body>
</html>

该范例的示例代码见assets\www\mbtiles.html

你可以修改工程文件目录中的res\xml\config.xml文件，将工程运行的页面改为mbtiles.html：

打开config.xml文件，将其中的<content src="helloword.html" />改为<content src="mbtiles.html" />，然后运行。


三、定位范例

想利用iClient JavaScript产品实现定位也非常简单，产品中已经提供了定位控件，您只需要调用该控件即可实现定位。

以SuperMap云服务为例，步骤如下：

1.引入定位控件：

<script src="js/LocationControl.js"></script>

3.创建定位定位成功回调方法：

// 获取位置信息成功时调用的回调函数
function onSuccess(position) {
    transCoordinate(position.lon,position.lat,
        function(position){
            var lat = position.lat;  
            var lon = position.lon; 
            markerLayer.clearMarkers();
            
            var size = new SuperMap.Size(44, 33);
            var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
            var icon = new SuperMap.Icon("./img/mark.png", size, offset);
                      
            markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(lon, lat), icon));
            map.setCenter(new SuperMap.LonLat(lon, lat));
        },
        function(){
            alert("坐标转换失败!");
        }
    );
}

4.创建坐标转换方法：

//云服务转换坐标	
function transCoordinate(lon,lat,onSuccess,onError){   
    var urlCoordinate="http://services.supermapcloud.com/iserver/cloudhandler";
    
    var lon_Cloud = lon;
    var lat_Cloud = lat;
    
    var param = "{\"x\":" + lon_Cloud + ",\"y\":" + lat_Cloud + "}";
    var data = {"servicename":"coordinateService","methodname":"convertGPS2SM","parameter":param};
    
    jQuery.ajax({
        "dataType":"jsonp",
        "jsonp":"jsonp",
        "type":"GET",
        "url":urlCoordinate,
        "data":data,
        "success":function(onSuccess){
            return function(cb){
                var position = {
                    "lon":cb.result[0].x,
                    "lat":cb.result[0].y
                };
                onSuccess(position);
            }
        }(onSuccess),
        "error":onError
    });
}

5.创建定位失败回调方法：

function onError(msg) {
    alert(msg);
}

6.创建定位控件实例，并调用其定位方法：

var locationCtrl = new SuperMap.LocationControl();
locationCtrl.local(onSuccess,onError,5000);

完整示例代码如下：

<!DOCTYPE HTML>
<html>
<head>  
    <meta charset="utf-8" /> 
    <title>SuperMap iClient for JavaScript</title>
    <style>
        #map{
            border:0px solid;
        }
    </style>
    <script type="text/javascript" src="js/cordova-2.7.0.js"></script>
    <script src="js/jquery.js"></script>
    <script src="libs/SuperMap.Include.js"></script>
    <script src="js/LocationControl.js"></script>
    <script type="text/javascript">
    var map, layer,markerLayer,locationCtrl;
    function init() {
        SuperMap.Util.setApp(true);
        map = new SuperMap.Map("map",{controls: [                      
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
            ]
        });   
        layer = new SuperMap.Layer.CloudLayer();
        markerLayer = new SuperMap.Layer.Markers("Markers");
        map.addLayers([layer,markerLayer]);      
        map.setCenter(new SuperMap.LonLat(11615044.272732, 4422334.5114479), 4);     
    }
    function locating(){
        if(!locationCtrl){
            locationCtrl = new SuperMap.LocationControl();
        }
        locationCtrl.local(onSuccess,onError,5000);
    }
    // 获取位置信息成功时调用的回调函数
    function onSuccess(position) {
        transCoordinate(position.lon,position.lat,
            function(position){
                var lat = position.lat;  
                var lon = position.lon; 
                markerLayer.clearMarkers();
                
                var size = new SuperMap.Size(44, 33);
                var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
                var icon = new SuperMap.Icon("./img/mark.png", size, offset);
                          
                markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(lon, lat), icon));
                map.setCenter(new SuperMap.LonLat(lon, lat));
            },
            function(){
                alert("坐标转换失败!");
            }
        );
    }
    // onError回调函数
    function onError(msg) {
      alert(msg);
    }
    //云服务转换坐标    
    function transCoordinate(lon,lat,onSuccess,onError){   
        var urlCoordinate="http://services.supermapcloud.com/iserver/cloudhandler";
        
        var lon_Cloud = lon;
        var lat_Cloud = lat;
        
        var param = "{\"x\":" + lon_Cloud + ",\"y\":" + lat_Cloud + "}";
        var data = {"servicename":"coordinateService","methodname":"convertGPS2SM","parameter":param};
        
        jQuery.ajax({
            "dataType":"jsonp",
            "jsonp":"jsonp",
            "type":"GET",
            "url":urlCoordinate,
            "data":data,
            "success":function(onSuccess){
                return function(cb){
                    var position = {
                        "lon":cb.result[0].x,
                        "lat":cb.result[0].y
                    };
                    onSuccess(position);
                }
            }(onSuccess),
            "error":onError
        });
    }
    document.addEventListener("deviceready",init,false);
    </script>
</head>
<body>
    <div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div> 
    <input id="button" style="position:absolute;right:5px;top:5px;z-index:999" value="定位" type="button" ontouchend="locating()"></input>    
</body>
</html>

该范例的示例代码见assets\www\location.html

你可以修改工程文件目录中的res\xml\config.xml文件，将工程运行的页面改为location.html：

打开config.xml文件，将其中的<content src="helloword.html" />改为<content src="location.html" />，然后运行。


四、截屏范例

你可以使用iClient JavaScript产品轻松实现截屏功能，产品中提供了截屏控件

具体步骤如下：

1.引入截屏控件代码：

<script src="js/ShotScreenControl.js"></script>

2.创建截屏控件实例，并调用其截屏方法：

var shotScreenCtl = new SuperMap.ShotScreenControl();
shotScreenCtl.shot();

完整范例代码如下：

<!DOCTYPE HTML>
<html>
<head>  
    <meta charset="utf-8" /> 
    <title>SuperMap iClient for JavaScript</title>
    <style>
        #map{
            border:0px solid;
        }
    </style>
    <script type="text/javascript" src="js/cordova-2.7.0.js"></script>
    <script src="libs/SuperMap.Include.js"></script>
    <script src="js/ShotScreenControl.js"></script>
    <script type="text/javascript">
    var map, layer,markerLayer,shotScreenCtl;
    function init() {
        SuperMap.Util.setApp(true);
        map = new SuperMap.Map("map",{controls: [                      
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({dragPanOptions: {enableKinetic: true}})
            ]
        });   
        layer = new SuperMap.Layer.CloudLayer();
        map.addLayers([layer]);      
        map.setCenter(new SuperMap.LonLat(11615044.272732, 4422334.5114479), 4);     
    }
    function shot(){
        if(!shotScreenCtl){
            shotScreenCtl = new SuperMap.ShotScreenControl();
        }
        shotScreenCtl.shot();
    }
    document.addEventListener("deviceready",init,false);
    </script>
</head>
<body>
    <div id="map" style="position:absolute;left:0px;right:0px;width:100%;height:100%;"></div> 
    <input id="button" style="position:absolute;right:5px;top:5px;z-index:999" value="截屏" type="button" ontouchend="shot()"></input>    
</body>
</html>

该范例的示例代码见assets\www\shotscreen.html

你可以修改工程文件目录中的res\xml\config.xml文件，将工程运行的页面改为shotscreen.html：

打开config.xml文件，将其中的<content src="helloword.html" />改为<content src="shotscreen.html" />，然后运行。

版权所有 © 1997-2015.  北京超图软件股份有限公司